<template>
	<div class="ScreenFX cm-layout">
		<div class="a_0">
		</div>
		<div class="b_0">
			<header>
				<div class="b1_a">
					<h1>庆华智慧水务平台</h1>
				</div>
			</header>
			<section class="b_2">
        <div class="boxmain">
          <div class="box_top">
              <div class="box_topOne">
                <div class="box_text">年度水量:<span>1125</span>m³</div>
                <div class="pictureOne">
                  <div class="title">区域用水占比</div>
                  <div ref="Wateruse" class="chartOne"></div>
                </div>
                <div class="pictureTwo">
                   <div class="title">水位实时状态</div>
                   <div class="content">
                     <div class="waterroom">
                        <div>水泵房</div>
                        <div class="content_border">
                          <div class="number">10.05m</div>
                          <div class="pictureCirle"></div>
                          <div class="value">水位值</div>
                        </div>
                        <div class="content_border">
                          <div class="numberone"><span>关</span></div>
                          <div class="pictureCirle"></div>
                          <div class="value">状态</div>
                        </div>
                     </div>
                    <div class="waterroom">
                       <div>水池水位</div>
                       <div class="content_border">
                         <div class="number">10.05m</div>
                         <div class="pictureCirle"></div>
                         <div class="value">水位值</div>
                       </div>
                       <div class="content_border">
                         <div class="numbertwo"><span>开</span></div>
                         <div class="pictureCirle"></div>
                         <div class="value">状态</div>
                       </div>
                    </div>
                   </div>
                </div>
              </div>
              <div class="box_topTwo">
                <div style="display: flex; justify-content: space-between;">
                  <div class="box_text">同比增长:<span>1125</span>m³</div>
                  <div class="box_text">当月水量:<span>1125</span>m³</div>
                </div>
                <div class="pictureThree">
                  <!-- 地图 -->
                </div>
              </div>
              <div class="box_topThree">
                <div class="box_text">同长增比:<span>1125</span>m³</div>
                <div class="pictureFour">
                   <div class="title">月度水位趋势图</div>
                   <div ref="waterLevel" class="chartTwo"></div>
                </div>
                <div class="pictureFive">
                   <div class="title">月度水量统计</div>
                   <div ref="monthWater" class="chartThree"></div>
                </div>
              </div>
          </div>
          <div class="box_bottom">
           <div class="pictureSix">
             <div class="title">日供水量分析</div>
             <div ref="dailyWater" class="chartFour"></div>
           </div>
           <div class="pictureSeven">
              <div class="title">日供水位分析</div>
              <el-carousel indicator-position="none">
                 <el-carousel-item v-for="i in 2" :key="item">
                    <div :ref="'waterSupply'+i" class="chartFive"></div>
                 </el-carousel-item>
               </el-carousel>
             <!-- <div ref="waterSupply" class="chartFive"></div> -->
           </div>
          </div>
        </div>
			</section>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import ElementUI from "element-ui";
