<template>
  <div class="main">
    <div class="top" :style="{height:menu.height + menu.top+212+'rpx'}">
      <!--      <image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png"/>-->
      <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"/>
      </div>
      <div class="topContent" :style="{top:200+'rpx'}">
        <picker mode="selector" :range="festival" range-key="label" :value="selectIndex-1" @change="handleChangeType" >
          <div style="display: flex;align-items: center">
            <p class="pageTitle" style="margin-right: 8px">{{`欢度${festival[selectIndex - 1].label}`}}</p>
            <img style="width: 20px;height: 20px" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDownArrow.svg"/>
          </div>
        </picker>
      </div>
    </div>
    <div class="pageContent" :style="{backgroundPositionY:-(menu.height + menu.top+200)+'rpx'}">
      <div class="selectTab2">
        <div class="detail">
          <div class="detailTop">
            <p class="tabTitle">营收同比</p>
            <span class="timeText">{{showTimeText}}</span>
          </div>
          <div class="money">
            <div class="moneyTop">
              <p class="moneyTitle">2023年对客营收金额：</p>
              <!--              -->
              <p class="sumMoney">{{ $util.fmoney(currentRevenue,2) }}元</p>
            </div>
            <div class="moneyTop">
              <p  class="moneyTitle">2022年对客营收金额：</p>
              <p class="sumMoney">{{ $util.fmoney(compareRevenue,2) }}元</p>
            </div>
            <div class="moneyTop">
              <p class="moneyTitle">同期对比：</p>
              <p class="sumMoney">{{add}}%</p>
            </div>
            <div class="desc">
              <div class="descLeft">
                <p style="line-height: 36rpx">注:</p>
              </div>
              <div class="descRight">
                <p>{{`2022年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.30-5.4':'1.31-2.09'},共${selectIndex===1?'7':selectIndex===2?'5':'10'}日`}}</p>

                <p>{{`2023年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.29-5.5':'1.20-1.29'},共${selectIndex===3?10:7}日`}}</p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
        <div class="detail">
          <p class="tabTitle">入区车流量</p>
          <span class="unit">单位：辆</span>
          <YearRevenue :dataList="carCompareList"/>
          <p class="descText">注：入区车辆数按当期卡口设备的服务区，计算的平均每日入区数量</p>
        </div>

        <div class="detail">
          <p class="tabTitle">营收特征分析</p>
          <span class="unit">单位：万元</span>
          <EntryCarNumber :data="compareRevenueList"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
