|
@@ -1,8 +1,8 @@
|
|
|
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title="">
|
|
|
- <u-search class="search" placeholder="搜索站点名称" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>
|
|
|
+ <u-navbar title="" ref='navbar' id='navbar' height='44'>
|
|
|
+ <u-search id='search' ref='search' :height="search_height" placeholder="搜索站点名称" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>
|
|
|
</u-navbar>
|
|
|
<view class="recommend">推荐充电站</view>
|
|
|
<view class="charing-slow" v-for="(item,index) in stations_filter" :key="item.id">
|
|
@@ -41,7 +41,7 @@
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
-
|
|
|
+ search_height:88,
|
|
|
userId:'',
|
|
|
keyword:'',
|
|
|
stations_filter:[],
|
|
@@ -56,6 +56,15 @@
|
|
|
},
|
|
|
onLoad(op){
|
|
|
_self = this;
|
|
|
+
|
|
|
+ //var px1 = uni.upx2px(88);
|
|
|
+
|
|
|
+ var rpx = 40/(uni.upx2px(100)/100);
|
|
|
+ // 验证上面rpx的值
|
|
|
+ var px = uni.upx2px(rpx);
|
|
|
+ this.search_height = rpx;
|
|
|
+ // console.log('搜索框高度'+JSON.stringify(rpx))
|
|
|
+ // console.log('搜索框高度'+JSON.stringify(px))
|
|
|
/*
|
|
|
if(op!= null && op.stationlist != null){
|
|
|
this.stations = decodeURIComponent(op.stationlist)
|
|
@@ -306,22 +315,29 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+
|
|
|
+ .navbar{
|
|
|
+ height:100%
|
|
|
+ }
|
|
|
+ .search{
|
|
|
+ height:100%
|
|
|
+ }
|
|
|
/deep/.u-content[data-v-1a326067] {
|
|
|
flex: 0.95;
|
|
|
color: #bdbdbd;
|
|
|
}
|
|
|
|
|
|
/deep/.u-action {
|
|
|
- margin-right: 0px;
|
|
|
+ margin-right: 0rpx;
|
|
|
color: #c8c8c8;
|
|
|
}
|
|
|
|
|
|
.recommend {
|
|
|
width: 100%;
|
|
|
- height: 44px;
|
|
|
- line-height: 44px;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
color: #101010;
|
|
|
- padding: 0 16px;
|
|
|
+ padding: 0 32rpx;
|
|
|
background-color: #fff;
|
|
|
font-weight: 600;
|
|
|
}
|
|
@@ -329,90 +345,90 @@
|
|
|
.charing-slow {
|
|
|
width: 91%;
|
|
|
background-color: #fff;
|
|
|
- margin: 12px auto 0;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px 12px 0px;
|
|
|
+ margin: 24rpx auto 0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx 24rpx 0rpx;
|
|
|
|
|
|
.trickle-charge {
|
|
|
display: inline-block;
|
|
|
- width: 44px;
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
- border-radius: 50px;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
background-color: rgba(0, 185, 98, 100);
|
|
|
color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 24rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.fast-trickle-charge{
|
|
|
display: inline-block;
|
|
|
- width: 66px;
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
- border-radius: 50px;
|
|
|
+ width: 132rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
background-color: #00BAC8;
|
|
|
color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 24rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.fast-charge {
|
|
|
display: inline-block;
|
|
|
- width: 44px;
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
- border-radius: 50px;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
background-color: #9d9fff;
|
|
|
color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 24rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.station-items {
|
|
|
display: inline-block;
|
|
|
- height: 16px;
|
|
|
- line-height: 16px;
|
|
|
- font-size: 16px;
|
|
|
- margin-left: 4px;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
color: #101010;
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
- margin-top: 8px;
|
|
|
- line-height: 16px;
|
|
|
- font-size: 11px;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
color: rgba(119, 119, 119, 100);
|
|
|
}
|
|
|
.price{
|
|
|
display: flex;
|
|
|
- height: 20px;
|
|
|
+ height: 40rpx;
|
|
|
.num{
|
|
|
- height: 20px;
|
|
|
+ height: 40rpx;
|
|
|
color: rgba(255, 98, 0, 100);
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 40rpx;
|
|
|
text-align: left;
|
|
|
font-family: Roboto-medium;
|
|
|
}
|
|
|
.unit{
|
|
|
- height: 14px;
|
|
|
- line-height: 14px;
|
|
|
+ height: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
color: rgba(102, 102, 102, 100);
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 28rpx;
|
|
|
text-align: left;
|
|
|
font-family: AlibabaPuHui-regular;
|
|
|
- margin-top: 6px;
|
|
|
- margin-left: 4px;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
.park {
|
|
|
- margin-top: 8px;
|
|
|
+ margin-top: 16rpx;
|
|
|
display: flex;
|
|
|
.park-p {
|
|
|
display: inline-block;
|
|
|
- width: 20px;
|
|
|
- height: 18px;
|
|
|
- line-height: 12px;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
text-align: center;
|
|
|
background-color: rgba(125, 177, 255, 100);
|
|
|
color: #fff;
|
|
@@ -420,37 +436,37 @@
|
|
|
|
|
|
.park-text {
|
|
|
display: inline-block;
|
|
|
- width: 300px;
|
|
|
- height: 17px;
|
|
|
+ width: 600rpx;
|
|
|
+ height: 34rpx;
|
|
|
color: rgba(102, 102, 102, 100);
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 24rpx;
|
|
|
text-align: left;
|
|
|
- margin-left: 4px;
|
|
|
- margin-top: 2px;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
}
|
|
|
}
|
|
|
.free{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- height: 52px;
|
|
|
- border-top: 1px solid rgba(238, 242, 240, 100);
|
|
|
- margin-top: 10px;
|
|
|
+ height: 104rpx;
|
|
|
+ border-top: 2rpx solid rgba(238, 242, 240, 100);
|
|
|
+ margin-top: 20rpx;
|
|
|
.free-num{
|
|
|
- line-height: 52px;
|
|
|
- font-size: 16px
|
|
|
+ line-height: 104rpx;
|
|
|
+ font-size: 32rpx
|
|
|
}
|
|
|
.distance{
|
|
|
- width: 130px;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
+ width: 260rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 28rpx;
|
|
|
background-color: #00b962;
|
|
|
- border-radius: 50px;
|
|
|
- margin: 12px;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ margin: 24rpx;
|
|
|
text-align: center;
|
|
|
.distance-font{
|
|
|
- font-size: 16px
|
|
|
+ font-size: 32rpx
|
|
|
}
|
|
|
|
|
|
}
|