790 lines
34 KiB
Vue
790 lines
34 KiB
Vue
<template>
|
||
<div class="main">
|
||
<!-- <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
|
||
<!-- <commercial-type :have="7"/>-->
|
||
<!-- </div>-->
|
||
<div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" >
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"></image>
|
||
|
||
<!-- <div class="pickers" @click="handleChangeService">-->
|
||
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>-->
|
||
<!-- <div class="pick" :value="selectIndex" :range="array" range-key="name">-->
|
||
<!-- <view class="picker">-->
|
||
<!-- <p class="pickTitle">{{info.SERVERPART_NAME?info.SERVERPART_NAME:''}}</p>-->
|
||
<!-- {{info.SPREGIONTYPE_NAME?info.SPREGIONTYPE_NAME:''}}-->
|
||
<!-- </view>-->
|
||
<!-- <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleChangeService">
|
||
<div class="selectService" >
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
||
<view class="select">
|
||
<view class="content">
|
||
<view class="uni-input">{{info.SERVERPART_NAME?info.SERVERPART_NAME:''}}</view>
|
||
<p class="area">{{info.SPREGIONTYPE_NAME?info.SPREGIONTYPE_NAME:''}}</p>
|
||
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topImg">
|
||
<swiper v-if="topBg && topBg.length>0" :current="currentImg" class="carousel" @change="changeSwiper">
|
||
<swiper-item class="imgIndex" v-for="(item,index) in topBg" :key="index" :style="{backgroundImage:`url(${item})`}">
|
||
<!-- <image class="img" :src="item"></image>-->
|
||
<view class="sliderPage" :style="{top: (menu.bottom + 14)+'px'}" v-if="item.key!=='previous' && item.key!=='next'">
|
||
<SliderPage :index="0"/>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<div v-if="topBg && topBg.length>0" class="picNumber" @click="handlePreview">
|
||
<image class="icon" src="/static/images/noImg.svg"></image>
|
||
<text class="text"> {{ currentImg<1?1:currentImg>topBgRealLength?topBgRealLength:currentImg }} / {{ topBgRealLength }}</text>
|
||
<image class="more" src="/static/images/more.svg"></image>
|
||
</div>
|
||
<!-- <image v-else @click="handlePreview('default')" class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>-->
|
||
</div>
|
||
<div class="menu">
|
||
<div class="top">
|
||
<div class="left">
|
||
<p class="title">{{info.SERVERPART_NAME?info.SERVERPART_NAME:'-'}}</p>
|
||
<text class="status">营业中</text>
|
||
</div>
|
||
<div class="iconBox" @click="handleGoMap">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
|
||
</div>
|
||
</div>
|
||
<div class="scroll">
|
||
<div class="info">
|
||
<p class="address">{{info.ServerpartInfo.EXPRESSWAY_NAME?info.ServerpartInfo.EXPRESSWAY_NAME:''}}</p>
|
||
<div class="typeList">
|
||
<div class="typeItem" v-for="(item,index) in typeList" :key="index" v-if="item.isShow">
|
||
<image class="img" :src="item.url"></image>
|
||
<text class="text">{{item.name}}</text>
|
||
</div>
|
||
</div>
|
||
<div class="baseInfo">
|
||
<p class="title">基本信息</p>
|
||
<div class="word">
|
||
<p class="subTitle">取水方式</p>
|
||
<text class="value">{{info.ServerpartInfo.WATERINTAKE_TYPE===1?'自来水':info.ServerpartInfo.WATERINTAKE_TYPE===2?'井水':'' }}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">污水处理</p>
|
||
<text class="text">{{info.ServerpartInfo.SEWAGEDISPOSAL_TYPE===1?'市政':info.ServerpartInfo.SEWAGEDISPOSAL_TYPE===2?'污水处理设备':''}}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">市区县镇</p>
|
||
<text class="text">{{info.ServerpartInfo.SERVERPART_ADDRESS?info.ServerpartInfo.SERVERPART_ADDRESS:'' }}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">管理单位</p>
|
||
<text class="text">{{info.ServerpartInfo.MANAGERCOMPANY?info.ServerpartInfo.MANAGERCOMPANY:'' }}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">产权单位</p>
|
||
<text class="text">{{info.ServerpartInfo.OWNEDCOMPANY?info.ServerpartInfo.OWNEDCOMPANY:'' }}</text>
|
||
</div>
|
||
|
||
<!-- <div class="unqualifiedNeeds">-->
|
||
<!-- <text class="subTitle">介绍说明</text>-->
|
||
<!-- <text class="unqualNeedText" style="text-indent:28px">{{info.ServerpartInfo.SERVERPART_INFO?info.ServerpartInfo.SERVERPART_INFO:'' }}</text>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
<div class="areaInfo" style="margin-top: 16px">
|
||
<p class="title">面积信息</p>
|
||
<div class="word">
|
||
<p class="subTitleArea">占地面积</p>
|
||
<text class="value" v-if="info.ServerpartInfo.FLOORAREA">{{info.ServerpartInfo.FLOORAREA }}<text style="margin-left: 4px">m²</text></text>
|
||
<text class="value" v-else></text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitleArea">停车场面积</p>
|
||
<text class="value" v-if="info.ServerpartInfo.SHAREAREA">{{info.ServerpartInfo.SHAREAREA}}<text style="margin-left: 4px">m²</text></text>
|
||
<text class="value" v-else></text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitleArea">建筑面积</p>
|
||
<text class="value" v-if="info.ServerpartInfo.SERVERPART_AREA">{{info.ServerpartInfo.SERVERPART_AREA }}<text style="margin-left: 4px">m²</text></text>
|
||
<text class="value" v-else></text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="service">
|
||
<div class="serviceItem" v-for="(item,index) in info.RegionInfo" :key="index" :style="{marginTop:index!==0?'32px':''}">
|
||
<p class="title">{{item.SERVERPART_REGIONNAME?item.SERVERPART_REGIONNAME:'-'}}</p>
|
||
<div class="box">
|
||
<div class="left">
|
||
<image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg"></image>
|
||
<text class="textTitle">服务信息</text>
|
||
</div>
|
||
<div class="right">
|
||
<div class="item">
|
||
<p :class="item.HASPANTRY?'text':'unText'" style="display: flex;align-items: center"><image style="width: 16px;height: 16px;margin-right: 4px" src="https://eshangtech.com/ShopICO/ahyd-BID/service/manWc.svg"/>男厕<text style="margin-left: 4px">{{item.HASPANTRY?'(' + item.HASPANTRY+')':'' }}</text></p>
|
||
<p :class="item.HASTHIRDTOILETS?'text':'unText'">第三卫生间</p>
|
||
<p :class="item.HASCHILD?'text':'unText'">车辆维修</p>
|
||
<p :class="item.HASWATERROOM?'text':'unText'">开水器<text style="margin-left: 4px">{{item.HASWATERROOM?'(' + item.HASWATERROOM + ')':'' }}</text></p>
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.HASWIFI?'text':'unText'" style="display: flex;align-items: center"><image style="width: 16px;height: 16px;margin-right: 4px" src="https://eshangtech.com/ShopICO/ahyd-BID/service/womanWc.svg"/>女厕<text style="margin-left: 4px">{{item.HASWIFI?'(' + item.HASWIFI + ')':'' }}</text></p>
|
||
<p :class="item.TOILETCOUNT?'text':'unText'">潮汐厕位<text style="margin-left: 4px">{{item.TOILETCOUNT?'(' + item.TOILETCOUNT + ')':'' }}</text></p>
|
||
<p :class="item.HASSHOWERROOM?'text':'unText'">车辆加水</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="left">
|
||
<image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceCar.svg"> </image>
|
||
<text class="textTitle">车位信息</text>
|
||
</div>
|
||
<div class="right">
|
||
<div class="item">
|
||
<p :class="item.SMALLPARKING?'text':'unText'">轿车车位<text style="margin-left: 4px">{{item.SMALLPARKING?'(' + item.SMALLPARKING + ')':'' }}</text></p>
|
||
<p :class="item.TRUCKPACKING?'text':'unText'">货车车位<text style="margin-left: 4px">{{item.TRUCKPACKING?'(' + item.TRUCKPACKING + ')':'' }}</text></p>
|
||
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.PACKING?'text':'unText'">客车车位<text style="margin-left: 4px">{{item.PACKING?'(' + item.PACKING + ')':'' }}</text></p>
|
||
<p :class="item.DANPACKING?'text':'unText'">危化品车位<text style="margin-left: 4px">{{item.DANPACKING?'(' + item.DANPACKING +')':'' }}</text></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="left">
|
||
<image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceFood.svg"></image>
|
||
<text class="textTitle">经营信息</text>
|
||
</div>
|
||
<div class="right">
|
||
<div class="item">
|
||
<p :class="item.DININGROOMCOUNT?'text':'unText'" class="text">餐饮</p>
|
||
<p :class="item.HASMESSAGESEARCH?'text':'unText'" class="text">住宿</p>
|
||
<p class="model">{{item.BUSINESSTYPE }}</p>
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.HASBACKGROUNDRADIO?'text':'unText'" >便利店</p>
|
||
<p :class="item.DININGBXCOUNT?'text':'unText'">商铺<text style="margin-left: 4px">{{item.DININGBXCOUNT?'('+item.DININGBXCOUNT+')':'' }}</text></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
import commercialType from "./commercialType.vue";
|
||
import SliderPage from "./sliderPage.vue";
|
||
export default {
|
||
name: "detail",
|
||
components: {SliderPage, commercialType},
|
||
data(){
|
||
return {
|
||
info:{},
|
||
isShowPicker:false,//判断是否有选择器
|
||
menu:{},//手机参数
|
||
selectIndex:0,//服务区选择器选择的值
|
||
array:[],//服务区选择器选择的列表
|
||
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}],
|
||
typeShowList:[],
|
||
defaultBg:['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'],
|
||
topBg:[],
|
||
selectTopBg:0,
|
||
screenWidth:0,
|
||
currentImg:0,//当前选中的图片
|
||
come:'',// 来自首页还是用户页,
|
||
topBgRealLength:0,// 去除添加的上一个 后一个 的真实图片长度
|
||
}
|
||
},
|
||
onLoad(option){
|
||
this.come = option.come
|
||
// 获取手机参数
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
this.screenWidth = systemInfo.screenWidth
|
||
if (option.isPicker==='false'){
|
||
this.isShowPicker = false
|
||
}else if (option.isPicker==='true'){
|
||
this.isShowPicker = true
|
||
}
|
||
},
|
||
onShow(){
|
||
let seat = uni.getStorageSync('currentService')
|
||
this.handleSearch(seat)
|
||
this.topBg = []
|
||
this.currentImg = 1
|
||
},
|
||
onUnload() {
|
||
|
||
this.$util.addUserBehavior()
|
||
},
|
||
methods:{
|
||
// 滚动轮播图
|
||
changeSwiper(e){
|
||
console.log('e',e)
|
||
this.currentImg = e.detail.current
|
||
console.log('thisbg',this.topBg[Number(e.detail.current)])
|
||
let value = this.topBg[Number(e.detail.current)].key
|
||
if (value==='previous'){
|
||
uni.redirectTo({
|
||
url:`/pages/examine/detail?type=${2}`
|
||
})
|
||
}else if(value==='next'){
|
||
uni.redirectTo({
|
||
url:`/pages/commercialBINew/carPortrait`
|
||
})
|
||
}
|
||
},
|
||
// 点击预览图片
|
||
handlePreview(type){
|
||
if (type === 'default'){
|
||
uni.previewImage({
|
||
current: this.defaultBg[this.currentImg], // 图片的地址url
|
||
urls: this.defaultBg // 预览的地址url
|
||
})
|
||
}else{
|
||
uni.previewImage({
|
||
current: this.topBg[this.currentImg], // 图片的地址url
|
||
urls: this.topBg // 预览的地址url
|
||
})
|
||
}
|
||
},
|
||
async handleSearch(seat){
|
||
let reqs = {
|
||
longitude:seat.longitude,
|
||
ServerpartId:seat.Serverpart_ID,
|
||
latitude:seat.latitude
|
||
}
|
||
const totalData = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',reqs)
|
||
console.log('totalData',totalData)
|
||
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.info.SERVERPART_TYPE===1000?'A类':this.info.SERVERPART_TYPE===1010?'A类（示范）':
|
||
this.info.SERVERPART_TYPE===2000?'B类':this.info.SERVERPART_TYPE===3000?'C类':this.info.SERVERPART_TYPE===4000?'D类':''
|
||
this.typeList[0].isShow = this.info.HASCHARGE
|
||
}
|
||
this.typeList[1].isShow = this.info.STARTDATE
|
||
if (this.info && this.info.ImageLits && this.info.ImageLits.length>0){
|
||
this.topBg = this.info.ImageLits
|
||
this.topBg.unshift({key:'previous'})
|
||
this.topBg.push({key:'next'})
|
||
this.currentImg = 1
|
||
this.topBgRealLength = this.topBg.length-2
|
||
console.log('this.topBg',this.topBg)
|
||
this.$forceUpdate()
|
||
}else{
|
||
this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
|
||
this.topBg.unshift({key:'previous'})
|
||
this.topBg.push({key:'next'})
|
||
this.currentImg = 1
|
||
this.topBgRealLength = this.topBg.length - 2
|
||
}
|
||
// if (this.info && this.info.ImageLits && this.info.ImageLits.length>0){
|
||
// console.log('111')
|
||
// this.topBg = this.info.ImageLits
|
||
// this.topBg.unshift({key:'previous'})
|
||
// this.topBg.push({key:'next'})
|
||
// this.currentImg = 1
|
||
// this.topBgRealLength = this.topBg.length-2
|
||
// console.log('this.topBg',this.topBg)
|
||
// this.$forceUpdate()
|
||
// }else{
|
||
// this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
|
||
// this.topBg.unshift({key:'previous'})
|
||
// this.topBg.push({key:'next'})
|
||
// this.currentImg = 1
|
||
// this.topBgRealLength = this.topBg.length - 2
|
||
// }
|
||
|
||
},
|
||
//选择服务区
|
||
handleChangeService(){
|
||
let currentService = uni.getStorageSync('currentService')
|
||
let lastDay = uni.getStorageSync('lastDay')
|
||
let pageList = getCurrentPages()
|
||
console.log('pageList',pageList)
|
||
if (pageList.length>2){
|
||
if (this.isShowPicker){
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
|
||
})
|
||
}
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
|
||
})
|
||
}
|
||
},
|
||
async getList(option){
|
||
let req = {
|
||
longitude:option.longitude,
|
||
ServerpartId:option.SERVERPART_ID,
|
||
latitude:option.latitude
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
|
||
console.log('data',data)
|
||
this.info = data.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.info.SERVERPART_TYPE===1000?'A类':this.info.SERVERPART_TYPE===1010?'A类（示范）':
|
||
this.info.SERVERPART_TYPE===2000?'B类':this.info.SERVERPART_TYPE===3000?'C类':this.info.SERVERPART_TYPE===4000?'D类':''
|
||
this.typeList[0].isShow = this.info.HASCHARGE
|
||
}
|
||
this.typeList[1].isShow = this.info.STARTDATE
|
||
|
||
},
|
||
//返回上一级页面
|
||
handleBack(){
|
||
if (this.come==='index'){
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}else if (this.come==='user'){
|
||
uni.switchTab({
|
||
url: '/pages/userCenter/userCenter'
|
||
})
|
||
}else{
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
|
||
},
|
||
//点击跳转导航页
|
||
handleGoMap(){
|
||
let key='STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
|
||
let referer ='goMap'
|
||
//拿到用户当前的位置
|
||
let user = uni.getStorageSync('seatInfo')
|
||
let startPoint = {
|
||
name:'我的位置',
|
||
latitude:user.latitude,
|
||
longitude:user.longitude
|
||
}
|
||
//拿到当前已经选中的服务区的位置 也就是终点
|
||
let seat = uni.getStorageSync('currentService')
|
||
let endPoint = {
|
||
name:seat.SERVERPART_NAME,
|
||
latitude:seat.latitude,
|
||
longitude:seat.longitude
|
||
}
|
||
wx.navigateTo({
|
||
url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
max-width: 100vw;
|
||
width: 100%;
|
||
max-width: 100vw;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.leftArrow{
|
||
height: 24px;
|
||
position: absolute;
|
||
left: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index:99999999999;
|
||
.img{
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 16px;
|
||
}
|
||
.picker{
|
||
.selectService{
|
||
display: flex;
|
||
align-items: center;
|
||
.img{
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 2;
|
||
}
|
||
.select{
|
||
height: 32px;
|
||
background: #F8F8FA;
|
||
border-radius: 0 16px 16px 0;
|
||
transform: translateX(-40px);
|
||
box-sizing: border-box;
|
||
padding-left: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
.content{
|
||
display: flex;
|
||
align-items: center;
|
||
.uni-input{
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
.area{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40px;
|
||
margin-left: 4px;
|
||
}
|
||
.rightArrow{
|
||
width: 24px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.topImg{
|
||
width: 100%;
|
||
height: 324px;
|
||
position: relative;
|
||
.topDefaultBg{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.carousel{
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
float: left;
|
||
.imgIndex{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100% 100%;
|
||
.sliderPage{
|
||
width: 100%;
|
||
z-index: 9;
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 0;
|
||
border-top: 2px solid #6F747A;
|
||
border-bottom: 2px solid #6F747A;
|
||
background: transparent;
|
||
padding-bottom: 12rpx;
|
||
}
|
||
//.img{
|
||
// width: 100%;
|
||
// height: 324px;
|
||
//}
|
||
}
|
||
}
|
||
.picNumber{
|
||
display: flex;
|
||
align-items: center;
|
||
background: #383132;
|
||
border-radius: 11px;
|
||
position: absolute;
|
||
right: 16px;
|
||
bottom: 32px;
|
||
padding:5px 9px;
|
||
.icon{
|
||
width: 16px;
|
||
height: 18px;
|
||
opacity: 0.7;
|
||
margin-right: 4px;
|
||
}
|
||
.text{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 18px;
|
||
}
|
||
.more{
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
.menu{
|
||
width:100%;
|
||
box-sizing: border-box;
|
||
height: calc(100vh - 332px);
|
||
border-radius: 16px 16px 1px 1px;
|
||
transform: translateY(-16px);
|
||
.top{
|
||
width:100% ;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 16px 16px 0;
|
||
background: #fff;
|
||
border-radius: 16px 16px 1px 1px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
.title{
|
||
font-size: 18px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 26px;
|
||
}
|
||
.status{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
padding: 0 6px;
|
||
background: #EAEAEA;
|
||
border-radius: 2px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
.iconBox{
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid #F1F1F1;
|
||
border-radius: 50%;
|
||
.icon{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.scroll{
|
||
width:100vw;
|
||
height: calc(100% - 28px);
|
||
overflow-y: scroll;
|
||
box-sizing: border-box;
|
||
.info{
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
padding: 4px 16px 16px;
|
||
z-index:100;
|
||
.address{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
margin-top: 4px;
|
||
}
|
||
.typeList{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
margin-top: 16px;
|
||
.typeItem{
|
||
width: calc((100% - 24px)/3);
|
||
height: 66px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #F7F7F7;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
margin-right: 8px;
|
||
.img{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
.baseInfo,.areaInfo{
|
||
margin-top: 8px;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
.word{
|
||
display: flex;
|
||
margin-top: 8px;
|
||
.subTitle{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
margin-right: 8px;
|
||
min-width: 60px;
|
||
}
|
||
.text{
|
||
flex: 1;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
}
|
||
.subTitleArea{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
margin-right: 8px;
|
||
min-width: 80px;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
.value{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
|
||
}
|
||
.unqualifiedNeeds{
|
||
.subTitle{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
margin-right: 8px;
|
||
min-width: 60px;
|
||
}
|
||
.unqualNeedText{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.service{
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
padding: 12px 16px ;
|
||
.serviceItem{
|
||
margin-top: 4px;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
.box{
|
||
margin-top: 12px;
|
||
display: flex;
|
||
.left{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 60px;
|
||
margin-right: 36px;
|
||
.boxImg{
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
.textTitle{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 16px;
|
||
}
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
display: flex;
|
||
.item{
|
||
width: 50%;
|
||
.text{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
margin-bottom:4px;
|
||
}
|
||
.unText{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 18px;
|
||
text-decoration: line-through;
|
||
}
|
||
.unit{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
}
|
||
.model{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
padding:0 6px;
|
||
background: #EAEAEA;
|
||
border-radius: 2px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|