fix : 优化首页样式

src/views/home/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="home-bg" v-if="AuthStore.roles.length">
     <el-row gutter="10">
-      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
+      <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
         <div class="top-left">
           <el-card shadow="never">
             <div class="notice-title">早上好，小i提醒您<span>有<span>{{ taskTabList[0].num }}</span>个审批待立项</span></div>
             <el-row class="statistics">
-              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="(item,index) in taskTabList" :key="index">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="(item,index) in taskTabList" :key="index">
                 <div class="block" :style="{'background-image':'url('+getImgUrl(item.icon)+')'}"
                      @click="clickGotoListPage(item)">
                   <div class="block-right">
@@ -131,7 +131,7 @@
           </el-card>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
+      <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
         <div class="right">
           <div class="right-top ">
             <div class="title-block">
@@ -948,8 +948,39 @@ const handleView = (row) => {
 </script>
 
 <style lang="scss" scoped>
+@media only screen and (max-width: 1500px) {
+  .statistics {
+    .block {
+      width: 300px!important;
+    }
+  }
 
-@media only screen and (max-width: 767px) {
+}
+@media only screen and (max-width: 1420px) {
+  .statistics {
+    .block {
+      width: 280px!important;
+    }
+  }
+
+}
+@media only screen and (max-width: 1344px) {
+  .statistics {
+    .block {
+      width: 260px!important;
+    }
+  }
+
+}
+@media only screen and (max-width: 1270px) {
+  .statistics {
+    .block {
+      width: 240px!important;
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
   .right {
     margin-top: 10px;
   }
@@ -959,6 +990,18 @@ const handleView = (row) => {
   .todo-bg {
     margin-top: 10px;
   }
+  .statistics {
+    .block {
+      width: 320px!important;
+    }
+  }
+}
+@media only screen and (max-width: 1120px) {
+  .statistics {
+    .block {
+      width: 290px!important;
+    }
+  }
 }
 
 @media only screen and (max-width: 1000px) {
@@ -971,10 +1014,9 @@ const handleView = (row) => {
   .todo-bg {
     margin-top: 10px;
   }
-
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 767px) {
   .right {
     margin-top: 10px;
   }
@@ -984,8 +1026,8 @@ const handleView = (row) => {
   .todo-bg {
     margin-top: 10px;
   }
-
 }
+
 * {
   font-family: Source Sans Pro, Source Sans Pro;
 }
@@ -1172,9 +1214,10 @@ const handleView = (row) => {
       margin-top: 10px;
 
       .todo-content {
+        height: 202px;
         overflow-x: auto;
         margin: 0 12px 0 19px;
-        padding: 0 0 10px 0;
+        //padding: 0 0 10px 0;
         display: flex;
         align-items: center;
         justify-content: flex-start;
@@ -1198,11 +1241,11 @@ const handleView = (row) => {
 
         .todo-border {
           padding: 13px;
-          width: 180px;
+          width: 172px;
           background: rgba(73, 171, 239, 0.05);
           border-radius: 8px 8px 8px 8px;
           border: 1px solid #D0D0E3;
-          margin-right: 23px;
+          margin-right: 28px;
           font-size: 14px;
 
           &:last-child {
@@ -1216,7 +1259,7 @@ const handleView = (row) => {
           .gray-time {
             display: flex;
             flex-direction: column;
-            align-items: flex-end;
+            //align-items: flex-end;
             font-weight: 400;
             color: rgba(0, 0, 0, 0.5);
             letter-spacing: 1px;
@@ -1227,6 +1270,7 @@ const handleView = (row) => {
               color: #1F63E6;
               white-space: nowrap;
               cursor: pointer;
+              text-align: right;
 
               &:hover {
                 text-decoration: underline;
@@ -1243,6 +1287,7 @@ const handleView = (row) => {
             }
 
             .time {
+              width: 80px;
               margin-left: 23px;
               &:last-child{
                 white-space: nowrap;
@@ -1309,6 +1354,7 @@ const handleView = (row) => {
         cursor: pointer;
         display: flex;
         align-items: center;
+        width: 320px;
         height: 170px;
         background-size: 100% 100%;
         background-repeat: no-repeat;
@@ -1405,6 +1451,7 @@ const handleView = (row) => {
 
   .notice-block {
     height: 452px;
+    //height: 100%;
     overflow-y: auto;
     //margin-top: 10px;
 
@@ -1426,7 +1473,7 @@ const handleView = (row) => {
     }
 
     .notice {
-      min-width: 300px;
+      //min-width: 300px;
       height: 75px;
       line-height: 75px;
       padding: 0 15px;
@@ -1451,16 +1498,17 @@ const handleView = (row) => {
   }
 
   .right {
-    height: 100%;
+    //height: 100%;
     //height: calc(100vh - 130px);
     display: flex;
+    //flex: 0.5;
     flex-direction: column;
     justify-content: space-between;
 
     .right-top {
-      height: 100%;
-      //height: 473px;
-      //flex: 0.61;
+      //height: 100%;
+      height: 513px;
+      //flex: 0.7;
       overflow: hidden;
       border-radius: 10px;
       background-color: #ffffff;