|
@@ -1,6 +1,12 @@
|
|
<template>
|
|
<template>
|
|
<view>
|
|
<view>
|
|
- <ujp-navbar title="选购充电月卡"></ujp-navbar>
|
|
|
|
|
|
+ <ujp-navbar title="服务费包月会员" :background="{background: '#424a5d'}"
|
|
|
|
+ title-color="#ffffff"
|
|
|
|
+ :is-back="false">
|
|
|
|
+ <view class="iconfont service" @click="openModal">
|
|
|
|
+ 
|
|
|
|
+ </view>
|
|
|
|
+ </ujp-navbar>
|
|
<!-- 提示 -->
|
|
<!-- 提示 -->
|
|
<!-- <template>
|
|
<!-- <template>
|
|
<u-alert-tips type="warning" :title="title" :description="description" :show-icon="true"></u-alert-tips>
|
|
<u-alert-tips type="warning" :title="title" :description="description" :show-icon="true"></u-alert-tips>
|
|
@@ -15,35 +21,60 @@
|
|
<view class="carNone" v-if="isReady&&cardList.length == 0">
|
|
<view class="carNone" v-if="isReady&&cardList.length == 0">
|
|
<img src="static/img/暂无数据-缺省页.png" alt="">
|
|
<img src="static/img/暂无数据-缺省页.png" alt="">
|
|
<p class="" style="color: #bfdfd5;font-size: 18px;" >暂无月卡上架</p>
|
|
<p class="" style="color: #bfdfd5;font-size: 18px;" >暂无月卡上架</p>
|
|
- </view>
|
|
|
|
- <view
|
|
|
|
- v-for="(item,i) in cardList" :key="i"
|
|
|
|
- @click="checkboxChange(item.monthlyRentCard)"
|
|
|
|
- :style="'background-image: url('+item.monthlyRentCard.image+') ;'"
|
|
|
|
- class="card-1" >
|
|
|
|
- <view class="tag" v-if="item.monthlyRentCard.isVip">{{item.monthlyRentCard.platformText}}车主</view>
|
|
|
|
- <view class="tag" v-else-if="item.monthlyRentCard.remark">{{item.monthlyRentCard.remark}}</view>
|
|
|
|
- <view class="price">
|
|
|
|
|
|
+ </view>
|
|
|
|
+ <view class="user-card" v-if="ispay" >
|
|
|
|
+ <view class="head-img">
|
|
|
|
+ <img style="border-radius: 50px;"
|
|
|
|
+ v-if="userInfo.headImg" :src="userInfo.headImg" alt="">
|
|
|
|
+ <img v-else src="../../assets/img/headPortrait.png" alt="">
|
|
|
|
|
|
- <view class="current-price" >
|
|
|
|
- {{item.monthlyRentCard.price}}<text>元/月</text>
|
|
|
|
|
|
+ </view>
|
|
|
|
+ <view class="user-name">
|
|
|
|
+ <view class="name">
|
|
|
|
+ {{userInfo.realName?userInfo.realName:userInfo.nickName}}
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- <view class="original-cost" v-if="item.monthlyRentCard.isVip||item.monthlyRentCard.discount">
|
|
|
|
- 原价 {{item.monthlyRentCard.oldPrice}}元/月
|
|
|
|
|
|
+ <view class="sign">
|
|
|
|
+
|
|
|
|
+ {{userCard&&ispay?userCard.endTime.substring(0,10):''}}到期
|
|
</view>
|
|
</view>
|
|
- <p v-if="item.monthlyRentCard.buyNum">已有{{item.monthlyRentCard.buyNum}}人次购买</p>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- <view class="radio-box">
|
|
|
|
-
|
|
|
|
- <u-checkbox-group >
|
|
|
|
- <u-checkbox @change="checkboxChange(item.monthlyRentCard)" v-model="item.monthlyRentCard.checked" active-color="#000000" shape="circle" size="48"></u-checkbox>
|
|
|
|
- </u-checkbox-group>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
|
|
+ <scroll-view class="scroll-view_H" scroll-x="true"
|
|
|
|
+ :scrollWithAnimation="true"
|
|
|
|
+ @scroll="scroll" :scrollLeft="scrollLeftSet">
|
|
|
|
+ <view class="scroll-view-item_H" v-if="!ispay" v-for="(item,i) in cardList" :key="i" >
|
|
|
|
+ <view
|
|
|
|
+
|
|
|
|
+ @click="checkboxChange(item.monthlyRentCard)"
|
|
|
|
+ :style="'background-image: url('+item.monthlyRentCard.image+') ;'"
|
|
|
|
+ :class="'cardtab card-'+i " >
|
|
|
|
+ <view class="tag" v-if="item.monthlyRentCard.isVip">{{item.monthlyRentCard.platformText}}车主</view>
|
|
|
|
+ <view class="tag" v-else-if="item.monthlyRentCard.remark">{{item.monthlyRentCard.remark}}</view>
|
|
|
|
+ <view class="price">
|
|
|
|
+
|
|
|
|
+ <view class="current-price" >
|
|
|
|
+ <b>{{item.monthlyRentCard.price}}</b><text>元/月</text>
|
|
|
|
+ <!-- -->
|
|
|
|
+
|
|
|
|
+ <p v-if="item.monthlyRentCard.buyNum">已有{{item.monthlyRentCard.buyNum}}人次购买</p>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- <view class="original-cost" v-if="item.monthlyRentCard.isVip||item.monthlyRentCard.discount">
|
|
|
|
+ 原价 {{item.monthlyRentCard.oldPrice}}元/月
|
|
|
|
+ </view> -->
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </scroll-view>
|
|
|
|
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -79,57 +110,20 @@
|
|
</u-modal>
|
|
</u-modal>
|
|
<img id="qrcode" style="display: none;">
|
|
<img id="qrcode" style="display: none;">
|
|
|
|
|
|
- <!-- 按钮 -->
|
|
|
|
- <view class="button">
|
|
|
|
-
|
|
|
|
- <button class="btn " v-if="userInfo.userType=='1'" >游客无法购买月卡
|
|
|
|
- </button>
|
|
|
|
- <button class="btn " v-else-if="!isReady" >加载中
|
|
|
|
- </button>
|
|
|
|
- <button class="btn " v-else-if="ispay" > {{userCard&&ispay?userCard.endTime:''}}到期
|
|
|
|
- </button>
|
|
|
|
- <button class="btn " v-else-if="!endCardBool" >已下架
|
|
|
|
- </button>
|
|
|
|
- <button class="btn " v-else-if="!show2" @click="gotoGz">关注公众号
|
|
|
|
- </button>
|
|
|
|
- <button class="btn " v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')" >完善个人信息
|
|
|
|
- </button>
|
|
|
|
-
|
|
|
|
- <button class="btn " v-else-if="!cardList.length" @click="putShelf" >已下架
|
|
|
|
- </button>
|
|
|
|
- <button class="btn " @click="show = true" v-else-if="detail.isVip">
|
|
|
|
-
|
|
|
|
- <text style="font-size: 14px;">¥</text>
|
|
|
|
-
|
|
|
|
- <span >{{detail.price}}</span>
|
|
|
|
-
|
|
|
|
- <text class="price">{{detail.oldPrice}}</text> 开通充电月卡
|
|
|
|
|
|
+
|
|
|
|
+ <!-- 须知 -->
|
|
|
|
+ <view class="notice">
|
|
|
|
|
|
- <view class="position">
|
|
|
|
- <view id="talkbubble">{{detail.platformText}}车主</view>
|
|
|
|
- </view>
|
|
|
|
- </button>
|
|
|
|
- <button class="btn " @click="show = true" v-else>
|
|
|
|
-
|
|
|
|
- <text style="font-size: 14px;">¥</text>
|
|
|
|
|
|
+ <view class="title">
|
|
|
|
+ 可享一个月充电服务费<span style="color:#ec4f27">全免</span>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="line">
|
|
|
|
+ <view v-show="detail.type==1">· 仅限<b>非运营车</b>车主或<b>新用户</b>购买和使用</view>
|
|
|
|
+ <view>· 在指定充电站充电时,此单服务费<b>全免</b></view>
|
|
|
|
+ <view>· 不可抵扣电费、停车费、占位费</view>
|
|
|
|
+ </view>
|
|
|
|
|
|
- <span >{{detail.price}}</span>
|
|
|
|
-
|
|
|
|
- <text v-if="detail.discount" class="price">{{detail.oldPrice}}</text> 开通充电月卡
|
|
|
|
-
|
|
|
|
- <view class="position" v-if="detail.remark2">
|
|
|
|
- <view id="talkbubble">{{detail.remark2}}</view>
|
|
|
|
- </view>
|
|
|
|
- </button>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="hint">
|
|
|
|
- 开通表示阅读并同意<span @click="gotoUrl('pages/article/details?code=FWFZKXY')" style="text-decoration:underline">《服务费折扣协议》</span>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 须知 -->
|
|
|
|
- <view class="notice">
|
|
|
|
|
|
+
|
|
<u-divider fontSize="36" border-color="#bbc039" color="#101010">购卡须知</u-divider>
|
|
<u-divider fontSize="36" border-color="#bbc039" color="#101010">购卡须知</u-divider>
|
|
<view class="text">
|
|
<view class="text">
|
|
<view class="num">
|
|
<view class="num">
|
|
@@ -164,25 +158,161 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <view class="slogan-4"
|
|
|
|
- v-if="cardId||ispay"
|
|
|
|
|
|
+ <!-- <view
|
|
@click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+(ispay?userCard.rentCardId:cardId))">
|
|
@click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+(ispay?userCard.rentCardId:cardId))">
|
|
适用<br/>
|
|
适用<br/>
|
|
站点
|
|
站点
|
|
|
|
|
|
- </view>
|
|
|
|
|
|
+ </view> -->
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ <view class="notice2">
|
|
|
|
+ <view class="titleHead">适用充电站点</view>
|
|
|
|
+
|
|
|
|
+ <!-- 附近站点 -->
|
|
|
|
+ <view class="station" v-for="(stationData,i) in pageListGetObj.list" :key="i"
|
|
|
|
+
|
|
|
|
+ @click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
|
|
|
|
+ <view class="head">
|
|
|
|
+ <view class="title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
|
+ {{stationData.name}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="distance " >
|
|
|
|
+ <!-- <text class="iconfont" style="color:#666666"></text>{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}} -->
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="sign" v-if="stationData.stationType==50">
|
|
|
|
+ {{stationData.address}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="sign" v-else>
|
|
|
|
+ <template v-if="userInfo&&userInfo.userType!=1">
|
|
|
|
+ <!-- -->
|
|
|
|
+ <view class="sign-1" v-if="stationData.giveDiscount&&stationData.discountRatio&&stationData.discountRatio!=100">会员服务费{{discountRatio10(stationData.discountRatio)}}折</view>
|
|
|
|
+ <view class="sign-3" v-if="stationData.category=='超充'">160kW超充站</view>
|
|
|
|
+ <view class="sign-4" v-if="stationData.id=='3c554cea-f522-4281-b582-d761510ed91e'||stationData.id=='3865b3a3-13fd-461a-8145-ee9711df35a2'">夜间超低价</view>
|
|
|
|
+
|
|
|
|
+ <view class="sign-2" v-if="stationData.tagList.length != 0" v-for="(tagName,tagIndex) in stationData.tagList" :key="tagIndex">{{tagName}}</view>
|
|
|
|
+ </template>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="price-free oldTextClass">
|
|
|
|
+ <view class="price">
|
|
|
|
+ <view class="price-1">
|
|
|
|
+ <text class="num">
|
|
|
|
+ {{!stationData.giveDiscount ? (stationData.electricityPrice+stationData.servicePrice).toFixed(2)
|
|
|
|
+ : (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
|
|
|
|
+ <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="price-2 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
|
|
|
|
+ <text class="num">{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
|
|
|
|
+ <text class="unit ">元/度</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="free" >
|
|
|
|
+
|
|
|
|
+ <view class="fast" v-if="stationData.fastNum">
|
|
|
|
+ <view class="fast-font">
|
|
|
|
+ 快
|
|
|
|
+ </view>
|
|
|
|
+ <view class="num">
|
|
|
|
+ {{stationData.fastAvailableNum}}/{{stationData.fastNum}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="slow oldTextjp2"
|
|
|
|
+ oldstyle="margin-left: 1px;"
|
|
|
|
+ v-if="stationData.slowNum">
|
|
|
|
+ <view class="slow-font">
|
|
|
|
+ 慢
|
|
|
|
+ </view>
|
|
|
|
+ <view class="num">
|
|
|
|
+ {{stationData.slowAvailableNum}}/{{stationData.slowNum}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="bottom" @click="getPageList(true)" v-if="pageListGetObj.recordsTotal!=pageListGetObj.list.length" >
|
|
|
|
+ <view class="bot">
|
|
|
|
+ <view class="bot-line"></view>
|
|
|
|
+ <view class="bot-text " style="color: #00B962;text-align: center;margin-top: 10px" >点击查看更多(共{{pageListGetObj.recordsTotal}}站点)</view>
|
|
|
|
+ <view class="bot-line"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="bottom" v-else >
|
|
|
|
+ <view class="bot">
|
|
|
|
+ <view class="bot-line"></view>
|
|
|
|
+ <view class="bot-text " style="color: #00B962;text-align: center;margin-top: 10px;" >已经到底了</view>
|
|
|
|
+ <view class="bot-line"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- 按钮 -->
|
|
|
|
+ <view class="button" v-if="!ispay" >
|
|
|
|
+
|
|
|
|
+ <button class="btn " v-if="userInfo.userType=='1'" >游客无法购买月卡
|
|
|
|
+ </button>
|
|
|
|
+ <button class="btn " v-else-if="!isReady" >加载中
|
|
|
|
+ </button>
|
|
|
|
+ <button class="btn " v-else-if="ispay" > {{userCard&&ispay?userCard.endTime:''}}到期
|
|
|
|
+ </button>
|
|
|
|
+ <button class="btn " v-else-if="!endCardBool" >已下架
|
|
|
|
+ </button>
|
|
|
|
+ <button class="btn " v-else-if="!show2" @click="gotoGz">关注公众号
|
|
|
|
+ </button>
|
|
|
|
+ <button class="btn " v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')" >完善个人信息
|
|
|
|
+ </button>
|
|
|
|
+
|
|
|
|
+ <button class="btn " v-else-if="!cardList.length" @click="putShelf" >已下架
|
|
|
|
+ </button>
|
|
|
|
+ <button class="btn " @click="show = true" v-else-if="detail.isVip">
|
|
|
|
+
|
|
|
|
+ <text style="font-size: 14px;">¥</text>
|
|
|
|
+
|
|
|
|
+ <span >{{detail.price}}</span>
|
|
|
|
+
|
|
|
|
+ <text class="price">{{detail.oldPrice}}</text>开通充电月卡
|
|
|
|
+
|
|
|
|
+ <view class="position">
|
|
|
|
+ <view id="talkbubble">{{detail.platformText}}车主</view>
|
|
|
|
+ </view>
|
|
|
|
+ </button>
|
|
|
|
+ <button class="btn " @click="show = true" v-else>
|
|
|
|
+
|
|
|
|
+ <text style="font-size: 14px;"></text>
|
|
|
|
+
|
|
|
|
+ <span style="margin-right: 8px;">{{detail.price}}元</span>
|
|
|
|
+
|
|
|
|
+ <text v-if="detail.discount" class="price">{{detail.oldPrice}}</text> 开通服务费包月会员
|
|
|
|
+
|
|
|
|
+ <view class="position" v-if="detail.remark2">
|
|
|
|
+ <view id="talkbubble">{{detail.remark2}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </button>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view class="hint">
|
|
|
|
+ 开通表示阅读并同意<span @click="gotoUrl('pages/article/details?code=FWFZKXY')" style="text-decoration:underline;color: #C07C38;">《服务费折扣协议》</span>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <u-modal v-model="show3" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
|
|
|
|
+ :show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
|
|
|
|
+ :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
|
|
|
|
+ <Tabbar :current="1" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import * as API_weixin from '@/apis/weixin.js'
|
|
import * as API_weixin from '@/apis/weixin.js'
|
|
|
|
+ import * as API_site from '@/apis/site.js';
|
|
|
|
|
|
import * as Pay from '@/apis/weixin.js'
|
|
import * as Pay from '@/apis/weixin.js'
|
|
import * as API from '@/apis/card.js'
|
|
import * as API from '@/apis/card.js'
|
|
import * as loginApi from '@/apis/login.js'
|
|
import * as loginApi from '@/apis/login.js'
|
|
-
|
|
|
|
|
|
+import Tabbar from '@/components/Tabbar.vue';
|
|
import QRCode from 'qrcodejs2'
|
|
import QRCode from 'qrcodejs2'
|
|
import {
|
|
import {
|
|
newDate,
|
|
newDate,
|
|
@@ -191,7 +321,10 @@
|
|
import {
|
|
import {
|
|
wxPayJs
|
|
wxPayJs
|
|
} from '@/utils/wxpay'
|
|
} from '@/utils/wxpay'
|
|
- export default {
|
|
|
|
|
|
+ export default {
|
|
|
|
+ components:{
|
|
|
|
+ Tabbar
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
description: '盟主能量包本期限时优惠活动将于9月16日结束。',
|
|
description: '盟主能量包本期限时优惠活动将于9月16日结束。',
|
|
@@ -199,7 +332,8 @@
|
|
cardId: '',
|
|
cardId: '',
|
|
qrCodeImg: "",
|
|
qrCodeImg: "",
|
|
showModel: false,
|
|
showModel: false,
|
|
- cardList: [],
|
|
|
|
|
|
+ cardList: [],
|
|
|
|
+ pageList:[],
|
|
projectName: "",
|
|
projectName: "",
|
|
list: [{
|
|
list: [{
|
|
text: '微信',
|
|
text: '微信',
|
|
@@ -211,14 +345,19 @@
|
|
submitForm: {},
|
|
submitForm: {},
|
|
ykgz: '',
|
|
ykgz: '',
|
|
detail: {},
|
|
detail: {},
|
|
- ispay: false,
|
|
|
|
|
|
+ ispay: false,
|
|
|
|
+ show3: false,
|
|
show2: false,
|
|
show2: false,
|
|
show1: false,
|
|
show1: false,
|
|
infoSet: false,
|
|
infoSet: false,
|
|
infoSet1: false,
|
|
infoSet1: false,
|
|
userCard: null,
|
|
userCard: null,
|
|
isReady:false,
|
|
isReady:false,
|
|
- userInfo:{}
|
|
|
|
|
|
+ userInfo:{},
|
|
|
|
+ elderStatus:false,
|
|
|
|
+ consumerPhone:"",
|
|
|
|
+ scrollLeftSet:0,
|
|
|
|
+ scrollLeftOldSet:0,
|
|
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -226,18 +365,46 @@
|
|
this.projectName = process.car.ProjectName;
|
|
this.projectName = process.car.ProjectName;
|
|
|
|
|
|
},
|
|
},
|
|
- onReady() {
|
|
|
|
|
|
+ onReady() {
|
|
|
|
+ var consumerPhone = this.carhelp.getConfig().consumerPhone
|
|
|
|
+ // img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"
|
|
|
|
+ if (consumerPhone) {
|
|
|
|
+ this.consumerPhone = consumerPhone
|
|
|
|
+ }
|
|
|
|
+
|
|
this.ykgz = this.carhelp.getConfig().ykgz
|
|
this.ykgz = this.carhelp.getConfig().ykgz
|
|
//this.checkSubscribe()
|
|
//this.checkSubscribe()
|
|
|
|
|
|
},
|
|
},
|
|
- onShow() {
|
|
|
|
|
|
+ onShow() {
|
|
|
|
+ if(this.carhelp.get("getElderModeClass") == "长辈模式") {
|
|
|
|
+ this.elderStatus = true;
|
|
|
|
+ } else {
|
|
|
|
+ this.elderStatus = false;
|
|
|
|
+ }
|
|
|
|
+ if(this.$refs.tabbarMain){
|
|
|
|
+ this.$refs.tabbarMain.setcount(1);
|
|
|
|
+ }
|
|
|
|
+
|
|
this.checkSubscribe();
|
|
this.checkSubscribe();
|
|
|
|
|
|
// this.getCardList();
|
|
// this.getCardList();
|
|
// this.show2 = true;
|
|
// this.show2 = true;
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
|
|
+ pageListGetObj(){
|
|
|
|
+ var cardId=this.cardId
|
|
|
|
+ if(this.ispay){
|
|
|
|
+ cardId=this.userCard.rentCardId;
|
|
|
|
+ }
|
|
|
|
+ var i =this.pageList.findIndex(item=>{
|
|
|
|
+ return item.monthlyRentCardId==cardId
|
|
|
|
+ })
|
|
|
|
+ if(i==-1)
|
|
|
|
+ return {}
|
|
|
|
+ else
|
|
|
|
+ return this.pageList[i]
|
|
|
|
+ },
|
|
|
|
|
|
endCardBool() {
|
|
endCardBool() {
|
|
if (!this.cardList.length) {
|
|
if (!this.cardList.length) {
|
|
@@ -257,6 +424,34 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ scroll: function(e) {
|
|
|
|
+
|
|
|
|
+ var scrollWidth=e.detail.scrollWidth
|
|
|
|
+ if(this.scrollLeftOldSet>e.detail.scrollLeft){
|
|
|
|
+ //右移动
|
|
|
|
+ this.scrollLeftSet=0;
|
|
|
|
+ this.checkboxChange(this.cardList[0].monthlyRentCard)
|
|
|
|
+ }else{
|
|
|
|
+ //左移动
|
|
|
|
+ this.scrollLeftSet=scrollWidth*0.8
|
|
|
|
+ if(this.cardList.length>1){
|
|
|
|
+ this.checkboxChange(this.cardList[1].monthlyRentCard)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //this.old.scrollTop = e.detail.scrollTop
|
|
|
|
+ this.scrollLeftOldSet=e.detail.scrollLeft
|
|
|
|
+ },
|
|
|
|
+ confirmPhone() {
|
|
|
|
+ this.show = false;
|
|
|
|
+ uni.makePhoneCall({
|
|
|
|
+ phoneNumber: this.consumerPhone //仅为示例
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ openModal() {
|
|
|
|
+ this.show3 = true;
|
|
|
|
+ },
|
|
checkboxChange(monthlyRentCard) {
|
|
checkboxChange(monthlyRentCard) {
|
|
|
|
|
|
this.detail=monthlyRentCard;
|
|
this.detail=monthlyRentCard;
|
|
@@ -270,7 +465,7 @@
|
|
obj.checked=false
|
|
obj.checked=false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ this.getPageList(false);
|
|
},
|
|
},
|
|
gotoGz() {
|
|
gotoGz() {
|
|
this.carhelp.setGzDate()
|
|
this.carhelp.setGzDate()
|
|
@@ -348,7 +543,20 @@
|
|
if (this.cardList.length) {
|
|
if (this.cardList.length) {
|
|
this.detail = this.cardList[0].monthlyRentCard
|
|
this.detail = this.cardList[0].monthlyRentCard
|
|
this.cardId = this.detail.id;
|
|
this.cardId = this.detail.id;
|
|
- this.cardList[0].monthlyRentCard.checked=true
|
|
|
|
|
|
+ this.cardList[0].monthlyRentCard.checked=true
|
|
|
|
+ if(this.pageList.length==0){
|
|
|
|
+ this.pageList=this.cardList.map(item=>{
|
|
|
|
+ return {
|
|
|
|
+ recordsTotal:-1,
|
|
|
|
+ monthlyRentCardId:item.monthlyRentCard.id,
|
|
|
|
+ list:[],
|
|
|
|
+ pageIndex: 1,
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.getPageList(false);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //this.pageList.map(item)
|
|
}
|
|
}
|
|
this.getUserInfo()
|
|
this.getUserInfo()
|
|
this.isReady=true;
|
|
this.isReady=true;
|
|
@@ -359,6 +567,61 @@
|
|
title: error
|
|
title: error
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ getPageList(bl){
|
|
|
|
+
|
|
|
|
+ var cardId=this.cardId
|
|
|
|
+ if(this.ispay){
|
|
|
|
+ cardId=this.userCard.rentCardId;
|
|
|
|
+ }
|
|
|
|
+ var i =this.pageList.findIndex(item=>{
|
|
|
|
+ return item.monthlyRentCardId==cardId
|
|
|
|
+ })
|
|
|
|
+ var data={
|
|
|
|
+ monthlyRentCardId:cardId,
|
|
|
|
+ online:0,
|
|
|
|
+ pageSize:6,
|
|
|
|
+ }
|
|
|
|
+ if (this.carhelp.getPersonInfo()) {
|
|
|
|
+ data.openId=this.carhelp.getOpenId()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if(i>-1){
|
|
|
|
+ if(bl){
|
|
|
|
+ this.pageList[i].pageIndex+=1;
|
|
|
|
+ }else{
|
|
|
|
+ if(this.pageList[i].recordsTotal==-1){
|
|
|
|
+
|
|
|
|
+ }else{
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ data.pageIndex=this.pageList[i].pageIndex
|
|
|
|
+ }else{
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title: "加载中",
|
|
|
|
+ mask: true,
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ var list=this.pageList[i].list;
|
|
|
|
+ API_site.getChargingStationData(data).then((response) => {
|
|
|
|
+ console.log(response)
|
|
|
|
+ list = [
|
|
|
|
+ ...list,
|
|
|
|
+ ...response.data.data
|
|
|
|
+ ];
|
|
|
|
+ this.pageList[i].recordsTotal = response.data.recordsTotal;
|
|
|
|
+ this.pageList[i].list=list;
|
|
|
|
+
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: error
|
|
|
|
+ })
|
|
|
|
+ })
|
|
},
|
|
},
|
|
getUserInfo() {
|
|
getUserInfo() {
|
|
uni.showLoading({
|
|
uni.showLoading({
|
|
@@ -534,7 +797,36 @@
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+
|
|
|
|
+ .scroll-Y {
|
|
|
|
+ height: 300rpx;
|
|
|
|
+ }
|
|
|
|
+ .scroll-view_H {
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ .scroll-view-item {
|
|
|
|
+ height: 300rpx;
|
|
|
|
+ line-height: 300rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ }
|
|
|
|
+ .scroll-view-item_H {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 85%;
|
|
|
|
+ //height: 300rpx;
|
|
|
|
+ line-height: 300rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .service {
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 16px;
|
|
|
|
+ }
|
|
/deep/.u-alert-desc {
|
|
/deep/.u-alert-desc {
|
|
color: #ff7300;
|
|
color: #ff7300;
|
|
}
|
|
}
|
|
@@ -542,8 +834,8 @@
|
|
// 卡片
|
|
// 卡片
|
|
.main {
|
|
.main {
|
|
background-color: #404A5E;
|
|
background-color: #404A5E;
|
|
- padding: 40rpx 40rpx 30px 40rpx;
|
|
|
|
-
|
|
|
|
|
|
+ padding: 40rpx 0 0 0;
|
|
|
|
+ z-index: 80;
|
|
.tag {
|
|
.tag {
|
|
position: absolute;
|
|
position: absolute;
|
|
background-color: rgba(255, 61, 0, 100);
|
|
background-color: rgba(255, 61, 0, 100);
|
|
@@ -552,43 +844,44 @@
|
|
text-align: center;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
line-height: 20px;
|
|
padding: 0 6px;
|
|
padding: 0 6px;
|
|
- left: 284rpx;
|
|
|
|
- top: 44rpx;
|
|
|
|
-
|
|
|
|
|
|
+ left: 496rpx;
|
|
|
|
+ top: 0rpx;
|
|
|
|
+ border-radius: 0 12px 0 12px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- @media screen and (max-width:320px) {
|
|
|
|
- .tag {
|
|
|
|
- padding: 0 4rpx;
|
|
|
|
- }
|
|
|
|
|
|
+ // @media screen and (max-width:320px) {
|
|
|
|
+ // .tag {
|
|
|
|
+ // padding: 0 4rpx;
|
|
|
|
+ // }
|
|
|
|
|
|
- .price {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 24rpx !important;
|
|
|
|
- right: 32rpx !important;
|
|
|
|
- }
|
|
|
|
|
|
+ // .price {
|
|
|
|
+ // position: absolute;
|
|
|
|
+ // top: 24rpx !important;
|
|
|
|
+ // right: 32rpx !important;
|
|
|
|
+ // }
|
|
|
|
|
|
- .current-price {
|
|
|
|
- font-size: 36rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ // .current-price {
|
|
|
|
+ // font-size: 36rpx;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
|
|
.price {
|
|
.price {
|
|
- top: 24rpx;
|
|
|
|
- right: 32rpx;
|
|
|
|
|
|
+ top: -90rpx;
|
|
|
|
+ right: 76rpx;
|
|
position: absolute;
|
|
position: absolute;
|
|
p{
|
|
p{
|
|
text-align: right;
|
|
text-align: right;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
-
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+ top: -250rpx;
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.current-price {
|
|
.current-price {
|
|
- font-size: 64rpx;
|
|
|
|
|
|
+ font-size: 48rpx;
|
|
color: #101010;
|
|
color: #101010;
|
|
text-align: right;
|
|
text-align: right;
|
|
|
|
|
|
@@ -610,16 +903,21 @@
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- .card-1{
|
|
|
|
- margin-top: 32rpx;
|
|
|
|
|
|
+
|
|
|
|
+ .card-0 {
|
|
|
|
+
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
- .card-1 {
|
|
|
|
|
|
+ .card-0 {
|
|
|
|
+ background-position-x: 40rpx;
|
|
|
|
+ }
|
|
|
|
+ .cardtab {
|
|
|
|
+ margin-top: 32rpx;
|
|
position: relative;
|
|
position: relative;
|
|
- background-size: cover;
|
|
|
|
- height: 300rpx;
|
|
|
|
-
|
|
|
|
|
|
+ background-size: 90% 100%;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ height: 200rpx;
|
|
|
|
+
|
|
|
|
+
|
|
/deep/.u-checkbox__icon-wrap {
|
|
/deep/.u-checkbox__icon-wrap {
|
|
|
|
|
|
background-color: #607d8b;
|
|
background-color: #607d8b;
|
|
@@ -634,34 +932,20 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .card-2 {
|
|
|
|
- position: relative;
|
|
|
|
- background: url(@/assets/img/card_operate.png) no-repeat;
|
|
|
|
- background-size: cover;
|
|
|
|
- height: 300rpx;
|
|
|
|
- margin-top: 32rpx;
|
|
|
|
-
|
|
|
|
- /deep/.u-checkbox__icon-wrap {
|
|
|
|
- background-color: #B29467;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .radio-box {
|
|
|
|
- margin-top: 78rpx;
|
|
|
|
- float: right;
|
|
|
|
- margin-right: -30rpx;
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// 按钮
|
|
// 按钮
|
|
- .button {
|
|
|
|
- margin-top: -20rpx;
|
|
|
|
|
|
+ .button {
|
|
|
|
+ position: fixed;
|
|
|
|
+ margin-top: -20rpx;
|
|
|
|
+ width: 100%;
|
|
|
|
+
|
|
|
|
+ bottom: 40px;
|
|
border-radius: 16px 16px 0px 0px;
|
|
border-radius: 16px 16px 0px 0px;
|
|
background-color: rgba(255, 255, 255, 100);
|
|
background-color: rgba(255, 255, 255, 100);
|
|
- padding: 20px 20px 16px 20px;
|
|
|
|
|
|
+ padding: 20px 20px 24px 20px;
|
|
|
|
|
|
uni-button:after {
|
|
uni-button:after {
|
|
border: none;
|
|
border: none;
|
|
@@ -669,10 +953,10 @@
|
|
|
|
|
|
.btn {
|
|
.btn {
|
|
border: none !important;
|
|
border: none !important;
|
|
- background: linear-gradient(#E1D0A5, #E4BE84);
|
|
|
|
|
|
+ background: linear-gradient(#D8A05B , #C07C38);
|
|
box-shadow: 0px 2px 6px 0px rgba(207, 175, 118, 40);
|
|
box-shadow: 0px 2px 6px 0px rgba(207, 175, 118, 40);
|
|
border-radius: 50px;
|
|
border-radius: 50px;
|
|
- color: #101010;
|
|
|
|
|
|
+ color: #FFF;
|
|
font-size: 18px !important;
|
|
font-size: 18px !important;
|
|
line-height: 44px;
|
|
line-height: 44px;
|
|
height: 44px;
|
|
height: 44px;
|
|
@@ -727,12 +1011,36 @@
|
|
border-left: 5px solid transparent;
|
|
border-left: 5px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ .notice2 {
|
|
|
|
+ padding: 0 0 120px 0;
|
|
|
|
+ .titleHead{
|
|
|
|
+ color: #101010 ;
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
// 须知
|
|
// 须知
|
|
- .notice {
|
|
|
|
|
|
+ .notice {
|
|
|
|
+ top: -15px;
|
|
|
|
+ border-radius: 15px 15px 0 0;
|
|
|
|
+ position: relative;
|
|
|
|
+ .title{
|
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ .line{
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ color:#666666;
|
|
|
|
+ b{
|
|
|
|
+ color:#333;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
- margin-top: 12px;
|
|
|
|
- padding: 20px 20px 72px 30px;
|
|
|
|
|
|
+
|
|
|
|
+ padding: 20px 20px 20px 30px;
|
|
|
|
|
|
/deep/.u-divider {
|
|
/deep/.u-divider {
|
|
margin-bottom: 16px !important;
|
|
margin-bottom: 16px !important;
|
|
@@ -782,5 +1090,200 @@
|
|
color: #fff;
|
|
color: #fff;
|
|
border-radius: 25px;
|
|
border-radius: 25px;
|
|
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .station,.location,.state1{
|
|
|
|
+ box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
|
|
|
|
+ }
|
|
|
|
+ // 附近站点改版
|
|
|
|
+ .station{
|
|
|
|
+
|
|
|
|
+ width: 91.4%;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ padding: 12px 12px 12px 11px;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ margin: 8px auto 0;
|
|
|
|
+ .head{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .title{
|
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: 550;
|
|
|
|
+ width: 440rpx;
|
|
|
|
+ text-overflow:ellipsis;
|
|
|
|
+ overflow:hidden;
|
|
|
|
+ white-space:nowrap;
|
|
|
|
+ }
|
|
|
|
+ .distance{
|
|
|
|
+ width: 180rpx;
|
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ text-align: end;
|
|
|
|
+ .iconfont{
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ margin-right: 4rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .sign{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ margin-top: 16rpx;
|
|
|
|
+ .sign-1{
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: rgba(255, 139, 0, 100);
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid rgba(255, 139, 0, 100);
|
|
|
|
+ padding: 0 8rpx;
|
|
|
|
+ margin-right:16rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ .sign-2{
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid rgba(204, 204, 204, 100);
|
|
|
|
+ padding: 0 8rpx;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ .sign-3{
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: #8161FF ;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid #8161FF;
|
|
|
|
+ padding: 0 8rpx;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ .sign-4{
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: #00B962 ;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid #00B962 ;
|
|
|
|
+ padding: 0 8rpx;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .price-free{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
+ .price{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: baseline;
|
|
|
|
+ }
|
|
|
|
+ .price-1{
|
|
|
|
+ .num{
|
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
|
+ font-size: 44rpx;
|
|
|
|
+ }
|
|
|
|
+ .unit{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .price-2{
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
|
+ margin-left: 8rpx;
|
|
|
|
+ text-decoration: line-through;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .free{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .slow,.fast{
|
|
|
|
+ display: flex;
|
|
|
|
+ .sp-font{
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ background-color: #7a68f6;
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-right: 2rpx;
|
|
|
|
+ }
|
|
|
|
+ .fast-font{
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(186, 240, 215, 100);
|
|
|
|
+ color: rgba(0, 130, 69, 100);
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ .slow-font{
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(226, 226, 226, 100);
|
|
|
|
+ color: rgba(128, 128, 128, 100);
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ .num{
|
|
|
|
+ font-size: 32rpx;color: rgba(0, 145, 67, 100);
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .slow{
|
|
|
|
+ margin-left: 24rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .user-card{
|
|
|
|
+ padding: 19px 0 39px 20px;
|
|
|
|
+ margin: 21px 20px 0 20px;
|
|
|
|
+ background:url(@/assets/img/companyVIP.png) no-repeat right,linear-gradient(to right,#C6D4ED,#DCE6F0) no-repeat;
|
|
|
|
+ box-shadow: 0px 0px 16px 0px rgba(14, 39, 84, 28);
|
|
|
|
+ border: 2px solid rgba(236, 239, 245, 100);
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ display: flex;
|
|
|
|
+ .head-img{
|
|
|
|
+ width: 48px;
|
|
|
|
+ height: 48px;
|
|
|
|
+ img{
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .user-name{
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ .name{
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ color: rgba(33, 41, 48, 100);
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ font-weight: 550;
|
|
|
|
+ }
|
|
|
|
+ .sign{
|
|
|
|
+ color: rgba(76, 89, 111, 100);
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ line-height: 16px;
|
|
|
|
+ margin-top: 8px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|