Vue.use(ElementUI);
import * as echarts from "echarts";
export default {
	data() {
		return {
		}
	},
	mounted() {
    this.$nextTick(function(){
      setTimeout(()=>{
        this.echartsWateruse = echarts.init(this.$refs.Wateruse);
        this.echrtsOne();
        this.echartswaterLevel = echarts.init(this.$refs.waterLevel);
        this.echrtsTwo();
        this.echartsmonthWater = echarts.init(this.$refs.monthWater);
        this.echrtsThree();
        this.echartsdailyWater = echarts.init(this.$refs.dailyWater);
        this.echrtsFour();
        this.echartswaterSupply1 = echarts.init(this.$refs.waterSupply1[0]);
        this.echartswaterSupply2 = echarts.init(this.$refs.waterSupply2[0]);
        this.echrtsFive();
      },500)
    });
	},
	methods: {
    // 左侧图一
    echrtsOne(){
      this.echartsWateruse.setOption({
         color:['#0284cf','#01fbf1','#c695ff'],
         legend: {
           right: '3.5%',
           //这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none 圆形，矩形，圆形，三角形，菱形，别针，箭头，无
           icon: "circle",
             textStyle: {
                 fontSize: 12,
                 color: "#fff",
                 padding: [0, 0,-3, 0], // 修改文字和图标距离
            },
         },
          tooltip: {},
          xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                  color: '#d0efff',
                  width: 1, //这里是为了突出显示加上的
              },
            },

          },
          yAxis: {
            splitLine: {
              lineStyle: {
                // 设置背景横线
                color: '#081f52'
              }
            },
          },
          series: [
          {
            type: 'bar',
            name:'上午',
            barWidth : 15, //柱图宽度
            barGap:0.7,
            itemStyle: {
                normal: {
                    //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                   barBorderRadius:[10, 10, 0, 0]
                }
            },
            data:[43.3, 85.8, 93.7],

          },
          {
            type: 'bar',
            name:'中午',
            barWidth : 15, //柱图宽度
            itemStyle: {
                normal: {
                    //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                   barBorderRadius:[10, 10, 0, 0]
                }
            },
            data:[43.3, 85.8, 93.7],
          },
          {
            type: 'bar',
            name:'下午',
            barWidth : 15, //柱图宽度
            itemStyle: {
                normal: {
                    //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                   barBorderRadius:[10, 10, 0, 0]
                }
            },
            data:[43.3, 85.8, 93.7],

          },
        ]
     });
    },


  // 左侧图二
  echrtsThree(){
    var xData = ["1月", "2月", "3月", "4月"]
    var line = ["581", "870", "684","1568"];
    var attr ={
           'name':'月平均单价',
           'unit':'元/单'
    }
    var colors = []
    this.echartsmonthWater.setOption({
       tooltip: {
             textStyle: {
              fontSize: 20
            },
            trigger: '',
            padding: 1,
            formatter: function(param) {
              console.log(param,formatter,"____")
                  var resultTooltip =
                      "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
                      "<div style='text-align:center;'>" +  param.name + "</div>" +
                      "<div style='padding-top:5px;'>"+
                      "<span style=''> " +attr.name + ": </span>" +
                      "<span style=''>" + param.value + "</span><span>" + attr.unit + "</span>"+
                      "</div>" +
                      "</div>";
                  return resultTooltip
              }
          },
          grid: {
          left:"12%",
          right:'4%',
          top:'10%',
          bottom:"13%"
          },
          legend: {
              show: true,
              icon: 'circle',
              orient: 'horizontal',
              top: '90.5%',
              right: 'center',
              itemWidth: 16.5,
              itemHeight: 6,
              // itemGap: 30,
              textStyle: {
                  color: '#C9C8CD',
                  fontSize: 14
              }
          },
          xAxis: [{
              data: xData,
              axisLabel: {
                  show:true,
                  textStyle: {
                      color: '#97ABEA',
                      fontSize:12
                  },
                  margin: 10, //刻度标签与轴线之间的距离。
              },

              axisLine: {
                  show: true, //不显示x轴
                  lineStyle: {
                      type: "solid",
                      color: "#97ABEA"
                  }
              },
              axisTick: {
                  show: false //不显示刻度
              },
              boundaryGap: true,
              splitLine: {
                  show: false,
                  width: 0.08,
                  lineStyle: {
                      type: "solid",
                      color: "#97ABEA"
                  }
              }
          }],
          yAxis: [{
              show: true,
              splitLine: {
                  show: true,
                  lineStyle: {
                      color: '#97ABEA',
                      type: 'solid'
                  }
              },
              axisTick: {
                  show: false
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      type: "solid",
                      color: "#97ABEA"
                  }
              },
              axisLabel: {
                  textStyle: {
                      color: '#97ABEA'
                  },
              }
          }],
          series: [
              {//柱底圆片
                  name: "",
                  type: "pictorialBar",
                  symbolSize: [30, 11],//调整截面形状
                  symbolOffset: [0, 5],
                  z: 12,
                  itemStyle: {
                          'normal':{
                              color: function(params){
                                  var colorArr = [ '#174f9a','#B5C334',
                                  '#FCCE10','#E87C25','#27727B',
                                  '#FE8463','#9BCA63'];
                                  return colorArr[params.dataIndex]
                              },
                          }
                      },
                  data: line
              },

              //柱体
              {
                  name: '',
                  type: 'bar',
                  barWidth: 30,
                  barGap: '0%',
                  itemStyle: {
                        normal: {
                          color: function(params) {
                            // build a color map as your need.

                            var colorList = [

                              '#174f9a','#B5C334','#FCCE10','#E87C25','#27727B',

                               '#FE8463','#9BCA63','#FAD860'

                            ];

                            return colorList[params.dataIndex]

                        },
                          opacity: .7
                      }
                    },

                data: line
              },

              //柱顶圆片
              {
                  name: "",
                  type: "pictorialBar",
                  symbolSize: [30, 11],//调整截面形状
                  symbolOffset: [0, -5],
                  z: 12,
                  symbolPosition: "end",
                      "itemStyle": {
                          'normal':{
                              color: function(params){
                                  var colorArr = [ '#174f9a','#B5C334',
                                  '#FCCE10','#E87C25','#27727B',
                                  '#FE8463','#9BCA63'];
                                  return colorArr[params.dataIndex]
                              },
                          }
                      },
                  data: line
              }
          ]
   });
  },

  //右侧图一
    echrtsTwo(){
    		this.echartswaterLevel.setOption({
    			 tooltip: {
    				trigger: 'axis',
    				axisPointer: {
    				  type: 'cross',
    				  crossStyle: {
    					color: '#ffd635'
    				  }
    				}
    			  },
    			  legend: {
    				top:'1%',
            right:'3%',
    				data: ['总量', '同比增速'],
            textStyle:{
              color: '#89c7ec',
            }
    			  },
    			  xAxis: [
    				{
    				  type: 'category',
    				  data: ['1月', '2月', '3月', '4月', '5月', '6月', ],
               axisLine: {
                  show: false, //背景线条
                  lineStyle: {
                      color: '#CED5E1',
                  },
              },
              axisTick: { show: false },
              axisLabel: {
                show: true,
                color: '#d0efff',
                width: 1,
              },
    				  axisPointer: {
                type: 'shadow'
    				  }
    				}
    			  ],
    			  yAxis: [
    				{
    				  type: 'value',
    				  min: 0,
    				  max: 1400,
    				  interval: 350,
    				  axisLabel: {
                formatter: '{value}',
                show: true,
        　　　　 color: '#d0efff',
    				  },
              splitLine: {
                lineStyle: {
                  // 设置背景横线
                  color: '#081f52'
                }
              },
    				},
    			  ],
    			  series: [
    				{
    				  name: '总量',
    				  type: 'bar',
              itemStyle: {
                  normal: {
                      //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                     barBorderRadius:[10, 10, 0, 0]
                  }
              },
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#02dbe7' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#06a5dd' // 100% 处的颜色
                  }
                ]
              },
    				  // color: ['#09a7fb'],
    				  barWidth : 15, //柱图宽度
              showBackground: true,
              backgroundStyle: {
                  color: 'rgba(110, 193, 244, 0.2)',
              },
    				  tooltip: {
    					valueFormatter: function (value) {
    					  return value ;
    					}
    				  },
    				  data: [
    				        522.0, 311.9, 572.0, 782.2, 673.6, 576.7]
    				},

    				{
    				  name: '同比增速',
    				  type: 'line',
    				  color: ['#ffd635'],
              smooth:false, //这是设置虚线所需属性
              itemStyle : {  /*设置折线颜色*/
                normal : {
                  borderColor: '#4C8E9F',
                  lineStyle: {
                    width:2,
                    type:'dotted' //线条样式，虚线
                  }
                }
              },
    				  tooltip: {
    					valueFormatter: function (value) {
    					  return value ;
    					}
    				  },
    				  data: [222.0, 233.2, 310.3, 234.5, 256.3, 109.2, 205.3, 233.4, 235.0, 168.5, 129.0, 236.2]
    				}
    			  ]
    		})
    },
     // 下侧图一
    echrtsFour(){
    		this.echartsdailyWater.setOption({
          xAxis: {
           type: 'category',
          data: ['00时','01时','02时', '03时', '04时','05时','06时','07时',
          '08时','09时','10时','11时','12时','13时','14时','15时','16时',
          '17时','18时','19时','20时','21时','22时','23时'],
           axisLine: {
             lineStyle: {
               color: '#2063A8'
             }
           },
           axisTick: {
             show: false
           },
           axisLabel: {
             color: '#EFF2F9',
             fontSize: 14
           },
         },
         yAxis: {
           type: 'value',
           axisLine: {
             show: true,
             lineStyle: {
               color: '#2063A8'
             }
           },
           axisTick: {
             show: false
           },
           splitLine: {
             lineStyle: {
               // 设置背景横线
               color: '#081f52'
             }
           },
           axisLabel: {
             color: 'rgba(255,255,255,0.4)',
             fontSize: 12,
             fontFamily: 'DigifaceWide'
           },
         },
         series: [
          // 主体柱形
           {
             data: [40, 50, 70, 40, 30, 80, 20,30,40,5,21,32,35,51,33,44,21,32,43,21],
             type: 'bar',
             label: {
               show: true, //开启显示
               position: 'top', //在上方显示
               color: '#fff',
               fontSize: '12px',
               fontFamily: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei',
               fontWeight: '200',
               verticalAlign: 'bottom',
               lineHeight: '20'
             },
             barWidth: 20,
             // 柱形颜色渐变
             color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                 {
                   offset: 0,
                   color: '#0980a4' // 0% 处的颜色
                 },
                 {
                   offset: 0.5,
                   color: '#0980a4' // 50% 处的颜色
                 },
                 {
                   offset: 1,
                   color: '#0980a4' // 100% 处的颜色
                 }
               ],
               global: false // 缺省为 false
             },
             itemStyle: {
               normal: {
                 barBorderRadius: 10 // 让柱形上下变成圆角
               }
             }
           },

           // 顶部小椭圆
           {
             color: '#18f1ff',
             type: 'pictorialBar',
             symbol: 'circle',
             symbolSize: ['20', '14'],
             symbolPosition: 'end', // 图形边缘与柱子结束的地方内切。
             symbolOffset: [0, -2], // 椭圆水平偏移,垂直偏移. 因为不一定正好盖住柱形,所以可能要移动一点点
             data: [40, 50, 70, 40, 30, 80, 20,30,40,5,21,32,35,51,33,44,21,32,43,21], // 数据要跟主体柱形一致
             z: 3, // 数值越大,层级越高,可以盖住下面的图形
           }
          ]
    		})
    },
    //下侧图二
    echrtsFive(){
    		this.echartswaterSupply1.setOption({
          xAxis: {
           type: 'category',
          data: ['00时','01时','02时', '03时', '04时','05时','06时','07时',
          '08时','09时','10时','11时','12时','13时','14时','15时','16时',
          '17时','18时','19时','20时','21时','22时','23时'],
           axisLine: {
             lineStyle: {
               color: '#2063A8'
             }
           },
           axisTick: {
             show: false
           },
           axisLabel: {
             color: '#EFF2F9',
             fontSize: 14
           }
         },
         yAxis: {
           type: 'value',
           axisLine: {
             show: true,
             lineStyle: {
               color: '#2063A8'
             }
           },
           axisTick: {
             show: false
           },
           axisLabel: {
             color: 'rgba(255,255,255,0.4)',
             fontSize: 12,
             fontFamily: 'DigifaceWide'
           },
           splitLine: {
             lineStyle: {
               // 设置背景横线
               color: '#081f52'
             }
           },
         },
         series: [
          // 主体柱形
           {
             data: [40, 50, 70, 40, 30, 80, 20,30,40,5,21,32,35,51,33,44,21,32,43,21],
             type: 'bar',
             label: {
               show: true, //开启显示
               position: 'top', //在上方显示
               color: '#fff',
               fontSize: '12px',
               fontFamily: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei',
               fontWeight: '200',
               verticalAlign: 'bottom',
               lineHeight: '20'
             },
             barWidth: 20,
             // 柱形颜色渐变
             color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                 {
                   offset: 0,
                   color: '#078b6c' // 0% 处的颜色
                 },
                 {
                   offset: 0.5,
                   color: '#078b6c' // 50% 处的颜色
                 },
                 {
                   offset: 1,
                   color: '#078b6c' // 100% 处的颜色
                 }
               ],
               global: false // 缺省为 false
             },
             itemStyle: {
               normal: {
                 barBorderRadius: 10 // 让柱形上下变成圆角
               }
             }
           },
           // 顶部小椭圆
           {
             color: '#1aff80',
             type: 'pictorialBar',
             symbol: 'circle',
             symbolSize: ['20', '14'],
             symbolPosition: 'end', // 图形边缘与柱子结束的地方内切。
             symbolOffset: [0, -2], // 椭圆水平偏移,垂直偏移. 因为不一定正好盖住柱形,所以可能要移动一点点
             data: [40, 50, 70, 40, 30, 80, 20,30,40,5,21,32,35,51,33,44,21,32,43,21], // 数据要跟主体柱形一致
             z: 3, // 数值越大,层级越高,可以盖住下面的图形
           }
          ]
    		})
        this.echartswaterSupply2.setOption({
          xAxis: {
           type: 'category',
          data: ['00时','01时','02时', '03时', '04时','05时','06时','07时',
          '08时','09时','10时','11时','12时','13时','14时','15时','16时',
          '17时','18时','19时','20时','21时','22时','23时'],
           axisLine: {
             lineStyle: {
               color: '#2063A8'
             }
           },
           axisTick: {
             show: false
           },
           axisLabel: {
             color: '#EFF2F9',
             fontSize: 14
           }
         },
         yAxis: {
           type: 'value',
           axisLine: {
             show: true,
             lineStyle: {
               color: '#2063A8'
             }
           },
           axisTick: {
             show: false
           },
           axisLabel: {
             color: 'rgba(255,255,255,0.4)',
             fontSize: 12,
             fontFamily: 'DigifaceWide'
           },
           splitLine: {
             lineStyle: {
               // 设置背景横线
               color: '#081f52'
             }
           },
         },
         series: [
          // 主体柱形
           {
             data: [40, 50, 70, 40, 30, 80, 20,30,40,5,21,32,35,51,33,44,21,32,43,21],
             type: 'bar',
             label: {
               show: true, //开启显示
               position: 'top', //在上方显示
               color: '#fff',
               fontSize: '12px',
               fontFamily: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei',
               fontWeight: '200',
               verticalAlign: 'bottom',
               lineHeight: '20'
             },
             barWidth: 20,
             // 柱形颜色渐变
             color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                 {
                   offset: 0,
                   color: '#078b6c' // 0% 处的颜色
                 },
                 {
                   offset: 0.5,
                   color: '#078b6c' // 50% 处的颜色
                 },
                 {
                   offset: 1,
                   color: '#078b6c' // 100% 处的颜色
                 }
               ],
               global: false // 缺省为 false
             },
             itemStyle: {
               normal: {
                 barBorderRadius: 10 // 让柱形上下变成圆角
               }
             }
           },
           // 顶部小椭圆
           {
             color: '#1aff80',
             type: 'pictorialBar',
             symbol: 'circle',
             symbolSize: ['20', '14'],
             symbolPosition: 'end', // 图形边缘与柱子结束的地方内切。
             symbolOffset: [0, -2], // 椭圆水平偏移,垂直偏移. 因为不一定正好盖住柱形,所以可能要移动一点点
             data: [40, 50, 70, 40, 30, 80, 20,30,40,5,21,32,35,51,33,44,21,32,43,21], // 数据要跟主体柱形一致
             z: 3, // 数值越大,层级越高,可以盖住下面的图形
           }
          ]
        })
    },
	},
}
</script>

