lanan-system-vue/src/views/inspection/screen/jcBigScreen.vue

<template>
  <div class="cont">
    <div class="top_">
<!--      <div>车辆检测数据大屏</div>-->

    </div>
    <!--    -->
    <div class="content_">
      <div class="c_left">
        <div class="six_box">
          <div class="s_title">
            成交金额（已收款）
          </div>
          <div class="echaets_box">
            <div id="khly" style="width: 400px; height: 267px;"></div>
          </div>
        </div>
        <div class="six_box">
          <div class="s_title">
            已收款金额(按车型)
          </div>
          <div class="dis-t">

            <div class="lan-you">
              <div class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index"
                   @click="gbindex(index,item.unit)"> {{ item.text }}
              </div>
            </div>
          </div>
          <div class="echaets_box">
            <div id="yskje" style="width: 400px; height: 267px;"></div>
          </div>
        </div>
        <div class="six_box">
          <div class="s_title">
            数量统计(按车型)
          </div>
          <div class="dis-t">

            <div class="lan-you">
              <div class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index"
                   @click="gbindex1(index,item.unit)"> {{ item.text }}
              </div>
            </div>
          </div>
          <div class="echaets_box">
            <div id="sltj" style="width: 400px; height: 267px;"></div>
          </div>
        </div>
      </div>
      <div class="c_cont">
        <div class="tab_">
          <!--          <div @click="countOrAmount()" class="tab_buttom tab_acvit">数量</div>-->
          <!--          <div @click="countOrAmount()" class="tab_buttom">金额</div>-->
        </div>


        <div class="tab_bt">
          <el-date-picker
            v-model="value1"
            type="daterange"
            @change="handleChange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="five_box">
          <div class="three_box">
            <div class="three_title">订单数量</div>
            <div class="three_size">{{ data2.allNum || 0 }}</div>
          </div>
          <div class="three_box">
            <div class="three_title">完成数量</div>
            <div class="three_size">{{ data2.ywcNum || 0 }}</div>
          </div>
          <div class="three_box">
            <div class="three_title">检测中</div>
            <div class="three_size">{{ data2.jxzNum || 0 }}</div>
          </div>

        </div>
        <div class="fv_box">
          <div class="b-b">
              <div>公示价格</div>
              <div class="b_box">4090</div>
          </div>
          <div class="b-b">
            <div>应收</div>
            <div class="b_box">4090</div>
          </div>
          <div class="b-b">
            <div>已收</div>
            <div class="b_box">4090</div>
          </div>
          <div class="b-b">
            <div>待收</div>
            <div class="b_box">4090</div>
          </div>

        </div>
        <div class="co_title">
          客户来源统计
        </div>
        <div class="list_long">
          <div class="long_title">
            <div class="l_one">客户来源</div>
            <div class="l_two">数量</div>
            <div class="l_three">公示金额</div>
            <!--            <div class="l_four">创建时间</div>-->
          </div>
          <div class="ot_vox">
            <div class="long_box" v-for="(item,index) in data3" :key="index">
              <div class="l_one">{{ item.remark || '' }}</div>
              <div class="l_two">{{ item.theNum || '' }}</div>
              <div class="l_three">{{ item.theAmount || '' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="c_right">
        <div class="six_box">
          <div class="s_title">
            检测数量
          </div>
          <div class="echaets_box">
            <div id="jcsl" style="width: 400px; height: 267px;"></div>
          </div>
        </div>
        <div class="six_box">
          <div class="s_title">
            检测合格率
          </div>
          <div class="dis-t">

            <div class="lan-you">
              <div class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index"
                   @click="gbindex2(index,item.unit)"> {{ item.text }}
              </div>
            </div>
          </div>
          <div class="echaets_box" style="padding-top: 15px" >
<!--            gdt-->
            <div class="jd_box">
              <div class="jd_bt">
                <div>重型货车</div>
                <div>{{Progress1}}%</div>
              </div>
              <div class="jd_k">
                <div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
              </div>
            </div>
            <div class="jd_box">
              <div class="jd_bt">
                <div>3.5以上 轻型货车</div>
                <div>{{Progress1}}%</div>
              </div>
              <div class="jd_k">
                <div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
              </div>
            </div>
            <div class="jd_box">
              <div class="jd_bt">
                <div>3.5以下 轻型货车</div>
                <div>{{Progress1}}%</div>
              </div>
              <div class="jd_k">
                <div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
              </div>
            </div>

          </div>
        </div>
        <div class="six_box">
          <div class="s_title">
            检测商品统计
          </div>
          <div class="echaets_box" style="display: flex;align-items: center;justify-content: space-around">
            <div id="jcsptj" style="width: 170px; height: 170px;"></div>
            <div>
              <div class="hang_box">
                <div>
                  <div class="jt_"></div>
                  <div class="jt_size" style="color: #0174F6">双燃料机油</div>
                </div>
                <div>278</div>
              </div>
              <div class="hang_box" >
                <div>
                  <div class="jt_" style="background: #40CC97"></div>
                  <div class="jt_size" style="color: #40CC97">双燃料机油</div>
                </div>

                <div>278</div>
              </div>
              <div class="hang_box">
                <div>
                  <div class="jt_" style="background: #FFB323"></div>
                  <div class="jt_size" style="color: #FFB323">双燃料机油</div>
                </div>
                <div>278</div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen';
import {
  chartInfoNum,
  chartLineInspectionAmount,
  getfive1,
  getfive2,
  getfive3, hotGoodsList
} from "@/views/inspection/screen/api/jcBigScreen";

export default {
  name: 'Index',
  components: {},
  data() {
    const formatDate = (date) => {
      return date.toISOString().split('T')[0];
    };
    return {
      Amount: [],
      Progress1:60,
      unit: 'day',
      unit1: 'day',
      unit2: 'day',
      data2: '',
      data1: '',
      data3: '',
      chartData1: {},
      params: {
        unit: this.unit,
      },
      // value1: [new Date(), new Date()],
      value1: [formatDate(new Date()), formatDate(new Date())], // 格式化日期
      qhindex: 0,
      qhindex1: 0,
      qhindex2: 0,
      zilist: [
        {text: '日', unit: 'day'},
        {text: '周', unit: 'week'},
        {text: '月', unit: 'month'},
        {text: '年', unit: 'year'},

      ],
    }
  },
  created() {


  },
  mounted() {
    this.customerSource()
    this.getServerData1()
    this.chartInfoNum()
    this.chartLineInspectionNum()
    this.chartInfoRatio()
    this.getfive2()
    this.getfive1()
    this.getfive3()
    this.getProduct()
  },
  methods: {
    handleChange() {
      console.log('选择的时间', this.value1)
      this.getfive2()
      this.getfive1()
    },
    gbindex(index, unit) {
      this.qhindex = index
      this.unit = unit
      this.getServerData1()
    },
    gbindex1(index, unit) {
      console.log('22', unit);
      this.qhindex1 = index
      this.unit1 = unit
      this.chartInfoNum()
    },
    gbindex2(index, unit) {
      console.log('33');
      this.qhindex2 = index
      this.unit2 = unit
      this.chartInfoRatio()
    },

    /**
     * 已收款金额
     * @returns {Promise<void>}
     */
    async getServerData1() {

      var chartDom = document.getElementById('yskje');
      var myChart = echarts.init(chartDom);

      let option = {
        tooltip: {
          trigger: 'axis'
        },

        xAxis: {
          type: 'category',
          data: ['小型汽车', '中型汽车', '大型汽车'],
          //更改坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#fff'
            },
            onZero:false
          },
          // x轴的字体样式
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 14,      //更改坐标轴文字大小
              fontFamily: 'MicrosoftYaHei'
            },
            formatter:function(params) {
              return params.split(" ").join("\n")
//                console.log(' formatter',params);
            },
          },


        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 16,      //更改坐标轴文字大小
              fontFamily: 'MicrosoftYaHei'
            }
          },
          //更改坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#657CA8'
            }
          },
          //网格线
          splitLine: {
            show: true,
            lineStyle: {
              color: '#294a88',
              width: 2,
              opacity: 0.2
            }
          },
        },
        series: [{
          data: [6,6,6],//this.PLAN_COUNT, this.ACTUAL_COUNT,this.GAP
          type: 'bar',
          barWidth:40,
          itemStyle: {
            normal: {
              color: function (params) {
                // build a color map as your need.
                var colorList = [
                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#4DA9FF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#1D92FF' // 100% 处的颜色
                  }], false),
                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#FF5C00' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FF9F0A' // 100% 处的颜色
                  }], false),
                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#D7FF39' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#32D74B' // 100% 处的颜色
                  }], false)
                ];
                return colorList[params.dataIndex]
              },
              //以下为是否显示，显示位置和显示格式的设置了
              label: {
                show: true,
                position: 'top',
                formatter: '{c}',
                fontSize: 20,
                color:'#B8CBF7'
              }
            }
          },
        }]
      }
      // 绘制图表
      option && myChart.setOption(option);
    },
    /**
     * 检测商品统计
     * @returns {Promise<void>}
     */
    async getProduct() {
        var chartDom = document.getElementById('jcsptj');

      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ['#0174F6', '#40CC97', '#FFB323'],
        title: {
          text: '33%',
          left: 'center',
          top: '40%',
          textStyle: {
            fontSize: 30,
            color: '#017fff',
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            name: '',
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '单燃料机油' },
              { value: 735, name: '双燃料机油' },
              { value: 580, name: '三燃料机油' }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    /**
     * 数量统计
     * @returns {Promise<void>}
     */
    async chartInfoNum() {
      var chartDom = document.getElementById('sltj');
      var myChart = echarts.init(chartDom);

      let option = {
        tooltip: {
          trigger: 'axis'
        },

        xAxis: {
          type: 'category',
          data: ['小型汽车', '中型汽车', '大型汽车'],
          //更改坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#fff'
            },
            onZero:false
          },
          // x轴的字体样式
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 14,      //更改坐标轴文字大小
              fontFamily: 'MicrosoftYaHei'
            },
            formatter:function(params) {
              return params.split(" ").join("\n")
//                console.log(' formatter',params);
            },
          },


        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 16,      //更改坐标轴文字大小
              fontFamily: 'MicrosoftYaHei'
            }
          },
          //更改坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#657CA8'
            }
          },
          //网格线
          splitLine: {
            show: true,
            lineStyle: {
              color: '#294a88',
              width: 2,
              opacity: 0.2
            }
          },
        },
        series: [{
          data: [6,6,6],//this.PLAN_COUNT, this.ACTUAL_COUNT,this.GAP
          type: 'bar',
          barWidth:40,
          itemStyle: {
            normal: {
              color: function (params) {
                // build a color map as your need.
                var colorList = [
                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#4DA9FF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#1D92FF' // 100% 处的颜色
                  }], false),
                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#FF5C00' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FF9F0A' // 100% 处的颜色
                  }], false),
                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#D7FF39' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#32D74B' // 100% 处的颜色
                  }], false)
                ];
                return colorList[params.dataIndex]
              },
              //以下为是否显示，显示位置和显示格式的设置了
              label: {
                show: true,
                position: 'top',
                formatter: '{c}',
                fontSize: 20,
                color:'#B8CBF7'
              }
            }
          },
        }]
      }
      // 绘制图表
      option && myChart.setOption(option);
    },
    /**
     * 检测合格率
     * @returns {Promise<void>}
     */
    async chartInfoRatio() {
      const params = {
        unit: this.unit2,
      }
      let res = await jcBigScreen.chartInfoRatio(params)
      console.log('检测合格率', res)
      res.data.series.forEach(item => {
        item.type = 'bar'
      })
      var chartDom = document.getElementById('jchgl');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: res.data.categories
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 16,      //更改坐标轴文字大小
              fontFamily: 'MicrosoftYaHei'
            }
          },
        },
        series: res.data.series
      };
      option && myChart.setOption(option);
    },
    /**
     * 检测数量
     * @returns {Promise<void>}
     */
    async chartLineInspectionNum() {
      var chartDom = document.getElementById('jcsl');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ['#0663f0', '#FFD78B'],
        legend: {
          top: '5%',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['01', '02', '03', '04', '05', '06', '07'],
          axisLine: {
            lineStyle: {
              color: '#fff'
            },
            onZero:false
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: 12,

            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 12,      //更改坐标轴文字大小

            }
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            symbolSize: 0,
            smooth: true,
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#0663f0' },
                { offset: 0, color: '#0663f0' }
              ])
            }
          },
          {
            data: [220, 182, 191, 234, 290, 330, 310],
            type: 'line',
            symbolSize: 0,
            smooth: true,
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#FFD78B' },
                { offset: 0, color: '#FFD78B' }
              ])
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

    /**
     * 客户来源分析饼图
     */
    async customerSource() {
      var chartDom = document.getElementById('khly');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['01', '02', '03', '04', '05', '06', '07'],
          axisLine: {
            lineStyle: {
              color: '#fff'
            },
            onZero:false
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: 16,

            }
          },
        },
        yAxis: {
          type: 'value',
          lineStyle: {
            color: '#fff'
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: 16,

            }
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',

            symbolSize: 10,
            lineStyle: {
              color: '#009EDA',
              width: 2
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: '#009EDA',
              color: '#009EDA'
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    /**
     * 订单数量
     */
    async getfive2() {
      let data2 = {
        startTime: this.value1[0],
        endTime: this.value1[1]
      }
      console.log('订单数量等参数', data2)
      const res = await getfive2(data2)
      console.log('订单数量等', res.data)
      this.data2 = res.data
    },
    /**
     * 营业额统计
     * @returns {Promise<void>}
     */
    async getfive1() {
      let data1 = {
        startTime: this.value1[0],
        endTime: this.value1[1]
      }
      const res = await getfive1(data1)
      console.log('营业额统计', res.data)
      this.data1 = res.data
    },
    /**
     * 客户来源
     * @returns {Promise<void>}
     */
    async getfive3() {
      const res = await getfive3()
      console.log('客户来源', res.data)
      this.data3 = res.data
    }
  }

}
</script>

