1041 lines
29 KiB
Vue
1041 lines
29 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="topBg && topBg.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 topBg" :key="i" style="width: 100%; height: 100%">
|
||
<image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true" :src="img"
|
||
@click="handlePreview"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务区基本信息 -->
|
||
<view class="detailBottom">
|
||
<view class="detailFirst">
|
||
<text class="serviceName">{{
|
||
info.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">{{
|
||
info.SERVERPART_DISTANCE === 0
|
||
? 0
|
||
: info.SERVERPART_DISTANCE || "-"
|
||
}}km</text>
|
||
<text class="addressText">{{ info.ServerpartInfo.SERVERPART_ADDRESS || "-"
|
||
}}{{ info.ServerpartInfo.EXPRESSWAY_NAME || "-" }}</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">{{ getWaterIntakeType(info.ServerpartInfo &&
|
||
info.ServerpartInfo.WATERINTAKE_TYPE) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">污水处理</text>
|
||
<text class="info-value">{{ getSewageType(info.ServerpartInfo && info.ServerpartInfo.SEWAGEDISPOSAL_TYPE)
|
||
}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">所在地区</text>
|
||
<text class="info-value">{{ (info.ServerpartInfo && info.ServerpartInfo.SERVERPART_ADDRESS) || '-'
|
||
}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">管理单位</text>
|
||
<text class="info-value">{{ (info.ServerpartInfo && info.ServerpartInfo.MANAGERCOMPANY) || '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">产权单位</text>
|
||
<text class="info-value">{{ (info.ServerpartInfo && info.ServerpartInfo.OWNEDCOMPANY) || '-' }}</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.ServerpartInfo && info.ServerpartInfo.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.ServerpartInfo && info.ServerpartInfo.SHAREAREA) }}</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.ServerpartInfo && info.ServerpartInfo.SERVERPART_AREA)
|
||
}}</text>
|
||
<text class="stat-label">建筑面积</text>
|
||
<text class="stat-unit">m²</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务详情卡片 -->
|
||
<view class="service-card" v-for="(region, regionIndex) in info.RegionInfo" :key="regionIndex">
|
||
<view class="service-header">
|
||
<text class="service-title">🏢 {{ region.SERVERPART_REGIONNAME || '服务区域' }}</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': region.HASPANTRY, 'unavailable': !region.HASPANTRY }">
|
||
<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="region.HASPANTRY">({{ region.HASPANTRY }})</text>
|
||
</view>
|
||
<view class="service-item" :class="{ 'available': region.HASWIFI, 'unavailable': !region.HASWIFI }">
|
||
<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="region.HASWIFI">({{ region.HASWIFI }})</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-row">
|
||
<view class="service-item"
|
||
:class="{ 'available': region.HASTHIRDTOILETS, 'unavailable': !region.HASTHIRDTOILETS }">
|
||
<text class="service-name">第三卫生间</text>
|
||
</view>
|
||
<view class="service-item"
|
||
:class="{ 'available': region.TOILETCOUNT, 'unavailable': !region.TOILETCOUNT }">
|
||
<text class="service-name">潮汐厕位</text>
|
||
<text class="service-count" v-if="region.TOILETCOUNT">({{ region.TOILETCOUNT }})</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-row">
|
||
<view class="service-item"
|
||
:class="{ 'available': region.HASWATERROOM, 'unavailable': !region.HASWATERROOM }">
|
||
<text class="service-name">开水器</text>
|
||
<text class="service-count" v-if="region.HASWATERROOM">({{ region.HASWATERROOM }})</text>
|
||
</view>
|
||
<view class="service-item" :class="{ 'available': region.HASCHILD, 'unavailable': !region.HASCHILD }">
|
||
<text class="service-name">车辆维修</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-row">
|
||
<view class="service-item"
|
||
:class="{ 'available': region.HASSHOWERROOM, 'unavailable': !region.HASSHOWERROOM }">
|
||
<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">{{ region.SMALLPARKING || 0 }}</text>
|
||
</view>
|
||
<view class="parking-item">
|
||
<text class="parking-label">客车车位</text>
|
||
<text class="parking-count">{{ region.PACKING || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="parking-row">
|
||
<view class="parking-item">
|
||
<text class="parking-label">货车车位</text>
|
||
<text class="parking-count">{{ region.TRUCKPACKING || 0 }}</text>
|
||
</view>
|
||
<view class="parking-item">
|
||
<text class="parking-label">危化品车位</text>
|
||
<text class="parking-count">{{ region.DANPACKING || 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': region.DININGROOMCOUNT, 'unavailable': !region.DININGROOMCOUNT }">
|
||
<text class="business-name">餐饮服务</text>
|
||
</view>
|
||
<view class="business-item"
|
||
:class="{ 'available': region.HASMESSAGESEARCH, 'unavailable': !region.HASMESSAGESEARCH }">
|
||
<text class="business-name">住宿服务</text>
|
||
</view>
|
||
</view>
|
||
<view class="business-row">
|
||
<view class="business-item"
|
||
:class="{ 'available': region.HASBACKGROUNDRADIO, 'unavailable': !region.HASBACKGROUNDRADIO }">
|
||
<text class="business-name">便利店</text>
|
||
</view>
|
||
<view class="business-item"
|
||
:class="{ 'available': region.DININGBXCOUNT, 'unavailable': !region.DININGBXCOUNT }">
|
||
<text class="business-name">商铺</text>
|
||
<text class="business-count" v-if="region.DININGBXCOUNT">({{ region.DININGBXCOUNT }})</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="business-type" v-if="region.BUSINESSTYPE">
|
||
<text class="business-type-label">经营模式：</text>
|
||
<view class="business-type-tag">
|
||
<text class="business-type-text">{{ region.BUSINESSTYPE }}</text>
|
||
</view>
|
||
</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.SERVERPART_Y * 1,
|
||
longitude: this.info.SERVERPART_X * 1,
|
||
scale: 16,
|
||
name: this.info.SERVERPART_NAME,
|
||
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.topBg = []
|
||
},
|
||
|
||
// 搜索服务区信息
|
||
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] || ''
|
||
},
|
||
|
||
// 获取取水方式
|
||
getWaterIntakeType(type) {
|
||
const typeMap = {
|
||
1: '自来水',
|
||
2: '井水'
|
||
}
|
||
return typeMap[type] || '-'
|
||
},
|
||
|
||
// 获取污水处理方式
|
||
getSewageType(type) {
|
||
const typeMap = {
|
||
1: '市政',
|
||
2: '污水处理设备'
|
||
}
|
||
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> |