<style lang="scss" scope>
	// @font-face {
	// 	font-family:"diget year";
	// 	src: url("~@/assets/fonts/DS-Digital.ttf");
	// };
	// .font_digit{font-family:diget year;}

	.ScreenFX {
		position:relative;height:100%;width:100%;overflow:hidden;background-color:#00164e;
		.a_0, .b_0, {position:absolute;}
		.a_0{
			position:relative;height:100%;width:100%;
			background:no-repeat center center url('~@/assets/images/overviewImage/bg.png');
			background-size:100% 100%;
		}
		.b_0{
			top:0;left:0;width:100%;height:100%;display:flex;
			header{
				position:absolute;top:0;left:0;height:1.09rem;width:100%;display:flex;justify-content:center;color:#00ffff;z-index:10;
				background:no-repeat center center url('~@/assets/images/overviewImage/top.png');
				background-size:100% 100%;
				.b1_a, .b1_b, .b1_c{position:absolute;}
				.b1_a{
					position:absolute;width:7.75rem;height:.75rem;
					h1{
						position:relative;z-index:1;user-select:none;
						font-size:.40rem;line-height:10;margin-top:0;text-align:center;line-height:.9rem;
            text-shadow: 3px 3px 1px #3258a6;
            letter-spacing:.03rem;
					}
				}
      }
    }
    .b_2{flex:1;position:relative;margin-top:1.09rem;}
    .boxmain{
    	width:100%;
      height:9.7rem;
      display: flex;
      flex-direction: column;
    }
    .box_top{
      width:100%;
      height:6.68rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .box_topOne{
       width:4.5rem;
       height:100%;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       .box_text{
        color:#13d3fe;
        font-size: 24px;
        letter-spacing: 3px;
        font-weight: bold;
       }
       .pictureOne{
         width:4.51rem;
         height:2.63rem;
         background:no-repeat  url('~@/assets/images/overviewImage/frame.png');
       .chartOne{
         width:100%;
         height:2.5rem;
       }
       }
       .pictureTwo{
         width:4.51rem;
         height:2.63rem;
         display: flex;
         flex-direction: column;
         .content{
           width: 100%;
           height: 2.23rem;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           .waterroom{
             width:3.8rem;
             height:0.85rem;
             background:no-repeat  url('~@/assets/images/overviewImage/long.png');
             display: flex;
             justify-content: space-around;
             align-items: center;
             margin-bottom: 0.25rem;
             font-size: 0.16rem;
             color: #fff;
             font-weight:bold;
             .content_border{
               width: 33%;
               height: 100%;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;

             }
             .numberone{
               width: 0.3rem;
               height: 0.3rem;
               border-radius:50%;
               background-color:#fedb65;
               color:#000000;
               position: relative;
               top:0.2rem;
               span{
                 display: flex;
                 justify-content: center;
                 align-items: center;
               }
             }
             .numbertwo{
               width: 0.3rem;
               height: 0.3rem;
               border-radius:50%;
               background-color:#5ee9ee;
               color:#000000;
               position: relative;
               top:0.2rem;
               span{
                 display: flex;
                 justify-content: center;
                 align-items: center;
               }
             }
             .number{
               font-size: 0.16rem;
               color:#68feff;
               font-weight: bold;
               position: relative;
               top:0.2rem;
             }
             .pictureCirle{
               width: 0.46rem;
               height: 0.41rem;
               background:no-repeat  url('~@/assets/images/overviewImage/cicle.png');
               z-index: 999;
             }
             .value{
               font-size: 0.12rem;
             }
           }
           .pool{
            width:3.8rem;
            height:0.85rem;
            background:no-repeat  url('~@/assets/images/overviewImage/long.png');
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 0.16rem;
            color: #fff;
            font-weight:bold;
           }
         }
       }
      }
    .box_topTwo{
      width:8.63rem;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .box_text{
       color:#13d3fe;
       font-size: 24px;
       letter-spacing: 3px;
        font-weight: bold;
      }
    }
    .pictureThree{
      width:100%;
      height:5.44rem;
      background:no-repeat  url('~@/assets/images/overviewImage/newcenter.png');
    }
    .box_topThree{
      width:4.5rem;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .pictureFour{
        width:4.51rem;
        height:2.63rem;
        background:no-repeat  url('~@/assets/images/overviewImage/frame.png');
        .chartTwo{
         width:100%;
         height:2.5rem;
        }
      }
      .pictureFive{
        width:4.51rem;
        height:2.63rem;
        background:no-repeat  url('~@/assets/images/overviewImage/frame.png');
        .chartThree{
          width:100%;
          height:2.2rem;
        }
      }
      .box_text{
       color:#13d3fe;
       font-size: 24px;
       letter-spacing: 3px;
        font-weight: bold;
      }
    }
    .box_bottom{
      width:100%;
      height:2.61rem;
      display: flex;
      justify-content: space-around;
      .pictureSix{
        width:9.16rem;
        height:100%;
        background:no-repeat  url('~@/assets/images/overviewImage/bottom.png');
        .chartFour{
          width:100%;
          height:2.5rem;
        }
      }
      .pictureSeven{
        width:9.16rem;
        height:100%;
        background:no-repeat  url('~@/assets/images/overviewImage/bottom.png');
        .chartFive{
          width:100%;
          height:2.5rem;
        }

      }
    }
    .title{
     width: 100%;
     height: 0.4rem;
     font-size: .18rem;
     background-image:-webkit-linear-gradient(bottom,#fff,#01f0eb);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     font-weight: bold;
     display: flex;
     justify-content: flex-start;
     align-items: flex-end;
     margin-left: 0.4rem;
    }
	}
</style>