<style lang="scss" scoped>
.cont {
  background: #020F32;
  background: url("./imgs/bcke.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
}

.top_ {
  width: 100%;
  height: 86px;
  background: url("./imgs/top.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #FFFFFF;
  font-weight: bold;
  margin-bottom: 15px;
}

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

.dis-t {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}

.lan-you {
  display: flex;
  align-items: center;
}

.c_left {
  width: 25%;
}

.c_cont {
  width: 50%;
}

.tab_ {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 18px;
  color: #FFFFFF;
  margin: 15px auto;
}

.yb_title {
  text-align: center;
  font-size: 18px;
  color: #FFFFFF;
  margin: 15px auto;
}

.tab_bt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  //border-bottom: 4px solid #0174F6;
  box-sizing: border-box;

}

.tab_buttom {
  width: 120px;
  height: 32px;

  border: 1px solid #0174F6;
  display: flex;
  align-items: center;
  justify-content: center;
}

yb_title {
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
  width: 100%;
}

.numlist {
  display: flex;
  align-items: center;
  justify-content: center;
}

.num_box {
  width: 38px;
  height: 50px;
  border-radius: 0px 0px 0px 0px;
  font-weight: 600;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./imgs/numbcak.png") no-repeat;
  background-size: 100% 100%;
  color: #FFFFFF;
  margin: 0px 10px;
}

.yb_ {
  width: 50%;
}

.tab_acvit {
  background: #0174F6 !important;
}

.five_box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 30px auto;
}
.fv_box{
  width: 100%;
  height: 142px;
  background: url("./imgs/top-bj.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  align-items: center;
}
.three_box{
  width: 190px;
  height: 80px;
  background: url("./imgs/kuang.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
  box-sizing: border-box;
  padding-top: 15px;
}
.three_title{
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
}
.three_size{
  font-weight: 500;
  font-size: 30px;
  color: #FFFFFF;
}

.f_size {
  font-size: 14px;
  color: #FFFFFF;
}

.f_num {
  font-weight: bold;
  font-size: 24px;
  color: #FFFFFF;
}

.img_left {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.f_box {
  display: flex;
  align-items: center;
}

.co_title {
  width: 100%;
  height: 32px;
  background: url("./imgs/c-title.png") no-repeat;
  background-size: 100% 100%;
  font-weight: 500;
  font-size: 18px;
  color: #FFFFFF;
  box-sizing: border-box;
  padding-left: 10px;
  padding-top: 5px;
}
.b-b{
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
}
.b_box{
  text-align: center;
  font-weight: 500;
  font-size: 30px;
  color: #FFFFFF;
  width: 105px;
  height: 80px;
  background: url("./imgs/box.png") no-repeat;
  background-size: 100% 100%;
}

.s_title {
  width: 90%;
  height: 32px;
  background: url("./imgs/title.png") no-repeat;
  background-size: 100% 100%;
  font-weight: 500;
  font-size: 18px;
  color: #FFFFFF;
  box-sizing: border-box;
  padding-left: 10px;
  padding-top: 5px;
  margin: 0px auto;
}

.echaets_box {
  width: 90%;
  height: 267px;
  margin: 0px auto;
  border-bottom: 1px solid #0174F6;
  background: rgba(82,125,243,0.1);
}

.list_long {
  width: 100%;
  height: 563px;

}

.l_one {
  width: 30%;
  text-align: left;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 35px;
}

.l_two {
  width: 20%;
  text-align: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.l_three {
  width: 20%;
  text-align: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.l_four {
  width: 30%;
  text-align: right;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  box-sizing: border-box;
  padding-right: 35px;
}

.long_title {
  width: 100%;
  height: 58px;
  background: rgba(1, 116, 246, 0.1);
  background: url("./imgs/c_list.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}

.ot_vox {
  width: 100%;
  height: 500px;
  overflow: auto;
  scrollbar-width: none;
}

.long_box {
  width: 100%;
  height: 58px;
  background: rgba(1, 116, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}

.six_box {
  margin-bottom: 15px;
}

.c_right {
  width: 25%;
}
.jd_k{
  height: 20px;
  width: 100%;
  background: rgba(1,116,246,0.3);
  border: 1px solid rgba(1,116,246,0.3);
  box-shadow: inset 0px 1px 3px 0px rgba(116,129,163,0.5);
}
.jd_v{
  width: 70%;
  height: 100%;
  background: linear-gradient( 90deg, rgba(77,241,227,0) 0%, rgba(77,241,227,0.5) 50%, #4DF1E3 100%);
  border-right: 4px solid #fff;
}
.jd_bt{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  margin-bottom: 5px;
}
.jd_box{
  box-sizing: border-box;
  padding: 10px;
  margin: 10px auto;
}
.hang_box{
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  margin: 15px auto;
}
.jt_{
  width: 100px;
  height: 2px;
  border-radius: 2px 2px 2px 2px;
  background: #0174F6;
}
.jt_size{
  font-size: 14px;
}
</style>