Przeglądaj źródła

首页样式调整及其它几个菜单页面的第一张大图显示调整

mork 2 tygodni temu
rodzic
commit
72c67d3700
4 zmienionych plików z 48 dodań i 29 usunięć
  1. 44 25
      src/views/HomePage.vue
  2. 2 2
      src/views/Sksjgl.vue
  3. 1 1
      src/views/skmh/index.vue
  4. 1 1
      src/views/yygl/index.vue

+ 44 - 25
src/views/HomePage.vue

@@ -97,7 +97,7 @@
                   <Back />
                 </el-icon>
               </el-button>
-              <el-date-picker v-model="chartMluTimeRange" type="daterange" range-separator="" start-placeholder="开始日期"
+              <el-date-picker v-model="chartMluTimeRange" type="daterange" range-separator="-" start-placeholder="开始日期"
                 end-placeholder="结束日期" @change="chartMluFocus()" />
             </span>
           </div>
@@ -213,15 +213,17 @@
           :style="`background-image: url(${useCaseItem.picture})`">
           <div class="use-case-empty"></div>
           <div class="use-case-text">
-            <el-tag v-for="item in useCaseItem.tags" :key="item" color="#e2e4f4" size="lager" effect="dark" round>
+            <el-tag v-for="item in useCaseItem.tags" style="margin-right: 5px;" :key="item" color="#e2e4f4" size="lager" effect="dark" round>
               <span class="blue">
                 {{ item }}
               </span>
             </el-tag>
             <span class="third-title">
-              {{ useCaseItem.title }}
+              <span style="padding: 10px 0px;">
+                {{ useCaseItem.title }}
+              </span>
             </span>
-            <p class="font grey">
+            <p class="font grey" style="padding-top: 0px !important;">
               {{ useCaseItem.text }}
             </p>
           </div>
@@ -339,9 +341,9 @@
     <div class="darkblue-background image-background col"
       :style="`background-Image:url('${require('@/assets/images/common/home-bg4.png')}');`">
       <div class="row" style="margin-top: auto;">
-        <ElButton type="primary">
+        <!-- <ElButton type="primary">
           了解更多
-        </ElButton>
+        </ElButton> -->
       </div>
     </div>
 
