<template>
  <view class="main">
    <view class="meng" v-if="showMeng" @click="handleAllNotice"></view>
    <view class="header">
      <view class="headerTop" :style="{height:(menu.top+menu.height) + 'px'}">
        <image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
        <text class="pageTitle">支出详情</text>
      </view>

      <view class="detailType" :style="{top:(menu.bottom + 18) + 'px'}">
        <picker :range="typeList" :value="typeValue" range-key="label" @change="handleChangeType">
          <span class="typeText">{{ typeList[typeValue].label }}</span>
          <image class="downIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg"/>
        </picker>
        <view class="timeBox" >
          <picker mode="date" fields="month" :value="single" :start="startDate" :end="endData" @change="bindDateChange" >
            <text class="timeText">{{single}}</text>
            <image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg"/>
          </picker>
        </view>
      </view>

      <view class="incomeTab" :style="{top:(menu.bottom + 60) + 'px'}">
        <view :class="selectTab===item.value?'selectItem incomeItem':'incomeItem'" v-for="(item,index) in pageTab" :key="index"
              @click="handleChangePageTab(item.value)">{{item.label}}</view>
      </view>
    </view>

    <view class="contentDetail">
      <view class="detailItem" v-for="(item,index) in pageList" :key="index">
        <view class="itemTop">
          <view class="itemTitle">{{item.itemTitle}}</view>
          <image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/expenditure.png"/>
          <view class="itemBox">
            <view class="progressBox">
              <view class="progressTop">
                <span class="progressLabel">本月占比:</span>
                <span class="progressValue">{{`${item.monthRate||'-'}%`}}</span>
              </view>
              <view class="progress">
                <view class="have" :style="{width:item.monthRate>100?'100%':`${item.monthRate}%`}"></view>
              </view>
            </view>

            <view class="progressBox" style="margin-top: 12px">
              <view class="progressTop">
                <span class="progressLabel">累计完成进度占比:</span>
                <span class="progressValue">{{`${item.accumulateRate||'-'}%`}}</span>
              </view>
              <view class="progress">
                <view class="have" :style="{width:item.accumulateRate>100?'100%':`${item.accumulateRate}%`}"></view>
              </view>
            </view>
          </view>

          <view class="listBox" v-if="item.list && item.list.length>0">
            <view class="listBoxItem" v-for="(subItem,subIndex) in item.list[typeValue]" :key="subIndex">
              <view class="subItemTop">
                <view class="index" :style="{background:`url(${subIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg':subIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})`}">{{subIndex + 1}}</view>
                <span class="subItemName">{{subItem.name}}</span>
                <view class="notice" @click="handleShowNotice(index,subIndex,-1,-1)">?</view>
                <view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && !(thirdIndexs>=0) && !(fourthIndexs>=0)" @click="handleCancelNotice">
                  <view>
                    <view class="noticeItem">
                      <span class="noticeLabel">本月预算:</span>
                      <span class="noticeValue">{{subItem.budgetMonth||'-'}}万元</span>
                    </view>
                    <view class="noticeItem">
                      <span class="noticeLabel">本月执行:</span>
                      <span class="noticeValue">{{subItem.monthExecute||'-'}}万元</span>
                    </view>
                    <view class="noticeItem">
                      <span class="noticeLabel">年度预算:</span>
                      <span class="noticeValue">{{subItem.budgetYear||'-'}}万元</span>
                    </view>
                    <view class="noticeItem">
                      <span class="noticeLabel">累计执行:</span>
                      <span class="noticeValue">{{subItem.accumulateExecute||'-'}}万元</span>
                    </view>
                  </view>
                </view>
              </view>
              <view class="subItemBottom" v-if="subItem.monthRate || subItem.accumulateRate">

                <view class="bottomItem">
                  <span v-if="subItem.monthRate" class="bottomLabel">本月占比:</span>
                  <span v-if="subItem.monthRate" class="bottomValue">{{`${subItem.monthRate||'-'}%`}}</span>
                </view>

                <view class="bottomItem" style="text-align: right">
                  <span v-if="subItem.accumulateRate" class="bottomLabel">累计占比:</span>
                  <span v-if="subItem.accumulateRate" class="bottomValue">{{`${subItem.accumulateRate||'-'}%`}}</span>
                </view>
              </view>

              <view class="thirdItemBox" v-if="subItem.list && subItem.list.length>0">
                <view class="thirdItem" v-for="(thirdItem,thirdIndex) in subItem.list[typeValue]" :key="thirdIndex">
                  <view class="thirdItemTop">
                    <view class="index" :style="{backgroundImage:`url(${thirdIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdFirst.svg':thirdIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdSecond.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdOther.svg'})`}">{{thirdIndex + 1}}</view>
                    <span class="subItemName">{{thirdItem.name}}</span>
                    <view class="notice" @click="handleShowNotice(index,subIndex,thirdIndex,-1)">?</view>
                    <view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && thirdIndexs===thirdIndex&& thirdIndexs===thirdIndex && !(fourthIndexs>=0)" @click="handleCancelNotice">
                      <view>
                        <view class="noticeItem">
                          <span class="noticeLabel">本月预算:</span>
                          <span class="noticeValue">{{thirdItem.budgetMonth||'-'}}万元</span>
                        </view>
                        <view class="noticeItem">
                          <span class="noticeLabel">本月执行:</span>
                          <span class="noticeValue">{{thirdItem.monthExecute||'-'}}万元</span>
                        </view>
                        <view class="noticeItem">
                          <span class="noticeLabel">年度预算:</span>
                          <span class="noticeValue">{{thirdItem.budgetYear||'-'}}万元</span>
                        </view>
                        <view class="noticeItem">
                          <span class="noticeLabel">累计执行:</span>
                          <span class="noticeValue">{{thirdItem.accumulateExecute||'-'}}万元</span>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="thirdItemBottom" v-if="thirdItem.monthRate || thirdItem.accumulateRate">
                    <view class="bottomItem">
                      <span v-if="thirdItem.monthRate" class="bottomLabel">本月占比:</span>
                      <span v-if="thirdItem.monthRate" class="bottomValue">{{`${thirdItem.monthRate||'-'}%`}}</span>
                    </view>
                    <view class="bottomItem" style="text-align: right">
                      <span v-if="thirdItem.accumulateRate" class="bottomLabel">累计占比:</span>
                      <span v-if="thirdItem.accumulateRate" class="bottomValue">{{`${thirdItem.accumulateRate||'-'}%`}}</span>
                    </view>
                  </view>
                  <view class="fourthItemBox" v-if="thirdItem.list && thirdItem.list.length>0">
                    <view class="fourthItem" v-for="(fourthItem,fourthIndex) in thirdItem.list[typeValue]" :key="fourthIndex">
                      <view class="fourthItemTop">
                        <view class="index" :style="{backgroundImage:`url(${fourthIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthFirst.svg':fourthIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthSecond.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthther.svg'})`}">{{fourthIndex + 1}}</view>
                        <span class="subItemName">{{fourthItem.name}}</span>
                        <view class="notice" @click="handleShowNotice(index,subIndex,thirdIndex,fourthIndex)">?</view>
                        <view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && thirdIndexs===thirdIndex && fourthIndexs===fourthIndex" @click="handleCancelNotice">
                          <view>
                            <view class="noticeItem">
                              <span class="noticeLabel">本月预算:</span>
                              <span class="noticeValue">{{fourthItem.budgetMonth||'-'}}万元</span>
                            </view>
                            <view class="noticeItem">
                              <span class="noticeLabel">本月执行:</span>
                              <span class="noticeValue">{{fourthItem.monthExecute||'-'}}万元</span>
                            </view>
                            <view class="noticeItem">
                              <span class="noticeLabel">年度预算:</span>
                              <span class="noticeValue">{{fourthItem.budgetYear||'-'}}万元</span>
                            </view>
                            <view class="noticeItem">
                              <span class="noticeLabel">累计执行:</span>
                              <span class="noticeValue">{{fourthItem.accumulateExecute||'-'}}万元</span>
                            </view>
                          </view>
                        </view>
                      </view>
                      <view class="fourthItemBottom" v-if="fourthItem.monthRate || fourthItem.accumulateRate">
                        <view class="bottomItem">
                          <span v-if="fourthItem.monthRate" class="bottomLabel">本月占比:</span>
                          <span v-if="fourthItem.monthRate" class="bottomValue">{{`${fourthItem.monthRate||'-'}%`}}</span>
                        </view>
                        <view class="bottomItem" style="text-align: right">
                          <span v-if="fourthItem.accumulateRate" class="bottomLabel">累计占比:</span>
                          <span v-if="fourthItem.accumulateRate" class="bottomValue">{{`${fourthItem.accumulateRate||'-'}%`}}</span>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>
