update:更新样式

FrontCode1/vue/src/views/login.vue

@@ -2,7 +2,9 @@
   <div class="container">
     <!-- 顶部 -->
     <div class="top">
-      <div></div>
+      <div>
+        <img src="../assets/image/person.png" alt="" />
+      </div>
       <div>
         <i class="el-icon-user-solid"></i>
         <span>被征收人姓名：胡伯钧</span>
@@ -14,9 +16,15 @@
     </div>
     <!-- 图片跳转 -->
     <div class="middle">
-      <div @click="QRcode()"></div>
-      <div @click="evaluate()"></div>
-      <div @click="compensate()"></div>
+      <div @click="QRcode()">
+        <img src="../assets/image/middle1.png" alt="" />
+      </div>
+      <div @click="evaluate()">
+        <img src="../assets/image/middle2.png" alt="" />
+      </div>
+      <div @click="compensate()">
+        <img src="../assets/image/middle3.png" alt="" />
+      </div>
     </div>
     <!-- 背景图 -->
     <div class="background" @click="handle()">
@@ -31,9 +39,6 @@
             <img src="../assets/image/window.png" alt="" />
           </div>
           <span>曙光一村地块</span>
-          <div>
-            <img src="../assets/image/xieyi.png" alt="" />
-          </div>
         </div>
         <!-- 征收信息 -->
         <div>
@@ -237,25 +242,29 @@ export default {
   background: url('../assets/image/3.png') no-repeat;
   background-size: 100%;
   .top {
-    padding: 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 100px;
+    // height: 100px;
     > :nth-child(1) {
-      height: 30px;
-      background-size: auto 100%;
-      background-image: url('../assets/image/person.png');
-      z-index: 99;
-      background-repeat: no-repeat;
+      img {
+        width: 45%;
+        max-width: 500px;
+        margin: 0.56rem 0;
+      }
+    }
+    > :nth-child(n + 2) {
+      margin-left: 1.11rem;
+      margin-right: 1.11rem;
+      margin-bottom: 0.56rem;
     }
   }
   .middle {
-    margin: 0 10px;
+    margin: 0 0.56rem;
     background-color: #ffffff;
     background: rgba(0, 0, 0, 0.1);
-    padding: 10px;
-    height: 100px;
+    padding: 0.56rem;
+    // height: 100px;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
@@ -264,28 +273,22 @@ export default {
       width: 32%;
       background-size: 100% auto;
       background-repeat: no-repeat;
+      text-align: center;
     }
-    > :nth-child(1) {
-      background: url('../assets/image/middle1.png') no-repeat;
-      background-size: auto 100%;
-    }
-    > :nth-child(2) {
-      background: url('../assets/image/middle2.png') no-repeat;
-      background-size: auto 100%;
-    }
-    > :nth-child(3) {
-      background: url('../assets/image/middle3.png') no-repeat;
-      background-size: auto 100%;
+    img {
+      width: 100%;
+      max-width: 200px;
     }
   }
   .background {
-    margin: 0 10px;
+    margin: 0 0.56rem;
     img {
       width: 100%;
+      max-height: 275px;
     }
   }
   > .el-card {
-    margin: 10px;
+    margin: 0.56rem;
     padding: 0;
     ::v-deep.el-card__body {
       padding: 0;
@@ -298,28 +301,23 @@ export default {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin: 10px 0;
+        margin: 0.56rem 0;
         > :nth-child(1) {
           width: 20%;
           text-align: left;
           img {
             width: 80%;
+            max-height: 150px;
           }
         }
         > span {
-          width: 50%;
-        }
-        > :nth-child(3) {
-          text-align: right;
-          img {
-            width: 50%;
-          }
+          width: 80%;
         }
       }
       // 征收信息
       > :nth-child(2) {
         > div {
-          margin-bottom: 10px;
+          margin-bottom: 0.56rem;
         }
         img {
           width: 5%;
@@ -328,7 +326,7 @@ export default {
         flex-direction: column;
         justify-content: space-between;
         // height: 100px;
-        padding-left: 10px;
+        padding-left: 0.56rem;
         .flex {
           > :nth-child(2) {
             width: 90%;
@@ -337,11 +335,11 @@ export default {
       }
       // 分户评估结果
       > :nth-child(3) {
-        padding: 10px;
+        padding: 0.56rem;
         > :nth-child(1) {
           display: flex;
           justify-content: space-between;
-          padding: 15px 0;
+          padding: 0.83rem 0;
           align-items: center;
           > :nth-child(1) {
             width: 13%;
@@ -376,18 +374,18 @@ export default {
             justify-content: space-between;
             width: 90%;
             > div {
-              margin: 10px 0;
+              margin: 0.56rem 0;
             }
           }
         }
       }
       // 补偿协议
       > :nth-child(4) {
-        padding: 10px;
+        padding: 0.56rem;
         > :nth-child(1) {
           display: flex;
           justify-content: space-between;
-          padding: 15px 0;
+          padding: 0.83rem 0;
           align-items: center;
           > :nth-child(1) {
             width: 13%;
@@ -421,7 +419,7 @@ export default {
             justify-content: space-between;
             width: 90%;
             > div {
-              margin: 10px 0;
+              margin: 0.56rem 0;
             }
           }
         }
@@ -430,27 +428,27 @@ export default {
   }
   // 图片跳转
   > :nth-child(5) {
-    margin: 10px;
+    margin: 0.56rem;
     img {
       width: 100%;
     }
   }
   // 征收政策
   > :nth-child(6) {
-    margin: 10px;
+    margin: 0.56rem;
     > :nth-child(2) {
       display: flex;
       justify-content: space-between;
-      margin: 10px 0;
+      margin: 0.56rem 0;
     }
     > .el-card {
-      padding: 10px;
+      padding: 0.56rem;
       ::v-deep.el-card__body {
         padding: 0;
       }
       .flex {
         > div {
-          margin: 10px 0;
+          margin: 0.56rem 0;
         }
       }
     }