1119 lines
32 KiB
Vue
1119 lines
32 KiB
Vue
<template>
|
||
<view class="service-detail-page" :style="{ paddingTop: (menu.bottom + 14) + 'px' }">
|
||
|
||
<!-- 服务区的信息 -->
|
||
<view class="serviceDetail" style="margin-top: 16rpx;">
|
||
<view class="detailTop">
|
||
<view class="serviceImg" v-if="info.fileId && info.fileId.length > 0">
|
||
<swiper scroll-x="true" circular="true" class="banner" indicator-dots="true" indicator-active-color="#272625"
|
||
autoplay interval="3000" style="width: 100%; height: 100%">
|
||
<swiper-item v-for="(img, i) in info.fileId" :key="i" style="width: 100%; height: 100%">
|
||
<image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true"
|
||
:src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + img.fileID"
|
||
@click="handlePreview"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务区基本信息 -->
|
||
<view class="detailBottom">
|
||
<view class="detailFirst">
|
||
<text class="serviceName">{{
|
||
info.SAName || ""
|
||
}}</text>
|
||
<text class="serviceStatus">营业中</text>
|
||
</view>
|
||
<view class="detailSecond">
|
||
<image class="detailFixedIcon" src="/static/images/home/address.png" />
|
||
<text class="address">
|
||
<text class="distance">{{ info.SERVERPART_DISTANCE || "-" }}km</text>
|
||
<text class="addressText">{{ info.belongRegion || "-" }}{{ info.belongLine || "-" }}</text>
|
||
</text>
|
||
</view>
|
||
<view class="navigationBox" @click="handleGoMap">
|
||
<image class="navigationIcon" src="/static/images/home/navigationIcon.svg" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<scroll-view scroll-y="true" class="content-scroll"
|
||
:style="{ height: `calc(100vh - ${(menu.bottom + 14)}px - 560rpx ) ` }">
|
||
<view class="content-container">
|
||
|
||
<!-- 基本信息卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-header">
|
||
<text class="card-title">📋 基本信息</text>
|
||
</view>
|
||
|
||
<view class="info-grid">
|
||
<!-- <view class="info-item">
|
||
<text class="info-label">服务区编码</text>
|
||
<text class="info-value">{{ info.SACode || '-' }}</text>
|
||
</view> -->
|
||
<view class="info-item">
|
||
<text class="info-label">所属片区</text>
|
||
<text class="info-value">{{ info.belongArea || '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">所在线路</text>
|
||
<text class="info-value">{{ info.belongLine || '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">所在地区</text>
|
||
<text class="info-value">{{ info.belongRegion || '-' }}</text>
|
||
</view>
|
||
<!-- <view class="info-item">
|
||
<text class="info-label">桩号位置</text>
|
||
<text class="info-value">{{ info.pileNumLocation || '-' }}</text>
|
||
</view> -->
|
||
<view class="info-item">
|
||
<text class="info-label">经营模式</text>
|
||
<text class="info-value">{{ info.businessModel && info.businessModel.length > 0 ?
|
||
info.businessModel.toString() : '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">产权归属</text>
|
||
<text class="info-value">{{ info.propertyOwnership || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 面积信息卡片 -->
|
||
<view class="area-card">
|
||
<view class="card-header">
|
||
<text class="card-title">📏 面积信息</text>
|
||
</view>
|
||
|
||
<view class="area-stats">
|
||
<view class="stat-item">
|
||
<text class="stat-number">{{ formatArea(info.floorArea) }}</text>
|
||
<text class="stat-label">占地面积</text>
|
||
<text class="stat-unit">m²</text>
|
||
</view>
|
||
<view class="stat-divider"></view>
|
||
<view class="stat-item">
|
||
<text class="stat-number">{{ formatArea(info.parkArea) }}</text>
|
||
<text class="stat-label">停车场面积</text>
|
||
<text class="stat-unit">m²</text>
|
||
</view>
|
||
<view class="stat-divider"></view>
|
||
<view class="stat-item">
|
||
<text class="stat-number">{{ formatArea((info.synthesisCatering || 0) + (info.supermarket || 0) +
|
||
(info.synthesiOther || 0)) }}</text>
|
||
<text class="stat-label">综合楼面积</text>
|
||
<text class="stat-unit">m²</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务详情卡片 -->
|
||
<view class="service-card">
|
||
<!-- <view class="service-header">
|
||
<text class="service-title">🏢 {{ info.SAName || '服务区域' }}</text>
|
||
</view> -->
|
||
|
||
<!-- 服务信息 -->
|
||
<view class="service-section">
|
||
<view class="section-header">
|
||
<!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg" /> -->
|
||
<text class="section-title">🚻 服务设施</text>
|
||
</view>
|
||
|
||
<view class="service-grid">
|
||
<view class="service-row">
|
||
<view class="service-item"
|
||
:class="{ 'available': info.manToiletNum > 0, 'unavailable': !info.manToiletNum }">
|
||
<image class="service-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/manWc.svg" />
|
||
<text class="service-name">男厕</text>
|
||
<text class="service-count" v-if="info.manToiletNum">({{ info.manToiletNum }})</text>
|
||
</view>
|
||
<view class="service-item"
|
||
:class="{ 'available': info.womanToiletNum > 0, 'unavailable': !info.womanToiletNum }">
|
||
<image class="service-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/womanWc.svg" />
|
||
<text class="service-name">女厕</text>
|
||
<text class="service-count" v-if="info.womanToiletNum">({{ info.womanToiletNum }})</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-row">
|
||
<view class="service-item"
|
||
:class="{ 'available': info.otherWCNum > 0, 'unavailable': !info.otherWCNum }">
|
||
<text class="service-name">第三卫生间</text>
|
||
<text class="service-count" v-if="info.otherWCNum">({{ info.otherWCNum }})</text>
|
||
</view>
|
||
<view class="service-item"
|
||
:class="{ 'available': info.babyCareRoomNum > 0, 'unavailable': !info.babyCareRoomNum }">
|
||
<text class="service-name">母婴室</text>
|
||
<text class="service-count" v-if="info.babyCareRoomNum">({{ info.babyCareRoomNum }})</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-row">
|
||
<view class="service-item" :class="{ 'available': info.faucetNum > 0, 'unavailable': !info.faucetNum }">
|
||
<text class="service-name">水龙头</text>
|
||
<text class="service-count" v-if="info.faucetNum">({{ info.faucetNum }})</text>
|
||
</view>
|
||
<view class="service-item"
|
||
:class="{ 'available': info.repairStationArea > 0, 'unavailable': !info.repairStationArea }">
|
||
<text class="service-name">汽修站</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-row">
|
||
<view class="service-item"
|
||
:class="{ 'available': info.addWaterArea > 0, 'unavailable': !info.addWaterArea }">
|
||
<text class="service-name">加水区域</text>
|
||
</view>
|
||
<view class="service-item empty-item">
|
||
<!-- 空白项保持对齐 -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 车位信息 -->
|
||
<view class="service-section">
|
||
<view class="section-header">
|
||
<!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceCar.svg" /> -->
|
||
<text class="section-title">🚗 停车位</text>
|
||
</view>
|
||
|
||
<view class="parking-grid">
|
||
<view class="parking-row">
|
||
<view class="parking-item">
|
||
<text class="parking-label">小型车位</text>
|
||
<text class="parking-count">{{ info.minStallNum || 0 }}</text>
|
||
</view>
|
||
<view class="parking-item">
|
||
<text class="parking-label">中型车位</text>
|
||
<text class="parking-count">{{ info.middleStallNum || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="parking-row">
|
||
<view class="parking-item">
|
||
<text class="parking-label">大型车位</text>
|
||
<text class="parking-count">{{ info.maxStallNum || 0 }}</text>
|
||
</view>
|
||
<view class="parking-item">
|
||
<text class="parking-label">加油车道</text>
|
||
<text class="parking-count">{{ info.addOilRoadNum || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 经营信息 -->
|
||
<view class="service-section">
|
||
<view class="section-header">
|
||
<!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceFood.svg" /> -->
|
||
<text class="section-title">🏪 经营服务</text>
|
||
</view>
|
||
|
||
<view class="business-grid">
|
||
<view class="business-row">
|
||
<view class="business-item"
|
||
:class="{ 'available': info.synthesisCatering > 0, 'unavailable': !info.synthesisCatering }">
|
||
<text class="business-name">餐饮服务</text>
|
||
<text class="business-count" v-if="info.synthesisCatering">({{ formatArea(info.synthesisCatering)
|
||
}}m²)</text>
|
||
</view>
|
||
<view class="business-item"
|
||
:class="{ 'available': info.supermarket > 0, 'unavailable': !info.supermarket }">
|
||
<text class="business-name">超市便利店</text>
|
||
<text class="business-count" v-if="info.supermarket">({{ formatArea(info.supermarket) }}m²)</text>
|
||
</view>
|
||
</view>
|
||
<view class="business-row">
|
||
<view class="business-item"
|
||
:class="{ 'available': info.LPGStationsArea > 0, 'unavailable': !info.LPGStationsArea }">
|
||
<text class="business-name">加气站</text>
|
||
<text class="business-count" v-if="info.LPGStationsArea">({{ formatArea(info.LPGStationsArea)
|
||
}}m²)</text>
|
||
</view>
|
||
<view class="business-item"
|
||
:class="{ 'available': info.chargingStationArea > 0, 'unavailable': !info.chargingStationArea }">
|
||
<text class="business-name">充电站</text>
|
||
<text class="business-count" v-if="info.chargingStationArea">({{ formatArea(info.chargingStationArea)
|
||
}}m²)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="business-type" v-if="info.businessModel && info.businessModel.length > 0">
|
||
<text class=" business-type-label">经营模式：</text>
|
||
<view class="business-type-tag">
|
||
<text class="business-type-text">{{ info.businessModel && info.businessModel.length > 0 ?
|
||
info.businessModel.toString() : '-' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设施详情卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-header">
|
||
<text class="card-title">⚡ 设施详情</text>
|
||
</view>
|
||
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="info-label">污水处理方量</text>
|
||
<text class="info-value">{{ info.sewageTreatmentVolume || '-' }}m³</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">变压器功率</text>
|
||
<text class="info-value">{{ info.transformerVA || '-' }}VA</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">加油枪数量</text>
|
||
<text class="info-value">{{ info.oilGunNum || 0 }}支</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">充电桩数量</text>
|
||
<text class="info-value">{{ info.chargingStationPileNum || 0 }}桩</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">充电枪数量</text>
|
||
<text class="info-value">{{ info.chargingStationGunNum || 0 }}枪</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">直流快充枪</text>
|
||
<text class="info-value">{{ info.DCFastGunNum || 0 }}枪</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">直流慢充枪</text>
|
||
<text class="info-value">{{ info.slowGunNum || 0 }}枪</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 区域面积卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-header">
|
||
<text class="card-title">🏗️ 区域面积 <text
|
||
style="font-size: 24rpx;font-weight: 400;margin-left: 8rpx;">/m²</text></text>
|
||
</view>
|
||
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="info-label">行车道面积</text>
|
||
<text class="info-value">{{ formatArea(info.drivewayArea) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">办公区面积</text>
|
||
<text class="info-value">{{ formatArea(info.officeArea) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">卫生间面积</text>
|
||
<text class="info-value">{{ formatArea(info.WCArea) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">绿化面积</text>
|
||
<text class="info-value">{{ formatArea(info.greenArea) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">员工住宿区</text>
|
||
<text class="info-value">{{ formatArea(info.employeeRoomArea) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">驾驶员休息室</text>
|
||
<text class="info-value">{{ formatArea(info.driverRoomArea) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
|
||
export default {
|
||
name: "mapDetail",
|
||
data() {
|
||
return {
|
||
info: {},
|
||
menu: {},
|
||
typeList: [
|
||
{ url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg', name: 'A类', isShow: false },
|
||
{ url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg', name: '2015-06-10', isShow: false },
|
||
{ url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg', name: '母婴室', isShow: false },
|
||
{ url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg', name: '司机之家', isShow: false },
|
||
{ url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg', name: '充电桩', isShow: false },
|
||
{ url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg', name: '客房', isShow: false }
|
||
],
|
||
topBg: [],
|
||
seatInfo: {}
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
this.handleGetPageData()
|
||
},
|
||
props: {
|
||
selectIndex: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
watch: {
|
||
selectIndex: {
|
||
handler(value) {
|
||
if (value === 0) {
|
||
this.handleGetPageData()
|
||
}
|
||
},
|
||
immediate: true,
|
||
}
|
||
},
|
||
methods: {
|
||
// 跳转导航
|
||
handleGoMap() {
|
||
uni.openLocation({
|
||
latitude: this.info.latitude * 1,
|
||
longitude: this.info.longitude * 1,
|
||
scale: 16,
|
||
name: this.info.SAName,
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
},
|
||
// 改变服务区
|
||
handleChangeService() {
|
||
this.$util.toNextRoute("navigateTo", "/pages/map/index?type=attendanceStatus");
|
||
},
|
||
// 返回上一页
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
|
||
// 获取页面数据
|
||
handleGetPageData() {
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
let seat = uni.getStorageSync('currentService')
|
||
// this.handleSearch(seat)
|
||
this.handleGetData(seat)
|
||
this.topBg = []
|
||
},
|
||
handleGetData(obj) {
|
||
// 模拟新数据结构的示例数据
|
||
let res = {
|
||
...obj,
|
||
// fileId: obj.fileId ? JSON.parse(obj.fileId) : [],
|
||
// businessModel: obj.businessModel ? JSON.parse(obj.businessModel) : [],
|
||
}
|
||
console.log('新数据结构示例:', res);
|
||
this.info = res
|
||
},
|
||
// 搜索服务区信息
|
||
async handleSearch(seat) {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
this.seatInfo = JSON.parse(seatInfo);
|
||
|
||
let reqs = {
|
||
longitude: this.seatInfo.longitude,
|
||
ServerpartId: currentService.Serverpart_ID || currentService.SERVERPART_ID,
|
||
latitude: this.seatInfo.latitude,
|
||
}
|
||
|
||
try {
|
||
const totalData = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', reqs)
|
||
this.info = totalData.Result_Data
|
||
|
||
// 设置设施显示状态
|
||
this.typeList[4].isShow = this.info.HASCHARGE
|
||
this.typeList[5].isShow = this.info.HASGUESTROOM
|
||
this.typeList[2].isShow = this.info.HASMOTHER
|
||
this.typeList[3].isShow = this.info.HASPILOTLOUNGE
|
||
|
||
if (this.info.SERVERPART_TYPE) {
|
||
this.typeList[0].name = this.getServiceType(this.info.SERVERPART_TYPE)
|
||
this.typeList[0].isShow = true
|
||
}
|
||
|
||
this.typeList[1].isShow = this.info.STARTDATE
|
||
|
||
// 设置图片
|
||
if (this.info && this.info.ImageLits && this.info.ImageLits.length > 0) {
|
||
this.topBg = this.info.ImageLits
|
||
} else {
|
||
this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
|
||
}
|
||
} catch (error) {
|
||
console.error('获取服务区信息失败:', error)
|
||
}
|
||
},
|
||
|
||
// 获取服务区类型
|
||
getServiceType(type) {
|
||
const typeMap = {
|
||
1000: 'A类',
|
||
1010: 'A类（示范）',
|
||
2000: 'B类',
|
||
3000: 'C类',
|
||
4000: 'D类'
|
||
}
|
||
return typeMap[type] || ''
|
||
},
|
||
|
||
|
||
// 格式化面积
|
||
formatArea(area) {
|
||
if (!area) return '-'
|
||
return parseFloat(area).toLocaleString()
|
||
},
|
||
|
||
// 预览图片
|
||
handlePreview() {
|
||
uni.previewImage({
|
||
current: this.topBg[0],
|
||
urls: this.topBg
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@bg: #f8f9fa;
|
||
@muted: #666;
|
||
@card: #fff;
|
||
@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
@primary: #27B25F;
|
||
@primary2: #4CCC7F;
|
||
@ok: #2ed573;
|
||
@warn: #ff9f43;
|
||
@danger: #ff4757;
|
||
|
||
.service-detail-page {
|
||
width: 100vw;
|
||
background-color: #F5F5F5;
|
||
box-sizing: border-box;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.summaryTab {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
|
||
z-index: 99;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding-bottom: 16px;
|
||
|
||
.leftArrow {
|
||
width: 100%;
|
||
height: 24px;
|
||
position: absolute;
|
||
z-index: 99999999999;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
|
||
.img {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 8px;
|
||
z-index: 99;
|
||
}
|
||
|
||
.picker {
|
||
.selectService {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.select {
|
||
height: 32px;
|
||
background: #fff;
|
||
border-radius: 0 16px 16px 0;
|
||
transform: translateX(-40px);
|
||
box-sizing: border-box;
|
||
padding-left: 35px;
|
||
padding-right: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.uni-input {
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.area {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 16px;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.serviceDetail {
|
||
width: calc(100% - 64rpx);
|
||
height: 440rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin-left: 32rpx;
|
||
|
||
.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: 28rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
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: 24rpx;
|
||
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: 24rpx;
|
||
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: 24rpx;
|
||
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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.content-scroll {
|
||
background: @bg;
|
||
// margin-top: 24rpx;
|
||
}
|
||
|
||
.content-container {
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.service-info {
|
||
background: #fff;
|
||
margin: 24rpx 32rpx 0;
|
||
border-radius: 24rpx;
|
||
padding: 40rpx;
|
||
box-shadow: @shadow;
|
||
|
||
.service-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
|
||
.service-name {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #160002;
|
||
flex: 1;
|
||
}
|
||
|
||
.status-badge {
|
||
background: linear-gradient(135deg, @primary, @primary2);
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.status-text {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.service-location {
|
||
margin-bottom: 32rpx;
|
||
|
||
.location-text {
|
||
font-size: 28rpx;
|
||
color: #786B6C;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
.nav-button-row {
|
||
.nav-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, @primary, @primary2);
|
||
color: #fff;
|
||
padding: 24rpx;
|
||
border-radius: 20rpx;
|
||
gap: 16rpx;
|
||
|
||
.nav-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
.nav-text {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-card,
|
||
.area-card {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx 24rpx 16rpx;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: @shadow;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.header-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient(135deg, @primary, @primary2);
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
|
||
.icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
}
|
||
|
||
.info-grid {
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16rpx 0;
|
||
border-bottom: 2rpx solid #F5F5F5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 24rpx;
|
||
color: #786B6C;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 24rpx;
|
||
color: #160002;
|
||
font-weight: 600;
|
||
text-align: right;
|
||
flex: 1;
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.area-stats {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.stat-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.stat-number {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: @primary;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.stat-label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #786B6C;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.stat-unit {
|
||
font-size: 22rpx;
|
||
color: #A69E9F;
|
||
}
|
||
}
|
||
|
||
.stat-divider {
|
||
width: 2rpx;
|
||
height: 80rpx;
|
||
background: #E5E5E5;
|
||
margin: 0 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.service-card {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: @shadow;
|
||
|
||
.service-header {
|
||
margin-bottom: 16rpx;
|
||
|
||
.service-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #160002;
|
||
}
|
||
}
|
||
|
||
.service-section {
|
||
margin-bottom: 24rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.section-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
}
|
||
|
||
.service-grid {
|
||
.service-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.service-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #F0F0F0;
|
||
padding: 16rpx;
|
||
border-radius: 16rpx;
|
||
border: 3rpx solid transparent;
|
||
|
||
&.available {
|
||
background: linear-gradient(135deg, rgba(@primary, 0.15), rgba(@primary2, 0.1));
|
||
border: 3rpx solid @primary;
|
||
box-shadow: 0 4rpx 12rpx rgba(@primary, 0.2);
|
||
}
|
||
|
||
&.unavailable {
|
||
.service-name {
|
||
text-decoration: line-through;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
&.empty-item {
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.service-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.service-name {
|
||
font-size: 24rpx;
|
||
color: #160002;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
}
|
||
|
||
.service-count {
|
||
font-size: 20rpx;
|
||
color: #786B6C;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.parking-grid {
|
||
.parking-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.parking-item {
|
||
flex: 1;
|
||
background: #F8F9FA;
|
||
border-radius: 20rpx;
|
||
padding: 12rpx 16rpx;
|
||
text-align: center;
|
||
|
||
.parking-icon {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin: 0 auto 20rpx;
|
||
border-radius: 16rpx;
|
||
|
||
&.car-icon {
|
||
background: linear-gradient(135deg, #FF6B6B, #FF8787);
|
||
}
|
||
|
||
&.bus-icon {
|
||
background: linear-gradient(135deg, #4ECDC4, #6BCDB9);
|
||
}
|
||
|
||
&.truck-icon {
|
||
background: linear-gradient(135deg, #45B7D1, #5DBBCC);
|
||
}
|
||
|
||
&.danger-icon {
|
||
background: linear-gradient(135deg, #FFA726, #FFB74D);
|
||
}
|
||
}
|
||
|
||
.parking-label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #786B6C;
|
||
}
|
||
|
||
.parking-count {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #160002;
|
||
}
|
||
}
|
||
}
|
||
|
||
.business-grid {
|
||
margin-bottom: 24rpx;
|
||
|
||
.business-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.business-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #F0F0F0;
|
||
padding: 12rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
border: 3rpx solid transparent;
|
||
|
||
&.available {
|
||
background: linear-gradient(135deg, rgba(#1677FE, 0.15), rgba(#1677FE, 0.1));
|
||
border: 3rpx solid #1677FE;
|
||
box-shadow: 0 4rpx 12rpx rgba(#1677FE, 0.2);
|
||
}
|
||
|
||
&.unavailable {
|
||
.business-name {
|
||
text-decoration: line-through;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.business-name {
|
||
font-size: 24rpx;
|
||
color: #160002;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
}
|
||
|
||
.business-count {
|
||
font-size: 20rpx;
|
||
color: #786B6C;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.business-type {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.business-type-label {
|
||
font-size: 24rpx;
|
||
color: #786B6C;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.business-type-tag {
|
||
background: linear-gradient(135deg, @primary, @primary2);
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.business-type-text {
|
||
font-size: 24rpx;
|
||
color: white;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |