2804 lines
87 KiB
Vue
2804 lines
87 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 class="activityBox" v-if="firstTab === 5">
|
||
<swiper class="activityBoxItem" autoplay interval="3000">
|
||
<swiper-item v-for="(item, index) in activityImgList" :key="index" @click="handleGoActivity(index)">
|
||
<image class="cover-image" :src="item" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
</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="shopItemBox" v-for="(item, index) in merchantList" :key="index" @click.stop="goBuy(item)" :style="{
|
||
marginBottom: index + 1 === merchantList.length ? '0' : '',
|
||
borderWidth: index + 1 === merchantList.length ? '0' : '',
|
||
}">
|
||
<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="shopDetailLeft">
|
||
<div class="detailLeftTop">
|
||
<span class="topShopName">{{ item.MERCHANTS_NAME }}</span>
|
||
</div>
|
||
|
||
<div class="detailLeftBottom">
|
||
<view class="scoreBox">
|
||
<uni-rate :value="item.MERCHANTS_SCORE" size="16" readonly allowHalf color="#D9D9D9"
|
||
activeColor="#FFC300" style="margin-right: 8rpx" />
|
||
{{ item.MERCHANTS_SCORE || '' }}
|
||
</view>
|
||
<view class="newOtherDetail">
|
||
<span class="label">月售</span>
|
||
<span class="value">{{ item.MONTHLYSALES || "-" }}</span>
|
||
<span class="label" style="margin-left: 20rpx;">人均</span>
|
||
<span class="value">￥{{ item.PERCAPITA || "-" }}</span>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
<div class="shopDetailRight">
|
||
<view class="goFood" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">点餐</view>
|
||
<view class="search" v-else-if="item.GOODSLIST && item.GOODSLIST.length > 0"
|
||
@click.stop="goBuy(item)">
|
||
查看</view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shopList" v-if="
|
||
item.GOODSLIST &&
|
||
item.GOODSLIST.length > 0 &&
|
||
item.SCANCODE_ORDER === 1
|
||
">
|
||
<div class="shopItem" v-for="(subItem, subIndex) in item.GOODSLIST" :key="subIndex">
|
||
<div class="shopImgBox">
|
||
<image class="shopImg" lazy-load :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 class="newShopUnit" v-for="(item, i) in merchantList" :key="i" @click="goBuy(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">
|
||
<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>
|
||
</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 class="nearbyAttractions" v-if="false">
|
||
<view class="nearTitle">附近景点</view>
|
||
<view class="attractionsList" v-if="nearScenic && nearScenic.length > 0">
|
||
<view class="attractionsItem" v-for="(item, index) in nearScenic" :key="index">
|
||
<image class="attractionsImg"
|
||
:src="item.ImageList && item.ImageList.length > 0 ? item.ImageList[0] : '/static/images/home/defaultIcon.png'" />
|
||
<view class="rightItem">
|
||
<view class="attractionsText">{{ item.SCENICAREA_NAME || "" }}</view>
|
||
<view class="rightItemBox">营业时间：<text class="timeText">{{ item.SCENICAREA_OPENHOURS || ""
|
||
}}</text>
|
||
</view>
|
||
<view class="descBox">{{ item.SCENICAREA_INFO || "" }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
menu: {},
|
||
detailInfo: {}, // 服务区信息对象
|
||
firstTabList: [
|
||
{ label: "活动", value: 5 },
|
||
{ label: "充电", value: 2 },
|
||
{ label: "停车场", value: 3 },
|
||
{ label: "汽修", value: 4 },
|
||
{ label: "加油", value: 1 },
|
||
], // 加油 充电 停车场 的tab
|
||
firstTab: 5,
|
||
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,
|
||
}, // 充电桩数据
|
||
nearScenic: [],// 景点列表
|
||
pageType: "",
|
||
activityList: [],// 活动列表数据
|
||
activityImgList: [],// 图片列表
|
||
};
|
||
},
|
||
async onLoad(query) {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
console.log("query", query);
|
||
if (query.id) {
|
||
this.serverpart = query.id;
|
||
}
|
||
|
||
if (query.pageType) {
|
||
this.pageType = query.pageType;
|
||
}
|
||
|
||
await this.handleGetServerpartDetail(this.serverpart);
|
||
await this.handleGetMerchant();
|
||
let idList = [1212, 1222, 1139, 1215];
|
||
if (idList.indexOf(this.serverpart) !== -1) {
|
||
await this.handleGetChargingStation(this.detailInfo);
|
||
} else {
|
||
this.chargingObj = {
|
||
have: 0,
|
||
use: 0,
|
||
};
|
||
}
|
||
|
||
await this.handleGetNearScenic()
|
||
// 获得当前服务区的 活动列表
|
||
await this.handleGetActivityList()
|
||
|
||
|
||
// this.$utils.addUserBehaviorNew();
|
||
this.$utils.addUserBehaviorNew({
|
||
behaviorRecordDesc: `查看了${this.detailInfo.SERVERPART_NAME}详情`
|
||
});
|
||
},
|
||
async onShow() {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
if (!this.serverpart) {
|
||
this.serverpart = currentService.SERVERPART_ID;
|
||
await this.handleGetServerpartDetail(this.serverpart);
|
||
await this.handleGetMerchant();
|
||
let idList = [1212, 1222, 1139, 1215];
|
||
if (idList.indexOf(this.serverpart) !== -1) {
|
||
await this.handleGetChargingStation(this.detailInfo);
|
||
} else {
|
||
this.chargingObj = {
|
||
have: 0,
|
||
use: 0,
|
||
};
|
||
}
|
||
await this.handleGetNearScenic()
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
methods: {
|
||
processString(inputString) {
|
||
// 定义要检查的关键字
|
||
const keywords = ['服务区', '停车区', '加水站', '加油站', '观景台', '休息区'];
|
||
|
||
// 遍历关键字，检查是否包含在字符串中
|
||
for (let keyword of keywords) {
|
||
const index = inputString.indexOf(keyword);
|
||
if (index !== -1) {
|
||
// 截取关键字之前的部分
|
||
return inputString.substring(0, index);
|
||
}
|
||
}
|
||
|
||
// 如果没有找到任何关键字，返回原始字符串
|
||
return inputString;
|
||
},
|
||
// 跳转去对应的活动页面
|
||
handleGoActivity(index) {
|
||
let obj = this.activityList[index]
|
||
console.log('objobj', obj);
|
||
if (Number(obj.ACTIVITY_TYPE) === 1000) {
|
||
uni.navigateTo({
|
||
url: `/pages/eventRegistration/detail?id=${obj.ACTIVITY_ID}`
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/shopMallPage/shopType/index?selectIndex=3&comeForm=serviceDetail&comeService=${this.processString(this.detailInfo.SERVERPART_NAME)}`,
|
||
});
|
||
}
|
||
},
|
||
// 获取服务区 活动列表
|
||
async handleGetActivityList() {
|
||
const req = {
|
||
SearchParameter: {
|
||
PROVINCE_CODE: '530000',
|
||
ACTIVITY_STATES: "1,2",
|
||
SERVERPART_IDS: this.detailInfo.SERVERPART_ID
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10,
|
||
type: 'encryption'
|
||
}
|
||
const data = await this.$api.$posMemberPost(
|
||
"/Member/GetACTIVITYList",
|
||
req
|
||
);
|
||
|
||
let list = data.Result_Data.List
|
||
let imgList = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.ImageList && item.ImageList.length > 0) {
|
||
let url = item.ImageList[0].ImageUrl
|
||
imgList.push(url)
|
||
}
|
||
})
|
||
}
|
||
this.activityList = list
|
||
this.activityImgList = imgList
|
||
},
|
||
// 附近的景点
|
||
async handleGetNearScenic() {
|
||
//
|
||
const req = {
|
||
SearchParameter: {
|
||
PROVINCE_CODES: '530000'
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10
|
||
}
|
||
const data = await this.$api.$post(
|
||
"/EShangApiMain/WisdomServerpart/GetSCENICAREAList",
|
||
req
|
||
);
|
||
let res = data.Result_Data.List
|
||
this.nearScenic = res
|
||
},
|
||
// 查询现在的充电桩
|
||
async handleGetChargingStation(obj) {
|
||
let _this = this;
|
||
uni.request({
|
||
url: "https://xny.yciccloud.com/interconnect/api/interconnection/open/getConnectList", //仅为示例，并非真实接口地址。
|
||
method: "POST",
|
||
success: (res) => {
|
||
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);
|
||
}
|
||
});
|
||
}
|
||
let sum = 0;
|
||
let have = 0;
|
||
let use = 0;
|
||
|
||
if (result && result.length > 0) {
|
||
result.forEach((item) => {
|
||
if (item.status === "50") {
|
||
sum += 1;
|
||
}
|
||
});
|
||
}
|
||
if (sum > 0) {
|
||
use = sum;
|
||
if (obj.sumDetail.STATEGRIDCHARGE > 0) {
|
||
if (obj.sumDetail.STATEGRIDCHARGE < result.length) {
|
||
have = result.length;
|
||
} else {
|
||
have = obj.sumDetail.STATEGRIDCHARGE;
|
||
}
|
||
} else {
|
||
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,
|
||
};
|
||
|
||
_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) {
|
||
},
|
||
fail(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.$javaGet(
|
||
"/third-party/getServerPartInfo",
|
||
req
|
||
);
|
||
|
||
// 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, // 加水
|
||
};
|
||
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.detailInfothis.detailInfothis.detailInfo', this.detailInfo);
|
||
|
||
uni.hideLoading();
|
||
},
|
||
// 跳转到选择服务区
|
||
goSelectServer() {
|
||
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
|
||
},
|
||
// 返回上级页面
|
||
handleBack() {
|
||
// uni.navigateBack({
|
||
// delta: 1,
|
||
// });
|
||
|
||
if (this.pageType === "driver" || this.pageType === "userInfo") {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
} else {
|
||
uni.switchTab({
|
||
url: "/pages/index/index",
|
||
});
|
||
}
|
||
},
|
||
// 拿到精选商家数据
|
||
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,
|
||
// });
|
||
|
||
const data = await this.$api.$javaGet("/third-party/getMerchantsList", {
|
||
serverpartId: this.detailInfo.SERVERPART_ID,
|
||
});
|
||
|
||
// let list = data.Data.List;
|
||
let list = data.Result_Data.List
|
||
this.merchantList = list;
|
||
uni.hideLoading();
|
||
},
|
||
goShop(item) {
|
||
if (item.SCANCODE_ORDER === 1) {
|
||
this.goBuy(item);
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/storeDetail/index?id=${item.MERCHANTS_ID}`,
|
||
});
|
||
}
|
||
},
|
||
// 去点餐的跳转
|
||
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}&buyType=${item.SCANCODE_ORDER}&monthlySales=${item.MONTHLYSALES || ""}&perCapita=${item.PERCAPITA || ""}`,
|
||
});
|
||
} 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}&buyType=${item.SCANCODE_ORDER}&monthlySales=${item.MONTHLYSALES || ""}&perCapita=${item.PERCAPITA || ""}`,
|
||
});
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.activityBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
.activityBoxItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border-radius: 32rpx;
|
||
overflow: hidden;
|
||
|
||
.cover-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.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;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopItemBox {
|
||
width: 100%;
|
||
margin-bottom: 32rpx;
|
||
border-bottom: 1px solid #ededed;
|
||
padding-bottom: 32rpx;
|
||
|
||
.shopItemTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.shopImg {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
overflow: hidden;
|
||
border-radius: 16rpx;
|
||
margin-right: 28rpx;
|
||
|
||
.shopIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.shopDetail {
|
||
width: calc(100% - 158rpx);
|
||
height: 130rpx;
|
||
// height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// flex-direction: column;
|
||
// justify-content: space-between;
|
||
// position: relative;
|
||
|
||
.shopDetailLeft {
|
||
width: calc(100% - 150rpx);
|
||
height: 130rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.detailLeftTop {
|
||
.topShopName {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 29rpx;
|
||
color: #000000;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 100%;
|
||
display: inline-block;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.detailLeftBottom {
|
||
.scoreBox {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FF6200;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.newOtherDetail {
|
||
width: 100%;
|
||
display: flex;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
margin-top: 12rpx;
|
||
|
||
.label {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
width: 50rpx;
|
||
}
|
||
|
||
.value {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #009DFF;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
width: 70rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopDetailRight {
|
||
width: 150rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.goFood {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 8rpx 28rpx;
|
||
background-color: #FF6200;
|
||
border-radius: 32rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.search {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 8rpx 28rpx;
|
||
background-color: #009DFF;
|
||
border-radius: 32rpx;
|
||
display: inline-block;
|
||
|
||
}
|
||
}
|
||
|
||
.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: PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
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 {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #ba922f;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
|
||
.unit {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.monthSales {
|
||
margin-left: 16rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.perCapita {
|
||
margin-left: 16rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.couponList {
|
||
display: inline-block;
|
||
margin-top: 12rpx;
|
||
|
||
.couponBox {
|
||
background: #fef0e5;
|
||
border-radius: 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.couponIconBox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: linear-gradient(180deg, #ffddc0 0%, #ffeada 100%);
|
||
border-radius: 4rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.couponIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.couponText {
|
||
margin: 0 10rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #fa5825;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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";
|
||
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% - 160rpx);
|
||
box-sizing: border-box;
|
||
margin-left: 160rpx;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
margin-top: 24rpx;
|
||
|
||
.shopItem {
|
||
width: 168rpx;
|
||
margin-right: 16rpx;
|
||
|
||
.shopImgBox {
|
||
width: 146rpx;
|
||
// height: 96rpx;
|
||
height: 146rpx;
|
||
overflow: hidden;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.shopImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.shopName {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.itemPrice {
|
||
.itemUnit {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 20rpx;
|
||
color: #FF6200;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.itemPrice {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FF6200;
|
||
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;
|
||
|
||
.couponItem {
|
||
width: calc((100% - 24rpx) / 2);
|
||
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 {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.nearbyAttractions {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.nearTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.attractionsList {
|
||
width: 100%;
|
||
|
||
.attractionsItem {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
|
||
.attractionsImg {
|
||
width: 196rpx;
|
||
height: 196rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.rightItem {
|
||
width: calc(100% - 212rpx);
|
||
|
||
.attractionsText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightItemBox {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.timeText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.descBox {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/* 限制显示行数 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |