diff --git a/dist.zip b/dist.zip
index ec1c257..7426db0 100644
Binary files a/dist.zip and b/dist.zip differ
diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index 50ca33a..60b4a32 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -109,7 +109,7 @@ export default {
   justify-content: center;
   flex-direction: column;
   width: 100%;
-  height: 605px;
+  height: 7.5625rem;
   background: url(/assets/img/aboutus-bj.png) no-repeat;
   background-size: cover;
 }
@@ -124,27 +124,27 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 300px;
-  height: 150px;
+  width: 3.75rem;
+  height: 1.875rem;
   color: #FFF;
   text-align: center;
   /* border: 1px solid red; */
 }
 
 .about-us .box-top h4 {
-  font-size: 30px;
+  font-size: .375rem;
   font-weight: 700;
 }
 .about-us .box-top span {
   display: block;
-  width: 80px;
-  height: 5px;
-  margin: 10px 0 10px 110px;
+  width: 1rem;
+  height: .0625rem;
+  margin: .125rem 0 .125rem 1.375rem;
   background-color: #faa234;
 }
 .about-us .box-top p {
-  font-size: 18px;
-  letter-spacing: 5px;
+  font-size: .225rem;
+  letter-spacing: .0625rem;
   /* color: #9a7148; */
 }
 .about-us .box-bottom {
@@ -163,7 +163,7 @@ export default {
   /* top: -100px; */
   width: 1000px;
   /* height: 520px; */
-  padding: 50px;
+  padding: .625rem;
   background-color: #FFF;
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -171,44 +171,44 @@ export default {
 }
 .content {
   display: flex;
-  width: 900px;
+  width: 11.25rem;
   /* height: 260px; */
   /* background-color: pink; */
   /* border: 1px solid red; */
 }
 .content .content-left {
-  width: 380px;
-  height: 260px;
-  margin-right: 40px;
+  width: 4.75rem;
+  height: 3.25rem;
+  margin-right: .5rem;
   /* background-color: pink; */
 }
 .content .content-right {
   display: flex;
   flex-direction: column;
-  width: 480px;
+  width: 6rem;
   /* height: 260px; */
   /* background-color: skyblue; */
 }
 .content-right i {
-  width: 30px;
-  height: 30px;
+  width: .375rem;
+  height: .375rem;
   background: url(/assets/img/aboutus-syh.png) no-repeat;
   background-size: cover;
 }
 .content-right h4 {
-  height: 48px;
-  line-height: 48px;
-  font-size: 28px;
+  height: .6rem;
+  line-height: .6rem;
+  font-size: .35rem;
 }
 .content-right span {
-  margin: 12px 0;
-  font-size: 16px;
+  margin: .15rem 0;
+  font-size: .2rem;
   color: #faa332;
 }
 .content-right p {
-  font-size: 16px;
+  font-size: .2rem;
   font-weight: 300;
-  letter-spacing: 1px;
+  letter-spacing: .0125rem;
 }
 /* .dataList {
   display: flex;
@@ -258,17 +258,17 @@ export default {
   justify-content: start;
   flex-wrap: wrap;
   background-color: #f1f1f1;
-  margin-top: 20px;
+  margin-top: .25rem;
   /* height: 120px; */
 }
 .content-left ul li {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 180px;
+  width: 2.25rem;
   /* margin-right: 60px;
   margin-bottom: 15px; */
-  margin: 20px 20px 20px 0;
+  margin: .25rem .25rem .25rem 0;
   /* background-color: pink; */
   /* align-content: center;
   flex-wrap: wrap; */
@@ -279,22 +279,22 @@ export default {
 .content-left ul li .row1 {
   display: flex;
   margin: 0 auto;
-  height: 46px;
+  height: .575rem;
 }
 .content-left ul li .row1 h4 {
-  height: 46px;
-  font-size: 30px;
+  height: .575rem;
+  font-size: .375rem;
   font-weight: 700;
 }
 .content-left ul li .row1 em {
-  width: 18px;
-  height: 18px;
-  line-height: 18px;
+  width: .225rem;
+  height: .225rem;
+  line-height: .225rem;
   text-align: center;
-  border-radius: 9px;
-  margin: 18px 0 0 -2px;
+  border-radius: .1125rem;
+  margin: .225rem 0 0 -0.025rem;
   background-color: #fcbb53;
-  font-size: 12px;
+  font-size: .15rem;
   color: #FFF;
 }
 .content-left ul li .row2 p {
diff --git a/src/components/Footer copy.vue b/src/components/Footer copy.vue
new file mode 100644
index 0000000..f5d1b9e
--- /dev/null
+++ b/src/components/Footer copy.vue	
@@ -0,0 +1,222 @@
+<template>
+  <div class="footer">
+    <div class="box">
+      <div class="box-top">
+        <div class="box-left-logo">
+          <!-- <a href="#"> -->
+          <a href="https://www.aimzhu.com">
+            <img src="/assets/img/footerlogo1.png" alt="">
+          </a>
+        </div>
+        <div class="box-right-content">
+          <div class="box1">
+            <ul>
+              <li>
+                <router-link to="/KeFu">客服中心</router-link>
+              </li>
+              <li>
+                <router-link to="/HelpCenter">帮助中心</router-link>
+              </li>
+              <li><router-link to="/AboutUs">关于我们</router-link></li>
+              <li><router-link to="/ProductsNews">产品动态</router-link></li>
+              <!-- <li>联系我们</li> -->
+            </ul>
+          </div>  
+          <div class="box2">
+            <ul class="left">
+              <!-- <li>
+                联系我们
+              </li> -->
+              <li>
+                <img src="/assets/img/1.png" alt="">
+                400-086-1633 
+              </li>
+              <li>
+                <img src="/assets/img/2.png" alt="">
+                kefu@tenlion.com.cn
+              </li>
+            </ul>
+            <ul class="right">
+              <li>
+                <a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">服务协议</a>
+              </li>
+              <li>
+                <a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">隐私条款</a>
+              </li>
+              <li><router-link to="/Report">举报</router-link></li>
+            </ul>
+            
+          </div>
+        </div>
+        
+      </div>
+      
+      <div class="box-bottom">
+        <span class="row1">
+          <ul>
+            <li>山西腾狮科技有限公司 版权所有</li>
+            <li>晋ICP备14004820号</li>
+            <li>晋公网安备 14010502050897号</li>
+          </ul>
+        </span>
+        
+      </div>
+      
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+ img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  border: 0px solid transparent !important ;
+}
+.footer {
+  /* position: relative;
+  top: 80px; */
+  /* position: absolute; */
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  height: 320px;
+  background-color: #4a4e59;
+  color: #FFF;
+}
+.box {
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  height: 280px;
+  margin: 40px auto;
+  padding: 5px;
+  /* border: 1px solid red; */
+}
+.box-top {
+  display: flex;
+  height: 120px;
+  /* border: 1px solid red; */
+}
+.box-top .box-left-logo {
+  width: 260px;
+  height: 46px;
+  /* margin-right: 15px; */
+  /* margin: 27px 50px 27px 0; */
+  margin: auto 40px;
+  /* border: 1px solid red; */
+  
+}
+.box-top .box-right-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  /* border: 1px solid red; */
+  margin-left: 20px;
+}
+
+.box1 {
+  height: 40px;
+  /* line-height: 40px; */
+  /* background-color: pink; */
+}
+.box1 ul {
+  display: flex;
+}
+.box1 ul li {
+  margin-right: 80px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 15px;
+}
+.box1 ul li a:link,
+.box1 ul li a:visited {
+  color: #FFF;
+  font-weight: 400;
+}
+.box1 ul li:first-child {
+  margin-left: 5px;
+}
+.box2 {
+  display: flex;
+  position: relative;
+  /* flex-wrap: wrap;
+  align-content: flex-end; */
+  /* border: 1px solid red; */
+}
+.box2 .left {
+  height: 70px;
+  width: 240px;
+  /* background-color: pink; */
+}
+.box2 .left li {
+  height: 30px;
+  line-height: 30px;
+  font-size: 15px;
+  /* margin-right: 50px; */
+}
+.box2 .left li:nth-child(1) {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 5px;
+}
+
+.box2 .left li img {
+  width: 16px;
+  height: 16px;
+  margin: auto 5px;
+}
+.box2 .right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  /* display: flex; */
+  display: inline-block;
+  height: 30px;
+  width: 300px;
+  /* background-color: skyblue; */
+}
+.box2 .right li {
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+  margin-right: 30px;
+  font-size: 15px;
+}
+.box2 .right li a {
+  color: #FFF;
+}
+.box-bottom {
+  height: 60px;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 50;
+  margin-top: 25px;
+  border-top: 1px solid #7a7d85;
+  /* border-top: 1px solid #4b4e56; */
+
+}
+.box-bottom .row1 {
+  display: flex;
+  justify-content: center;
+  /* margin-top: 15px; */
+
+}
+.box-bottom .row1 ul {
+  display: flex;
+ 
+}
+.box-bottom .row1 ul li {
+  height: 60px;
+  line-height: 60px;
+  margin-right: 40px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index f5d1b9e..46a0f86 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -87,30 +87,30 @@ export default {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  height: 320px;
+  height: 4rem;
   background-color: #4a4e59;
   color: #FFF;
 }
 .box {
   display: flex;
   flex-direction: column;
-  width: 1200px;
-  height: 280px;
-  margin: 40px auto;
-  padding: 5px;
+  width: 15rem;
+  height: 3.5rem;
+  margin: .5rem auto;
+  padding: .0625rem;
   /* border: 1px solid red; */
 }
 .box-top {
   display: flex;
-  height: 120px;
+  height: 1.5rem;
   /* border: 1px solid red; */
 }
 .box-top .box-left-logo {
-  width: 260px;
-  height: 46px;
+  width: 3.25rem;
+  height: .575rem;
   /* margin-right: 15px; */
   /* margin: 27px 50px 27px 0; */
-  margin: auto 40px;
+  margin: auto .5rem;
   /* border: 1px solid red; */
   
 }
@@ -119,11 +119,11 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   /* border: 1px solid red; */
-  margin-left: 20px;
+  margin-left: .25rem;
 }
 
 .box1 {
-  height: 40px;
+  height: .5rem;
   /* line-height: 40px; */
   /* background-color: pink; */
 }
@@ -131,10 +131,10 @@ export default {
   display: flex;
 }
 .box1 ul li {
-  margin-right: 80px;
-  height: 40px;
-  line-height: 40px;
-  font-size: 15px;
+  margin-right: 1rem;
+  height: .5rem;
+  line-height: .5rem;
+  font-size: .1875rem;
 }
 .box1 ul li a:link,
 .box1 ul li a:visited {
@@ -142,7 +142,7 @@ export default {
   font-weight: 400;
 }
 .box1 ul li:first-child {
-  margin-left: 5px;
+  margin-left: .0625rem;
 }
 .box2 {
   display: flex;
@@ -152,26 +152,26 @@ export default {
   /* border: 1px solid red; */
 }
 .box2 .left {
-  height: 70px;
-  width: 240px;
+  height: .875rem;
+  width: 3rem;
   /* background-color: pink; */
 }
 .box2 .left li {
-  height: 30px;
-  line-height: 30px;
-  font-size: 15px;
+  height: .375rem;
+  line-height: .375rem;
+  font-size: .1875rem;
   /* margin-right: 50px; */
 }
 .box2 .left li:nth-child(1) {
-  height: 40px;
-  line-height: 40px;
-  padding-left: 5px;
+  height: .5rem;
+  line-height: .5rem;
+  padding-left: .0625rem;
 }
 
 .box2 .left li img {
-  width: 16px;
-  height: 16px;
-  margin: auto 5px;
+  width: .2rem;
+  height: .2rem;
+  margin: auto .0625rem;
 }
 .box2 .right {
   position: absolute;
@@ -179,27 +179,27 @@ export default {
   right: 0;
   /* display: flex; */
   display: inline-block;
-  height: 30px;
-  width: 300px;
+  height: .375rem;
+  width: 3.75rem;
   /* background-color: skyblue; */
 }
 .box2 .right li {
   display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  margin-right: 30px;
-  font-size: 15px;
+  height: .375rem;
+  line-height: .375rem;
+  margin-right: .375rem;
+  font-size: .1875rem;
 }
 .box2 .right li a {
   color: #FFF;
 }
 .box-bottom {
-  height: 60px;
+  height: .75rem;
   width: 100%;
-  font-size: 14px;
+  font-size: .175rem;
   font-weight: 50;
-  margin-top: 25px;
-  border-top: 1px solid #7a7d85;
+  margin-top: .3125rem;
+  border-top: .0125rem solid #7a7d85;
   /* border-top: 1px solid #4b4e56; */
 
 }
@@ -214,9 +214,9 @@ export default {
  
 }
 .box-bottom .row1 ul li {
-  height: 60px;
-  line-height: 60px;
-  margin-right: 40px;
+  height: .75rem;
+  line-height: .75rem;
+  margin-right: .5rem;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/HeaderNav copy.vue b/src/components/HeaderNav copy.vue
new file mode 100644
index 0000000..8f4c468
--- /dev/null
+++ b/src/components/HeaderNav copy.vue	
@@ -0,0 +1,281 @@
+<template>
+
+  <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }">
+    <div class="box">
+      <a href="https://www.aimzhu.com" @click="gotoHomePage">
+        <img :src="logoSrc" alt="首页logo">
+      </a>
+      <!-- <router-link to="/HomePage" @click="gotoHomePage">
+        <img :src="logoSrc" alt="首页logo">
+      </router-link> -->
+      <div class="nav router-container" :class="routerColor">
+        <ul>
+
+          <li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
+          <li><router-link to="/ShouFei"  @click="activate" :class="{ active: $route.path === '/ShouFei' }">收费介绍</router-link></li>
+          <li><router-link to="/KeFu" @click="activate" :class="{ active: $route.path === '/KeFu' }">客服中心</router-link></li>
+          <li><router-link to="/ZhengShu" @click="activate" :class="{ active: $route.path === '/ZhengShu' }">证书展示</router-link></li>
+          <!-- <li><router-link to="/DaiLiShang" @click="activate" :class="{ active: $route.path === '/DaiLiShang' }">代理商展示</router-link></li> -->
+          <!-- <li><router-link to="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</router-link></li> -->
+          <li><router-link to="/HelpCenter" @click="activate" :class="{ active: $route.path === '/HelpCenter' }">帮助中心</router-link></li>
+          <!-- <li><router-link to="/AboutUs" @click="aa()" class="acss">关于我们</router-link></li> -->
+        
+        </ul>
+
+      </div>
+      <a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
+      <a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
+    </div>
+  </div>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // logoSrc: '/src/assets/img/headicon1.png',
+      logoSrc: '/assets/img/headicon1.png',
+      isFixed: false,
+      shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
+      // isHomePage: true, // 用于跟踪是否在首页
+      // logoSrc: import('/assets/img/headicon1.png'), // 默认的logo图片
+    }
+  },
+  
+  methods:{
+    gotoHomePage() {
+      this.$router.push('/HomePage');
+      // window.location.reload(); // 刷新页面
+      
+    },
+    activateHomePage() {
+      this.isFixed = false; // 重置为默认样式
+      this.logoSrc = '/assets/img/headicon1.png';
+      // his.shouldReloadHomePage = true; // 设置刷新标志 
+      // 如果当前不是在首页，则设置标志以刷新
+      // if (this.$route.path !== '/HomePage') {
+      //   this.shouldRefreshHome = true; // 设置刷新标志
+      // }
+    }, 
+    // refreshHomePage() {
+    //   window.location.href = window.location.href
+    //   alert(11)
+    // },  
+    activate() {
+      this.isFixed = true; // 激活固定样式
+      this.logoSrc = '/assets/img/headicon2.png';
+    },
+    handleScroll() {
+      if (this.$route.path === '/HomePage') {
+        this.isFixed = window.scrollY > 0; // 仅在首页路由时，滚动时更新样式
+        // this.logoSrc = ('window.scrollY > 0' ? '/src/assets/img/headicon2.png': '/src/assets/img/headicon1.png')
+
+        if(window.scrollY > 0) {
+          this.logoSrc = '/assets/img/headicon2.png';
+        } else {
+          this.logoSrc = '/assets/img/headicon1.png';
+        }
+      }
+    },
+
+    
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+  
+
+  watch: {
+    $route(to, from) {
+      if (to.path !== '/HomePage') {
+        this.activate(); // 点击非首页路由时激活固定样式
+        
+      } else {
+        this.activateHomePage(); // 点击首页路由时重置为默认样式
+        
+      }
+    },  
+    // $route(to, from) {
+    //   // 当路由跳转到首页且设置了刷新标志时，刷新页面
+    //   if (to.path === '/HomePage' && this.shouldRefreshHome) {
+    //     this.activateHomePage(); // 点击首页路由时重置为默认样式
+    //     window.location.reload(); // 刷新页面
+    //     this.shouldRefreshHome = false; // 重置刷新标志
+    //   } else {
+    //     this.activate(); // 点击非首页路由时激活固定样式
+    //   }
+    // } 
+    
+  },
+
+  computed: {
+    navClass() {
+      return {
+        'fixed-nav': this.isFixed || this.$route.path === '/HomePage',
+      };
+    },
+    loginClass() {
+      return {
+        'border-login': this.isFixed,
+        'line-height-login': this.isFixed,
+      };
+    },
+    routerColor() {
+      return {
+        'active-color': this.$route.path === '/HomePage',
+      };
+    }
+  },
+
+
+}     
+</script>
+
+<style scoped>
+ img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  border: 0px solid transparent !important ;
+}
+.border-login {
+  border: 0.75px solid #42210B;
+}
+.line-height-login {
+  line-height: 24px;
+}
+
+.activeHomePage {
+  color: #333;
+}
+.active {
+  color: #F7931E;
+  font-weight: 700;
+}
+.active1 {
+  position: fixed;
+  /* top: 0; */
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 80px;
+  margin: 0 auto ;
+  background-color: #fff;
+  transition: all .5s ease-in-out;
+  box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
+  z-index: 9999999;
+  
+}
+.active2 {
+  border: 2px solid #42210B;
+}
+.header-nav {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 80px;
+  margin: 0 auto ;
+  background-color: transparent;
+  z-index: 99999; 
+}
+
+.fixed-nav {
+  position: fixed;
+  background-color: #fff;
+  transition: all 0 ease-in-out;
+  box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
+}
+.header-nav .box {
+  position: absolute;
+  display: flex;
+  /* width: 1500px; */
+  width: 1500px;
+  height: 80px;
+  margin: 0 auto;
+  /* border: 1px solid red; */
+}
+/* .header-nav h2 {
+  font-size: 36px;
+  margin: auto 20px auto 50px;
+}
+.header-nav p {
+  font-size: 14px;
+  margin: auto 0;
+  height: 20px;
+  width: 180px;
+  padding: 0 15px;
+  border-left: 2px solid #dedede;
+} */
+.header-nav a {
+  width: 260px;
+  height: 46px;
+  margin-left: 50px;
+  margin-top: 17px;
+  /* border: 1px solid blue; */
+}
+.header-nav .nav {
+  margin: auto;
+  display: flex;
+  /* border: 1px solid blue; */
+}
+.header-nav .nav ul {
+  display: flex;
+}
+.header-nav .nav ul li {
+  margin-right: 20px;
+  margin-left: 20px;
+  font-size: 15px;
+  /* letter-spacing: 3px; */
+  color: #42210B;
+  /* color: #FFF!; */
+}
+/* .header-nav .nav ul li a {
+  color: #FFF;
+  font-weight: 400;
+} */
+.header-nav .nav ul  .router-link-active {
+  color: #42210B!;
+  /* color: #FFF; */
+}
+
+.header-nav #login {
+  width: 70px;
+  height: 26px;
+  line-height: 24px;
+  padding: auto;
+  text-align: center;
+  margin: auto 10px auto auto ;
+  border-radius: 20px;
+  font-size: 14px;
+  background-color: rgba(255,255,255,.4);
+}
+#register {
+  width: 100px;
+  height: 26px;
+  line-height: 24px;
+  text-align: center;
+  margin: auto 30px auto 0 ;
+  border-radius: 20px;
+  font-size: 14px;
+  background-color: #42210B;
+  color: #FFF;
+}
+
+#login:hover {
+  background-color: #42210B;
+  color: #fff;
+  cursor: pointer;
+}
+#register:hover {
+  background-color: #332817;
+}
+a:hover {
+  color: #333;
+  font-weight: 700;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index 5359ff6..55cd925 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -2,7 +2,7 @@
 
   <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }">
     <div class="box">
