按客户要求更新页面

src/views/HomePage.vue

@@ -6,11 +6,11 @@
         <div style="padding: 10px;font-size: 14px;height:300px;cursor: pointer;display: flex;justify-content: center;align-items: center;">
           <el-steps direction="vertical" :active="activeIndex">
             <el-step title="顶部" @click="goAnchor('top')" :icon="Edit"/>
-            <el-step title="应用案例" @click="goAnchor('yyal')" :icon="Edit"/>
+            <!-- <el-step title="应用案例" @click="goAnchor('yyal')" :icon="Edit"/> -->
             <el-step title="基础能力" @click="goAnchor('jcnl')" :icon="Edit"/>
             <el-step title="平台自建" @click="goAnchor('ptzj')" :icon="Edit"/>
             <el-step title="业务支撑" @click="goAnchor('ywzc')" :icon="Edit"/>
-            <el-step title="六大核心" @click="goAnchor('hxgn')" :icon="Edit"/>
+            <!-- <el-step title="六大核心" @click="goAnchor('hxgn')" :icon="Edit"/> -->
           </el-steps>
           
         </div>
@@ -83,6 +83,35 @@
           </div>
         </div>
       </div>
+
+      <div class="row" style="margin-top: 50px;margin-bottom: 50px;justify-content: space-between;">
+        <div class="al-container">
+          <div class="al-container-border">
+            <div>
+              <div class="strong-data text-color"><NumberScroll :value="3212560" :duration="2000" />次</div>
+              <div class="font text-color">地名地址</div>
+            </div>
+          </div>
+        </div>
+        <div class="al-container">
+          <div class="al-container-border">
+            <div>
+              <div class="strong-data  text-color"><NumberScroll :value="2362106" :duration="2000" />次</div>
+              <div class="font text-color">坐标转换</div>
+            </div>
+          </div>
+        </div>
+        <div class="al-container">
+          <div class="al-container-border">
+            <div>
+              <div class="strong-data text-color"><NumberScroll :value="8625997" :duration="2000" />次</div>
+              <div class="font text-color">地图服务</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
       <div class="second-title ">
         服务调用趋势(近30天)
       </div>
@@ -102,20 +131,20 @@
           </div>
           <div class="grid-2x2">
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue"><NumberScroll :value="weekCall" :duration="2000" /></div>
-              <div class="title-sub ">近一周总调用</div>
+              <div class="strong-data  white"><NumberScroll :value="weekCall" :duration="2000" /></div>
+              <div class="title-sub white">近一周总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue"><NumberScroll :value="monthCall" :duration="2000" /></div>
-              <div class="title-sub ">近一月总调用</div>
+              <div class="strong-data  white"><NumberScroll :value="monthCall" :duration="2000" /></div>
+              <div class="title-sub white">近一月总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue"><NumberScroll :value="seasonCall" :duration="2000" /></div>
-              <div class="title-sub ">近三月总调用</div>
+              <div class="strong-data  white"><NumberScroll :value="seasonCall" :duration="2000" /></div>
+              <div class="title-sub white">近三月总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue"><NumberScroll :value="yearCall" :duration="2000" /></div>
-              <div class="title-sub ">近一年总调用</div>
+              <div class="strong-data  white"><NumberScroll :value="yearCall" :duration="2000" /></div>
+              <div class="title-sub white">近一年总调用</div>
             </div>
           </div>
         </div>
@@ -158,7 +187,7 @@
                     {{ index }}
                   </el-avatar>
                   <div class="font" style="flex-grow: 100;">{{ resourceTop[index - 1].name }}</div>
-                  <div class="font blue">{{ resourceTop[index - 1].value }}</div>
+                  <div class="font number-color">{{ resourceTop[index - 1].value }}</div>
                 </template>
               </div>
             </div>
@@ -169,7 +198,7 @@
                     {{ index + 5 }}
                   </el-avatar>
                   <div class="font" style="flex-grow: 100;">{{ resourceTop[index + 4].name }}</div>
-                  <div class="font blue">{{ resourceTop[index + 4].value }}</div>
+                  <div class="font number-color">{{ resourceTop[index + 4].value }}</div>
 
                 </template>
               </div>
@@ -191,14 +220,14 @@
                   {{ index }}
                 </el-avatar>
                 <div class="font" style="flex-grow: 100;">{{ userTop[index - 1].name }}</div>
-                <div class="font blue">{{ userTop[index - 1].value }}</div>
+                <div class="font number-color">{{ userTop[index - 1].value }}</div>
               </template>
             </div>
           </div>
         </div>
       </div>
-
-      <div class="title " style="margin-top:90px ;" id="yyal">应用案例</div>
+      
+      <!-- <div class="title " style="margin-top:90px ;" id="yyal">应用案例</div>
       <div class="title-sub ">技术创新与政务需求深度融合，打造高效、安全、可扩展的时空数据安全平台</div>
 
       <div class="row" style="margin-top: 90px;justify-content: space-between;">
@@ -226,7 +255,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
 
       <div v-for="useCaseItem in examplelist" :key="useCaseItem.title" :id="useCaseItem.title === '基础能力' ? 'jcnl' : useCaseItem.title === '平台自建' ? 'ptzj' : useCaseItem.title === '业务支撑' ? 'ywzc' : ''">
         <div class="title " style="margin-top:90px;margin-bottom: 20px;">{{useCaseItem.title}}</div>
@@ -240,6 +269,7 @@
           </div>
         </div>
       </div>
