diff --git a/FrontCode1/vue/src/assets/style/global.css b/FrontCode1/vue/src/assets/style/global.css
index 9cfde6b..3a5f275 100644
--- a/FrontCode1/vue/src/assets/style/global.css
+++ b/FrontCode1/vue/src/assets/style/global.css
@@ -1,4 +1,24 @@
 html,
 body {
-    height: 100%;
-}
\ No newline at end of file
+  height: 100%;
+}
+@media screen and (max-width: 767px) {
+  html {
+    font-size: 18px;
+  }
+}
+@media screen and (min-width: 768px) {
+  html {
+    font-size: 20px;
+  }
+}
+@media screen and (min-width: 970px) {
+  html {
+    font-size: 24px;
+  }
+}
+@media screen and (min-width: 1200px) {
+  html {
+    font-size: 28px;
+  }
+}
diff --git a/FrontCode1/vue/src/assets/style/global.less b/FrontCode1/vue/src/assets/style/global.less
new file mode 100644
index 0000000..3ae2e1f
--- /dev/null
+++ b/FrontCode1/vue/src/assets/style/global.less
@@ -0,0 +1,26 @@
+html,
+body {
+  height: 100%;
+}
+@Size: 28px;
+
+@media screen and (max-width: 767px) {
+  html {
+    font-size: (504 / @Size); //18px
+  }
+}
+@media screen and (min-width: 768px) {
+  html {
+    font-size: (560 / @Size);
+  }
+}
+@media screen and (min-width: 970px) {
+  html {
+    font-size: (672 / @Size);
+  }
+}
+@media screen and (min-width: 1200px) {
+  html {
+    font-size: (784 / @Size); //28px
+  }
+}
diff --git a/FrontCode1/vue/src/main.js b/FrontCode1/vue/src/main.js
index 25beb2a..aabe7e9 100644
--- a/FrontCode1/vue/src/main.js
+++ b/FrontCode1/vue/src/main.js
@@ -6,7 +6,7 @@ import '@/elementui'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'normalize.css/normalize.css'
-// import '@/assets/style/global.css'
+import '@/assets/style/global.css'
 import '@/assets/style/flex.css'
 import md5 from 'js-md5'
 Vue.prototype.$md5 = md5
diff --git a/FrontCode1/vue/src/views/login.vue b/FrontCode1/vue/src/views/login.vue
index fed6639..809aff5 100644
--- a/FrontCode1/vue/src/views/login.vue
+++ b/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;
         }
       }
     }
diff --git a/FrontCode2/sunshine_levy/src/views/report/agreement.vue b/FrontCode2/sunshine_levy/src/views/report/agreement.vue
index d15b0c6..e41121e 100644
--- a/FrontCode2/sunshine_levy/src/views/report/agreement.vue
+++ b/FrontCode2/sunshine_levy/src/views/report/agreement.vue
@@ -31,7 +31,7 @@
           合计补偿金额：
           <b style="color: red">{{ item.money }}</b>
         </div>
-        <div>
+        <div class="line">
           <img alt src="@/assets/img/hengxian.png" />
         </div>
         <div class="flex">
@@ -84,7 +84,9 @@ export default {
   }
 };
 </script>
-
+<style>
+/* @import url(./global.css); */
+</style>
 <style lang="less" scoped>
 .container {
   .image {
@@ -117,6 +119,12 @@ export default {
           margin-right: 10px;
         }
       }
+      .line {
+        opacity: 1;
+        img {
+          height: 2px;
+        }
+      }
       .backgroundColor {
         background-color: #e3ebfd;
         span {
diff --git a/FrontCode2/sunshine_levy/src/views/report/global.css b/FrontCode2/sunshine_levy/src/views/report/global.css
new file mode 100644
index 0000000..aef271f
--- /dev/null
+++ b/FrontCode2/sunshine_levy/src/views/report/global.css
@@ -0,0 +1,20 @@
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 324 / 18px;
+  }
+}
+@media screen and (min-width: 768px) {
+  html {
+    font-size: 324 / 18px;
+  }
+}
+@media screen and (min-width: 992px) {
+  html {
+    font-size: 396 / 18px;
+  }
+}
+@media screen and (min-width: 1200px) {
+  html {
+    font-size: 504 / 18px;
+  }
+}
diff --git a/FrontCode2/sunshine_levy/src/views/report/global.less b/FrontCode2/sunshine_levy/src/views/report/global.less
new file mode 100644
index 0000000..3d583a6
--- /dev/null
+++ b/FrontCode2/sunshine_levy/src/views/report/global.less
@@ -0,0 +1,22 @@
+@size: 18px;
+
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 324 / @size;
+  }
+}
+@media screen and (min-width: 768px) {
+  html {
+    font-size: 324 / @size;
+  }
+}
+@media screen and (min-width: 992px) {
+  html {
+    font-size: 396 / @size;
+  }
+}
+@media screen and (min-width: 1200px) {
+  html {
+    font-size: 504 / @size;
+  }
+}