-      <a href="https://www.aimzhu.com" @click="gotoHomePage">
+      <a class="nav-icon" href="https://www.aimzhu.com" @click="gotoHomePage">
         <img :src="logoSrc" alt="首页logo">
       </a>
       <!-- <router-link to="/HomePage" @click="gotoHomePage">
@@ -23,8 +23,11 @@
         </ul>
 
       </div>
-      <a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
-      <a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
+      <div class="login-register">
+        <a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
+        <a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
+
+      </div>
     </div>
   </div>
   <router-view></router-view>
@@ -143,10 +146,10 @@ export default {
   border: 0px solid transparent !important ;
 }
 .border-login {
-  border: 0.75px solid #42210B;
+  border: .0094rem solid #42210B;
 }
 .line-height-login {
-  line-height: 24px;
+  line-height: .3rem;
 }
 
 .activeHomePage {
@@ -162,23 +165,23 @@ export default {
   display: flex;
   flex-direction: row;
   width: 100%;
-  height: 80px;
+  height: 1rem;
   margin: 0 auto ;
   background-color: #fff;
   transition: all .5s ease-in-out;
-  box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
+  box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
   z-index: 9999999;
   
 }
 .active2 {
-  border: 2px solid #42210B;
+  border: .025rem solid #42210B;
 }
 .header-nav {
   position: absolute;
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 80px;
+  height: 1rem;
   margin: 0 auto ;
   background-color: transparent;
   z-index: 99999; 
@@ -188,50 +191,58 @@ export default {
   position: fixed;
   background-color: #fff;
   transition: all 0 ease-in-out;
-  box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
+  box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
 }
 .header-nav .box {
   position: absolute;
   display: flex;
-  width: 1500px;
-  height: 80px;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+  /* width: 1500px; */
+  /* width: 18.75rem; */
+  height: 1rem;
   margin: 0 auto;
   /* border: 1px solid red; */
 }
-/* .header-nav h2 {
-  font-size: 36px;
-  margin: auto 20px auto 50px;
-}
-.header-nav p {
-  font-size: 14px;
-  margin: auto 0;
-  height: 20px;
-  width: 180px;
-  padding: 0 15px;
-  border-left: 2px solid #dedede;
-} */
-.header-nav a {
-  width: 260px;
-  height: 46px;
-  margin-left: 50px;
-  margin-top: 17px;
+
+.header-nav .nav-icon {
+  width: 3.25rem;
+  height: .575rem;
+  margin-left: .625rem;
+  margin-top: .2125rem;
   /* border: 1px solid blue; */
 }
 .header-nav .nav {
-  margin: auto;
   display: flex;
-  /* border: 1px solid blue; */
+  height: 1rem;
+  line-height: 1rem;
+  width: 8.4rem;
 }
 .header-nav .nav ul {
   display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
 }
 .header-nav .nav ul li {
-  margin-right: 20px;
-  margin-left: 20px;
-  font-size: 15px;
-  /* letter-spacing: 3px; */
+  /* margin-right: .25rem;
+  margin-left: .25rem; */
+  /* width: 1rem; */
+  /* padding: 0 0.2rem; */
+  /* margin: 0 .5rem; */
+  font-size: .1875rem;
   color: #42210B;
-  /* color: #FFF!; */
+  text-align: center;
+}
+/* .header-nav .nav ul li:first-child {
+  margin-left: 0.1px;
+}
+.header-nav .nav ul li:last-child {
+  margin-right: 0.1px;
+} */
+.header-nav .nav ul li a {
+  width: 1rem;
 }
 /* .header-nav .nav ul li a {
   color: #FFF;
@@ -242,25 +253,30 @@ export default {
   /* color: #FFF; */
 }
 
+.header-nav .login-register {
+  display: flex;
+  width: 3.5rem;
+  height: 1rem;
+}
 .header-nav #login {
-  width: 70px;
-  height: 26px;
-  line-height: 24px;
+  width: .875rem;
+  height: .325rem;
+  line-height: .3rem;
   padding: auto;
   text-align: center;
-  margin: auto 10px auto auto ;
-  border-radius: 20px;
-  font-size: 14px;
+  margin: auto .125rem auto auto ;
+  border-radius: .25rem;
+  font-size: .175rem;
   background-color: rgba(255,255,255,.4);
 }
 #register {
-  width: 100px;
-  height: 26px;
-  line-height: 24px;
+  width: 1.25rem;
+  height: .325rem;
+  line-height: .3rem;
   text-align: center;
-  margin: auto 30px auto 0 ;
-  border-radius: 20px;
-  font-size: 14px;
+  margin: .3375rem .375rem;
+  border-radius: .25rem;
+  font-size: .175rem;
   background-color: #42210B;
   color: #FFF;
 }
diff --git a/src/components/HelpCenter.vue b/src/components/HelpCenter.vue
index d459378..a071988 100644
--- a/src/components/HelpCenter.vue
+++ b/src/components/HelpCenter.vue
@@ -376,7 +376,7 @@ export default {
   justify-content: center;
   flex-direction: column;
   width: 100%;
-  height: 605px;
+  height: 7.5625rem;
   background: url(/assets/img/helpcenter-bj.png) no-repeat;
   background-size: cover;
 }
@@ -385,23 +385,23 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 1000px;
-  height: 150px;
+  width: 12.5rem;
+  height: 1.875rem;
   margin: 0 auto;
   /* border: 2px solid red; */
 }
 
 .help-center .box-top h4 {
-  width: 500px;
-  font-size: 30px;
+  width: 6.25rem;
+  font-size: .375rem;
   color: #74491a;
-  margin-bottom: 10px;
+  margin-bottom: .125rem;
 }
 
 .help-center .box-top p {
-  width: 500px;
-  font-size: 16px;
-  letter-spacing: 5px;
+  width: 6.25rem;
+  font-size: .2rem;
+  letter-spacing: .0625rem;
   color: #9a7148;
 }
 
@@ -418,9 +418,9 @@ export default {
   position: relative;
   display: flex;
   flex-direction: column;
-  top: -200px;
-  bottom: 50px;
-  width: 1000px;
+  top: -2.5rem;
+  bottom: .625rem;
+  width: 12.5rem;
   background-color: #FFF;
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -431,47 +431,47 @@ export default {
   display: flex;
   justify-content: space-between;
   align-content: center;
-  height: 60px;
-  line-height: 60px;
-  margin: 25px;
+  height: .75rem;
+  line-height: .75rem;
+  margin: .3125rem;
   /* border: 1px solid red; */
 }
 
 .help-center .box-bottom .box .boxTitle h3 {
   display: flex;
-  font-size: 24px;
+  font-size: .3rem;
   color: #333;
-  padding-left: 15px;
+  padding-left: .1875rem;
 }
 
 .help-center .box-bottom .box .boxTitle span {
   display: flex;
-  height: 38px;
+  height: .475rem;
   margin: auto 0;
   /* align-content: center; */
 }
 
 .help-center .box-bottom .box .boxTitle span #txtInput {
   display: block;
-  width: 380px;
-  height: 38px;
+  width: 4.75rem;
+  height: .475rem;
   margin-top: 0;
-  padding-left: 14px;
-  font-size: 14px;
+  padding-left: .175rem;
+  font-size: .175rem;
   border: 0;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
-  border-radius: 3px 0 0 3px,
+  box-shadow: 0 .0125rem .0625rem rgba(0, 0, 0, 0.15);
+  border-radius: .0375rem 0 0 .0375rem,
 
 }
 
 .help-center .box-bottom .box .boxTitle span #search {
   display: block;
-  width: 85px;
-  height: 38px;
+  width: 1.0625rem;
+  height: .475rem;
   border: none;
   background-color: #febe54;
-  font-size: 15px;
-  letter-spacing: 2px;
+  font-size: .1875rem;
+  letter-spacing: .025rem;
   color: #FFF;
 }
 .help-center .box-bottom .box .boxTitle span #search:hover {
