代码提交-glj

src/views/dataService/visualData/index.vue

@@ -61,8 +61,8 @@
                 </el-table>
                 <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                   :pager-count="3" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
-                  background v-model:page-size="state.tableData.param.pageSize"
-                  layout="total, sizes, prev, pager, next" :total="state.tableData.total">
+                  background v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next"
+                  :total="state.tableData.total">
                 </el-pagination>
               </el-tab-pane>
               <el-tab-pane label="hotspot" name="second">
@@ -82,8 +82,8 @@
                 </el-table>
                 <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                   :pager-count="3" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
-                  background v-model:page-size="state.tableData.param.pageSize"
-                  layout="total, sizes, prev, pager, next" :total="state.tableData.total">
+                  background v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next"
+                  :total="state.tableData.total">
                 </el-pagination>
               </el-tab-pane>
             </el-tabs>
@@ -366,6 +366,7 @@ onMounted(() => {
   font-size: 32px;
   font-weight: 600;
 }
+
 .mt15 {
   display: flex;
   justify-content: end;

src/views/home/index.vue

@@ -1,44 +1,31 @@
 <template>
   <div class="home-container layout-pd">
     <!-- 第一行 -->
-    <el-row :gutter="15"
-            class="home-card-one mb15">
-      <el-col :xs="24"
-              :sm="12"
-              :md="12"
-              :lg="6"
-              :xl="6"
-              v-for="(v, k) in state.homeOne"
-              :key="k"
+    <!-- 第一行 -->
+    <el-row :gutter="15" class="home-card-one mb15">
+      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in state.homeOne" :key="k"
         :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
         <div class="home-card-item flex">
-          <div class="flex-margin flex w100"
-               :class="` home-one-animation${k}`">
+          <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
             <div class="flex-auto">
               <span class="font30">{{ v.num1 }}</span>
-              <span class="ml5 font16"
-                    :style="{ color: v.color1 }">{{ v.num2 }}</span>
+              <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}</span>
               <div class="mt10">{{ v.num3 }}</div>
             </div>
-            <div class="home-card-item-icon flex"
-                 :style="{ background: `var(${v.color2})` }">
-              <i class="flex-margin font32"
-                 :class="v.num4"
-                 :style="{ color: `var(${v.color3})` }"></i>
+            <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
+              <i class="flex-margin font32" :class="v.num4" :style="{
+                  color: `var(${v.color3})`, width: '44px', height: '44px', background: 'url(\'/home/' + (k + 1) + '.png\') no-repeat',
+                  backgroundSize: '70% 70%', backgroundPosition: 'center'
+                }"></i>
             </div>
           </div>
         </div>
       </el-col>
     </el-row>
     <!-- 第二行 -->
-    <el-row :gutter="15"
-            class="home-card-two mb15">
+    <el-row :gutter="15" class="home-card-two mb15">
       <!-- 后台响应须知 -->
-      <el-col :xs="24"
-              :sm="10"
-              :md="10"
-              :lg="8"
-              :xl="8">
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
         <div class="home-card-item">
           <div class="home-card-item-title">Notes on Background Response</div>
           <div class="home-monitor">
@@ -55,52 +42,30 @@
         </div>
       </el-col>
       <!-- 全年用户申请量统计 -->
-      <el-col :xs="24"
-              :sm="14"
-              :md="14"
-              :lg="16"
-              :xl="16">
+      <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
         <div class="home-card-item">
-          <div style="height: 100%"
-               ref="homeBarRef"></div>
+          <div style="height: 100%" ref="homeBarRef"></div>
         </div>
       </el-col>
     </el-row>
     <!-- 第三行 -->
-    <el-row :gutter="15"
-            class="home-card-three">
+    <el-row :gutter="15" class="home-card-three">
       <!-- 灾害发生区域占比 饼图-->
-      <el-col :xs="24"
-              :sm="10"
-              :md="10"
-              :lg="6"
-              :xl="6">
+      <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
         <div class="home-card-item">
