<template>
  <div class="main">
<!--    <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
<!--      <commercial-type :have="7"/>-->
<!--    </div>-->
      <div class="leftArrow" v-if="false" :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>
                <text class="noticeText" v-if="info.SERVERPART_NAME==='安徽驿达'">选择您要看的服务区</text>
                <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
              </view>
            </view>
          </div>
        </div>
      </div>

      <div class="topImg" :style="{height: (menu.bottom + 62) + 'px'}">
<!--          <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})`}">-->
<!--&lt;!&ndash;                  <image class="img" :src="item"></image>&ndash;&gt;-->
<!--                <view class="sliderPage" :style="{top: (menu.bottom + 18) + 'px'}">-->
<!--                  <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">
                <div class="leftImgBox">
                  <image class="img" :src="topBg[0]" @click="handlePreview"/>
                </div>
                <div class="serviceInfo">
                  <view class="serviceInfoTop">
                    <p class="title">{{info.SERVERPART_NAME?info.SERVERPART_NAME:'-'}}</p>
                    <div class="iconBox" @click="handleGoMap">
                      <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
                    </div>
                  </view>
                  <p class="address">{{info.ServerpartInfo.EXPRESSWAY_NAME?info.ServerpartInfo.EXPRESSWAY_NAME:'-'}}</p>
                  <view class="status">营业中</view>
                </div>
              </div>
          </div>
        <scroll-view scroll-y="true" class="scroll" :style="{height:`calc(100vh - ${menu.bottom + 176}px)`}">
          <div class="info">
              <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>
        </scroll-view>

      </div>

  </div>
</template>

<script>
import request from '@/util/index.js'
import commercialType from "./components/commercialType.vue";
import SliderPage from "./components/sliderPage.vue";
export default {
    name: "mapDetail",
    components: {SliderPage, commercialType},
    data(){
        return {
            info:{},
            isShowPicker:false,//判断是否有选择器
            menu:{},//手机参数
            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,// 去除添加的上一个 后一个 的真实图片长度
        }
    },
    props:{
      selectIndex:{
        type:Number,
        default:0
      }
    },
  watch:{
    selectIndex:{
      handler(value){
        console.log('mapValue',value)
        if (value===0){
          this.handleGetPageData()
        }
      },
      immediate:true,
    }
  },
    created(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
      //   // }
      // console.log('created',this.query)
    },
    mounted(){
      // console.log('mounted')
      // let seat = uni.getStorageSync('currentService')
      // console.log('seat',seat)
      // this.handleSearch(seat)
      // this.topBg = []
      // this.currentImg = 1
    },
    // onShow(){
    //   console.log('onShow')
    //     let seat = uni.getStorageSync('currentService')
    //     this.handleSearch(seat)
    //   this.topBg = []
    //   this.currentImg = 1
    // },
    // onUnload() {
    //
    //     this.$util.addUserBehavior()
    // },
    methods:{
        handleGetPageData(){
          let systemInfo = uni.getSystemInfoSync()
          this.statusBarHeight = Number(systemInfo.statusBarHeight)
          this.menu = uni.getMenuButtonBoundingClientRect()
          this.screenWidth = systemInfo.screenWidth
          let seat = uni.getStorageSync('currentService')
          console.log('seat',seat)
          this.handleSearch(seat)
          this.topBg = []
          this.currentImg = 1
        },
        // 滚动轮播图
        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
            console.log('this.topBg',this.topBg)
          }
          // 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: 8px;
        }
      .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: 35px;
            padding-right: 8rpx;
            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: 12px;
                height: 12px;
              }
              .noticeText{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #B6BACB;
                line-height: 40rpx;
                white-space: nowrap;
              }
            }

          }
        }
      }
    }
  .topImg{
    width: 100%;
    position: relative;
    background: #EEEFF1;
    .sliderPage{
      width: 100%;
      z-index: 9;
      position: absolute;
      left: 0;
      background: transparent;
    }
    .topDefaultBg{
      width: 100%;
      height: 100%;
    }
    .carousel{
        width: 100%;
        height: 100%;
        overflow: hidden;
        float: left;
        .imgIndex{
            width: 100%;
            height: 100%;
          background-size: 100% 100%;

            //.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;
        background: #EEEFF1;
        .top{
            width:100% ;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 16px 16px;
            background: #fff;
            border-radius: 16px 16px 1px 1px;
            .left{
                width: 100%;
                display: flex;
                align-items: center;
              .leftImgBox{
                width: 160rpx;
                height: 160rpx;
                border-radius: 16rpx;
                overflow: hidden;
                .img{
                  width: 100%;
                  height: 100%;
                }
              }
              .serviceInfo{
                margin-left: 16rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: calc(100% - 176rpx);
                .serviceInfoTop{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .title{
                    font-size: 18px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                  }
                  .iconBox{
                    width: 28px;
                    height: 28px;
                    border: 1px solid #F1F1F1;
                    border-radius: 50%;
                    .icon{
                      width: 100%;
                      height: 100%;
                    }
                  }
                }

                .address{
                  width: 100%;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  margin-top: 4px;
                }
                .status{
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  padding: 0 6px;
                  background: #EAEAEA;
                  border-radius: 2px;
                  display: inline-block;
                  width: 80rpx;
                  text-align: center;
                }
              }
            }
        }
        .scroll{
          width: 100%;
          box-sizing: border-box;
          height: calc();
          background: #F2F4F5;
            .info{
              width: 100%;
              padding: 0 32rpx 32rpx;
              box-sizing: border-box;
              background: #FFFFFF;
              z-index:100;
              .typeList{
                width: 100%;
                display: flex;
                flex-flow: wrap;
                .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{
              box-sizing: border-box;
              background: #fff;
              padding: 32rpx 32rpx;
              margin-top: 24rpx;
              .serviceItem{
                .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>
