<template>
  <view class="main">
    <view class="header">
      <view class="headerTop" :style="{top: menu.top + 'px',height:menu.height + 'px'}">
        <image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
      </view>

      <view class="pageTitle" :style="{top: (menu.bottom+18) +'px'}">收支预测</view>

      <view class="headerDetail" :style="{top: (menu.bottom+68) +'px'}">
        <view class="detailBox">
          <image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/monthSum.png"/>

          <view class="detailPage">月度累计收支金额</view>

          <view class="moneyBox">
            <view class="moneyItem">
              <view class="itemTop">
                <view class="itemChart">
                  <YearCharts :success="number"/>
                </view>
                <view class="itemMessage">
                  <text class="itemRate">32.54%</text>
                  <text class="itemLabel">成本比</text>
                </view>
              </view>
              <view class="successBox">
                <text class="successNumber">119.01</text>
                <text class="successTime">2022年完成<text class="successUnit">/万元</text></text>
              </view>
            </view>

            <view class="moneyItem">
              <view class="itemTop">
                <view class="itemChart">
                  <YearCharts :success="number"/>
                </view>
                <view class="itemMessage">
                  <text class="itemRate">32.54%</text>
                  <text class="itemLabel">成本比</text>
                </view>
              </view>
              <view class="successBox">
                <text class="successNumber">119.01</text>
                <text class="successTime">2022年完成<text class="successUnit">/万元</text></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="profitYear">
        <view class="itemBox">
          <view class="itemBoxTitle">年度累计利润</view>
          <image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/yearSum.png"/>
          <view class="itemDetailBox">
            <view class="detailBoxTop">
              <text class="successLabel">完成率</text>
              <text class="successValue">34.63%</text>
            </view>

            <view class="progress">
              <view class="have" :style="{width:'36%'}"></view>
            </view>

            <view class="yearDetail">
              <view class="yearItem">
                <view class="itemValue">119.01</view>
                <text class="itemLabel">2022年完成<text class="itemUnit">/万元</text></text>
              </view>

              <view class="yearItem">
                <view class="itemValue">300.00</view>
                <text class="itemLabel">2023年预计<text class="itemUnit">/万元</text></text>
              </view>

              <view class="yearItem">
                <view class="itemValue">12.84%</view>
                <text class="itemLabel">计划比</text>
              </view>
            </view>
          </view>
        </view>
      </view>

       <view class="accrueYear">
           <view class="itemBox">
               <view class="itemBoxTitle">年度营收累计</view>
             <image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/yearRevenue.png"/>
               <view class="itemDetailBox">
                   <view class="leftCharts">
                       <OtherCharts :success="number" :colorList="['#9E3CE9', '#ECD8FB']"/>
                       <text class="numberValue">39.67%</text>
                   </view>
                   <view class="rightBox">
                       <view class="rightBoxTop">
                           <view class="itemTop">
                               <text class="itemTopValue">119.01</text>
                               <text class="itemTopTitle">2022年完成<text class="itemTopUnit">/万元</text></text>
                           </view>
                           <view class="itemRateBox">
                               <view class="addRate">32.54%</view>
                               <view class="rateText">成本比</view>
                           </view>
                       </view>
                       <view class="rightBoxTop">
                           <view class="itemTop">
                               <text class="itemTopValue">119.01</text>
                               <text class="itemTopTitle">2022年预计<text class="itemTopUnit">/万元</text></text>
                           </view>
                           <view class="itemRateBox">
                               <view class="addRate">32.54%</view>
                               <view class="rateText">计划比</view>
                           </view>
                       </view>
                   </view>
               </view>
           </view>
       </view>

        <view class="incomeAll">
            <view class="itemBox">
                <view class="itemBoxTitle" style="color: #EC6C00">收入合计</view>
              <image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/allInCome.png"/>
                <view class="itemDetailBox">
                    <view class="leftCharts">
                        <OtherCharts :success="number" :colorList="['#FC7909', '#FEE4CE']"/>
                        <text class="numberValue" style="color: #FE7500">39.67%</text>
                    </view>
                    <view class="rightBox">
                        <view class="rightBoxTop">
                            <view class="itemTop">
                                <text class="itemTopValue">35.00</text>
                                <text class="itemTopTitle">2022年完成<text class="itemTopUnit">/万元</text></text>
                            </view>
                            <view class="itemRateBox">
                                <view class="addRate">32.54%</view>
                                <view class="rateText">成本比</view>
                            </view>
                        </view>
                        <view class="rightBoxTop">
                            <view class="itemTop">
                                <text class="itemTopValue">300.00</text>
                                <text class="itemTopTitle">2023年预计<text class="itemTopUnit">/万元</text></text>
                            </view>
                            <view class="itemRateBox">
                                <view class="addRate">12.84%</view>
                                <view class="rateText">计划比</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="itemDetailSubtotal">
                <view class="itemSmallBox">
                    <view class="itemSmallTop">
                        <view class="leftBox">
                            <view class="smallIcon">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/selfOperat.svg"/>
                            </view>
                            <view class="smallTitle">自营收入小计</view>
                        </view>
                        <view class="leftRight" @click="handleGoInComeDetail">
                            <text class="more">查看更多</text>
                            <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/moreIcon.svg"/>
                        </view>
                    </view>

                    <view class="itemSmallDetail">
                        <view class="itemSmallLeftBox">
                            <OtherCharts :success="number" :colorList="['#FC7909', '#F9DCC2']"/>
                            <text class="leftValue">39.67%</text>
                        </view>
                        <view class="itemSmallRightBox">
                            <view class="rightTopItem">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2022年完成<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">成本比</view>
                                </view>
                            </view>
                            <view class="rightTopItem" style="margin-top: 32rpx">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2023年预计<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">计划比</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="smallSum">
                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">服务区自营小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">12.84%</text>
                            </view>
                        </view>

                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">分公司收入小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">15.87%</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="itemSmallBox">
                    <view class="itemSmallTop">
                        <view class="leftBox">
                            <view class="smallIcon">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherSum.svg"/>
                            </view>
                            <view class="smallTitle">其他收入小计</view>
                        </view>
                        <view class="leftRight"  @click="handleGoInComeDetail">
                            <text class="more">查看更多</text>
                          <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/moreIcon.svg"/>
                        </view>
                    </view>

                    <view class="itemSmallDetail">
                        <view class="itemSmallLeftBox">
                            <OtherCharts :success="number" :colorList="['#FC7909', '#F9DCC2']"/>
                            <text class="leftValue">39.67%</text>
                        </view>
                        <view class="itemSmallRightBox">
                            <view class="rightTopItem">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2022年完成<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">成本比</view>
                                </view>
                            </view>
                            <view class="rightTopItem" style="margin-top: 32rpx">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2023年预计<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">计划比</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="smallSum">
                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">服务区自营小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">12.84%</text>
                            </view>
                        </view>

                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">分公司收入小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">15.87%</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="expenditure">
            <view class="itemBox">
                <view class="itemBoxTitle" style="color: #096EF7">支出合计</view>
              <image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/expenditure.png"/>
                <view class="itemDetailBox">
                    <view class="leftCharts">
                        <OtherCharts :success="number" :colorList="['#1679FF', '#E7F1FF']"/>
                        <text class="numberValue" style="color: #1679FF">39.67%</text>
                    </view>
                    <view class="rightBox">
                        <view class="rightBoxTop">
                            <view class="itemTop">
                                <text class="itemTopValue">35.00</text>
                                <text class="itemTopTitle">2022年完成<text class="itemTopUnit">/万元</text></text>
                            </view>
                            <view class="itemRateBox">
                                <view class="addRate">32.54%</view>
                                <view class="rateText">成本比</view>
                            </view>
                        </view>
                        <view class="rightBoxTop">
                            <view class="itemTop">
                                <text class="itemTopValue">300.00</text>
                                <text class="itemTopTitle">2023年预计<text class="itemTopUnit">/万元</text></text>
                            </view>
                            <view class="itemRateBox">
                                <view class="addRate">12.84%</view>
                                <view class="rateText">计划比</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="itemDetailSubtotal">
                <view class="itemSmallBox">
                    <view class="itemSmallTop">
                        <view class="leftBox">
                            <view class="smallIcon">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/operateSum.svg"/>
                            </view>
                            <view class="smallTitle">运营成本小计</view>
                        </view>
                        <view class="leftRight" @click="handleGoExpenditure">
                            <text class="more">查看更多</text>
                          <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/moreIcon.svg"/>
                        </view>
                    </view>

                    <view class="itemSmallDetail">
                        <view class="itemSmallLeftBox">
                            <OtherCharts :success="number" :colorList="['#1679FF', '#E7F1FF']"/>
                            <text class="leftValue">39.67%</text>
                        </view>
                        <view class="itemSmallRightBox">
                            <view class="rightTopItem">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2022年完成<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">成本比</view>
                                </view>
                            </view>
                            <view class="rightTopItem" style="margin-top: 32rpx">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2023年预计<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">计划比</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="smallSum">
                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">服务区自营小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">12.84%</text>
                            </view>
                        </view>

                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">分公司收入小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">15.87%</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="itemSmallBox">
                    <view class="itemSmallTop">
                        <view class="leftBox">
                            <view class="smallIcon">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/operateManager.svg"/>
                            </view>
                            <view class="smallTitle">管理费用小计</view>
                        </view>
                        <view class="leftRight" @click="handleGoExpenditure">
                            <text class="more">查看更多</text>
                          <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/moreIcon.svg"/>
                        </view>
                    </view>

                    <view class="itemSmallDetail">
                        <view class="itemSmallLeftBox">
                            <OtherCharts :success="number" :colorList="['#1679FF', '#E7F1FF']"/>
                            <text class="leftValue">39.67%</text>
                        </view>
                        <view class="itemSmallRightBox">
                            <view class="rightTopItem">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2022年完成<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">成本比</view>
                                </view>
                            </view>
                            <view class="rightTopItem" style="margin-top: 32rpx">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2023年预计<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">计划比</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="smallSum">
                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">运营成本小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">12.84%</text>
                            </view>
                        </view>

                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">分公司收入小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">15.87%</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="itemSmallBox">
                    <view class="itemSmallTop">
                        <view class="leftBox">
                            <view class="smallIcon">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/buySum.svg"/>
                            </view>
                            <view class="smallTitle">销售费用小计</view>
                        </view>
                        <view class="leftRight" @click="handleGoExpenditure">
                            <text class="more">查看更多</text>
                          <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/moreIcon.svg"/>
                        </view>
                    </view>

                    <view class="itemSmallDetail">
                        <view class="itemSmallLeftBox">
                            <OtherCharts :success="number" :colorList="['#1679FF', '#E7F1FF']"/>
                            <text class="leftValue">39.67%</text>
                        </view>
                        <view class="itemSmallRightBox">
                            <view class="rightTopItem">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2022年完成<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">成本比</view>
                                </view>
                            </view>
                            <view class="rightTopItem" style="margin-top: 32rpx">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2023年预计<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">计划比</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="smallSum">
                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">运营成本小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">12.84%</text>
                            </view>
                        </view>

                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">分公司收入小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">15.87%</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="itemSmallBox">
                    <view class="itemSmallTop">
                        <view class="leftBox">
                            <view class="smallIcon">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBuy.svg"/>
                            </view>
                            <view class="smallTitle">其他费用小计</view>
                        </view>
                        <view class="leftRight" @click="handleGoExpenditure">
                            <text class="more">查看更多</text>
                          <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/moreIcon.svg"/>
                        </view>
                    </view>

                    <view class="itemSmallDetail">
                        <view class="itemSmallLeftBox">
                            <OtherCharts :success="number" :colorList="['#1679FF', '#E7F1FF']"/>
                            <text class="leftValue">39.67%</text>
                        </view>
                        <view class="itemSmallRightBox">
                            <view class="rightTopItem">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2022年完成<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">成本比</view>
                                </view>
                            </view>
                            <view class="rightTopItem" style="margin-top: 32rpx">
                                <view class="itemDetail">
                                    <view class="detailValue">35.00</view>
                                    <view class="detailTitle">2023年预计<text class="detailTitleUnit">/万元</text></view>
                                </view>
                                <view class="itemRight">
                                    <view class="rightValue">32.54%</view>
                                    <view class="rightLabel">计划比</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="smallSum">
                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">运营成本小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">12.84%</text>
                            </view>
                        </view>

                        <view class="smallSumItem">
                            <view class="smallSumLeft">
                                <view class="smallSumItemBox"></view>
                                <text class="smallTitle">分公司收入小计</text>
                            </view>

                            <view class="smallSumRight">
                                <text class="successText">完成率</text>
                                <text class="successValue">15.87%</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
  </view>