-          <div style="height: 100%"
-               ref="homePieRef"></div>
+          <div style="height: 100%" ref="homePieRef"></div>
         </div>
       </el-col>
       <!-- 灾害响应月分布量变化 折线图 -->
-      <el-col :xs="24"
-              :sm="14"
-              :md="14"
-              :lg="12"
-              :xl="12"
-              class="home-media">
+      <el-col :xs="24" :sm="14" :md="14" :lg="12" :xl="12" class="home-media">
         <div class="home-card-item">
-          <div style="height: 100%"
-               ref="homeLineRef"></div>
+          <div style="height: 100%" ref="homeLineRef"></div>
         </div>
       </el-col>
       <!-- 灾害类型占比 -->
-      <el-col :xs="24"
-              :sm="10"
-              :md="10"
-              :lg="6"
-              :xl="6">
+      <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
         <div class="home-card-item">
-          <div style="height: 100%"
-               ref="homePieRef2"></div>
+          <div style="height: 100%" ref="homePieRef2"></div>
         </div>
       </el-col>
 
@@ -138,7 +103,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'Number of Disaster Response Applications',
-      num4: 'fa fa-meetup',
+      num4: 'iconfont',
       color1: '#FF6462',
       color2: '--next-color-primary-lighter',
       color3: '--el-color-primary',
@@ -147,7 +112,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'Actual times of disaster response',
-      num4: 'iconfont icon-ditu',
+      num4: 'iconfont',
       color1: '#6690F9',
       color2: '--next-color-success-lighter',
       color3: '--el-color-success',
@@ -156,7 +121,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'User Visits',
-      num4: 'iconfont icon-zaosheng',
+      num4: 'iconfont',
       color1: '#6690F9',
       color2: '--next-color-warning-lighter',
       color3: '--el-color-warning',
@@ -165,7 +130,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'Data downloads',
-      num4: 'fa fa-github-alt',
+      num4: 'iconfont',
       color1: '#FF6462',
       color2: '--next-color-danger-lighter',
       color3: '--el-color-danger',
@@ -633,8 +598,10 @@ watch(
 
 <style scoped lang="scss">
 $homeNavLengh: 8;
+
 .home-container {
   overflow: hidden;
+
   .home-card-one,
   .home-card-two,
   .home-card-three {
@@ -648,19 +615,23 @@ $homeNavLengh: 8;
       background: var(--el-color-white);
       color: var(--el-text-color-primary);
       border: 1px solid var(--next-border-color-light);
+
       &:hover {
         box-shadow: 0 2px 12px var(--next-color-dark-hover);
         transition: all ease 0.3s;
       }
+
       &-icon {
         width: 70px;
         height: 70px;
         border-radius: 100%;
         flex-shrink: 1;
+
         i {
           color: var(--el-text-color-placeholder);
         }
       }
+
       &-title {
         font-size: 15px;
         font-weight: bold;
@@ -668,6 +639,7 @@ $homeNavLengh: 8;
       }
     }
   }
+
   .home-card-one {
     @for $i from 0 through 3 {
       .home-one-animation#{$i} {
@@ -679,18 +651,22 @@ $homeNavLengh: 8;
       }
     }
   }
+
   .home-card-two,
   .home-card-three {
     .home-card-item {
       height: 400px;
       width: 100%;
       overflow: hidden;
+
       .home-monitor {
         height: 100%;
+
         .flex-warp-item {
           width: 25%;
           height: 111px;
           display: flex;
+
           .flex-warp-item-box {
             margin: auto;
             text-align: center;
@@ -700,11 +676,13 @@ $homeNavLengh: 8;
             background: var(--next-bg-color);
             cursor: pointer;
             transition: all 0.3s ease;
+
             &:hover {
               background: var(--el-color-primary-light-9);
               transition: all 0.3s ease;
             }
           }
+
           @for $i from 0 through $homeNavLengh {
             .home-animation#{$i} {
               opacity: 0;