样式更改

src/views/middle.vue

@@ -7,7 +7,9 @@
           <div class="header_container">
             <p>您好，黎瀛&nbsp;&nbsp;&nbsp;&nbsp;｜&nbsp;&nbsp;&nbsp;&nbsp;</p>
             <p>
-              {{ dmUser.user.dept.name }}&nbsp;&nbsp;&nbsp;&nbsp;｜&nbsp;&nbsp;&nbsp;&nbsp;
+              {{
+                dmUser.user.dept.name
+              }}&nbsp;&nbsp;&nbsp;&nbsp;｜&nbsp;&nbsp;&nbsp;&nbsp;
             </p>
             <p @click="open">注销</p>
           </div>
@@ -66,8 +68,8 @@
       <el-col :span="24" class="mt_20 table_box">
         <div class="each_card_box">
           <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <h3>最近通行记录</h3>
+            <div class="clearfix">
+              <h3 class="title_class">最近通行记录</h3>
             </div>
             <el-table
               :data="currentTableData"
@@ -83,8 +85,8 @@
         </div>
         <div class="each_card_box">
           <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <h3>最近消费记录</h3>
+            <div class="clearfix">
+              <h3 class="title_class">最近消费记录</h3>
             </div>
             <el-table
               :data="consumptionTableData"
@@ -101,8 +103,8 @@
         </div>
         <div class="each_card_box">
           <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <h3>最近访客预约记录</h3>
+            <div class="clearfix">
+              <h3 class="title_class">最近访客预约记录</h3>
             </div>
             <el-table
               :data="visitorTableData"
@@ -117,9 +119,11 @@
           </el-card>
         </div>
       </el-col>
-      <el-col :span="24" class="mt_20">
-        <h3 class="title">快捷功能入口</h3>
+      <el-col :span="24" class="">
         <el-card class="box-card" style="margin-top: 10px">
+          <div slot="header" class="clearfix">
+            <h3 class="title_class">快捷功能入口</h3>
+          </div>
           <div class="fastEnter">
             <ul>
               <li
@@ -136,8 +140,10 @@
       </el-col>
       <!--  -->
       <el-col :span="24" class="mt_20 system">
-        <h3 class="title">系统功能入口</h3>
         <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <h3 class="title_class">系统功能入口</h3>
+          </div>
           <ul>
             <li
               v-for="item in systemList"
@@ -173,7 +179,7 @@
               <p>中国—东盟信息港股份有限公司 技术支持</p>
               <div class="police">
                 <img src="../assets/images/police.png" alt="">
-                <p>桂公网安备45010802000099号                桂ICP备16005301号-7</p>
+                <p>桂公网安备45010802000099号 桂ICP备16005301号-7</p>
               </div>
             </div>
           </div>
@@ -445,7 +451,7 @@ export default {
         height: 60px;
         margin-right: 15px;
       }
-      p{
+      p {
         line-height: 60px;
       }
       .company_name {
@@ -467,6 +473,7 @@ export default {
         }
       }
       .userInfo {
+        width: 100%;
         .name {
           font-family: MicrosoftYaHeiUI;
           font-size: 18px;
@@ -479,7 +486,7 @@ export default {
           display: flex;
           font-size: 16px;
           p {
-            margin-right: 80px;
+            margin-right: 50px;
 
             span {
               margin-right: 5px;
@@ -504,8 +511,6 @@ export default {
               width: 15px;
               height: 15px;
               margin-right: 5px;
-              background-color: #ccc;
-              color: #fff;
               padding: 3px;
               border-radius: 50%;
             }
@@ -528,11 +533,8 @@ export default {
               width: 32px;
               height: 32px;
               margin-right: 5px;
-              // background-color: #ccc;
-              // color: #fff;
               padding: 3px;
               border-radius: 50%;
-              border: 1px solid red;
             }
             .world {
               // margin-left: 20px;
@@ -555,7 +557,10 @@ export default {
       }
     }
     .table_box {
+      background-color: #fff;
       display: flex;
+      padding: 10px;
+      box-sizing: border-box;
       .each_card_box {
         width: 33.33%;
         padding: 5px;
@@ -565,40 +570,55 @@ export default {
     .fastEnter {
       width: 100%;
       ul {
-        margin-top: 20px;
+        // margin-top: 20px;
         list-style: none;
         display: flex;
         flex-wrap: wrap;
         background-color: #fff;
-        padding: 10px 0 30px;
+        padding: 00px 0 20px;
         box-sizing: border-box;
         li {
-          margin-top: 20px;
+          // margin-top: 20px;
           width: calc(100% / 8);
           text-align: center;
+          img {
+            width: 75px;
+            height: 75px;
+          }
           p {
-            margin-top: 10px;
+            // margin-top: 10px;
+            font-family: MicrosoftYaHeiUI;
+            font-size: 15px;
+            color: rgba(0, 0, 0, 0.45);
+            font-weight: 400;
           }
         }
       }
     }
     .system {
       .box-card {
-        margin-top: 20px;
+        margin-top: 5px;
         ul {
-          margin-top: 20px;
+          // margin-top: 20px;
           list-style: none;
           display: flex;
           flex-wrap: wrap;
-          background-color: #fff;
-          padding: 10px 0 30px;
+          padding: 0px 0 10px;
           box-sizing: border-box;
           li {
-            margin-top: 20px;
+            img {
+              width: 75px;
+              height: 75px;
+            }
+            // margin-top: 20px;
             width: calc(100% / 8);
             text-align: center;
             p {
-              margin-top: 10px;
+              // margin-top: 10px;
+              font-family: MicrosoftYaHeiUI;
+              font-size: 15px;
+              color: rgba(0, 0, 0, 0.45);
+              font-weight: 400;
             }
           }
         }
@@ -644,27 +664,42 @@ export default {
       align-items: center;
       .footer_left {
         display: flex;
-        .img_container{
-          img{
+        .img_container {
+          img {
             height: 60px;
           }
         }
-      }
-      .company_info_container {
-        padding: 10px 0 0 20px;
-        .police{
-          display: flex;
-          margin-top: 5px;
-          p{
-            line-height: 20px;
-            margin-left: 5px;
+        .company_info_container {
+          font-family: MicrosoftYaHeiUI;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.65);
+          font-weight: 400;
+          padding: 10px 0 0 20px;
+          .police {
+            display: flex;
+            margin-top: 5px;
+            p {
+              line-height: 20px;
+              margin-left: 5px;
+            }
           }
         }
       }
+      .footer_right {
+        font-family: MicrosoftYaHeiUI;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.65);
+        line-height: 22px;
+        font-weight: 400;
+      }
     }
   }
 }
-
+.title_class {
+  font-size: 15px;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 700;
+}
 .mt_20 {
   margin-top: 10px;
 }
@@ -714,4 +749,7 @@ export default {
 .clearfix:after {
   clear: both;
 }
+>>> .el-card__header{
+  padding: 15px 15px 10px;
+}
 </style>