<template>
  <div class="main">
    <div class="top">
      <div class="header" :style="{height:menu.height + menu.top + 'px',top:0+'px'}">
        <image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
<!--        <img :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="detailIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverPartDetail.png">-->
        <div v-if="showSpring" class="picker" @click="handleGoMap">
          <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">{{springService.SERVERPART_NAME}}</view>
                <p class="area" v-if="springService.Serverpart_ID">{{springService.SPREGIONTYPE_NAME}}</p>
                <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
              </view>
            </view>
          </div>
        </div>

        <view v-else class="seachBox" :style="{height: menu.height + 'px'}" @click="handleGoMap">
          <image class="searchIcon" src="/static/images/seach/searchIcon.svg"/>
          <text class="searchText">请输入想看的服务区</text>
        </view>
      </div>

<!--      <scroll-view :style="{top:menu.bottom + 24 + 'px' }" scroll-x="true" class="headerNavList" :scrollIntoView="currentServerPart" :scroll-with-animation="true">-->
<!--        <div :class="currentServerPart==='ServerPart'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in ServerpartList" :key="index" :id="'ServerPart'+item.value" @click="handleChangeServerPart(item.value)">{{item.name.split('服务区')[0]}}</div>-->
<!--      </scroll-view>-->
    </div>
    <div class="contentPage">
      <div class="contentTop">
        <div class="content">
          <div class="left">
            <img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png"/>
            <!--          <text class="modalUnit">{{selectDateText || ''}}</text>-->
            <!--          <text class="modalUnit">{{`/统计到${allDateDay || ''}`}}</text>-->
          </div>
          <div class="right">
            <div class="typeChangeBox">
              <div :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</div>
              <div :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</div>
            </div>
          </div>
        </div>
      </div>
      <div class="contentBox">
        <div class="navBigList" v-if="pageType===1">
          <!--            <div class="allBox">-->
          <!--              <div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>-->
          <!--            </div>-->
          <scroll-view scroll-x="true" class="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">
            <div :class="currentScroll==='item'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="'item'+item.value" @click="handleChangeTime(item.value)">{{item.label}}</div>
          </scroll-view>
        </div>
        <view class="sortBox">
          <view class="sortItem" style="width: 80rpx;" @click="handleChangeSortName(1)">
            <text class="sortText">排序</text>
          </view>
          <view class="sortItem" :style="{width:'calc(100% - 410rpx)',display:'flex',alignItems:'center',justifyContent:'flex-end'}" @click="handleChangeSortName(1)">
<!--            <text class="sortText">{{ `24年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>-->
            <text class="sortText">{{ `24年` }}</text>
            <view class="sortIconBox" style="margin-right: 60rpx">
              <image class="upIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
              <image class="bottomIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
            </view>
          </view>

          <view class="sortItem" style="width: 110rpx;" @click="handleChangeSortName(2)">
<!--            <text class="sortText">{{ `23年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>-->
            <text class="sortText">{{ `23年` }}</text>
            <view class="sortIconBox">
              <image class="upIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
              <image class="bottomIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
            </view>
          </view>

          <view class="sortItem" style="width: 110rpx;" @click="handleChangeSortName(3)">
<!--            <text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增长` }}</text>-->
            <text class="sortText">{{ `增长` }}</text>
            <view class="sortIconBox">
              <image class="upIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
              <image class="bottomIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
            </view>
          </view>

          <view class="sortItem" style="width: 110rpx;" @click="handleChangeSortName(4)">
<!--            <text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增幅` }}</text>-->
            <text class="sortText">{{ `增幅` }}</text>
            <view class="sortIconBox">
              <image class="upIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
              <image class="bottomIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
            </view>
          </view>
        </view>

        <div class="scrollBox">
          <scroll-view :scroll-y="true"  class="typeFirst" v-if="dataList && dataList.length>0">
            <div class="listItem" v-for="(item,index) in dataList" :key="index">
              <div class="noItem" style="width: 80rpx;align-items: center">
                <img v-if="index<=2" class="noIcon" :src="index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/first.png':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/second.png':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/third.png':''"/>
                <text class="noOther" v-else>{{index + 1}}</text>
              </div>
              <div class="firstItem" :style="{width:'calc(100% - 440rpx)',textAlign:'left'}">
                <div class="itemIcon">
                  <img class="itemImg" v-if="item.Brand_ICO" :src="item.Brand_ICO "/>
                  <img class="itemImg" v-else src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png"/>
                </div>
                <div class="itemRight" :style="{width:'calc(100% - 128rpx)'}">
                  <span class="firstItemText">{{item.ServerpartShopName || '-'}}</span>
                  <span>{{item.RevenueINC.curYearData?item.RevenueINC.curYearData<100?`${item.RevenueINC.curYearData}(元)`:$util.getMoney(item.RevenueINC.curYearData / 10000):'' }}</span>
                </div>

              </div>
