left demo完成

investmentNew/index.html

@@ -129,7 +129,20 @@
           <div class="title">投资额度分析</div>
           <div class="content left3">
             <div ref="leftEcharts6" style="width: 100%; height: 100%"></div>
-            <div></div>
+            <div class="left3A">
+              <div class="flex justify-center flex-col" style="padding-left: 35%;">
+                <div style="font-size: 48px;font-weight: bold;color: #68BDFF;">522.84<span class="font28">亿</span></div>
+                <div class="font28">上年度净利润</div>
+              </div>
+              <div class="flex justify-center flex-col" style="padding-left: 35%;">
+                <div style="font-size: 48px;font-weight: bold;color: #68BDFF;">621.62<span class="font28">亿</span></div>
+                <div class="font28">固定资产折旧及无形资产摊销</div>
+              </div>
+              <div class="flex justify-center flex-col" style="padding-left: 35%;">
+                <div style="font-size: 48px;font-weight: bold;color: #68BDFF;">179.39<span class="font28">亿</span></div>
+                <div class="font28">带息负债降压指标</div>
+              </div>
+            </div>
           </div>
         </div>
         <div>
@@ -158,7 +171,9 @@
         </div>
         <div>
           <div class="title">企业额度分析</div>
-          <div class="content"></div>
+          <div class="content">
+            <div ref="leftEcharts10" style="height: 100%;width: 100%;"></div>
+          </div>
         </div>
         <div>
           <div class="title">项目阶段分析</div>
@@ -243,7 +258,10 @@
         </div>
         <div>
           <div class="title">重点项目两线指标</div>
-          <div class="content"></div>
+          <div class="content left5">
+            <dv-scroll-board ref="indicator" :config="storageRecordConfig" @scroll-change="scrollChange"></dv-scroll-board>
+            <div ref="leftEcharts11" style="width: 100%; height: 100%;"></div>
+          </div>
         </div>
       </div>
       <div class="center">
@@ -493,14 +511,14 @@
     <!-- <div style="width: 500px;height: 500px;" ref="echart1"></div> -->
     <svg style="height: 700px;width: 100%;" class="svg_box">
       <circle cx="240" cy="260" r="150" stroke-width="30px" stroke="rgb(140 201 249)" fill="none"
-        stroke-dasharray="40 10" >
+        stroke-dasharray="40 10">
         <animateTransform attributeName="transform" repeatCount="indefinite" type="rotate" from="0 240 260" /
           to="-360 240 260" dur="20" />
       </circle>
     </svg>
     <svg style="height: 700px;width: 100%;" class="svg_box">
       <circle cx="240" cy="120" r="100" stroke-width="10px" stroke="rgb(140 201 249)" fill="none"
-        stroke-dasharray="10 20" >
+        stroke-dasharray="10 20">
         <animateTransform attributeName="transform" repeatCount="indefinite" type="rotate" from="0 240 120"
           to="360 240 120" dur="20" />
       </circle>

investmentNew/js/Data.js

@@ -1,5 +1,6 @@
 commonColor = ["#40A9FF", "#68BDFF", "#58F7DF", "#D2706D", '#FFE036', "#B78CFF", "#7784FF", "#477BFF", "#15D476"]
 commonColor2 = ["#40A9FF50", "#68BDFF50", "#58F7DF50", "#D2706D50", '#FFE03650', "#B78CFF50", "#7784FF50", "#477BFF50", "#15D47650"]
+let commonCompany = ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技']
 left1 = [
   [
     {
@@ -130,4 +131,4 @@ left1 = [
       num: 5,
     }
   ]
-]
+]

investmentNew/js/index.js

