2247 lines
68 KiB
Vue
2247 lines
68 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="topBox" :style="{ height: menu.bottom + 14 + 'px' }">
|
||
<view
|
||
class="topContent"
|
||
:style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }"
|
||
>
|
||
<view class="backIconBox" @click="handleBack">
|
||
<image
|
||
class="backIcon"
|
||
src="/static/images/home/brankBlackArrow.svg"
|
||
/>
|
||
</view>
|
||
<view class="currentServiceBox" @click="goSelectServer">
|
||
<image
|
||
class="servicePosition"
|
||
src="/static/images/home/servicePosition.svg"
|
||
/>
|
||
<text class="currentService">{{ detailInfo.SERVERPART_NAME }}</text>
|
||
<image class="rightArrow" src="/static/images/home/rightArrow.svg" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content" :style="{ paddingTop: menu.bottom + 14 + 'px' }">
|
||
<!-- 服务区照片 服务区距离名字信息 -->
|
||
<view class="serviceDetail">
|
||
<view class="detailTop">
|
||
<view
|
||
class="serviceImg"
|
||
v-if="detailInfo.ImageLits && detailInfo.ImageLits.length > 0"
|
||
>
|
||
<swiper
|
||
scroll-x="true"
|
||
circular="true"
|
||
class="banner"
|
||
indicator-dots="true"
|
||
indicator-active-color="#272625"
|
||
autoplay
|
||
interval="3000"
|
||
:current="pageMsg.current"
|
||
style="width: 100%; height: 100%"
|
||
>
|
||
<swiper-item
|
||
v-for="(img, i) in detailInfo.ImageLits"
|
||
:key="i"
|
||
style="width: 100%; height: 100%"
|
||
>
|
||
<image
|
||
style="width: 100%; height: 100%"
|
||
mode="aspectFill"
|
||
lazy-load="true"
|
||
:src="img"
|
||
></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<view class="detailBottom">
|
||
<view class="detailFirst">
|
||
<text class="serviceName">{{
|
||
detailInfo.SERVERPART_NAME || ""
|
||
}}</text>
|
||
<text class="serviceStatus">营业中</text>
|
||
</view>
|
||
<view class="detailSecond">
|
||
<image
|
||
class="detailFixedIcon"
|
||
src="/static/images/home/address.png"
|
||
/>
|
||
<text class="address">
|
||
<text class="distance"
|
||
>{{
|
||
detailInfo.SERVERPART_DISTANCE === 0
|
||
? 0
|
||
: detailInfo.SERVERPART_DISTANCE || "-"
|
||
}}km</text
|
||
>
|
||
<text class="addressText"
|
||
>{{ detailInfo.ServerpartInfo.SERVERPART_ADDRESS || "-"
|
||
}}{{ detailInfo.ServerpartInfo.EXPRESSWAY_NAME || "-" }}</text
|
||
>
|
||
</text>
|
||
</view>
|
||
<view class="navigationBox" @click="handleGomap">
|
||
<image
|
||
class="navigationIcon"
|
||
src="/static/images/home/navigationIcon.svg"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加油 充电 停车场 -->
|
||
<view class="carDetailBox">
|
||
<view class="detailTab">
|
||
<view
|
||
:class="
|
||
firstTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
|
||
"
|
||
v-for="(item, index) in firstTabList"
|
||
:key="index"
|
||
@click="handleChangeFirstTab(item)"
|
||
>
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
<view class="firstContent">
|
||
<!-- 加油 -->
|
||
<view class="gasContent" v-if="firstTab === 1">
|
||
<view class="gasItem first">
|
||
<image
|
||
class="gasItemIcon"
|
||
src="https://eshangtech.com/ShopICO/discovery/92Icon.png"
|
||
/>
|
||
<span class="label">#加油枪</span>
|
||
<span class="value">{{
|
||
detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}</span>
|
||
</view>
|
||
<view class="gasItem second">
|
||
<image
|
||
class="gasItemIcon"
|
||
src="https://eshangtech.com/ShopICO/discovery/95Icon.png"
|
||
/>
|
||
<span class="label">#加油枪</span>
|
||
<span class="value">{{
|
||
detailInfo.sumDetail.REFUELINGGUN95 || "-"
|
||
}}</span>
|
||
</view>
|
||
<view class="gasItem third">
|
||
<image
|
||
class="gasItemIcon"
|
||
src="https://eshangtech.com/ShopICO/discovery/zeroIcon.png"
|
||
/>
|
||
<span class="label">#加油枪</span>
|
||
<span class="value">{{
|
||
detailInfo.sumDetail.REFUELINGGUN0 || "-"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
<!-- 充电信息 -->
|
||
<view class="chargeContent" v-if="firstTab === 2">
|
||
<view class="stateGrid">
|
||
<view class="leftGrid">
|
||
<!-- <image class="gridImg" src="/static/images/home/stateGrid.png" /> -->
|
||
<text class="gridText">交投新能源</text>
|
||
<text class="fastCharg">快充</text>
|
||
</view>
|
||
<view class="rightGrid">
|
||
<text class="other">空</text>
|
||
<text class="have">{{ chargingObj.use || "0" }}</text>
|
||
<text class="all" v-if="chargingObj.have > 0"
|
||
>/{{ chargingObj.have || "0" }}</text
|
||
>
|
||
<text class="all" v-else
|
||
>/{{ detailInfo.sumDetail.STATEGRIDCHARGE || "0" }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 充电桩 -->
|
||
<view class="contentItem" v-if="false">
|
||
<view class="leftItem">
|
||
<image class="carIcon" src="/static/images/home/carIcon.png" />
|
||
充电桩
|
||
</view>
|
||
<view class="rightItem">
|
||
<span class="emptyText">空</span>
|
||
<span class="occupy">{{
|
||
detailInfo.sumDetail.LIVESTOCKPACKING || "-"
|
||
}}</span>
|
||
<span class="unit"></span>
|
||
</view>
|
||
</view>
|
||
<!-- 国网 -->
|
||
<view class="contentItem" v-if="false">
|
||
<view class="leftItem">
|
||
<image class="carIcon" src="/static/images/home/carIcon.png" />
|
||
国网
|
||
</view>
|
||
<view class="rightItem">
|
||
<span class="emptyText">空</span>
|
||
<span class="occupy">{{
|
||
detailInfo.sumDetail.STATEGRIDCHARGE || "-"
|
||
}}</span>
|
||
<span class="unit"></span>
|
||
</view>
|
||
</view>
|
||
<!-- 理想5C -->
|
||
<view class="contentItem" v-if="false">
|
||
<view class="leftItem">
|
||
<image class="carIcon" src="/static/images/home/carIcon.png" />
|
||
理想5C
|
||
</view>
|
||
<view class="rightItem">
|
||
<span class="emptyText">空</span>
|
||
<span class="occupy">{{
|
||
detailInfo.sumDetail.LIAUTOCHARGE || "-"
|
||
}}</span>
|
||
<span class="unit"></span>
|
||
</view>
|
||
</view>
|
||
<!-- 广汽能源 -->
|
||
<view class="contentItem" v-if="false">
|
||
<view class="leftItem">
|
||
<image class="carIcon" src="/static/images/home/carIcon.png" />
|
||
广汽能源
|
||
</view>
|
||
<view class="rightItem">
|
||
<span class="emptyText">空</span>
|
||
<span class="occupy">{{
|
||
detailInfo.sumDetail.GACENERGYCHARGE || "-"
|
||
}}</span>
|
||
<span class="unit"></span>
|
||
</view>
|
||
</view>
|
||
<!-- 其他 -->
|
||
<view class="contentItem" v-if="false">
|
||
<view class="leftItem">
|
||
<image class="carIcon" src="/static/images/home/carIcon.png" />
|
||
其他
|
||
</view>
|
||
<view class="rightItem">
|
||
<span class="emptyText">空</span>
|
||
<span class="occupy">{{
|
||
detailInfo.sumDetail.OTHERCHARGE || "-"
|
||
}}</span>
|
||
<span class="unit"></span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 停车场信息 -->
|
||
<view class="carContent" v-if="firstTab === 3">
|
||
<view class="carItem">
|
||
<view class="carTop">
|
||
<image
|
||
class="carIcon"
|
||
:src="
|
||
detailInfo.sumDetail.SMALLPARKING
|
||
? '/static/images/home/carIcon.svg'
|
||
: '/static/images/home/noCarIcon.svg'
|
||
"
|
||
/>
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">轿车车位</view>
|
||
<view class="carValue"
|
||
>{{ detailInfo.sumDetail.SMALLPARKING || "-"
|
||
}}<span class="unit">个</span></view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="carItem">
|
||
<view class="carTop">
|
||
<image
|
||
class="carIcon"
|
||
:src="
|
||
detailInfo.sumDetail.PACKING
|
||
? '/static/images/home/bus.svg'
|
||
: '/static/images/home/noBus.svg'
|
||
"
|
||
/>
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">客车车位</view>
|
||
<view class="carValue"
|
||
>{{ detailInfo.sumDetail.PACKING || "-" }}
|
||
<span class="unit">个</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="carItem">
|
||
<view class="carTop">
|
||
<image
|
||
class="carIcon"
|
||
:src="
|
||
detailInfo.sumDetail.TRUCKPACKING
|
||
? '/static/images/home/train.svg'
|
||
: '/static/images/home/noTrain.svg'
|
||
"
|
||
/>
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">货车车位</view>
|
||
<view class="carValue"
|
||
>{{ detailInfo.sumDetail.TRUCKPACKING || "-"
|
||
}}<span class="unit">个</span></view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="carItem" style="margin-top: 24rpx">
|
||
<view class="carTop">
|
||
<image
|
||
class="carIcon"
|
||
:src="
|
||
detailInfo.sumDetail.DANPACKING
|
||
? '/static/images/home/chemicals.svg'
|
||
: '/static/images/home/noChemicals.svg'
|
||
"
|
||
/>
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">危化品车位</view>
|
||
<view class="carValue"
|
||
>{{ detailInfo.sumDetail.DANPACKING || "-"
|
||
}}<span class="unit">个</span></view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 车辆维修 -->
|
||
<view class="vehicleMaintenance" v-if="firstTab === 4">
|
||
<!-- v-if="detailInfo.sumDetail.HASCHILD" -->
|
||
<view class="vehicleTitle">车辆维修</view>
|
||
<view class="vehicleContent">
|
||
<view class="vehicleContentLeft">
|
||
<view class="leftLabel">{{
|
||
detailInfo.sumDetail.REPAIR_TEL || "-"
|
||
}}</view>
|
||
<view class="onlineTime">营业时间：24小时</view>
|
||
</view>
|
||
<view
|
||
class="vehicleContentRight"
|
||
@click="handleCallPhone(detailInfo.sumDetail.REPAIR_TEL)"
|
||
>
|
||
<image
|
||
class="callPhone"
|
||
src="/static/images/home/callPhoneIcon.svg"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 卫生间 母婴室 司机之家 -->
|
||
<view class="otherFacilities">
|
||
<view class="detailTab">
|
||
<view
|
||
:class="
|
||
secondTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
|
||
"
|
||
v-for="(item, index) in secondTabList"
|
||
:key="index"
|
||
@click="handleChangeSecondTab(item)"
|
||
>
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
<view class="secondContent">
|
||
<view class="toiletBox" v-if="secondTab === 1">
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="/static/images/home/manWC.svg" />
|
||
<text class="toiletText">男厕</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- 绿 #009F43 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.HASPANTRY > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASPANTRY }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/woManWC.svg"
|
||
/>
|
||
<text class="toiletText">女厕</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.HASWIFI > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASWIFI }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/tideToiletSeat.svg"
|
||
/>
|
||
<text class="toiletText">潮汐厕位</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.TOILETCOUNT > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.TOILETCOUNT }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/toiletPaperTowels.svg"
|
||
/>
|
||
<text class="toiletText">厕纸巾</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.TOILET_PAPER > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.TOILET_PAPER }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="toiletBox" v-if="secondTab === 2">
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="/static/images/home/manWC.svg" />
|
||
<text class="toiletText">饮水机</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- 绿 #009F43 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.MABROOMWATER_DISPENSER > 0
|
||
? '#009F43'
|
||
: '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.MABROOMWATER_DISPENSER }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="/static/images/home/manWC.svg" />
|
||
<text class="toiletText">哺乳桌</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- 绿 #009F43 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.NURSING_TABLE > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.NURSING_TABLE }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="/static/images/home/manWC.svg" />
|
||
<text class="toiletText">婴儿床</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- 绿 #009F43 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.BABY_COT > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.BABY_COT }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="/static/images/home/manWC.svg" />
|
||
<text class="toiletText">尿布台</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- 绿 #009F43 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.CHANGING_TABLE > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.CHANGING_TABLE }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="toiletBox" v-if="secondTab === 3">
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/showerRoom.svg"
|
||
/>
|
||
<text class="toiletText">淋浴间</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.SHOWERROOM > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{
|
||
detailInfo.sumDetail.SHOWERROOM === 0
|
||
? "无"
|
||
: detailInfo.sumDetail.SHOWERROOM === 1
|
||
? "有"
|
||
: detailInfo.sumDetail.SHOWERROOM === 2
|
||
? "热水"
|
||
: "-"
|
||
}}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/waterBoiler.svg"
|
||
/>
|
||
<text class="toiletText">饮水机</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.DROOMWATER_DISPENSER > 0
|
||
? '#009F43'
|
||
: '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.DROOMWATER_DISPENSER }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="toiletBox" v-if="secondTab === 4">
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/showerRoom.svg"
|
||
/>
|
||
<text class="toiletText">淋浴间</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.HASSHOWERROOM > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASSHOWERROOM }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/waterBoiler.svg"
|
||
/>
|
||
<text class="toiletText">开水器</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.HASWATERROOM > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASWATERROOM }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/microwave.svg"
|
||
/>
|
||
<text class="toiletText">微波炉</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.MICROWAVEOVEN > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.MICROWAVEOVEN }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/washingMachine.svg"
|
||
/>
|
||
<text class="toiletText">洗衣机</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.WASHERCOUNT > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.WASHERCOUNT }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="/static/images/home/watering.svg"
|
||
/>
|
||
<text class="toiletText">加水</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.VEHICLEWATERFILLING > 0
|
||
? '#009F43'
|
||
: '',
|
||
}"
|
||
>{{
|
||
detailInfo.sumDetail.VEHICLEWATERFILLING > 0 ? "有" : "无"
|
||
}}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="/static/images/home/urea.svg" />
|
||
<text class="toiletText">尿素</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.UREA_COUNT ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.UREA_COUNT ? "有" : "无" }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 热门商家 -->
|
||
<view class="popularMerchants">
|
||
<view class="popularTitle">热门商家</view>
|
||
<template v-if="merchantList && merchantList.length > 0">
|
||
<div
|
||
class="newShopUnit"
|
||
v-for="(item, i) in merchantList"
|
||
:key="i"
|
||
@click="goShop(item)"
|
||
>
|
||
<div>
|
||
<div class="shopItemTop">
|
||
<div class="shopImg">
|
||
<image
|
||
class="shopIcon"
|
||
:src="
|
||
item.MERCHANTS_LOGO ||
|
||
'https://eshangtech.com/ShopICO/no-picture.png'
|
||
"
|
||
mode="aspectFit"
|
||
/>
|
||
</div>
|
||
<div class="shopDetail">
|
||
<div class="shopName">
|
||
<!-- max-width: calc(100% - 133rpx); -->
|
||
<span
|
||
class="shopTitle"
|
||
:style="{
|
||
maxWidth:
|
||
item.SCANCODE_ORDER === 1 &&
|
||
item.CouponList &&
|
||
item.CouponList.length > 0
|
||
? 'calc(100% - 270rpx)'
|
||
: 'calc(100% - 133rpx)',
|
||
}"
|
||
>{{ item.MERCHANTS_NAME }}</span
|
||
>
|
||
</div>
|
||
<div class="otherDetail">
|
||
<div class="leftDetail">
|
||
<span class="mark"
|
||
>{{ item.MERCHANTS_SCORE || "-" }}分</span
|
||
>
|
||
<!-- <span class="monthSales"
|
||
>月售{{ item.MONTHLYSALES || "-" }}</span
|
||
> -->
|
||
</div>
|
||
<div class="monthSales">
|
||
月售{{ item.MONTHLYSALES || "-" }}
|
||
</div>
|
||
<div class="rightDetail">
|
||
<span class="perCapita"
|
||
>人均 ￥{{ item.PERCAPITA || "-" }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="goOrder"
|
||
v-if="item.SCANCODE_ORDER === 1"
|
||
@click.stop="goBuy(item)"
|
||
>
|
||
<image
|
||
class="orderIcon"
|
||
src="/static/images/home/goOrderIcon.png"
|
||
/>
|
||
<span class="goOrderText">去点餐</span>
|
||
</div>
|
||
<div
|
||
class="couponBox"
|
||
:style="{
|
||
right:
|
||
item.SCANCODE_ORDER === 1 &&
|
||
item.CouponList &&
|
||
item.CouponList.length > 0
|
||
? '160rpx'
|
||
: '0',
|
||
}"
|
||
v-if="item.CouponList && item.CouponList.length > 0"
|
||
>
|
||
<image
|
||
class="couponIcon"
|
||
src="/static/images/home/useCoupon.png"
|
||
/>
|
||
<span class="couponText">优惠券</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="shopList"
|
||
v-if="item.GoodsList && item.GoodsList.length > 0"
|
||
>
|
||
<div
|
||
class="shopItem"
|
||
style="padding: 0"
|
||
v-for="(subItem, subIndex) in item.GoodsList"
|
||
:key="subIndex"
|
||
>
|
||
<div class="shopImgBox">
|
||
<image class="shopImg" :src="subItem.IMAGE_URL" />
|
||
</div>
|
||
<div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
|
||
<div class="itemPrice">
|
||
<span class="itemUnit">¥</span>
|
||
<span class="itemPrice">{{
|
||
subItem.COMMODITY_RETAILPRICE || ""
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
menu: {},
|
||
detailInfo: {}, // 服务区信息对象
|
||
firstTabList: [
|
||
{ label: "加油", value: 1 },
|
||
{ label: "充电", value: 2 },
|
||
{ label: "停车场", value: 3 },
|
||
{ label: "汽修", value: 4 },
|
||
], // 加油 充电 停车场 的tab
|
||
firstTab: 1,
|
||
secondTabList: [
|
||
{ label: "卫生间", value: 1 },
|
||
{ label: "母婴室", value: 2 },
|
||
{ label: "司机之家", value: 3 },
|
||
{ label: "其他设施", value: 4 },
|
||
],
|
||
secondTab: 1,
|
||
selectTypeList: [],
|
||
seatInfo: {},
|
||
serverpart: "", // 传入的服务区id
|
||
merchantList: [], // 商家列表
|
||
chargingObj: {
|
||
have: 0,
|
||
use: 0,
|
||
}, // 充电桩数据
|
||
};
|
||
},
|
||
async onLoad(query) {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
console.log("query", query);
|
||
if (query.id) {
|
||
this.serverpart = query.id;
|
||
}
|
||
|
||
await this.handleGetServerpartDetail(this.serverpart);
|
||
await this.handleGetMerchant();
|
||
await this.handleGetChargingStation(this.detailInfo);
|
||
},
|
||
async onShow() {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
if (currentService.SERVERPART_ID !== this.serverpart) {
|
||
this.serverpart = currentService.SERVERPART_ID;
|
||
await this.handleGetServerpartDetail(this.serverpart);
|
||
await this.handleGetMerchant();
|
||
await this.handleGetChargingStation(this.detailInfo);
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
methods: {
|
||
// 查询现在的充电桩
|
||
async handleGetChargingStation(obj) {
|
||
let _this = this;
|
||
uni.request({
|
||
url: "https://xny.yciccloud.com/interconnect/api/interconnection/open/getConnectList", //仅为示例，并非真实接口地址。
|
||
method: "POST",
|
||
success: (res) => {
|
||
console.log("查询现在的充电桩", res.data);
|
||
let list = res.data;
|
||
let result = [];
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (
|
||
(item.stationName.indexOf("读书铺") !== -1 &&
|
||
obj.SERVERPART_NAME.indexOf("读书铺") !== -1) ||
|
||
(item.stationName.indexOf("鸡街") !== -1 &&
|
||
obj.SERVERPART_NAME.indexOf("鸡街") !== -1) ||
|
||
(item.stationName.indexOf("星云") !== -1 &&
|
||
obj.SERVERPART_NAME.indexOf("星云") !== -1) ||
|
||
(item.stationName.indexOf("富民") !== -1 &&
|
||
obj.SERVERPART_NAME.indexOf("富民") !== -1)
|
||
) {
|
||
result.push(item);
|
||
}
|
||
});
|
||
}
|
||
console.log("result", result);
|
||
console.log("obj", obj);
|
||
let sum = 0;
|
||
let have = 0;
|
||
let use = 0;
|
||
|
||
if (result && result.length > 0) {
|
||
result.forEach((item) => {
|
||
if (item.status === "50") {
|
||
sum += 1;
|
||
}
|
||
});
|
||
}
|
||
console.log("sum", sum);
|
||
if (sum > 0) {
|
||
use = sum;
|
||
if (obj.sumDetail.STATEGRIDCHARGE > 0) {
|
||
console.log("1");
|
||
if (obj.sumDetail.STATEGRIDCHARGE < result.length) {
|
||
have = result.length;
|
||
} else {
|
||
have = obj.sumDetail.STATEGRIDCHARGE;
|
||
}
|
||
} else {
|
||
console.log("2");
|
||
have = result.length;
|
||
}
|
||
} else {
|
||
have = obj.sumDetail.LIVESTOCKPACKING;
|
||
// let rank = Math.random() * (0.7 - 0.5) + 0.5;
|
||
let rank = Number(uni.getStorageSync("rankNumber"));
|
||
if (rank > 0) {
|
||
} else {
|
||
rank = Math.random() * (0.7 - 0.5) + 0.5;
|
||
uni.setStorageSync("rankNumber", rank);
|
||
}
|
||
// let rank = Math.random() * (0.7 - 0.5) + 0.5;
|
||
use = Math.floor(have * rank);
|
||
}
|
||
_this.chargingObj = {
|
||
have: have,
|
||
use: use,
|
||
};
|
||
console.log("_this.chargingObj", _this.chargingObj);
|
||
|
||
_this.$forceUpdate();
|
||
},
|
||
});
|
||
},
|
||
handleChangeFirstTab(obj) {
|
||
this.firstTab = obj.value;
|
||
},
|
||
handleChangeSecondTab(obj) {
|
||
this.secondTab = obj.value;
|
||
},
|
||
// 打开导航
|
||
handleGomap() {
|
||
let obj = this.detailInfo;
|
||
uni.openLocation({
|
||
latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
|
||
longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
|
||
scale: 16, // 缩放比例
|
||
name: obj.SERVERPART_NAME,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
},
|
||
// 查询服务区详情
|
||
async handleGetServerpartDetail(id) {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
this.seatInfo = JSON.parse(seatInfo);
|
||
let req = {
|
||
ServerpartId: id || currentService.SERVERPART_ID,
|
||
latitude: this.seatInfo.latitude,
|
||
longitude: this.seatInfo.longitude,
|
||
};
|
||
uni.showLoading({
|
||
title: "加载中...",
|
||
});
|
||
const data = await this.$api.$get(
|
||
"/CommercialApi/BaseInfo/GetServerpartInfo",
|
||
req
|
||
);
|
||
let obj = data.Result_Data;
|
||
let sumObj = {
|
||
LIVESTOCKPACKING: 0, // 充电桩数
|
||
STATEGRIDCHARGE: 0, // 国网充电桩数量
|
||
LIAUTOCHARGE: 0, // 理想5C充电桩数量
|
||
GACENERGYCHARGE: 0, // 广汽能源充电桩数量
|
||
OTHERCHARGE: 0, // 其他充电桩数量
|
||
REFUELINGGUN92: 0, // 加油枪92号
|
||
REFUELINGGUN95: 0, // 加油枪95号
|
||
REFUELINGGUN0: 0, // 加油枪0号
|
||
HASPANTRY: 0, // 男厕数量
|
||
HASWIFI: 0, // 女厕数量
|
||
TOILETCOUNT: 0, // 潮汐厕位
|
||
HASSHOWERROOM: 0, // 淋浴房
|
||
HASWATERROOM: 0, // 开水器
|
||
MICROWAVEOVEN: 0, // 微波炉
|
||
WASHERCOUNT: 0, // 洗衣机数量
|
||
SLEEPINGPODS: 0, // 睡眠仓
|
||
HASPILOTLOUNGE: false, // 有无司机之家
|
||
SHOWERROOM: 0, // 司机之家淋浴间
|
||
HASCHILD: false, // 有无车辆维修
|
||
// VEHICLEWATERFILLING: false, // 有无车辆加水
|
||
SMALLPARKING: 0, // 轿车车位
|
||
PACKING: 0, // 客车车位
|
||
TRUCKPACKING: 0, // 货车车位
|
||
DANPACKING: 0, // 危化品车位
|
||
DININGBXCOUNT: 0, // 商铺数量
|
||
DININGROOMCOUNT: 0, // 餐饮店
|
||
HASBACKGROUNDRADIO: 0, // 便利店
|
||
POINTCONTROLCOUNT: 0, // 客房
|
||
BUSINESSTYPE: "",
|
||
TOILET_PAPER: 0, // 厕纸巾
|
||
MABROOMWATER_DISPENSER: 0, // 母婴室饮水机
|
||
NURSING_TABLE: 0, // 哺乳桌
|
||
BABY_COT: 0, // 婴儿床
|
||
CHANGING_TABLE: 0, // 尿布台
|
||
DROOMWATER_DISPENSER: 0, // 司机之家饮水机
|
||
REPAIR_TEL: "",
|
||
UREA_COUNT: 0, // 尿素
|
||
VEHICLEWATERFILLING: 0, // 加水
|
||
};
|
||
console.log("res.RegionInfo", obj.RegionInfo);
|
||
if (obj.RegionInfo && obj.RegionInfo.length > 0) {
|
||
obj.RegionInfo.forEach((item) => {
|
||
sumObj.LIVESTOCKPACKING += item.LIVESTOCKPACKING;
|
||
sumObj.STATEGRIDCHARGE += item.STATEGRIDCHARGE;
|
||
sumObj.LIAUTOCHARGE += item.LIAUTOCHARGE;
|
||
sumObj.GACENERGYCHARGE += item.GACENERGYCHARGE;
|
||
sumObj.OTHERCHARGE += item.OTHERCHARGE;
|
||
sumObj.REFUELINGGUN92 += item.REFUELINGGUN92;
|
||
sumObj.REFUELINGGUN95 += item.REFUELINGGUN95;
|
||
sumObj.REFUELINGGUN0 += item.REFUELINGGUN0;
|
||
sumObj.HASPANTRY += item.HASPANTRY;
|
||
sumObj.HASWIFI += item.HASWIFI;
|
||
sumObj.TOILETCOUNT += item.TOILETCOUNT;
|
||
sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
|
||
sumObj.HASWATERROOM += item.HASWATERROOM;
|
||
sumObj.MICROWAVEOVEN += item.MICROWAVEOVEN;
|
||
sumObj.WASHERCOUNT += item.WASHERCOUNT;
|
||
sumObj.SLEEPINGPODS += item.SLEEPINGPODS;
|
||
sumObj.SMALLPARKING += item.SMALLPARKING;
|
||
sumObj.PACKING += item.PACKING;
|
||
sumObj.TRUCKPACKING += item.TRUCKPACKING;
|
||
sumObj.DANPACKING += item.DANPACKING;
|
||
sumObj.BUSINESSTYPE = item.BUSINESSTYPE;
|
||
sumObj.TOILET_PAPER += item.TOILET_PAPER;
|
||
sumObj.MABROOMWATER_DISPENSER += item.MABROOMWATER_DISPENSER;
|
||
sumObj.NURSING_TABLE += item.NURSING_TABLE;
|
||
sumObj.BABY_COT += item.BABY_COT;
|
||
sumObj.CHANGING_TABLE += item.CHANGING_TABLE;
|
||
sumObj.DROOMWATER_DISPENSER += item.DROOMWATER_DISPENSER;
|
||
sumObj.UREA_COUNT += item.UREA_COUNT;
|
||
sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
|
||
sumObj.VEHICLEWATERFILLING += item.VEHICLEWATERFILLING;
|
||
if (item.HASPILOTLOUNGE) {
|
||
sumObj.HASPILOTLOUNGE = true;
|
||
}
|
||
if (item.HASCHILD) {
|
||
sumObj.HASCHILD = true;
|
||
}
|
||
sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
|
||
sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
|
||
sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
|
||
sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;
|
||
if (item.REPAIR_TEL) {
|
||
sumObj.REPAIR_TEL = item.REPAIR_TEL;
|
||
}
|
||
sumObj.SHOWERROOM = item.SHOWERROOM;
|
||
});
|
||
}
|
||
obj.sumDetail = sumObj;
|
||
this.detailInfo = obj;
|
||
console.log("this.detailInfo", this.detailInfo);
|
||
uni.hideLoading();
|
||
},
|
||
// 跳转到选择服务区
|
||
goSelectServer() {
|
||
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
||
},
|
||
// 返回上级页面
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
// 拿到精选商家数据
|
||
async handleGetMerchant() {
|
||
uni.showLoading({
|
||
title: "加载中...",
|
||
});
|
||
const data = await this.$api.getCoop({
|
||
action_type: "GetSellerList",
|
||
showSales: 1,
|
||
showCoupon: 1,
|
||
showComment: 1,
|
||
serverpartId: this.detailInfo.SERVERPART_ID,
|
||
provinceCode: "530000",
|
||
showGoods: 1,
|
||
pageSize: 9999,
|
||
pageIndex: 1,
|
||
});
|
||
let list = data.Data.List;
|
||
console.log("handleGetMerchant", list);
|
||
this.merchantList = list;
|
||
uni.hideLoading();
|
||
},
|
||
goShop(item) {
|
||
console.log("goShop", item);
|
||
if (item.SCANCODE_ORDER === 1) {
|
||
this.goBuy(item);
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/storeDetail/index?id=${item.MERCHANTS_ID}`,
|
||
});
|
||
}
|
||
},
|
||
// 去点餐的跳转
|
||
goBuy(item) {
|
||
console.log("goBuy", item);
|
||
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
|
||
});
|
||
} else {
|
||
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
|
||
});
|
||
this.isLogin = true;
|
||
}
|
||
},
|
||
// 打电话
|
||
handleCallPhone(phone) {
|
||
if (!phone) {
|
||
return;
|
||
}
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone, //仅为示例
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #f5f5f5;
|
||
|
||
.topBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
position: fixed;
|
||
background: #f5f5f5;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
|
||
.topContent {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.backIconBox {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
|
||
.backIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.currentServiceBox {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12rpx 16rpx;
|
||
background: #fff;
|
||
border-radius: 32rpx;
|
||
border: 1rpx solid #e7e7e6;
|
||
margin-left: 8rpx;
|
||
|
||
.servicePosition {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.currentService {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #090c1a;
|
||
line-height: 40rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx 48rpx;
|
||
|
||
.serviceDetail {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
.detailTop {
|
||
width: 100%;
|
||
height: 320rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.serviceImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.detailBottom {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 4rpx 24rpx 24rpx;
|
||
position: relative;
|
||
|
||
.detailFirst {
|
||
width: 100%;
|
||
|
||
.serviceName {
|
||
width: calc(100% - 190rpx);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #130f05;
|
||
line-height: 52rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.serviceStatus {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #009f43;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
padding: 2rpx 6rpx;
|
||
background: #e9f8ee;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.detailSecond {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.detailFixedIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.address {
|
||
width: calc(100% - 120rpx);
|
||
display: inline-block;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
.distance {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.addressText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.navigationBox {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
position: absolute;
|
||
right: 24rpx;
|
||
top: 32rpx;
|
||
|
||
.navigationIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carDetailBox {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.detailTab {
|
||
width: 100%;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 40rpx;
|
||
padding-bottom: 14rpx;
|
||
}
|
||
|
||
.selectTabItem {
|
||
font-weight: 600;
|
||
color: #160002;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem::after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 2rem;
|
||
height: 6rpx;
|
||
background: #009f43;
|
||
border-radius: 3rpx;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.firstContent {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.gasContent {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
.gasItem {
|
||
width: calc((100% - 32rpx) / 3);
|
||
padding: 32rpx 0;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.gasItemIcon {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.label {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #2a2b2e;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
.value {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #2a2b2e;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.first {
|
||
background: linear-gradient(180deg, #f3fbf7 0%, #f3faf7 100%);
|
||
}
|
||
|
||
.second {
|
||
background: linear-gradient(180deg, #f8f9ff 0%, #f5f6fe 100%);
|
||
}
|
||
|
||
.third {
|
||
background: linear-gradient(180deg, #f1f7ff 0%, #f2f7ff 100%);
|
||
}
|
||
}
|
||
|
||
.chargeContent {
|
||
margin-top: 24rpx;
|
||
|
||
.stateGrid {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
background: #f6f6f6;
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftGrid {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.gridImg {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.gridText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.fastCharg {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
display: inline;
|
||
padding: 2rpx 6rpx;
|
||
background: linear-gradient(270deg, #ff500e 0%, #ff7d0a 100%);
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.rightGrid {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.other {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.have {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.all {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contentItem {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
// background-image: url('/static/images/home/chargeBg.png');
|
||
// background-repeat: no-repeat;
|
||
// background-size: 100% 100%;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f5f6f7;
|
||
|
||
.leftItem {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
// width: 128rpx;
|
||
// height: 64rpx;
|
||
.carIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.configIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.rightItem {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.emptyText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.occupy {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.unit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.smallIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.value {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #282622;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carContent {
|
||
width: 100%;
|
||
// background: #FAFAFC;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f5f6f7;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 24rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 32rpx;
|
||
|
||
.carItem {
|
||
width: calc((100% / 2));
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.carTop {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1rpx solid #e7e7e6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
margin-right: 16rpx;
|
||
|
||
.carIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.carName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #282622;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.carBottom {
|
||
// margin-top: 4rpx;
|
||
// padding-left: 38rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #8c8981;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.carName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.carValue {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.unit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.vehicleMaintenance {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
.vehicleTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.vehicleContent {
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
|
||
.vehicleContentLeft {
|
||
.leftLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.onlineTime {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 24rpx;
|
||
}
|
||
}
|
||
|
||
.vehicleContentRight {
|
||
.callPhone {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.otherFacilities {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.otherTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.detailTab {
|
||
width: 100%;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 40rpx;
|
||
padding-bottom: 14rpx;
|
||
}
|
||
|
||
.selectTabItem {
|
||
font-weight: 600;
|
||
color: #160002;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem::after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 2rem;
|
||
height: 6rpx;
|
||
background: #009f43;
|
||
border-radius: 3rpx;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.secondContent {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.toiletBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.toiletItem {
|
||
width: calc((100% - 16rpx) / 2);
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
background: #f6f6f6;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.toiletItemLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.toiletIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.toiletText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.toiletItemRight {
|
||
.rightText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999da3;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popularMerchants {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.popularTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.newTabList {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
|
||
.newTabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 0 50rpx 12rpx 50rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.selectTabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem:after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 2rem;
|
||
height: 4rpx;
|
||
background: #ba922f;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.newTabList::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.newShopUnit {
|
||
padding: 26rpx 0 26rpx 0;
|
||
background-color: #ffffff;
|
||
|
||
.shopItemTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.shopImg {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
overflow: hidden;
|
||
border-radius: 8rpx;
|
||
margin-right: 16rpx;
|
||
|
||
.shopIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.shopDetail {
|
||
width: calc(100% - 112rpx);
|
||
height: 96rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.shopName {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.shopTitle {
|
||
display: inline-block;
|
||
max-width: calc(100% - 133rpx);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.titleIcon {
|
||
display: inline-block;
|
||
background: url("https://eshangtech.com/ShopICO/icos/to-eat.png")
|
||
no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
|
||
background-size: contain;
|
||
width: 133rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.otherDetail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftDetail {
|
||
.mark {
|
||
color: #d45e0e;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.monthSales {
|
||
margin-left: 12px;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.monthSales {
|
||
margin-left: 12px;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.rightDetail {
|
||
.perCapita {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.icon-coupon {
|
||
background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png")
|
||
no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
|
||
background-size: contain;
|
||
// width 75rpx
|
||
// height 22rpx
|
||
padding-left: 40rpx;
|
||
height: 27rpx;
|
||
line-height: 27rpx;
|
||
// padding-left 25rpx
|
||
font-size: 24rpx;
|
||
color: #ec5930;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goOrder {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 10rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #ae8d3e;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.orderIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.goOrderText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #ba922f;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.couponBox {
|
||
padding: 4rpx 6rpx;
|
||
background: rgba(247, 80, 49, 0.08);
|
||
border-radius: 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 160rpx;
|
||
top: 0;
|
||
|
||
.couponIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.couponText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #f75031;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopList {
|
||
width: calc(100% - 120rpx);
|
||
box-sizing: border-box;
|
||
margin-left: 120rpx;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
|
||
.shopItem {
|
||
width: 168rpx;
|
||
margin-right: 16rpx;
|
||
|
||
.shopImgBox {
|
||
width: 168rpx;
|
||
height: 128rpx;
|
||
overflow: hidden;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.shopImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.shopName {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #130f05;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.itemPrice {
|
||
.itemUnit {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.itemPrice {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopList::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.activitieBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-top: 24rpx;
|
||
|
||
.activeTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.couponList {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.couponItem {
|
||
width: calc((100% - 24rpx) / 2) !important;
|
||
margin-right: 24rpx;
|
||
|
||
.itemImgBox {
|
||
width: 100%;
|
||
height: 192rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 16rpx;
|
||
|
||
.itemImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.couponText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.couponTime {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.timeIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.couponTimeText {
|
||
width: calc(100% - 32rpx);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.couponItem:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |