erp中间也头像

src/views/middle.vue

@@ -23,8 +23,16 @@
           <p class="company_name">中国东信智慧楼宇</p>
         </div>
         <div class="demo-basic--circle">
-          <div class="block">
-            <img :src="dmUser.user.dmUser.faceid" alt="">
+          <div
+            class="block"
+            :style="{'background':'url('+dmUser.user.dmUser.faceid+')','background-size': 'contain',
+                     'background-repeat': 'no-repeat',
+                     'background-position': 'center',
+                     'border': '1px solid #ebebeb',
+                     'background-color': '#f1f1f1'}"
+          >
+            <!--            <img :src="dmUser.user.dmUser.faceid" alt="">-->
+
           </div>
           <div class="userInfo">
             <div class="name">
@@ -285,7 +293,7 @@ export default {
       axios
         .get(
           'https://smartpark.caih.com/dxapi/dxtop/staff/cardBalance?card=' +
-            card
+          card
         )
         .then((res) => {
           this.balance = res.data.data
@@ -408,14 +416,17 @@ export default {
   padding: 0;
 }
 
->>> .el-col:nth-child(5n + 1) {
+> > > .el-col:nth-child(5n + 1) {
   margin-left: 0;
 }
->>> .el-col:nth-child(n + 6) {
+
+> > > .el-col:nth-child(n + 6) {
   margin-top: 1;
 }
+
 .back_container {
   background-color: #f7f7f7;
+
   header {
     height: 34px;
     background: #444444;
@@ -426,6 +437,7 @@ export default {
       margin: 0 auto;
       display: flex;
       justify-content: flex-end;
+
       .header_container {
         display: flex;
         font-family: MicrosoftYaHeiUI;
@@ -437,6 +449,7 @@ export default {
       }
     }
   }
+
   .routerCardPar {
     /*padding: 0 20%;*/
     width: 1200px;
@@ -444,36 +457,49 @@ export default {
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
+
     .header {
       padding: 0 0 20px;
       display: flex;
+
       img {
         height: 60px;
         margin-right: 15px;
       }
+
       p {
         line-height: 60px;
       }
+
       .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;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        border: 1px solid #ebebeb;
+        background-color: #f1f1f1;
         img {
           width: 120px;
           height: 130px;
         }
       }
+
       .userInfo {
         width: 100%;
+
         .name {
           font-family: MicrosoftYaHeiUI;
           font-size: 18px;
@@ -481,10 +507,12 @@ export default {
           font-weight: 400;
           padding-bottom: 20px;
         }
+
         .departmeny {
           margin-top: 25px;
           display: flex;
           font-size: 16px;
+
           p {
             margin-right: 50px;
 
@@ -492,6 +520,7 @@ export default {
               margin-right: 5px;
             }
           }
+
           // .icon_left {
           //   display: flex;
           //   img {
@@ -507,6 +536,7 @@ export default {
           // }
           .icon_right {
             display: flex;
+
             img {
               width: 15px;
               height: 15px;
@@ -520,6 +550,7 @@ export default {
               font-size: 12px;
               color: rgba(0, 0, 0, 0.65);
               font-weight: 400;
+
               p:nth-child(2) {
                 margin-top: 8px;
                 font-size: 15px;
@@ -528,6 +559,7 @@ export default {
               }
             }
           }
+
           .icon_right:nth-child(n + 3) {
             img {
               width: 32px;
@@ -536,11 +568,13 @@ export default {
               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;
@@ -550,25 +584,30 @@ export default {
             }
           }
         }
+
         .icon {
           margin-top: 25px;
           display: flex;
         }
       }
     }
+
     .table_box {
       background-color: #fff;
       display: flex;
       padding: 10px;
       box-sizing: border-box;
+
       .each_card_box {
         width: 33.33%;
         padding: 5px;
         box-sizing: border-box;
       }
     }
+
     .fastEnter {
       width: 100%;
+
       ul {
         // margin-top: 20px;
         list-style: none;
@@ -577,14 +616,17 @@ export default {
         background-color: #fff;
         padding: 00px 0 20px;
         box-sizing: border-box;
+
         li {
           // margin-top: 20px;
           width: calc(100% / 8);
           text-align: center;
+
           img {
             width: 75px;
             height: 75px;
           }
+
           p {
             // margin-top: 10px;
             font-family: MicrosoftYaHeiUI;
@@ -595,9 +637,11 @@ export default {
         }
       }
     }
+
     .system {
       .box-card {
         margin-top: 5px;
+
         ul {
           // margin-top: 20px;
           list-style: none;
@@ -605,14 +649,17 @@ export default {
           flex-wrap: wrap;
           padding: 0px 0 10px;
           box-sizing: border-box;
+
           li {
             img {
               width: 75px;
               height: 75px;
             }
+
             // margin-top: 20px;
             width: calc(100% / 8);
             text-align: center;
+
             p {
               // margin-top: 10px;
               font-family: MicrosoftYaHeiUI;
@@ -624,6 +671,7 @@ export default {
         }
       }
     }
+
     .routerCard {
       cursor: pointer;
       width: calc(900px / 8);
@@ -635,14 +683,17 @@ export default {
       .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;
@@ -650,11 +701,13 @@ export default {
       }
     }
   }
+
   footer {
     width: 100%;
     height: 128px;
     background: #323232;
     color: rgba(255, 255, 255, 0.65);
+
     .footer_container {
       width: 1600px;
       height: 100%;
@@ -662,22 +715,27 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .footer_left {
         display: flex;
+
         .img_container {
           img {
             height: 60px;
           }
         }
+
         .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;
@@ -685,6 +743,7 @@ export default {
           }
         }
       }
+
       .footer_right {
         font-family: MicrosoftYaHeiUI;
         font-size: 14px;
@@ -695,14 +754,17 @@ export default {
     }
   }
 }
+
 .title_class {
   font-size: 15px;
   color: rgba(0, 0, 0, 0.85);
   font-weight: 700;
 }
+
 .mt_20 {
   margin-top: 10px;
 }
+
 .content {
   padding: 20px;
   display: flex;
@@ -715,6 +777,7 @@ export default {
     font-weight: 600;
     margin-bottom: 15px;
   }
+
   ::v-deep .el-button {
     width: 60%;
   }
@@ -749,7 +812,8 @@ export default {
 .clearfix:after {
   clear: both;
 }
->>> .el-card__header{
+
+> > > .el-card__header {
   padding: 15px 15px 10px;
 }
 </style>