<template>
  <div class="page_main">
    <div class="page_head">
      <div class="head_single_box">
        <div class="single_box_head">
          <div class="single_box_name">{{ headFirst.name }}</div>
          <el-image :src="common_icon" style="width:5px;height: 20px;"></el-image>
        </div>
        <div class="single_box_second">
          <el-image :src="headFirst.icon" style="width:42.67px;height: 42.67px;"></el-image>
          <div class="single_box_num1">{{ headFirst.totalCount }}</div>
        </div>
        <div class="single_box_third">日均销售额{{ headFirst.firstNum }}</div>
        <div class="single_box_bottom">
          <div class="box_bottom_text">{{ headFirst.bottomText1 }}</div>
          <div class="box_bottom_text box_bottom_right">{{ headFirst.bottomText2 }}</div>
        </div>
      </div>
      <div class="head_single_box">
        <div class="single_box_head">
          <div class="single_box_name">{{ headSecond.name }}</div>
          <el-image :src="common_icon" style="width:5px;height: 20px;"></el-image>
        </div>
        <div class="single_box_second">
          <el-image :src="headSecond.icon" style="width:42.67px;height: 42.67px;"></el-image>
          <div class="single_box_num1">{{ headSecond.totalCount }}</div>
        </div>
        <div class="single_box_third">日访问量{{ headSecond.firstNum }}</div>
        <div class="head_second_chart">
          <div key="myCharts6" ref="head_left_chart" style="width: 100%;height: 100%"/>
        </div>
      </div>
      <div class="head_single_box">
        <div class="single_box_head">
          <div class="single_box_name">{{ headThird.name }}</div>
          <el-image :src="common_icon" style="width:5px;height: 20px;"></el-image>
        </div>
        <div class="single_box_second">
          <el-image :src="headThird.icon" style="width:42.67px;height: 42.67px;"></el-image>
          <div class="single_box_num1">{{ headThird.totalCount }}</div>
        </div>
        <div class="single_box_third">转化率{{ headThird.firstNum }}</div>
        <div class="head_second_chart">
          <div key="myCharts7" ref="head_right_chart" style="width: 100%;height: 100%"/>
        </div>
      </div>
      <div class="head_single_box">
        <div class="single_box_head">
          <div class="single_box_name">{{ headFour.name }}</div>
          <el-image :src="common_icon" style="width:5px;height: 20px;"></el-image>
        </div>
        <div class="single_box_second">
          <el-image :src="headFour.icon" style="width:42.67px;height: 42.67px;"></el-image>
          <div class="single_box_num1">{{ headFour.totalCount }}</div>
        </div>
        <div class="single_box_third_box">
          <div class="third_box_text">{{ headFour.firstText }}</div>
          <div class="third_box_text">{{ headFour.secondText }}</div>
        </div>
        <div class="single_box_bottom_chart">
          <div :style="{'width': headFour.bottomChartValue}" class="four_bottom_chart">
          </div>
        </div>
      </div>
    </div>
    <div class="page_second">
      <div class="page_second_left">
        <div v-for="(item, index) in secondTab" :key="index"
             :class="item.id==nowSecondShow?'no_showTab show_tab':'no_showTab'" @click="changeSecondLeftTab(item)">{{ item.name }}
        </div>
      </div>
      <div class="page_second_center">
        <div v-for="(item, index) in secondTabList"
             :key="index" :class="item.id==nowSecondCenterShow?'no_center_showTab center_show_tab':'no_center_showTab'" @click="changeSecondCenterTab(item)">{{ item.name }}
        </div>
      </div>
      <div class="page_second_right">
        <el-date-picker
            v-model="secondRightTime"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            style="width:305px;"
            type="daterange"
            value-format="yyyy-MM-dd"
            @change="secondRightTimeChange">
        </el-date-picker>
      </div>
    </div>
    <div class="page_third">
      <div class="page_third_left">
        <div class="page_third_left_title">销售额趋势图</div>
        <div class="page_third_left_chart">
          <div key="myCharts4" ref="third_left_chart" style="width: 100%;height: 100%"/>
        </div>
      </div>
      <div class="page_third_right">
        <div class="third_right_head">
          <div class="third_right_head_left">门店{{ nowSecondShow === 1 ? '销售' : '访问' }}排行榜</div>
          <div class="third_right_head_right">查看更多</div>
        </div>
        <div class="third_right_bottom">
          <div v-for="(item, index) in thirdRightList" :key="index" class="single_third_data">
            <div class="single_third_data_left">{{ index + 1 }}</div>
            <div class="single_third_data_right">
              <div class="single_right_name">{{ item.name }}</div>
              <div class="single_right_value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_four">
      <div class="page_four_left">
        <div class="page_four_title">线上热门搜索</div>
        <div class="page_four_center">
          <div v-for="(item, index) in fourCenterList" :key="index" class="single_four_center">
            <div class="four_center_left">
              <div class="four_center_left_title">{{ item.name }}</div>
              <div class="four_center_left_value">{{ item.value }}</div>
            </div>
            <div class="four_center_right">
              <div class="four_center_right_date">本周</div>
              <div :class="item.isIncrease?'four_center_right_increase':'four_center_right_increase no_increase'">
                {{ item.increaseData }}
              </div>
            </div>
          </div>
        </div>
        <div class="page_four_bottom">
          <div v-for="(item, index) in fourLeftBottomTabs" :key="index" class="single_four_bottom">
            <div class="single_four_bottom_head">
              <div class="single_four_bottom_name">{{ item.name }}</div>
              <div class="single_four_bottom_value">{{ item.value }}</div>
            </div>
            <div class="single_four_bottom_progress">
              <div :style="{'width': item.percent}" class="single_four_bottom_progress_data"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="page_four_right">
        <div class="page_four_right_head">
          <div class="page_four_title">线上热门搜索</div>
          <div class="four_right_tab">
            <div v-for="(item, index) in fourTab"
                 :key="index" :class="activeFourRightTab ===item.id ? 'single_four_tab first_four_tab': 'single_four_tab'" @click="fourRightTabsChange(item)">{{ item.name }}
            </div>
          </div>
        </div>
        <div class="page_four_right_bottom">
          <div class="four_right_bottom_left">
            <div key="myCharts31" ref="third_bottom" style="width: 100%;height: 100%"/>
          </div>
          <div class="four_right_bottom_right">
            <div v-for="(item, index) in rightBottomRightList" :key="index" class="single_four_bottom_right">
              <div class="single_four_bottom_right_left">
                <div :style="'background:'+item.color" class="single_four_bottom_right_point"></div>
                <div class="single_four_bottom_right_name">{{ item.name }}</div>
              </div>
              <div class="single_four_bottom_right_value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_fixth">
      <div class="page_fixth_head">
        <div v-for="(item, index) in fixthTopData" :key="index" class="single_bottom_data">
          <div class="single_bottom_title">{{ item.name }}</div>
          <el-progress :percentage="item.value" :stroke-width="9" :width="106" color="#24ccb8" type="circle">
          </el-progress>
        </div>
      </div>
      <div class="page_fixth_bottom">
        <div key="myCharts3" ref="page_bottom" style="width: 100%;height: 100%"/>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Index1',
  data() {
    return {
      headFirst: {
        id: 1,
        name: '总销售额',
        icon: require('@/assets/indexImage/icon_invites_sent.png'),
        totalCount: '126,560',
        firstText: '日均销售额',
        firstNum: '￥12,423',
        bottomText1: '周同比12%',
        bottomText2: '日环比12%',
      },
      headSecond: {
        id: 2,
        name: '访问量',
        icon: require('@/assets/indexImage/icon_click_rate.png'),
        totalCount: '8,846',
        firstNum: '1,423',
      },
      headThird: {
        id: 3,
        name: '支付笔数',
        icon: require('@/assets/indexImage/icon_reviews.png'),
        totalCount: '6,560',
        firstNum: '60%',
      },
      headFour: {
        id: 4,
        name: '线上购物转化比',
        icon: require('@/assets/indexImage/icon_response_rate.png'),
        totalCount: '78%',
        firstText: '周同比12%',
        secondText: '日环比24%',
        bottomChartValue: '70%'
      },
      common_icon: require('@/assets/indexImage/groups.png'),
      secondTab: [
        {
          name: '销售额',
          id: 1,
        },
        {
          name: '访问量',
          id: 2,
        },
      ],
      nowSecondShow: 1,
      secondTabList: [
        {
          name: '今日',
          id: 1
        },
        {
          name: '本周',
          id: 2
        },
        {
          name: '本月',
          id: 3
        },
        {
          name: '全年',
          id: 4
        },
      ],
      nowSecondCenterShow: 1,
      secondRightTime: '',
      // 第三列
      thirdRightList: [
        {
          id: '1',
          name: '公转路一号店',
          value: '323,234'
        },
        {
          id: '2',
          name: '公转路一号店',
          value: '323,234'
        },
        {
          id: '3',
          name: '公转路一号店',
          value: '323,234'
        },
        {
          id: '4',
          name: '公转路一号店',
          value: '323,234'
        },
        {
          id: '5',
          name: '公转路一号店',
          value: '323,234'
        },
      ],
      // 第四列
      fourCenterList: [
        {
          name: '搜索用户数',
          value: '22,560',
          isIncrease: false,
          increaseData: '40%'
        },
        {
          name: '人均搜索次数',
          value: '2.7',
          isIncrease: true,
          increaseData: '40%'
        },
      ],
      fourTab: [
        {
          name: '全部渠道',
          id: 1,
        },
        {
          name: '线上',
          id: 2,
        },
        {
          name: '门店',
          id: 3,
        },
      ],
      activeFourRightTab: 1,
      rightBottomRightList: [
        {
          name: '母婴产品',
          color: 'rgba(77, 123, 243, 1)',
          value: '38.75%'
        },
        {
          name: '母婴产品',
          color: 'rgba(77, 123, 243, 1)',
          value: '38.75%'
        },
        {
          name: '母婴产品',
          color: 'rgba(251, 73, 124, 1)',
          value: '38.75%'
        },
        {
          name: '母婴产品',
          color: 'rgba(255, 199, 96, 1)',
          value: '38.75%'
        },
        {
          name: '母婴产品',
          color: 'rgba(111, 230, 33, 1)',
          value: '38.75%'
        },
        {
          name: '母婴产品',
          color: 'rgba(79, 204, 255, 1)',
          value: '38.75%'
        },
      ],
      fourLeftBottomTabs: [
        {
          name: '新款连衣裙',
          value: '8,910',
          percent: '90%'
        },
        {
          name: '四件套',
          value: '34,455',
          percent: '80%'
        },
        {
          name: '男士手包',
          value: '23,809',
          percent: '70%'
        },
        {
          name: '耳机',
          value: '23,,809',
          percent: '60%'
        },
      ],
      // 第五列
      fixthTopData: [
        {
          name: '门店一',
          value: 25,
        },
        {
          name: '门店二',
          value: 27,
        },
        {
          name: '门店三',
          value: 25,
        },
        {
          name: '门店四',
          value: 25,
        },
        {
          name: '门店五',
          value: 35,
        },
        {
          name: '门店六',
          value: 25,
        },
      ],
      bottomXData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      BottomYData: [
        {
          name: '总费用',
          type: 'line',
          data: [7, 11, 22, 16, 33, 12, 28, 7, 11, 22, 16, 33],
          showSymbol: false,
          areaStyle: {
            opacity: 0.1,
            color: '#24ccb8'
          }
        }
      ],
      thirdChartX: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      thirdCharY: [
        {
          name: '总费用',
          type: 'bar',
          data: [7, 11, 22, 16, 33, 12, 28, 7, 11, 22, 16, 33],
          barWidth: '10%', // 设置柱状图的宽度为容器宽度的50%
          itemStyle: {
            color: '#6236ff' // 设置柱状图的颜色为红色
          }
        }
      ],
      headLeftXData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      headLeftYData: [
        {
          name: '总费用',
          type: 'line',
          data: [7, 11, 22, 16, 33, 12, 28, 7, 11, 22, 16, 33],
          showSymbol: false,
          smooth: true,
          areaStyle: {
            // opacity: 0.4,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(182, 32, 224, 0.40)'
              },
              {
                offset: 1,
                color: 'rgba(254, 251, 255, 0)'
              }
            ])
          }
        }
      ],
      headChartX: ['1', '2', '3', '4', '5', '6', '7'],
      headCharY: [
        {
          name: '总费用',
          type: 'bar',
          data: [27, 31, 22, 46, 33, 22, 28],
          barWidth: '15%', // 设置柱状图的宽度为容器宽度的50%
          itemStyle: {
            color: '#4ab8ff' // 设置柱状图的颜色为红色
          }
        }
      ],
      thirdRightChart: [
        {value: 40, name: 'rose 1'},
        {value: 38, name: 'rose 2'},
        {value: 32, name: 'rose 3'},
        {value: 30, name: 'rose 4'},
        {value: 28, name: 'rose 5'},
        {value: 26, name: 'rose 6'},
      ]
    };
  },
  created() {

  },
  mounted() {
    console.log(document.querySelectorAll('.el-progress__text').length, '2211')
    const bottomData = document.querySelectorAll('.el-progress__text')
    for (let i = 0; i < bottomData.length; i++) {
      bottomData[i].innerHTML = `<div class="progress_box">
                    <div style="font-size: 12px;
                  font-weight: 400;
                  line-height: 17.38px;
                  color: rgba(155, 162, 171, 1);">转化率</div>
                    <div style="font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                  color: rgba(40, 45, 48, 1);
                  text-align: center;">${this.fixthTopData[i].value}%</div>
                </div>`
    }

    this.initBottomChart()
    this.initThirdLeftChart()
    this.initHeadLeftChart()
    this.initHeadRightChart()
    this.initThirdBottom()
  },
  methods: {
    changeSecondLeftTab(val) {
      this.nowSecondShow = val.id
    },
    changeSecondCenterTab(val) {
      this.nowSecondCenterShow = val.id
    },
    secondRightTimeChange(val) {
      console.log(val)
    },
    fourRightTabsChange(val) {
      this.activeFourRightTab = val.id
    },
    initBottomChart() {
      const myEcharts = echarts.init(this.$refs.page_bottom);
      myEcharts.setOption({
        color: ['#24ccb8'],
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.bottomXData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              }
            },
            boundaryGap: false,
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            // show: false,
            axisLabel: {

              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              },
              show: false
            }
          }
        ],
        series: this.BottomYData
      }, true)
    },
    initThirdLeftChart() {
      const myEcharts = echarts.init(this.$refs.third_left_chart);
      myEcharts.setOption({
        color: ['#24ccb8'],
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '0%',
          right: '5%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.thirdChartX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              }
            },
            boundaryGap: false,
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            // show: false,
            axisLabel: {

              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              },
            }
          }
        ],
        series: this.thirdCharY
      }, true)
    },
    initHeadLeftChart() {
      const myEcharts = echarts.init(this.$refs.head_left_chart);
      myEcharts.setOption({
        color: ['#b620e0'],
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '0%',
          right: '5%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.headLeftXData,
            axisTick: {
              alignWithLabel: true
            },
            show: false,
            axisLabel: {
              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              },
              show: false
            },
            boundaryGap: false,
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            show: false,
            axisLabel: {

              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              },
              show: false
            }
          }
        ],
        series: this.headLeftYData
      }, true)
    },
    initHeadRightChart() {
      const myEcharts = echarts.init(this.$refs.head_right_chart);
      myEcharts.setOption({
        color: ['#24ccb8'],
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '0%',
          right: '5%',
          bottom: '0%',
          top: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.headChartX,
            axisTick: {
              alignWithLabel: true
            },
            show: false,
            axisLabel: {
              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              }
            },
            boundaryGap: false,
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            show: false,
            axisLabel: {

              textStyle: {
                color: '#7a7e87',
                fontSize: '16px'
              },
            }
          }
        ],
        series: this.headCharY
      }, true)
    },
    initThirdBottom() {
      const myEcharts = echarts.init(this.$refs.third_bottom);
      myEcharts.setOption({
        color: ['#ffc760', '#fb497c', '#204c9a', '#4d7bf3', '#4fccff', '#6fe621'],
        toolbox: {
          show: false,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        series: [
          {
            type: 'pie',
            radius: [40, 140],
            center: ['40%', '60%'],
            selectedMode: 'single',
            roseType: 'area',
            data: this.thirdRightChart,
            labelLine: {
              show: false // 确保这里是true
            },
            label: {
              show: false  // 设置不显示数据
            }
          }
        ]
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.page_main {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #f5f6fa;
  overflow: auto;
  padding: 40px;
  //   transform: scale(0.8);
}

.page_head {
  height: 266.6px;
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .head_single_box {
    width: 345px;
    height: 266.6px;
    box-sizing: border-box;
    background: #fff;
    padding: 0 30px;
    padding-top: 32px;

    .single_box_head {
      width: 100%;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .single_box_name {
        font-size: 18.67px;
        color: 74798C;
        line-height: 26.67px;
        letter-spacing: 1.56px;
      }
    }

    .single_box_second {
      height: 50px;
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 15px;

      .single_box_num1 {
        font-size: 42.67px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 42.67px;
        color: rgba(40, 45, 48, 1);
        margin-left: 15px;
      }
    }

    .single_box_third {
      height: 30px;
      font-size: 18.67px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 30px;
      color: rgba(155, 162, 171, 1);
    }

    .single_box_third_box {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      height: 30px;
      align-items: center;
      justify-content: space-between;
      padding-right: 10px;
      height: 30px;

      .third_box_text {
        font-size: 18.67px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 30px;
        color: rgba(155, 162, 171, 1);
      }
    }

    .single_box_bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;

      .box_bottom_text {
        font-size: 18.67px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 30px;
        height: 30px;
        color: rgba(116, 121, 140, 1);
      }

      .box_bottom_right {
        padding-right: 11px;
      }
    }

    .single_box_bottom_chart {
      width: 100%;
      height: 9.33px;
      background: #f6f6f8;
      margin-top: 45.3px;

      .four_bottom_chart {
        height: 100%;
        width: 0%;
        background: #4ae8dd;
      }
    }

    .head_second_chart {
      width: 100%;
      height: 72px;
    }
  }
}

.page_second {
  width: 100%;
  height: 93.33px;
  opacity: 1;
  border-radius: 6.67px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 13.3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 40px;

  .page_second_left {
    width: 258.6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .no_showTab {
      width: 56px;
      height: 48px;
      line-height: 48px;
      font-size: 18.67px;
      font-weight: 400;
      color: #9ba2ab;
      cursor: pointer;
      border-top: 2.67px solid transparent;
    }

    .show_tab {
      border-top: 2.67px solid #0054fe;
      color: #0054fe;
    }

  }

  .page_second_center {
    width: 538.6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .no_center_showTab {
      width: 58.67px;
      height: 37.33px;
      border-radius: 4px;
      background: #F2F2F2;
      text-align: center;
      line-height: 37.33px;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(116, 121, 140, 1);
      cursor: pointer;
    }

    .center_show_tab {
      background: #0054FE;
      color: #fff;
    }
  }
}

.page_third {
  width: 100%;
  height: 453.3px;
  background: #fff;
  padding: 0px 40px;
  padding-top: 32px;
  margin-bottom: 40px;
  display: flex;

  .page_third_left {
    flex: 1;

    .page_third_left_title {
      font-size: 18.67px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 32px;
      color: rgba(32, 37, 58, 1);
      margin-bottom: 40px;
    }

    .page_third_left_chart {
      width: 100%;
      height: 309px;
    }
  }

  .page_third_right {
    width: 306.6px;
    height: 100%;
    margin-left: 58px;

    .third_right_head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 33.3px;
      height: 32px;

      .third_right_head_left {
        font-size: 18.67px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 32px;
        color: rgba(32, 37, 58, 1);
      }

      .third_right_head_right {
        cursor: pointer;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 32px;
        color: rgba(4, 134, 254, 1);
      }
    }

    .third_right_bottom {
      width: 100%;

      .single_third_data {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .single_third_data_left {
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 64px;
          color: rgba(51, 51, 51, 1);
        }

        .single_third_data_right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          width: 276px;
          height: 50.67px;
          opacity: 1;
          border-radius: 6.67px;
          background: rgba(248, 249, 251, 1);
          padding: 0 20px;

          .single_right_name {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 50.67px;
            color: rgba(116, 121, 140, 1);
          }

          .single_right_value {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 50.67px;
            color: #999999;
          }
        }
      }
    }
  }
}

.page_four {
  width: 100%;
  height: 506px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;

  .page_four_title {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(32, 37, 58, 1);
    margin-bottom: 26.7px;
  }

  .page_four_left {
    height: 506px;
    width: 729px;
    background: #fff;
    padding: 0 40px;
    padding-top: 32px;
    box-sizing: border-box;

    .page_four_center {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100px;
      margin-bottom: 26.6px;

      .single_four_center {
        width: 306.67px;
        height: 100px;
        opacity: 1;
        border-radius: 6.67px;
        background: rgba(248, 249, 251, 1);
        box-sizing: border-box;
        padding: 0 26.7px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-bottom: 26.7px;

        .four_center_left {

        }

        .four_center_left_title {
          font-size: 18.67px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 27.03px;
          color: rgba(145, 145, 175, 1);
          margin-bottom: 8px;
        }

        .four_center_left_value {
          font-size: 24px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 28.12px;
          color: rgba(33, 33, 69, 1);
        }

        .four_center_right {
          display: flex;
          align-items: flex-start;

          .four_center_right_date {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 24px;
            color: rgba(145, 145, 175, 1);
            margin-right: 3px;
          }

          .four_center_right_increase {
            font-size: 18.67px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #e05567;
          }

          .no_increase {
            color: rgba(15, 178, 105, 1);
          }
        }
      }
    }

    .page_four_bottom {
      width: 100%;
      height: 242px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .single_four_bottom {
        width: 100%;

        .single_four_bottom_head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;

          .single_four_bottom_name {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 26.67px;
            color: rgba(116, 121, 140, 1);
          }

          .single_four_bottom_value {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 26.67px;
            color: #9ba2ab;
          }
        }

        .single_four_bottom_progress {
          width: 100%;
          height: 9.33px;
          background: #f6f6f8;

          .single_four_bottom_progress_data {
            width: 0px;
            height: 9.33px;
            background: #b620e0;
          }
        }
      }
    ;
    }
  }

  .page_four_right {
    width: 729.3px;
    height: 506px;
    padding: 0 40px;
    padding-top: 32px;
    box-sizing: border-box;
    background: #fff;

    .page_four_right_head {
      margin-bottom: 58.67px;
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .four_right_tab {
        display: flex;
        align-items: center;

        .single_four_tab {
          padding: 0 13.3px;
          height: 37.33px;
          line-height: 37.33px;
          border-radius: 4px;
          background: rgba(242, 242, 242, 1);
          margin-left: 10.6px;
          cursor: pointer;
        }

        .first_four_tab {
          background: #0054fe;
          color: #fff;
        }
      }

      .page_four_title {
        margin-bottom: 0px;
      }
    }

    .page_four_right_bottom {
      height: 344px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .four_right_bottom_left {
        height: 100%;
        flex: 1;
      }

      .four_right_bottom_right {
        width: 276px;
        height: 344px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .single_four_bottom_right {
          width: 276px;
          height: 46.67px;
          opacity: 1;
          border-radius: 6.67px;
          background: rgba(248, 249, 251, 1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 20px;

          .single_four_bottom_right_value {
            font-size: 16px;
            font-weight: 400;
            color: rgba(155, 162, 171, 1);
          }

          .single_four_bottom_right_left {
            display: flex;
            align-items: center;

            .single_four_bottom_right_point {
              width: 9.33px;
              height: 9.33px;
              border-radius: 50%;
              margin-right: 13.3px;
            }

            .single_four_bottom_right_name {
              font-size: 16px;
              font-weight: 400;
              color: rgba(116, 121, 140, 1);
            }
          }
        }
      }
    }
  }

}

.page_fixth {
  width: 100%;
  height: 620px;
  background: #fff;
  box-sizing: border-box;
  padding: 0 40px;
  padding-top: 34.6px;

  .page_fixth_head {
    height: 216px;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .single_bottom_data {
      width: 106.6px;
      height: 158.67px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .single_bottom_title {
        width: 100%;
        text-align: center;
        font-size: 18.67px;
        font-weight: 400;
        letter-spacing: -0.14px;
        line-height: 32px;
        color: rgba(122, 126, 135, 1);
      }

      .progress_box {
        .progress_box_top {
          font-size: 12px;
          font-weight: 400;
          line-height: 17.38px;
          color: rgba(155, 162, 171, 1);
          margin-bottom: 10px;
        }

        .progress_box_bottom {
          font-size: 14px;
          font-weight: 400;
          line-height: 24px;
          color: rgba(40, 45, 48, 1);
          text-align: center;
        }
      }
    }
  }

  .page_fixth_bottom {
    width: 100%;
    height: 344px;
  }
}
</style>
