|
|
@@ -2,39 +2,85 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<ujp-navbar title="" ref='navbar' id='navbar' :height='nav_height'>
|
|
|
- <u-search id='search' ref='search' :input-style='inputStyle' placeholder="搜索站点名称" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>
|
|
|
+ <u-search id='search' ref='search' :input-style='inputStyle' placeholder="查询站点地址或站名" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>
|
|
|
</ujp-navbar>
|
|
|
<view class="recommend">推荐充电站</view>
|
|
|
- <view class="charing-slow" v-for="(item,index) in stations_filter" :key="item.id" @click="stationDetail(item)">
|
|
|
- <text :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
|
|
|
- <view class="address">
|
|
|
- {{item.position}}
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <view class="num">{{item.price.toFixed(2)}}</view> <view class="unit">
|
|
|
- 元/度 起
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="park">
|
|
|
- <text class="park-p">p</text>
|
|
|
- <text class="park-text">{{item.park}}</text>
|
|
|
- </view>
|
|
|
- <view class="free">
|
|
|
- <view class="free-num">
|
|
|
- <text style="color:#009143;">空闲{{item.idleNum}}</text>/总数{{item.total}}
|
|
|
- </view>
|
|
|
- <view class="distance" @click="navigateTo(item)">
|
|
|
- <text class="iconfont distance-font"></text>
|
|
|
- {{item.distance!=null&&item.distance>0.1 ? item.distance.toFixed(1)+'公里':'小于100米'}} {{item.time.toFixed(0)}}分钟
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="carNone" v-if="stationslist.length == 0">
|
|
|
+ <img src="static/img/暂无数据-缺省页.png" alt="">
|
|
|
+ <p class="oldTextjp2" oldstyle="font-size: 18px;">暂无可用充电站</p>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-for="(item,index) in stationslist" :key="item.id" class="charing-slow" @click="stationDetail(item)">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="address">
|
|
|
+ <view class="name oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-if="item.distance != '99999999'">
|
|
|
+ <text class="iconfont" style="color:#666666"></text>
|
|
|
+ {{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
|
|
|
+ </view>
|
|
|
+ <view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
|
|
|
+ <text class="iconfont" style="color:#666666"></text>
|
|
|
+ 暂无定位
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sign" >
|
|
|
+ {{item.address}}
|
|
|
+ </view>
|
|
|
+ <view class="sign" v-if="item.stationType!=50">
|
|
|
+ <view class="sign-1" v-if="item.giveDiscount">服务费{{item.discountRatio/10}}折</view>
|
|
|
+ <view class="sign-2" v-if="item.tagList.length != 0" v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price-free price-freeList">
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-1">
|
|
|
+ <text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
|
|
|
+ : (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
|
|
|
+ <text class="unit " oldstyle="font-size: 14px;">
|
|
|
+ 元/度 起
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
|
|
|
+ <text class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
|
|
|
+ <text class="unit">元/度 起</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="free">
|
|
|
+ <view class="fast" v-if="item.fastNum">
|
|
|
+ <view class="fast-font">
|
|
|
+ 快
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{item.fastAvailableNum}}/{{item.fastNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slow" v-if="item.slowNum">
|
|
|
+ <view class="slow-font">
|
|
|
+ 慢
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{item.slowAvailableNum}}/{{item.slowNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-divider margin-top="20" bg-color="#F2F4F4" v-if="stationslist.length == recordsTotal">已经到底了</u-divider>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
let _self;
|
|
|
- import * as api from '@/apis/site.js';
|
|
|
+ import * as API from '@/apis/site.js';
|
|
|
import * as WxJsApi from '@/utils/wxJsApi.js'
|
|
|
import MapLoader from '@/utils/AMap'
|
|
|
export default {
|
|
|
@@ -45,13 +91,15 @@
|
|
|
elderMode:false,
|
|
|
inputStyle:{
|
|
|
backgroundColor: 'transparent',
|
|
|
- "font-size":'36rpx',
|
|
|
- "font-weight":"normal"
|
|
|
- },
|
|
|
+ "font-size":'32rpx',
|
|
|
+
|
|
|
+ },
|
|
|
+ pageIndex:1,
|
|
|
+ recordsTotal: 0,
|
|
|
nav_height:54,
|
|
|
userId:'',
|
|
|
keyword:'',
|
|
|
- stations_filter:[],
|
|
|
+ stationslist:[],
|
|
|
stations:[
|
|
|
/* {name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idleNum:10,total:10,distance:0.1,time:1,type:'慢充',park:'2小时免费停车'},
|
|
|
{name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idleNum:10,total:10,distance:0.15,time:12,type:'快充',park:'3小时免费停车'},
|
|
|
@@ -92,18 +140,18 @@
|
|
|
this.userId = this.carhelp.getPersonInfo().id;
|
|
|
|
|
|
}
|
|
|
- WxJsApi.getWxConfig(['getLocation','addEventListener']).then((res)=>{
|
|
|
+ WxJsApi.getWxConfig(['getLocation','openLocation', 'addEventListener']).then((res)=>{
|
|
|
|
|
|
- // this.message=JSON.stringify(res)
|
|
|
- // uni.showToast({
|
|
|
- // title:JSON.stringify(res)
|
|
|
- // })
|
|
|
- //(res)
|
|
|
-
|
|
|
+
|
|
|
}).catch(error => {
|
|
|
- //(res)
|
|
|
+
|
|
|
})
|
|
|
this.getPoint();
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.stationslist.length < this.recordsTotal) {
|
|
|
+ this.myLoadmore();
|
|
|
+ }
|
|
|
},
|
|
|
// conponents:{charingSlows},
|
|
|
methods: {
|
|
|
@@ -114,7 +162,7 @@
|
|
|
let data = {
|
|
|
backgroundColor: 'transparent',
|
|
|
"font-size":'32rpx',
|
|
|
- "font-weight":"bold!important"
|
|
|
+
|
|
|
};
|
|
|
this.inputStyle = data;
|
|
|
}
|
|
|
@@ -124,14 +172,30 @@
|
|
|
let data ={
|
|
|
backgroundColor: 'transparent',
|
|
|
"font-size":'32rpx',
|
|
|
- "font-weight":"normal"
|
|
|
+
|
|
|
};
|
|
|
this.inputStyle = data;
|
|
|
}
|
|
|
},
|
|
|
navigateTo(item){
|
|
|
-
|
|
|
- window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+
|
|
|
+ })
|
|
|
+ WxJsApi.openLocation({
|
|
|
+ latitude:parseFloat( item.latitude),//目的地latitude
|
|
|
+ longitude:parseFloat( item.longitude),//目的地longitude
|
|
|
+ name: item.name,
|
|
|
+ address: item.address,
|
|
|
+ scale: 15,//地图缩放大小，可根据情况具体调整
|
|
|
+ success(res) {
|
|
|
+ uni.hideLoading()
|
|
|
+ },
|
|
|
+ complete() {
|
|
|
+ // uni.hideLoading()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
|
|
|
|
|
|
},
|
|
|
stationDetail(item){
|
|
|
@@ -158,31 +222,7 @@
|
|
|
var myDistance = lnglat.distance([obj.longitude, obj.latitude]);
|
|
|
obj.distance = myDistance/1000;
|
|
|
obj.time = myDistance/500;
|
|
|
- /*
|
|
|
- var map=new AMap.Map("container", {
|
|
|
- center: [116.397559, 39.89621],
|
|
|
- zoom: 14
|
|
|
- });
|
|
|
- AMap.plugin('AMap.Driving', function() {
|
|
|
- var driving = new AMap.Driving({
|
|
|
- // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
|
|
- policy: AMap.DrivingPolicy.LEAST_TIME
|
|
|
- })
|
|
|
-
|
|
|
- //var startLngLat = [116.379028, 39.865042]
|
|
|
- //var endLngLat = [116.427281, 39.903719]
|
|
|
-
|
|
|
- driving.search(startLngLat, endLngLat, function (status, result) {
|
|
|
- //(result)
|
|
|
- //(result.routes[0].time)//秒
|
|
|
- //(result.routes[0].distance)//米
|
|
|
- obj.distance = result.routes[0].distance/1000;
|
|
|
- obj.time = result.routes[0].time/60;
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
- */
|
|
|
+
|
|
|
|
|
|
}, e => {
|
|
|
//_this.mui.toast('地图加载失败');
|
|
|
@@ -191,7 +231,9 @@
|
|
|
},
|
|
|
getPoint() {
|
|
|
var _this = this;
|
|
|
- //('getPoint')
|
|
|
+ //('getPoint')
|
|
|
+ this.getChargingStationData(true);
|
|
|
+
|
|
|
WxJsApi.getLocation().then((res) => {
|
|
|
|
|
|
var latitude = parseFloat(res.latitude);
|
|
|
@@ -199,155 +241,79 @@
|
|
|
_this.latitude = latitude;
|
|
|
_this.longitude = longitude;
|
|
|
|
|
|
- let data = {latitude:_this.latitude,longtitude:_this.longitude};
|
|
|
- this.getChargingStationData(data);
|
|
|
+ this.getChargingStationData(true);
|
|
|
|
|
|
- //('当前位置' +JSON.stringify(data))
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
|
|
|
- //this.latitude2 = latitude;
|
|
|
- //this.longitude2 = longitude;
|
|
|
- /*uni.showToast({
|
|
|
- title:JSON.stringify(res)
|
|
|
- })*/
|
|
|
- //this.message=JSON.stringify(res)
|
|
|
- }).catch(error => {
|
|
|
uni.showToast({
|
|
|
title:JSON.stringify(error)
|
|
|
})
|
|
|
})
|
|
|
+ },
|
|
|
+ myLoadmore() {
|
|
|
+ this.pageIndex += 1;
|
|
|
+ this.getChargingStationData()
|
|
|
},
|
|
|
- getChargingStationData(pos){
|
|
|
- //('getChargingStationData')
|
|
|
- //return;
|
|
|
- if(pos == null)
|
|
|
- return ;
|
|
|
- let data1 = { pageIndex:0,pageSize:20};
|
|
|
- if(pos.longtitude != null)
|
|
|
- data1.longitude = pos.longtitude.toString();
|
|
|
- if(pos.latitude != null)
|
|
|
- data1.latitude = pos.latitude.toString();
|
|
|
- //data1.findType = "0";
|
|
|
- //data1.type = "1";
|
|
|
- //data1.online = "0";
|
|
|
-/* if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('直流快充')>=0)
|
|
|
- data1.type = "1";
|
|
|
- else if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('交流慢充')>=0)
|
|
|
- data1.type = "2";
|
|
|
-
|
|
|
- if(this.info.miles_type[this.preference.miles_index].distance!=null)
|
|
|
- data1.radius = this.info.miles_type[this.preference.miles_index].distance.toString();
|
|
|
- data1.online = "0";//在线
|
|
|
- if(pos.findType != null)
|
|
|
- data1.findType = pos.findType;
|
|
|
- else
|
|
|
- data1.findType = "0";
|
|
|
-
|
|
|
- if(this.preference.obc_power.minValue!=null)
|
|
|
- data1.powerStart = this.preference.obc_power.minValue.toString();
|
|
|
- if(this.preference.obc_power.maxValue!=null)
|
|
|
- data1.powerEnd = this.preference.obc_power.maxValue.toString();
|
|
|
- */
|
|
|
- //('data1'+JSON.stringify(data1))
|
|
|
- api.searchStationData(data1).then(function(res){
|
|
|
-
|
|
|
- //('getChargingStationData'+JSON.stringify(res))
|
|
|
- if(!res.result || !res.data || !res.data.data)
|
|
|
- {
|
|
|
- //('getChargingStationData res nulll')
|
|
|
- return;
|
|
|
- }
|
|
|
- let items = res.data.data;
|
|
|
-
|
|
|
- _self.stations_filter = [];
|
|
|
- for(let i = 0;i<items.length;i++)
|
|
|
- {
|
|
|
- let obj = {
|
|
|
- name:'',
|
|
|
- position:'',
|
|
|
- price:1.2,
|
|
|
- idleNum:10,
|
|
|
- total:10,
|
|
|
- type: data1.type == "2" ? '慢充':'快充',
|
|
|
- id: i,
|
|
|
- distance:0.9,
|
|
|
- time:9,
|
|
|
- park: '2小时免费停车',
|
|
|
-// longitude: 112.28541 + i * 0.001,
|
|
|
-// latitude: 30.308354 + i * 0.01
|
|
|
- };
|
|
|
- if(items[i].id != null)
|
|
|
- obj.id = items[i].id;
|
|
|
- else
|
|
|
- continue;
|
|
|
- if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
|
|
|
- {
|
|
|
- obj.type = '快/慢'
|
|
|
- }
|
|
|
- if(items[i].costPrice!=null)
|
|
|
- obj.price = items[i].costPrice;
|
|
|
-
|
|
|
- if(items[i].name!=null)
|
|
|
- obj.name = items[i].name;
|
|
|
- if(items[i].address!=null)
|
|
|
- obj.position = items[i].address;
|
|
|
- if(items[i].coostPrice!=null)
|
|
|
- obj.price = items[i].coostPrice;
|
|
|
- if(items[i].availableNum!=null)
|
|
|
- obj.idleNum = items[i].availableNum;
|
|
|
- if(items[i].totalNum!=null)
|
|
|
- obj.total = items[i].totalNum;
|
|
|
- if(items[i].longitude!=null)
|
|
|
- obj.longitude = items[i].longitude;
|
|
|
- if(items[i].latitude!=null)
|
|
|
- obj.latitude = items[i].latitude;
|
|
|
- if(items[i].distance!=null)
|
|
|
- obj.distance = items[i].distance;
|
|
|
- if(items[i].time != null){
|
|
|
- obj.time = items[i].time;
|
|
|
- }
|
|
|
- if(items[i].park != null)
|
|
|
- obj.park = items[i].park;
|
|
|
-
|
|
|
-
|
|
|
- var startLngLat = {longitude: _self.longitude,latitude: _self.latitude};
|
|
|
- //var endLngLat = [obj.longitude,obj.latitude];
|
|
|
- _self.calculateDistance(startLngLat,obj);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /*
|
|
|
- _self.item.distance = myDistance/1000;
|
|
|
- _self.item.time = myDistance/500;
|
|
|
-
|
|
|
- let obj = {name:items[i].name,
|
|
|
- position:items[i].address,
|
|
|
- price:items[i].coostPrice,
|
|
|
- idleNum:items[i].availableNum,
|
|
|
- total:items[i].totalNum,
|
|
|
- distance:0.1,
|
|
|
- time:1,
|
|
|
- type:'慢充',
|
|
|
- id: items[i].id,
|
|
|
- park: i%2 == 0? '以实际费用为准':'2小时免费停车',
|
|
|
- longitude: items[i].longitude,
|
|
|
- latitude: items[i].latitude
|
|
|
- };*/
|
|
|
- _self.stations.push(obj);
|
|
|
- }
|
|
|
- _self.stations_filter = _self.stations;
|
|
|
- //_self.$refs.amap.searchBtn([_self.longitude, _self.latitude],_self.stationsmap)
|
|
|
- //_self.$refs.amap.setChargerList(_self.stationsmap);
|
|
|
- //if(_self.stationsmap.length>0)
|
|
|
- // _self.$refs.amap.updateCharger(_self.stationsmap[0]);
|
|
|
-
|
|
|
- },function(err){
|
|
|
- uni.showToast({
|
|
|
- title:err
|
|
|
- })
|
|
|
- //('getChargingStationData err'+JSON.stringify(err))
|
|
|
- }
|
|
|
- )
|
|
|
- //('getChargingStationData end')
|
|
|
+ getChargingStationData(bl){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ if (bl) {
|
|
|
+ this.stationslist = [];
|
|
|
+ this.pageIndex = 1;
|
|
|
+ }
|
|
|
+ var data = {
|
|
|
+ pageIndex: this.pageIndex,
|
|
|
+ pageSize:20,
|
|
|
+
|
|
|
+ stationName:this.keyword,
|
|
|
+ findType: 0,
|
|
|
+
|
|
|
+ };
|
|
|
+ if(this.longitude&&this.latitude){
|
|
|
+ data.longitude=this.longitude;
|
|
|
+ data.latitude=this.latitude;
|
|
|
+ }
|
|
|
+ if (this.carhelp.getPersonInfo()) {
|
|
|
+ data.openId=this.carhelp.getOpenId()
|
|
|
+ }
|
|
|
+
|
|
|
+ API.getChargingStationData(data).then((response) => {
|
|
|
+ if (bl) {
|
|
|
+ this.stationslist = [];
|
|
|
+ this.pageIndex = 1;
|
|
|
+ }
|
|
|
+ console.log(response)
|
|
|
+ var stationDataList=response.data.data
|
|
|
+ if(this.longitude&&this.latitude){
|
|
|
+ MapLoader().then(AMap1 => {
|
|
|
+ for(var i in stationDataList){
|
|
|
+ var item=stationDataList[i]
|
|
|
+
|
|
|
+ var lnglat = new AMap.LngLat(this.longitude,this.latitude);
|
|
|
+ var myDistance = lnglat.distance([item.longitude,item.latitude]);
|
|
|
+ item.distance = myDistance/1000;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.stationslist = [
|
|
|
+ ...this.stationslist,
|
|
|
+ ...stationDataList
|
|
|
+ ];
|
|
|
+ this.recordsTotal = response.data.recordsTotal;
|
|
|
+ //this.detail=response.data.monthlyRentCard
|
|
|
+ uni.hideLoading()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
back(){
|
|
|
//('back');
|
|
|
@@ -357,16 +323,7 @@
|
|
|
},
|
|
|
search(){
|
|
|
//('search keyword'+this.keyword + ' '+JSON.stringify(this.stations))
|
|
|
- this.stations_filter = []
|
|
|
- if(this.keyword.length<=0){
|
|
|
- this.stations_filter = this.stations
|
|
|
- return;
|
|
|
- }
|
|
|
- for(let i = 0;i< this.stations.length;i++){
|
|
|
- if(this.stations[i].name.indexOf(this.keyword)>=0){
|
|
|
- this.stations_filter.push(this.stations[i]);
|
|
|
- }
|
|
|
- }
|
|
|
+ this.getChargingStationData(true)
|
|
|
|
|
|
//('search ' + this.keyword);
|
|
|
|
|
|
@@ -398,194 +355,337 @@
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
- .charing-slow {
|
|
|
- width: 91%;
|
|
|
- background-color: #fff;
|
|
|
- margin: 24rpx auto 0;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 20rpx 24rpx 0rpx;
|
|
|
+ .charing-slow-2{
|
|
|
+ margin: 0 0 10px 0 !important;
|
|
|
+ // border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+ .charing-slow {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 36rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 40rpx 24rpx 24rpx;
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+.fast-charge {
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 50px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(208, 209, 255, 100);
|
|
|
+ color: rgba(56, 60, 255, 100);
|
|
|
|
|
|
- .trickle-charge {
|
|
|
- display: inline-block;
|
|
|
- width: 88rpx;
|
|
|
-/* height: 40rpx;
|
|
|
- line-height: 40rpx;*/
|
|
|
- border-radius: 100rpx;
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- height:themed('font-size5')
|
|
|
- }
|
|
|
-/* font-size: 24rpx;*/
|
|
|
- text-align: center;
|
|
|
+ margin: auto 0;
|
|
|
+ @include themeify{
|
|
|
+ width: themed('font-size18');
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ line-height: themed('font-size7');
|
|
|
+ height: themed('font-size8');
|
|
|
}
|
|
|
- .fast-trickle-charge{
|
|
|
- display: inline-block;
|
|
|
- width: 132rpx;
|
|
|
-/* height: 40rpx;
|
|
|
- line-height: 40rpx;*/
|
|
|
- border-radius: 100rpx;
|
|
|
- background-color: #00BAC8;
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- height:themed('font-size5')
|
|
|
- }
|
|
|
-/* font-size: 24rpx;*/
|
|
|
- text-align: center;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fast-trickle-charge {
|
|
|
+ display: inline-block;
|
|
|
+ margin: auto 0;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(172, 236, 240, 100);
|
|
|
+ color: rgba(0, 124, 134, 100);
|
|
|
+ @include themeify{
|
|
|
+ width: themed('font-size18');
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ line-height: themed('font-size7');
|
|
|
+ height: themed('font-size8');
|
|
|
}
|
|
|
- .fast-charge {
|
|
|
- display: inline-block;
|
|
|
- width: 88rpx;
|
|
|
- /* height: 40rpx;
|
|
|
- line-height: 40rpx;*/
|
|
|
- border-radius: 100rpx;
|
|
|
- background-color: #9d9fff;
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
-/* font-size: 24rpx;*/
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- height:themed('font-size5')
|
|
|
- }
|
|
|
- text-align: center;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .trickle-charge {
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: auto 0;
|
|
|
+
|
|
|
+ background-color: rgba(186, 240, 215, 100);
|
|
|
+ color: rgba(0, 130, 69, 100);
|
|
|
+ @include themeify{
|
|
|
+ width: themed('font-size18');
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ line-height: themed('font-size7');
|
|
|
+ height: themed('font-size8');
|
|
|
+ }
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .station-items {
|
|
|
+ display: inline-block;
|
|
|
+/* height: 16px;
|
|
|
+ line-height: 16px;*/
|
|
|
+ @include themeify{
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ font-weight: themed('fontWeight');
|
|
|
+ line-height: themed('font-size3');
|
|
|
+ height: themed('font-size3');
|
|
|
}
|
|
|
|
|
|
- .station-items {
|
|
|
- display: inline-block;
|
|
|
-/* height: 32rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- */
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size3');
|
|
|
- line-height: themed('font-size3');
|
|
|
- height:themed('font-size3');
|
|
|
- font-weight: themed('fontWeight');
|
|
|
- letter-spacing: themed('letterSpacing');
|
|
|
+ margin-left: 8rpx;
|
|
|
+ color: #101010;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ //
|
|
|
+
|
|
|
+ .address {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name{
|
|
|
+ font-size: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .distance{
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ width: 90px;
|
|
|
+ .iconfont{
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 2px;
|
|
|
}
|
|
|
- margin-left: 8rpx;
|
|
|
- color: #101010;
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
+
|
|
|
+ @include themeify{
|
|
|
+ font-size: themed('font-size5');
|
|
|
+ line-height: themed('font-size7');
|
|
|
+ }
|
|
|
+/* font-size: 11px;*/
|
|
|
+font-weight: 600;
|
|
|
+ color: #101010;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-free{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ line-height: 40rpx;
|
|
|
+
|
|
|
+ .price-1{
|
|
|
+
|
|
|
+
|
|
|
+ .num {
|
|
|
+
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
+
|
|
|
+
|
|
|
+ font-size: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-family: Roboto-medium;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ // font-size: 12px;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ @include themeify{
|
|
|
+ // font-size: themed('font-size2');
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ height: themed('font-size2');
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ text-align: left;
|
|
|
+ font-family: AlibabaPuHui-regular;
|
|
|
+
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-2{
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ margin-left: 6rpx;
|
|
|
+ text-decoration: line-through;
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .free{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .slow,.fast{
|
|
|
+ display: flex;
|
|
|
+ .fast-font{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(186, 240, 215, 100);
|
|
|
+ color: rgba(0, 130, 69, 100);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2rpx;
|
|
|
+ }
|
|
|
+ .slow-font{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(226, 226, 226, 100);
|
|
|
+ color: rgba(128, 128, 128, 100);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2rpx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 32rpx;color: rgba(0, 145, 67, 100);
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .slow{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .park {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .park-p {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+/* height: 18px;
|
|
|
+ line-height: 12px;*/
|
|
|
+ @include themeify{
|
|
|
+ line-height: themed('font-size1');
|
|
|
+ height: themed('font-size4');
|
|
|
+ }
|
|
|
+ text-align: center;
|
|
|
+ // background-color: rgba(125, 177, 255, 100);
|
|
|
+ background-color: #00b962;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .park-text {
|
|
|
+ display: inline-block;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ @include themeify{
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ height:themed('font-size4');
|
|
|
+ }
|
|
|
+/* font-size: 12px;*/
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 4px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ #container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
- .address {
|
|
|
- margin-top: 16rpx;
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size1');
|
|
|
- line-height: themed('font-size3');
|
|
|
-/* height:themed('font-size11')*/
|
|
|
- }
|
|
|
- /*
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: 22rpx;*/
|
|
|
- color: rgba(119, 119, 119, 100);
|
|
|
+
|
|
|
+ .distance-font {
|
|
|
+ @include themeify{
|
|
|
+ font-size: themed('font-size3');
|
|
|
}
|
|
|
- .price{
|
|
|
- display: flex;
|
|
|
- @include themeify{
|
|
|
- height:themed('font-size5');
|
|
|
- }
|
|
|
-/* height: 40rpx;*/
|
|
|
- .num{
|
|
|
- height: 40rpx;
|
|
|
- color: rgba(255, 98, 0, 100);
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size5');
|
|
|
- }
|
|
|
-/* font-size: 40rpx;*/
|
|
|
- text-align: left;
|
|
|
- font-family: Roboto-medium;
|
|
|
- }
|
|
|
- .unit{
|
|
|
-/* height: 28rpx;
|
|
|
- line-height: 28rpx;*/
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size2');
|
|
|
- line-height: themed('font-size2');
|
|
|
- height:themed('font-size2')
|
|
|
- }
|
|
|
-/* font-size: 28rpx;*/
|
|
|
- text-align: left;
|
|
|
- font-family: AlibabaPuHui-regular;
|
|
|
- margin-top: 12rpx;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
+/* font-size: 16px*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .position{
|
|
|
+ color: #1677ff;
|
|
|
+ @include themeify{
|
|
|
+ font-size: themed('font-size2');
|
|
|
}
|
|
|
- .park {
|
|
|
- margin-top: 16rpx;
|
|
|
- display: flex;
|
|
|
- .park-p {
|
|
|
- display: inline-block;
|
|
|
- width: 40rpx;
|
|
|
-/* height: 36rpx;
|
|
|
- line-height: 24rpx;*/
|
|
|
- @include themeify{
|
|
|
- line-height: themed('font-size1');
|
|
|
- height:themed('font-size3')
|
|
|
- }
|
|
|
- text-align: center;
|
|
|
- background-color: rgba(125, 177, 255, 100);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+/* font-size: 14px*/
|
|
|
+ }
|
|
|
+ .position-box{
|
|
|
+ position:absolute;
|
|
|
+ top: 341px;
|
|
|
+ right: 118px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ /* line-height: 20px; */
|
|
|
+ background-color: rgba(22, 119, 255, 100);
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 100);
|
|
|
+ border-radius: 999px;
|
|
|
+ }
|
|
|
+ .min-h{
|
|
|
+ min-height: 65px;
|
|
|
+ }
|
|
|
+ .sign{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
- .park-text {
|
|
|
- display: inline-block;
|
|
|
- width: 600rpx;
|
|
|
- /*height: 34rpx;*/
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- height:themed('font-size4')
|
|
|
- }
|
|
|
-/* font-size: 24rpx;*/
|
|
|
- text-align: left;
|
|
|
- margin-left: 8rpx;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
+ .sign-1{
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(255, 139, 0, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(255, 139, 0, 100);
|
|
|
+ padding: 0 4px;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
- .free{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 104rpx;
|
|
|
- border-top: 2rpx solid rgba(238, 242, 240, 100);
|
|
|
- margin-top: 20rpx;
|
|
|
- .free-num{
|
|
|
- line-height: 104rpx;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- font-weight: themed('fontWeight');
|
|
|
- letter-spacing: themed('letterSpacing');
|
|
|
- }
|
|
|
-/* font-size: 32rpx*/
|
|
|
- }
|
|
|
- .distance{
|
|
|
-/* width: 260rpx;*/
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- width: themed('buttonWidth');
|
|
|
- }
|
|
|
-/* font-size: 28rpx;*/
|
|
|
- background-color: #00b962;
|
|
|
- border-radius: 100rpx;
|
|
|
- margin: 24rpx;
|
|
|
- text-align: center;
|
|
|
- .distance-font{
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- }
|
|
|
-/* font-size: 32rpx*/
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ .sign-2{
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(204, 204, 204, 100);
|
|
|
+ padding: 0 4px;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .park-text2 {
|
|
|
+ width: 140%;
|
|
|
+ }
|
|
|
+ .park-text3 {
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .carNone{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin-top: -60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
zkx