@@ -493,8 +493,8 @@ export default {
   position: relative;
 }
 .searchXS .dataList li {
-  margin-bottom: 12px;
-  border-bottom: 1px solid #CCC;
+  margin-bottom: .15rem;
+  border-bottom: .0125rem solid #CCC;
 }
 .searchXS .dataList .list h4 {
   /* margin-bottom: 6px; */
@@ -506,7 +506,7 @@ export default {
   opacity: 0.7;
 }
 .searchXS .dataList .list p {
-  margin-bottom: 12px;
+  margin-bottom: .15rem;
   overflow: hidden;
   text-overflow: ellipsis;
   /* position: relative; */
@@ -517,16 +517,16 @@ export default {
 }
 .searchXS .noData {
   width: 100%;
-  height: 40px;
-  border: 1px solid #CCC;
-  line-height: 40px; 
-  font-size: 16px;
+  height: .5rem;
+  border: .0125rem solid #CCC;
+  line-height: .5rem; 
+  font-size: .2rem;
   color: #474747;
-  padding-left: 10px;
+  padding-left: .125rem;
 }
 .searchXS .dataList .pagin {
   position: absolute;
-  right: 10px;
-  margin-top: 20px;
+  right: .125rem;
+  margin-top: .25rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 5ea3e57..107bb8c 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -172,10 +172,9 @@ export default {
     return {
       oneData: '',
       twoData: '',
-      titles: ['生成真实系统 | 可下载安装包', '生成申报材料 | 提供一键导出', '价格明码标价 | 提供价格担保', '提供代理服务 | 也可自行申报'],
+      titles: ['生成真实系统 | 可下载安装包', '提供材料撰写 | 提供一键导出', '不下证书就退款 | 免费补正也退款', '全托管包下证 | 也可自行申报'],
       intervalId: null,
       currentTitleIndex: 0,
-
       currentStepIndex1: 0,
       currentStepIndex2: 0,
       currentStepIndex3: 0,
@@ -388,7 +387,7 @@ export default {
   border: 0px solid transparent !important ;
 }
 .active {
-  border: 1px solid rgba(0,0,0,.2);
+  border: .0125rem solid rgba(0,0,0,.2);
   background-color: #FFF !important;
 }
 .home-page {
@@ -407,70 +406,69 @@ export default {
   position: relative;
   display: flex;
   flex-direction: column;
-  /* position: absolute;
-  left: 50%;
-  top: 50%; */
-  width: 900px;
-  height: 300px;
-  /* border: 2px solid red; */
+  /* width: 900px;
+  height: 300px; */
+  width: 11.25rem;
+  height: 3.75rem;
   margin: auto;
-  /* margin: auto 300px; */
   
 }
 
 .home-page .box-top .headline h2 {
-  font-size: 50px;
+  /* font-size: 50px; */
+  font-size: 0.625rem;
   color: #FFF;
   text-align: center;
 }
 .home-page .box-top .headline #title-container {
   position: relative;
-  height: 80px; /* 根据需要调整 */
+  /* height: 80px; */
+  height: 1rem;
   overflow: hidden;
   /* border: 1px solid blue; */
 }
 .home-page .box-top .headline .title {
   position: relative;
   top: 0;
-  font-size: 50px;
+  /* font-size: 50px; */
+  font-size: 0.625rem;
   color: #FFF;
-  width: 860px;
-  height: 80px;
-  line-height: 80px;
-  margin: auto 20px;
-  padding: 0 10px;
-  letter-spacing: 6px;
+  /* width: 900px; */
+  width: 11.25rem;
+  height: 1rem;
+  line-height: 1rem;
+  letter-spacing: .075rem;
   text-align: center;
   /* border: 1px solid red; */
   transition: transform 0.5s ease-in-out; 
 }
 .home-page .box-top .headline p {
-  font-size: 18px;
+  font-size: .225rem;
   color: #FFF;
   /* margin: 5px auto; */
   margin: auto;
-  letter-spacing: 2px;
+  letter-spacing: .025rem;
 }
 .home-page .box-top .headline p em {
-  font-size: 30px;
+  font-size: .375rem;
 }
 .home-page .box-top .headline .button-box {
-  font-size: 26px;
+  font-size: .325rem;
   /* margin: 20px auto; */
   margin: auto;
 }
 .home-page .box-top .headline .button-box button {
   /* padding: 10px 45px; */
-  height: 40px;
-  width: 140px;
-  margin-left: 20px;
+  height: .5rem;
+  width: 1.75rem;
+  margin-left: .25rem;
   border: none;
 }
 .home-page .box-top .headline .button-box button a {
   display: block;
-  width: 140px;
-  height: 40px;
-  line-height: 40px;
+  width: 1.75rem;
+  height: .5rem;
+  line-height: .5rem;
 }
 .home-page .box-top .headline .button-box button:first-child {
   background-color: #39C7C1;
@@ -494,49 +492,48 @@ export default {
 /* 飘窗 */
 .float-window {
   position: fixed;
-  /* width: 120px;
-  height: 120px; */
-  width: 171.25px;
-  height: 214.25px;
-  /* background-color: black; */
+  /* width: 171.25px;
+  height: 214.25px; */
+  width: 2.1406rem;
+  height: 2.6781rem;
   z-index: 99999999;
 }
 .home-page #sport_wrap {
     cursor: pointer;
   }
 .home-page #sport_wrap  .deleteImg {
-    width: 16px;
-    height: 16px;
+    width: .2rem;
+    height: .2rem;
     position:absolute;
-    right: 12px;
-    top: 9px;
+    right: .15rem;
+    top: .1125rem;
     cursor: pointer;
 }
 .home-page #sport_wrap  .deleteImg .close {
-  width:16px !important;
-  height: 16px !important;
+  width:.2rem !important;
+  height: .2rem !important;
 }
 
 .home-page .box-bottom {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 2100px;
+  height: 26.25rem;
   background-color: #fff;
 }
 .home-page .box-bottom .box1 {
-  height: 450px;
-  margin: 70px auto;
+  height: 5.625rem;
+  margin: .875rem auto;
   text-align: center;
   /* border: 2px solid red; */
 }
 .home-page .box-bottom .box1 h4 {
-  margin-top: 15px;
-  font-size: 28px;
+  margin-top: .1875rem;
+  font-size: .35rem;
 }
 .home-page .box-bottom .box1 p {
-  font-size: 14px;
-  margin: 15px auto;
+  font-size: .175rem;
+  margin: .1875rem auto;
   color: #a2a2a2;
 }
 .home-page .box-bottom .box1 ul {
@@ -545,30 +542,30 @@ export default {
 .home-page .box-bottom .box1 ul li {
   display: flex;
   flex-direction: column;
-  width: 130px;
-  margin: 40px 40px;
+  width: 1.625rem;
+  margin: 40px .5rem;
   /* padding: 0 30px; */
 }
 .home-page .box-bottom .box1 ul li img {
-  width: 110px;
-  height: 110px;
+  width: 1.375rem;
+  height: 1.375rem;
   margin: 0 auto;
 }
 .home-page .box-bottom .box1 ul li em {
-  font-size: 16px;
-  margin: 20px auto 0px auto;
+  font-size: .2rem;
+  margin: .25rem auto 0rem auto;
   font-weight: 700;
 }
 .home-page .box-bottom .box1 ul li p {
   /* font-size: 14px; */
-  line-height: 30px;
+  line-height: .375rem;
 }
 /* 软著申请步骤--------------------------------------- */
 .home-page .box-bottom .box2 {
   position: relative;
   width: 100%;
-  height: 1500px;
-  margin: 20px auto;
+  height: 18.75rem;
+  margin: .25rem auto;
   /* border: 2px solid red; */
 }
 .home-page .box-bottom .icon {
@@ -576,60 +573,59 @@ export default {
   display: none;
   position: fixed;
   z-index: 20;
-  bottom: 10px;
-  right: 10px;
-  width: 80px;
-  height: 80px;
+  bottom: .125rem;
+  right: .125rem;
+  height: 1rem;
   cursor: pointer;
 }
 .home-page .box-bottom .location1{
   position: absolute;
-  top: 160px;
+  top: 2rem;
   /* right: -150px; */
   right: 0;
-  width: 270px;
-  height: 330px;
+  width: 3.375rem;
+  height: 4.125rem;
   /* border: 2px solid red; */
   /* z-index: 100; */
 }
 .home-page .box-bottom .location2{
   position: absolute;
-  top: 380px;
+  top: 4.75rem;
   /* left: -180px; */
   left: 0;
-  width: 240px;
-  height: 320px;
+  width: 3rem;
+  height: 4rem;
   /* border: 2px solid red; */
   /* z-index: 100; */
 }
 .home-page .box-bottom .location3{
   position: absolute;
-  top: 830px;
+  top: 10.375rem;
   /* right: -150px; */
   right: 0;
-  width: 270px;
-  height: 330px;
+  width: 3.375rem;
+  height: 4.125rem;
   /* border: 2px solid red; */
   /* z-index: 100; */
 }
 .home-page .box-bottom .box2 .step {
-  margin: 10px;
+  margin: .125rem;
   /* border: 2px solid red; */
 }
 
 .home-page .box-bottom .box2 .step h4 {
   text-align: center;
   font-size: 30px;
-  padding: 20px 30px;
+  padding: .25rem .375rem;
 }
 .home-page .box-bottom .box2 .step .step_head_tab {
   /* position: fixed;
   backdrop-filter: blur(10px); */
-  top: 90px;
+  top: 1.125rem;
   left: 0;
   z-index: 9999999;
   width: 100%;
-  height: 60px;
+  height: .75rem;
   background-color: rgba(255,255,255,.6);
 }
 
@@ -643,19 +639,19 @@ export default {
   justify-content: center;
   flex-wrap: wrap;
   align-content: center;
-  width: 600px;
-  height: 60px;
+  width: 7.5rem;
+  height: .75rem;
   margin: auto;
 
 }
 .home-page .box-bottom .box2 .step ul li {
   /* padding: 10px 35px; */
-  width: 200px;
-  height: 52px;
-  line-height: 42px;
+  width: 2.5rem;
+  height: .65rem;
+  line-height: .525rem;
   text-align: center;
   background-color: #FFF;
-  border: 5px solid #f8fbfd;
+  border: .0625rem solid #f8fbfd;
   cursor: pointer;
 }
 .home-page .box-bottom .box2 .step ul li:nth-child(2) {
@@ -668,85 +664,85 @@ export default {
   position: relative;
   z-index: 10;
   display: flex;
-  width: 1100px;
-  height: 380px;
+  width: 13.75rem;
+  height: 4.75rem;
   /* border: 2px solid red; */
-  margin: 30px auto;
+  margin: .375rem auto;
 }
 .home-page .box-bottom .box2 .step1 .left-box {
   position: relative;
-  width: 370px;
-  height: 360px;
-  margin: 10px;
+  width: 4.625rem;
+  height: 4.5rem;
+  margin: .125rem;
   /* border: 2px solid red; */
 }
 /* 步骤一二三上方题目 */
 .home-page .box-bottom .box2 .step1 .left-box .top1 {
-  width: 180px;
-  height: 150px;
+  width: 2.25rem;
+  height: 1.875rem;
   /* border: 1px solid red; */
 }
 .home-page .box-bottom .box2 .step1 .left-box .top1 .box {
   position: absolute;
   top: 0;
-  width: 110px;
-  height: 100px;
+  width: 1.375rem;
+  height: 1.25rem;
   background: url(/assets/img/step-top1.png) no-repeat; 
 }
 
 .home-page .box-bottom .box2 .step1 .left-box .top1 .box p {
   position: absolute;
-  left: 25px;
+  left: .3125rem;
   bottom: 0;
-  width: 60px;
-  font-size: 22px;
+  width: .75rem;
+  font-size: .275rem;
   /* border: 1px solid blue; */
 }
 .home-page .box-bottom .box2 .step1 .left-box .top1 .box p em {
-  font-size: 36px;
+  font-size: .45rem;
   font-weight: 700;
 }
 .home-page .box-bottom .box2 .step1 .left-box .top1 .title {
   position: absolute;
-  top: 100px;
-  width: 180px;
-  height: 50px;
+  top: 1.25rem;
+  width: 2.25rem;
+  height: .625rem;
   text-align: center;
   /* border: 1px solid green; */
 }
 .home-page .box-bottom .box2 .step1 .left-box .top1 h4 {
-  font-size: 28px;
+  font-size: .35rem;
   font-weight: 700;
   margin: 0 auto;
 }
 .home-page .box-bottom .box2 .step1 .left-box ul li {
   display: flex;
-  height: 42.5px;
-  border-radius: 7px;
-  margin: 8px;
+  height: .5313rem;
+  border-radius: .0875rem;
+  margin: .1rem;
   background-color: #f9f9f9;
   cursor: pointer;
 }
 .home-page .box-bottom .box2 .step1 .left-box ul .newStyle {
-  border: 0.25px solid #B3B3B3;
+  border: .0031rem solid #B3B3B3;
   background-color: transparent;
 }
 
 
 .home-page .box-bottom .box2 .step1 .left-box ul li img {
-  width: 25px;
-  height: 25px;
-  margin: auto 10px;
+  width: .3125rem;
+  height: .3125rem;
+  margin: auto .125rem;
 }
 .home-page .box-bottom .box2 .step1 .left-box ul li p {
-  font-size: 16px;
-  margin: auto 5px;
+  font-size: .2rem;
+  margin: auto .0625rem;
 }
 .home-page .box-bottom .box2 .step1 .right-box {
   z-index: 999;
-  width: 650px;
-  height: 360px;
-  margin: 10px 10px 10px auto;
+  width: 8.125rem;
+  height: 4.5rem;
+  margin: .125rem .125rem .125rem auto;
   /* border: 2px solid red; */
 }
 /* 步骤2----------------------------------------- */
@@ -754,167 +750,167 @@ export default {
   position: relative;
   z-index: 10;
   display: flex;
-  width: 1100px;
-  height: 380px;
+  width: 13.75rem;
+  height: 4.75rem;
   /* border: 2px solid red; */
-  margin: 30px auto;
+  margin: .375rem auto;
 }
 .home-page .box-bottom .box2 .step2 .left-box {
   position: relative;
-  width: 650px;
-  height: 360px;
-  margin: 10px auto 10px 10px;
+  width: 8.125rem;
+  height: 4.5rem;
+  margin: .125rem auto .125rem .125rem;
   /* border: 2px solid red; */
 }
 
 .home-page .box-bottom .box2 .step2 .right-box {
   position: relative;
-  width: 370px;
-  height: 360px;
-  margin: 10px;
+  width: 4.625rem;
+  height: 4.5rem;
+  margin: .125rem;
   /* border: 2px solid red; */
 }
 .home-page .box-bottom .box2 .step2 .right-box .top2 {
   /* position: absolute; */
   right: 0;
-  width: 180px;
-  height: 150px;
+  width: 2.25rem;
+  height: 1.875rem;
   /* border: 1px solid red; */
 }
 .home-page .box-bottom .box2 .step2 .right-box .top2 .box {
   position: absolute;
   top: 0;
   right: 0;
-  width: 110px;
-  height: 100px;
+  width: 1.375rem;
+  height: 1.25rem;
   background: url(/assets/img/step-top2.png) no-repeat;
   /* border: 1px solid red; */
 }
 .home-page .box-bottom .box2 .step2 .right-box .top2 .box p {
   position: absolute;
-  right: 20px;
+  right: .25rem;
   bottom: 0;
-  width: 60px;
-  font-size: 22px;
+  width: .75rem;
+  font-size: .275rem;
 }
 .home-page .box-bottom .box2 .step2 .right-box .top2 .box p em {
-  font-size: 36px;
+  font-size: .45rem;
   font-weight: 700;
 }
 .home-page .box-bottom .box2 .step2 .right-box .top2 .title {
   position: absolute;
-  top: 100px;
+  top: 1.25rem;
   right: 0;
-  width: 180px;
-  height: 50px;
+  width: 2.25rem;
+  height: .625rem;
   text-align: center;
   /* border: 1px solid green; */
 }
 .home-page .box-bottom .box2 .step2 .right-box .top2 .title h4 {
-  font-size: 28px;
+  font-size: .35rem;
   font-weight: 700;
   margin: 0 auto;
 }
 
 .home-page .box-bottom .box2 .step2 .right-box ul li {
   display: flex;
-  height: 42.5px;
-  border-radius: 7px;
-  margin: 8px;
+  height: .5313rem;
+  border-radius: .0875rem;
+  margin: .1rem;
   background-color: #f9f9f9;
   cursor: pointer;
 }
 .home-page .box-bottom .box2 .step2 .right-box ul .newStyle {
-  border: 0.25px solid #B3B3B3;
+  border: .0031rem solid #B3B3B3;
   background-color: transparent;
 }
 .home-page .box-bottom .box2 .step2 .right-box ul li img {
-  width: 25px;
-  height: 25px;
-  margin: auto 10px;
+  width: .3125rem;
+  height: .3125rem;
+  margin: auto .125rem;
 }
 .home-page .box-bottom .box2 .step2 .right-box ul li p {
-  font-size: 16px;
-  margin: auto 5px;
+  font-size: .2rem;
+  margin: auto .0625rem;
 }
 /* 步骤3--------------------------------------- */
 .home-page .box-bottom .box2 .step3 {
   position: relative;
   z-index: 10;
   display: flex;
-  width: 1100px;
-  height: 380px;
+  width: 13.75rem;
+  height: 4.75rem;
   /* border: 2px solid red; */
-  margin: 30px auto;
+  margin: .375rem auto;
 }
 .home-page .box-bottom .box2 .step3 .left-box {
-  width: 370px;
-  height: 360px;
-  margin: 10px;
+  width: 4.625rem;
+  height: 4.5rem;
+  margin: .125rem;
   /* border: 2px solid red; */
 }
 .home-page .box-bottom .box2 .step3 .left-box .top3 {
   position: relative;
-  width: 180px;
-  height: 150px;
+  width: 2.25rem;
+  height: 1.875rem;
   /* border: 1px solid red; */
 }
 .home-page .box-bottom .box2 .step3 .left-box .top3 .box {
   position: absolute;
   top: 0;
-  width: 110px;
-  height: 100px;
+  width: 1.375rem;
+  height: 1.25rem;
   background: url(/assets/img/step-top3.png) no-repeat;
 }
 .home-page .box-bottom .box2 .step3 .left-box .top3 .box p {
   position: absolute;
-  left: 25px;
+  left: .3125rem;
   bottom: 0;
-  width: 60px;
-  font-size: 22px;
+  width: .75rem;
+  font-size: .275rem;
 }
 .home-page .box-bottom .box2 .step3 .left-box .top3 .box p em {
-  font-size: 36px;
+  font-size: .45rem;
   font-weight: 700;
 }
 .home-page .box-bottom .box2 .step3 .left-box .top3 .title {
   position: absolute;
-  top: 100px;
-  width: 180px;
-  height: 50px;
+  top: 1.25rem;
+  width: 2.25rem;
+  height: .625rem;
   text-align: center;
 }
 .home-page .box-bottom .box2 .step3 .left-box .top3 .title h4 {
-  font-size: 28px;
+  font-size: .35rem;
   font-weight: 700;
   margin: 0 auto;
 }
 .home-page .box-bottom .box2 .step3 .left-box ul li {
   display: flex;
-  height: 42.5px;
-  border-radius: 7px;
-  margin: 8px;
+  height: .5313rem;
+  border-radius: .0875rem;
+  margin: .1rem;
   background-color: #f9f9f9;
   cursor: pointer;
 }
 .home-page .box-bottom .box2 .step3 .left-box ul .newStyle {
-  border: 0.25px solid #B3B3B3;
+  border: .0031rem solid #B3B3B3;
   background-color: transparent;
 }
 .home-page .box-bottom .box2 .step3 .left-box ul li img {
-  width: 25px;
-  height: 25px;
-  margin: auto 10px;
+  width: .3125rem;
+  height: .3125rem;
+  margin: auto .125rem;
 }
 .home-page .box-bottom .box2 .step3 .left-box ul li p {
-  font-size: 16px;
-  margin: auto 5px;
+  font-size: .2rem;
+  margin: auto .0625rem;
 }
 .home-page .box-bottom .box2 .step3 .right-box {
   position: relative;
-  width: 650px;
-  height: 360px;
-  margin: 10px 10px 10px auto;
+  width: 8.125rem;
+  height: 4.5rem;
+  margin: .125rem .125rem .125rem auto;
   /* border: 2px solid red; */
 }
 </style>
\ No newline at end of file
diff --git a/src/components/HomePage3.vue b/src/components/HomePage3.vue
new file mode 100644
index 0000000..10e7dcb
--- /dev/null
+++ b/src/components/HomePage3.vue
@@ -0,0 +1,919 @@
+<template>
+  <div class="home-page">
+    <!-- 飘窗 -->
+    <div id="sport_wrap" v-if="sportStatus" class="float-window" :style="{left: `${floatWindow.left}px`, top: `${floatWindow.top}px`}" @mouseover="mouseOver" @mouseleave="mouseLeave">
+      <div class="deleteImg" @click="showSport">
+        <img class="close" src="/assets/img/close.png" alt="">
+      </div>
+      <img :src="floatImg" @click="windowSkip" alt="">
+    </div>
+
+    <div class="box-top">
+      <div class="headline">
+        <h2>不止</h2>
+       
+        <!-- <div id="title-container" >
+          <h3 v-for="(title, index) in titles" :key="index" class="title" :style="{transform: `translateY(-${currentTitleIndex * 100}%)`}">{{ title }}</h3>
+        </div> -->
+
+        <div id="title-container" >
+          <h3 v-for="(title, index) in titles" :key="index" class="title" :style="titleContainerStyle">{{ title }}</h3>
+        </div>
+        <p>AI软著引擎平台累计辅助编写资料<em>{{number1}}</em>万套，通过平台代办下发证书<em>{{number2}}</em>万件</p>
+        <div class="button-box">
+          <button><a href="https://www.aimzhu.com/operator/">免费试用</a></button>
+          <button><a href="https://www.aimzhu.com/operator/">立即前往</a></button>
+        </div>
+      </div>
+    </div>
+    <div class="box-bottom">
+      <div class="box1">
+        <h4>软件著作权的重要性</h4>
+        <p>没有被保护的作品随时面临被抄袭，侵权的风险</p>
+        <ul>
+          <li>
+            <img src="/assets/img/box1-1.jpg" alt="logo图片">
+            <em style="color: #8281e9;">帮助宣传</em>
+            <p>已登记的版权可以向社会宣传自己的产品</p>
+          </li>
+          <li>
+            <img src="/assets/img/box1-2.jpg" alt="logo图片">
+            <em style="color: #4193f9;">防止抄袭</em>
+            <p>当自己的版权被侵犯时，可以采取法律措施，维护自己的权益</p>
+          </li>
+          <li>
+            <img src="/assets/img/box1-3.jpg" alt="logo图片">
+            <em style="color: #ff8217;">提升无形资产</em>
+            <p>帮助企业增资，提升递延纳税优惠</p>
+          </li>
+          <li>
+            <img src="/assets/img/box1-4.jpg" alt="logo图片">
+            <em style="color: #7daafa;">平台入住</em>
+            <p>腾讯/阿里/百度等大平台入住必备条件</p>
+          </li>
+          <li>
+            <img src="/assets/img/box1-5.jpg" alt="logo图片">
+            <em style="color: #ffc15d;">减免税收</em>
+            <p>办理高新技术企业认定的前提条件，并且享受百万政府补贴</p>
+          </li>
+        </ul>
+      </div>  
+
+      <div class="box2">
+        <!-- 背景定位图片 -->
+        <a href="">
+          <img class="icon" src="/assets/img/icon.png" alt="">
+        </a>
+        <div class="location1">
+          <img src="/assets/img/location1.jpg" alt="">
+        </div>
+        <div class="location2">
+          <img src="/assets/img/location2.jpg" alt="">
+        </div>
+        <div class="location3">
+          <img src="/assets/img/location3.jpg" alt="">
+        </div>
+        <!-- 软著申请步骤 -->
+        <div class="step">
+          <h4>简单三步，完成您的软件著作权登记证书申请</h4>
+          <div class="step_head_tab" ref="boxRef">
+            <ul>
+              <li v-scroll-to="{ el: '.step1', offset: -100}">系统搭建</li>
+              <li v-scroll-to="{ el: '.step2', offset: -100}">资料下载</li>
+              <li v-scroll-to="{ el: '.step3', offset: -100}">网上申报</li>
+            </ul>
+          </div>
+          
+        </div>
+        <!-- 步骤1 -->
+        <div class="step1">
+          <div class="left-box">
+            <div class="top1">
+              <div class="box">
+                <p>
+                  <em>1</em>/<i>3</i>
+                </p>
+              </div>
+              <div class="title">
+                <h4>系统搭建</h4>
+              </div>
+            </div>
+            <ul>
+              <li id="step1" v-for="(item1, index) in stepsContent1" :key="index"  @click="selectStep1(index)" :class="{ active: currentStepIndex1 === index }" @mouseover="selectStep1(index)">
+                <img :src="getStepImage1(item1, index)" alt="">
+                <p>{{ item1.text }}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="right-box">
+            <img :src="getRightBoxImage1(currentStepIndex1)" alt="">
+          </div>
+        </div>
+        <!-- 步骤2 -->
+        <div class="step2">
+          <div class="left-box">
+            <img :src="getRightBoxImage2(currentStepIndex2)" alt="">
+          </div>
+          <div class="right-box">
+            <div class="top2">
+              <div class="box">
+                <p>
+                  <em>2</em>/<i>3</i>
+                </p>
+              </div>
+              <div class="title">
+                <h4>资料下载</h4>
+              </div>
+            </div>
+            <ul>
+              <li id="step5" v-for="(item2, index) in stepsContent2" :key="index"  @click="selectStep2(index)" :class="{ active: currentStepIndex2 === index }" @mouseover="selectStep2(index)">
+                <img :src="getStepImage2(item2, index)" alt="">
+                <p>{{ item2.text }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!-- 步骤3 -->
+        <div class="step3">
+          <div class="left-box">
+            <div class="top3">
+              <div class="box">
+                <p>
+                  <em>3</em>/<i>3</i>
+                </p>
+              </div>
+              <div class="title">
+                <h4>网上申报</h4>
+              </div>
+            </div>
+            <ul>
+              <li id="step9" v-for="(item3, index) in stepsContent3" :key="index"  @click="selectStep3(index)" :class="{ active: currentStepIndex3 === index }" @mouseover="selectStep3(index)">
+                <img :src="getStepImage3(item3, index)" alt="">
+                <p>{{ item3.text }}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="right-box">
+            <img :src="getRightBoxImage3(currentStepIndex3)" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { useRoute, useRouter } from 'vue-router'
+import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
+import axios from 'axios' 
+export default {
+  data() {
+    return {
+      oneData: '',
+      twoData: '',
+      titles: ['生成真实系统 | 可下载安装包', '提供材料撰写 | 提供一键导出', '不下证书就退款 | 免费补正也退款', '全托管包下证 | 也可自行申报'],
+      intervalId: null,
+      currentTitleIndex: 0,
+      currentStepIndex1: 0,
+      currentStepIndex2: 0,
+      currentStepIndex3: 0,
+      stepsContent1: [
+        { text: '填写系统名称并签署委托开发协议',images: ['step-1.png', 'step-1-1.png'] },
+        { text: '由AI生成系统功能与系统简介',images: ['step-2.png', 'step-2-2.png'] },
+        { text: '填写系统相关所属权信息并生成系统', images: ['step-3.png', 'step-3-3.png'] },
+        { text: '提供灵活的安装包支持公有或私有部署', images: ['step-4.png', 'step-4-4.png'] },
+      ],
+      stepsContent2: [
+        { text: '一键生成软著申请所需的所有材料', images: ['step-5.png', 'step-5-5.png']},
+        { text: '提供源代码审查与查重保证原创性', images: ['step-6.png', 'step-6-6.png']},
+        { text: '提供多种风格的系统皮肤与框架', images: ['step-7.png', 'step-7-7.png']},
+        { text: '提供多种风格和行业的用户操作手册模板', images: ['step-8.png', 'step-8-8.png']},
+      ],
+      stepsContent3: [
+        { text: '提供国家版权登记平台填报服务', images: ['step-9.png', 'step-9-9.png']},
+        { text: '提供申报环节动态实时通知服务', images: ['step-10.png', 'step-10-10.png']},
+        { text: '提供软著材料重新编写与补正服务', images: ['step-11.png', 'step-11-11.png']},
+        { text: '提供申报担保及包下证服务', images: ['step-12.png', 'step-12-12.png']},
+      ],
+      rightBoxImages1: ['1-1.png', '1-2.png', '1-3.png', '1-4.png'],
+      rightBoxImages2: ['2-1.png', '2-2.png', '2-3.png', '2-4.png'],
+      rightBoxImages3: ['3-1.png', '3-2.png', '3-3.png', '3-4.png'],
+
+      number1: '',
+      number2: '' ,
+
+      imgFloat: '',
+      floatImg: '',
+      contentId: '',
+      title: '',
+      
+      sportStatus: false,
+      timer: null,
+      floatWindow: {
+        left: 0,
+        top: 0,
+        direction: {
+          top: 1,
+          left: 1
+        }
+      }
+    }
+  },
+
+  methods: {
+    selectStep1(index) {
+      this.currentStepIndex1 = index; // 设置当前选中的步骤索引
+    },
+    getStepImage1(item1, index) {
+      // 拼接完整的图片路径
+      const activeIndex = this.currentStepIndex1 === index ? 1 : 0;
+      return `assets/img/${item1.images[activeIndex]}`;
+    },
+    getRightBoxImage1(index) {
+      // 拼接右侧盒子图片的完整路径
+      return `assets/img/${this.rightBoxImages1[index]}`;
+    },
+
+    selectStep2(index) {
+      this.currentStepIndex2 = index; // 设置当前选中的步骤索引
+    },
+    getStepImage2(item2, index) {
+      // 拼接完整的图片路径
+      const activeIndex = this.currentStepIndex2 === index ? 1 : 0;
+      return `assets/img/${item2.images[activeIndex]}`;
+    },
+    getRightBoxImage2(index) {
+      // 拼接右侧盒子图片的完整路径
+      return `assets/img/${this.rightBoxImages2[index]}`;
+    },
+
+    selectStep3(index) {
+      this.currentStepIndex3 = index; // 设置当前选中的步骤索引
+    },
+    getStepImage3(item3, index) {
+      // 拼接完整的图片路径
+      const activeIndex = this.currentStepIndex3 === index ? 1 : 0;
+      return `assets/img/${item3.images[activeIndex]}`;
+    },
+    getRightBoxImage3(index) {
+      // 拼接右侧盒子图片的完整路径
+      return `assets/img/${this.rightBoxImages3[index]}`;
+    },
+
+    startData() {
+      const dataUrl = 'https://www.aimzhu.com/copyright/api/env/custom/get-proj-counts'
+      axios.get(dataUrl).then(response => {
+        // console.log(response.data.data);
+        this.number1 = response.data.data[0]
+        this.number2 = response.data.data[1]
+      })
+    }, 
+    startScroll() {
+      this.intervalId = setInterval(() => {
+        this.currentTitleIndex = (this.currentTitleIndex + 1) % this.titles.length;
+        if (this.currentTitleIndex === 0) {
+          // 使用Vue的nextTick来在DOM更新后重置过渡效果
+          this.$nextTick(() => {
+            // this.resetTransition();
+          });
+        }
+      }, 3000);
+    },
+    stopScroll() {
+      clearInterval(this.intervalId);
+    },
+     // 飘窗所需图片内容
+     floatContent() {
+      axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
+        // console.log(response.data)
+        if (response.data.length != 0) {
+          const imgFolat = response.data[0].photo
+        this.floatImg = `https://www.aimzhu.com/operator/route/file/download/true/${imgFolat}`
+        this.contentId = response.data[0].contentId
+        this.title = response.data[0].title
+        this.sportStatus =  true
+        this.floatWindowMove();
+        } else {
+          this.sportStatus = false
+        }
+      })
+      .catch(error => {
+        console.error('There was an error!', error)
+      })
+    },
+    // 飘窗移动
+    floatWindowMove() {
+      let self = this;
+      let winWidth = window.innerWidth;
+      let winHeight = window.innerHeight;
+      this.timer = setInterval(() => {
+        if(self.floatWindow.top + 200 >= winHeight) {
+          self.floatWindow.direction.top = -1;
+        } else if(self.floatWindow.top <= 0) {
+          self.floatWindow.direction.top = 1;
+        }
+
+        if(self.floatWindow.left + 200 >= winWidth) {
+          self.floatWindow.direction.left = -1;
+        } else if(self.floatWindow.left <= 0) {
+          self.floatWindow.direction.left = 1;
+        }
+        self.floatWindow.top += self.floatWindow.direction.top * 2;
+        self.floatWindow.left += self.floatWindow.direction.left * 2;
+      }, 20);
+    },
+    showSport(){
+    //关闭漂浮窗
+      this.sportStatus = false
+      // clearInterval(this.timer)
+    },
+    // 鼠标移入
+    mouseOver(){
+      clearInterval(this.timer); // 清除定时器
+    },
+    // 鼠标移出
+    mouseLeave(){
+      this.floatWindowMove();
+    },
+    // 飘窗跳转
+    windowSkip() {
+      window.open(`https://www.aimzhu.com/operator/route/content/view?contentId=${this.contentId}&title=${this.title}`);
+    },
+  },
+
+  computed: {
+    titleContainerStyle() {
+      return {
+        transform: `translateY(-${this.currentTitleIndex * 100}%)`,
+        transition: 'transform 0.5s ease-in-out',
+      };
+    },
+  },
+
+  mounted() {
+    this.startScroll();
+    this.startData();
+    this.floatContent();
+    // this.goToLink();
+    axios.get(``).then(Response => {
+      this.oneData = Response.data
+      this.twoData = Response.data
+    }).catch(error => {
+      console.error('Error fetching data:', error)
+    });
+
+    
+  },
+
+
+  // beforeUnmount() {
+  //   clearInterval(this.intervalId);  
+  // },
+  beforeDestroy() {
+    this.stopScroll();
+    // this.startData();
+    clearInterval(this.timer); // 清除定时器
+  }
+
+}
+</script>
+
+<style scoped>
+ img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  border: 0px solid transparent !important ;
+}
+.active {
+  border: 1px solid rgba(0,0,0,.2);
+  background-color: #FFF !important;
+}
+.home-page {
+  position: relative;
+}
+
+.home-page .box-top {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  /* background-color: pink; */
+  background: url(/assets/img/home-bj.png) no-repeat;
+  background-size: cover;
+}
+.home-page .box-top .headline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  /* position: absolute;
+  left: 50%;
+  top: 50%; */
+  width: 900px;
+  height: 300px;
+  /* border: 2px solid red; */
+  margin: auto;
+  /* margin: auto 300px; */
+  
+}
+
+.home-page .box-top .headline h2 {
+  font-size: 50px;
+  color: #FFF;
+  text-align: center;
+}
+.home-page .box-top .headline #title-container {
+  position: relative;
+  height: 80px; /* 根据需要调整 */
+  overflow: hidden;
+  /* border: 1px solid blue; */
+}
+.home-page .box-top .headline .title {
+  position: relative;
+  top: 0;
+  font-size: 50px;
+  color: #FFF;
+  width: 900px;
+  height: 80px;
+  line-height: 80px;
+  /* margin: auto 20px; */
+  /* padding: 0 10px; */
+  letter-spacing: 6px;
+  text-align: center;
+  /* border: 1px solid red; */
+  transition: transform 0.5s ease-in-out; 
+}
+.home-page .box-top .headline p {
+  font-size: 18px;
+  color: #FFF;
+  /* margin: 5px auto; */
+  margin: auto;
+  letter-spacing: 2px;
+}
+.home-page .box-top .headline p em {
+  font-size: 30px;
+}
+.home-page .box-top .headline .button-box {
+  font-size: 26px;
+  /* margin: 20px auto; */
+  margin: auto;
+}
+.home-page .box-top .headline .button-box button {
+  /* padding: 10px 45px; */
+  height: 40px;
+  width: 140px;
+  margin-left: 20px;
+  border: none;
+}
+.home-page .box-top .headline .button-box button a {
+  display: block;
+  width: 140px;
+  height: 40px;
+  line-height: 40px;
+}
+.home-page .box-top .headline .button-box button:first-child {
+  background-color: #39C7C1;
+  /* color: #FFF; */
+}
+.home-page .box-top .headline .button-box button:first-child a {
+  color: #FFF;
+}
+
+.home-page .box-top .headline.button-box button:first-child:hover {
+  background-color: #00A99D;
+  color: #FFF;
+  font-weight: 700;
+  cursor: pointer;
+}
+.home-page .box-top .headline .button-box button:last-child:hover {
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* 飘窗 */
+.float-window {
+  position: fixed;
+  /* width: 120px;
+  height: 120px; */
+  width: 171.25px;
+  height: 214.25px;
+  /* background-color: black; */
+  z-index: 99999999;
+}
+.home-page #sport_wrap {
+    cursor: pointer;
+  }
+.home-page #sport_wrap  .deleteImg {
+    width: 16px;
+    height: 16px;
+    position:absolute;
+    right: 12px;
+    top: 9px;
+    cursor: pointer;
+}
+.home-page #sport_wrap  .deleteImg .close {
+  width:16px !important;
+  height: 16px !important;
+}
+
+.home-page .box-bottom {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 2100px;
+  background-color: #fff;
+}
+.home-page .box-bottom .box1 {
+  height: 450px;
+  margin: 70px auto;
+  text-align: center;
+  /* border: 2px solid red; */
+}
+.home-page .box-bottom .box1 h4 {
+  margin-top: 15px;
+  font-size: 28px;
+}
+.home-page .box-bottom .box1 p {
+  font-size: 14px;
+  margin: 15px auto;
+  color: #a2a2a2;
+}
+.home-page .box-bottom .box1 ul {
+  display: flex;
+}
+.home-page .box-bottom .box1 ul li {
+  display: flex;
+  flex-direction: column;
+  width: 130px;
+  margin: 40px 40px;
+  /* padding: 0 30px; */
+}
+.home-page .box-bottom .box1 ul li img {
+  width: 110px;
+  height: 110px;
+  margin: 0 auto;
+}
+.home-page .box-bottom .box1 ul li em {
+  font-size: 16px;
+  margin: 20px auto 0px auto;
+  font-weight: 700;
+}
+.home-page .box-bottom .box1 ul li p {
+  /* font-size: 14px; */
+  line-height: 30px;
+}
+/* 软著申请步骤--------------------------------------- */
+.home-page .box-bottom .box2 {
+  position: relative;
+  width: 100%;
+  height: 1500px;
+  margin: 20px auto;
+  /* border: 2px solid red; */
+}
+.home-page .box-bottom .icon {
+  /* position: absolute; */
+  display: none;
+  position: fixed;
+  z-index: 20;
+  bottom: 10px;
+  right: 10px;
+  width: 80px;
+  height: 80px;
+  cursor: pointer;
+}
+.home-page .box-bottom .location1{
+  position: absolute;
+  top: 160px;
+  /* right: -150px; */
+  right: 0;
+  width: 270px;
+  height: 330px;
+  /* border: 2px solid red; */
+  /* z-index: 100; */
+}
+.home-page .box-bottom .location2{
+  position: absolute;
+  top: 380px;
+  /* left: -180px; */
+  left: 0;
+  width: 240px;
+  height: 320px;
+  /* border: 2px solid red; */
+  /* z-index: 100; */
+}
+.home-page .box-bottom .location3{
+  position: absolute;
+  top: 830px;
+  /* right: -150px; */
+  right: 0;
+  width: 270px;
+  height: 330px;
+  /* border: 2px solid red; */
+  /* z-index: 100; */
+}
+.home-page .box-bottom .box2 .step {
+  margin: 10px;
+  /* border: 2px solid red; */
+}
+
+.home-page .box-bottom .box2 .step h4 {
+  text-align: center;
+  font-size: 30px;
+  padding: 20px 30px;
+}
+.home-page .box-bottom .box2 .step .step_head_tab {
+  /* position: fixed;
+  backdrop-filter: blur(10px); */
+  top: 90px;
+  left: 0;
+  z-index: 9999999;
+  width: 100%;
+  height: 60px;
+  background-color: rgba(255,255,255,.6);
+}
+
+.home-page .box-bottom .box2 .step .stepscrollfix {
+  position: fixed;
+  backdrop-filter: blur(10px);
+}
+.home-page .box-bottom .box2 .step ul {
+  display: flex;
+  /* flex-direction: column; */
+  justify-content: center;
+  flex-wrap: wrap;
+  align-content: center;
+  width: 600px;
+  height: 60px;
+  margin: auto;
+
+}
+.home-page .box-bottom .box2 .step ul li {
+  /* padding: 10px 35px; */
+  width: 200px;
+  height: 52px;
+  line-height: 42px;
+  text-align: center;
+  background-color: #FFF;
+  border: 5px solid #f8fbfd;
+  cursor: pointer;
+}
+.home-page .box-bottom .box2 .step ul li:nth-child(2) {
+  border-left: 0;
+  border-right: 0;
+}
+
+/* 步骤1------------------- */
+.home-page .box-bottom .box2 .step1 {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  width: 1100px;
+  height: 380px;
+  /* border: 2px solid red; */
+  margin: 30px auto;
+}
+.home-page .box-bottom .box2 .step1 .left-box {
+  position: relative;
+  width: 370px;
+  height: 360px;
+  margin: 10px;
+  /* border: 2px solid red; */
+}
+/* 步骤一二三上方题目 */
+.home-page .box-bottom .box2 .step1 .left-box .top1 {
+  width: 180px;
+  height: 150px;
+  /* border: 1px solid red; */
+}
+.home-page .box-bottom .box2 .step1 .left-box .top1 .box {
+  position: absolute;
+  top: 0;
+  width: 110px;
+  height: 100px;
+  background: url(/assets/img/step-top1.png) no-repeat; 
+}
+
+.home-page .box-bottom .box2 .step1 .left-box .top1 .box p {
+  position: absolute;
+  left: 25px;
+  bottom: 0;
+  width: 60px;
+  font-size: 22px;
+  /* border: 1px solid blue; */
+}
+.home-page .box-bottom .box2 .step1 .left-box .top1 .box p em {
+  font-size: 36px;
+  font-weight: 700;
+}
+.home-page .box-bottom .box2 .step1 .left-box .top1 .title {
+  position: absolute;
+  top: 100px;
+  width: 180px;
+  height: 50px;
+  text-align: center;
+  /* border: 1px solid green; */
+}
+.home-page .box-bottom .box2 .step1 .left-box .top1 h4 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 auto;
+}
+.home-page .box-bottom .box2 .step1 .left-box ul li {
+  display: flex;
+  height: 42.5px;
+  border-radius: 7px;
+  margin: 8px;
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+.home-page .box-bottom .box2 .step1 .left-box ul .newStyle {
+  border: 0.25px solid #B3B3B3;
+  background-color: transparent;
+}
+
+
+.home-page .box-bottom .box2 .step1 .left-box ul li img {
+  width: 25px;
+  height: 25px;
+  margin: auto 10px;
+}
+.home-page .box-bottom .box2 .step1 .left-box ul li p {
+  font-size: 16px;
+  margin: auto 5px;
+}
+.home-page .box-bottom .box2 .step1 .right-box {
+  z-index: 999;
+  width: 650px;
+  height: 360px;
+  margin: 10px 10px 10px auto;
+  /* border: 2px solid red; */
+}
+/* 步骤2----------------------------------------- */
+.home-page .box-bottom .box2 .step2 {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  width: 1100px;
+  height: 380px;
+  /* border: 2px solid red; */
+  margin: 30px auto;
+}
+.home-page .box-bottom .box2 .step2 .left-box {
+  position: relative;
+  width: 650px;
+  height: 360px;
+  margin: 10px auto 10px 10px;
+  /* border: 2px solid red; */
+}
+
+.home-page .box-bottom .box2 .step2 .right-box {
+  position: relative;
+  width: 370px;
+  height: 360px;
+  margin: 10px;
+  /* border: 2px solid red; */
+}
+.home-page .box-bottom .box2 .step2 .right-box .top2 {
+  /* position: absolute; */
+  right: 0;
+  width: 180px;
+  height: 150px;
+  /* border: 1px solid red; */
+}
+.home-page .box-bottom .box2 .step2 .right-box .top2 .box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 110px;
+  height: 100px;
+  background: url(/assets/img/step-top2.png) no-repeat;
+  /* border: 1px solid red; */
+}
+.home-page .box-bottom .box2 .step2 .right-box .top2 .box p {
+  position: absolute;
+  right: 20px;
+  bottom: 0;
+  width: 60px;
+  font-size: 22px;
+}
+.home-page .box-bottom .box2 .step2 .right-box .top2 .box p em {
+  font-size: 36px;
+  font-weight: 700;
+}
+.home-page .box-bottom .box2 .step2 .right-box .top2 .title {
+  position: absolute;
+  top: 100px;
+  right: 0;
+  width: 180px;
+  height: 50px;
+  text-align: center;
+  /* border: 1px solid green; */
+}
+.home-page .box-bottom .box2 .step2 .right-box .top2 .title h4 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 auto;
+}
+
+.home-page .box-bottom .box2 .step2 .right-box ul li {
+  display: flex;
+  height: 42.5px;
+  border-radius: 7px;
+  margin: 8px;
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+.home-page .box-bottom .box2 .step2 .right-box ul .newStyle {
+  border: 0.25px solid #B3B3B3;
+  background-color: transparent;
+}
+.home-page .box-bottom .box2 .step2 .right-box ul li img {
+  width: 25px;
+  height: 25px;
+  margin: auto 10px;
+}
+.home-page .box-bottom .box2 .step2 .right-box ul li p {
+  font-size: 16px;
+  margin: auto 5px;
+}
+/* 步骤3--------------------------------------- */
+.home-page .box-bottom .box2 .step3 {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  width: 1100px;
+  height: 380px;
+  /* border: 2px solid red; */
+  margin: 30px auto;
+}
+.home-page .box-bottom .box2 .step3 .left-box {
+  width: 370px;
+  height: 360px;
+  margin: 10px;
+  /* border: 2px solid red; */
+}
+.home-page .box-bottom .box2 .step3 .left-box .top3 {
+  position: relative;
+  width: 180px;
+  height: 150px;
+  /* border: 1px solid red; */
+}
+.home-page .box-bottom .box2 .step3 .left-box .top3 .box {
+  position: absolute;
+  top: 0;
+  width: 110px;
+  height: 100px;
+  background: url(/assets/img/step-top3.png) no-repeat;
+}
+.home-page .box-bottom .box2 .step3 .left-box .top3 .box p {
+  position: absolute;
+  left: 25px;
+  bottom: 0;
+  width: 60px;
+  font-size: 22px;
+}
+.home-page .box-bottom .box2 .step3 .left-box .top3 .box p em {
+  font-size: 36px;
+  font-weight: 700;
+}
+.home-page .box-bottom .box2 .step3 .left-box .top3 .title {
+  position: absolute;
+  top: 100px;
+  width: 180px;
+  height: 50px;
+  text-align: center;
+}
+.home-page .box-bottom .box2 .step3 .left-box .top3 .title h4 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 auto;
+}
+.home-page .box-bottom .box2 .step3 .left-box ul li {
+  display: flex;
+  height: 42.5px;
+  border-radius: 7px;
+  margin: 8px;
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+.home-page .box-bottom .box2 .step3 .left-box ul .newStyle {
+  border: 0.25px solid #B3B3B3;
+  background-color: transparent;
+}
+.home-page .box-bottom .box2 .step3 .left-box ul li img {
+  width: 25px;
+  height: 25px;
+  margin: auto 10px;
+}
+.home-page .box-bottom .box2 .step3 .left-box ul li p {
+  font-size: 16px;
+  margin: auto 5px;
+}
+.home-page .box-bottom .box2 .step3 .right-box {
+  position: relative;
+  width: 650px;
+  height: 360px;
+  margin: 10px 10px 10px auto;
+  /* border: 2px solid red; */
+}
+</style>
\ No newline at end of file
diff --git a/src/components/KeFu.vue b/src/components/KeFu.vue
index c97d37c..a3cc787 100644
--- a/src/components/KeFu.vue
+++ b/src/components/KeFu.vue
@@ -147,7 +147,7 @@ export default {
   justify-content: center;
   flex-direction: column;
   width: 100%;
-  height: 605px;
+  height: 7.5625rem;
   background: url(/assets/img/kefu-bj.png) no-repeat;
   background-size: cover;
 }
@@ -155,8 +155,8 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 1000px;
-  height: 150px;
+  width: 12.5rem;
+  height: 1.875rem;
   margin: 0 auto;
   /* border: 2px solid red; */
 }
