优化地图

investment/js/investHomeGroup.js

@@ -2,7 +2,7 @@ let app = new Vue({
   el: '#app',
   data () {
     return {
-      centerShow:false, // 中间内容显示
+      centerShow: false, // 中间内容显示
       echartR4Chart: '',// 倒数第二个专用
       echartR5Chart: '', // 倒是第一个专用
       echartEnterpriseShow: false, // 企业额度分析控制
@@ -36,7 +36,6 @@ let app = new Vue({
       list: [],
       count: 0,
       countType: 0,
-      mapName: 'shanxi',
       geoCoordMap: {},
       storageRecordConfig2: center9,
       titleList: right1,
@@ -851,7 +850,7 @@ let app = new Vue({
           {
             type: "liquidFill",
             radius: "80%",
-            data: [0.45,0.5,0.4],
+            data: [0.45, 0.5, 0.4],
             // data: [
             //   {}
             // ],
@@ -943,7 +942,7 @@ let app = new Vue({
               normal: {
                 textStyle: {
                   color: "#fff", // x轴文字颜色
-                  fontSize:'70'
+                  fontSize: '70'
                 },
               },
             },
@@ -961,7 +960,7 @@ let app = new Vue({
           {
             type: "liquidFill",
             radius: "80%",
-            data: [0.45,0.5,0.4],
+            data: [0.45, 0.5, 0.4],
             // data: [
             //   {}
             // ],
@@ -1070,7 +1069,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
+        colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -1314,7 +1313,7 @@ let app = new Vue({
 
       let that = this
       var chart = Highcharts.chart('echartL3', {
-       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
+        colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -1696,7 +1695,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
+        colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -1906,7 +1905,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-        colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
+        colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -2116,7 +2115,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-        colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
+        colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -2327,7 +2326,7 @@ let app = new Vue({
       let that = this
 
       var option = {
-       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
+        colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -2985,11 +2984,11 @@ let app = new Vue({
       var chartData = center2
       var timer = null;
       var i = 0;
-    
+
       let that = this
-    
+
       var option = {
-       colors: ['#74a55d','#cea446','#b84b4b','#5593ab','#2a7652','#c3643c','#714585','#b75d9f'],
+        colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
         chart: {
           type: 'pie',
           backgroundColor: 'rgba(0,0,0,0)',
@@ -3002,10 +3001,10 @@ let app = new Vue({
             // load，图表加载完成时触发
             load: function () {
               var chart = this;
-    
+
               var points = chart.series[0].points;
               var len = points.length;
-    
+
               timer && clearInterval(timer);
               timer = setInterval(function () {
                 autoTooltip(points[i]);
@@ -3103,7 +3102,7 @@ let app = new Vue({
         series: [{
           type: 'pie',
           name: '占比',
-          center: ['74%','50%'],
+          center: ['74%', '50%'],
           point: {
             events: {
               click: function (e) { //点击事件
@@ -3136,7 +3135,7 @@ let app = new Vue({
               mouseOut: function () { // 鼠标移出后需要继续执行轮播
                 var points = chart.series[0].points;
                 var len = points.length;
-    
+
                 timer && clearInterval(timer);
                 timer = setInterval(function () {
                   autoTooltip(points[i]);
@@ -3173,9 +3172,9 @@ let app = new Vue({
           data: chartData
         }]
       }
-    
+
       var chart = Highcharts.chart('echartC1', option);
-    
+
       function autoTooltip (point) {
         chart.tooltip.refresh(point);
       }
@@ -3431,90 +3430,6 @@ let app = new Vue({
         { name: '晋城市', value: 45.43, value2: 31 }
       ]
       this.geoCoordMap = []
-      var moveLine = {
-        normal: [
-          {
-            fromName: '太原市',
-            toName: '吕梁市',
-            coords: [
-              [112.3352, 37.9413],
-              [111.3574, 37.7325],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '忻州市',
-            coords: [
-              [112.3352, 37.9413],
-              [112.4561, 38.8971],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '临汾市',
-            coords: [
-              [112.3352, 37.9413],
-              [111.4783, 36.1615],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '阳泉市',
-            coords: [
-              [112.3352, 37.9413],
-              [113.4778, 38.0951],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '晋中市',
-            coords: [
-              [112.3352, 37.9413],
-              [112.7747, 37.37],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '运城市',
-            coords: [
-              [112.3352, 37.9413],
-              [111.1487, 35.2002],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '大同市',
-            coords: [
-              [112.3352, 37.9413],
-              [113.7854, 39.8035],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '晋城市',
-            coords: [
-              [112.3352, 37.9413],
-              [112.7856, 35.6342],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '长治市',
-            coords: [
-              [112.3352, 37.9413],
-              [112.8625, 36.4746],
-            ],
-          },
-          {
-            fromName: '太原市',
-            toName: '朔州市',
-            coords: [
-              [112.3352, 37.9413],
-              [113.0713, 39.6991],
-            ],
-          },
-        ],
-      }
       /*获取地图数据*/
       this.mapChart = echarts.init(this.$refs['echarts-map'])
       echarts.registerMap('shanxi', shanxi)
@@ -3591,14 +3506,20 @@ let app = new Vue({
           show: true,
           map: 'shanxi',
           layoutCenter: ['50%', '50%'], //地图位置
-          layoutSize: '65%',
-          zoom: 1.5,
+          layoutSize: '140%',
           label: {
             normal: {
-              show: false,
+              position: [100, 100],
+              fontSize: 25,
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: 600,
+              color: '#fff',
+              show: true,
             },
             emphasis: {
-              show: false,
+              show: true,
+              color: '#e7e1a0',
+              fontSize: 30,
             },
           },
           roam: false,
@@ -3606,144 +3527,27 @@ let app = new Vue({
             normal: {
               areaColor: '#1946a8',
               shadowColor: '#1946a8',
-              borderWidth: 1, //设置外层边框
+              borderWidth: 2, //设置外层边框
               borderColor: '#1946a8',
-              shadowOffsetX: 10,
-              shadowOffsetY: 5,
-              shadowBlur: 2,
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              shadowBlur: 0,
             },
             emphasis: {
-              areaColor: '#1946a8',
-              borderColor: '#d4bc1d',
-              borderWidth: 2, //设置外层边框
+              areaColor: '#013d95',
+              borderColor: '#e7e1a0',
+              borderWidth: 4, //设置外层边框
             },
           },
         },
         series: [
-          {
-            name: '散点',
-            type: 'scatter',
-            coordinateSystem: 'geo',
-            data: this.convertData(data),
-            symbolSize: function (val) {
-              return 10
-            },
-            label: {
-              normal: {
-                formatter: '{b}',
-                position: [10, 10],
-                fontSize: 30,
-                fontFamily: 'Microsoft YaHei',
-                fontWeight: 600,
-                fontStyle: 'italic',
-                color: '#fff',
-                show: true,
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: '#000',
-                borderWidth: 2,
-                borderColor: '#fff',
-              },
-            },
-          },
           {
             type: 'map',
-            map: this.mapName,
+            map: 'shanxi',
             geoIndex: 0,
             aspectScale: 1.5, //长宽比
-            showLegendSymbol: true, // 存在legend时显示
-            label: {
-              normal: {
-                show: true,
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  color: '#fff',
-                },
-              },
-            },
-            roam: true,
-            itemStyle: {
-              normal: {
-                areaColor: '#031525',
-                borderColor: '#3B5077',
-              },
-              emphasis: {
-                areaColor: '#2B91B7',
-              },
-            },
-            animation: false,
             data: data,
           },
-          {
-            name: '点',
-            type: 'scatter',
-            coordinateSystem: 'geo',
-            zlevel: 6,
-          },
-          {
-            name: 'Top 5',
-            type: 'effectScatter',
-            coordinateSystem: 'geo',
-            data: this.convertData(
-              data
-                .sort(function (a, b) {
-                  return b.value - a.value
-                })
-                .slice(0, 5)
-            ),
-            symbolSize: function (val) {
-              return 15
-            },
-            showEffectOn: 'render',
-            rippleEffect: {
-              brushType: 'stroke',
-            },
-            hoverAnimation: true,
-            label: {
-              normal: {
-                formatter: '{b}',
-                position: 'left',
-                show: false,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: 'yellow',
-                shadowBlur: 10,
-                shadowColor: 'yellow',
-              },
-            },
-            zlevel: 1000,
-          },
-          // {
-          //   name: '线路',
-          //   type: 'lines',
-          //   zlevel: 2,
-          //   effect: {
-          //     show: true,
-          //     period: 4, //箭头指向速度，值越小速度越快
-          //     trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
-          //     symbol: 'arrow', //箭头图标
-          //     symbolSize: 5, //图标大小
-          //   },
-          //   lineStyle: {
-          //     normal: {
-          //       color: '#00FFFF',
-          //       width: 1,
-          //       type: 'dashed',
-          //       opacity: 0.5, //尾迹线条透明度
-          //       curveness: -0.3, //尾迹线条曲直度
-          //     },
-          //   },
-          //   data: moveLine.normal,
-          // },
         ],
       }
       let that = this
@@ -3759,96 +3563,48 @@ let app = new Vue({
       this.mapChart.setOption(option)
     },
     initChinaChart () {
-      var data = []
+      var data = [{ name: '河北', value: 60.35, value2: 28 },
+      { name: '山西', value: 160.35, value2: 29 },
+      { name: '辽宁', value: 260.35, value2: 30 },
+      { name: '吉林', value: 360.35, value2: 30 },
+      { name: '黑龙江', value: 460.35, value2: 30 },
+      { name: '江苏', value: 560.35, value2: 30 },
+      { name: '浙江', value: 60.35, value2: 28 },
+      { name: '安徽', value: 160.35, value2: 29 },
+      { name: '福建', value: 260.35, value2: 30 },
+      { name: '江西', value: 360.35, value2: 30 },
+      { name: '山东', value: 460.35, value2: 30 },
+      { name: '河南', value: 560.35, value2: 30 },
+      { name: '湖北', value: 60.35, value2: 28 },
+      { name: '湖南', value: 160.35, value2: 29 },
+      { name: '广东', value: 260.35, value2: 30 },
+      { name: '海南', value: 360.35, value2: 30 },
+      { name: '四川', value: 460.35, value2: 30 },
+      { name: '贵州', value: 560.35, value2: 30 },
+      { name: '云南', value: 60.35, value2: 28 },
+      { name: '陕西', value: 160.35, value2: 29 },
+      { name: '甘肃', value: 260.35, value2: 30 },
+      { name: '青海', value: 360.35, value2: 30 },
+      { name: '台湾', value: 460.35, value2: 30 },
+      { name: '内蒙古', value: 560.35, value2: 30 },
+      { name: '广西', value: 60.35, value2: 28 },
+      { name: '西藏', value: 160.35, value2: 29 },
+      { name: '宁夏', value: 260.35, value2: 30 },
+      { name: '新疆', value: 360.35, value2: 30 },
+      { name: '北京', value: 460.35, value2: 30 },
+      { name: '天津', value: 560.35, value2: 30 },
+      { name: '上海', value: 260.35, value2: 30 },
+      { name: '重庆', value: 360.35, value2: 30 },
+      { name: '香港', value: 460.35, value2: 30 },
+      { name: '澳门', value: 560.35, value2: 30 },]
+
+
       this.geoCoordMap = []
-      // var moveLine = {
-      //   normal: [
-      //     {
-      //       fromName: '太原市',
-      //       toName: '吕梁市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [111.3574, 37.7325],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '忻州市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [112.4561, 38.8971],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '临汾市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [111.4783, 36.1615],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '阳泉市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [113.4778, 38.0951],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '晋中市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [112.7747, 37.37],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '运城市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [111.1487, 35.2002],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '大同市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [113.7854, 39.8035],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '晋城市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [112.7856, 35.6342],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '长治市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [112.8625, 36.4746],
-      //       ],
-      //     },
-      //     {
-      //       fromName: '太原市',
-      //       toName: '朔州市',
-      //       coords: [
-      //         [112.3352, 37.9413],
-      //         [113.0713, 39.6991],
-      //       ],
-      //     },
-      //   ],
-      // }
       /*获取地图数据*/
       this.mapChart = echarts.init(this.$refs['chinaMap'])
-      echarts.registerMap('shanxi', china)
-      var mapFeatures = echarts.getMap('shanxi').geoJson.features
+      echarts.registerMap('china', china)
+      var mapFeatures = echarts.getMap('china').geoJson.features
+      console.log(mapFeatures, '?????????')
       mapFeatures.forEach(v => {
         // 地区名称
         var name = v.properties.name
@@ -3863,6 +3619,11 @@ let app = new Vue({
           transitionDuration: 1,
           formatter: (params, ticket, callback) => {
             // 清空所有轮播
+            this.mapChart.dispatchAction({
+              // type: 'geoUnSelect',
+              type: 'downplay',
+              name: '南海诸岛',
+            })
             for (var k in this.geoCoordMap) {
               this.mapChart.dispatchAction({
                 // type: 'geoUnSelect',
@@ -3876,138 +3637,96 @@ let app = new Vue({
               type: 'highlight',
               name: params.name,
             })
-            // if (params.componentSubType == 'lines') {
-            //   return
-            // }
-            // if (params.componentSubType == 'scatter') {
-            //   let tipHtml = `
-            //   <div class="tooltip-cont">
-            //     <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
-            //     <p>总投资额：<span>${params.data.value[2]}亿</span></p>
-            // </div>`
-            //   callback(ticket, tipHtml)
-            //   return tipHtml
-            // }
-            // if (params.componentSubType == 'map') {
-            //   let tipHtml = `
-            //   <div class="tooltip-cont">
-            //   <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
-            //     <p>总投资额：<span>${params.data.value}亿</span></p>
-            // </div>`
-            //   callback(ticket, tipHtml)
-            //   return tipHtml
-            // }
+            if (params.componentSubType == 'lines') {
+              return
+            }
+            if (params.componentSubType == 'scatter') {
+              let tipHtml = `
+              <div class="tooltip-cont">
+                <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
+                <p>总投资额：<span>${params.data.value[2]}亿</span></p>
+            </div>`
+              callback(ticket, tipHtml)
+              return tipHtml
+            }
+            if (params.componentSubType == 'map') {
+              let tipHtml = `
+              <div class="tooltip-cont">
+              <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
+                <p>总投资额：<span>${params.data.value}亿</span></p>
+            </div>`
+              callback(ticket, tipHtml)
+              return tipHtml
+            }
 
           },
         },
         visualMap: {
           show: false,
           min: 0,
-          max: 300,
-          right: 0,
-          bottom: 0,
+          max: 1000,
+          left: '100',
+          bottom: 100,
           text: ['高', '低'],
           textStyle: {
             color: '#f1f1f1'
           },
-          realtime: false,
+          realtime: true, //拖拽时，是否实时更新
           calculable: false,
           inRange: {
             color: ['lightskyblue', '#2754b7']
+          },
+          itemWidth: 50, //图形的宽度，即长条的宽度。
+          itemHeight: 400, //图形的高度，即长条的高度。
+          textStyle:{
+            fontSize:30,
+            color:'#fff'
           }
         },
         geo: {
           show: true,
-          map: 'shanxi',
+          map: 'china',
           layoutCenter: ['50%', '50%'], //地图位置
-          layoutSize: '65%',
-          zoom: 1.5,
+          layoutSize: '110%',
           label: {
             normal: {
-              show: false,
+              position: [100, 100],
+              fontSize: 25,
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: 600,
+              color: '#fff',
+              show: true,
             },
             emphasis: {
-              show: false,
+              show: true,
+              color: '#e7e1a0',
+              fontSize: 30,
             },
           },
+          // 滑轮缩放
           roam: false,
           itemStyle: {
             normal: {
               areaColor: '#1946a8',
               shadowColor: '#1946a8',
-              borderWidth: 1, //设置外层边框
-              borderColor: '#1946a8',
-              shadowOffsetX: 5,
-              shadowOffsetY: 2,
-              shadowBlur: 1,
+              borderWidth: 2, //设置外层边框
+              borderColor: '#0b245b',
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              shadowBlur: 0,
             },
             emphasis: {
-              areaColor: '#1946a8',
-              borderColor: '#d4bc1d',
-              borderWidth: 2, //设置外层边框
+              areaColor: '#013d95',
+              borderColor: '#e7e1a0',
+              borderWidth: 4, //设置外层边框
             },
           },
         },
         series: [
-          {
-            name: '散点',
-            type: 'scatter',
-            coordinateSystem: 'geo',
-            data: this.convertData(data),
-            symbolSize: function (val) {
-              return 10
-            },
-            label: {
-              normal: {
-                formatter: '{b}',
-                position: [10, 10],
-                fontSize: 20,
-                fontFamily: 'Microsoft YaHei',
-                fontWeight: 600,
-                // fontStyle: 'italic',
-                color: '#fff',
-                show: true,
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: '#000',
-                borderWidth: 2,
-                borderColor: '#fff',
-              },
-            },
-          },
           {
             type: 'map',
-            map: this.mapName,
+            map: 'china',
             geoIndex: 0,
-            aspectScale: 1.5, //长宽比
-            showLegendSymbol: true, // 存在legend时显示
-            label: {
-              normal: {
-                show: true,
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  color: '#fff',
-                },
-              },
-            },
-            roam: true,
-            itemStyle: {
-              normal: {
-                areaColor: '#031525',
-                borderColor: '#3B5077',
-              },
-              emphasis: {
-                areaColor: '#2B91B7',
-              },
-            },
-            animation: false,
             data: data,
           },
         ],
@@ -4017,7 +3736,7 @@ let app = new Vue({
         if (params.name == '山西') {
           that.mapChart.dispose()
           that.centerShow = true
-          setTimeout(()=>{
+          setTimeout(() => {
             that.initChartC1()
             that.initChartC2()
             that.initChartC3()
@@ -4168,7 +3887,7 @@ let app = new Vue({
       var timer = null;
       var timer2 = null;
       var i = 0;
-    
+
       center7.forEach((item, index) => {
         let obj = {
           name: item.name,
@@ -4179,7 +3898,7 @@ let app = new Vue({
           color: index == 0 ? '#74a55d' : '#cea446'
         }
         chartData.push(obj)
-    
+
       })
       let that = this
       var chart = Highcharts.chart('echartC4', {
@@ -4195,10 +3914,10 @@ let app = new Vue({
             // load，图表加载完成时触发
             load: function () {
               var chart = this;
-    
+
               var points = chart.series[0].points;
               var len = points.length;
-    
+
               timer && clearInterval(timer);
               timer = setInterval(function () {
                 autoTooltip(points[i]);
@@ -4344,7 +4063,7 @@ let app = new Vue({
               mouseOut: function () { // 鼠标移出后需要继续执行轮播
                 var points = chart.series[0].points;
                 var len = points.length;
-    
+
                 timer && clearInterval(timer);
                 timer = setInterval(function () {
                   autoTooltip(points[i]);
@@ -4399,7 +4118,7 @@ let app = new Vue({
           data: chartData
         }]
       });
-    
+
       function autoTooltip (point) {
         chart.tooltip.refresh(point);
       }

investment/styles/investHomeGroup.css

@@ -495,7 +495,7 @@ div {
 }
 .CenterBox .tooltip-cont {
   margin: -15px;
-  border: 1px solid #3699ff;
+  border: 1px solid #69c0ff;
   border-radius: 8px;
   padding: 15px;
   background-color: rgb(39 122 145 / 0.36);