+      <div style="height: 90px;width: 100%;"></div>
 
       <!-- <el-tabs v-model="activeUseCase" class="usecase-tabs" @tab-click="handleClick" stretch="true">
         <el-tab-pane label="dataProcass" name="dataProcass">
@@ -294,14 +324,13 @@
       </div>
       -->
 
-      <div class="title " style="margin-top:90px ;" id="hxgn">实践与探索·六大核心功能</div>
+      <!-- <div class="title " style="margin-top:90px ;" id="hxgn">实践与探索·六大核心功能</div>
       <div class="title-sub ">聚焦政务场景痛点，打造从数据治理到应用落地的全链路创新解决方案</div>
 
       <div class="row" style="margin-top: 36px;">
         <div class="lightblue-container six-router">
           <div class="lightblue-container-boder">
           <div class="img-container">
-            <!-- <div class="img-border"></div> -->
             <img
               :src="require('@/assets/images/common/gn/1.png')"
               mode="scaleToFill"
@@ -347,7 +376,7 @@
         </div>
       </div>
       <div class="row" style="margin-bottom: 50px;">
-        <div class="lightblue-container six-router">
+        <div class="lightblue-container six-router" style="width: 47%;">
           <div class="lightblue-container-boder">
             <div class="img-container">
               <img
@@ -362,7 +391,7 @@
             </div>
         </div>
         </div>
-        <div class="lightblue-container six-router">
+        <div class="lightblue-container six-router" style="width: 47%;">
           <div class="lightblue-container-boder">
             <div class="img-container">
               <img
@@ -392,7 +421,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <!-- <div class="dark-background">
       <div class="row">
@@ -561,18 +590,19 @@ export default {
       lastDayCall: "239566",
       totalCall: ["0", "0", "0", ",", "0", "0", "0"],
       totalCallNumber: "18,659,623",
-      sections: ['top', 'yyal', 'jcnl', 'ptzj', 'ywzc', 'hxgn'],
+      // sections: ['top', 'yyal', 'jcnl', 'ptzj', 'ywzc', 'hxgn'],
+      sections: ['top', 'jcnl', 'ptzj', 'ywzc', 'hxgn'],
       affixOptions: [
         {
           title: '顶部',
           type: 'top',
           index:1,
         },
-        {
-          title: '应用案例',
-          type: 'yyal',
-          index:2,
-        },
+        // {
+        //   title: '应用案例',
+        //   type: 'yyal',
+        //   index:2,
+        // },
         {
           title: '基础能力',
           type: 'jcnl',
@@ -840,10 +870,44 @@ export default {
             name: "调用总数",
             type: "line",
             data: values, // 模拟数据
+            smooth: true,
             lineStyle: { color: "#42a5f5" }, // 蓝色线条
-            itemStyle: { color: "#42a5f5" }, // 节点颜色
+            itemStyle: { 
+              color: "#42a5f5",
+              borderColor: "rgba(66, 165, 245, 0.5)",
+              borderWidth: 12, 
+            }, // 节点颜色
             symbol: "circle", // 节点形状
             symbolSize: 6, // 节点大小
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#42a5f5",
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(15, 52, 96,  0.8)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)",
+                shadowBlur: 10,
+              },
+            }
           },
         ],
       };
@@ -886,8 +950,13 @@ export default {
         xAxis: [
           {
             type: 'value',
-            // axisLine: { lineStyle: { color: "#fff" } },
-            splitLine: { show: false }, // 隐藏分割线
+            // axisLine: { lineStyle: { color: "red" } },
+            // splitLine: { show: false }, // 隐藏分割线
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
           }
         ],
         yAxis: [
@@ -895,7 +964,12 @@ export default {
             type: 'category',
             axisLine: { lineStyle: { color: "#fff" } },
             inverse: true,
-            data: [""]
+            data: [""],
+            splitLine: {
+              lineStyle: {
+                color:"red"
+              },
+            },
           }
         ],
         series: [
@@ -912,7 +986,7 @@ export default {
             type: 'inside', // 内置型，可以用鼠标滚轮缩放
             yAxisIndex: 0,
             zoomOnMouseWheel: false, // 滚轮缩放
-            moveOnMouseWheel: true, // 滚轮移动
+            moveOnMouseWheel: false, // 滚轮移动
             zoomLock: false,
             minValueSpan: 12, // 最小显示数据数量
             maxValueSpan: 12 // 最大显示数据数量
@@ -1245,7 +1319,7 @@ export default {
 .bluedark-background,
 .blue-background,
 .image-background {
-  padding-top: 40px;
+  padding-top: 0px;
   padding-bottom: 40px;
   margin-left: 0;
   padding-left: 120px;
@@ -1254,7 +1328,7 @@ export default {
 }
 
 .darkblue-background {
-  background: linear-gradient(to bottom, #00002f, #060633, #0f3460, #0f3460);
+  background: linear-gradient(to bottom, #00002a, #060633, #0f3460, #0f3460);
   // background: linear-gradient(to bottom,
   //     #01012f 0%,
   //     #0f3460 40%,
@@ -1407,6 +1481,12 @@ export default {
   flex-direction: column;
   padding: 0;
   align-items: stretch;
+  border: 2px solid transparent;
+  border-radius: 12px;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(330deg, #050532, #2220), linear-gradient(330deg, #ffffff, #00000000, #00000000, #00000000);
+  transition: all 0.3s ease;
 }
 
 .row,
@@ -1600,6 +1680,12 @@ export default {
 .blue {
   color: #3498db;
 }
+.white{
+  color: #fff;
+}
+.number-color{
+  color: #ade8fe;
+}
 
 .grey {
   color: rgb(192, 192, 192);