chore: 首页布局颜色修改

src/views/home/components/box1 copy/index.vue

@@ -55,6 +55,9 @@ export default {
         legend: {
           top: "5%",
           left: "center",
+          textStyle: {
+            color: "#fff",
+          },
         },
         grid: {
           left: "2%", //图表距离容器左侧多少距离
@@ -108,5 +111,6 @@ export default {
 .c-title {
   border-left: 4px solid rgb(64, 158, 255);
   padding-left: 10px;
+  color: #fff;
 }
 </style>

src/views/home/components/box1/index.vue

@@ -52,9 +52,19 @@ export default {
         xAxis: {
           type: "category",
           data: this.chartOptions.xData,
+          axisLine: {
+            lineStyle: {
+              color: "#fff", // 设置 y 轴线的颜色为红色
+            },
+          },
         },
         yAxis: {
           type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff", // 设置 y 轴线的颜色为红色
+            },
+          },
         },
         series: [
           {
@@ -81,5 +91,6 @@ export default {
 .c-title {
   border-left: 4px solid rgb(64, 158, 255);
   padding-left: 10px;
+  color: #fff;
 }
 </style>

src/views/home/components/map/index.vue

@@ -6,11 +6,13 @@
       <el-button type="primary" style="margin-left: 4px">导出</el-button>
       <el-button @click="back" type="text">返回></el-button>
     </div>
-    <div id="hy-map" style="width: 100%; height: 80%"></div>
-    <div class="item-container">
-      <div class="item" v-for="(ite, i) in itemData" :key="i">
-        <div class="val">121</div>
-        <div class="lab">数据</div>
+    <div style="display: flex; justify-content: space-between; height: 100%">
+      <div id="hy-map" style="width: 65%; height: 90%"></div>
+      <div class="item-container">
+        <div class="item" v-for="(ite, i) in itemData" :key="i">
+          <div class="val">121</div>
+          <div class="lab">数据</div>
+        </div>
       </div>
     </div>
   </div>
@@ -181,22 +183,29 @@ export default {
 </script>
 <style lang="scss" scoped>
 .item-container {
+  // height: 20%;
+  height: 90%;
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  // flex-direction: column;
+  // align-content: space-between;
+  // justify-content: space-between;
   .item {
-    flex: 0 0 25%;
+    flex: 0 0 50%;
     text-align: center;
     display: flex;
     flex-direction: column;
+    color: #fff;
     align-items: center;
     .val {
-      width: 50px;
-      height: 50px;
+      width: 65px;
+      height: 65px;
       text-align: center;
-      line-height: 50px;
+      line-height: 65px;
       color: #fff;
       border-radius: 50%;
-      background-image: linear-gradient(to bottom, #add8e6, #0000ff);
+      background-image: linear-gradient(to bottom, #a3c1ee, #2c71d7);
       margin-bottom: 8px;
     }
   }

src/views/home/components/points-ranking/index.vue

@@ -49,8 +49,14 @@ export default {
 .c-title {
   border-left: 4px solid rgb(64, 158, 255);
   padding-left: 10px;
+  color: #fff;
 }
 .ranking-c {
   height: 100%;
 }
+::v-deep {
+  .el-table tr {
+    background-color: transparent !important;
+  }
+}
 </style>

src/views/home/index.vue

@@ -1,18 +1,21 @@
 <template>
-  <div class="app-container">
+  <div class="map-container">
     <el-row :gutter="10">
-      <el-col :span="8" class="h-full-calc">
-        <el-card style="height: 100%">
+      <el-col :span="12" class="h-full-calc">
+        <el-card class="h-40">
           <PointsRanking></PointsRanking>
         </el-card>
+        <el-card class="h-60 mt-10">
+          <MapHy></MapHy>
+        </el-card>
       </el-col>
-      <el-col :span="8" class="h-full-calc">
+      <!-- <el-col :span="8" class="h-full-calc">
         <el-card class="h-full">
           <MapHy></MapHy>
         </el-card>
-      </el-col>
-      <el-col :span="8" class="h-full-calc">
-        <el-card class="h-48">
+      </el-col> -->
+      <el-col :span="12" class="h-full-calc">
+        <el-card class="h-40">
           <Box2
             v-if="chartOptions.data && chartOptions.data.length > 0"
             :chartOptions="chartOptions"
@@ -20,7 +23,7 @@
           ></Box2>
           <el-empty v-else></el-empty>
         </el-card>
-        <el-card class="h-48 mt-10">
+        <el-card class="h-60 mt-10">
           <Box1
             v-if="chartOptions.data && chartOptions.data.length > 0"
             :chartOptions="chartOptions"
@@ -76,7 +79,10 @@ export default {
 .mt-10 {
   margin-top: 10px;
 }
-
+.map-container {
+  padding: 15px;
+  background-color: rgba(11, 42, 96, 0.8);
+}
 .h-full-calc {
   height: calc(100vh - 200px);
 }
@@ -89,6 +95,12 @@ export default {
 .el-card {
   height: 100%;
 }
+.h-40 {
+  height: calc(40% - 5px);
+}
+.h-60 {
+  height: calc(60% - 5px);
+}
 .h-48 {
   height: calc(50% - 5px);
 }
@@ -99,5 +111,20 @@ export default {
   .el-card__body {
     height: 100%;
   }
+  .el-card {
+    border: none;
+    background-color: rgba(11, 42, 96, 0);
+  }
+  .el-table {
+    background-color: transparent;
+    color: white;
+  }
+  .el-table tr {
+    background-color: transparent !important;
+  }
+  .el-table th {
+    color: white;
+    background-color: transparent !important;
+  }
 }
 </style>

src/views/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="content">
+  <div
+    class="content"
+    :style="{ padding: $store.state.user.homeType === 1 ? '0px' : '15px 15p' }"
+  >
     <div v-if="$store.state.user.homeType === 1">
       <mapHome />
     </div>