<script>
import OtherCharts from "./component/otherCharts.vue";
import outData from './expenditureData'
import request from '@/util/index.js'
export default {
  components:{OtherCharts},
  data(){
    return {
      windowHeight: null,
      statusBarHeight: null,
      menu:{},
      number:0,
      pageTab:[{label:'运营成本',value:1},{label:'管理费用',value:2},{label:'销售费用',value:3},{label:'财务费用',value:4}],
      selectTab:1,
      typeList:[{label:'按告警情况排序',value:0},
        {label:'按累计完成进度占比数排序',value:1},
        {label:'按本月完成进度占比数排序',value:2},
        {label:'按年度计划预算数值排序',value:3}],
      typeValue: 3,
      pageData: {},// 页面数据
      pageList: [],// 页面遍历的数据
      single:'', // 时间选择器选择的时间
      month:'',// 当前月份
      startDate:'',// 开始时间
      endData:'', // 结束时间
      firstIndex:null,
      secondIndex:null,
      thirdIndexs:null,
      fourthIndexs:null,
      showMeng:false
    }
  },
  onLoad(query){
    this.selectTab = Number(query.type)

    const date = new Date()
    let y = date.getFullYear()
    let m = date.getMonth()+1
    this.thisYear = y
    this.startDate = `${y}-07`
    this.endData = `${y}-11`
    this.single =  `${y}-${ Number(query.month)}`

    if (query.month){
      this.month = Number(query.month)
      this.handleGetPageData()
    }

    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.windowHeight = systemInfo.windowHeight
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('this.menu',this.menu)
    let _this = this
    setTimeout(()=>{
      _this.number = 40
    },100)
  },
  methods:{
// 返回按钮的方法
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    handleChangePageTab(value){
      console.log('value',value)
      this.selectTab = value
      this.pageList = this.selectTab===1?this.pageData.costList:this.selectTab===2?this.pageData.managerList:this.selectTab===3?this.pageData.sellingList:this.selectTab===4?this.pageData.financialList:''
    },
    // 改变类型的方法
    handleChangeType(e){
      console.log('e',e)
      this.typeValue = Number(e.detail.value)
    },
    // 修改时间的事件
    bindDateChange(e){
      console.log('e',e)
      this.single = e.detail.value
      const date = new Date(this.single)
      const y = date.getMonth() + 1
      this.month = y
      this.handleGetPageData()
      // outData.forEach(item=>{
      //   if (item.month === y){
      //     this.pageData = item
      //     this.pageList = this.selectTab===1?item.costList:this.selectTab===2?item.managerList:this.selectTab===3?item.sellingList:this.selectTab===4?item.financialList:''
      //   }
      // })
    },
    handleShowNotice(index,subIndex,thirdIndex,fourthIndex){
      this.firstIndex = index
      this.secondIndex = subIndex
      this.thirdIndexs = thirdIndex
      this.fourthIndexs = fourthIndex
      this.showMeng = true
    },
    handleCancelNotice(){
      this.showMeng = false
      this.firstIndex = '-'
      this.secondIndex = '-'
      this.thirdIndexs = '-'
      this.fourthIndexs = '-'
    },
    handleAllNotice(){
      this.showMeng = false
      this.firstIndex = null
      this.secondIndex = null
      this.thirdIndexs = null
      this.fourthIndexs = null
    },
    // 拿到页面数据的方法
    async handleGetPageData(){
      uni.showLoading({
        title:'正在加载'
      })
      const req = {
        Month:this.month
      }
      const data = await request.$webGet('EShangApiMain/Budget/GetbudgetProjectReportOut',req)
      console.log('data',data)
      this.pageData = data.Result_Data
      this.pageList = this.selectTab===1?data.Result_Data.costList:this.selectTab===2?data.Result_Data.managerList:this.selectTab===3?data.Result_Data.sellingList:this.selectTab===4?data.Result_Data.financialList:''
      uni.hideLoading()
    }
  }
}
</script>