@@ -164,18 +164,18 @@ export default {
   /* position: absolute;
   top: 220px;
   left: 300px; */
-  width: 500px;
-  font-size: 30px;
+  width: 6.25rem;
+  font-size: .375rem;
   color: #74491a;
-  margin-bottom: 10px;
+  margin-bottom: .125rem;
 }
 .ke-fu .box-top p {
   /* position: absolute;
   top: 270px;
   left: 300px; */
-  width: 500px;
-  font-size: 16px;
-  letter-spacing: 5px;
+  width: 6.25rem;
+  font-size: .2rem;
+  letter-spacing: .0625rem;
   color: #9a7148;
 }
 .ke-fu .box-bottom {
@@ -183,18 +183,18 @@ export default {
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 400px;
+  height: 5rem;
   background-color: #f5f5f5;
 }
 .ke-fu .box-bottom .box {
   position: absolute;
   /* display: flex;
   justify-content:center; */
-  top: -200px;
+  top: -2.5rem;
   /* left: 18%; */
   display: flex;
-  width: 1000px;
-  height: 550px;
+  width: 12.5rem;
+  height: 6.875rem;
   /* border: 2px solid red; */
   /* background-color: #FFF; */
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -204,48 +204,48 @@ export default {
 .ke-fu .box-bottom .box .left-box {
   display: flex;
   flex-direction: column;
-  width: 680px;
-  margin-right: 10px;
+  width: 8.5rem;
+  margin-right: .125rem;
   background-color: #fff;
 }
 
 .ke-fu .box-bottom .box .left-box .kefu-sub {
   display: flex;
   justify-content: space-between;
-  height: 50px;
-  line-height: 50px;
-  margin: 25px;
+  height: .625rem;
+  line-height: .625rem;
+  margin: .3125rem;
   /* border: 1px solid red; */
 }
 .ke-fu .box-bottom .box .left-box .kefu-sub h4 {
-  font-size: 18px;
+  font-size: .225rem;
 }
 .ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search {
   display: flex;
   justify-content: end;
   /* width: 350px; */
-  height: 50px;
+  height: .625rem;
 }
 .ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput {
   display: inline-block;
   margin: auto 0;
-  padding-left: 14px;
-  height: 34px;
-  width: 280px;
-  font-size: 13px;
+  padding-left: .175rem;
+  height: .425rem;
+  width: 3.5rem;
+  font-size: .1625rem;
   color: #333;
-  border: 1px solid #ededed;
+  border: .0125rem solid #ededed;
 }
 .ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput:focus {
-  border: 1px solid #febe54;
+  border: .0125rem solid #febe54;
 }
 .ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search {
   display: inline-block;
   margin: auto 0;
-  height: 34px;
-  line-height: 34px;
-  width: 60px;
-  font-size: 13px;
+  height: .425rem;
+  line-height: .425rem;
+  width: .75rem;
+  font-size: .1625rem;
   background-color: #fda633;
   color: #FFF;
   border: none;
@@ -256,31 +256,31 @@ export default {
 }
 .ke-fu .box-bottom .box .left-box ul {
   display: flex;
-  height: 140px;
-  margin: 25px;
+  height: 1.75rem;
+  margin: .3125rem;
   margin-top: 0;
-  margin-bottom: 40px;
+  margin-bottom: .5rem;
   /* border: 1px solid red; */
 } 
 .ke-fu .box-bottom .box .left-box ul li {
   display: flex;
   flex-direction: column;
-  width: 280px;
-  height: 120px;
-  margin: 10px auto;
+  width: 3.5rem;
+  height: 1.5rem;
+  margin: .125rem auto;
   /* border: 1px solid red; */
 }
 .ke-fu .box-bottom .box .left-box ul li .headline {
   display: flex;
-  height: 30px;
-  line-height: 30px;
-  margin-bottom: 5px;
+  height: .375rem;
+  line-height: .375rem;
+  margin-bottom: .0625rem;
 }
 .ke-fu .box-bottom .box .left-box ul li .headline i {
   display: block;
-  width: 20px;
-  height: 20px;
-  margin: auto 10px;
+  width: .25rem;
+  height: .25rem;
+  margin: auto .125rem;
   background: url(/assets/img/kefu-1.png) no-repeat;
   background-size: cover;
 }
@@ -300,13 +300,13 @@ export default {
 
 
 .ke-fu .box-bottom .box .left-box ul li .headline h5 {
-  font-size: 16px;
+  font-size: .2rem;
   font-weight: 700;
 }
 .ke-fu .box-bottom .box .left-box ul li p {
-  height: 30px;
-  margin: 5px 0 0 0;
-  font-size: 14px;
+  height: .375rem;
+  margin: .0625rem 0 0 0;
+  font-size: .175rem;
 }
 .ke-fu .box-bottom .box .left-box ul li p a {
   color: #0095ff;
@@ -319,42 +319,42 @@ export default {
 }
 .ke-fu .box-bottom .box .left-box ul:last-child li:first-child p span {
   display: inline-block;
-  width: 78px;
-  height: 28px;
-  line-height: 28px;
+  width: .975rem;
+  height: .35rem;
+  line-height: .35rem;
   text-align: center;
-  margin-right: 10px;
-  border: 1px solid #d9d9d9;
+  margin-right: .125rem;
+  border: .0125rem solid #d9d9d9;
 }
 
 
 .ke-fu .box-bottom .box .right-box {
-  width: 310px;
+  width: 3.875rem;
   /* margin-right: 2%; */
   background-color: #fff;
-  border-top-left-radius: 10px;
-  border-top-right-radius:10px;
+  border-top-left-radius: .125rem;
+  border-top-right-radius:.125rem;
 }
 .ke-fu .box-bottom .box .right-box h5 {
-  height: 40px;
-  line-height: 40px;
+  height: .5rem;
+  line-height: .5rem;
   text-align: center;
-  font-size: 14px;
+  font-size: .175rem;
   background-color: #febe54;
-  border-radius: 10px;
+  border-radius: .125rem;
   color: #FFF;
 }
 .ke-fu .box-bottom .box .right-box ul {
   display: flex;
   flex-direction: column;
-  margin: 15px 5px 0 10px;
+  margin: .1875rem .0625rem 0 .125rem;
 }
 .ke-fu .box-bottom .box .right-box ul li{
   display: flex;
   align-content: center;
-  height: 30px;
-  line-height: 30px;
-  margin-bottom: 10px;
+  height: .375rem;
+  line-height: .375rem;
+  margin-bottom: .125rem;
   /* background-color: pink; */
   /* border: 2px solid red; */
 }
@@ -362,27 +362,27 @@ export default {
   text-align: center;
   margin: auto 0;
   /* line-height: 30px; */
-  width: 80px;
+  width: 1rem;
   /* padding: 2px 5px; */
-  border-radius: 12px;
+  border-radius: .15rem;
   background-color: #febe54;
-  font-size: 13px;
+  font-size: .1625rem;
 }
 .ke-fu .box-bottom .box .right-box ul li i {
   margin: auto 0;
   width: 100%;
-  padding: 0 25px;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
+  padding: 0 .3125rem;
+  border-top-left-radius: .125rem;
+  border-bottom-left-radius: .125rem;
   background-color: #ebebeb;
   color: #8f673d;
 }
 .ke-fu .box-bottom .box .right-box .rengong-kefu {
   position: absolute;
-  right: 20px;
+  right: .25rem;
   bottom: 0;
-  width: 220px;
-  height: 280px;
+  width: 2.75rem;
+  height: 3.5rem;
   /* border: 1px solid red; */
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ProductsNews.vue b/src/components/ProductsNews.vue
index 57e579f..217e248 100644
--- a/src/components/ProductsNews.vue
+++ b/src/components/ProductsNews.vue
@@ -478,13 +478,13 @@ export default {
   flex-direction: column;
   position: relative;
   width: 100%;
-  height: 600px;
+  height: 7.5rem;
   background: url(/assets/img/products-news-bj.png) no-repeat;
   background-size: cover;
 }
 .box-top .title {
-  width: 1000px;
-  height: 120px;
+  width: 12.5rem;
+  height: 1.5rem;
   /* border: 1px solid red; */
   margin: auto;
   color: #FFF;
@@ -494,15 +494,15 @@ export default {
   display: block;
   width: 0;
   height: 0;
-  border-top: 30px solid #fec14e;
-  border-right: 30px solid transparent;
+  border-top: .375rem solid #fec14e;
+  border-right: .375rem solid transparent;
 }
 .title h3 {
-  height: 60px;
-  width: 200px;
-  line-height: 60px;
-  padding-left: 30px;
-  font-size: 36px;
+  height: .75rem;
+  width: 2.5rem;
+  line-height: .75rem;
+  padding-left: .375rem;
+  font-size: .45rem;
   font-weight: 700;
   /* background-color: pink; */
 }
@@ -510,10 +510,10 @@ export default {
   display: inline-block;
   /* height: 20px; */
   /* line-height: 20px; */
-  margin-left: 30px;
-  margin-top: 10px;
-  font-size: 14px;
-  padding: 5px;
+  margin-left: .375rem;
+  margin-top: .125rem;
+  font-size: .175rem;
+  padding: .0625rem;
   background-color: rgba(255,255,255,.4);
 }
 .box-bottom,
@@ -524,10 +524,10 @@ export default {
 }
 .box-bottom .box1 {
   position: relative;
-  width: 1000px;
-  height: 500px;
+  width: 12.5rem;
+  height: 6.25rem;
   margin: 0 auto;
-  margin-top: -150px;
+  margin-top: -1.875rem;
   z-index: 99;
   /* background-color: skyblue; */
 }
@@ -536,28 +536,28 @@ export default {
   justify-content: space-between;
 }
 .box1 ul li {
-  width: 320px;
-  height: 500px;
+  width: 4rem;
+  height: 6.25rem;
   background-color: #fff;
   /* background-color: pink; */
-  -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
-  -moz-box-shadow: 0 0 15px rgba(0,0,0,.2);
-  box-shadow: 0 0 15px rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 0 .1875rem rgba(0,0,0,.2);
+  -moz-box-shadow: 0 0 .1875rem rgba(0,0,0,.2);
+  box-shadow: 0 0 .1875rem rgba(0,0,0,.2);
 }
 .box1 ul li img {
-  width: 316px;
-  height: 196px;
-  margin: 2px;
+  width: 3.95rem;
+  height: 2.45rem;
+  margin: .025rem;
 }
 .box1 ul li h4 {
-  height: 100px;
-  line-height: 30px;
-  width: 280px;
-  font-size: 18px;
+  height: 1.25rem;
+  line-height: .375rem;
+  width: 3.5rem;
+  font-size: .225rem;
   font-weight: 700;
-  margin: 0 20px;
-  padding: 10px 0;
-  border-bottom: 1px solid #f9f9f9;
+  margin: 0 .25rem;
+  padding: .125rem 0;
+  border-bottom: .0125rem solid #f9f9f9;
   color: #2b2939;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -568,11 +568,11 @@ export default {
   -webkit-line-clamp: 3;
 }
 .box1 ul li p{
-  margin-top: 10px;
-  padding: 5px 20px;
-  height: 100px;
-  line-height: 25px;
-  font-size: 14px;
+  margin-top: .125rem;
+  padding: .0625rem .25rem;
+  height: 1.25rem;
+  line-height: .3125rem;
+  font-size: .175rem;
   color: #433c55ad;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -586,38 +586,38 @@ export default {
 .box2 {
   display: flex;
   flex-direction: column;
-  width: 1000px;
-  height: 500px;
-  margin: 80px auto;
-  padding: 0 15px;
+  width: 12.5rem;
+  height: 6.25rem;
+  margin: 1rem auto;
+  padding: 0 .1875rem;
   /* border: 1px solid red; */
 }
 .box2 .row1 {
-  height: 40px;
-  line-height: 40px;
-  font-size: 22px;
+  height: .5rem;
+  line-height: .5rem;
+  font-size: .275rem;
   color: #e0e0e0;
   /* background-color: pink; */
 }
 .box2 .row2 {
   display: flex;
   justify-content: space-between;
-  height: 40px;
-  line-height: 40px;
+  height: .5rem;
+  line-height: .5rem;
   /* background-color: skyblue; */
 }
 .box2 .row2 h3 {
-  font-size: 26px;
+  font-size: .325rem;
   font-weight: 700;
   color: #656972;
 }
 .box2 .row2 a {
-  font-size: 14px;
+  font-size: .175rem;
 }
 .box2 .row3 {
-  width: 970px;
-  height: 400px;
-  margin-top: 20px;
+  width: 12.125rem;
+  height: 5rem;
+  margin-top: .25rem;
   /* background-color: pink; */
 }
 .box2 .row3 ul {
@@ -627,9 +627,9 @@ export default {
 }
 .box2 .row3 ul li {
   display: flex;
-  width: 470px;
-  height: 180px;
-  margin-bottom: 20px;
+  width: 5.875rem;
+  height: 2.25rem;
+  margin-bottom: .25rem;
   /* background-color: skyblue; */
 }
 .box2 .row3 ul li a {
@@ -640,38 +640,38 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-content: center;
-  width: 120px;
-  height: 150px;
-  margin: 15px 5px;
+  width: 1.5rem;
+  height: 1.875rem;
+  margin: .1875rem .0625rem;
   background-color: #f7f7f7;
 }
 .box2 .row3 ul li .date .year-month {
-  height: 30px;
-  line-height: 30px;
+  height: .375rem;
+  line-height: .375rem;
   text-align: center;
-  font-size: 18px;
+  font-size: .225rem;
   /* background-color: pink; */
 }
 .box2 .row3 ul li .date .day {
-  height: 50px;
-  line-height: 50px;
+  height: .625rem;
+  line-height: .625rem;
   text-align: center;
-  font-size: 26px;
+  font-size: .325rem;
   /* background-color: gray; */
 }
 .box2 .row3 ul li .content {
-  width: 320px;
-  height: 150px;
-  margin: 15px 0;
-  margin-left: 10px;
+  width: 4rem;
+  height: 1.875rem;
+  margin: .1875rem 0;
+  margin-left: .125rem;
   /* border: 1px solid red; */
 }
 .box2 .row3 ul li .content h4 {
   /* height: 60px; */
-  line-height: 30px;
-  font-size: 18px;
+  line-height: .375rem;
+  font-size: .225rem;
   font-weight: 700;
-  margin-bottom: 10px;
+  margin-bottom: .125rem;
   color: #2b2939;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -682,9 +682,9 @@ export default {
   -webkit-line-clamp: 2;
 }
 .box2 .row3 ul li .content p {
-  height: 75px;
-  line-height: 25px;
-  font-size: 14px;
+  height: .9375rem;
+  line-height: .3125rem;
+  font-size: .175rem;
   font-weight: 300;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -697,63 +697,63 @@ export default {
 .box3 {
   position: relative;
   width: 100%;
-  height: 600px;
+  height: 7.5rem;
   background-color: #fcfcfc;
-  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 5px rgba(0,0,0,.1);
-  box-shadow: 0 0 5px rgba(0,0,0,.1);
+  -webkit-box-shadow: 0 0 .0625rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .0625rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .0625rem rgba(0,0,0,.1);
 }
 .box3 .box3Content {
   position: absolute;
-  top: 50px;
+  top: .625rem;
   left: 50%;
   transform: translate(-50%, 0);
   display: flex;
   flex-direction: column;
-  width: 1000px;
-  height: 500px;
+  width: 12.5rem;
+  height: 6.25rem;
   margin: auto;
-  padding: 0 15px;
+  padding: 0 .1875rem;
   /* border: 1px solid red; */
 }
 .box3 .box3Content .row1 {
-  height: 40px;
-  line-height: 40px;
-  font-size: 22px;
+  height: .5rem;
+  line-height: .5rem;
+  font-size: .275rem;
   color: #e0e0e0;
   /* background-color: pink; */
 }
 .box3 .box3Content .row2 {
   display: flex;
   justify-content: space-between;
-  height: 40px;
-  line-height: 40px;
+  height: .5rem;
+  line-height: .5rem;
   /* background-color: skyblue; */
 }
 .box3 .box3Content .row2 h3 {
-  font-size: 26px;
+  font-size: .325rem;
   font-weight: 700;
   color: #656972;
 }
 .box3 .box3Content .row2 a {
-  font-size: 14px;
+  font-size: .175rem;
 }
 .box3 .box3Content .row3 {
   display: flex;
   justify-content: space-between;
-  width: 970px;
-  height: 350px;
-  margin-top: 20px;
+  width: 12.125rem;
+  height: 4.375rem;
+  margin-top: .25rem;
   /* background-color: pink; */
 }
 .box3 .box3Content .row3 .column1 {
   position: relative;
-  width: 430px;
+  width: 5.375rem;
   /* background-color: #FFF; */
   /* border: 1px solid red; */
-  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
 }
 .box3 .box3Content .row3 .column1 img {
   position: absolute;
@@ -762,11 +762,11 @@ export default {
 .box3 .box3Content .row3 .column1 span {
   position: absolute;
   bottom: 0;
-  height: 50px;
-  width: 430px;
-  line-height: 50px;
+  height: .625rem;
+  width: 5.375rem;
+  line-height: .625rem;
   text-align: center;
-  font-size: 16px;
+  font-size: .2rem;
   color: #FFF;
   background-color: rgba(0,0,0,.3);
   white-space: nowrap;
@@ -776,26 +776,26 @@ export default {
 .box3 .box3Content .row3 ul {
   display: flex;
   justify-content: space-between;
-  height: 350px;
-  width: 520px;
+  height: 4.375rem;
+  width: 6.5rem;
 }
 .box3 .box3Content .row3 ul .col {
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: 20px 25px;
-  width: 250px;
-  height: 350px;
+  padding: .25rem .3125rem;
+  width: 3.125rem;
+  height: 4.375rem;
   /* border: 1px solid red; */
   background-color: #fff;
-  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
 }
 .box3 .box3Content .row3 ul .col h4 {
-  height: 81px;
-  line-height: 27px;
-  font-size: 18px;
+  height: 1.0125rem;
+  line-height: .3375rem;
+  font-size: .225rem;
   font-weight: 700;
   /* margin-bottom: 10px;
   padding-bottom: 10px; */
@@ -813,14 +813,14 @@ export default {
 }
 .box3 .box3Content .row3 ul .col span {
   display: block;
-  height: 1px;
+  height: .0125rem;
   width: 100%;
-  margin: 10px 0 15px 0;
+  margin: .125rem 0 .1875rem 0;
   background-color: #f3f3f3;
 }
 .box3 .box3Content .row3 ul .col .text {
-  line-height: 24px;
-  font-size: 14px;
+  line-height: .3rem;
+  font-size: .175rem;
   color: #433c55ad;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -834,26 +834,26 @@ export default {
   position: absolute;
   display: flex;
   flex-direction: column;
-  bottom: 20px;
-  height: 60px;
-  width: 200px;
+  bottom: .25rem;
+  height: .75rem;
+  width: 2.5rem;
 }
 .box3 .box3Content .row3 ul .col .date .row1 .year-month {
-  height: 20px;
-  width: 200px;
-  line-height: 20px;
-  font-size: 16px;
+  height: .25rem;
+  width: 2.5rem;
+  line-height: .25rem;
+  font-size: .2rem;
   color: #d0d0d3;
 }
 .box3 .box3Content .row3 ul .col .date .row2 {
   display: flex;
   justify-content: space-between;
-  height: 40px;
-  font-size: 22px;
+  height: .5rem;
+  font-size: .275rem;
   color: #b1b0b6;
 }
 .box3 .box3Content .row3 ul .col .date .row2 a {
-  font-size: 26px;
+  font-size: .325rem;
   color: #b1b0b6;
 }
 /* .box1, .box2, .box3 {
@@ -877,29 +877,29 @@ export default {
 .more .nav {
   position: relative;
   width: 100%;
-  height: 60px;
-  line-height: 60px;
-  font-size: 18px;
+  height: .75rem;
+  line-height: .75rem;
+  font-size: .225rem;
   margin: 0 auto;
-  box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
+  box-shadow: 0 .0125rem .05rem 0 rgba(0,0,0,.2);
   background-color: #fff;
 }
 .details .nav span ,
 .more .nav span {
   position: relative;
   display: block;
-  width: 1000px;
-  height: 60px;
-  line-height: 60px;
-  font-size: 18px;
+  width: 12.5rem;
+  height: .75rem;
+  line-height: .75rem;
+  font-size: .225rem;
   margin: 0 auto;
 }
 .details .articel,
 .more .list {
   position: relative;
   /* display: flex; */
-  width: 1000px;
-  margin: 20px auto;
+  width: 12.5rem;
+  margin: .25rem auto;
   
   /* border: 1px solid red; */
   /* background-color: #fff; */
@@ -909,9 +909,9 @@ export default {
 .more .list .left {
   display: inline-block;
   vertical-align: top;
-  width: 720px;
-  margin-right: 20px;
-  padding: 10px 40px;
+  width: 9rem;
+  margin-right: .25rem;
+  padding: .125rem .5rem;
   background-color: #fff;
   /* border: 1px solid red; */
   /* -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -919,12 +919,12 @@ export default {
   box-shadow: 0 0 10px rgba(0,0,0,.1); */
 }
 .details .articel .left h4 {
-  margin-top: 10px;
+  margin-top: .125rem;
   display: block;
   /* height: 60px; */
-  line-height: 40px;
+  line-height: .5rem;
   text-align: center;
-  font-size: 22px;
+  font-size: .275rem;
   font-weight: 700;
   /* border-bottom: 1px solid #f1f1f1; */
   /* background-color: pink; */
@@ -932,24 +932,24 @@ export default {
 }
 .details .articel .left .date {
   text-align: right;
-  font-size: 14px;
+  font-size: .175rem;
   color: #bdbdbd;
-  margin-top: 5px;
+  margin-top: .0625rem;
 }
 .details .articel .left span {
-  margin: 10px 0;
+  margin: .125rem 0;
   display: block;
   width: 100%;
-  height: 1px;
+  height: .0125rem;
   background-color: #f1f1f1;
 }
 
 .details .articel .left .content {
-  font-size: 16px;
+  font-size: .2rem;
   font-weight: 350;
-  line-height: 38px;
-  margin-bottom: 50px;
-  letter-spacing: 0.5px;
+  line-height: .475rem;
+  margin-bottom: .625rem;
+  letter-spacing: .0063rem;
   color: #7c7c7c;
 }
 .more .list .left ul {
@@ -960,44 +960,44 @@ export default {
   /* display: flex; */
   /* height: 140px; */
   /* margin: 10px 0; */
-  padding: 10px 0;
-  border-bottom: 0.5px solid #fcfcfc;
+  padding: .125rem 0;
+  border-bottom: .0063rem solid #fcfcfc;
 }
 .more .list .left ul li a {
   display: flex;
-  width: 640px;
+  width: 8rem;
 }
 .more .list .left ul li .newsphoto {
-  height: 120px;
-  width: 160px;
-  margin-right: 20px;
+  height: 1.5rem;
+  width: 2rem;
+  margin-right: .25rem;
 }
 .more .list .left ul li .newsphoto img {
-  height: 120px;
-  width: 160px;
+  height: 1.5rem;
+  width: 2rem;
   /* margin: 15px 0; */
 }
 .more .list .left ul li .content {
   display: flex;
   flex-direction: column;
-  width: 460px;
+  width: 5.75rem;
   /* border: 1px solid red; */
 }
 .more .list .left ul li .content h4 {
-  width: 460px;
-  height: 28px;
+  width: 5.75rem;
+  height: .35rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 28px;
+  line-height: .35rem;
   font-weight: 700;
-  font-size: 16px;
+  font-size: .2rem;
 }
 .more .list .left ul li .content .intro {
-  width: 460px;
-  height: 72px;
-  font-size: 14px;
-  line-height: 24px;
+  width: 5.75rem;
+  height: .9rem;
+  font-size: .175rem;
+  line-height: .3rem;
   overflow: hidden;
   /* white-space: wrap; */
   text-overflow: ellipsis;
@@ -1017,17 +1017,17 @@ export default {
   background: linear-gradient(to right, transparent, white 20px); 
 } */
 .more .list .left ul li .content em {
-  height: 20px;
-  font-size: 13px;
+  height: .25rem;
+  font-size: .1625rem;
   color: #939399;
   text-align: right;
 }
 .more .list .left .pagination {
   position: relative;
-  right: 25px;
-  height: 80px;
-  line-height: 80px;
-  margin-top: 50px;
+  right: .3125rem;
+  height: 1rem;
+  line-height: 1rem;
+  margin-top: .625rem;
   display: flex;
   justify-content: flex-end;
 }
@@ -1036,7 +1036,7 @@ export default {
   position: relative;
   display: inline-block;
   vertical-align: top;
-  width: 260px;
+  width: 3.25rem;
   background-color: #fff;
   /* -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -1044,30 +1044,30 @@ export default {
 }
 .details .articel .right .tp,
 .more .list .right .tp {
-  width: 260px;
-  height: 180px;
-  margin-bottom: 10px;
+  width: 3.25rem;
+  height: 2.25rem;
+  margin-bottom: .125rem;
 }
 .details .articel .right span,
 .more .list .right span {
   display: block;
-  width: 260px;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 10px;
-  border-bottom: 1px solid rgba(0,0,0,.1);
+  width: 3.25rem;
+  height: .5rem;
+  line-height: .5rem;
+  padding: 0 .125rem;
+  border-bottom: .0125rem solid rgba(0,0,0,.1);
   /* background-color: pink; */
 }
 .details .articel .right span em,
 .more .list .right span em {
-  font-size: 16px;
+  font-size: .2rem;
   font-weight: 700;
-  padding-left: 5px;
-  border-left: 5px solid #faa231;
+  padding-left: .0625rem;
+  border-left: .0625rem solid #faa231;
 }
 .details .articel .right ul,
 .more .list .right ul {
-  padding: 0 15px 15px 15px;
+  padding: 0 .1875rem .1875rem .1875rem;
   /* display: inline-block; */
   /* display: flex;
   flex-direction: column;
@@ -1079,9 +1079,9 @@ export default {
 .more .list .right ul li {
   display: inline-block;
   /* height: 50px; */
-  padding: 10px 0;
-  width: 230px;
-  border-bottom: 1px solid rgba(0,0,0,.1);
+  padding: .125rem 0;
+  width: 2.875rem;
+  border-bottom: .0125rem solid rgba(0,0,0,.1);
 }
 .details .articel .right ul li:nth-child(5),
 .more .list .right ul li:nth-child(5) {
@@ -1116,26 +1116,26 @@ export default {
   display: inline;
   /* font-size: 24px; */
   /* height: 30px; */
-  line-height: 26px;
+  line-height: .325rem;
   margin: auto 0;
 }
 .details .articel .right ul li h5,
 .more .list .right ul li h5 {
   display: inline;
   /* height: 30px; */
-  font-size: 14px;
-  line-height: 26px;
+  font-size: .175rem;
+  line-height: .325rem;
   color: #494950;
 }
 .details .articel .right ul li em,
 .more .list .right ul li em {
   display: inline;
   float: right;
-  line-height: 20px;
+  line-height: .25rem;
   text-align: right;
-  font-size: 12px;
+  font-size: .15rem;
   /* font-weight: 300; */
-  margin: auto 0 0 10px;
+  margin: auto 0 0 .125rem;
   color: #bdbdbd;
 }
 
diff --git a/src/components/Report.vue b/src/components/Report.vue
index ae8d5b5..7fe9681 100644
--- a/src/components/Report.vue
+++ b/src/components/Report.vue
@@ -251,7 +251,7 @@ export default {
 } */
 .report .box-bottom {
   width: 100%;
-  height: 1000px;
+  height: 12.5rem;
   background-color: #f7f7f7;
 }
 .report .box-bottom .box {
@@ -262,9 +262,9 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 1200px;
-  height: 800px;
-  padding: 20px 30px;
+  width: 15rem;
+  height: 10rem;
+  padding: .25rem .375rem;
   /* border: 1px solid red; */
   /* background-color: #fff; */
   /* -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -272,23 +272,23 @@ export default {
   box-shadow: 0 0 10px rgba(0,0,0,.1); */
 }
 .box .report-content {
-  width: 1140px;
-  height: 640px;
+  width: 14.25rem;
+  height: 8rem;
   /* border: 1px solid red; */
 }
 .box .report-content textarea {
   resize: none;
-  width: 1140px;
-  height: 640px;
+  width: 14.25rem;
+  height: 8rem;
   background-color: #FFF;
-  font-size: 18px;
+  font-size: .225rem;
   color: #333;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  padding: 20px;
-  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  border-radius: .05rem;
+  border: .0125rem solid transparent;
+  padding: .25rem;
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
   /* margin-bottom: 12px; */
   /* -webkit-appearance: none; */
   outline: 0;
@@ -297,27 +297,27 @@ export default {
   display: flex;
   justify-content: space-between;
   align-content: center;
-  width: 1140px;
-  height: 100px;
+  width: 14.25rem;
+  height: 1.25rem;
   /* background-color: pink; */
 }
 .box ul li {
   /* border: 1px solid red; */
-  width: 350px;
-  height: 60px;
-  margin: 20px 0;
-  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  width: 4.375rem;
+  height: .75rem;
+  margin: .25rem 0;
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
 }
 input {
-  width: 350px;
-  height: 60px;
-  padding: 20px;
+  width: 4.375rem;
+  height: .75rem;
+  padding: .25rem;
   border: none;
-  border-radius: 4px;
+  border-radius: .05rem;
   background-color: #FFF;
-  font-size: 16px;
+  font-size: .2rem;
   /* background-color: transparent; */
   /* margin-bottom: 12px; */
   color: #999999;
@@ -328,13 +328,13 @@ input::-webkit-input-placeholder {
 ul li:nth-child(1) {
   position: relative;
   /* width: 440px; */
-  height: 60px;
+  height: .75rem;
   /* margin-bottom: 12px; */
   /* background-color: pink; */
 }
 ul li:nth-child(2) {
   /* width: 440px; */
-  height: 60px;
+  height: .75rem;
   /* margin-bottom: 12px; */
 }
 ul li:nth-child(1) input {
@@ -344,9 +344,9 @@ ul li:nth-child(1) span {
   position: absolute;
   right: 0;
   display: block;
-  width: 120px;
-  height: 60px;
-  line-height: 60px;
+  width: 1.5rem;
+  height: .75rem;
+  line-height: .75rem;
   text-align: center;
   /* background-color: pink; */
   cursor: pointer;
@@ -356,24 +356,24 @@ ul li:nth-child(1) span:hover {
   opacity: 0.5;
 }
 ul li:nth-child(3) {
-  width: 300px;
-  height: 60px;
-  margin: 20px 0;
+  width: 3.75rem;
+  height: .75rem;
+  margin: .25rem 0;
   /* margin-top: 30px; */
 }
 ul li:nth-child(3) button {
-  width: 300px;
-  height: 60px;
+  width: 3.75rem;
+  height: .75rem;
   border: none;
-  border-radius: 4px;
+  border-radius: .05rem;
   background-color: #fcbb53;
-  font-size: 20px;
+  font-size: .25rem;
   color: #FFF;
   cursor: pointer;
 }
 ul li:nth-child(3) button:hover,
 .success button:hover {
-  font-size: 24px;
+  font-size: .3rem;
   font-weight: 700;
 }
 .mask {
@@ -394,38 +394,38 @@ ul li:nth-child(3) button:hover,
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 460px;
-  height: 460px;
-  padding: 20px 30px;
+  width: 5.75rem;
+  height: 5.75rem;
+  padding: .25rem .375rem;
   background-color: #fff;
-  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
 }
 .success i {
   display: block;
-  width: 200px;
-  height: 200px;
-  margin: 15px 100px;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: .1875rem 1.25rem;
   background: url(/assets/img/report-icon.png) no-repeat;
   background-size: cover;
   /* border: 1px solid red; */
 }
 .success p {
   display: block;
-  height: 30px;
-  line-height: 30px;
+  height: .375rem;
+  line-height: .375rem;
   text-align: center;
-  font-size: 18px;
+  font-size: .225rem;
 }
 .success button {
-  width: 400px;
-  height: 50px;
-  margin-top: 40px;
+  width: 5rem;
+  height: .625rem;
+  margin-top: .5rem;
   border: none;
-  border-radius: 4px;
+  border-radius: .05rem;
   background-color: #01b2aa;
-  font-size: 20px;
+  font-size: .25rem;
   color: #FFF;
   cursor: pointer;
 }
diff --git a/src/components/ShouFei.vue b/src/components/ShouFei.vue
index 8d953c0..5f51240 100644
--- a/src/components/ShouFei.vue
+++ b/src/components/ShouFei.vue
@@ -191,70 +191,70 @@ export default {
   position: relative;
   background: url(/assets/img/shoufei-bj.png) no-repeat;
   background-size: cover;
-  height: 1200px;
+  height: 15rem;
   /* font-family: '楷体'; */
 }
 .shou-fei .box-top {
   position: absolute;
-  top: 140px;
+  top: 1.75rem;
   left: 50%;
   transform: translate(-50%, 0);
-  width: 500px;
-  height: 100px;
+  width: 6.25rem;
+  height: 1.25rem;
   /* background-color: pink; */
   text-align: center;
 }
 
 .shou-fei .box-top h4 {
-  width: 500px;
-  font-size: 32px;
+  width: 6.25rem;
+  font-size: .4rem;
   font-weight: 700;
-  letter-spacing: 4px;
+  letter-spacing: .05rem;
   color: #74491a;
-  margin-bottom: 15px;
+  margin-bottom: .1875rem;
 }
 .shou-fei .box-top p {
-  width: 500px;
-  font-size: 16px;
-  letter-spacing: 5px;
+  width: 6.25rem;
+  font-size: .2rem;
+  letter-spacing: .0625rem;
   color: #9a7148;
 }
 .shou-fei .box-bottom {
   position: absolute;
-  top: 270px;
+  top: 3.375rem;
   left: 50%;
   transform: translate(-50%, 0);
   display: flex;
   justify-content: space-around;
-  width: 1200px;
-  height: 900px;
+  width: 15rem;
+  height: 11.25rem;
   /* border: 1px solid red; */
   
 }
 .shou-fei .box-bottom .box {
   display: flex;
   flex-direction: column;
-  width: 280px;
-  height: 810px;
+  width: 3.5rem;
+  height: 10.125rem;
   padding: 0px 0px;
   background-color: #FFF;
-  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
 }
 .box .top {
   display: flex;
   flex-direction: column;
   align-content: center;
   /* flex-wrap: wrap; */
-  width: 280px;
+  width: 3.5rem;
   /* height: 200px; */
   /* border: 1px solid red; */
 }
 
 .box .top .bjys {
-  width: 280px;
-  height: 50px;
+  width: 3.5rem;
+  height: .625rem;
   background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
   color: #5e3603;
 }
@@ -264,24 +264,24 @@ export default {
 }
 
 .box .top h4 {
-  width: 280px;
-  height: 50px;
-  line-height: 50px;
+  width: 3.5rem;
+  height: .625rem;
+  line-height: .625rem;
   text-align: center;
-  font-size: 22px;
+  font-size: .275rem;
   font-weight: 500;
  
 }
 .box .top .price {
-  height: 50px;
-  font-size: 18px;
-  letter-spacing: 2px;
+  height: .625rem;
+  font-size: .225rem;
+  letter-spacing: .025rem;
   text-align: center;
-  margin: 15px auto;
+  margin: .1875rem auto;
   color: #f77333;
 }
 .box .top .price em {
-  font-size: 36px;
+  font-size: .45rem;
   font-weight: 700;
 }
 .box .top .jianjie {
@@ -290,11 +290,11 @@ export default {
   display: flex;
   justify-content: center;
   align-content: center;
-  height: 110px;
-  margin: 0 20px;
-  padding: 10px;
-  border-radius: 6px;
-  font-size: 15px;
+  height: 1.375rem;
+  margin: 0 .25rem;
+  padding: .125rem;
+  border-radius: .075rem;
+  font-size: .1875rem;
   color: #5e3603;
   background-color: #fff6e7;
   text-align: justify;
@@ -302,44 +302,44 @@ export default {
 }
 .box .top .jianjie i {
   position: absolute;
-  top: -10px;
-  left: 115px;
+  top: -0.125rem;
+  left: 1.4375rem;
   width: 0;
   height: 0;
-  border-left:10px solid transparent;
-  border-right: 10px solid transparent;
-  border-bottom:10px solid #feedcc;
+  border-left:.125rem solid transparent;
+  border-right: .125rem solid transparent;
+  border-bottom:.125rem solid #feedcc;
 }
 .box .serve {
-  margin: 5px 20px;
+  margin: .0625rem .25rem;
   /* background-color: pink; */
 }
 .box .serve h5 {
-  font-size: 18px;
+  font-size: .225rem;
   font-weight: 700;
-  height: 36px;
-  line-height: 36px;
+  height: .45rem;
+  line-height: .45rem;
   color: #694618;
 }
 .box .serve .serveList {
   /* background-color: skyblue; */
-  margin: 5px 0 0 10px;
-  height: 290px;
+  margin: .0625rem 0 0 .125rem;
+  height: 3.625rem;
 }
 .box .serve .serveList li {
-  font-size: 14px;
-  line-height: 26px;
+  font-size: .175rem;
+  line-height: .325rem;
   display: flex;
-  margin: 5px 0;
+  margin: .0625rem 0;
 }
 .box .serve .serveList li i {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
+  width: .25rem;
+  height: .25rem;
+  line-height: .25rem;
   text-align: center;
-  border-radius: 10px;
+  border-radius: .125rem;
   color: #f6783a;
-  margin: 3px 8px;
+  margin: .0375rem .1rem;
   background-color: #fee9d1;
 }
 .box .serve .serveList li .serveContent {
@@ -348,34 +348,34 @@ export default {
   cursor: pointer;
 }
 .box .flow {
-  margin: 0 20px 5px 20px;
+  margin: 0 .25rem .0625rem .25rem;
   /* background-color: rgb(149, 238, 149); */
 }
 .box .flow h5 {
   font-size: 18px;
   font-weight: 700;
-  height: 36px;
-  line-height: 36px;
+  height: .45rem;
+  line-height: .45rem;
   color: #694618;
 }
 .box .flow .flowList {
   /* background-color: skyblue; */
-  margin: 5px 0 0 10px;
+  margin: .0625rem 0 0 .125rem;
 }
 .box .flow .flowList li {
-  font-size: 14px;
-  line-height: 26px;
+  font-size: .175rem;
+  line-height: .325rem;
   display: flex;
-  margin: 5px 0;
+  margin: .0625rem 0;
 }
 .box .flow .flowList li i {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
+  width: .25rem;
+  height: .25rem;
+  line-height: .25rem;
   text-align: center;
-  border-radius: 10px;
+  border-radius: .125rem;
   color: #f6783a;
-  margin: 3px 8px;
+  margin: .0375rem .1rem;
   background-color: #fee9d1;
 }
 .box .flow .flowList li .flowContent {
@@ -385,31 +385,31 @@ export default {
 }
 .box .fgx {
   display: flex;
-  margin: 5px 20px;
-  width: 240px;
-  height: 2px;
+  margin: .0625rem .25rem;
+  width: 3rem;
+  height: .025rem;
   background-color: #f9f9f9;
   /* background-color: red; */
 }
 .box .chec {
-  margin: 0px 20px;
+  margin: 0px .25rem;
   /* background-color: pink; */
 }
 .box .chec .checList {
-  margin: 0 5px;
+  margin: 0 .0625rem;
 }
 .box .chec .checList li {
   display: flex;
-  height: 26px;
+  height: .325rem;
 }
 .box .chec .checList li input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  margin: 4px 10px 4px 11px; 
+  width: .2rem;
+  height: .2rem;
+  margin: .05rem .125rem .05rem .1375rem; 
 }
 .box .chec .checList li p {
-  font-size: 14px;
-  line-height: 26px;
+  font-size: .175rem;
+  line-height: .325rem;
   color: #6b4516;
 }
 
@@ -420,10 +420,10 @@ export default {
 
 .tooltip {
   position: absolute; 
-  top: 26px;
+  top: .325rem;
   background-color: rgba(255,232,192,.9);
   color: #5F3B00;
-  padding: 10px;
+  padding: .125rem;
   display: none; 
   z-index: 10;
 }
diff --git a/src/components/TransactionCenter.vue b/src/components/TransactionCenter.vue
index ba57f1c..0ac1e93 100644
--- a/src/components/TransactionCenter.vue
+++ b/src/components/TransactionCenter.vue
@@ -45,40 +45,6 @@
             </div>
             <div class="row2">
               <em>开发语言：</em>
-              <!-- <ul>
-                <li>Java</li>
-                <li>C语言</li>
-                <li>Python</li>
-              </ul> -->
-              <!-- <div>
-                <el-radio-group v-model="radio1" size="small">
-                  <el-radio-button class="cssys" label="Java" value="Java" />
-                  <el-radio-button class="cssys" label="C语言" value="Washington" />
-                  <el-radio-button class="cssys" label="C++" value="Los Angeles" />
-                  <el-radio-button class="cssys" label="Python" value="Chicago" />
-                  <el-radio-button class="cssys" label="Go" value="Chicago" />
-                  <el-radio-button class="cssys" label="JavaScript" value="Chicago" />
-                  <el-radio-button class="cssys" label="Java2" value="Java" />
-                  <el-radio-button class="cssys" label="C语言2" value="Washington" />
-                  <el-radio-button class="cssys" label="C++2" value="Los Angeles" />
-                  <el-radio-button class="cssys" label="Python2" value="Chicago" />
-                  <el-radio-button class="cssys" label="Go2" value="Chicago" />
-                  <el-radio-button class="cssys" label="JavaScript2" value="Chicago" />
-                  <el-radio-button class="cssys" label="Java3" value="Java" />
-                  <el-radio-button class="cssys" label="C语言3" value="Washington" />
-                  <el-radio-button class="cssys" label="C++3" value="Los Angeles" />
-                  <el-radio-button class="cssys" label="Python3" value="Chicago" />
-                  <el-radio-button class="cssys" label="Go3" value="Chicago" />
-                  <el-radio-button class="cssys" label="JavaScript3" value="Chicago" />
-                  
-                </el-radio-group>
-              </div> -->
-             
-              <!-- <label for=""></label>  
-              <input type="radio" value="Java" name="Java" class="radio-button"> -->
-            
-              <!-- <Radio :options="options" v-model:value="value" button /> -->
-
               <div class="language-buttons">
                 <button
                   v-for="(language, index) in visibleLanguages"
@@ -151,7 +117,7 @@
               </div>
               <div class="right">
                 <p><em>￥</em><i>298.00</i>/件</p>
-                <button type="button">立即抢购</button>
+                <a href="https://www.aimzhu.com/operator/">立即抢购</a>
               </div>
             </div>
           </div>
@@ -178,7 +144,7 @@
               <el-table-column prop="距离下架" label="距离下架" />
             </el-table>
 
-            <button class="goBuy">去购买</button>
+            <a class="goBuy" href="https://www.aimzhu.com/operator/">去购买</a>
             <el-pagination
             class="pagination"
             @size-change="handleSizeChange"
@@ -466,16 +432,16 @@ export default {
 .transaction-center .box-top {
   /* padding-top: 80px; */
   width: 100%;
-  height: 380px;
+  height: 4.75rem;
   
 }
 .transaction-center .box-top .ys {
   width: 100%;
-  height: 80px;
+  height: 1rem;
 }
 .transaction-center .box-top .bj {
   width: 100%;
-  height: 300px;
+  height: 3.75rem;
   background: url(/assets/img/transactioncenter-bj.png) no-repeat;
   background-size: cover;
 }
@@ -485,35 +451,35 @@ export default {
   /* height: 500px; */
 }
 .transaction-center .box-bottom .center {
-  margin: -180px auto 50px auto;
-  width: 1200px;
+  margin: -2.25rem auto .625rem auto;
+  width: 15rem;
   /* height: 800px; */
   /* border: 1px solid red; */
   /* background-color: pink; */
 }
 .center .box1 {
   width: 100%;
-  height: 276px;
+  height: 3.45rem;
   background-color: #fff;
-  box-shadow: 0 0 15px rgba(0,0,0,.1);
+  box-shadow: 0 0 .1875rem rgba(0,0,0,.1);
 }
 .center .box1 .title {
   display: flex;
   width: 100%;
-  height: 50px;
+  height: .625rem;
   background-color: #f5f5f5;
-  border-bottom: 0.5px solid #ebeef5;
+  border-bottom: .0063rem solid #ebeef5;
 }
 .center .box1 .title span {
   display: block;
-  width: 200px;
-  height: 50px;
-  line-height: 50px;
+  width: 2.5rem;
+  height: .625rem;
+  line-height: .625rem;
   text-align: center;
-  font-size: 16px;
+  font-size: .2rem;
   background-color: #fafafa;
-  border-right: 1px solid #ebeef5;
-  border-bottom: 1px solid #ebeef5;
+  border-right: .0125rem solid #ebeef5;
+  border-bottom: .0125rem solid #ebeef5;
 }
 .center .box1 .title span:hover {
   cursor: pointer;
@@ -526,9 +492,9 @@ export default {
   
 }
 .center .box1 .content1 {
-  width: 1200px;
-  height: 226px;
-  padding: 10px;
+  width: 15rem;
+  height: 2.825rem;
+  padding: .125rem;
 }
 /* .center .box1 .content1 .row2 .cssys {
   border: 1px solid #dcdfe6;
@@ -548,16 +514,16 @@ export default {
 .center .box1 .content1 .row3 {
   position: relative;
   display: flex;
-  height: 40px;
-  margin: 20px 10px;
+  height: .5rem;
+  margin: .25rem .125rem;
 }
 .center .box1 .content1 .row3 span {
   display: flex;
-  margin-right: 15px;
+  margin-right: .1875rem;
 }
 .center .box1 .content1 .row3 span input {
-  border: 1px solid #CCC;
-  border-radius: 4px;
+  border: .0125rem solid #CCC;
+  border-radius: .05rem;
   color: #606266;
 }
 input::-webkit-input-placeholder {
@@ -565,7 +531,7 @@ input::-webkit-input-placeholder {
 }
 .center .box1 .content1 .row3 span input:focus,
 .center .box1 .content1 .row3 span input:hover {
-  border: 1px solid #409eff;
+  border: .0125rem solid #409eff;
 }
 /* .el-input {
   --el-input-focus-border: 1px solid #e86f12;
@@ -582,16 +548,16 @@ input::-webkit-input-placeholder {
 } */
 
 .center .box1 .content1 .row3 span input[type=text] {
-  font-size: 15px;
-  padding-left: 10px;
+  font-size: .1875rem;
+  padding-left: .125rem;
 }
 .center .box1 .content1 .row3 span input[type=date] {
-  width: 150px;
-  font-size: 15px;
+  width: 1.875rem;
+  font-size: .1875rem;
 }
 .center .box1 .content1 .row3 span input[type=date]:hover,
 .center .box1 .content1 .row3 span input[type=date]:focus {
-  border: 1px solid #CCC;
+  border: .0125rem solid #CCC;
 }
 
 /* .center .box1 .content1 .row3 span .startDate {
@@ -606,15 +572,15 @@ input::-webkit-input-placeholder {
   border: 2px solid red;
 } */
 .center .box1 .content1 .row3 button{
-  height: 40px;
-  padding: 6px 30px;
+  height: .5rem;
+  padding: .075rem .375rem;
   /* margin-left: 30px; */
   border: none;
   cursor: pointer;
 }
 .center .box1 .content1 .row3 .search {
   position: absolute;
-  right: 200px;
+  right: 2.5rem;
   background-color: #552c0e;
   color: #FFF;
   
@@ -622,27 +588,27 @@ input::-webkit-input-placeholder {
 .center .box1 .content1 .row3 .reset{
   position: absolute;
   right: 0;
-  width: 180px;
+  width: 2.25rem;
 }
 .center .box1 .content1 .row1 em,
 .center .box1 .content1 .row2 em,
 .center .box1 .content1 .row3 em {
-  padding: 6px 5px;
-  width: 110px;
+  padding: .075rem .0625rem;
+  width: 1.375rem;
   /* background-color: pink; */
 }
 .sort-buttons,
 .language-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px; /* 按钮之间的间隔 */
+  gap: .125rem; /* 按钮之间的间隔 */
 }
 .sort-button,
 .language-button {
-  padding: 6px 30px;
+  padding: .075rem .375rem;
   /* border: 1px solid #ccc; */
   border: none;
-  border-radius: 4px;
+  border-radius: .05rem;
   background-color: #ffeedc;
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
@@ -660,47 +626,47 @@ input::-webkit-input-placeholder {
 }
 
 .more-button {
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  padding: .1rem .15rem;
+  border: .0125rem solid #ccc;
+  border-radius: .05rem;
   background-color: #f9f9f9;
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
 }
 .popup1 {
   position: absolute;
-  top: 45px;
-  width: 1050px;
+  top: .5625rem;
+  width: 13.125rem;
   /* max-width: 1050px; */
   background-color: white;
-  border: 1px solid #ccc;
-  padding: 10px;
+  border: .0125rem solid #ccc;
+  padding: .125rem;
   display: flex;
   /* flex-direction: column; */
   flex-wrap: wrap;
-  gap: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  gap: .125rem;
+  box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
   z-index: 10;
 }
 .popup {
   position: absolute;
-  top: 45px;
-  width: 1050px;
+  top: .5625rem;
+  width: 13.125rem;
   background-color: white;
-  border: 1px solid #ccc;
-  padding: 10px;
+  border: .0125rem solid #ccc;
+  padding: .125rem;
   display: flex;
   /* flex-direction: column; */
   flex-wrap: wrap;
-  gap: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  gap: .125rem;
+  box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
   z-index: 10;
 }
 
 .close-button {
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  padding: .1rem .15rem;
+  border: .0125rem solid #ccc;
+  border-radius: .05rem;
   background-color: #f9f9f9;
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
@@ -713,9 +679,9 @@ input::-webkit-input-placeholder {
 
 
 .center .box1 .content2 {
-  width: 1200px;
-  height: 226px;
-  padding: 10px;
+  width: 15rem;
+  height: 2.825rem;
+  padding: .125rem;
 }
 .center .box1 .content2 .bj {
   display: flex;
@@ -728,109 +694,115 @@ input::-webkit-input-placeholder {
 .center .box1 .content2 .bj .left {
   display: felx;
   flex-direction: column;
-  width: 360px;
-  height: 160px;
-  margin: 20px 40px;
+  width: 4.5rem;
+  height: 2rem;
+  margin: .25rem .5rem;
   /* border: 1px solid red; */
 }
 .center .box1 .content2 .bj .left .headline {
   display: flex;
   flex-direction: row;
   width: 100%;
-  height: 80px;
+  height: 1rem;
   /* background-color: pink; */
 }
 .center .box1 .content2 .bj .left .headline h3 {
-  height: 50px;
-  line-height: 50px;
-  margin: 15px 0;
+  height: .625rem;
+  line-height: .625rem;
+  margin: .1875rem 0;
   color: #e79855;
-  font-size: 28px;
+  font-size: .35rem;
   font-weight: 700;
-  margin-right: 20px;
+  margin-right: .25rem;
   /* background-color: skyblue; */
 }
 .center .box1 .content2 .bj .left .headline em {
-  height: 36px;
-  line-height: 36px;
-  padding: 0 20px;
-  margin: 22px 0;
-  font-size: 15px;
+  height: .45rem;
+  line-height: .45rem;
+  padding: 0 .25rem;
+  margin: .275rem 0;
+  font-size: .1875rem;
   color: #FFF;
   background-color: #fa9641;
-  border-top-left-radius: 18px;
-  border-bottom-left-radius: 18px;
-  border-top-right-radius: 16px;
+  border-top-left-radius: .225rem;
+  border-bottom-left-radius: .225rem;
+  border-top-right-radius: .2rem;
 }
 .center .box1 .content2 .bj .left .text p {
-  font-size: 15px;
-  line-height: 25px;
+  font-size: .1875rem;
+  line-height: .3125rem;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
 .center .box1 .content2 .bj .right {
-  width: 260px;
-  height: 150px;
-  margin: 25px 60px;
+  width: 3.25rem;
+  height: 1.875rem;
+  margin: .3125rem .75rem;
   /* border: 1px solid red; */
 }
 .center .box1 .content2 .bj .right p {
-  font-size: 20px;
+  font-size: .25rem;
   text-align: center;
-  margin-top: 30px;
+  margin-top: .375rem;
 }
 .center .box1 .content2 .bj .right p em {
   color: #e89954;
 }
 .center .box1 .content2 .bj .right p i {
-  font-size: 28px;
+  font-size: .35rem;
   color: #e89954;
 }
-.center .box1 .content2 .bj .right button {
-  width: 150px;
-  height: 40px;
-  margin: 10px 55px;
+.center .box1 .content2 .bj .right a{
+  display: block;
+  width: 1.875rem;
+  height: .5rem;
+  line-height: .5rem;
+  text-align: center;
+  margin: .125rem .6875rem;
   border: none;
-  font-size: 14px;
+  font-size: .175rem;
   color: #FFF;
   background-color: #552c0e;
 }
-.center .box1 .content2 .bj .right button:hover {
+.center .box1 .content2 .bj .right a:hover {
   cursor: pointer;
+  opacity: 0.7;
 }
 .center .box2 {
-  margin: 15px;
+  margin: .1875rem;
   /* background-color: pink; */
 }
 .center .box2 p {
-  font-size: 16px;
+  font-size: .2rem;
 }
 .center .box2 p em {
   color: #3fa1d3;
 }
 .center .box3 .content111 {
   position: relative;
-  margin-bottom: 30px;
+  margin-bottom: .375rem;
 }
 .center .box3 .content111 .table {
-  margin-bottom: 50px;
+  margin-bottom: .625rem;
 }
 .center .box3 .content111 .goBuy {
   position: absolute;
   left: 0;
   bottom: 0;
-  padding: 8px 12px;
+  padding: .1rem .15rem;
   border: none;
   background-color: #fa7c38;
   color: #FFF;
+  cursor: pointer;
 }
 .center .box3 .content111 .pagination {
   display: flex;
   justify-content: end;
-  margin-right: 30px;
+  margin-right: .375rem;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/ZhengShu.vue b/src/components/ZhengShu.vue
index 95550ca..6b43dec 100644
--- a/src/components/ZhengShu.vue
+++ b/src/components/ZhengShu.vue
@@ -111,7 +111,7 @@ export default {
   justify-content: center;
   flex-direction: column;
   width: 100%;
-  height: 605px;
+  height: 7.5625rem;
   background: url(/assets/img/zhengshu-bj.png) no-repeat;
   background-size: cover;
 }
@@ -119,21 +119,21 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 1000px;
-  height: 150px;
+  width: 12.5rem;
+  height: 1.875rem;
   margin: 0 auto;
   /* border: 2px solid red; */
 }
 .zheng-shu .box-top h4 {
-  width: 500px;
-  font-size: 30px;
+  width: 6.25rem;
+  font-size: .375rem;
   color: #74491a;
-  margin-bottom: 10px;
+  margin-bottom: .125rem;
 }
 .zheng-shu .box-top p {
-  width: 500px;
-  font-size: 16px;
-  letter-spacing: 5px;
+  width: 6.25rem;
+  font-size: .2rem;
+  letter-spacing: .0625rem;
   color: #9a7148;
 }
 .zheng-shu .box-bottom {
@@ -141,22 +141,22 @@ export default {
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 600px;
+  height: 7.5rem;
   background-color: #f5f5f5;
 }
 .zheng-shu .box-bottom .box {
   /* position: absolute; */
   position: relative;
-  top: -200px;
-  bottom: 50px;
+  top: -2.5rem;
+  bottom: .625rem;
   display: flex;
-  width: 1000px;
-  height: 750px;
+  width: 12.5rem;
+  height: 9.375rem;
   background-color: #FFF;
-  padding: 40px;
-  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  padding: .5rem;
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
 }
 
 .paging {
@@ -171,17 +171,17 @@ export default {
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  width: 880px;
-  height: 600px;
-  margin: 10px auto;
+  width: 11rem;
+  height: 7.5rem;
+  margin: .125rem auto;
   /* background-color: pink; */
   /* margin-bottom: 50px; */
 
 }
 .picture {
-  width: 205px;
-  height: 270px;
-  margin-right: 20px;
+  width: 2.5625rem;
+  height: 3.375rem;
+  margin-right: .25rem;
   /* background-color: skyblue; */
 }
 .picture:nth-child(4n) {
@@ -191,10 +191,10 @@ export default {
   position: absolute;
   /* position: relative; */
   /* top: 10px; */
-  bottom: 10px;
+  bottom: .125rem;
   right: 0px;
   /* margin-top: 15px; */
-  width: 350px;
+  width: 4.375rem;
   text-align: right;
   /* border: 1px solid green; */
 }
diff --git a/src/components/guizeTest.html b/src/components/guizeTest.html
new file mode 100644
index 0000000..3e5053c
--- /dev/null
+++ b/src/components/guizeTest.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
+  <title id="HTMLBT">AI秒著引擎</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    em,
+    i {
+      font-style: normal;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    ul,
+    li,
+    ol {
+      list-style: none;
+    }
+
+    #app {
+      width: 1000px;
+      margin: 0 auto;
+      /* border: 1px solid #333; */
+      padding-top: 50px;
+      padding-bottom: 40px;
+    }
+
+    #title {
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      margin-bottom: 15px;
+      /* border: 1px solid red; */
+    }
+
+    #content {
+      line-height: 35px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <h2 id="title"></h2>
+    <!-- <h2 id="title" v-html="title"></h2> -->
+    <div id="content"></div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script>
+    const htmlBT = document.querySelector('#HTMLBT')
+    const content = document.querySelector('#content')
+    const title = document.querySelector('#title')
+    axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/89c4ca41-a44e-4ae2-bad3-6fa6536dd453').then(response => {
+      // this.data = response.data;
+      // this.title = response.data.title;
+      // this.data = response.data.content;
+      htmlBT.innerHTML = response.data.title
+      title.innerHTML = response.data.title
+      content.innerHTML = response.data.content
+      console.log(response.data);
+
+      window.open(`https://www.aimzhu.com/operator/route/content/view?agreementId
+=${this.contentId}&title=${this.title}`);
+
+    }).catch(error => {
+      console.error(error);
+    });
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/components/register2.html b/src/components/register2.html
index 17e3972..39cb5cb 100644
--- a/src/components/register2.html
+++ b/src/components/register2.html
@@ -10,6 +10,18 @@
   <link rel="stylesheet" href="./assets/font/iconfont.css">
   <link rel="stylesheet" href="./layui/css/layui.css">
   <style>
+    @media screen and (max-width: 1920px) {
+      html {
+        font-size: 66px !important;
+      }
+    }
+
+    @media screen and (min-width: 1360px) {
+      html {
+        font-size: 80px !important;
+      }
+    }
+
     .page {
       position: relative;
       width: 100vw;
@@ -24,13 +36,13 @@
       justify-content: space-between;
       align-content: center;
       width: 100vw;
-      height: 80px;
+      height: 1rem;
     }
 
     .top .left {
-      width: 260px;
-      height: 50px;
-      margin: 15px 50px;
+      width: 3.25rem;
+      height: .625rem;
+      margin: .1875rem .625rem;
     }
 
     .top .left .logo {
@@ -45,16 +57,16 @@
       flex-wrap: wrap;
       justify-content: space-between;
       align-content: center;
-      width: 200px;
-      height: 40px;
-      margin: 20px 30px;
+      width: 2.5rem;
+      height: .5rem;
+      margin: .25rem .375rem;
     }
 
     .top .right #login {
-      font-size: 16px;
-      padding: 5px 20px;
+      font-size: .2rem;
+      padding: .0625rem .25rem;
       border: none;
-      border-radius: 25px;
+      border-radius: .3125rem;
       background: rgba(255, 255, 255, 0.4);
       color: #42210B;
     }
@@ -67,10 +79,10 @@
     }
 
     .top .right #goHomePage {
-      font-size: 16px;
-      padding: 5px 20px;
+      font-size: .2rem;
+      padding: .0625rem .25rem;
       border: none;
-      border-radius: 25px;
+      border-radius: .3125rem;
       color: #FFF;
       background: #42210B;
     }
@@ -87,11 +99,11 @@
       transform: translate(-50%, -50%);
       display: flex;
       flex-direction: column;
-      width: 500px;
-      height: 550px;
+      width: 6.25rem;
+      height: 6.875rem;
       background-color: #fff;
-      border-radius: 20px;
-      padding: 40px;
+      border-radius: .25rem;
+      padding: .5rem;
     }
 
     .loginBox .title {
@@ -99,24 +111,24 @@
     }
 
     .loginBox .title h3 {
-      font-size: 22px;
+      font-size: .275rem;
       font-weight: 700;
     }
 
     .loginBox .title span {
       display: block;
-      width: 70px;
-      height: 5px;
+      width: .875rem;
+      height: .0625rem;
       background-color: #fda633;
-      margin-left: 30px;
-      margin-top: 5px;
+      margin-left: .375rem;
+      margin-top: .0625rem;
     }
 
     .loginBox .msg {
       display: flex;
       flex-direction: column;
       width: 100%;
-      margin-top: 40px;
+      margin-top: .5rem;
     }
 
     .loginBox .msg .msgBox {
@@ -127,20 +139,20 @@
     .loginBox .msg .msgBox li {
       position: relative;
       width: 100%;
-      height: 50px;
-      margin-bottom: 20px;
+      height: .625rem;
+      margin-bottom: .25rem;
       border: none;
     }
 
     .loginBox .msg .msgBox li input {
       position: absolute;
       width: 100%;
-      height: 50px;
-      text-indent: 15px;
+      height: .625rem;
+      text-indent: .1875rem;
       border: none;
-      border: 1.5px solid #CCC;
-      border-radius: 8px;
-      font-size: 15px;
+      border: .0187rem solid #CCC;
+      border-radius: .1rem;
+      font-size: .1875rem;
       color: #999999;
     }
 
@@ -168,25 +180,25 @@
     }
 
     .loginBox .msg .msgBox li input:focus-within {
-      border: 1.25px solid #fa911e;
+      border: .0156rem solid #fa911e;
     }
 
     .loginBox .msg .msgBox li input:hover {
-      border: 1.25px solid #fa911e;
+      border: .0156rem solid #fa911e;
     }
 
     .loginBox .msg .msgBox li:nth-child(2) button {
       position: absolute;
-      right: 10px;
-      width: 100px;
-      height: 30px;
+      right: .125rem;
+      width: 1.25rem;
+      height: .375rem;
       border: none;
       background-color: transparent;
-      letter-spacing: 2px;
-      margin: 10px 0;
+      letter-spacing: .025rem;
+      margin: .125rem 0;
       cursor: pointer;
       color: #0095ff;
-      font-size: 15px;
+      font-size: .1875rem;
     }
 
     .loginBox .msg .msgBox li:nth-child(2) button:hover {
@@ -195,11 +207,11 @@
 
     .loginBox .msg .msgBox li:nth-child(3) i {
       position: absolute;
-      top: 15px;
-      right: 10px;
+      top: .1875rem;
+      right: .125rem;
       display: block;
-      width: 20px;
-      height: 20px;
+      width: .25rem;
+      height: .25rem;
       color: #999999;
     }
 
@@ -213,20 +225,20 @@
       justify-content: start;
       align-content: center;
       width: 100%;
-      height: 40px;
-      line-height: 40px;
+      height: .5rem;
+      line-height: .5rem;
       color: #333;
-      font-size: 14px;
-      margin-top: 20px;
+      font-size: .175rem;
+      margin-top: .25rem;
     }
 
     .loginBox .msg .agreement input {
-      width: 20px;
-      height: 20px;
-      margin: 10px 0;
+      width: .25rem;
+      height: .25rem;
+      margin: .125rem 0;
       color: #333;
-      font-size: 12px;
-      margin-right: 10px;
+      font-size: .15rem;
+      margin-right: .125rem;
     }
 
     .loginBox .msg .agreement a {
@@ -239,13 +251,13 @@
 
     .loginBox .msg #register {
       width: 100%;
-      height: 50px;
+      height: .625rem;
       border: none;
-      border-radius: 8px;
+      border-radius: .1rem;
       background-color: #C0C0C0;
       color: #FFF;
-      font-size: 18px;
-      margin-top: 10px;
+      font-size: .225rem;
+      margin-top: .125rem;
       cursor: not-allowed;
     }
 
@@ -255,11 +267,11 @@
     }
 
     .loginBox .msg .register:not(.register-disabled):hover {
-      font-size: 20px;
+      font-size: .25rem;
       font-weight: 700;
-      -webkit-box-shadow: 0 0 10px #fda633;
-      -moz-box-shadow: 0 0 10px #fda633;
-      box-shadow: 0 0 10px #fda633;
+      -webkit-box-shadow: 0 0 .125rem #fda633;
+      -moz-box-shadow: 0 0 .125rem #fda633;
+      box-shadow: 0 0 .125rem #fda633;
       /* cursor: pointer; */
       background-color: #fda633;
     }
@@ -270,9 +282,9 @@
       justify-content: end;
       align-content: center;
       width: 100%;
-      height: 40px;
-      margin-top: 10px;
-      font-size: 15px;
+      height: .5rem;
+      margin-top: .125rem;
+      font-size: .1875rem;
       color: #333;
     }
 
diff --git a/src/style.css b/src/style.css
index e063d18..4a5228c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -87,4 +87,16 @@ h6 {
 /* .router-link-active {
   font-weight: 700;
   color: #F7931E;
-} */
\ No newline at end of file
+} */
+
+@media screen and (max-width: 1920px) {
+  html {
+    font-size: 66px !important;
+  }
+}
+
+@media screen and (min-width: 1360px) {
+  html {
+    font-size: 80px !important;
+  }
+}
\ No newline at end of file