import YearRevenue from "./components/yearRevenue.vue";
import EntryCarNumber from "./components/entryCarNumber.vue";
import moment from "moment";
import {getLunar} from "chinese-lunar-calendar";
export default {
  name: "index",
  components: {EntryCarNumber, YearRevenue},
  data(){
    return {
      statusBarHeight:0,
      festival:[{label:'国庆',value:1},{label:'五一',value:2},{label:'春节',value:3}],
      selectIndex:1,
      menu:{},
      time:'',// 传入的时间
      showTimeText:'',// 右上角显示的时间
      carCompareList:{},// 车流对比
      currentRevenue:0,//今年的营收总额
      compareRevenue:0,// 去年的营收总额
      add:0,// 增幅
      compareRevenueList:{},// 营收图表数据
      flagGetRevenue:false,// 拿到营收排行
      flagGetCar:false,// 车流排行
      flagGetCarCompare:false,//车流比较
      flagGetRevenueCompare:false,// 营收比较
    }
  },
  onLoad(query){
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
    // 获取用户信息
    let userInfo = uni.getStorageSync('vuex')
    userInfo = JSON.parse(userInfo)
    this.useInfo = JSON.parse(JSON.stringify(userInfo))
    uni.showLoading({
      title: '正在加载...'
    })
    this.showTimeText = this.selectIndex===1?'9.28-10.7':this.selectIndex===2?'4.29-5.5':'1.20-1.29'
    this.handleGetCarCompare()
    this.handleGetRevenueCompare()
  },
  methods:{
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    // 车流比较
    async handleGetCarCompare(){
      const req = {
        pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
        StatisticsStartDate:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
        StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
        ShowDateFormat:this.selectIndex===3?2:1
      }
      const data = await request.$webGet('CommercialApi/BigData/GetBayonetCompare',req)
      console.log('compare',data)
      let list = data.Result_Data
      let compareList = []
      let curList = []
      let max = 0
      let dateList = []

      data.Result_Data.compareList.forEach(item=>{
        if (Number(item.value)>max){
          max = Number(item.value)
        }
        compareList.push(Number(item.value))
      })
      data.Result_Data.curList.forEach(item=>{
        if (Number(item.value)>max){
          max = Number(item.value)
        }
        curList.push(Number(item.value))

        if (this.selectIndex===3){
            const date = new Date(item.name)
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            const lunarDate = getLunar(year, month, day);
            dateList.push(lunarDate.dateStr.slice(2,4))
            // item.lunarDate = lunarDate.dateStr.slice(2,4)
        }else{
          dateList.push(moment(item.name).format('M.D'))
        }
      })

      let res = {
        categories: dateList,
        series:[
          {
            name:"2022年",
            data:compareList
          },
          {
            name:"2023年",
            data:curList
          }
        ],
        max:max
      }
      this.carCompareList = res
      this.flagGetCarCompare= true
      if (this.flagGetCarCompare && this.flagGetRevenueCompare){
        uni.hideLoading()
      }
    },
    // 营收比较
    async handleGetRevenueCompare(){
      const req = {
        pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
        StatisticsStartDate:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
        StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
        StatisticsDate:this.time,
        ShowDateFormat:this.selectIndex===3?2:1
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetRevenueYOY',req)
      console.log('22222',data)
      this.currentRevenue = data.Result_Data.curRevenue
      this.compareRevenue = data.Result_Data.compareRevenue
      if (data.Result_Data.curRevenue && data.Result_Data.compareRevenue){
        this.add = ((data.Result_Data.curRevenue / data.Result_Data.compareRevenue)*100).toFixed(2)
      }
      let list = data.Result_Data
      let compareList = []
      let realCompareList = []
      let curList = []
      let realCurList = []
      let max =0
      let dateList = []
      data.Result_Data.compareList.forEach(item=>{
        let number = Number((item.value / 10000).toFixed(2))
        if (number>max){
          max = number
        }
        compareList.push(number)
        realCompareList.push(item.value)
      })
      data.Result_Data.curList.forEach(item=>{
        let number = Number((item.value / 10000).toFixed(2))
        if (number>max){
          max = number
        }
        curList.push(number)
        realCurList.push(item.value)

        if (this.selectIndex===3){
          const date = new Date(item.name)
          let year = date.getFullYear()
          let month = date.getMonth() + 1
          let day = date.getDate()
          const lunarDate = getLunar(year, month, day);
          dateList.push(lunarDate.dateStr.slice(2,4))
          // item.lunarDate = lunarDate.dateStr.slice(2,4)
        }else{
          dateList.push(moment(item.name).format('M.D'))
        }
      })

      // if (this.selectIndex===3){
      //   let smallDateList = []
      //   let smallCompareList = []
      //   let smallCurList = []
      //   dateList.forEach((item,index)=>{
      //     if (smallDateList.length>=10){
      //       return
      //     }
      //     if (index%4===0){
      //       if (smallDateList.length===9){
      //         smallDateList.push('2.15')
      //       }else{
      //         smallDateList.push(item)
      //       }
      //     }
      //   })
      //
      //   compareList.forEach((item,index)=>{
      //     if (smallCompareList.length>=10){
      //       return
      //     }
      //     if (index%4===0){
      //       if (smallDateList.length===9){
      //         smallCompareList.push(compareList[compareList.length-1])
      //       }else{
      //         smallCompareList.push(item)
      //       }
      //     }
      //   })
      //
      //   curList.forEach((item,index)=>{
      //     if (smallCurList.length>=10){
      //       return
      //     }
      //     if (index%4===0){
      //       if (smallDateList.length===9){
      //         smallCurList.push(smallCurList[smallCurList.length-1])
      //       }else{
      //         smallCurList.push(item)
      //       }
      //     }
      //   })
      //   dateList = smallDateList
      //   compareList = smallCompareList
      //   curList = smallCurList
      // }

      let res = {
        categories: dateList,
        series:[
          {
            name:"2022年",
            data:compareList,
            real:realCompareList
          },
          {
            name:"2023年",
            data:curList,
            real:realCurList
          }
        ],
        max:max
      }
      this.compareRevenueList = res
      this.flagGetRevenueCompare=true
      if (this.flagGetCarCompare && this.flagGetRevenueCompare){
        uni.hideLoading()
      }
    },
    // 切换节日类型
    handleChangeType(e){
      console.log('e',e)
      this.selectIndex = Number(e.detail.value) + 1
      uni.showLoading({
        title:' 正在加载...'
      })
      this.showTimeText = this.selectIndex===1?'4.29-5.5':this.selectIndex===2?'9.28-10.7':'1.07-2.15'
      this.handleGetCarCompare()
      this.handleGetRevenueCompare()
    }
  }
}
</script>



<style scoped lang="scss">
@import '/static/public/fontNational/stylesheet.css';
.main{
  width: 100%;
  height: 100%;
  .top{
    width: 100%;
    position: relative;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    z-index:3;
    .topBg{
      width: 100%;
      height: 100%;
      z-index: 4;
    }
    .header{
      position: fixed;
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: cover;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      z-index: 2;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
        position: absolute;
      }
    }
    .topContent{
      position: absolute;
      left: 32rpx;
      .pageTitle{
        font-size: 56rpx;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 68rpx;
        text-shadow: 0px 8px 20px rgba(158,29,0,0.25);
        background: linear-gradient(180deg, #FEFFFE 0%, #FFC7B6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .pageContent{
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 28rpx;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
    background-repeat: no-repeat;
    background-size: contain;
    //transform: translateY(-260rpx);

    .tabBox{
      width: 100%;
      height: 76rpx;
      background: #F6E8E5;
      border-radius: 8rpx;
      margin-bottom: 24rpx;
      box-sizing: border-box;
      padding: 8rpx;
      .tabItem{
        width: 50%;
        height: 100%;
        display: inline-block;
        text-align: center;
        line-height: 60rpx;
        color: #786B6C;
      }
      .selectTab{
        background: #fff;
        border-radius: 8rpx;
        color: #F95222;
      }
    }

    .dailyRevenue{
      width: 100%;
      height: 680rpx;
      background: #fff;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 2px;
      .dailyContent{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(360deg, rgba(255,233,229,0) 0%, rgba(255,233,229,0.7) 21%, #FFE9E5 100%);
        border-radius: 20rpx;
        position: relative;
        .itemBg{
          width: 266rpx;
          height: 208rpx;
          position: absolute;
          right: 0;top: 0;
          z-index:1;
        }
        .list{
          position: absolute;
          width: calc(100% - 48rpx);
          z-index: 2;
          .listTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-size: 36rpx;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #F95222;
              line-height: 44rpx;
            }
            .moreBox{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .text{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
              }
              .moreIcon{
                width: 20rpx;
                height: 40rpx;
                margin-left: 4rpx;
              }
            }
          }

          .listBox{
            width: 100%;
            background: #fff;
            margin-top: 22rpx;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 32rpx;
            .itemTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding-bottom: 36rpx;
              border-bottom: 2rpx solid #F7F4F4;
              .itemIcon{
                width: 96rpx;
                height: 96rpx;
                border-radius: 16rpx;
              }
              .revenueBox{
                .revenueValue{
                  font-size: 40rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 48rpx;
                }
                .revenueText{
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 40rpx;
                  text-align: right;
                  span{
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 40rpx;
                    margin-left: 4rpx;
                  }
                }
              }
            }

            .listItemTop{
              margin-top: 34rpx;
              .listTopItem{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10rpx 0;
                .itemLeft{
                  display: flex;
                  align-items: center;
                  .itemIcon{
                    width: 40rpx;
                    height: 40rpx;
                  }

                  .name{
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    .type{
                      font-size: 24rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 36rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
                .itemRight{
                  .itemValue{
                    font-size: 32rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 40rpx;
                    .unit{
                      font-size: 28rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      line-height: 40rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .dailyEntry{
      width: 100%;
      height: 680rpx;
      background: #fff;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 2px;
      margin-top: 28rpx;
      .dailyContent{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(360deg, rgba(238,242,255,0) 0%, rgba(238,242,255,0.7) 20%, #EEF2FF 100%);
        border-radius: 20rpx;
        position: relative;
        .itemBg{
          width: 320rpx;
          height: 320rpx;
          position: absolute;
          right: 0;top: 0;
          z-index:1;
        }
        .list{
          position: absolute;
          width: calc(100% - 48rpx);
          z-index: 2;
          .listTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-size: 36rpx;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #096EF7;
              line-height: 44rpx;
            }
            .moreBox{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .text{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
              }
              .moreIcon{
                width: 20rpx;
                height: 40rpx;
                margin-left: 4rpx;
              }
            }
          }
          .listBox{
            width: 100%;
            background: #fff;
            margin-top: 22rpx;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 32rpx;
            .itemTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding-bottom: 36rpx;
              border-bottom: 2rpx solid #F7F4F4;
              .itemIcon{
                width: 96rpx;
                height: 96rpx;
                border-radius: 16rpx;
              }
              .revenueBox{
                .revenueValue{
                  font-size: 40rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 48rpx;
                }
                .revenueText{
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 40rpx;
                  text-align: right;
                  span{
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 40rpx;
                    margin-left: 4rpx;
                  }
                }
              }
            }
            .listItemTop{
              margin-top: 34rpx;
              .listTopItem{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10rpx 0;
                .itemLeft{
                  display: flex;
                  align-items: center;
                  .itemIcon{
                    width: 40rpx;
                    height: 40rpx;
                  }
                  .name{
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    .type{
                      font-size: 24rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 36rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
                .itemRight{
                  .itemValue{
                    font-size: 32rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 40rpx;
                    .unit{
                      font-size: 28rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      line-height: 40rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .dailyEntryAdd{
      width: 100%;
      height: 500rpx;
      background: #fff;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 2px;
      margin-top: 28rpx;
      .dailyContent{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(360deg, rgba(229,247,255,0) 0%, rgba(229,247,255,0.7) 23%, #E5F7FF 100%);
        border-radius: 20rpx;
        position: relative;
        .itemBg{
          width: 320rpx;
          height: 320rpx;
          position: absolute;
          right: 0;top: 0;
          z-index:1;
        }
        .list{
          position: absolute;
          width: calc(100% - 48rpx);
          z-index: 2;
          .listTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-size: 36rpx;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #018ABD;
              line-height: 44rpx;
            }
            .moreBox{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .text{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
              }
              .moreIcon{
                width: 20rpx;
                height: 40rpx;
                margin-left: 4rpx;
              }
            }
          }
          .listBox{
            width: 100%;
            background: #fff;
            margin-top: 22rpx;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 32rpx;
            .listItemTop{
              .listTopItem{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10rpx 0;
                .itemLeft{
                  display: flex;
                  align-items: center;
                  .itemIcon{
                    width: 40rpx;
                    height: 40rpx;
                  }
                  .name{
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    .type{
                      font-size: 24rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 36rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
                .itemRight{
                  .addIcon{
                    width: 28rpx;
                    height: 28rpx;
                  }
                  .itemValue{
                    display: inline-block;
                    width: 80px;
                    text-align: left;
                    margin-left: 8rpx;
                    font-size: 32rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 40rpx;
                  }
                }
              }
            }
          }
        }
      }
    }

    .selectTab2{
      box-sizing: border-box;
      padding: 24rpx;
      background: #fff;
      border-radius: 8rpx;
      .detail{
        margin-bottom: 24rpx;
        .tabTitle{
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 40rpx;
          margin-bottom: 12rpx;
        }
        .unit{
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 36rpx;
        }
        .descText{
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 36rpx;
          margin-right: 8rpx;
        }
        .detailTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .tabTitle{
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            line-height: 40rpx;
            margin-bottom: 12rpx;
          }
          .timeText{
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 40rpx
          }
        }

        .money{
          width:calc(100% - 32px);
          padding: 18px 16px;
          background: #F7F7F7;
          border-radius: 4px;
          .moneyTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
            //.moneyTopItem{
            //  display: flex;
            //  align-items: center;
            .moneyTitle{
              font-size: 28rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: 400;
              color: #160002;
              line-height: 36rpx;
            }
            .icon{
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }
            .sumMoney{
              font-size: 16px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #341D00;
              line-height: 24px;
              .notice{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 20px;
                margin-left: 8rpx;
              }
            }
          }
        }
        .desc{
          display: flex;
          align-items: flex-start;
          justify-content: flex-end;
          .descLeft{
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 36rpx;
            margin-right: 8rpx;
          }
          .descRight{
            p{
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 36rpx;
            }
          }
        }
        .bottom{
          display: flex;
          align-items: center;
          margin-left: 24px;
          .icon{
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
          .add{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FA5151;
            line-height: 20px;
            margin-right: 4px;
          }
          .text{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 20px;
          }
        }
      }

    }

  }
}

</style>
