页面样式 需要添加图片路径

src/views/middle.vue

@@ -1,34 +1,50 @@
 <template>
-  <el-row>
+  <el-row class="back_container">
     <el-row>
       <!-- <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="dmUser.user.dmUser.faceid" />
-          <div class="departmeny">
-            <p class="name"><span>{{ dmUser.user.nickName }}</span></p>
-            <p><span>部门:</span><span>{{ dmUser.user.dept.name }}</span></p>
+        <div class="width_1200">
+          <div class="header_container">
+            <p>您好，黎瀛&nbsp;&nbsp;&nbsp;&nbsp;｜&nbsp;&nbsp;&nbsp;&nbsp;</p>
+            <p>
+              产品而二中心&nbsp;&nbsp;&nbsp;&nbsp;｜&nbsp;&nbsp;&nbsp;&nbsp;
+            </p>
+            <p>注销</p>
           </div>
         </div>
       </header>
     </el-row>
     <el-row class="routerCardPar">
       <el-col :span="24">
+        <div class="header">
+          <img src="../assets/images/logo.png">
+          <span class="company_name">中国东信智慧楼宇</span>
+        </div>
         <div class="demo-basic--circle">
           <div class="block">
-            <el-avatar :size="150" :src="dmUser.user.dmUser.faceid" />
+            <img :src="dmUser.user.dmUser.faceid" alt="">
           </div>
           <div class="userInfo">
-            <div class="name"><span>{{ dmUser.user.nickName }}</span></div>
-            <div class="departmeny">
-              <p><span>部门:</span><span>{{ dmUser.user.dept.name }}</span></p>
-              <p><span>手机:</span><span>{{ dmUser.user.phone }}</span></p>
+            <div class="name">
+              <span>{{ dmUser.user.nickName }}</span>
             </div>
-            <div class="icon">
-              <div class="icon_left">
+            <el-divider />
+            <div class="departmeny">
+              <div class="icon_right">
+                <img src="../assets/images/che.png" alt="" srcset="">
+                <div class="world">
+                  <p>部门:</p>
+                  <p>{{ dmUser.user.dept.name }}</p>
+                </div>
+              </div>
+              <div class="icon_right">
+                <img src="../assets/images/che.png" alt="" srcset="">
+                <div class="world">
+                  <p>手机:</p>
+                  <p>{{ dmUser.user.phone }}</p>
+                </div>
+              </div>
+              <div class="icon_right">
                 <img src="../assets/images/qian.png" alt="" srcset="">
                 <div class="world">
                   <p>余额</p>
@@ -43,10 +59,11 @@
                 </div>
               </div>
             </div>
+            <div class="icon" />
           </div>
         </div>
       </el-col>
-      <el-col :span="24" class="mt_50 table_box">
+      <el-col :span="24" class="mt_20 table_box">
         <div class="each_card_box">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
@@ -100,9 +117,9 @@
           </el-card>
         </div>
       </el-col>
-      <el-col :span="24" class="mt_50">
+      <el-col :span="24" class="mt_20">
         <h3 class="title">快捷功能入口</h3>
-        <el-card class="box-card" style="margin-top: 20px">
+        <el-card class="box-card" style="margin-top: 10px">
           <div class="fastEnter">
             <ul>
               <li
@@ -118,7 +135,7 @@
         </el-card>
       </el-col>
       <!--  -->
-      <el-col :span="24" class="mt_50 system">
+      <el-col :span="24" class="mt_20 system">
         <h3 class="title">系统功能入口</h3>
         <el-card class="box-card">
           <ul>
@@ -145,6 +162,30 @@
         </template> -->
       </el-col>
     </el-row>
+    <el-row>
+      <footer>
+        <div class="footer_container">
+          <div class="footer_left">
+            <div class="img_container">
+              <img src="../assets/images/logo.png">
+            </div>
+            <div class="company_info_container">
+              <p>中国—东盟信息港股份有限公司 技术支持</p>
+              <p>
+                <img src="" alt=""> 桂公网安备45010802000099号
+                桂ICP备16005301号-7
+              </p>
+            </div>
+          </div>
+          <div class="footer_right">
+            <p>
+              <a>插件下载 </a>| <a> 联系管理员</a>| <a> 用户手册</a>|
+              <a> 版本说明</a>
+            </p>
+          </div>
+        </div>
+      </footer>
+    </el-row>
   </el-row>
 </template>
 