</template>
<script>
import YearCharts from "./component/yearCharts.vue";
import OtherCharts from './component/otherCharts.vue'
export default {
  components:{YearCharts,OtherCharts},
  data(){
    return {
      windowHeight: null,
      statusBarHeight: null,
      menu:{},
      number:0
    }
  },
  onLoad(){
    //  获取手机参数对页面进行适配
    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.switchTab({
        url: '/pages/index/index'
      })
      // if (this.come==='index'){
      //
      // }else{
      //   uni.switchTab({
      //     url: '/pages/userCenter/userCenter'
      //   })
      // }
    },
    // 进入收入详情
    handleGoInComeDetail(){
      console.log('1111')
      uni.navigateTo({
        url: '/pages/revenue/incomeDetail'
      });
    },
    // 进入支出详情
    handleGoExpenditure(){
      uni.navigateTo({
        url: '/pages/revenue/expenditureDetail'
      });
    }
  }
}
</script>
<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{
  width: 100%;
  min-height: 100vh;
  .header{width: 100%;
    height: 664rpx;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png");
    background-repeat: no-repeat;
    background-size: 100% 560rpx;
    position: relative;

    .headerTop{
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      .backIcon{
        width: 48rpx;
        height: 48rpx;
        margin-left: 32rpx;
      }
    }
    .pageTitle{
      position: absolute;
      left: 32rpx;
      font-size: 56rpx;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 68rpx;
    }

    .headerDetail{
      position: absolute;
      width: calc(100% - 64rpx);
      left: 32rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 4rpx;
      .detailBox{
        width: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(180deg, #E9F5FA 0%,  #FBFDFE 100%);
        border-radius: 16rpx;
        position: relative;
        .monthSumBg{
          position: absolute;
          width: 320rpx;
          height: 320rpx;
          right: 0;top: 0;
          z-index: 1;
        }
        .detailPage{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #018ABD;
          line-height: 44rpx;
        }
        .moneyBox{
          width: 100%;
          height: 248rpx;
          background: #fff;
          margin-top: 22rpx;
          border-radius: 12rpx;
          box-sizing: border-box;
          padding: 32rpx;
          display: flex;
          position: relative;
          z-index: 2;
          .moneyItem{
            width: 50%;
            height: 100%;
            .itemTop{
              width: 100%;
              height: 68rpx;
              display: flex;
              box-sizing: border-box;
              .itemChart{
                margin-top: 8rpx;
                width: 68rpx;
                height: 68rpx;
              }
              .itemMessage{
                display: flex;
                flex-direction: column;
                margin-left: 16rpx;
                .itemRate{
                  font-size: 40rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #018ABD;
                  line-height: 48rpx;
                }
                .itemLabel{
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                }
              }
            }
            .successBox{
              margin-top: 32rpx;
              display: flex;
              flex-direction: column;
              .successNumber{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 36rpx;
                margin-bottom: 4rpx;
              }
              .successTime{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
                .successUnit{
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 36rpx;
                  margin-left: 4rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .content{
    width: 100%;
    box-sizing: border-box;
    padding: 24rpx 36rpx 0;
    background: #F5F5F5;
    .profitYear{
      width: 100%;
      height: 368rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 4rpx;
      border-radius: 16rpx;
      .itemBox{
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #EDEEFF 0%,  #F8F9FF 100%);;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        position: relative;
        .itemBoxTitle{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #474EF4;
          line-height: 44rpx;
        }
        .monthSumBg{
          position: absolute;
          width: 320rpx;
          height: 320rpx;
          right: 0;top: 0;
          z-index: 1;
        }
        .itemDetailBox{
          position: relative;
          z-index: 2;
          width: 100%;
          height: 256rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-top: 22rpx;
          box-sizing: border-box;
          padding: 32rpx;
          .detailBoxTop{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .successLabel{
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 40rpx;
            }
            .successValue{
              font-size: 40rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #575EF9;
              line-height: 48rpx;
            }
          }
          .progress{
            width: 100%;
            height: 24rpx;
            background: rgba(221, 223, 254, 0.2);
            border-radius: 12rpx;
            position: relative;
            margin-top: 12rpx;
            .have{
              position: absolute;
              top: 0;left: 0;
              height: 100%;
              background: #575EF9;
              border-radius: 12rpx;
            }
          }
          .yearDetail{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 32rpx;
            .yearItem{
              .itemValue{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 36rpx;
              }
              .itemLabel{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 36rpx;
                margin-top: 4rpx;
                .itemUnit{
                  margin-left: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 36rpx;
                }
              }
            }
          }
        }
      }
    }
    .accrueYear{
      width: 100%;
      height: 368rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 4rpx;
      border-radius: 16rpx;
      margin-top: 24rpx;
      .itemBox{
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #F6ECFD 0%,  #FDFCFF 100%);
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        position: relative;
        .itemBoxTitle{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #9635E0;
          line-height: 44rpx;
        }
        .monthSumBg{
          position: absolute;
          width: 320rpx;
          height: 320rpx;
          right: 0;top: 0;
          z-index: 1;
        }
        .itemDetailBox{
          position: relative;
          z-index:2;
          width: 100%;
          height: 256rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-top: 22rpx;
          box-sizing: border-box;
          display: flex;
          .leftCharts{
            width: 224rpx;
            height: 100%;
            box-sizing: border-box;
            padding: 32rpx 48rpx 0;
            .numberValue{
              font-size: 40rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #9E3CE9;
              line-height: 48rpx;
              margin-top: 8rpx;
            }
          }
          .rightBox{
            width: calc(100% - 224rpx);
            .rightBoxTop{
              width: 100%;
              box-sizing: border-box;
              padding: 32rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .itemTop{
                display: flex;
                flex-direction: column;
                .itemTopValue{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 36rpx;
                }
                .itemTopTitle{
                  margin-top: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                  .itemTopUnit{
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 36rpx;
                    margin-left: 4rpx;
                  }
                }
              }
              .itemRateBox{
                display: inline-block;
                .addRate{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 36rpx;
                }
                .rateText{
                  margin-top: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                }
              }
            }
          }
        }
      }
    }

    .incomeAll{
      width: 100%;
      box-sizing: border-box;
      padding: 4rpx;
      border-radius: 16rpx;
      margin-top: 24rpx;
      background: #FBFBFB;
      .itemBox{
        width: 100%;
        height: 400rpx;
        background: linear-gradient(180deg, #F9F0E2 0%,  #FAF9F7 100%);
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        position: relative;
        .itemBoxTitle{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #9635E0;
          line-height: 44rpx;
        }
        .monthSumBg{
          position: absolute;
          width: 320rpx;
          height: 320rpx;
          right: 0;top: 0;
          z-index: 1;
        }
        .itemDetailBox{
          position: relative;
          z-index: 2;
          width: 100%;
          height: 256rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-top: 22rpx;
          box-sizing: border-box;
          display: flex;
          .leftCharts{
            width: 224rpx;
            height: 100%;
            box-sizing: border-box;
            padding: 32rpx 48rpx 0;
            .numberValue{
              font-size: 40rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #9E3CE9;
              line-height: 48rpx;
              margin-top: 8rpx;
            }
          }
          .rightBox{
            width: calc(100% - 224rpx);
            .rightBoxTop{
              width: 100%;
              box-sizing: border-box;
              padding: 32rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .itemTop{
                display: flex;
                flex-direction: column;
                .itemTopValue{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 36rpx;
                }
                .itemTopTitle{
                  margin-top: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                  .itemTopUnit{
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 36rpx;
                    margin-left: 4rpx;
                  }
                }
              }
              .itemRateBox{
                display: inline-block;
                .addRate{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 36rpx;
                }
                .rateText{
                  margin-top: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                }
              }
            }
          }
        }
      }
      .itemDetailSubtotal{
        width: 100%;
        background: #FBFBFB;
        .itemSmallBox{
          margin-top: 48rpx;
          .itemSmallTop{
            width: 100%;
            box-sizing: border-box;
            padding: 0 28rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .leftBox{
              display: flex;
              align-items: center;
              .smallIcon{
                width: 72rpx;
                height: 72rpx;
                margin-right: 16rpx;
                .img{
                  width: 100%;
                  height: 100%;
                }
              }
              .smallTitle{
                font-size: 32rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 44rpx;
              }
            }
            .leftRight{
              display: flex;
              align-items: center;
              .more{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
                margin-right: 10rpx;
              }
              .moreIcon{
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
        }

        .itemSmallDetail{
          width: calc(100% - 116rpx - 28rpx);
          height: 248rpx;
          margin-top: 30rpx;
          background: #F9F5F1;
          border-radius: 8rpx;
          margin-left: 116rpx;
          box-sizing: border-box;
          padding: 32rpx 30rpx;
          display: flex;
          justify-content: space-between;
          .itemSmallLeftBox{
            width: 128rpx;
            height: 100%;
            border-radius: 8rpx;
            .leftValue{
              margin-top: 4rpx;
              font-size: 40rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #FE7500;
              line-height: 48rpx;
            }
          }
          .itemSmallRightBox{
            width: calc(100% - 168rpx);
            .rightTopItem{
              width: 100%;
              display: flex;
              justify-content: space-between;
              .itemDetail{
                .detailValue{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 36rpx;
                }
                .detailTitle{
                  font-size: 22rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                  margin-top: 4rpx;
                }
              }
              .itemRight{
                .rightValue{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 36rpx;
                }
                .rightLabel{
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                  margin-top: 4rpx;
                }
              }
            }
          }
        }

        .smallSum{
          width: calc(100% - 116rpx - 28rpx);
          margin-left: 116rpx;
          .smallSumItem{
            margin-top: 24rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .smallSumLeft{
              display: flex;
              align-items: center;
              .smallSumItemBox{
                width: 12rpx;
                height: 12rpx;
                background: #EF7A16;
                border-radius: 50%;
                margin-right: 16rpx;
              }
              .smallTitle{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
              }
            }
            .smallSumRight{
              .successText{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 40rpx;
              }
              .successValue{
                font-size: 28rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #E83944;
                line-height: 40rpx;
                margin-left: 8rpx;
              }
            }
          }
        }
      }
    }

    .expenditure{
      width: 100%;
      box-sizing: border-box;
      padding: 4rpx;
      border-radius: 16rpx;
      margin-top: 24rpx;
      background: #FBFBFB;
      .itemBox{
        width: 100%;
        height: 400rpx;
        background: linear-gradient(180deg, #F1F8FF 0%,  #F6FAFF 100%);
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        position: relative;
        .monthSumBg{
          position: absolute;
          width: 320rpx;
          height: 320rpx;
          right: 0;top: 0;
          z-index: 1;
        }
        .itemBoxTitle{
          font-size: 36rpx;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #9635E0;
          line-height: 44rpx;
        }
        .itemDetailBox{
          position: relative;
          z-index: 2;
          width: 100%;
          height: 256rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-top: 22rpx;
          box-sizing: border-box;
          display: flex;
          .leftCharts{
            width: 224rpx;
            height: 100%;
            box-sizing: border-box;
            padding: 32rpx 48rpx 0;
            .numberValue{
              font-size: 40rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #9E3CE9;
              line-height: 48rpx;
              margin-top: 8rpx;
            }
          }
          .rightBox{
            width: calc(100% - 224rpx);
            .rightBoxTop{
              width: 100%;
              box-sizing: border-box;
              padding: 32rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .itemTop{
                display: flex;
                flex-direction: column;
                .itemTopValue{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 36rpx;
                }
                .itemTopTitle{
                  margin-top: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                  .itemTopUnit{
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 36rpx;
                    margin-left: 4rpx;
                  }
                }
              }
              .itemRateBox{
                display: inline-block;
                .addRate{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 36rpx;
                }
                .rateText{
                  margin-top: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                }
              }
            }
          }
        }
      }
      .itemDetailSubtotal{
        width: 100%;
        background: #FBFBFB;
        .itemSmallBox{
          margin-top: 48rpx;
          .itemSmallTop{
            width: 100%;
            box-sizing: border-box;
            padding: 0 28rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .leftBox{
              display: flex;
              align-items: center;
              .smallIcon{
                width: 72rpx;
                height: 72rpx;
                margin-right: 16rpx;
                .img{
                  width: 100%;
                  height: 100%;
                }
              }
              .smallTitle{
                font-size: 32rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 44rpx;
              }
            }
            .leftRight{
              display: flex;
              align-items: center;
              .more{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
                margin-right: 10rpx;
              }
              .moreIcon{
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
        }

        .itemSmallDetail{
          width: calc(100% - 116rpx - 28rpx);
          height: 248rpx;
          margin-top: 30rpx;
          background: #F8FAFD;
          border-radius: 8rpx;
          margin-left: 116rpx;
          box-sizing: border-box;
          padding: 32rpx 30rpx;
          display: flex;
          justify-content: space-between;
          .itemSmallLeftBox{
            width: 128rpx;
            height: 100%;
            border-radius: 8rpx;
            .leftValue{
              margin-top: 4rpx;
              font-size: 40rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #1679FF;
              line-height: 48rpx;
            }
          }
          .itemSmallRightBox{
            width: calc(100% - 168rpx);
            .rightTopItem{
              width: 100%;
              display: flex;
              justify-content: space-between;
              .itemDetail{
                .detailValue{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 36rpx;
                }
                .detailTitle{
                  font-size: 22rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                  margin-top: 4rpx;
                }
              }
              .itemRight{
                .rightValue{
                  font-size: 32rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 36rpx;
                }
                .rightLabel{
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 36rpx;
                  margin-top: 4rpx;
                }
              }
            }
          }
        }

        .smallSum{
          width: calc(100% - 116rpx - 28rpx);
          margin-left: 116rpx;
          .smallSumItem{
            margin-top: 24rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .smallSumLeft{
              display: flex;
              align-items: center;
              .smallSumItemBox{
                width: 12rpx;
                height: 12rpx;
                background: #1679FF;
                border-radius: 50%;
                margin-right: 16rpx;
              }
              .smallTitle{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
              }
            }
            .smallSumRight{
              .successText{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 40rpx;
              }
              .successValue{
                font-size: 28rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #E83944;
                line-height: 40rpx;
                margin-left: 8rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