<style scoped lang="scss">
//@import '/static/public/font/stylesheet.css';
.main{
  width: 100%;
  min-height: 100vh;
  .meng{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;left: 0;
    z-index: 20;
  }
  .header{
    width: 100%;
    height: 395rpx;
    background: linear-gradient(180deg, #D4E5FD 0%, #F5F5F5 100%);
    .headerTop{
      width: 100%;
      position: fixed;
      display: flex;
      align-items: flex-end;
      z-index: 99;
      background: linear-gradient(180deg, #D4E5FD 0%, #DEE9F9 100%);
      .backIcon{
        width: 48rpx;
        height: 48rpx;
        margin-left: 32rpx;
      }
      .pageTitle{
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #202020;
        line-height: 56rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .detailType{
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 32rpx;
      .typeText{
        font-size: 32rpx;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        color: #7CADF8;
        line-height: 68rpx;
      }
      .downIcon{
        width: 12px;
        height: 12px;
        margin-left: 8px;
      }
      .timeBox{
        display: flex;
        align-items: center;
        .timeText{
          font-size: 32rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #7CADF8;
          line-height: 68rpx;
        }
        .timeIcon{
          margin-left: 6px;
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .incomeTab{
      width: 100%;
      position: absolute;
      left: 0;
      box-sizing: border-box;
      padding-left: 24rpx;
      .incomeItem{
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 40rpx;
        padding: 20rpx 22rpx;
        background: #FFFFFF;
        border: 1rpx solid #B6D4FB;
        display: inline-block;
        border-radius: 8rpx;
        margin-right: 16rpx;
      }
      .selectItem{
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #096EF7;
        line-height: 40rpx;
        background: linear-gradient(360deg, #E9F2FF 0%, #FEFFFE 100%);
        box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(4,36,79,0.08);
        border: 1rpx solid #B6D4FB;
        position: relative;
      }
      .selectItem:after{
        content:'';
        width: 32rpx;
        height: 32rpx;
        background: #EDF4FF;
        position: absolute;
        bottom: -18rpx;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        border-right: 1rpx solid #B6D4FB;
        border-bottom: 1rpx solid #B6D4FB;
      }
    }
  }
  .contentDetail{
    width: calc(100% - 64rpx);
    margin-left: 32rpx;
    .detailItem{
      width: 100%;
      background: #FEFFFF;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 4rpx;
      margin-bottom: 24rpx;
      .itemTop{
        width: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(180deg, #F1F7FF 0%,  #FDFEFF 100%);
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        position: relative;
        .monthSumBg{
          position: absolute;
          width: 320rpx;
          height: 320rpx;
          right: 0;top: 0;
          z-index: 1;
        }
        .itemTitle{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #096EF7;
          line-height: 44rpx;
        }
        .itemBox{
          position: relative;
          z-index:2;
          width: 100%;
          background: #fff;
          border-radius: 12rpx;
          box-sizing: border-box;
          padding: 16rpx 32rpx;
          margin-top: 22rpx;
          .progressBox{
            width: 100%;
            .progressTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .progressLabel{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40rpx;
              }
              .progressValue{
                font-size: 36rpx;
                font-family: Alimama ShuHeiTi;
                font-weight: bold;
                color: #1679FF;
                line-height: 44rpx;
              }
            }
            .progress{
              margin-top: 8px;
              width: 100%;
              height: 12px;
              border-radius: 6px;
              background: #E7F1FF;
              position: relative;
              overflow: hidden;
              .have{
                position: absolute;
                top: 0;left: 0;
                border-radius: 6px;
                background: #1679FF;
                height: 100%;
              }
            }
          }
        }
        .listBox{
          width: 100%;
          margin-top: 12px;
          .listBoxItem{
            position: relative;
            margin-bottom: 12rpx;
            .subItemTop{
              display: flex;
              align-items: center;
              .index{
                display: inline-block;
                width: 36rpx;
                height: 32rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FEFFFF;
                line-height: 32rpx;
                text-align: center;
                box-sizing: border-box;
                padding-right: 4rpx;
              }
              .subItemName{
                font-size: 28rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
                margin-left: 8px;
              }
              .notice{
                margin-left: 8rpx;
                width: 12px;
                height: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 2px solid #A69E9F;
                border-radius: 50%;
                color: #A69E9F;
                font-size: 12px;
                font-weight: 500;
                position: relative;
                z-index: 21;
              }
              .noticeBox{
                position: absolute;
                top: 10px;
                z-index: 99;
                background: #fff;
                border-radius: 12rpx;
                box-sizing: border-box;
                padding: 12rpx 0;
                display: block;
                width: 300px;
                box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
                .noticeTitle{
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 40rpx;
                  margin-left: 8px;
                }
                .noticeItem{
                  display: inline-block;
                  width: 140px;
                  color: #A69E9F;
                  font-size: 12px;
                  font-weight: 500;
                  box-sizing: border-box;
                  padding-left: 24rpx;
                }
              }
            }
            .subItemBottom{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .bottomItem{
                width: 50%;
                .bottomLabel{
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 32rpx;
                }
                .bottomValue{
                  font-size: 30rpx;
                  font-family: Alimama ShuHeiTi;
                  font-weight: bold;
                  color: #1679FF;
                  line-height: 32rpx;
                  margin-left: 4rpx;
                }
              }
            }
            .thirdItemBox{
              width: 100%;
              box-sizing: border-box;
              padding-left: 24rpx;
              .thirdItemTop{
                position: relative;
                display: flex;
                align-items: center;
                .index{
                  display: inline-block;
                  width: 40rpx;
                  height: 40rpx;
                  font-size: 24rpx;
                  line-height: 40rpx;
                  text-align: center;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FEFFFF;
                  box-sizing: border-box;
                  background-size: 100% 100%;
                }
                .subItemName{
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 40rpx;
                  margin-left: 8px;
                }
                .notice{
                  margin-left: 8rpx;
                  width: 12px;
                  height: 12px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border: 2px solid #A69E9F;
                  border-radius: 50%;
                  color: #A69E9F;
                  font-size: 12px;
                  font-weight: 500;
                  position: relative;
                  z-index: 21;
                }
                .noticeBox{
                  position: absolute;
                  top: 10px;
                  z-index: 99;
                  background: #fff;
                  border-radius: 12rpx;
                  box-sizing: border-box;
                  padding: 12rpx 0;
                  display: block;
                  width: 300px;
                  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
                  .noticeTitle{
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    margin-left: 8px;
                  }
                  .noticeItem{
                    display: inline-block;
                    width: 140px;
                    color: #A69E9F;
                    font-size: 12px;
                    font-weight: 500;
                    box-sizing: border-box;
                    padding-left: 24rpx;
                  }
                }
              }
              .thirdItemBottom{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .bottomItem{
                  width: 50%;
                  .bottomLabel{
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 32rpx;
                  }
                  .bottomValue{
                    font-size: 30rpx;
                    font-family: Alimama ShuHeiTi;
                    font-weight: bold;
                    color: #1679FF;
                    line-height: 32rpx;
                    margin-left: 4rpx;
                  }
                }
              }
              .fourthItemBox{
                width: 100%;
                box-sizing: border-box;
                padding-left: 24rpx;
                .fourthItemTop{
                  position: relative;
                  display: flex;
                  align-items: center;
                  .index{
                    display: inline-block;
                    width: 40rpx;
                    height: 40rpx;
                    font-size: 24rpx;
                    line-height: 40rpx;
                    text-align: center;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FEFFFF;
                    box-sizing: border-box;
                    background-size: 100% 100%;
                  }
                  .subItemName{
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    margin-left: 8px;
                  }
                  .notice{
                    margin-left: 8rpx;
                    width: 12px;
                    height: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 2px solid #A69E9F;
                    border-radius: 50%;
                    color: #A69E9F;
                    font-size: 12px;
                    font-weight: 500;
                    position: relative;
                    z-index: 21;
                  }
                  .noticeBox{
                    position: absolute;
                    top: 10px;
                    z-index: 99;
                    background: #fff;
                    border-radius: 12rpx;
                    box-sizing: border-box;
                    padding: 12rpx 0;
                    display: block;
                    width: 300px;
                    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
                    .noticeTitle{
                      font-size: 28rpx;
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 600;
                      color: #160002;
                      line-height: 40rpx;
                      margin-left: 8px;
                    }
                    .noticeItem{
                      display: inline-block;
                      width: 140px;
                      color: #A69E9F;
                      font-size: 12px;
                      font-weight: 500;
                      box-sizing: border-box;
                      padding-left: 24rpx;
                    }
                  }
                }
                .fourthItemBottom{
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .bottomItem{
                    width: 50%;
                    .bottomLabel{
                      font-size: 28rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 32rpx;
                    }
                    .bottomValue{
                      font-size: 30rpx;
                      font-family: Alimama ShuHeiTi;
                      font-weight: bold;
                      color: #1679FF;
                      line-height: 32rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