@@ -2,6 +2,9 @@ let app = new Vue({
   el: "#app",
   data () {
     return {
+      count: 0, //重点项目两线指标轮到哪个
+      list: [], //重点项目两线指标数组
+      countType: 0,//重点项目两线指标数组
       leftEcharts1: "",
       leftEcharts2: "",
       leftEcharts3: "",
@@ -11,11 +14,47 @@ let app = new Vue({
       leftEcharts7: "",
       leftEcharts8: "",
       leftEcharts9: '',
+      leftEcharts10: '',
+      leftEcharts11: '',
       shanxiMap: "", // 山西地图
       industryProportion: 1, // 主辅业占比轮播
       industryLayout: 0, //产业布局分析
       time1: "", // 4秒定时器
       time2: "", // 针对投前产业布局分析的定时器
+      storageRecordConfig: {
+        waitTime: '2000',
+        hoverPause: true,
+        header: ['企业集团', '项目名 ', '投资总额'],
+        headerHeight: 80,
+        headerBGC: '#092853',
+        oddRowBGC: '#001c42',
+        evenRowBGC: '#001c42',
+        // oddRowBGC: '#05507b33',
+        rowNum: 6,
+        columnWidth: [150, 450, 150],
+        align: ['center', 'center', 'center'],
+        data: [
+          ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"],
+          ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
+          ['汾酒集团', '汾酒2030技改原酒产储能扩建项目（一期）', "91.02亿元"],
+          ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"],
+          ['潞安化工', '分布式光伏发电项目', "2.01亿元"],
+          ['太重集团', '设立太重（大同）新能源产业投资公司', "0.30亿元"],
+          ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"],
+          ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"],
+          ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"],
+          ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"],
+          ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"],
+          ['华新燃气', '吉县—延长输气管道项目（一期工程）', "3.54亿元"],
+          ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"],
+          ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科（太原）综合物流产业园项目', "6.60亿元"],
+          ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"],
+          ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"],
+          ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"],
+          ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"],
+          ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"]
+        ],
+      },
       meansList: [
         {
           label: "初步设计",
@@ -235,6 +274,8 @@ let app = new Vue({
   created () { },
   beforeDestroy () {
     clearInterval(this.timer);
+    clearInterval(this.time1);
+    clearInterval(this.time2);
   },
   mounted () {
     this.time4s();
@@ -251,6 +292,8 @@ let app = new Vue({
       this.leftEcharts7Fun();
       this.leftEcharts8Fun();
       this.leftEcharts9Fun();
+      this.leftEcharts10Fun();
+      this.leftEcharts11Fun();
       this.chinaEchartsFun();
       this.initChartR1();
       this.initChartR2();
@@ -992,7 +1035,6 @@ let app = new Vue({
       that.right4Chart.setOption(option);
     },
     clickItem (index) {
-      console.log(index);
       const angle = 360 / this.investData.investList.length;
       this.witchs = index;
       this.inner = index;
@@ -2524,7 +2566,7 @@ let app = new Vue({
           if (geoCoord) {
             res.push({
               name: data[i].name,
-              value: geoCoord.concat(data[i].value,data[i].value2),
+              value: geoCoord.concat(data[i].value, data[i].value2),
             });
           }
         }
@@ -2604,7 +2646,6 @@ let app = new Vue({
             confine: true, // 不超出当前表
 
             formatter: (params, ticket, callback) => {
-              console.log(params,'?????????')
               // 清空所有轮播
               for (var k in geoCoordMap) {
                 that.shanxiMap.dispatchAction({
@@ -2756,7 +2797,7 @@ let app = new Vue({
             showEffectOn: "emphasis",
             rippleEffect: {
               brushType: "stroke",
-              color:'#58F7DF'
+              color: '#58F7DF'
             },
             hoverAnimation: true,
             label: {
@@ -2802,7 +2843,7 @@ let app = new Vue({
             showEffectOn: "emphasis",
             rippleEffect: {
               brushType: "stroke",
-              color:'#DF62F2'
+              color: '#DF62F2'
             },
             hoverAnimation: true,
             label: {
@@ -2860,7 +2901,7 @@ let app = new Vue({
       let option = {
         backgroundColor: '#00000000',
         globe: {
-          globeRadius:65,
+          globeRadius: 55,
           baseTexture: './img/3D/world1.jpg',
           heightTexture: './img/3D/world1.jpg',
           displacementScale: 0.04,
@@ -2874,13 +2915,319 @@ let app = new Vue({
           },
           light: {
             main: {
-              intensity: 0,
+              intensity: 3,
               shadow: true
             },
           }
         }
       };
       that.leftEcharts9.setOption(option);
-    }
+    },
+    leftEcharts10Fun () {
+      let that = this;
+      this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]);
+      option = {
+        grid: {
+          top: 45,
+          right: 0,
+          left: 80,
+          bottom: 80,
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          formatter: data => {
+            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${that.numFormat(data[0].value)}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${that.numFormat(data[1].value)}亿`
+          },
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
+          borderColor: "rgba(50,50,50,0.7)",
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
+            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
+            fontSize: "28", // 文字字体大小
+          },
+
+        },
+        xAxis: {
+          data: commonCompany,
+          axisTick: {
+            show: false,
+          },
+          // x轴的字体颜色
+          axisLabel: {
+            rotate: 40,
+            textStyle: {
+              color: "white",
+              fontSize: '20',
+              fontFamily: 'Microsoft YaHei'
+            },
+          },
+          //y轴线的颜色以及宽度
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#1E5389",
+              width: 1,
+              type: "solid",
+            },
+          },
+        },
+        yAxis: {
+          name: '亿',
+          axisTick: {
+            lineStyle: {
+              color: "#18416F",
+            },
+          },
+          // y轴的字体颜色
+          axisLabel: {
+            textStyle: {
+              color: "white",
+              fontSize: '20',
+              fontFamily: 'Microsoft YaHei'
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#68b4dd66",
+              width: 1,
+              type: "dashed",
+            },
+          },
+          //y轴线的颜色以及宽度
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#1E5389",
+              width: 1,
+              type: "solid",
+            },
+          },
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontFamily: 'Microsoft YaHei'
+          },
+        },
+        series: [
+          {
+            name: "已用额度",
+            type: "pictorialBar",
+            symbol: 'fixed',
+            symbolSize: [20, 5],
+            symbolMargin: 2,
+            symbolRepeat: 'repeat',
+            data: [26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36],
+            showBackground: false,
+            barWidth: "15",
+            itemStyle: {
+              color: '#40A9FF'
+            },
+            zlevel: 1
+          },
+          {
+            name: "总额度",
+            type: "pictorialBar",
+            symbol: 'fixed',
+            symbolSize: [30, 5],
+            symbolMargin: 2,
+            symbolRepeat: 'repeat',
+            data: [390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 200],
+            barGap: '-130%',
+            barWidth: "25",
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: '#b9b7c060',
+                },
+                {
+                  offset: 1,
+                  color: '#b9b7c060',
+                },
+              ]),
+            },
+          },
+        ]
+      };
+      //轮播
+      tools.loopShowTooltip(that.leftEcharts10, option, {
+        interval: 2000,
+        loopSeries: true,
+      });
+      //注册
+      that.leftEcharts10.setOption(option);
+    },
+    // 重点项目两线指标轮播方法
+    scrollChange (index) {
+      if (index == 18) {
+        this.count = -1
+      } else {
+        this.count = index
+      }
+      if (this.count > 12 && this.count != 18) {
+        this.countType = 1
+      } else {
+        this.countType = 0
+      }
+      for (var i = 0; i < this.list.length; i++) {
+        if (i == 2) {
+          this.list[i].classList.add('light')
+        } else {
+          this.list[i].classList.remove('light')
+        }
+      }
+      this.leftEcharts11 ? this.leftEcharts11.dispose() : ''
+      this.leftEcharts11Fun()
+    },
+    leftEcharts11Fun () {
+      let that = this;
+      this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]);
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          formatter: '指标：' + '{c0}' + '<br/>' + '发展线：' + '{c1}' + '<br/>' + '生存线：' + '{c2}',  //+ '<br/>'+ '{a1}：{c1}' + '%',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          top: '10%',
+          right: '5%',
+          left: '15%',
+          bottom: '20%',
+        },
+        xAxis: {
+          data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
+          // data: left15[this.countType],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: true, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            rotate: 30,
+            textStyle: {
+              color: '#fff', //X轴文字颜色
+              fontSize: 20,
+              fontFamily: 'Microsoft YaHei'
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              formatter: '{value}%',
+              textStyle: {
+                color: '#fff',
+                fontSize: 20,
+                fontFamily: 'Microsoft YaHei'
+              },
+            },
+            nameTextStyle: {
+              color: '#ebf8ac',
+              fontSize: 16,
+              fontFamily: 'Microsoft YaHei'
+            },
+          },
+        ],
+        series: [
+          {
+            name: '实际值',
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: [70, 52, 33, 41, 52],
+            // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2]
+          },
+          {
+            name: '',
+            type: 'line',
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: 'green',
+                  },
+                ]),
+              },
+            },
+            data: [20, 30, 15, 28, 36],
+            // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1]
+          },
+          {
+            name: '',
+            type: 'line',
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: 'yellow',
+                  },
+                ]),
+              },
+            },
+            data: [15, 22, 17, 33, 14],
+            // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0]
+          },
+        ],
+      }
+      //轮播
+      tools.loopShowTooltip(that.leftEcharts11, option, {
+        interval: 2000,
+        loopSeries: true,
+      });
+      //注册
+      that.leftEcharts11.setOption(option);
+    },
   },
 });

investmentNew/styles/index.css

@@ -5,7 +5,7 @@ body {
   height: 100%;
   font-size: 20px;
   color: #fff;
-  font-family: "Microsoft YaHei";
+  font-family: 'Microsoft YaHei';
   overflow-y: hidden;
 }
 * {
@@ -30,7 +30,7 @@ a {
   display: none;
 }
 #app {
-  background: url("../img/page-bg.png") center center no-repeat;
+  background: url('../img/page-bg3.png') center center no-repeat;
   background-size: 100% 100%;
 }
 .top {
@@ -50,26 +50,26 @@ a {
   letter-spacing: 5px;
 }
 .top .title > span:before {
-  content: "";
+  content: '';
   display: inline-block;
   width: 66px; /*图标宽度*/
   height: 42px; /*图标高度*/
-  background: url("../img/title-left.png") no-repeat center center; /*图标路径*/
+  background: url('../img/title-left.png') no-repeat center center; /*图标路径*/
   background-size: contain; /*图标大小适应*/
   margin-right: 20px; /*图标与文字的间距*/
 }
 .top .title > div {
   height: 30px;
   width: 40%;
-  background: url("../img/title-light.png") center bottom no-repeat;
+  background: url('../img/title-light.png') center bottom no-repeat;
   background-size: 100% 100%;
 }
 .top .title > span:after {
-  content: "";
+  content: '';
   display: inline-block;
   width: 66px; /*图标宽度*/
   height: 42px; /*图标高度*/
-  background: url("../img/title-right.png") no-repeat center center; /*图标路径*/
+  background: url('../img/title-right.png') no-repeat center center; /*图标路径*/
   background-size: contain; /*图标大小适应*/
   margin-left: 20px; /*图标与文字的间距*/
 }
@@ -113,7 +113,7 @@ a {
   /* height: calc(100% / 7); */
   height: 100px;
   overflow: hidden;
-  background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
+  background: url('../img/small-title.png') no-repeat center bottom; /*图标路径*/
   background-size: 100% 50%;
   display: flex;
   align-items: center;
@@ -124,7 +124,7 @@ a {
   letter-spacing: 5px;
 }
 .left .child > div:nth-child(1):before {
-  content: "●";
+  content: '●';
   margin-right: 10px;
   color: #40a9ff;
 }
@@ -147,7 +147,7 @@ a {
 .left1 .child {
   width: 47%;
   height: 100%;
-  background: url("../img/left1.png") no-repeat center center; /*图标路径*/
+  background: url('../img/left1.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -164,7 +164,7 @@ a {
   overflow: hidden;
   /* background: url("../img/disk.png") no-repeat center center;  */
   background-size: 100% 100%;
-  padding-bottom:10% ;
+  padding-bottom: 10%;
 }
 .left1C {
   display: grid;
@@ -175,12 +175,12 @@ a {
   padding: 1%;
 }
 .checkBg {
-  background: url("../img/disk.png") no-repeat center center; /*图标路径*/
+  background: url('../img/disk.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .left .industryProportion1,
 .left2 .industryProportion1 {
-  background: url("../img/industryProportion.png") no-repeat center center; /*图标路径*/
+  background: url('../img/industryProportion.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .left .industryProportion2 {
@@ -192,10 +192,30 @@ a {
 .left2 {
   display: grid;
   grid-template-rows: 3fr 17fr;
+  overflow: hidden;
 }
 .left3 {
   display: grid;
   grid-template-columns: 9fr 11fr;
+  overflow: hidden;
+}
+.left3A {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  overflow: hidden;
+  gap: 30px;
+}
+.left3A > div:nth-child(1) {
+  background: url('../img/retainedA.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.left3A > div:nth-child(2) {
+  background: url('../img/retainedB.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
+}
+.left3A > div:nth-child(3) {
+  background: url('../img/retainedC.png') no-repeat center center; /*图标路径*/
+  background-size: 100% 100%;
 }
 .left4 {
   width: 100%;
@@ -248,23 +268,23 @@ a {
   overflow: hidden;
 }
 .center1 > div:nth-child(2) {
-  background: url("../img/bubbleBg.png") no-repeat center center; /*图标路径*/
+  background: url('../img/bubbleBg.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(3) {
-  background: url("../img/blueBig.png") no-repeat center center; /*图标路径*/
+  background: url('../img/blueBig.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(4) {
-  background: url("../img/blueSmall.png") no-repeat center center; /*图标路径*/
+  background: url('../img/blueSmall.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(5) {
-  background: url("../img/greenSmall.png") no-repeat center center; /*图标路径*/
+  background: url('../img/greenSmall.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(6) {
-  background: url("../img/greenBig.png") no-repeat center center; /*图标路径*/
+  background: url('../img/greenBig.png') no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center2 {
@@ -284,32 +304,32 @@ a {
   gap: 10px;
   overflow: hidden;
 }
-.center2 > div:nth-child(1) > div{
+.center2 > div:nth-child(1) > div {
   margin-left: 10%;
   background-size: 100% 100%;
   overflow: hidden;
   padding-left: 40%;
 }
 .center2 > div:nth-child(1) > div:nth-child(1) {
-  background: url("../img/centerTop1.png") no-repeat center left; /*图标路径*/
+  background: url('../img/centerTop1.png') no-repeat center left; /*图标路径*/
 }
 .center2 > div:nth-child(1) > div:nth-child(2) {
-  background: url("../img/centerTop2.png") no-repeat center left; /*图标路径*/
+  background: url('../img/centerTop2.png') no-repeat center left; /*图标路径*/
 }
 .center2 > div:nth-child(1) > div:nth-child(3) {
-  background: url("../img/centerTop3.png") no-repeat center left; /*图标路径*/
+  background: url('../img/centerTop3.png') no-repeat center left; /*图标路径*/
 }
 .center2 > div:nth-child(1) > div:nth-child(4) {
-  background: url("../img/centerTop4.png") no-repeat center left; /*图标路径*/
+  background: url('../img/centerTop4.png') no-repeat center left; /*图标路径*/
 }
-.center3{
+.center3 {
   position: absolute !important;
   overflow: hidden;
   width: 100%;
   height: 100%;
   z-index: 1;
-  top: 0;
-  left: 0;
+  top: -3%;
+  left: 1%;
   opacity: 0.4;
   /* display: none; */
 }
@@ -332,25 +352,34 @@ a {
   font-size: 32px !important;
 }
 .blueIcon::before {
-  content: "●";
+  content: '●';
   margin-right: 10px;
   color: #40a9ff;
 }
-.bottom-tip{
-  background: url("../img/center-bottonm.png") no-repeat center left; /*图标路径*/
+.bottom-tip {
+  background: url('../img/center-bottonm.png') no-repeat center left; /*图标路径*/
   background-size: 100% 100%;
   width: 1600px;
   height: 120px;
   position: absolute;
   bottom: 0;
-  left: calc( 50% - 800px);
+  left: calc(50% - 800px);
 }
 .svg_box {
   transform: rotateX(78deg);
   position: absolute;
-  top: 22.5%;
+  top: 19.5%;
   left: 2.4%;
 }
+.left5 {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(2, 1fr);
+}
+.row-item,
+.header-item {
+  font-size: 20px !important;
+}
 /* 公共css */
 /* 宽高纵横比 */
 .font28 {
@@ -883,7 +912,7 @@ i {
   width: 100%;
   height: calc(100% / 7);
   overflow: hidden;
-  background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
+  background: url('../img/small-title.png') no-repeat center bottom; /*图标路径*/
   background-size: 100% 50%;
   display: flex;
   align-items: center;
@@ -927,7 +956,7 @@ i {
 }
 
 .itemTop p::after {
-  content: "";
+  content: '';
   width: 0.75rem;
   height: 0.75rem;
   background: linear-gradient(0deg, #014198, #93ceff);
@@ -1116,7 +1145,7 @@ i {
 }
 
 .investInfoWrap .investInfo::after {
-  content: "";
+  content: '';
   width: 20px;
   height: 20px;
   border: 4px solid #68bdff;