1614 lines
52 KiB
Vue
1614 lines
52 KiB
Vue
<template>
|
|
<view class="main">
|
|
<!-- :scroll-y="pageScroll" :scroll-into-view="currentView" :scroll-with-animation="true"-->
|
|
<view class="pageContent">
|
|
<!-- <view class="topImg" :style="{height: serviceImageList && serviceImageList.length>0 ? '430rpx':(menu.bottom + 20) + 'px' }" @click="handlePreview">
|
|
<image class="img" :style="{top: menu.top + ((menu.height - 24)/2) + 'px'}" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click.stop="handleBack"></image>
|
|
<swiper :current="currentImg" class="carousel" @change="changeSwiper">
|
|
<swiper-item class="imgIndex" v-for="(item,index) in serviceImageList" :key="index" >
|
|
<image style="width: 100%;height: 100%" :src="item" ></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view v-if="serviceImageList && serviceImageList.length>0" class="picNumber" >
|
|
<image class="icon" src="/static/images/home/noImg.svg"></image>
|
|
<text class="text"> {{ currentImg+1<=1?1:currentImg>serviceImageList.length?serviceImageList.length:currentImg + 1 }} / {{ serviceImageList.length }}</text>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="contentBox">
|
|
<!-- 顶部内容-->
|
|
<!-- <view class="topBg">
|
|
<view class="contentTop">
|
|
<view class="left">
|
|
<view class="leftTop">
|
|
<view class="serviceName">{{
|
|
detail.SERVERPART_NAME || ""
|
|
}}</view>
|
|
<view class="stateBox">运营中</view>
|
|
</view>
|
|
<view class="leftBottom">
|
|
<span class="address" v-if="detail && detail.ServerpartInfo">{{
|
|
detail.ServerpartInfo.SERVERPART_ADDRESS || ""
|
|
}}</span>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="rightMessage"
|
|
@click="handleToMap"
|
|
v-if="detail.SERVERPART_DISTANCE"
|
|
>
|
|
<image
|
|
class="navigationIcon"
|
|
src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
|
|
/>
|
|
<span class="distance">{{
|
|
detail.SERVERPART_DISTANCE
|
|
? detail.SERVERPART_DISTANCE + "km"
|
|
: ""
|
|
}}</span>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!--tab-->
|
|
<scroll-view
|
|
class="scrollBox"
|
|
:scroll-y="pageScroll"
|
|
:scroll-into-view="currentView"
|
|
:scroll-with-animation="true"
|
|
>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
background: #fff;
|
|
"
|
|
>
|
|
<current-service
|
|
:goDetail="false"
|
|
:currentServiceMessage="currentServiceMessage"
|
|
/>
|
|
</div>
|
|
|
|
<view class="tabBox" v-if="showTab">
|
|
<view
|
|
:class="
|
|
selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
|
|
"
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
@click="handleChangeTab(item.value)"
|
|
>{{ item.label || "" }}</view
|
|
>
|
|
</view>
|
|
|
|
<!-- 充电信息-->
|
|
<view
|
|
class="detailItem"
|
|
id="chargeBox"
|
|
v-if="(showTab && selectTab === 1) || !showTab"
|
|
>
|
|
<view class="top">
|
|
<!-- <image
|
|
class="boxIcon"
|
|
src="/static/images/home/chargeIcon.png"
|
|
/> -->
|
|
<span class="boxName">充电信息</span>
|
|
</view>
|
|
<view class="chargeContent">
|
|
<!-- 充电桩 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image
|
|
class="carIcon"
|
|
src="/static/images/home/carIcon.png"
|
|
/>
|
|
充电桩
|
|
<!-- <image
|
|
class="configIcon"
|
|
src="/static/images/home/chargeLabel1.png"
|
|
/> -->
|
|
</view>
|
|
<view class="rightItem">
|
|
<!-- <image
|
|
class="smallIcon"
|
|
src="/static/images/home/chargeSmallIcon.png"
|
|
/> -->
|
|
<span class="emptyText">空</span>
|
|
<span class="occupy">{{
|
|
detailInfo.LIVESTOCKPACKING || "-"
|
|
}}</span>
|
|
<span class="unit"></span>
|
|
<!-- <span class="value">{{
|
|
detailInfo.LIVESTOCKPACKING || "-"
|
|
}}</span> -->
|
|
</view>
|
|
</view>
|
|
<!-- 国网 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image
|
|
class="carIcon"
|
|
src="/static/images/home/carIcon.png"
|
|
/>
|
|
国网
|
|
<!-- <image
|
|
class="configIcon"
|
|
src="/static/images/home/chargeLabel2.png"
|
|
/> -->
|
|
</view>
|
|
<view class="rightItem">
|
|
<span class="emptyText">空</span>
|
|
<span class="occupy">{{
|
|
detailInfo.STATEGRIDCHARGE || "-"
|
|
}}</span>
|
|
<span class="unit"></span>
|
|
<!-- <image
|
|
class="smallIcon"
|
|
src="/static/images/home/chargeSmallIcon.png"
|
|
/>
|
|
<span class="value">{{
|
|
detailInfo.STATEGRIDCHARGE || "-"
|
|
}}</span> -->
|
|
</view>
|
|
</view>
|
|
<!-- 理想5C -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image
|
|
class="carIcon"
|
|
src="/static/images/home/carIcon.png"
|
|
/>
|
|
理想5C
|
|
<!-- <image
|
|
class="configIcon"
|
|
src="/static/images/home/chargeLabel3.png"
|
|
/> -->
|
|
</view>
|
|
<view class="rightItem">
|
|
<span class="emptyText">空</span>
|
|
<span class="occupy">{{
|
|
detailInfo.LIAUTOCHARGE || "-"
|
|
}}</span>
|
|
<span class="unit"></span>
|
|
<!-- <image
|
|
class="smallIcon"
|
|
src="/static/images/home/chargeSmallIcon.png"
|
|
/>
|
|
<span class="value">{{
|
|
detailInfo.LIAUTOCHARGE || "-"
|
|
}}</span> -->
|
|
</view>
|
|
</view>
|
|
<!-- 广汽能源 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image
|
|
class="carIcon"
|
|
src="/static/images/home/carIcon.png"
|
|
/>
|
|
广汽能源
|
|
<!-- <image
|
|
class="configIcon"
|
|
src="/static/images/home/chargeLabel4.png"
|
|
/> -->
|
|
</view>
|
|
<view class="rightItem">
|
|
<span class="emptyText">空</span>
|
|
<span class="occupy">{{
|
|
detailInfo.GACENERGYCHARGE || "-"
|
|
}}</span>
|
|
<span class="unit"></span>
|
|
<!-- <image
|
|
class="smallIcon"
|
|
src="/static/images/home/chargeSmallIcon.png"
|
|
/>
|
|
<span class="value">{{
|
|
detailInfo.GACENERGYCHARGE || "-"
|
|
}}</span> -->
|
|
</view>
|
|
</view>
|
|
<!-- 其他 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image
|
|
class="carIcon"
|
|
src="/static/images/home/carIcon.png"
|
|
/>
|
|
其他
|
|
<!-- <image
|
|
class="configIcon"
|
|
src="/static/images/home/chargeLabel5.png"
|
|
/> -->
|
|
</view>
|
|
<view class="rightItem">
|
|
<span class="emptyText">空</span>
|
|
<span class="occupy">{{
|
|
detailInfo.OTHERCHARGE || "-"
|
|
}}</span>
|
|
<span class="unit"></span>
|
|
<!-- <image
|
|
class="smallIcon"
|
|
src="/static/images/home/chargeSmallIcon.png"
|
|
/>
|
|
<span class="value">{{ detailInfo.OTHERCHARGE || "-" }}</span> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 加油信息-->
|
|
<view
|
|
class="detailItem"
|
|
id="gasBox"
|
|
v-if="(showTab && selectTab === 2) || !showTab"
|
|
>
|
|
<view class="top">
|
|
<!-- <image
|
|
class="boxIcon"
|
|
src="/static/images/home/gasIcon.png"
|
|
/> -->
|
|
<span class="boxName">加油信息</span>
|
|
</view>
|
|
|
|
<view class="gasContent">
|
|
<view class="gasItem">
|
|
<image
|
|
class="gasItemIcon"
|
|
src="/static/images/home/92Icon.png"
|
|
/>
|
|
<span class="label">#加油枪</span>
|
|
<span class="value">{{
|
|
detailInfo.REFUELINGGUN92 || "-"
|
|
}}</span>
|
|
</view>
|
|
<view class="gasItem">
|
|
<image
|
|
class="gasItemIcon"
|
|
src="/static/images/home/95Icon.png"
|
|
/>
|
|
<span class="label">#加油枪</span>
|
|
<span class="value">{{
|
|
detailInfo.REFUELINGGUN95 || "-"
|
|
}}</span>
|
|
</view>
|
|
<view class="gasItem">
|
|
<image
|
|
class="gasItemIcon"
|
|
src="/static/images/home/zeroIcon.png"
|
|
/>
|
|
<span class="label">#加油枪</span>
|
|
<span class="value">{{ detailInfo.REFUELINGGUN0 || "-" }}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 服务信息-->
|
|
<view
|
|
class="detailItem"
|
|
id="serviceConfigBox"
|
|
v-if="(showTab && selectTab === 3) || !showTab"
|
|
>
|
|
<view class="top">
|
|
<!-- <image
|
|
class="boxIcon"
|
|
src="/static/images/discovery/serviceConfigIcon.png"
|
|
/> -->
|
|
<span class="boxName">服务区信息</span>
|
|
</view>
|
|
<view class="serviceContent">
|
|
<view class="serviceItem">
|
|
<!-- <view class="smallTitle">卫生间</view> -->
|
|
<view class="serviceMessage">
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.HASPANTRY
|
|
? '/static/images/home/manWCIcon.svg'
|
|
: '/static/images/home/noManWCIcon.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">男厕</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.HASPANTRY || "-"
|
|
}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.HASWIFI
|
|
? '/static/images/home/womanWCIcon.svg'
|
|
: '/static/images/home/noWomanWCIcon.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">女厕</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.HASWIFI || "-"
|
|
}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.TOILETCOUNT
|
|
? '/static/images/home/tideWC.svg'
|
|
: '/static/images/home/noTideWC.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">潮汐厕位</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.TOILETCOUNT || "-"
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="serviceItem">
|
|
<!-- <view class="smallTitle">其他服务</view> -->
|
|
<view class="serviceMessage">
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.HASSHOWERROOM
|
|
? '/static/images/home/shower.svg'
|
|
: '/static/images/home/noShower.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">淋浴间</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.HASSHOWERROOM || "-"
|
|
}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.HASWATERROOM
|
|
? '/static/images/home/waterBoiler.svg'
|
|
: '/static/images/home/noWaterBoiler.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">开水器</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.HASWATERROOM || "-"
|
|
}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.MICROWAVEOVEN
|
|
? '/static/images/home/microwave.svg'
|
|
: '/static/images/home/noMicrowave.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">微波炉</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.MICROWAVEOVEN || "-"
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="serviceItem">
|
|
<view class="serviceMessage">
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.WASHERCOUNT
|
|
? '/static/images/home/washing.svg'
|
|
: '/static/images/home/noWashing.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">洗衣机</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.WASHERCOUNT || "-"
|
|
}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image
|
|
class="serviceIcon"
|
|
:src="
|
|
detailInfo.SLEEPINGPODS
|
|
? '/static/images/home/sleep.svg'
|
|
: '/static/images/home/noSleep.svg'
|
|
"
|
|
/>
|
|
<view class="serviceName">睡眠仓</view>
|
|
</view>
|
|
<view class="serviceBottom">{{
|
|
detailInfo.SLEEPINGPODS || "-"
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="serviceItem"
|
|
style="box-sizing: border-box; padding: 0 24rpx"
|
|
>
|
|
<!-- <view class="smallTitle">配套设置</view> -->
|
|
<view class="otherMessage">
|
|
<view class="otherItem">
|
|
<image
|
|
class="haveIcon"
|
|
:src="
|
|
detailInfo.HASPILOTLOUNGE
|
|
? '/static/images/home/haveIcon.svg'
|
|
: '/static/images/home/noHaveIcon.svg'
|
|
"
|
|
/>
|
|
<span class="configText">司机之家</span>
|
|
</view>
|
|
<view class="otherItem">
|
|
<image
|
|
class="haveIcon"
|
|
:src="
|
|
detailInfo.HASCHILD
|
|
? '/static/images/home/haveIcon.svg'
|
|
: '/static/images/home/noHaveIcon.svg'
|
|
"
|
|
/>
|
|
<span class="configText">车辆维修</span>
|
|
</view>
|
|
<view class="otherItem">
|
|
<image
|
|
class="haveIcon"
|
|
:src="
|
|
detailInfo.VEHICLEWATERFILLING
|
|
? '/static/images/home/haveIcon.svg'
|
|
: '/static/images/home/noHaveIcon.svg'
|
|
"
|
|
/>
|
|
<span class="configText">车辆加水</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 停车信息-->
|
|
<view
|
|
class="detailItem"
|
|
id="stopCarBox"
|
|
v-if="(showTab && selectTab === 4) || !showTab"
|
|
>
|
|
<view class="top">
|
|
<!-- <image
|
|
class="boxIcon"
|
|
src="/static/images/home/stopCarIcon.png"
|
|
/> -->
|
|
<span class="boxName">停车信息</span>
|
|
</view>
|
|
<view class="carContent">
|
|
<view class="carItem">
|
|
<view class="carTop">
|
|
<image
|
|
class="carIcon"
|
|
:src="
|
|
detailInfo.SMALLPARKING
|
|
? '/static/images/home/carIcon.svg'
|
|
: '/static/images/home/noCarIcon.svg'
|
|
"
|
|
/>
|
|
</view>
|
|
<view class="carBottom">
|
|
<view class="carName">轿车车位</view>
|
|
<view class="carValue"
|
|
>{{ detailInfo.SMALLPARKING || "-"
|
|
}}<span class="unit">个</span></view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="carItem">
|
|
<view class="carTop">
|
|
<image
|
|
class="carIcon"
|
|
:src="
|
|
detailInfo.PACKING
|
|
? '/static/images/home/bus.svg'
|
|
: '/static/images/home/noBus.svg'
|
|
"
|
|
/>
|
|
</view>
|
|
<view class="carBottom">
|
|
<view class="carName">客车车位</view>
|
|
<view class="carValue"
|
|
>{{ detailInfo.PACKING || "-" }}
|
|
<span class="unit">个</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="carItem">
|
|
<view class="carTop">
|
|
<image
|
|
class="carIcon"
|
|
:src="
|
|
detailInfo.TRUCKPACKING
|
|
? '/static/images/home/train.svg'
|
|
: '/static/images/home/noTrain.svg'
|
|
"
|
|
/>
|
|
</view>
|
|
<view class="carBottom">
|
|
<view class="carName">货车车位</view>
|
|
<view class="carValue"
|
|
>{{ detailInfo.TRUCKPACKING || "-"
|
|
}}<span class="unit">个</span></view
|
|
></view
|
|
>
|
|
</view>
|
|
<view class="carItem" style="margin-top: 24rpx">
|
|
<view class="carTop">
|
|
<image
|
|
class="carIcon"
|
|
:src="
|
|
detailInfo.DANPACKING
|
|
? '/static/images/home/chemicals.svg'
|
|
: '/static/images/home/noChemicals.svg'
|
|
"
|
|
/>
|
|
</view>
|
|
<view class="carBottom">
|
|
<view class="carName">危化品车位</view>
|
|
<view class="carValue"
|
|
>{{ detailInfo.DANPACKING || "-"
|
|
}}<span class="unit">个</span></view
|
|
></view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 经营信息-->
|
|
<view
|
|
class="detailItem"
|
|
id="storeBox"
|
|
v-if="(showTab && selectTab === 5) || !showTab"
|
|
>
|
|
<view class="top">
|
|
<!-- <image class="boxIcon" src="/static/images/home/storeIcon.png" /> -->
|
|
<span class="boxName">经营信息</span>
|
|
</view>
|
|
<view class="storeContent">
|
|
<!-- <view class="storeItem" style="width: 100%">
|
|
<view class="storeTop">
|
|
<image
|
|
class="storeIcon"
|
|
src="/static/images/home/storeAll.png"
|
|
/>
|
|
<view class="storeName">商铺总量</view>
|
|
<view class="mode">{{ detailInfo.BUSINESSTYPE || "" }}</view>
|
|
</view>
|
|
<view class="storeBottom">{{
|
|
detailInfo.DININGBXCOUNT || ""
|
|
}}</view>
|
|
</view> -->
|
|
|
|
<view class="storeItem">
|
|
<view class="storeTop">
|
|
<image
|
|
class="storeIcon"
|
|
src="/static/images/home/storeAll.png"
|
|
/>
|
|
</view>
|
|
<view class="storeBottom">
|
|
<view class="storeName">商铺总量</view>
|
|
<view class="value"
|
|
>{{ detailInfo.DININGROOMCOUNT || "-"
|
|
}}<span class="unit">个</span></view
|
|
>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="storeItem">
|
|
<view class="storeTop">
|
|
<image
|
|
class="storeIcon"
|
|
src="/static/images/home/foodStore.png"
|
|
/>
|
|
</view>
|
|
<view class="storeBottom">
|
|
<view class="storeName">餐饮店</view>
|
|
<view class="value">
|
|
{{ detailInfo.DININGROOMCOUNT || "-"
|
|
}}<span class="unit">个</span></view
|
|
></view
|
|
>
|
|
</view>
|
|
|
|
<view class="storeItem">
|
|
<view class="storeTop">
|
|
<image
|
|
class="storeIcon"
|
|
src="/static/images/home/storeFacilitate.png"
|
|
/>
|
|
</view>
|
|
<view class="storeBottom">
|
|
<view class="storeName">便利店</view>
|
|
<view class="value">
|
|
{{ detailInfo.HASBACKGROUNDRADIO || "-"
|
|
}}<span class="unit">个</span></view
|
|
></view
|
|
>
|
|
</view>
|
|
|
|
<view class="storeItem">
|
|
<view class="storeTop">
|
|
<image
|
|
class="storeIcon"
|
|
src="/static/images/home/sleep.png"
|
|
/>
|
|
</view>
|
|
<view class="storeBottom">
|
|
<view class="storeName">客房</view>
|
|
<view class="value">
|
|
{{ detailInfo.POINTCONTROLCOUNT || "-"
|
|
}}<span class="unit">个</span></view
|
|
></view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import currentService from "../../components/currentService.vue";
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
serviceImageList: [],
|
|
defaultBg: [
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/service/default.png",
|
|
],
|
|
currentImg: 0, // 当前选中的图片
|
|
menu: {},
|
|
detail: {}, // 服务区详情信息
|
|
tabList: [
|
|
{ label: "充电信息", value: 1 },
|
|
{ label: "加油信息", value: 2 },
|
|
{ label: "服务信息", value: 3 },
|
|
{ label: "停车信息", value: 4 },
|
|
{ label: "经营信息", value: 5 },
|
|
], // tab的数组
|
|
selectTab: 1, // 选中的tab
|
|
detailInfo: {}, // 服务区两侧需要的字段加起来的合计对象
|
|
BUSINESSTYPEObj: {}, // 经营模式枚举
|
|
pageScroll: true, // 是否允许页面滚动
|
|
currentView: "", // 现在要滚动到的锚点位置
|
|
currentServiceMessage: {},
|
|
showTab: false, // 判断是否根据tab去显示对应的内容
|
|
};
|
|
},
|
|
components: {
|
|
currentService,
|
|
},
|
|
async onLoad(query) {
|
|
let res = uni.getStorageSync("currentService");
|
|
console.log("resserviceDetail", res);
|
|
this.currentServiceMessage = res;
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
console.log("query", query);
|
|
await this.handleGetServiceDetail(query.id);
|
|
await this.handleGetSumObj(query.id);
|
|
},
|
|
methods: {
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
handleToMap() {
|
|
let _this = this;
|
|
uni.openLocation({
|
|
latitude: _this.detail.ServerpartInfo.SERVERPART_Y * 1,
|
|
longitude: _this.detail.ServerpartInfo.SERVERPART_X * 1,
|
|
scale: 16, // 缩放比例
|
|
name: _this.detail.SERVERPART_NAME,
|
|
address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
|
success(data) {
|
|
console.log(data);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
},
|
|
});
|
|
},
|
|
// 请求服务区详情数据
|
|
async handleGetServiceDetail(id) {
|
|
let seatInfo = JSON.parse(uni.getStorageSync("actualLocation"));
|
|
console.log("seatInfo", seatInfo);
|
|
|
|
const req = {
|
|
ServerpartId: id,
|
|
longitude: seatInfo.longitude || "",
|
|
latitude: seatInfo.latitude || "",
|
|
};
|
|
const data = await this.$api.$get(
|
|
"/CommercialApi/BaseInfo/GetServerpartInfo",
|
|
req
|
|
);
|
|
let res = data.Result_Data;
|
|
console.log("res", res);
|
|
this.detail = res;
|
|
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, // 有无司机之家
|
|
HASCHILD: false, // 有无车辆维修
|
|
VEHICLEWATERFILLING: false, // 有无车辆加水
|
|
SMALLPARKING: 0, // 轿车车位
|
|
PACKING: 0, // 客车车位
|
|
TRUCKPACKING: 0, // 货车车位
|
|
DANPACKING: 0, // 危化品车位
|
|
DININGBXCOUNT: 0, // 商铺数量
|
|
DININGROOMCOUNT: 0, // 餐饮店
|
|
HASBACKGROUNDRADIO: 0, // 便利店
|
|
POINTCONTROLCOUNT: 0, // 客房
|
|
BUSINESSTYPE: "",
|
|
};
|
|
console.log("res.RegionInfo", res.RegionInfo);
|
|
if (res.RegionInfo && res.RegionInfo.length > 0) {
|
|
res.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;
|
|
if (item.HASPILOTLOUNGE) {
|
|
sumObj.HASPILOTLOUNGE = true;
|
|
}
|
|
if (item.VEHICLEWATERFILLING) {
|
|
sumObj.VEHICLEWATERFILLING = true;
|
|
}
|
|
if (item.HASCHILD) {
|
|
sumObj.HASCHILD = true;
|
|
}
|
|
sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
|
|
sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
|
|
sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
|
|
sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;
|
|
});
|
|
}
|
|
|
|
this.detailInfo = sumObj;
|
|
console.log("this.detailInfo", this.detailInfo);
|
|
this.serviceImageList = res.ImageLits;
|
|
console.log("this.serviceImageList", this.serviceImageList);
|
|
},
|
|
// 点击预览图片
|
|
handlePreview(type) {
|
|
if (type === "default") {
|
|
uni.previewImage({
|
|
current: this.defaultBg[this.currentImg], // 图片的地址url
|
|
urls: this.defaultBg, // 预览的地址url
|
|
});
|
|
} else {
|
|
uni.previewImage({
|
|
current: this.serviceImageList[this.currentImg], // 图片的地址url
|
|
urls: this.serviceImageList, // 预览的地址url
|
|
});
|
|
}
|
|
},
|
|
// 改变tab
|
|
handleChangeTab(value) {
|
|
this.selectTab = value;
|
|
let nameList = [
|
|
"chargeBox",
|
|
"gasBox",
|
|
"serviceConfigBox",
|
|
"stopCarBox",
|
|
"storeBox",
|
|
];
|
|
this.currentView = nameList[value - 1];
|
|
},
|
|
// 拿到设施的合计信息
|
|
async handleGetSumObj(id) {
|
|
const req = {
|
|
ProvinceCode: 340000,
|
|
ServerpartIds: id,
|
|
};
|
|
const data = await this.$api.$get(
|
|
"/CommercialApi/BaseInfo/GetServerInfoTree",
|
|
req
|
|
);
|
|
console.log("sum", data);
|
|
},
|
|
// 滚动轮播图
|
|
changeSwiper(e) {
|
|
console.log("e", e);
|
|
this.currentImg = Number(e.mp.detail.current);
|
|
console.log("this.currentImg", this.currentImg);
|
|
},
|
|
// 请求枚举
|
|
async handleGetEnumeration() {
|
|
const data = await this.$api.$get(
|
|
"/EShangApiMain/FrameWork/GetFieldEnumByField",
|
|
{ FieldExplainField: "BUSINESS_TYPE" }
|
|
);
|
|
console.log("Enumeration", data);
|
|
let res = data.Result_Data.List;
|
|
let obj = {};
|
|
if (res && res.length > 0) {
|
|
res.forEach((item) => {
|
|
obj[item.value] = item.label;
|
|
});
|
|
}
|
|
this.BUSINESSTYPEObj = obj;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="stylus">
|
|
.main {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
|
|
.pageContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
|
|
// min-height: 100vh;
|
|
.topImg {
|
|
background: #fff;
|
|
width: 100%;
|
|
height: 430rpx;
|
|
position: relative;
|
|
|
|
.img {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 32rpx;
|
|
top: 32rpx;
|
|
z-index: 20;
|
|
}
|
|
|
|
.topDefaultBg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
float: left;
|
|
display: flex;
|
|
|
|
.imgIndex {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.picNumber {
|
|
position: absolute;
|
|
left: 32rpx;
|
|
bottom: 66rpx;
|
|
padding: 8rpx 16rpx;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 32rpx;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
opacity: 0.7;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.text {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
// height: calc(100vh - 430rpx + 42rpx);
|
|
background-color: #F7F7F8;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
overflow: hidden;
|
|
transform: translateY(-42rpx);
|
|
box-sizing: border-box;
|
|
padding: 12px 0 0 0;
|
|
|
|
.topBg {
|
|
height: 162rpx;
|
|
background: #fff;
|
|
|
|
.contentTop {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
background-image: url('https://eshangtech.com/ShopICO/discovery/navigationBg.png');
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
flex: 1;
|
|
margin-right: 16rpx;
|
|
|
|
.leftTop {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.serviceName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #282622;
|
|
line-height: 52rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.stateBox {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #1BA74D;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 2rpx 8rpx;
|
|
background: #E9F8EE;
|
|
border-radius: 4rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.leftBottom {
|
|
margin-top: 8rpx;
|
|
|
|
.address {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #5F5B52;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightMessage {
|
|
width: 162rpx;
|
|
height: 64rpx;
|
|
border-radius: 32rpx;
|
|
border: 2rpx solid #AE8D3E;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 8rpx;
|
|
|
|
.navigationIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.distance {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #AE8D3E;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.scrollBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
// height: calc(100% - 100rpx);
|
|
margin: 16rpx 0;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
|
|
.tabBox {
|
|
width: 100%;
|
|
height: 98rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 32rpx 12rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.tabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #5F5B52;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
height: 55rpx;
|
|
}
|
|
|
|
.selectTabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #AE8D3E;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.selectTabItem:after {
|
|
content: '';
|
|
width: 34rpx;
|
|
height: 6rpx;
|
|
background: #C5A65B;
|
|
border-radius: 2rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
// padding: 0 0 48rpx 0;
|
|
.detailItem {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 32rpx 8rpx;
|
|
background: #fff;
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.boxIcon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.boxName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #130F05;
|
|
line-height: 44rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.chargeContent {
|
|
margin-top: 24rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gasContent {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 40rpx;
|
|
|
|
.gasItem {
|
|
width: calc(((100% - 32rpx) / 3));
|
|
padding: 32rpx 0;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #F5F6F7;
|
|
|
|
.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%);
|
|
}
|
|
}
|
|
|
|
.serviceContent {
|
|
padding-bottom: 24rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #F5F6F7;
|
|
margin-top: 16rpx;
|
|
|
|
.serviceItem {
|
|
margin-top: 24rpx;
|
|
|
|
.smallTitle {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
position: relative;
|
|
text-indent: 12rpx;
|
|
}
|
|
|
|
.smallTitle:before {
|
|
width: 4rpx;
|
|
height: 24rpx;
|
|
background: #C5A65B;
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.serviceMessage {
|
|
width: 100%;
|
|
// background: #FAFAFC;
|
|
border-radius: 8rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
.messageItem {
|
|
width: calc((100% / 3));
|
|
|
|
.serviceTop {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.serviceIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.serviceName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.serviceBottom {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.otherMessage {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-top: 16rpx;
|
|
align-items: center;
|
|
|
|
.otherItem {
|
|
width: calc((100% / 3));
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.haveIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.configText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.storeContent {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
// background: #FAFAFC;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #F5F6F7;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.storeItem {
|
|
width: calc((100% / 4));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.storeTop {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border: 1rpx solid #E7E7E6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
|
|
.storeIcon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.storeName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.mode {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF7D00;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
background: #FEEEDE;
|
|
border-radius: 4rpx;
|
|
display: inline-block;
|
|
padding: 2rpx 8rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.storeBottom {
|
|
margin-top: 4rpx;
|
|
|
|
.storeName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #130F05;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
|
|
.value {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #130F05;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|