@@ -174,14 +215,11 @@ export default {
       systemListOne: [], // 快捷功能入口列表(字段需改,暂用的系统功能入口)
       balance: null,
       plate: null,
-      dmUser: { 'user': { 'dmUser': {}, 'dept': {}}}
+      dmUser: { user: { dmUser: {}, dept: {}}}
     }
   },
   computed: {
-    ...mapGetters([
-      'user',
-      'userPassword'
-    ])
+    ...mapGetters(['user', 'userPassword'])
   },
   created() {
     this.getUser(this.token)
@@ -211,62 +249,111 @@ export default {
           })
         })
         this.getBalance(this.dmUser.user.dmUser.cardid)
-        this.getPlate(this.dmUser.token, this.dmUser.nonce, this.dmUser.timestamp, this.dmUser.user.id)
-        this.getAccessTraffic(this.dmUser.token, this.dmUser.nonce, this.dmUser.timestamp, this.dmUser.user.id)
-        this.orderRecord(this.dmUser.token, this.dmUser.nonce, this.dmUser.timestamp, this.dmUser.user.dmUser.cardid)
-        this.getVisitors(this.dmUser.token, this.dmUser.nonce, this.dmUser.timestamp, this.dmUser.user.id)
+        this.getPlate(
+          this.dmUser.token,
+          this.dmUser.nonce,
+          this.dmUser.timestamp,
+          this.dmUser.user.id
+        )
+        this.getAccessTraffic(
+          this.dmUser.token,
+          this.dmUser.nonce,
+          this.dmUser.timestamp,
+          this.dmUser.user.id
+        )
+        this.orderRecord(
+          this.dmUser.token,
+          this.dmUser.nonce,
+          this.dmUser.timestamp,
+          this.dmUser.user.dmUser.cardid
+        )
+        this.getVisitors(
+          this.dmUser.token,
+          this.dmUser.nonce,
+          this.dmUser.timestamp,
+          this.dmUser.user.id
+        )
       })
     },
     getBalance(card) {
-      axios.get('https://smartpark.caih.com/dxapi/dxtop/staff/cardBalance?card=' + card).then(res => {
-        this.balance = res.data.data
-      })
+      axios
+        .get(
+          'https://smartpark.caih.com/dxapi/dxtop/staff/cardBalance?card=' +
+            card
+        )
+        .then((res) => {
+          this.balance = res.data.data
+        })
     },
     getPlate(accToken, nonce, timestamp, userId) {
       const data = {
-        'nonce': nonce,
-        'timestamp': timestamp,
-        'query': {
-          'userNumber': userId
+        nonce: nonce,
+        timestamp: timestamp,
+        query: {
+          userNumber: userId
         }
       }
-      axios.post('https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getPlateNumber', data, { 'headers': { 'XYTACCESSTOKEN': accToken }}).then(res => {
-        this.plate = res.data.data[0].plateNumber
-      })
+      axios
+        .post(
+          'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getPlateNumber',
+          data,
+          { headers: { XYTACCESSTOKEN: accToken }}
+        )
+        .then((res) => {
+          this.plate = res.data.data[0].plateNumber
+        })
     },
     getAccessTraffic(accToken, nonce, timestamp, userId) {
       const data = {
-        'nonce': nonce,
-        'timestamp': timestamp,
-        'query': {
-          'userNumber': userId
+        nonce: nonce,
+        timestamp: timestamp,
+        query: {
+          userNumber: userId
         }
       }
-      axios.post('https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getAccessTraffic?page=0&size=5&sort=id,desc', data, { 'headers': { 'XYTACCESSTOKEN': accToken }}).then(res => {
-        this.currentTableData = res.data.data.content
-      })
+      axios
+        .post(
+          'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getAccessTraffic?page=0&size=5&sort=id,desc',
+          data,
+          { headers: { XYTACCESSTOKEN: accToken }}
+        )
+        .then((res) => {
+          this.currentTableData = res.data.data.content
+        })
     },
     orderRecord(accToken, nonce, timestamp, cardId) {
       const data = {
-        'nonce': nonce,
-        'timestamp': timestamp,
-        'query': {
-          'card': cardId
+        nonce: nonce,
+        timestamp: timestamp,
+        query: {
+          card: cardId
         }
       }
-      axios.post('https://smartpark.caih.com/zhcy/api/thirdparty/v1/open/orderRecord?page=0&size=5&sort=id,desc', data, { 'headers': { 'XYTACCESSTOKEN': accToken }}).then(res => {
-        this.consumptionTableData = res.data.data.content
-      })
+      axios
+        .post(
+          'https://smartpark.caih.com/zhcy/api/thirdparty/v1/open/orderRecord?page=0&size=5&sort=id,desc',
+          data,
+          { headers: { XYTACCESSTOKEN: accToken }}
+        )
+        .then((res) => {
+          this.consumptionTableData = res.data.data.content
+        })
     },
     getVisitors(accToken, nonce, timestamp, userId) {
       const data = {
-        'nonce': nonce,
-        'timestamp': timestamp,
-        'query': userId
+        nonce: nonce,
+        timestamp: timestamp,
+        query: userId
       }
-      axios.post('https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getVisitant?page=0&size=5', data, { 'headers': { 'XYTACCESSTOKEN': accToken }}).then(res => {
-        this.visitorTableData = res.data.data
-      })
+      axios
+        .post(
+          'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getVisitant?page=0&size=5',
+          data,
+          { headers: { XYTACCESSTOKEN: accToken }}
+        )
+        .then((res) => {
+          this.visitorTableData = res.data.data
+        })
     },
     sso(url) {
       const username = encrypt(this.user.username)
@@ -305,130 +392,159 @@ export default {
   margin-left: 0;
 }
 >>> .el-col:nth-child(n + 6) {
-  margin-top: 20px;
+  margin-top: 1;
 }
-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;
+.back_container {
+  background-color: #f7f7f7;
+  header {
+    height: 34px;
+    background: #444444;
+
+    // padding: 0 50px 0 20px;
+    .width_1200 {
+      width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: flex-end;
+      .header_container {
+        display: flex;
+        font-family: MicrosoftYaHeiUI;
+        font-size: 15px;
+        color: #ffffff;
+        font-weight: 400;
+        line-height: 34px;
+        text-align: right;
       }
     }
   }
-}
-.routerCardPar {
-  /*padding: 0 20%;*/
-  width: 1200px;
-  margin: 20px auto 0 auto;
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  .demo-basic--circle {
+  .routerCardPar {
+    /*padding: 0 20%;*/
+    width: 1200px;
+    margin: 20px auto 0 auto;
     display: flex;
-    .block {
-      margin-right: 60px;
-    }
-    .userInfo {
-      .name {
-        font-size: 36px;
-        font-family: "Microsoft YaHei";
-        color: rgb(51, 51, 51);
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    .header {
+      padding: 0 0 20px;
+      img {
+        vertical-align: middle;
       }
-      .departmeny {
-        margin-top: 25px;
-        display: flex;
-        font-size: 16px;
-        p {
-          margin-right: 80px;
-          span {
-            margin-right: 5px;
-          }
+      .company_name {
+        font-size: 24px;
+        color: rgba(0, 0, 0, 0.85);
+        font-weight: 700;
+      }
+    }
+    .demo-basic--circle {
+      display: flex;
+      background-color: #fff;
+      padding: 20px;
+      box-sizing: border-box;
+      .block {
+        margin-right: 30px;
+        img {
+          width: 120px;
+          height: 160px;
         }
       }
-      .icon {
-        margin-top: 25px;
-        display: flex;
-        div {
-          width: 200px;
+      .userInfo {
+        .name {
+          font-family: MicrosoftYaHeiUI;
+          font-size: 18px;
+          color: rgba(0, 0, 0, 0.85);
+          font-weight: 400;
+          padding-bottom: 20px;
         }
-        .icon_left {
+        .departmeny {
+          margin-top: 25px;
           display: flex;
-          img {
-            width: 40px;
-            height: 40px;
-          }
-          .world {
-            margin-left: 20px;
-            p:nth-child(2) {
-              margin-top: 8px;
+          font-size: 16px;
+          p {
+            margin-right: 80px;
+
+            span {
+              margin-right: 5px;
             }
           }
-        }
-        .icon_right {
-          display: flex;
-          img {
-            width: 40px;
-            height: 40px;
+          // .icon_left {
+          //   display: flex;
+          //   img {
+          //     width: 15px;
+          //     height: 15px;
+          //   }
+          //   .world {
+          //     margin-left: 20px;
+          //     p:nth-child(2) {
+          //       margin-top: 8px;
+          //     }
+          //   }
+          // }
+          .icon_right {
+            display: flex;
+            img {
+              width: 15px;
+              height: 15px;
+              margin-right: 5px;
+              background-color: #ccc;
+              color: #fff;
+              padding: 3px;
+              border-radius: 50%;
+            }
+
+            .world {
+              // margin-left: 20px;
+              font-size: 12px;
+              color: rgba(0, 0, 0, 0.65);
+              font-weight: 400;
+              p:nth-child(2) {
+                margin-top: 8px;
+                font-size: 15px;
+                color: rgba(0, 0, 0, 0.85);
+                font-weight: 400;
+              }
+            }
           }
-          .world {
-            margin-left: 20px;
-            p:nth-child(2) {
-              margin-top: 8px;
+          .icon_right:nth-child(n + 3) {
+            img {
+              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;
+              font-size: 12px;
+              color: rgba(0, 0, 0, 0.65);
+              font-weight: 400;
+              p:nth-child(2) {
+                margin-top: 8px;
+                font-size: 15px;
+                color: rgba(0, 0, 0, 0.85);
+                font-weight: 700;
+              }
             }
           }
         }
+        .icon {
+          margin-top: 25px;
+          display: flex;
+        }
       }
     }
-  }
-  .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;
+    .table_box {
       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;
-        }
+      .each_card_box {
+        width: 33.33%;
+        padding: 5px;
+        box-sizing: border-box;
       }
     }
-  }
-  .system {
-    .box-card {
-      margin-top: 20px;
+    .fastEnter {
+      width: 100%;
       ul {
         margin-top: 20px;
         list-style: none;
@@ -447,35 +563,78 @@ header {
         }
       }
     }
-  }
-  .routerCard {
-    cursor: pointer;
-    width: calc(900px / 8);
-    display: inline-block;
-    margin-bottom: 20px;
-    // &:not(:nth-child(4n)) {
-    //   margin-right: 30px;
-    // }
-    .el-card__body {
-      background-color: none;
+    .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;
+            }
+          }
+        }
+      }
     }
-    ::v-deep .el-card__body {
+    .routerCard {
+      cursor: pointer;
+      width: calc(900px / 8);
+      display: inline-block;
+      margin-bottom: 20px;
+      // &:not(:nth-child(4n)) {
+      //   margin-right: 30px;
+      // }
+      .el-card__body {
+        background-color: none;
+      }
+      ::v-deep .el-card__body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        img {
+          width: 60px;
+        }
+        span {
+          display: block;
+          margin-top: 15px;
+        }
+      }
+    }
+  }
+  footer {
+    width: 100%;
+    height: 128px;
+    background: #323232;
+    color: rgba(255, 255, 255, 0.65);
+    .footer_container {
+      width: 1600px;
+      height: 100%;
+      margin: 20px auto;
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      justify-content: space-between;
       align-items: center;
-      img {
-        width: 60px;
+      .footer_left {
+        display: flex;
       }
-      span {
-        display: block;
-        margin-top: 15px;
+      .company_info_container {
+        padding: 10px 0 0 20px;
       }
     }
   }
 }
-.mt_50 {
-  margin-top: 50px;
+
+.mt_20 {
+  margin-top: 10px;
 }
 .content {
   padding: 20px;