中投页面修改

investment/investHome5.html

@@ -110,7 +110,7 @@
                 </div>
                 <div class="ldMap w-full h-full" style="padding:10px;background-color: #1C355B;">
                   <div class="w-full h-full" ref="echart4"></div>
-                  <div class="flex justify-center items-center">
+                  <!-- <div class="flex justify-center items-center">
                     <div class="center-left-bottom-list flex justify-center items-center flex-col">
                       <span>维度</span>
                       <span>进度</span>
@@ -119,7 +119,7 @@
                       <span>证照</span>
                       <span>合同</span>
                     </div>
-                  </div>
+                  </div> -->
                 </div>
               </div>
               <div class=" w-full h-full" style="padding:10px;background-color: #1C355B;">

investment/js/data5.js

@@ -40,9 +40,7 @@ let echart3 = [
   { value: 14.76, value2: 5.84, value3: 12.6, value4: 35.8 }
 ]
 let echart4 = [
-  [4200, 3000, 20000, 35000, 50000, 18000],
-  [8000, 3000, 38000, 76000, 32000, 71000],
-]
+  [88200, 80000, 20000, 35000, 50000, 18000]]
 let echart5 = [
   { value: 189.07, value2: 121.59, value3: 12.6, value4: 35.8 },
   { value: 385.25, value2: 224.89, value3: 12.6, value4: 35.8 },

investment/js/investHome5.js

@@ -2,9 +2,11 @@ let app = new Vue({
   el: '#app',
   data () {
     return {
-      timeOut1:'',
-      timeOut2:'',
-      timeOut3:'',
+      echarts1Time: 16000,
+      timeOut1: '',
+      timeOut2: '',
+      timeOut3: '',
+      timeOut4: '', // 散点图
       titleList: [
         { name: '初步设计', type: 1, number: '106' },
         { name: '', type: 1, number: '' },
@@ -52,6 +54,7 @@ let app = new Vue({
   },
   methods: {
     initChart1 () {
+      let that = this
       let myChart = echarts.init(this.$refs['echart1'])
       let option = {
         tooltip: {
@@ -71,7 +74,7 @@ let app = new Vue({
             show: false,
             // xAxisIndex: [0]
             handlesize: 0,//滑动条的 左右2个滑动条的大小
-            startValue: 8,// 初始显示值
+            startValue: 7,// 初始显示值
             endValue: 0,// 结束显示值
             height: 10,//组件高度
             left: "5%",
@@ -99,7 +102,7 @@ let app = new Vue({
           bottom: '15%',
         },
         legend: {
-          data: ["预算额", "已签合同额", '产值认定额', '结算额', '结算额'],
+          data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
           x: 'center',
           y: '20px',
           textStyle: {
@@ -264,20 +267,25 @@ let app = new Vue({
       })
       let arr = echart1.map(item => item.value2)
       this.timeOut1 = setInterval(function () {
-
         let startValue = myChart.getModel().option.dataZoom[0].startValue;
         let endValue = myChart.getModel().option.dataZoom[0].endValue;
         let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
         let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
         // 每次向后滚动一个，最后一个从头开始。
         // console.log(option.dataZoom[0].endValue);
-
-        if (option.dataZoom[0].endValue >= 9) {
-          option.dataZoom[0].endValue = 8
+        // 如果到最后了，就重新加载图
+        if (option.dataZoom[0].endValue == 8) {
+          setTimeout(() => {
+            clearInterval(that.timeOut1);
+            that.initChart1()
+          }, 4000)
+        }
+        if (option.dataZoom[0].endValue >= 10) {
+          option.dataZoom[0].endValue = 7
           option.dataZoom[0].startValue = 0
         } else {
-          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 9
-          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 9
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 8
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 8
         }
 
         // myChart.dispatchAction({
@@ -286,10 +294,11 @@ let app = new Vue({
         //   dataIndex: startValue +1,
         // });
         myChart.setOption(option);
-      }, 18000);
+      }, this.echarts1Time);
 
     },
     initChart2 () {
+      let that = this
       const itemStyle = {
         // opacity: 0.8,
         shadowBlur: 10,
@@ -309,6 +318,35 @@ let app = new Vue({
           top: '10',
           left: '10'
         },
+        dataZoom: [
+          {
+            // start: 9,//默认为@
+            // end: 100,//黑认认为1@0
+            type: "slider",
+            show: false,
+            // xAxisIndex: [0]
+            handlesize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 7,// 初始显示值
+            endValue: 0,// 结束显示值
+            height: 10,//组件高度
+            left: "5%",
+            right: "4%",//右边的距离
+            bottom: "25%",//底边的距离
+            borderColor: "#939",
+            fillerColor: "#269cdb",
+            borderRadius: 5,
+            backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
+            showDataShadow: false,//是否显示数据阴影
+            showDetail: false,//即拖拽时候是否显示详细数值信息 
+            truerealtime: true,//是否实时更新
+            filterMode: "filter"
+          }, {
+            type: 'inside',
+            show: true,
+            start: 1,
+            end: 100
+          }
+        ],
         legend: {
           top: 10,
           data: ['正偏差', '容差', '负偏差'],
@@ -323,21 +361,20 @@ let app = new Vue({
         tooltip: {
           show: true,
           trigger: "axis",
-          // formatter: function (params) {
-          //   var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + '：' + params[1].data[2] + '个，' + params[1].data[3] + '亿元';
-          //   return tip
-          // },
           formatter: data => {
             return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${data[0].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color}"></span> ${data[1].seriesName}：${data[1].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color}"></span> ${data[2].seriesName}：${data[2].data[1]}亿`
           },
           axisPointer: {
-            lineStyle: {
-              type: 'dashed',
-              width: 2,
-              color: 'rgba(255,255,255,0.6)'
-            },
-            animation: true
-          }
+            type: 'cross',
+          },
+          // axisPointer: {
+          //   lineStyle: {
+          //     type: 'dashed',
+          //     width: 2,
+          //     color: 'rgba(255,255,255,0.6)'
+          //   },
+          //   animation: true
+          // }
         },
         grid: {
           top: '15%',
@@ -414,7 +451,7 @@ let app = new Vue({
             itemStyle: itemStyle,
             data: echart2[1],
             symbolSize: function (data) {
-              return Math.sqrt(data[1])* 4;
+              return Math.sqrt(data[1]) * 4;
             },
           },
           {
@@ -423,160 +460,46 @@ let app = new Vue({
             itemStyle: itemStyle,
             data: echart2[2],
             symbolSize: function (data) {
-              return Math.sqrt(data[1])* 4;
+              return Math.sqrt(data[1]) * 4;
             },
           }
         ]
       }
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
-        nterval: 2000,
+        interval: 2000,
         loopSeries: true,
       })
-    },
-    //   let myChart = echarts.init(this.$refs['echart3'])
-    //   let option = {
-    //     tooltip: {
-    //       formatter: data => {
-    //         return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
-    //       },
-    //       trigger: 'axis',
-    //       // axisPointer: {
-    //       //   type: 'cross',
-    //       // },
-    //     },
-    //     grid: {
-    //       top: '16%',
-    //       right: '3%',
-    //       left: '10%',
-    //       bottom: '25%',
-    //     },
-    //     legend: {
-    //       data: ["高风险", "中风险", '低风险'],
-    //       x: 'center',
-    //       y: '10px',
-    //       textStyle: {
-    //         color: 'rgba(250,250,250,0.6)',
-    //       },
-    //     },
-    //     xAxis: {
-    //       data: title.map(item => item.name),
-    //       axisLine: {
-    //         show: true, //隐藏X轴轴线
-    //         lineStyle: {
-    //           color: '#005094',
-    //           width: 1,
-    //         },
-    //       },
-    //       axisTick: {
-    //         show: false, //隐藏X轴刻度
-    //       },
-    //       axisLabel: {
-    //         show: true,
-    //         rotate: 40,
-    //         textStyle: {
-    //           color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
-    //         },
-    //       },
-    //     },
-    //     yAxis: [
-    //       {
-    //         type: 'value',
-    //         name: '亿元',
-    //         nameTextStyle: {
-    //           color: 'rgba(255,255,255,0.6)',
-    //         },
-    //         splitLine: {
-    //           show: true,
-    //           lineStyle: {
-    //             color: '#68b4dd66',
-    //             type: 'dashed',
-    //           },
-    //         },
-    //         axisLine: {
-    //           show: true,
-    //           lineStyle: {
-    //             color: '#3D7495',
-    //           },
-    //         },
-    //         axisLabel: {
-    //           show: true,
-    //           textStyle: {
-    //             color: 'rgba(250,250,250,0.6)',
-    //           },
-    //         },
-    //       },
-    //     ],
-    //     series: [
-    //       {
-    //         name: '高风险',
-    //         type: 'bar',
-    //         barWidth: 5,
-    //         itemStyle: {
-    //           normal: {
-    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //               {
-    //                 offset: 0,
-    //                 color: '#69c0ff',
-    //               },
-    //               {
-    //                 offset: 1,
-    //                 color: '#082550',
-    //               },
-    //             ]),
-    //           },
-    //         },
-    //         data: echart3.map(item => item.value),
-    //       },
-    //       {
-    //         name: '中风险',
-    //         type: 'bar',
-    //         barWidth: 5,
-    //         itemStyle: {
-    //           normal: {
-    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //               {
-    //                 offset: 0,
-    //                 color: '#957DFF',
-    //               },
-    //               {
-    //                 offset: 1,
-    //                 color: '#082550',
-    //               },
-    //             ]),
-    //           },
-    //         },
-    //         data: echart3.map(item => item.value2),
-    //       },
-    //       {
-    //         name: '低风险',
-    //         type: 'bar',
-    //         barWidth: 5,
-    //         itemStyle: {
-    //           normal: {
-    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //               {
-    //                 offset: 0,
-    //                 color: '#957DFF',
-    //               },
-    //               {
-    //                 offset: 1,
-    //                 color: '#082550',
-    //               },
-    //             ]),
-    //           },
-    //         },
-    //         data: echart3.map(item => item.value3),
-    //       },
-    //     ],
-    //   }
-    //   myChart.setOption(option)
-    //   tools.loopShowTooltip(myChart, option, {
-    //     nterval: 2000,
-    //     loopSeries: true,
-    //   })
+      this.timeOut4 = setInterval(function () {
+        let startValue = myChart.getModel().option.dataZoom[0].startValue;
+        let endValue = myChart.getModel().option.dataZoom[0].endValue;
+        let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
+        let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
+        // 每次向后滚动一个，最后一个从头开始。
+        // console.log(option.dataZoom[0].endValue);
+        // 如果到最后了，就重新加载图
+        if (option.dataZoom[0].endValue == 8) {
+          setTimeout(() => {
+            clearInterval(that.timeOut4);
+            that.initChart2()
+          }, 4000)
+        }
+        if (option.dataZoom[0].endValue >= 10) {
+          option.dataZoom[0].endValue = 7
+          option.dataZoom[0].startValue = 0
+        } else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 8
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 8
+        }
 
-    // },
+        // myChart.dispatchAction({
+        //   type: 'showTip',
+        //   seriesIndex: 0,
+        //   dataIndex: startValue +1,
+        // });
+        myChart.setOption(option);
+      }, this.echarts1Time);
+    },
     initChart3 () {
       let myChart = echarts.init(this.$refs['echart3'])
       let option = {
@@ -588,6 +511,9 @@ let app = new Vue({
           axisPointer: {
             type: 'cross',
           },
+          position: (params) => {
+            return [params[0]+10,30]
+          },
         },
         dataZoom: [
           {
@@ -684,13 +610,14 @@ let app = new Vue({
           {
             name: '高风险',
             type: 'bar',
+            stack: 'Ad',
             barWidth: 10,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#71D5FF',
+                    color: '#CADD62',
                   },
                   {
                     offset: 1,
@@ -704,6 +631,7 @@ let app = new Vue({
           {
             name: '中风险',
             type: 'bar',
+            stack: 'Ad',
             barWidth: 10,
             itemStyle: {
               normal: {
@@ -724,13 +652,14 @@ let app = new Vue({
           {
             name: '低风险',
             type: 'bar',
+            stack: 'Ad',
             barWidth: 10,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#877CFC',
+                    color: '#52BF80',
                   },
                   {
                     offset: 1,
@@ -780,53 +709,62 @@ let app = new Vue({
         title: {
           text: ''
         },
-        legend: {
-          data: ['类型1', '类型2', '类型3', '类型4', '类型5'],
-          textStyle: {
-            color: '#9DB9EB',
-          },
-        },
-        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
-          show: true,
-          areaStyle: { // 分隔区域的样式设置。
-            color: ['yellow'],
-            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
-          }
-        },
+        // legend: {
+        //   data: ['安全风险', '付款风险', '合同风险', '结算风险', '进度风险', '质量风险'],
+        //   textStyle: {
+        //     color: '#9DB9EB',
+        //   },
+        //   top: 'center',
+        //   right:'50',
+        //   orient: 'vertical', // vertical 竖着 
+        // },
         radar: {
           // shape: 'circle',
-          center: ['50%', '60%'],
-          radius: 40,
+          center: ['50%', '50%'],
+          radius: 55,
           indicator: [
-            { name: '类型1', max: 100000 },
-            { name: '类型2', max: 100000 },
-            { name: '类型3', max: 100000 },
-            { name: '类型4', max: 100000 },
-            { name: '类型5', max: 100000 },
+            { name: '安全风险', max: 100000 },
+            { name: '付款风险', max: 100000 },
+            { name: '合同风险', max: 100000 },
+            { name: '结算风险', max: 100000 },
+            { name: '进度风险', max: 100000 },
+            { name: '质量风险', max: 100000 },
           ],
           axisLine: {  // 设置雷达图中间射线的颜色
             lineStyle: {
-              color: '#c0c0c0',
+              color: '#887d33',
             },
           },
           splitLine: { //网格颜色设置
             show: true,
             lineStyle: {
               width: 1,
-              color: '#1e83e4',
+              color: ['#871b1a', '#638f41', '#d29e35','#b6802b']
+              // color: '#000',
+              // color:(color)=>{
+              //   console.log(color,'??????')
+              // }
             },
           },
+          name: { //修改indicator文字的颜色
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          splitNumber: 4, //有几个圈
           splitArea: {  //设置图表颜色，show的值为true
-            show: false,
+            show: true,
             areaStyle: {
               // color:"#c1ddf8", //一般设置方式
               //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
               //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
               //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                { offset: 0, color: '#c1ddf8' }, // 0% 处的颜色 
-                { offset: 1, color: '#1e83e4' }// 100% 处的颜色
-              ], false)
+              // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              //   { offset: 0, color: '#887D33' }, // 0% 处的颜色 
+              //   { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色 
+              //   { offset: 1, color: '#430705' }// 100% 处的颜色
+              // ], false)
+              color: ['#638f41', '#887d33', '#7d4216','#430705'],
             }
           }
         },
@@ -839,38 +777,12 @@ let app = new Vue({
             data: [
               {
                 value: echart4[0],
-                name: '类型1',
-                itemStyle: { //该数值区域样式设置
-                  normal: {
-                    color: '#2CC6FF', //背景颜色，还需设置areaStyle
-                    lineStyle: {
-                      color: '#2CC6FF', //边框颜色
-                    },
-                  },
-                },
-                label: {  //显示value中具体的数值
-                  normal: {
-                    show: false,
-                    textStyle: {  //更改数值样式
-                      color: '#43EDE3'
-                    }
-                  },
-                },
-                areaStyle: { //设置区域背景颜色透明度
-                  normal: {
-                    width: 1,
-                    opacity: 0.8,
-                  },
-                },
-              },
-              {
-                value: echart4[1],
-                name: '类型2',
+                name: '安全风险',
                 itemStyle: { //该数值区域样式设置
                   normal: {
-                    color: '#D87AFF', //背景颜色，还需设置areaStyle
+                    color: 'rgb(44,198,255,0.8)', //背景颜色，还需设置areaStyle
                     lineStyle: {
-                      color: '#2CC6FF', //边框颜色
+                      color: 'rgb(44,198,255,0.8)', //边框颜色
                     },
                   },
                 },
@@ -899,170 +811,6 @@ let app = new Vue({
       });
       myChart.setOption(option)
     },
-    // initChart5 () {
-    //   let myChart = echarts.init(this.$refs['echart5'])
-    //   let option = {
-    //     tooltip: {
-    //       formatter: data => {
-    //         return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
-    //       },
-    //       trigger: 'axis',
-    //       // axisPointer: {
-    //       //   type: 'cross',
-    //       // },
-    //     },
-    //     grid: {
-    //       top: '16%',
-    //       right: '3%',
-    //       left: '3%',
-    //       bottom: '25%',
-    //     },
-    //     legend: {
-    //       data: ["预算额", "合同额", "结算额", "支付额"],
-    //       x: 'center',
-    //       y: '10px',
-    //       textStyle: {
-    //         color: 'rgba(250,250,250,0.6)',
-    //       },
-    //     },
-    //     xAxis: {
-    //       data: title.map(item => item.name),
-    //       axisLine: {
-    //         show: true, //隐藏X轴轴线
-    //         lineStyle: {
-    //           color: '#005094',
-    //           width: 1,
-    //         },
-    //       },
-    //       axisTick: {
-    //         show: false, //隐藏X轴刻度
-    //       },
-    //       axisLabel: {
-    //         show: true,
-    //         rotate: 40,
-    //         textStyle: {
-    //           color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
-    //         },
-    //       },
-    //     },
-    //     yAxis: [
-    //       {
-    //         type: 'value',
-    //         name: '亿元',
-    //         nameTextStyle: {
-    //           color: 'rgba(255,255,255,0.6)',
-    //         },
-    //         splitLine: {
-    //           show: true,
-    //           lineStyle: {
-    //             color: '#68b4dd66',
-    //             type: 'dashed',
-    //           },
-    //         },
-    //         axisLine: {
-    //           show: true,
-    //           lineStyle: {
-    //             color: '#3D7495',
-    //           },
-    //         },
-    //         axisLabel: {
-    //           show: true,
-    //           textStyle: {
-    //             color: 'rgba(250,250,250,0.6)',
-    //           },
-    //         },
-    //       },
-    //     ],
-    //     series: [
-    //       {
-    //         name: '预算额',
-    //         type: 'bar',
-    //         barWidth: 10,
-    //         itemStyle: {
-    //           normal: {
-    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //               {
-    //                 offset: 0,
-    //                 color: '#69c0ff',
-    //               },
-    //               {
-    //                 offset: 1,
-    //                 color: '#082550',
-    //               },
-    //             ]),
-    //           },
-    //         },
-    //         data: title.map(item => item.value),
-    //       },
-    //       {
-    //         name: '合同额',
-    //         type: 'bar',
-    //         barWidth: 10,
-    //         itemStyle: {
-    //           normal: {
-    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //               {
-    //                 offset: 0,
-    //                 color: '#957DFF',
-    //               },
-    //               {
-    //                 offset: 1,
-    //                 color: '#082550',
-    //               },
-    //             ]),
-    //           },
-    //         },
-    //         data: title.map(item => item.value2),
-    //       },
-    //       {
-    //         name: '结算额',
-    //         type: 'bar',
-    //         barWidth: 10,
-    //         itemStyle: {
-    //           normal: {
-    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //               {
-    //                 offset: 0,
-    //                 color: '#957DFF',
-    //               },
-    //               {
-    //                 offset: 1,
-    //                 color: '#082550',
-    //               },
-    //             ]),
-    //           },
-    //         },
-    //         data: title.map(item => item.value3),
-    //       },
-    //       {
-    //         name: '支付额',
-    //         type: 'bar',
-    //         barWidth: 10,
-    //         itemStyle: {
-    //           normal: {
-    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //               {
-    //                 offset: 0,
-    //                 color: '#957DFF',
-    //               },
-    //               {
-    //                 offset: 1,
-    //                 color: '#082550',
-    //               },
-    //             ]),
-    //           },
-    //         },
-    //         data: title.map(item => item.value4),
-    //       },
-    //     ],
-    //   }
-    //   myChart.setOption(option)
-    //   tools.loopShowTooltip(myChart, option, {
-    //     nterval: 2000,
-    //     loopSeries: true,
-    //   })
-
-    // },
     initChart5 () {
       let myChart = echarts.init(this.$refs['echart5'])
       let option = {
@@ -1073,7 +821,7 @@ let app = new Vue({
           trigger: 'axis',
           axisPointer: {
             type: 'cross',
-          },
+          }
         },
         dataZoom: [
           {

investment/styles/investHome5.css

@@ -260,9 +260,9 @@ a {
   gap: 10px;
 }
 .ldMap{
-  display: grid;
+  /* display: grid;
   grid-template-columns: 1.5fr 1fr; 
-  gap: 10px;
+  gap: 10px; */
 }
 .center-left-bottom-list {
   border: 1px solid #06345e;