样式

src/views/middle.vue

@@ -1,16 +1,148 @@
 <template>
-  <el-row style="background-color: rgb(241, 242, 246);height: calc(100vh - 84px);">
+  <el-row>
     <el-row>
-      <el-image :src="Background" />
+      <!-- <el-image :src="Background" /> -->
+      <header>
+        <div class="header_left">
+          <img src="../assets/images/logo.png" alt="">
+        </div>
+        <div class="header_right">
+          <el-avatar shape="circle" :size="50" :src="squareUrl" />
+          <div class="departmeny">
+            <p class="name"><span>王冰冰</span></p>
+            <p><span>部门:</span><span>产品二中心</span></p>
+          </div>
+        </div>
+      </header>
     </el-row>
     <el-row class="routerCardPar">
-      <template v-for="(system, index) in systemList">
-        <el-card :key="system.id" class="routerCard" @click.native="sso(system.systemUrl)">
-          <img :src="system.storage.url">
-          <!--          <img src="@/assets/images/hyxt.png" />-->
-          <span>{{ system.systemName }}</span>
+      <el-col :span="24">
+        <div class="demo-basic--circle">
+          <div class="block">
+            <el-avatar :size="150" :src="squareUrl" />
+          </div>
+          <div class="userInfo">
+            <div class="name"><span>王冰冰</span></div>
+            <div class="departmeny">
+              <p><span>部门:</span><span>产品二中心</span></p>
+              <p><span>手机:</span><span>11111111111111</span></p>
+            </div>
+            <div class="icon">
+              <div class="icon_left">
+                <img src="../assets/images/money.png" alt="" srcset="">
+                <div class="world">
+                  <p>余额</p>
+                  <p>12元</p>
+                </div>
+              </div>
+              <div class="icon_right">
+                <img src="../assets/images/car.png" alt="" srcset="">
+                <div class="world">
+                  <p>已录入车牌</p>
+                  <p>桂A287739</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24" class="mt_50 table_box">
+        <div class="each_card_box">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <h3>最近通行记录</h3>
+            </div>
+            <el-table
+              :data="currentTableData"
+              border
+              style="width: 100%"
+              height="300"
+            >
+              <el-table-column prop="date" label="日期" />
+              <el-table-column prop="name" label="姓名" />
+              <el-table-column prop="address" label="地址" />
+            </el-table>
+          </el-card>
+        </div>
+        <div class="each_card_box">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <h3>最近消费记录</h3>
+            </div>
+            <el-table
+              :data="consumptionTableData"
+              border
+              style="width: 100%"
+              height="300"
+            >
+              <el-table-column prop="date" label="日期" />
+              <el-table-column prop="name" label="姓名" />
+              <el-table-column prop="address" label="地址" />
+            </el-table>
+          </el-card>
+        </div>
+        <div class="each_card_box">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <h3>最近访客预约记录</h3>
+            </div>
+            <el-table
+              :data="visitorTableData"
+              border
+              style="width: 100%"
+              height="300"
+            >
+              <el-table-column prop="date" label="日期" />
+              <el-table-column prop="name" label="姓名" />
+              <el-table-column prop="address" label="地址" />
+            </el-table>
+          </el-card>
+        </div>
+      </el-col>
+      <el-col :span="24" class="mt_50">
+        <h3 class="title">快捷功能入口</h3>
+        <el-card class="box-card" style="margin-top: 20px">
+          <div class="fastEnter">
+            <ul>
+              <li
+                v-for="item in systemList"
+                :key="item.id"
+                @click.native="sso(item.systemUrl)"
+              >
+                <img src="@/assets/images/hyxt.png">
+                <p>{{ item.systemName }}</p>
+              </li>
+            </ul>
+          </div>
         </el-card>
-      </template>
+      </el-col>
+      <!--  -->
+      <el-col :span="24" class="mt_50 system">
+        <h3 class="title">系统功能入口</h3>
+        <el-card class="box-card">
+          <ul>
+            <li
+              v-for="item in systemList"
+              :key="item.id"
+              @click.native="sso(item.systemUrl)"
+            >
+              <img src="@/assets/images/hyxt.png">
+              <p>{{ item.systemName }}</p>
+            </li>
+          </ul>
+        </el-card>
+        <!-- <template v-for="(system, index) in ">
+          <el-card
+            :key="system.id"
+            class="routerCard"
+            @click.native="sso(system.systemUrl)"
+          >
+            <img :src="system.storage.url" />
+            <img src="@/assets/images/hyxt.png" />
+            <span>{{ system.systemName }}</span>
+          </el-card>
+        </template> -->
+      </el-col>
     </el-row>
   </el-row>
 </template>