<!--              <div class="item" style="width: 110rpx"></div>-->
              <div class="item" style="width: 110rpx">{{item.RevenueINC.lYearData?item.RevenueINC.lYearData<100?`${item.RevenueINC.lYearData}(元)`:$util.getMoney(item.RevenueINC.lYearData / 10000):''  }}</div>
              <div class="item" style="width: 110rpx">{{item.RevenueINC.increaseData?item.RevenueINC.increaseData<100 && item.RevenueINC.increaseData>0?`${item.RevenueINC.increaseData}(元)`:$util.getMoney(item.RevenueINC.increaseData / 10000):''  }}</div>
              <div class="item"  style="width: 110rpx">
                 <span :style="{color: item.RevenueINC.increaseData>0?'#E83944':item.RevenueINC.increaseRate<0?'#0E9976':''}">
                      {{item.RevenueINC.increaseRate>0?'+':''}}
                    </span>
                <span :style="{color: item.RevenueINC.increaseRate>0?'#E83944':item.RevenueINC.increaseRate<0?'#0E9976':''}">
                      {{item.RevenueINC.increaseRate?item.RevenueINC.increaseRate+'%':''}}
                    </span>
              </div>

            </div>
          </scroll-view>

          <view class="noDataBox" v-else>
            <img class="noDataImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"/>
            <text class="noDataText">暂无数据</text>
          </view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/util/index.js'