@@ -626,6 +628,11 @@ export default {
         tooltip: {
           trigger: "axis", // 坐标轴触发提示
           axisPointer: { type: "shadow" },
+          backgroundColor: "rgba(0, 25, 50, 0.8)",
+          borderColor: "#1E90FF",
+          textStyle: {
+            color: "#fff",
+          },
         },
         xAxis: {
           type: "category",
@@ -640,7 +647,7 @@ export default {
           splitLine: {
             lineStyle: {
               type: "dashed", // 虚线网格
-              color: "#fff",
+              color: "#113761",
             },
           },
         },
@@ -667,11 +674,11 @@ export default {
           trigger: 'axis',
           show: true,
           formatter: '{b}: {c}',
-          backgroundColor: 'rgba(50, 50, 50, 0.7)',
-          borderColor: '#333',
+          backgroundColor: "rgba(0, 25, 50, 0.8)",
+          borderColor: "#1E90FF",
           textStyle: {
-            color: '#fff'
-          }
+            color: "#fff",
+          },
         },
         title: {
           text: '所有委办',
@@ -695,7 +702,8 @@ export default {
         xAxis: [
           {
             type: 'value',
-            axisLine: { lineStyle: { color: "#fff" } }
+            // axisLine: { lineStyle: { color: "#fff" } },
+            splitLine: { show: false }, // 隐藏分割线
           }
         ],
         yAxis: [
@@ -991,6 +999,7 @@ export default {
 
 .middle {
   text-align: center;
+  margin-top: 20px;
 }
 
 .darkblue-background,
@@ -1036,15 +1045,15 @@ export default {
 
 .lighter-container {
   background-color: #eeeeee0b;
-  padding: 10px;
+  padding: 20px;
   margin: 15px;
   vertical-align: middle;
-  border-radius: 3%;
+  border-radius: 10px;
 }
 
 .lightblue-container {
-  border-radius: 3%;
-  padding: 10px;
+  border-radius: 10px;
+  padding: 20px;
   margin: 15px;
   background: linear-gradient(to bottom,
       #215476 0%,
@@ -1155,10 +1164,12 @@ export default {
 
 .third-title {
   font-size: 18px;
-  margin-top: 10px;
-  padding-left: 10px;
+  align-items: center;
   display: flex;
   font-weight: bold;
+  i{
+    margin-right: 5px;
+  }
 }
 
 .top-list {
@@ -1206,7 +1217,7 @@ export default {
   .use-case-text {
     padding: 15px;
     width: 100%;
-    height: 60%;
+    height: 50%;
     border-radius: 10px;
     box-sizing: border-box;
     background: linear-gradient(to bottom,
@@ -1222,7 +1233,7 @@ export default {
 
 .six-router {
   width: 30%;
-  height: 300px;
+  // height: 300px;
   font-size: 28px;
 
   .third-title {
@@ -1231,8 +1242,10 @@ export default {
 }
 
 .circle-number {
-  display: block;
-  background-color: #eeeeee1d;
+  // display: block;
+  margin-right: 10px;
+  background-color: #eeeeee00;
+  border: 1px solid #2272d4;  
 }
 
 .block-page-router {
@@ -1256,10 +1269,12 @@ export default {
 
 .grey {
   color: rgb(192, 192, 192);
+  padding: 20px 0px;
 }
 
 .lightgrey {
   color: rgb(229, 229, 229);
+  padding: 20px 0px
 }
 
 #echart1 {
@@ -1281,13 +1296,14 @@ export default {
   position: relative;
 
   .part1 {
-    height: 810px;
+    width: 100%;
+    height: calc(100vh - 120px);
     background: url(~@/assets/images/common/home-bg1.png) no-repeat center;
     position: relative;
     overflow: hidden;
 
     .part1-1 {
-      width: 1000px;
+      width: 100%;
       height: 200px;
       //background: #09284c;
       margin: 0 auto;
@@ -1309,7 +1325,10 @@ export default {
         .number-item {
           width: 57px;
           height: 70px;
-          background-color: #007bff;
+          background-color: rgb(10 71 137 / 70%);
+          border: 1px solid #2663a5;
+          box-shadow: 0 4px 20px #2663a5;
+          border-radius: 10px;
           color: white;
           display: flex;
           justify-content: center;

+ 2 - 2
src/views/Sksjgl.vue

@@ -2,7 +2,7 @@
   <div class="sksjgl container">
     <div class="server_title">
       <el-image
-        style="width: 824px; height: 786px"
+        style="width: 50%; height: calc(100vh - 120px)"
         src="static/images/sksjgl/sksjgl_title.png"
         fit="cover"
       />
@@ -200,7 +200,7 @@ export default {
 
     .server_title_text {
       width: calc(100vw - 824px);
-      height: 786px;
+      height: calc(100vh - 120px);
       background-color: #1c2631;
       color: #fff;
       padding: 0 160px 0 60px;

+ 1 - 1
src/views/skmh/index.vue

@@ -911,7 +911,7 @@ export default {
 }
 .server_title_text {
   width: calc(100vw - 824px);
-  height: 786px;
+  height: calc(100vh - 120px);
   background-color: #1c2631;
   color: #fff;
   padding: 0 160px 0 60px;

+ 1 - 1
src/views/yygl/index.vue

@@ -118,7 +118,7 @@ export default {
 /* 顶部横幅样式 */
 .banner {
   width: 100%;
-  height: 786px;
+  height: calc(100vh - 120px);
   background: url(~@/assets/images/common/u720.png) no-repeat center center;
   background-size: cover;
   display: flex;