@@ -30,14 +162,19 @@ export default {
     return {
       token: token,
       systemList: [],
-      Background: Background
+      Background: Background,
+      circleUrl:
+        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+      squareUrl:
+        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      currentTableData: [], // 通行记录(字段需改)
+      consumptionTableData: [], // 消费记录(字段需改)
+      visitorTableData: [], // 访客记录(字段需改)
+      systemListOne: [] // 快捷功能入口列表(字段需改,暂用的系统功能入口)
     }
   },
   computed: {
-    ...mapGetters([
-      'user',
-      'userPassword'
-    ])
+    ...mapGetters(['user', 'userPassword'])
   },
   created() {
     console.log(this.token)
@@ -45,13 +182,13 @@ export default {
   },
   methods: {
     getUser(token) {
-      ssoGetUser(token).then(res => {
+      ssoGetUser(token).then((res) => {
         const user = {
           username: res.data.data.user.username,
           password: res.data.data.user.ossPassword
         }
         this.$store.dispatch('Sso', user).then(() => {
-          crudDmSystem.queryByUserId(res.data.data.user.id).then(res => {
+          crudDmSystem.queryByUserId(res.data.data.user.id, 0).then((res) => {
             console.log('res', res)
             this.systemList = res
           })
@@ -59,11 +196,14 @@ export default {
       })
     },
     sso(url) {
+      console.log(url)
       const username = encrypt(this.user.username)
       const password = this.userPassword
       // location.href = `${url}/#/sso?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
       const aEle = document.createElement('a')
-      aEle.href = `${url}?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
+      aEle.href = `${url}?username=${encodeURIComponent(
+        username
+      )}&password=${encodeURIComponent(password)}`
       aEle.target = '_blank'
       aEle.click()
     }
@@ -72,28 +212,169 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+
 >>> .el-col:nth-child(5n + 1) {
   margin-left: 0;
 }
 >>> .el-col:nth-child(n + 6) {
   margin-top: 20px;
 }
+header {
+  height: 100px;
+  background: rgb(245, 245, 245);
+  display: flex;
+  justify-content: space-between;
+  padding: 0 50px 0 20px;
+  .header_left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    img {
+      // height: 100%;
+      line-height: 100px;
+    }
+  }
+  .header_right {
+    display: flex;
+    align-items: center;
+    .departmeny {
+      margin-left: 20px;
+      font-size: 16px;
+      .name {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
 .routerCardPar {
   /*padding: 0 20%;*/
-  width: 900px;
+  width: 1200px;
   margin: 20px auto 0 auto;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
+  .demo-basic--circle {
+    display: flex;
+    .block {
+      margin-right: 60px;
+    }
+    .userInfo {
+      .name {
+        font-size: 36px;
+        font-family: "Microsoft YaHei";
+        color: rgb(51, 51, 51);
+      }
+      .departmeny {
+        margin-top: 25px;
+        display: flex;
+        font-size: 16px;
+        p {
+          margin-right: 80px;
+          span {
+            margin-right: 5px;
+          }
+        }
+      }
+      .icon {
+        margin-top: 25px;
+        display: flex;
+        div {
+          width: 200px;
+        }
+        .icon_left {
+          display: flex;
+          img {
+            width: 40px;
+            height: 40px;
+          }
+          .world {
+            margin-left: 20px;
+            p:nth-child(2) {
+              margin-top: 8px;
+            }
+          }
+        }
+        .icon_right {
+          display: flex;
+          img {
+            width: 40px;
+            height: 40px;
+          }
+          .world {
+            margin-left: 20px;
+            p:nth-child(2) {
+              margin-top: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .table_box {
+    display: flex;
+    .each_card_box {
+      width: 33.33%;
+      padding: 5px;
+      box-sizing: border-box;
+    }
+  }
+  .fastEnter {
+    width: 100%;
+    ul {
+      margin-top: 20px;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      background-color: #fff;
+      padding: 10px 0 30px;
+      box-sizing: border-box;
+      li {
+        margin-top: 20px;
+        width: calc(100% / 8);
+        text-align: center;
+        p {
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+  .system {
+    .box-card {
+      margin-top: 20px;
+      ul {
+        margin-top: 20px;
+        list-style: none;
+        display: flex;
+        flex-wrap: wrap;
+        background-color: #fff;
+        padding: 10px 0 30px;
+        box-sizing: border-box;
+        li {
+          margin-top: 20px;
+          width: calc(100% / 8);
+          text-align: center;
+          p {
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+  }
   .routerCard {
     cursor: pointer;
-    width: 200px;
+    width: calc(900px / 8);
     display: inline-block;
     margin-bottom: 20px;
-    &:not(:nth-child(4n)) {
-      margin-right: 30px;
+    // &:not(:nth-child(4n)) {
+    //   margin-right: 30px;
+    // }
+    .el-card__body {
+      background-color: none;
     }
-
     ::v-deep .el-card__body {
       display: flex;
       flex-direction: column;
@@ -109,7 +390,9 @@ export default {
     }
   }
 }
-
+.mt_50 {
+  margin-top: 50px;
+}
 .content {
   padding: 20px;
   display: flex;
@@ -154,6 +437,6 @@ export default {
 }
 
 .clearfix:after {
-  clear: both
+  clear: both;
 }
 </style>