export default {
  name: "merchantRevenue",
  data() {
    return {
      statusBarHeight:0,// 胶囊按钮高度
      menu:'', // 手机属性
      pageType:1, // 一天还是累计
      scrollList:[], // 横向滑动日期
      currentScroll:'', // 选中的日期
      lastDay:'', // 最近有效日期
      sortType: 1,// 正序降序 0正序  1降序
      sortName: 3,// 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
      dataList:[],
      type:0,// 判断是要查询哪个数据 1销售   2营收   3车流
      ServerpartId:'',// 服务区id
      useInfo:{},
      ServerpartList:[],
      currentServerPart:'',
      showSpring: false,
      springService:null,// 当前选中的服务区
    }
  },
  onLoad(query){
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()

    if (query.ServerpartId){
      this.ServerpartId = query.ServerpartId
      this.currentServerPart = `ServerPart` + query.ServerpartId
    }
    if (query.type){
      this.type = Number(query.type)
    }

    if (query.serverPartList){
      this.ServerpartList = JSON.parse(query.serverPartList)
    }
    // 获取用户信息
    let userInfo = uni.getStorageSync('vuex')
    userInfo = JSON.parse(userInfo)
    this.useInfo = JSON.parse(JSON.stringify(userInfo))

    this.lastDay = uni.getStorageSync('lastDay')
    if (query.time){
      this.currentScroll = 'item'+ query.time
    }else{
      this.currentScroll = 'item'+ this.lastDay
    }

    // 拿到是春运开始的第几天
    let dayNumber = 0
    const lastDate = new Date(this.lastDay)
    let y = lastDate.getFullYear()
    this.curYear = y
    this.compareYear = y - 1
    let lastMonth =  lastDate.getMonth() + 1
    let lastDays = lastDate.getDate()
    this.allDateDay = `${lastMonth<10?'0'+lastMonth:lastMonth}月${lastDays<10?'0'+lastDays:lastDays}日`
    // 24年春运开始时间为 1.26
    if (lastMonth === 1){
      dayNumber = lastDays - 26 + 1
    }else{
      dayNumber = 6 + lastDays
    }
    this.howDayNumber = dayNumber
    let dateList = []
    for (let i = 1;i<=dayNumber;i++){
      if (i<7){
        dateList.push({label:`第${i}天`,value:`2024-01-${26+i-1}`})
      }else{
        dateList.push({label:`第${i}天`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
      }
    }
    this.scrollList = dateList

    // this.handleGetPageData()
  },
  onShow(){
    let seat = uni.getStorageSync('springService')
    if (seat){
      this.springService = seat
      console.log('this.springService',this.springService)
      this.showSpring = true
      this.dataList = []
      this.handleGetPageData()
    }else{
      this.showSpring = false
    }
  },
  methods:{
    handleChangeType(value){
      this.pageType = value
      if (value===2){
        this.handleGetPageData('all')
      }else{
        this.handleGetPageData()
      }
    },
    handleGoMap(){
      this.$util.toNextRoute('navigateTo', '/pages/map/index?type=springTravel')
    },
    // 拿到页面表格数据
    async handleGetPageData(date){
      uni.showLoading({
        title: '正在加载...'
      })
      let time = date?
          date==='all'?this.lastDay:
              this.currentScroll.split('item')[1]:
          this.currentScroll.split('item')[1]
      const req = {
        calcType:this.pageType,
        pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
        curYear: this.curYear,
        compareYear: this.compareYear,
        HolidayType:2,
        StatisticsDate:time,
        ServerpartId: this.springService.Serverpart_ID || this.ServerpartId,
        SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`,
      }
      // this.dataList
      const data = await request.$webGet('CommercialApi/Revenue/GetShopINCAnalysis',req)
      if(data.Result_Code===100){
        this.dataList = this.handleGetSort(data.Result_Data.ShopINCList)
      }else{
        this.dataList = []
      }
      uni.hideLoading()
    },
    handleChangeTime(date){
      if (date==='all'){
        this.currentScroll = 'all'
        const time = new Date(this.lastDay)
        let m = time.getMonth()+1
        let d = time.getDate()
        this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
      }else{
        this.currentScroll = 'item'+ date
        const time = new Date(date)
        let m = time.getMonth()+1
        let d = time.getDate()
        this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
      }

      this.handleGetPageData(date)
    },
    // 修改排序字段
    handleChangeSortName(value){
      uni.showLoading({
        title: '正在加载...'
      })
      if (value===this.sortName){
        if (this.sortType===1){
          this.sortType=0
        }else{
          this.sortType=1
        }
      }else{
        this.sortName = value
        this.sortType=1
      }
      let list = this.handleGetSort(this.dataList)
      this.dataList = list
      this.$forceUpdate()
      uni.hideLoading()
    },
    // 排序方法
    handleGetSort(list){
      var len = list.length;

      for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
          // 判断按照那个排序
          if (this.type===1){
            // 正序
            if (this.sortType===0){
              // 24年营收
              if (this.sortName===1){
                if (list[j].RevenueINC.curYearData > list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].RevenueINC.lYearData > list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].RevenueINC.increaseData > list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].RevenueINC.increaseRate  > list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
            else{
              // 降序
              // 24年营收
              if (this.sortName===1){
                if (list[j].RevenueINC.curYearData < list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].RevenueINC.lYearData < list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].RevenueINC.increaseData < list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].RevenueINC.increaseRate  < list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
          else if(this.type===2){
            // 正序
            if (this.sortType===0){
              // 24年营收
              if (this.sortName===1){
                if (list[j].AccountINC.curYearData > list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].AccountINC.lYearData  > list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if ((list[j].AccountINC.increaseData || 0)  > (list[j + 1].AccountINC.increaseData || 0) ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if ((list[j].AccountINC.increaseRate || 0)  > (list[j + 1].AccountINC.increaseRate || 0)  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
            // 降序
            else{
              // 24年营收
              if (this.sortName===1){
                if (list[j].AccountINC.curYearData < list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].AccountINC.lYearData  < list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].AccountINC && list[j + 1].AccountINC){
                  if ((list[j].AccountINC.increaseData || 0) < (list[j + 1].AccountINC.increaseData || 0)) { // 比较相邻元素大小并交换位置
                    var temp = list[j];
                    list[j] = list[j + 1];
                    list[j + 1] = temp;
                  }
                }

                // 营收增幅
              }else if(this.sortName===4){
                if ((list[j].AccountINC.increaseRate|| 0)   < (list[j + 1].AccountINC.increaseRate|| 0)  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
          else if(this.type===3){
            // 正序
            if (this.sortType===0){
              // 24年车流
              if (this.sortName===1){
                if (list[j].BayonetINC.curYearData > list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].BayonetINC.lYearData  > list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].BayonetINC.increaseData   > list[j + 1].BayonetINC.increaseData  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].BayonetINC.increaseRate > list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }else{
              // 降序
              // 24年车流
              if (this.sortName===1){
                if (list[j].BayonetINC.curYearData < list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].BayonetINC.lYearData  < list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].BayonetINC.increaseData  < list[j + 1].BayonetINC.increaseData  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].BayonetINC.increaseRate < list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
        }
      }
      return list;
    },
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
  //   选择服务区
    handleChangeServerPart(value){
      this.ServerpartId = value
      this.currentServerPart = `ServerPart` + value
      this.handleGetPageData(null)
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  background: #fff;
  .top{
    width: 100%;
    height: 324rpx;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    position: relative;
    .header{
      position: fixed;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 324rpx;
      display: flex;
      align-items: center;
      z-index: 3;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
        position: absolute;
      }
      .detailIcon{
        width: 230rpx;
        height: 48rpx;
        margin-left: 16rpx;
        position: absolute;
        left: 40px;
      }
      .seachBox{
        position: absolute;
        bottom: 0;
        left: 60px;
        width: 400rpx;
        background: #fff;
        border-radius: 32rpx;
        margin-left: 16rpx;
        box-sizing: border-box;
        padding: 10rpx 20rpx;
        display: flex;
        align-items: center;
        .searchIcon{
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
        .searchText{
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #B6BACB;
          line-height: 40rpx;
          white-space: nowrap;
        }
      }
      .picker{
        position: absolute;
        bottom: 0;
        left: 40px;
        .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(-20px);
            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;
              }
            }

          }
        }
      }
    }
    .headerNavList{
      position: absolute;
      width: 100%;
      height: 60rpx;
      display: flex;
      align-items: center;
      white-space: nowrap;
      box-sizing: border-box;
      padding-left: 32rpx;
      .scrollItem{
        display: inline-block;
        height: 40rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #E8A29A;
        line-height: 40rpx;
        margin-right: 40rpx;
      }
      .selectItem{
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 40rpx;
        position: relative;
      }
      .selectItem:after{
        content:'';
        display: inline-block;
        width: 56rpx;
        height: 6rpx;
        background-color: #fff;
        position: absolute;
        bottom:  -8rpx;
        left: 0px;
      }
    }
  }
  .contentPage{
    width: 100%;
    transform: translateY(-32rpx);
    background: #fff;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    .contentTop{
      width: 100%;
      height: 120rpx;
      background: linear-gradient(360deg, rgba(255,200,198,0) 0%, #FFC8C6 100%);
      border-radius: 32rpx 32rpx 0rpx 0rpx;
      box-sizing: border-box;
      padding: 24rpx 24rpx 0;
      .content{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
          .detailLogo{
            width: 178rpx;
            height: 32rpx;
          }
          .modalUnit{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #9A9A9A;
            line-height: 36rpx;
          }
        }
        .right{
          .typeChangeBox{
            display: flex;
            align-items: center;
            background: #FFFFFF;
            border-radius: 6rpx;
            box-sizing: border-box;
            padding: 4rpx;
            .normal{
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 36rpx;
              padding: 6rpx 16rpx;
            }
            .select{
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #160002;
              line-height: 36rpx;
              background: #F5EFEF;
              border-radius: 6rpx;
            }
          }
        }
      }
    }
    .contentBox{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      .navBigList{
        width: 100%;
        height: 40rpx;
        display: flex;
        align-items: center;
        padding-bottom: 24rpx;
        border-bottom: 1px solid #F5F4F4;
        .allBox{
          width: 70rpx;
          height: 100%;
          .scrollItem{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 40rpx;
          }
          .selectItem{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #ED3E48;
            line-height: 40rpx;
          }

        }
        .navList{
          width: 100%;
          height: 40rpx;
          display: flex;
          align-items: center;
          white-space: nowrap;
          .scrollItem{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 40rpx;
            margin-right: 32rpx;
            display: inline-block;
          }
          .selectItem{
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #ED3E48;
            line-height: 40rpx;
          }
        }
      }

      .sortBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;
        margin-top: 24rpx;
        .sortItem{
          display: flex;
          align-items: center;
          .sortText{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #9A9A9A;
            line-height: 36rpx;
            white-space: nowrap;
          }
          .sortIconBox{
            display: flex;
            flex-direction: column;
            margin-left: 16rpx;
            .upIcon{
              width: 16rpx;
              height: 12rpx;
              margin-bottom: 4rpx;
            }
            .bottomIcon{
              width: 16rpx;
              height: 12rpx;
            }
          }
        }
      }
      .scrollBox{
        .typeFirst{
          height: calc(100vh - 300px);
          .listItem{
            width: 100%;
            display: flex;
            //align-items: center;
            align-items: flex-end;
            padding: 16rpx 0;
            .noItem{
              display: flex;
              height: 120rpx;
              align-items: center;
              .noIcon{
                width: 40rpx;
                height: 40rpx;
              }
              .noOther{
                width: 40rpx;
                height: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(141deg, #BABCC3 0%, #CBCCD1 45%, #B5B6BA 100%);
                border-radius: 50%;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 24rpx;
              }
            }
            .item{
              text-align: center;
              font-size: 28rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #9A9A9A;
              line-height: 40rpx;

            }
            .firstItem{
              display: flex;
              .itemIcon{
                width: 120rpx;
                height: 120rpx;
                border-radius: 16rpx;
                overflow: hidden;
                margin-right: 8rpx;
                .itemImg{
                  width: 100%;
                  height: 100%;
                }
              }
              .itemRight{
                height: 120rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #9A9A9A;
                .firstItemText{
                  width: 100%;
                  text-align: left;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #9A9A9A;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }

            }
          }
        }
        .noDataBox{
          width: 100%;
          height: calc(100vh - 300px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .noDataImg{
            width: 120rpx;
            height: 120rpx;
          }
          .noDataText{

          }
        }
      }
    }
  }
}
</style>
