适配问题

src/App.vue

@@ -10,6 +10,7 @@ import util from '@/libs/util';
 export default {
   name: 'App',
   created() {
+    console.log('i18n=>',this.$i18n.locale)
     //在页面加载时读取localStorage里的状态信息
     if (util.local.get(Setting.storeKey)) {
       this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey)));
@@ -34,13 +35,88 @@ export default {
     }
     var flagZt = IsPCModel();
     this.$store.commit('updateModelType', flagZt)
-    window.onresize = () => {
+    window.onresize = this.throttle(() => {
       if(document.body.clientWidth <= 1200) {
         this.$store.commit('updateModelType', false)
+      }else if(document.body.clientWidth > 1700 ) {
+        this.$store.commit('updateModelType', true)
+        this.$store.dispatch('updateNavSumA', 10)
+        sessionStorage.setItem('navPageSize', 10)
+      }else if(document.body.clientWidth > 1600 && document.body.clientWidth <= 1700 ) {
+        this.$store.commit('updateModelType', true)
+        if (this.$i18n.locale == 'en') {
+          this.$store.dispatch('updateNavSumA', 9)
+          sessionStorage.setItem('navPageSize', 9)
         }else {
+          this.$store.dispatch('updateNavSumA', 10)
+        sessionStorage.setItem('navPageSize', 10)
+        }
+      }else if(document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
         this.$store.commit('updateModelType', true)
+        this.$store.dispatch('updateNavSumA', 9)
+        sessionStorage.setItem('navPageSize', 9)
+      }else if(document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
+        this.$store.commit('updateModelType', true)
+        if (this.$i18n.locale == 'en') {
+          this.$store.dispatch('updateNavSumA', 7)
+          sessionStorage.setItem('navPageSize', 7)
+        }else {
+          this.$store.dispatch('updateNavSumA', 8)
+        sessionStorage.setItem('navPageSize', 8)
+        }
+      }else if(document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
+        this.$store.commit('updateModelType', true)
+        if (this.$i18n.locale == 'en') {
+          this.$store.dispatch('updateNavSumA', 6)
+          sessionStorage.setItem('navPageSize', 6)
+        }else {
+          this.$store.dispatch('updateNavSumA', 7)
+        sessionStorage.setItem('navPageSize', 7)
+        }
+      }else if(document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
+        this.$store.commit('updateModelType', true)
+        if (this.$i18n.locale == 'en') {
+          this.$store.dispatch('updateNavSumA', 6)
+          sessionStorage.setItem('navPageSize', 6)
+        }else {
+          this.$store.dispatch('updateNavSumA', 6)
+        sessionStorage.setItem('navPageSize', 6)
+        }
+      }else {
+        this.$store.commit('updateModelType', true)
+      }
+    },500)
+  },
+  mounted() {
+    window.onbeforeunload = function(){
+      sessionStorage.removeItem('navPageSize')
+    }
+    console.log('document.body.clientWidth=>', document.body.clientWidth)
+      if(document.body.clientWidth > 1600 ) {
+        sessionStorage.setItem('navPageSize', 10)
+      }else if(document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
+        sessionStorage.setItem('navPageSize', 9)
+      }else if(document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
+        sessionStorage.setItem('navPageSize', 8)
+      }else if(document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
+        sessionStorage.setItem('navPageSize', 7)
+      }else if(document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
+        sessionStorage.setItem('navPageSize', 6)
+      }
+  },
+  methods: {
+    throttle(func, delay) {
+        var prev = Date.now()
+        return function () {
+            var context = this;
+            var args = arguments;
+            var now = Date.now();
+            if (now - prev >= delay) {
+                func.apply(context, args);
+                prev = Date.now();
             }
         }
     }
+  },
 };
 </script>

src/components/menuTree/index.vue

@@ -7,10 +7,14 @@
         </template>
         <menuTree :menuList="item.children"></menuTree>
       </el-submenu>
-      <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else>
-        <span v-if="item.menuVisible!==1" slot="title" :id="item.id">{{item.columnName}}</span>
+      <template v-else>
+        <template v-if="item.menuVisible!==1" >
+          <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" >
+          <span slot="title" :id="item.id">{{item.columnName}}</span>
           </el-menu-item>
         </template>
+      </template>
+    </template>
   </div>
 </template>
 

src/i18n/index.js

@@ -23,7 +23,8 @@ export const messages = {
       series: '演讲系列',
       all: '全部',
       readDetail: '阅读详情',
-      offline:'线下'
+      offline:'线下',
+      more: '更多'
     }
   },
   'en': {
@@ -50,7 +51,8 @@ export const messages = {
       series: 'Series',
       all: 'All',
       readDetail: 'Read Detail',
-      offline: 'Offline'
+      offline: 'Offline',
+      more: 'More'
     }
   }
 };

src/layouts/header/index.vue

@@ -11,7 +11,7 @@
     </a>
     <!-- pc端 -->
     <template v-if="$store.getters.getModelType">
-      <navbar ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate"></navbar>
+      <navbar ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" @showMoreBtns="updateBtnsType"></navbar>
       <div class="tools">
         <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
         <img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
@@ -53,7 +53,7 @@ export default {
       showSearch: false,
       title: '',
       searchTimer: null,
-      modelType: false
+      modelType: false,
     };
   },
   components: {
@@ -90,6 +90,13 @@ export default {
     },
     stop() {
 
+    },
+    /**
+     * pc端下,当导航栏条目大于10的情况下,显示更多按钮
+     * type : true显示,false隐藏
+     */
+    updateBtnsType(type) {
+      this.showMoreBtns = type
     },
     // 获取页面滚动距离(home长页专用)
     handleScroll () {

src/layouts/navbar/index.vue

@@ -2,14 +2,19 @@
   <div>
     <el-menu :class="['nav', {home: isHome, estate: isEstate}]" ref="elMenu" :key="menuRefresh" :mode="$store.getters.getModelType ? 'horizontal' : 'vertical' " :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)">
       <menuTree :menuList="menus"/>
+      <el-submenu :popper-class="isHome ? 'home-menu-popup' : ''" v-show="showMoreBtns" index="522222" >
+        <template slot="title"><div class="moreBtns">{{ $t('column.more') }}</div></template>
+        <menuTree :menuList="otherMenus"/>
+      </el-submenu>
     </el-menu>
+    
   </div>
 </template>
 
 <script>
 import menuTree from '@/components/menuTree'
 import mixins from '@/mixins/article'
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapMutations,mapGetters } from 'vuex'
 export default {
   props: ['isHome', 'isEstate', 'updateModelType'],
   mixins: [mixins],
@@ -22,12 +27,21 @@ export default {
       activeTextColor: '#1583FF',
       menuRefresh: 1,
       toItem: {},
-      parentId: 0
+      parentId: 0,
+      otherMenus: [],
+      // 当导航栏条目大于10条,则在pc端显示更多的按钮
+      showMoreBtns: false
     };
   },
   components: {
     menuTree
   },
+  computed: {
+    ...mapGetters(["getNavSum"]),
+    mapboxMap1() {
+      return this.navSum;
+    }
+  },
   watch: {
     '$route'() {
       const { siteId } = this.$route.query
@@ -40,11 +54,15 @@ export default {
     },
     isHome() {
       this.handleColor()
+    },
+    getNavSum() {
+      this.getColumn()
     }
   },
   mounted() {
     this.handleColor()
     this.getColumn()
+    console.log('this.$store.state.navSum=>' ,this.$store.state.navSum)
   },
   methods: {
     ...mapMutations('content', [
@@ -59,7 +77,20 @@ export default {
         typeId	: '',
         isSort: 1
       }).then(({ data }) => {
-        this.menus = data
+        // 去掉被禁用的栏目
+        const menuVisibleData = data.filter(item=> item.menuVisible ==0)
+        if (this.$store.getters.getModelType) {
+          this.menus = menuVisibleData.slice(0, sessionStorage.getItem('navPageSize'))
+          this.otherMenus = menuVisibleData.slice(sessionStorage.getItem('navPageSize'), data.length)
+          if (this.otherMenus.length >=1) {
+            this.showMoreBtns = true
+          }else {
+            this.showMoreBtns = false
+          }
+        }else {
+          this.showMoreBtns = false
+          this.menus = menuVisibleData
+        }
         if (data.length) {
           if (!this.$route.query.id && !this.$route.query.articleId && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
           if (!this.active) this.active = data[0].id
@@ -102,11 +133,11 @@ export default {
     // 跳转
     jump(id) {
       console.log('id=>',id)
+      
+      this.getPath(this.otherMenus ,id || this.otherMenus[0].id)
       this.getPath(this.menus ,id || this.menus[0].id)
+      
       this.columnTo(this.toItem)
-      // if(!this.$store.getters.getModelType) {
-      //   this.updateModelType(false)
-      // }
       this.$parent.showSearch = false
     }
   }
@@ -115,7 +146,13 @@ export default {
 
 <style lang="scss" scoped>
 $height: 90px;
+.moreBtns{
+  font-size: 1rem;
+  font-weight: bold;
+  padding-top: 0.2rem;
+}
 /deep/.nav.el-menu--horizontal {
+  display: flex;
   position: absolute;
   top: 0;
   left: 50%;
@@ -175,7 +212,6 @@ $height: 90px;
 @media (max-width: 1500px) {
   /deep/.nav {
     .el-menu-item {
-      padding: 0 8px;
     }
   }
 }

src/pages/application/index.vue

@@ -123,24 +123,41 @@ export default {
 
 .wrap{
   /deep/ .el-carousel {
-    height: 30rem;
+    height: 21.6rem;
     .el-carousel__container{
-      height: 30rem;
+      height: 21.6rem;
     }
     img{
-      height: 30rem;
+      height: 21.6rem;
+    }
+  }
+}
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.15rem 0;
+  .inner {
+    .b-title  {
+      font-size: 2.25rem;
+      margin-bottom: 2.25rem;
+    }
+    .intro  {
+      margin-bottom: 2.25rem;
     }
   }
 }
 .history {
   h2 {
-    font-size: 1.8rem;
+    font-size: 1.35rem;
     color: #333;
   }
   .texts {
     display: flex;
     justify-content: space-between;
-    padding: 82px 57px 30px;
+    padding: 2.7rem 2.56rem 1.35rem;
     margin-top: 20px;
     background-color: #fff;
     border-radius: 100px 0px 0px 0px;
@@ -150,7 +167,7 @@ export default {
     }
   }
   .left {
-    width: 695px;
+    width: 50%;
   }
   .des {
     margin: 20px 0;
@@ -160,6 +177,8 @@ export default {
   }
   .bg {
     margin: -122px 0 0 0;
+    width: 50%;
+    height: auto;
   }
 }
 .app-inner {
@@ -236,17 +255,17 @@ export default {
   }
   img {
     width: 100%;
-    height: 353px;
+    height: auto;
   }
   .text {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 143px;
-    font-size: 1.8rem;
+    height: 6.43rem;
+    font-size: 1.44rem;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
-    line-height: 40px;
+    line-height:  6.43rem;
     text-align: center;
     color: #272727;
     background-color: #F5F5F5;
@@ -264,8 +283,8 @@ export default {
   li {
     display: inline-flex;
     width: calc((100% - 28px) / 2);
-    padding: 34px;
-    margin-bottom: 28px;
+    padding: 1.53rem;
+    margin-bottom: 1.26rem;
     background-color: #fff;
     cursor: pointer;
     transition: .3s;
@@ -274,8 +293,8 @@ export default {
     }
   }
   img {
-    width: 237px;
-    height: 167px;
+    width: 10.66rem;
+    height: auto;
   }
   .texts {
     margin-left: 34px;
@@ -286,12 +305,12 @@ export default {
   }
   .des {
     margin: 14px 0;
-    font-size: 1rem;
+    font-size: .9rem;
     color: #333;
     line-height: 22px;
   }
   .meta {
-    font-size: 1rem;
+    font-size: .8rem;
     color: #999;
   }
 }
@@ -424,41 +443,48 @@ export default {
 @media (max-width: 320px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 13rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 13rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 13rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .texts {
         padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
         .bg {
-          height: 15rem !important;
+          height: auto !important;
         }
       }
       .group{
         li {
           img {
-            height: 15rem;
+            height: auto;
           }
         }
       }
@@ -466,7 +492,7 @@ export default {
          li {
           padding: 1.25rem;
           img{
-             height: 13rem;
+             height: auto;
           }
           .texts {
             padding: 1.25rem;
@@ -479,41 +505,48 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 15rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 15rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .texts {
         padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
         .bg {
-          height: 15rem !important;
+          height: auto !important;
         }
       }
       .group{
         li {
           img {
-            height: 15rem;
+            height: auto;
           }
         }
       }
@@ -521,7 +554,7 @@ export default {
          li {
           padding: 1.25rem;
           img{
-             height: 13rem;
+             height: auto;
           }
           .texts {
             padding: 1.25rem;
@@ -534,41 +567,48 @@ export default {
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 18rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 18rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 18rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 18rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .texts {
         padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
         .bg {
-          height: 18rem !important;
+          height: auto !important;
         }
       }
       .group{
         li {
           img {
-            height: 18rem;
+            height: auto;
           }
         }
       }
@@ -576,7 +616,7 @@ export default {
          li {
           padding: 1.25rem;
           img{
-             height: 18rem;
+             height: auto;
           }
           .texts {
             padding: 1.25rem;
@@ -589,41 +629,48 @@ export default {
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 22rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 22rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 22rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 22rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .texts {
         padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
         .bg {
-          height: 22rem !important;
+          height: auto !important;
         }
       }
       .group{
         li {
           img {
-            height: 22rem;
+            height: auto;
           }
         }
       }
@@ -631,7 +678,7 @@ export default {
          li {
           padding: 1.25rem;
           img{
-             height: 22rem;
+             height: auto;
           }
           .texts {
             padding: 1.25rem;
@@ -644,41 +691,48 @@ export default {
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 25rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 25rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 25rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 25rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 2.5rem;
+      font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .texts {
         padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
         .bg {
-          height: 25rem !important;
+          height: auto !important;
         }
       }
       .group{
         li {
           img {
-            height: 25rem;
+            height: auto;
           }
         }
       }
@@ -686,7 +740,7 @@ export default {
          li {
           padding: 1.25rem;
           img{
-             height: 25rem;
+             height: auto;
           }
           .texts {
             padding: 1.25rem;
@@ -699,109 +753,168 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 30rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 30rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 30rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 30rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 2.3rem !important;
+      font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .texts {
-        padding: 5rem 1.25rem;
+        flex-direction: row;
+        padding: 3rem 1.25rem;
+        .left {
+          width: 50%;
+        }
+        h2{
+          margin-left: 0 !important;
+        }
         .bg {
-          height: 30rem !important;
+          width: 50%;
+          margin: -3rem 0 0 0;
+          height: auto !important;
         }
       }
       .group{
+        flex-direction: row;
         li {
+          width: calc((100% - 56px) / 3);
           img {
-            height: 30rem;
+            height: auto;
+          }
+          .text {
+            line-height: 1.5rem;
           }
         }
       }
       .news {
+        flex-direction: row;
          li {
+          width: calc((100% - 28px) / 2);
           padding: 1.25rem;
           img{
-             height: 30rem;
+             height: auto;
           }
           .texts {
             padding: 1.25rem;
           }
          }
       }
+      .app {
+        flex-direction: row;
+        li {
+          width: 45%;
+          &:nth-child(2n+1) {
+            margin-right: 1rem;
+          }
+        }
+      }
     }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px)  {
   .wrap  {
     /deep/ .el-carousel{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 35rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 35rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 35rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 2.5rem !important;
+      font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
+    padding: 1.25rem 0 ;
     .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .texts {
-        padding: 5rem 1.25rem;
+        flex-direction: row;
+        padding: 3rem 1.25rem;
+        .left {
+          width: 50%;
+        }
+        h2{
+          margin-left: 0 !important;
+        }
         .bg {
-          height: 35rem !important;
+          width: 50%;
+          margin: -3rem 0 0 0;
+          height: auto !important;
         }
       }
       .group{
+        flex-direction: row;
         li {
+          width: calc((100% - 56px) / 3);
           img {
-            height: 35rem;
+            height: auto;
+          }
+          .text {
+            line-height: 1.5rem;
           }
         }
       }
       .news {
+        flex-direction: row;
          li {
+          width: calc((100% - 28px) / 2);
           padding: 1.25rem;
           img{
-             height: 35rem;
+             height: auto;
           }
           .texts {
             padding: 1.25rem;
           }
          }
       }
+      .app {
+        flex-direction: row;
+        li {
+          width: 45%;
+          &:nth-child(2n+1) {
+            margin-right: 1rem;
+          }
+        }
+      }
     }
   }
 }

src/pages/article/index.vue

@@ -175,15 +175,15 @@ export default {
 <style lang="scss" scoped>
 @import "./editor.css";
 .content {
-  width: 1400px;
+  width: 1200px;
   /deep/ .el-breadcrumb {
-    font-size: 1rem;
+    font-size: .98rem;
   }
 }
 .banner {
-  height: 280px;
-  padding: 123px 0 0 243px;
-  font-size: 48px;
+  height: 14.4rem;
+  padding: 7.68rem 0 0 22.1875rem;
+  font-size: 2.16rem;
   font-weight: 600;
   color: #fff;
   background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
@@ -192,21 +192,21 @@ export default {
   display: flex;
   justify-content: space-between;
   .left {
-    width: 66%;
+    width: 70%;
   }
   h2 {
-    font-size: 2.57rem;
+    font-size: 1.9rem;
     color: #1C1C1C;
   }
   .meta {
-    margin: 20px 0;
-    font-size: 1rem;
+    margin: 1rem 0;
+    font-size: .88rem;
     color: #9B9B9B;
   }
   .brief {
-    padding-bottom: 30px;
-    margin-bottom: 30px;
-    font-size: 24px;
+    padding-bottom: 1.5rem;
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
     line-height: 1.33;
     color: #606060;
     border-bottom: 1px solid #D8D8D8;
@@ -245,15 +245,15 @@ export default {
   .right {
     width: 20%;
     /deep/ .el-tree-node__label{
-      font-size: 1rem;
+      font-size: .88rem;
     }
   }
   .column {
     width: 100%;
-    margin-bottom: 25px;
+    margin-bottom: 1.56rem;
   }
   /deep/.el-tree-node__content {
-    height: 44px;
+    height: 2.75rem;
     background-color: #E5EDF8;
     border-bottom: 2px solid #fff;
   }

src/pages/careers/index.vue

@@ -132,15 +132,34 @@ export default {
 @import "../../styles/page/page.scss";
 .wrap{
   /deep/ .el-carousel {
-    height: 30rem;
+    height: 21.6rem;
     .el-carousel__container{
-      height: 30rem;
+      height: 21.6rem;
     }
     img{
-      height: 30rem;
+      height: 21.6rem;
     }
   }
 }
+
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.15rem 0;
+  .inner {
+    .b-title  {
+      font-size: 2.25rem;
+      margin-bottom: 2.25rem;
+    }
+    .intro  {
+      margin-bottom: 6.9rem;
+    }
+   
+  }
+}
 .card {
   display: flex;
   justify-content: center;
@@ -150,8 +169,8 @@ export default {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    width: 368px;
-    height: 526px;
+    flex: 1;
+    height: 23.67rem;
     margin-right: 14px;
     color: #fff;
     &:hover {
@@ -171,22 +190,25 @@ export default {
     }
     h6 {
       margin-bottom: 10px;
-      font-size: 2rem;
+      font-size: 1.57rem;
     }
     .text {
-      font-size: 1.3rem;
+      font-size: 1.08rem;
+      text-align: center;
     }
     .arrow {
       position: absolute;
       bottom: 0;
       width: 100%;
-      height: 177px;
-      padding-top: 62px;
+      height: 7.9rem;
       text-align: center;
       background: #36404A;
       opacity: 0;
       transition: .3s;
       cursor: default;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 }
@@ -194,8 +216,8 @@ export default {
   position: relative;
   li {
     position: relative;
-    min-height: 450px;
-    padding: 100px 70px 30px 57px;
+    height: 20.25rem;
+    padding: 4.5rem 3.15rem 1.35rem 2.565rem;
     margin-bottom: 100px;
     background-color: #fff;
     transition: .3s;
@@ -220,7 +242,7 @@ export default {
     left: 57px;
   }
   .left {
-    width: 51%;
+    width: 50%;
   }
   h6 {
     font-size: 1.4rem;
@@ -236,8 +258,8 @@ export default {
     position: absolute;
     top: -60px;
     right: 43px;
-    width: 45%;
-    height: 450px;
+    width: 40%;
+    height: auto;
   }
 }
 .shows {
@@ -247,7 +269,7 @@ export default {
     display: flex;
     align-items: center;
     width: 100%;
-    height: 654px;
+    height: 29.43rem;
     margin-bottom: 40px;
     color: #fff;
     &:hover .left {
@@ -286,17 +308,17 @@ export default {
     height: 100%;
   }
   h6 {
-    font-size: 2.6rem;
+    font-size: 2.07rem;
     transition: .3s;
   }
   .sub {
-    margin: 20px;
-    font-size: 2rem;
+    margin: 20px 0 20px 0;
+    font-size: 1.35rem;
     transition: .3s;
   }
   .des {
     margin-bottom: 40px;
-    font-size: 1.2rem;
+    font-size: 1.08rem;
     transition: .3s;
   }
   .icon {
@@ -372,23 +394,24 @@ export default {
 @media (max-width: 320px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 15rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
@@ -396,9 +419,10 @@ export default {
      .inner {
       .card {
         li {
-          height: 15rem;
+          flex: none;
+          height: 25rem;
           .pic {
-            height: 15rem;
+            height: 25rem;
           }
         }
       }
@@ -406,8 +430,30 @@ export default {
         li {
           padding: 10rem 1.25rem 1.5rem;
           .pic {
-            height: 10rem;
+            top: -40px;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        h6 {
+          font-size: 1rem;
+        }
+        .sub {
+          font-size: .9rem;
         }
+        .des {
+          font-size: .88rem;
+          margin-bottom: .5rem;
+        }
+        .icon {
+          width: 2rem;height: 2rem;
         }
       }
     }
@@ -416,23 +462,24 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 15rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
@@ -440,42 +487,67 @@ export default {
      .inner {
       .card {
         li {
-          height: 15rem;
+          flex: none;
+          height: 25rem;
           .pic {
-            height: 15rem;
+            height: 25rem;
           }
         }
       }
       .people {
-       
         li {
           padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -40px;
+            height: auto;
+          }
+        }
+      }
       
      }
   }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        h6 {
+          font-size: 1rem;
+        }
+        .sub {
+          font-size: .9rem;
+        }
+        .des {
+          font-size: .88rem;
+          margin-bottom: .5rem;
+        }
+        .icon {
+          width: 2rem;height: 2rem;
+        }
+      }
     }
   }
 }
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 18rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 18rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 18rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 18rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
@@ -483,24 +555,42 @@ export default {
      .inner {
       .card {
         li {
-          height: 18rem;
+          flex: none;
+          height: 25rem;
           .pic {
-            height: 18rem;
+            height: 25rem;
           }
         }
       }
       .people {
         li {
           padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -40px;
+            height: auto;
           }
         }
       }
+      
+     }
   }
   .shows {
     li {
-      height: 18rem;
-      .pic {
-        height: 18rem;
+      height: auto;
+      .left {
+        h6 {
+          font-size: 1rem;
+        }
+        .sub {
+          font-size: .9rem;
+        }
+        .des {
+          font-size: .88rem;
+          margin-bottom: .5rem;
+        }
+        .icon {
+          width: 2rem;height: 2rem;
+        }
       }
     }
   }
@@ -508,23 +598,24 @@ export default {
 @media (min-width: 480px) and (max-width: 640px)  {
   .wrap  {
     /deep/ .el-carousel{
-      height: 20rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 20rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 20rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 20rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
@@ -532,31 +623,31 @@ export default {
      .inner {
       .card {
         li {
-          height: 20rem;
+          flex: none;
+          height: 25rem;
           .pic {
-            height: 20rem;
+            height: 25rem;
           }
         }
       }
       .people {
         li {
+          margin-bottom: 15rem;
           padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -40%;
+            height: auto;
           }
         }
       }
-  }
-  .people {
-    li {
-      .pic {
-        height: 16rem !important;
-      }
+      
      }
   }
   .shows {
     li {
-      height: 20rem;
-      .pic {
-        height: 20rem;
+      height: auto;
+      .left {
+        padding: 2rem 2rem;
       }
     }
   }
@@ -564,23 +655,24 @@ export default {
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 22rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 22rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 22rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 22rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
@@ -588,31 +680,31 @@ export default {
      .inner {
       .card {
         li {
-          height: 22rem;
+          flex: none;
+          height: 25rem;
           .pic {
-            height: 22rem;
+            height: 25rem;
           }
         }
       }
       .people {
         li {
           padding: 10rem 1.25rem 1.5rem;
+          margin-bottom: 15rem;
+          .pic {
+            top: -60%;
+            height: auto;
           }
         }
       }
-  }
-  .people {
-    li {
-      .pic {
-        height: 18rem !important;
-      }
+      
      }
   }
   .shows {
     li {
-      height: 22rem;
-      .pic {
-        height: 22rem;
+      height: auto;
+      .left {
+        padding: 3rem 2rem;
       }
     }
   }
@@ -620,23 +712,24 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 26rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 26rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 26rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 26rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
@@ -644,32 +737,32 @@ export default {
      .inner {
       .card {
         li {
-          height: 26rem;
+          flex: none;
+          height: 25rem;
           .pic {
-            height: 26rem;
+            height: 25rem;
           }
         }
       }
       .people {
         li {
+          margin-bottom: 20rem;
           padding: 10rem 1.25rem 1.5rem;
+       
+          .pic {
+            top: -85%;
+            height: auto;
           }
         }
       }
-  }
-  .people {
-    li {
-      .pic {
-        width: 50% !important;
-        height: 18rem !important;
-      }
+      
      }
   }
   .shows {
     li {
-      height: 26rem;
-      .pic {
-        height: 26rem;
+      height: auto;
+      .left {
+        padding: 4rem 2rem;
       }
     }
   }
@@ -677,23 +770,24 @@ export default {
 @media (min-width: 980px) and (max-width: 1200px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 30rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 30rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 30rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 30rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
@@ -701,32 +795,31 @@ export default {
      .inner {
       .card {
         li {
-          height: 30rem;
+          flex: none;
+          height: 25rem;
           .pic {
-            height: 30rem;
+            height: 25rem;
           }
         }
       }
       .people {
         li {
+          margin-bottom: 30rem;
           padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -115%;
+            height: auto;
           }
         }
       }
-  }
-  .people {
-    li {
-      .pic {
-        width: 50% !important;
-        height: 18rem !important;
-      }
+      
      }
   }
   .shows {
     li {
-      height: 30rem;
-      .pic {
-        height: 30rem;
+      height: auto;
+      .left {
+        padding: 4rem 2rem;
       }
     }
   }

src/pages/column/index.vue

@@ -649,40 +649,48 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.wrap {
+  .banner {
+   
+    img {
+      height: 14rem;
+    }
+  }
+}
 .el-tree-node__content{
   padding-left: 10px !important;
 }
 .l-title {
   font-weight: 600;
-  font-size: 1.28rem;
+  font-size: 1.024rem;
 }
 
 .banner {
   position: relative;
-  height: 280px;
+  height: 14rem;
 
   color: #fff;
 
   .texts {
     position: absolute;
-    top: 123px;
-    left: 243px;
+    top: 6.15rem;
+    left: 12.15rem;
   }
 
   .text {
-    font-size: 3rem;
+    font-size: 2.16rem;
     font-weight: 600;
     @include ellipsis;
   }
 
   .sub {
-    margin-top: 10px;
-    font-size: 2rem;
+    margin-top: .5rem;
+    font-size: 1.6rem;
   }
 }
 
 .column-wrap {
-  padding: 40px 0;
+  padding: 2rem 0;
   background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
     url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
   background-color: #f9fafa;
@@ -696,7 +704,7 @@ export default {
 
   .left {
     width: 66%;
-    margin-right: 28px;
+    margin-right: 1.4rem;
   }
 
   .article-wrap {
@@ -706,12 +714,12 @@ export default {
   .switch {
     display: inline-flex;
     align-items: center;
-    margin-right: 50px;
+    margin-right: 2.5rem;
 
     li {
-      padding: 0 15px;
-      margin-right: 10px;
-      line-height: 36px;
+      padding: 0 .75rem;
+      margin-right: .5rem;
+      line-height: 1.8rem;
       font-size: 1rem;
       color: #333;
       background: #f7f7f7;
@@ -727,26 +735,26 @@ export default {
   .forms {
     display: flex;
     align-items: center;
-    padding: 30px;
-    margin-bottom: 20px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
     background-color: #fff;
 
     .item {
       display: inline-flex;
       align-items: center;
-      margin-right: 30px;
+      margin-right: 1.5rem;
     }
 
     .label {
-      font-size: 1.14rem;
+      font-size: .912rem;
       color: #333;
       white-space: nowrap;
     }
 
     /deep/.el-input__inner {
       width: 100%;
-      height: 48px;
-      line-height: 48px;
+      height: 2.4rem;
+      line-height: 2.4rem;
       border: 0;
       background: #f7f7f7;
     }
@@ -754,11 +762,12 @@ export default {
     .search {
       display: inline-flex;
       width: 34%;
+      margin-top: .1rem;
 
       input {
         width: 100%;
-        height: 48px;
-        padding: 0 15px;
+        height: 2.4rem;
+        padding: 0 .75rem;
         font-size: 1rem;
         color: #333;
         background: #f7f7f7;
@@ -776,8 +785,8 @@ export default {
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      width: 62px;
-      height: 48px;
+      width: 3.1rem;
+      height: 2.4rem;
       background: #1583ff;
       border-radius: 0px 6px 6px 0px;
       cursor: pointer;
@@ -790,7 +799,7 @@ export default {
 
   /deep/.columns {
     width: 22%;
-    margin-right: 12px;
+    margin-right: .6rem;
     overflow: auto;
     span{
       white-space: nowrap; 
@@ -810,10 +819,10 @@ export default {
 
     .el-tree-node__content {
       position: relative;
-      height: 48px;
-      padding-left: 40px;
+      height: 2.4rem;
+      padding-left: 2rem;
       margin-bottom: 1px;
-      font-size: 1.28rem;
+      font-size: 1.04rem;
       color: #666;
       background-color: #fff;
       border-top: 1px solid #f8f9f9;
@@ -883,10 +892,12 @@ export default {
       }
       .texts {
         .titleDes {
-          margin-bottom: 1.56rem;
+          margin-bottom: 1.248rem;
+          font-size: 1.2rem;
+          margin-top: .6rem;
         }
         .des {
-          margin-top: 1.7rem;
+          margin-top: 1rem;
         }
       }
       .titleDes {
@@ -895,10 +906,10 @@ export default {
         -webkit-line-clamp: 1;
         text-overflow: ellipsis;
         overflow: hidden;
-        margin-top: 1rem;
+        margin-top: .8rem;
       }
       .readDetailBtn {
-        margin-top: 2rem;
+        margin-top: 1rem;
       }
       .texts {
         flex-grow: 1;
@@ -914,19 +925,19 @@ export default {
     }
 
     .texts {
-      width: 52%;
+      width: 60%;
       padding-left: 30px;
     }
 
     .type {
       margin-bottom: 15px;
-      font-size: 1.28rem;
+      font-size: 1.024rem;
       color: #333;
     }
 
     h6 {
       margin-bottom: 15px;
-      font-size: 1.71rem;
+      font-size: 1.368rem;
       color: #000;
       line-height: 38px;
       @include mul-ellipsis(2);
@@ -935,7 +946,7 @@ export default {
     .meta {
       display: flex;
       align-items: center;
-      font-size: 1rem;
+      font-size: .88rem;
       font-family: PingFangSC-Medium;
       color: #333;
     }
@@ -950,8 +961,8 @@ export default {
     }
 
     .pic {
-      width: 35%;
-      height: 244px;
+      width: 30%;
+      height: auto;
     }
   }
   .news-notice {
@@ -984,13 +995,13 @@ export default {
   }
   .right {
     width: 14%;
-    min-width: 240px;
+    min-width: 15rem;
     overflow: hidden;
   }
 
   .column {
     width: 100%;
-    margin-bottom: 25px;
+    margin-bottom: 1.25rem;
 
     /deep/.el-tree-node__content {
       height: 44px;
@@ -1005,16 +1016,16 @@ export default {
   }
 
   .list {
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
 
     li {
-      padding: 16px 0;
+      padding: .8rem 0;
       border-bottom: 1px solid #d8d8d8;
     }
 
     .text {
       margin-bottom: 5px;
-      font-size: 1rem;
+      font-size: .98rem;
       cursor: pointer;
       @include ellipsis;
 
@@ -1024,7 +1035,7 @@ export default {
     }
 
     .date {
-      font-size: .85rem;
+      font-size: .78rem;
       color: #999;
     }
   }
@@ -1220,11 +1231,13 @@ export default {
 
 @media (max-width: 320px) {
   .banner {
-    height: 13rem;
+    height: 12rem !important;
     img {
-      height: 13rem !important;
+      height: 12rem !important;
     }
     .texts {
+      left: 2rem;
+      bottom: 2rem;
       .text {
         font-size: 1.5rem;
       }
@@ -1234,7 +1247,106 @@ export default {
     .article-wrap {
       .articles {
         .pic {
-          height: 10rem !important;
+          height: auto !important;
+        }
+        .otherData {
+          margin-top: 1rem;
+          .leftBox {
+            padding-left: 0;
+            .titleDes {
+              line-height: 1.368rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  .forms {
+    .switch {
+      width: 100%;
+      flex-direction: column;
+      margin-right: 0;
+      li {
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .banner {
+    height: 12rem !important;
+    img {
+      height: 12rem !important;
+    }
+    .texts {
+      left: 2rem;
+      bottom: 2rem;
+      .text {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .contents {
+    .article-wrap {
+      .articles {
+        .pic {
+          height: auto !important;
+        }
+        .otherData {
+          margin-top: 1rem;
+          .leftBox {
+            padding-left: 0;
+            .titleDes {
+              line-height: 1.368rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  .forms {
+    .switch {
+      width: 100%;
+      flex-direction: column;
+      margin-right: 0;
+      li {
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .banner {
+    height: 12rem !important;
+    img {
+      height: 12rem !important;
+    }
+    .texts {
+      left: 2rem;
+      bottom: 2rem;
+      .text {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .contents {
+    .article-wrap {
+      .articles {
+        .pic {
+          height: auto !important;
+        }
+        .otherData {
+          margin-top: 1rem;
+          .leftBox {
+            padding-left: 0;
+            .titleDes {
+              line-height: 1.368rem;
+            }
+          }
         }
       }
     }
@@ -1253,59 +1365,211 @@ export default {
   }
 }
 @media (min-width: 480px) and (max-width: 640px) {
+  .banner {
+    height: 12rem !important;
+    img {
+      height: 12rem !important;
+    }
+    .texts {
+      left: 2rem;
+      bottom: 2rem;
+      .text {
+        font-size: 1.5rem;
+      }
+    }
+  }
   .contents {
     .article-wrap {
       .articles {
         .pic {
-          height: 15rem !important;
+          height: auto !important;
+        }
+        .otherData {
+          margin-top: 1rem;
+          .leftBox {
+            padding-left: 0;
+            .titleDes {
+              line-height: 1.368rem;
             }
           }
         }
       }
+    }
+  }
+  .forms {
+    .switch {
+      width: 100%;
+      flex-direction: column;
+      margin-right: 0;
+      li {
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 10px;
+      }
+    }
+  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
+  .banner {
+    height: 12rem !important;
+    img {
+      height: 12rem !important;
+    }
+    .texts {
+      left: 2rem;
+      bottom: 2rem;
+      .text {
+        font-size: 1.5rem;
+      }
+    }
+  }
   .contents {
     .article-wrap {
       .articles {
         .pic {
-          height: 20rem !important;
+          height: auto !important;
+        }
+        .otherData {
+          margin-top: 1rem;
+          .leftBox {
+            padding-left: 0;
+            .titleDes {
+              line-height: 1.368rem;
+            }
           }
         }
       }
     }
+  }
+  .forms {
+    .switch {
+      width: 100%;
+      flex-direction: column;
+      margin-right: 0;
+      li {
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 10px;
+      }
+    }
+  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .banner {
-    height: 16rem;
+    height: 12rem !important;
     img {
-      height: 16rem !important;
+      height: 12rem !important;
+    }
+    .texts {
+      left: 2rem;
+      bottom: 2rem;
+      .text {
+        font-size: 1.5rem;
+      }
     }
   }
   .contents {
     .article-wrap {
       .articles {
         .pic {
-          height: 25rem !important;
+          height: auto !important;
+        }
+        .otherData {
+          margin-top: 1rem;
+          .leftBox {
+            padding-left: 0;
+            .titleDes {
+              line-height: 1.368rem;
+            }
+          }
+        }
+      }
+    }
   }
+  .forms {
+    .switch {
+      width: 100%;
+      flex-direction: column;
+      margin-right: 0;
+      li {
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 10px;
       }
     }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
+  .article {
+    .articles {
+     .pic {
+        width: 40%;
+        height: auto;
+      }
+    }
+  }
   .banner {
-    height: 18rem !important;
+    height: 14rem !important;
     img {
-      height: 18rem !important;
+      height: 14rem !important;
+    }
+    .texts {
+      left: 2rem;
+      bottom: 2rem;
+      .text {
+        font-size: 1.5rem;
+      }
     }
   }
   .contents {
     .article-wrap {
       .articles {
         .pic {
-          height: 30rem !important;
+          height: auto !important;
+        }
+        .otherData {
+          margin-top: 1rem;
+          .leftBox {
+            padding-left: 0;
+            .titleDes {
+              line-height: 1.368rem;
+            }
+          }
+        }
       }
     }
   }
+  .forms {
+    .switch {
+      width: 100%;
+      flex-direction: column;
+      margin-right: 0;
+      li {
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+@media (min-width: 1200px) and (max-width: 1300px) {
+  .article {
+    .articles {
+     .pic {
+        width: 40%;
+        height: auto;
+      }
+    }
+  }
+}
+@media (min-width: 1300px)  {
+  .article {
+    .articles {
+     .pic {
+        width: 40%;
+        height: auto;
+      }
+    }
   }
 }
 </style>

src/pages/deviceIntroBeam/index.vue

@@ -57,6 +57,25 @@ export default {
 .banner {
   background: url(../../assets/images/device/13.png) 0 0/100% 100% no-repeat;
   font-weight: bold;
+  height: 17.5rem;
+  padding: 10.68rem 0 0 16.15rem;
+  font-size: 2.16rem;
+}
+.block  {
+  padding: 3.85rem 0;
+  .inner {
+    h6 {
+      font-size: 1.76rem;
+    }
+    .en {
+      font-size: 1.76rem;
+      margin: 0px 0 2rem;
+    }
+    .sum {
+      margin-top: 3rem;
+      font-size: .96rem;
+    }
+  }
 }
 .beamBox {
   position: relative;
@@ -83,15 +102,16 @@ export default {
 .share {
   position: relative;
   .inner {
-    width: 1323px;
+    width: 1200px;
   }
   .left {
-    width: 547px;
-    margin-right: 66px;
+    // width: 34.1875rem;
+    flex-grow: 1;
+    margin-right: 4.125rem;
   }
   h6 {
     position: relative;
-    font-size: 2.4rem;
+    font-size: 1.92rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: bold;
     color: #333333;
@@ -112,15 +132,16 @@ export default {
     line-height: 44px;
   }
   .des {
-    margin-top: 25px;
-    font-size: 1rem;
+    margin-top: 1.25rem;
+    font-size: .88rem;
     color: #333;
-    line-height: 37px;
+    line-height: 1.85rem;
+    -webkit-line-clamp: inherit;
     overflow: visible;
   }
   .pic {
-    width: 610px;
-    height: 409px;
+    width: 30.5rem;
+    height: auto;
     margin-top: 10px;
     border-top-left-radius: 20px;
   }
@@ -128,21 +149,21 @@ export default {
 .intro {
   display: flex;
   align-items: center;
-  max-width: 1490px;
-  width: 90%;
-  height: 393px;
+  width: 77.5%;
+  height: 19.65rem;
   margin-bottom: 67px;
   .pic {
     width: 60%;
     height: 100%;
   }
   .des {
-    height: 100%;
-    padding: 57px 60px 20px 60px;
-    font-size: 1.2rem;
+    height: 19.65rem;
+    padding: 2.85rem 3rem 1rem 3rem;
+    font-size: .96rem;
     color: #fff;
-    line-height: 40px;
+    line-height: 2rem;
     background: #2E4984;
+    -webkit-line-clamp: 7;            //设定一共3行，超出的部分隐藏，并用省略号来表示
   }
 }
 .unit {
@@ -150,9 +171,9 @@ export default {
   padding-bottom: 60px;
   margin: 0 auto;
   h6 {
-    padding-left: 15px;
-    margin-bottom: 15px;
-    font-size: 1.1rem;
+    padding-left: .93rem;
+    margin-bottom: .93rem;
+    font-size: .88rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #2A2A2A;
@@ -206,44 +227,128 @@ export default {
 }
 @media (max-width: 320px) {
   .banner{
-    height: 13rem;
-    padding: 6rem 0 0 8rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .beamBox {
+    .imgText {
+      bottom: 1rem;
+      right: 1rem;
+    }
+  }
+  .intro {
+    width: 100%;
+    .des {
+      height: auto;
+    }
   }
 }
 @media (min-width: 320px) and (max-width: 375px)  {
   .banner{
-    height: 13rem;
-    padding: 8rem 0 0 10rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .beamBox {
+    .imgText {
+      bottom: 1rem;
+      right: 1rem;
+    }
+  }
+  .intro {
+    width: 100%;
+    .des {
+      height: auto;
     }
   }
+}
  @media (min-width: 375px) and (max-width: 480px)  {
   .banner{
-    height: 15rem;
-    padding: 10rem 0 0 14rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .beamBox {
+    .imgText {
+      bottom: 2rem;
+      right: 2rem;
+    }
+  }
+  .intro {
+    width: 100%;
+    .des {
+      height: auto;
+    }
   }
 }
 @media (min-width: 480px) and (max-width: 640px)  {
   .banner{
-    height: 17rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .beamBox {
+    .imgText {
+      bottom: 3rem;
+      right: 3rem;
+    }
+  }
+  .intro {
+    width: 100%;
+    .des {
+      height: auto;
+    }
   }
 }
 @media (min-width: 640px) and (max-width: 768px)  {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .beamBox {
+    .imgText {
+      bottom: 3rem;
+      right: 3rem;
+    }
+  }
+  .intro {
+    width: 100%;
+    .des {
+      height: auto;
+    }
   }
 }
 @media (min-width: 768px) and (max-width: 980px)  {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .beamBox {
+    .imgText {
+      bottom: 3rem;
+      right: 3rem;
+    }
+  }
+  .intro {
+    width: 100%;
+    .des {
+      height: auto;
+    }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px)  {
   .banner{
-    height: 25rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .beamBox {
+    .imgText {
+      bottom: 4rem;
+      right: 4rem;
+    }
+  }
+  .intro {
+    width: 100%;
+    .des {
+      height: auto;
+    }
   }
 }
 </style>

src/pages/deviceIntroLayout/index.vue

@@ -57,6 +57,21 @@ export default {
   background: url(../../assets/images/device/14.png)  no-repeat center;
   background-size:  100% 100%;
   font-weight: bold;
+  height: 17.5rem;
+  padding: 10.68rem 0 0 16.15rem;
+  font-size: 2.16rem;
+}
+.block  {
+  padding: 3.85rem 0;
+  .inner {
+    h6 {
+      font-size: 2.16rem;
+    }
+    .en {
+      font-size: 1.76rem;
+      margin: 0px 0 2rem;
+    }
+  }
 }
 .share {
   position: relative;
@@ -64,7 +79,11 @@ export default {
     width: 90%;
     max-width: 1323px;
     .textBox{
-      margin-top: 290px;
+      margin-top: 12.125rem;
+      position: absolute;
+      width: 85%;
+      right: 0;
+      top: 16.125rem;
       .left {
         flex-grow: 1;
       }
@@ -74,12 +93,12 @@ export default {
     }
   }
   .left {
-    width: 547px;
-    margin-right: 66px;
+    width: 34.187rem;
+    margin-right: 4.125rem;
   }
   h6 {
     position: relative;
-    font-size: 2.2rem;
+    font-size: 1.76rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #333333;
@@ -95,43 +114,49 @@ export default {
     position: absolute;
     left: 0;
     max-width: 1671px;
-    width: 80%;
-    padding: 32px 52px 25px 16%;
-    font-size: 1.2rem;
+    width: 85%;
+    padding: 1.6rem 2.9rem 1.6rem 16%;
+    font-size: 1.06rem;
     font-family: PingFangSC-Medium, PingFang SC;
     border-radius: 0 6rem 0 0;
     font-weight: 500;
     color: #FFFFFF;
-    line-height: 38px;
+    line-height: 2.375rem;
     background: url(../../assets/images/device/5.png) 0 0/cover no-repeat;
   }
   .des {
     margin-top: 25px;
-    font-size: 1rem;
+    font-size: .98rem;
+    -webkit-line-clamp: inherit;
     color: #333;
     line-height: 37px;
     overflow: visible;
   }
   .pic {
-    width: 710px;
-    height: 509px;
+    width: 44.375rem;
+    height: auto;
     border-top-left-radius: 20px;
   }
 }
 .intro {
   position: relative;
-  height: 794px;
-  margin-bottom: 37px;
+  height: 42.625rem;
+  margin-bottom: 2.3rem;
+  margin-top: 50rem;
+  width: 85%;
   .bg {
     position: absolute;
     top: 0;
     left: 0;
+    width: 65%;
+    height: 35.73rem;
   }
   .pic {
     position: absolute;
-    top: 67px;
-    left: 15%;
-    width: 74%;
+    top: 3.015rem;
+    left: 30%;
+    width: 71%;
+    height: 29.74rem;
   }
 }
 .unit {
@@ -139,9 +164,9 @@ export default {
   padding-bottom: 60px;
   margin: 0 auto;
   h6 {
-    padding-left: 15px;
-    margin-bottom: 15px;
-    font-size: 1.1rem;
+    padding-left: .93rem;
+    margin-bottom: .93rem;
+    font-size: .88rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #2A2A2A;
@@ -315,44 +340,191 @@ export default {
 
 @media (max-width: 320px) {
   .banner{
-    height: 13rem;
-    padding: 6rem 0 0 8rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .share {
+    .card {
+      font-size: .9rem;
+      line-height: 1.1rem;
+    }
+    .textBox {
+      top:23.125rem !important;
+      .des {
+        line-height: 1.1rem;
+      }
+    }
+  }
+  .intro {
+    margin-top: 41rem;
+    .bg {
+      height: 10rem;
+    }
+    .pic {
+      height: auto;
+    }
   }
 }
 @media (min-width: 320px) and (max-width: 375px) {
   .banner{
-    height: 15rem;
-    padding: 8rem 0 0 10rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .share {
+    .card {
+      font-size: .9rem;
+      line-height: 1.1rem;
+    }
+    .textBox {
+      top:23.125rem !important;
+      .des {
+        line-height: 1.1rem;
+      }
     }
   }
+  .intro {
+    margin-top: 41rem;
+    .bg {
+      height: 13rem;
+    }
+    .pic {
+      height: auto;
+    }
+  }
+}
  @media (min-width: 375px) and (max-width: 480px)  {
   .banner{
-    height: 17rem;
-    padding: 10rem 0 0 14rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .share {
+    .card {
+      font-size: .9rem;
+      line-height: 1.1rem;
+    }
+    .textBox {
+      top:23.125rem !important;
+      .des {
+        line-height: 1.1rem;
+      }
+    }
+  }
+  .intro {
+    margin-top: 43rem;
+    .bg {
+      height: 16rem;
+    }
+    .pic {
+      height: auto;
+    }
   }
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .share {
+    .card {
+      font-size: .9rem;
+      line-height: 1.1rem;
+    }
+    .textBox {
+      top:23.125rem !important;
+      .des {
+        line-height: 1.1rem;
+      }
+    }
+  }
+  .intro {
+    margin-top: 53rem;
+    .bg {
+      height: 22rem;
+    }
+    .pic {
+      height: auto;
+    }
   }
 }
 @media (min-width: 640px) and (max-width: 768px)  {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .share {
+    .card {
+      font-size: .9rem;
+      line-height: 1.1rem;
+    }
+    .textBox {
+      top:23.125rem !important;
+      .des {
+        line-height: 1.1rem;
+      }
+    }
+  }
+  .intro {
+    margin-top: 53rem;
+    .bg {
+      height: 26rem;
+    }
+    .pic {
+      height: auto;
+    }
   }
 }
 @media (min-width: 768px) and (max-width: 980px)  {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .share {
+    .card {
+      font-size: .9rem;
+      line-height: 1.1rem;
+    }
+    .textBox {
+      top:23.125rem !important;
+      .des {
+        line-height: 1.1rem;
+      }
+    }
+  }
+  .intro {
+    margin-top: 63rem;
+    .bg {
+      height: 30rem;
+    }
+    .pic {
+      height: auto;
+    }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .share {
+    .card {
+      font-size: .9rem;
+      line-height: 1.1rem;
+    }
+    .textBox {
+      top:23.125rem !important;
+      .des {
+        line-height: 1.1rem;
+      }
+    }
+  }
+  .intro {
+    margin-top: 73rem;
+    .bg {
+      height: 35rem;
+    }
+    .pic {
+      height: auto;
+    }
   }
 }
 </style>

src/pages/deviceIntroLinear/index.vue

@@ -72,17 +72,31 @@ export default {
 .banner {
   background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat;
   font-weight: bold;
+  height: 17.5rem;
+  padding: 10.68rem 0 0 16.15rem;
+  font-size: 2.16rem;
+}
+.block  {
+  padding: 3.85rem 0;
+  .inner {
+    h2 {
+      font-size: 1.76rem;
+    }
+    .en {
+      font-size: 1.76rem;
+      margin: 0px 0 2rem;
+    }
+  }
 }
-
 .history {
   .inner {
-    width: 90%;
+    width: 1200px;
     max-width: 1504px;
   }
 
   h2 {
     position: relative;
-    font-size: 2.2rem;
+    font-size: 1.76rem;
     font-family: PingFangSC-Semibold, PingFang SC;
     font-weight: 600;
     color: #1c1c1c;
@@ -99,7 +113,7 @@ export default {
   .texts {
     display: flex;
     justify-content: space-between;
-    padding: 82px 0 30px 38px;
+    padding: 5.125rem 0 1.875rem 2.375rem;
     margin-top: 20px;
     background: #1583ff;
     border-radius: 65px 100px 0px 0px;
@@ -157,7 +171,7 @@ export default {
 
   .bg {
     width: 50%;
-    margin: -142px -50px 0 0;
+    margin: -8.875rem -3.125rem 0 0;
     border-top-left-radius: 30px;
   }
 }
@@ -177,17 +191,17 @@ export default {
   }
 
   h5 {
-    margin-bottom: 15px;
-    font-size: 1rem;
+    margin-bottom: .93rem;
+    font-size: .88rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #2a2a2a;
   }
 
   h6 {
-    padding-left: 15px;
-    margin-bottom: 15px;
-    font-size: 1rem;
+    padding-left: .93rem;
+    margin-bottom: .93rem;
+    font-size: .88rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #2a2a2a;
@@ -257,44 +271,79 @@ export default {
 }
 @media (max-width: 320px) {
   .banner{
-    height: 13rem;
-    padding: 6rem 0 0 8rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .block  {
+    .inner {
+      width: 100%;
+    }
   }
 }
 @media (min-width: 320px) and (max-width: 375px) {
   .banner{
-    height: 13rem;
-    padding: 8rem 0 0 10rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
   }
+  .block  {
+    .inner {
+      width: 100%;
     }
+  }
+}
  @media (min-width: 375px) and (max-width: 480px) {
   .banner{
-    height: 15rem;
-    padding: 10rem 0 0 14rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .block  {
+    .inner {
+      width: 100%;
+    }
   }
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .banner{
-    height: 17rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .block  {
+    .inner {
+      width: 100%;
+    }
   }
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .block  {
+    .inner {
+      width: 100%;
+    }
   }
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .banner{
-    height: 19rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .block  {
+    .inner {
+      width: 100%;
+    }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .banner{
-    height: 25rem;
-    padding: 12rem 0 0 22rem;
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+  .block  {
+    .inner {
+      width: 100%;
+    }
   }
 }
 </style>

src/pages/edu/index.vue

@@ -88,17 +88,37 @@ export default {
 
 .wrap{
   /deep/ .el-carousel {
-    height: 30rem;
+    height: 21.6rem;
     .el-carousel__container{
-      height: 30rem;
+      height: 21.6rem;
     }
     img{
-      height: 30rem;
+      height: 21.6rem;
     }
   }
 }
+
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.15rem 0;
+  .inner {
+    .b-title  {
+      font-size: 2.25rem;
+      margin-bottom: 2.25rem;
+    }
+    .intro  {
+      margin-bottom: 2.25rem;
+    }
+   
+  }
+}
 .block-pic {
   transition: .3s;
+  height: auto;
   &.br {
     border-radius: 270px;
   }
@@ -118,16 +138,15 @@ export default {
     }
   }
   .pic {
-    width: 662px;
-    height: 753px;
+    width: 45%;
+    height: auto;
   }
   .texts {
     position: absolute;
-    top: 120px;
-    left: 44%;
+    top: 7.59rem;
+    left: 40%;
     width: 60%;
-    height: 455px;
-    padding: 60px 30px 30px 100px;
+    padding: 2.7rem 1.35rem ;
     background-color: #fff;
     overflow: hidden;
     transition: .3s;
@@ -136,15 +155,17 @@ export default {
     }
   }
   h6 {
-    font-size: 2.4rem;
+    font-size: 1.8rem;
     color: #3C3C3C;
   }
   .sub {
-    font-size: 1.2rem;
+    margin-top: 1.48rem;
+    font-size: 1.08rem;
     color: #1C1C1C;
     line-height: 33px;
   }
   .des {
+    margin-top: 1.2rem;
     font-size: 1rem;
     color: #3C3C3C;
     line-height: 32px;
@@ -215,38 +236,42 @@ export default {
 @media (max-width: 320px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 13rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 13rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1rem;
       line-height: 1.5rem;
-      left: 3rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block  {
     padding: 1.25rem 0;
     .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .block-pic {
-        height: 13rem;
+        height: auto;
       }
       .list {
         .wow  {
           .pic {
-            height: 13rem;
+            height: auto;
           }
           .texts {
             h6 {
@@ -272,52 +297,57 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 15rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1rem;
       line-height: 1.5rem;
-      left: 3rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block  {
     padding: 1.25rem 0;
     .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .block-pic {
-        height: 15rem;
+        height: auto;
       }
       .list {
         .wow  {
           .pic {
-            height: 15rem;
+            height: auto;
           }
           .texts {
+            top: 5rem;
             h6 {
               font-size: 1.5rem;
             }
             .sub {
-              font-size: 1.2rem;
-              line-height: 1.2rem;
-              margin-top: .8rem;
+              font-size: 1.05rem;
+              line-height: 1.05rem;
+              margin-top: .5rem;
             }
             .des {
-              font-size: 1.2rem;
-              line-height: 1.2rem;
-              margin-top: .8rem;
+              font-size: 1.05rem;
+              line-height: 1.05rem;
+              margin-top: .5rem;
 
             }
           }
@@ -329,38 +359,59 @@ export default {
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 20rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 20rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 20rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 20rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 1.5rem;
+      font-size: 1rem;
       line-height: 1.5rem;
-      left: 3rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block  {
     padding: 1.25rem 0;
     .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .block-pic {
-        height: 18rem;
+        height: auto;
       }
       .list {
         .wow  {
           .pic {
-            height: 20rem;
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            h6 {
+              font-size: 1.8rem;
+            }
+            .sub {
+              font-size: 1.25rem;
+              line-height: 1.25rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.25rem;
+              line-height: 1.25rem;
+              margin-top: .5rem;
+
+            }
           }
         }
       }
@@ -370,38 +421,60 @@ export default {
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 25rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 25rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 25rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 25rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 2.5rem;
-      line-height: 2.5rem;
-      left: 3rem;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block  {
     padding: 1.25rem 0;
     .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .block-pic {
-        height: 22rem;
+        height: auto;
       }
       .list {
         .wow  {
           .pic {
-            height: 22rem;
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            padding: 2rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
           }
         }
       }
@@ -411,38 +484,62 @@ export default {
 @media (min-width: 640px) and (max-width: 768px)  {
   .wrap  {
     /deep/ .el-carousel{
-      height: 28rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 28rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 28rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 28rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 2.5rem;
+      font-size: 1rem;
       line-height: 1.5rem;
-      left: 3rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block  {
     padding: 1.25rem 0;
     .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .block-pic {
-        height: 25rem;
+        height: auto;
       }
       .list {
         .wow  {
           .pic {
-            height: 22rem;
+            width: 50%;
+            height: auto;
+          }
+          .texts {
+            top: 2rem;
+            left: 30%;
+            padding: 1.5rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
           }
         }
       }
@@ -452,38 +549,62 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 32rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 32rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 32rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 32rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 2.5rem;
+      font-size: 1rem;
       line-height: 1.5rem;
-      left: 3rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block  {
     padding: 1.25rem 0;
     .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .block-pic {
-        height: 28rem;
+        height: auto;
       }
       .list {
         .wow  {
           .pic {
-            height: 22rem;
+            width: 50%;
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            left: 30%;
+            padding: 1.5rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
           }
         }
       }
@@ -493,38 +614,62 @@ export default {
 @media (min-width: 980px) and (max-width: 1200px)  {
   .wrap  {
     /deep/ .el-carousel{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 35rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 35rem !important;
+      height: 12rem !important;
     }
     .banner-name {
-      font-size: 2.5rem;
+      font-size: 1rem;
       line-height: 1.5rem;
-      left: 3rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block  {
     padding: 1.25rem 0;
     .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
       .b-title {
         font-size: 1.5rem;
       }
       .block-pic {
-        height: 32rem;
+        height: auto;
       }
       .list {
         .wow  {
           .pic {
-            height: 28rem;
+            width: 50%;
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            left: 30%;
+            padding: 1.5rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
           }
         }
       }

src/pages/exp/index.vue

@@ -95,12 +95,31 @@ export default {
 @import "../../styles/page/page.scss";
 .wrap{
   /deep/ .el-carousel {
-    height: 30rem;
+    height: 12.6rem;
     .el-carousel__container{
-      height: 30rem;
+      height: 12.6rem;
     }
     img{
-      height: 30rem;
+      height: 12.6rem;
+    }
+  }
+}
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+    left: 17%;
+    bottom: 20%;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+  .inner {
+    h6 {
+      font-size: 1.76rem;
+    }
+    .en {
+      font-size: 1.76rem;
+      margin: 0px 0 2rem;
     }
   }
 }
@@ -121,25 +140,26 @@ export default {
     line-height: 1;
   }
   .pic {
-    width: 80%;
-    height: 500px;
+    width: 64%;
+    height: auto;
     margin: 0 auto;
   }
   .des {
-    margin-top: 55px;
-    font-size: 1rem;
+    margin-top: 2.75rem;
+    font-size: .98rem;
     color: #333;
-    line-height: 34px;
-    overflow: visible;
+    line-height: 1.7rem;
   }
 }
 .list {
   display: flex;
   flex-wrap: wrap;
-  margin-top: 30px;
+  margin-top: 1.5rem;
+  width: 1200px;
+  margin: auto;
   li {
     position: relative;
-    height: 542px;
+    height: 20.1rem;
     overflow: hidden;
     &:hover {
       img {
@@ -156,7 +176,7 @@ export default {
     position: absolute;
     top: 192px;
     left: 60px;
-    font-size: 1.4rem;
+    font-size: 1.12rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #fff;
@@ -177,27 +197,8 @@ export default {
     width: 28%;
   }
 }
-@media (max-width: 1200px) {
-  body{
-    width: 100% !important;
-  }
-  .block {
-    .inner{
-      .des{
-        -webkit-line-clamp: inherit
-      }
-    }
-  }
-  .list {
-     display: block;
-     li {
-      width: 80% !important;
-      height: 400px;
-      margin: 10px auto;
-     }
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
+
+@media (min-width: 280px) and (max-width: 768px) {
   .wrap{
     /deep/ .el-carousel {
       height: 15rem;
@@ -240,8 +241,7 @@ export default {
       height: 13rem !important;
     }
     .banner-name {
-      left: 11rem;
-      top: 8rem;
+      padding: 7rem 0 0 1rem;
       font-size: 1.5rem;
     }
   }
@@ -252,14 +252,17 @@ export default {
       .text-center {
         .pic {
           width: 100%;
-          height: 13rem;
+          height: auto;
         }
       }
      
     }
   }
   .list {
+    width: 80%;
+    margin: 0 auto;
     li {
+      margin-top: 1rem;
       width: 100% !important;
     }
   }
@@ -267,22 +270,21 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap {
     /deep/ .el-carousel {
-      height: 15rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__item {
-      height: 15rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__container {
-      height: 15rem !important;
+      height: 13rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 13rem !important;
     }
     .banner-name {
-      left: 10rem;
-      top: 10rem;
+      padding: 7rem 0 0 1rem;
       font-size: 1.5rem;
     }
   }
@@ -293,37 +295,39 @@ export default {
       .text-center {
         .pic {
           width: 100%;
-          height: 13rem;
+          height: auto;
         }
       }
      
     }
   }
   .list {
+    width: 80%;
+    margin: 0 auto;
     li {
+      margin-top: 1rem;
       width: 100% !important;
     }
   }
- }
+}
  @media (min-width: 375px) and (max-width: 480px) {
   .wrap {
     /deep/ .el-carousel {
-      height: 20rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__item {
-      height: 20rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__container {
-      height: 20rem !important;
+      height: 13rem !important;
     }
   }
   .banner-item{
     img {
-      height: 20rem !important;
+      height: 13rem !important;
     }
     .banner-name {
-      left: 15rem;
-      top: 13rem;
+      padding: 7rem 0 0 1rem;
       font-size: 1.5rem;
     }
   }
@@ -334,14 +338,17 @@ export default {
       .text-center {
         .pic {
           width: 100%;
-          height: 18rem;
+          height: auto;
         }
       }
      
     }
   }
   .list {
+    width: 80%;
+    margin: 0 auto;
     li {
+      margin-top: 1rem;
       width: 100% !important;
     }
   }
@@ -349,22 +356,21 @@ export default {
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap {
     /deep/ .el-carousel {
-      height: 25rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__item {
-      height: 25rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__container {
-      height: 25rem !important;
+      height: 13rem !important;
     }
   }
   .banner-item{
     img {
-      height: 25rem !important;
+      height: 13rem !important;
     }
     .banner-name {
-      left: 22rem;
-      top: 15rem;
+      padding: 7rem 0 0 1rem;
       font-size: 1.5rem;
     }
   }
@@ -375,14 +381,17 @@ export default {
       .text-center {
         .pic {
           width: 100%;
-          height: 22rem;
+          height: auto;
         }
       }
      
     }
   }
   .list {
+    width: 80%;
+    margin: 0 auto;
     li {
+      margin-top: 1rem;
       width: 100% !important;
     }
   }
@@ -390,22 +399,21 @@ export default {
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap {
     /deep/ .el-carousel {
-      height: 25rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__item {
-      height: 25rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__container {
-      height: 25rem !important;
+      height: 13rem !important;
     }
   }
   .banner-item{
     img {
-      height: 25rem !important;
+      height: 13rem !important;
     }
     .banner-name {
-      left: 22rem;
-      top: 15rem;
+      padding: 7rem 0 0 1rem;
       font-size: 1.5rem;
     }
   }
@@ -416,14 +424,17 @@ export default {
       .text-center {
         .pic {
           width: 100%;
-          height: 22rem;
+          height: auto;
         }
       }
      
     }
   }
   .list {
+    width: 80%;
+    margin: 0 auto;
     li {
+      margin-top: 1rem;
       width: 100% !important;
     }
   }
@@ -431,23 +442,22 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap {
     /deep/ .el-carousel {
-      height: 28rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__item {
-      height: 28rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__container {
-      height: 28rem !important;
+      height: 13rem !important;
     }
   }
   .banner-item{
     img {
-      height: 28rem !important;
+      height: 13rem !important;
     }
     .banner-name {
-      left: 34rem;
-      top: 22rem;
-      font-size: 2.5rem;
+      padding: 7rem 0 0 1rem;
+      font-size: 1.5rem;
     }
   }
   .block  {
@@ -457,38 +467,42 @@ export default {
       .text-center {
         .pic {
           width: 100%;
-          height: 25rem;
+          height: auto;
         }
       }
      
     }
   }
   .list {
+    display: flex;
+    width: 100%;
     li {
-      width: 100% !important;
+      width: 25% ;
     }
   }
+  .item3 {
+    width: 50% !important;
+  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .wrap {
     /deep/ .el-carousel {
-      height: 32rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__item {
-      height: 32rem !important;
+      height: 13rem !important;
     }
     /deep/ .el-carousel__container {
-      height: 32rem !important;
+      height: 13rem !important;
     }
   }
   .banner-item{
     img {
-      height: 32rem !important;
+      height: 13rem !important;
     }
     .banner-name {
-      left: 39rem;
-      top: 22rem;
-      font-size: 2.5rem;
+      padding: 7rem 0 0 1rem;
+      font-size: 1.5rem;
     }
   }
   .block  {
@@ -498,11 +512,21 @@ export default {
       .text-center {
         .pic {
           width: 100%;
-          height: 32rem;
+          height: auto;
         }
       }
      
     }
   }
+  .list {
+    display: flex;
+    width: 100%;
+    li {
+      width: 25% ;
+    }
+  }
+  .item3 {
+    width: 50% !important;
+  }
 }
 </style>

src/pages/home/index.vue

@@ -177,15 +177,24 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .carousel{
-  height: 59.93rem;
+  height: 76.93rem;
   img{
     height: 100%;
   }
   /deep/.el-carousel__container{
-    height: 59.93rem ;
+    height: 76.93rem;
+  }
+}
+.block {
+  padding-top: 3.15rem;
+  .b-title {
+    font-size: 2.25rem;
+  }
+  .intro {
+    font-size: 1.35rem;
+    margin-bottom: 3.6rem;
   }
 }
-
 .card {
   display: flex;
   justify-content: space-between;
@@ -198,20 +207,20 @@ export default {
   }
   .pic {
     width: 100%;
-    height: 25rem;
+    height: auto;
   }
   .texts {
     padding-left: 1.375rem;
-    margin-top: 3.75rem;
+    margin-top: 3rem;
     border-left: 2px solid #DFE4E9;
   }
   h6 {
     margin-bottom: 1.56rem;
-    font-size: 1.71rem;
+    font-size: 1.368rem;
     color: #333;
   }
   .des {
-    font-size: 1.28rem;
+    font-size: 1.024rem;
     color: #222;
     line-height: 30px;
   }
@@ -288,20 +297,20 @@ export default {
   }
   .pic {
     width: 47%;
-    height: 29.06rem;
+    height: auto;
     transition: .3s;
   }
   .texts {
     width: 48%;
-    padding-top: 9.375rem;
+    padding-top: 8.5rem;
     transition: .3s;
   }
   h6 {
-    font-size: 2.75rem;
+    font-size: 1.8rem;
   }
   .des {
     margin: 20px 0 10px;
-    font-size: 1.28rem;
+    font-size: 1.2rem;
     color: #020202;
     line-height: 30px;
   }
@@ -331,17 +340,18 @@ export default {
   .num {
     margin-bottom: 10px;
     font-family: toppan;
-    font-size: 4.28rem;
+    font-size: 2.7rem;
     font-weight: 800;
     color: #035CE1;
     line-height: 49px;
   }
   .text {
-    font-size: 1.71rem;
+    font-size: 1.08rem;
+    margin-top: 1rem;
   }
 }
 .about {
-  padding: 4.81rem 0 12.375rem;
+  padding: 3.848rem 0 9.9rem;
   background: url(../../assets/images/about-bg.png)  no-repeat center center;
   background-size: 100% 100%;
   .line {
@@ -358,14 +368,14 @@ export default {
     }
   }
   .text {
-    font-size: 2.14rem;
+    font-size: 1.35rem;
     color: #fff;
   }
   .des {
     display: block;
     padding: 2.375rem 3.75rem;
-    margin-top: 5.25rem;
-    font-size: 2rem;
+    margin-top: 3.78rem;
+    font-size: 1.35rem;
     color: #fff;
     line-height: 42px;
     text-align: center;
@@ -519,15 +529,31 @@ export default {
     }
   }
   .block {
+    padding: 1rem 0;
     .inner {
+      .b-title {
+        font-size: 1.3rem;
+      }
+      .intro {
+        margin-bottom: 1rem;
+        font-size: .95rem;
+        line-height: 1rem;
+      }
       .card {
         li {
           .pic {
-            height: 13rem;
+            height: auto;
           }
           .texts {
             margin-top: 1.2rem;
-            
+            h6{
+               font-size: 1.2rem;
+               margin-bottom: 1rem;
+            }
+            img {
+              width: 3.77rem;
+              height: 3.77rem;
+            }
           }
         }
       }
@@ -542,36 +568,54 @@ export default {
       .people {
         li {
           .pic {
-            height: 13rem;
+            height: auto;
           }
+          .texts {
+            h6 {
+              font-size: 1.5rem;
             }
           }
         }
       }
      
+    }
+  }
+  .about {
+    .inner {
+      .des {
+        line-height: 1.2rem;
+      }
+    }
+  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap {
     /deep/ .el-carousel{
-      height: 18rem;
+      height: 15rem;
     }
     /deep/ .el-carousel__container{
-      height: 18rem;
+      height: 15rem;
     }
     /deep/ .el-carousel__item {
-      height: 18rem;
+      height: 15rem;
       img{
-        height: 18rem;
+        height: 15rem;
       }
       
     }
   }
   .block {
+    padding: 1rem 0;
     .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: .95rem;
+        line-height: 1rem;
+      }
       .card {
         li {
           .pic {
-            height: 13rem;
+            height: auto;
           }
           .texts {
             margin-top: 1.2rem;
@@ -590,36 +634,48 @@ export default {
       .people {
         li {
           .pic {
-            height: 15rem;
+            height: auto;
           }
         }
       }
     }
   }
-  
+  .about {
+    .inner {
+      .des {
+        line-height: 1.5rem;
+      }
+    }
+  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap {
     /deep/ .el-carousel{
-      height: 20rem;
+      height: 15rem;
     }
     /deep/ .el-carousel__container{
-      height: 20rem;
+      height: 15rem;
     }
     /deep/ .el-carousel__item {
-      height: 20rem;
+      height: 15rem;
       img{
-        height: 20rem;
+        height: 15rem;
       }
       
     }
   }
   .block {
+    padding: 1rem 0;
     .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: .95rem;
+        line-height: 1rem;
+      }
       .card {
         li {
           .pic {
-            height: 13rem;
+            height: auto;
           }
           .texts {
             margin-top: 1.2rem;
@@ -638,36 +694,48 @@ export default {
       .people {
         li {
           .pic {
-            height: 15rem;
+            height: auto;
           }
         }
       }
     }
   }
-  
+  .about {
+    .inner {
+      .des {
+        line-height: 1.5rem;
+      }
+    }
+  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap {
     /deep/ .el-carousel{
-      height: 20rem;
+      height: 18rem;
     }
     /deep/ .el-carousel__container{
-      height: 20rem;
+      height: 18rem;
     }
     /deep/ .el-carousel__item {
-      height: 20rem;
+      height: 18rem;
       img{
-        height: 20rem;
+        height: 18rem;
       }
       
     }
   }
   .block {
+    padding: 1rem 0;
     .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: .95rem;
+        line-height: 1rem;
+      }
       .card {
         li {
           .pic {
-            height: 18rem;
+            height: auto;
           }
           .texts {
             margin-top: 1.2rem;
@@ -679,43 +747,53 @@ export default {
         li {
           padding: 1.2rem;
           img{
-            width: 10rem;
+            width: 8rem;
           }
         }
       }
       .people {
         li {
           .pic {
-            height: 20rem;
+            height: auto;
           }
         }
       }
+      .about {
+        .des {
+          line-height: 1.5rem;
+        }
+      }
     }
   }
-  
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap {
     /deep/ .el-carousel{
-      height: 25rem;
+      height: 20rem;
     }
     /deep/ .el-carousel__container{
-      height: 25rem;
+      height: 20rem;
     }
     /deep/ .el-carousel__item {
-      height: 25rem;
+      height: 20rem;
       img{
-        height: 25rem;
+        height: 20rem;
       }
       
     }
   }
   .block {
+    padding: 1rem 0;
     .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: .95rem;
+        line-height: 1rem;
+      }
       .card {
         li {
           .pic {
-            height: 22rem;
+            height: auto;
           }
           .texts {
             margin-top: 1.2rem;
@@ -727,43 +805,62 @@ export default {
         li {
           padding: 1.2rem;
           img{
-            width: 10rem;
+            width: 8rem;
           }
         }
       }
       .people {
         li {
           .pic {
-            height: 25rem;
+            height: auto;
           }
         }
       }
+      .about {
+        .des {
+          line-height: 1.2rem;
+        }
+      }
+      .stat {
+        flex-direction: row;
+        li {
+          width: 30%;
+        }
+      }
     }
   }
-  
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap {
     /deep/ .el-carousel{
-      height: 27rem;
+      height: 22rem;
     }
     /deep/ .el-carousel__container{
-      height: 27rem;
+      height: 22rem;
     }
     /deep/ .el-carousel__item {
-      height: 27rem;
+      height: 22rem;
       img{
-        height: 27rem;
+        height: 22rem;
       }
       
     }
   }
   .block {
+    padding: 1rem 0;
     .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: .95rem;
+        line-height: 1rem;
+      }
       .card {
+        flex-direction: row;
         li {
+          
+          width: 47%;
           .pic {
-            height: 22rem;
+            height: auto;
           }
           .texts {
             margin-top: 1.2rem;
@@ -775,42 +872,70 @@ export default {
         li {
           padding: 1.2rem;
           img{
-            width: 10rem;
+            width: 8rem;
           }
         }
       }
       .people {
         li {
+          flex-direction: row;
+          &:nth-child(2) {
+            flex-direction: row-reverse !important;
+          }
           .pic {
-            height: 30rem;
+            width: 47%;
+            height: auto;
+          }
+          .texts {
+            width: 48%;
           }
         }
       }
+      .about {
+        .des {
+          line-height: 1.2rem;
+        }
+      }
+      .stat {
+        flex-direction: row;
+        li {
+          width: 30%;
+        }
+      }
     }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .wrap {
     /deep/ .el-carousel{
-      height: 30rem;
+      height: 25rem;
     }
     /deep/ .el-carousel__container{
-      height: 30rem;
+      height: 25rem;
     }
     /deep/ .el-carousel__item {
-      height: 30rem;
+      height: 25rem;
       img{
-        height: 30rem;
+        height: 25rem;
       }
       
     }
   }
   .block {
+    padding: 1rem 0;
     .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: .95rem;
+        line-height: 1rem;
+      }
       .card {
+        flex-direction: row;
         li {
+          
+          width: 47%;
           .pic {
-            height: 28rem;
+            height: auto;
           }
           .texts {
             margin-top: 1.2rem;
@@ -822,15 +947,33 @@ export default {
         li {
           padding: 1.2rem;
           img{
-            width: 10rem;
+            width: 8rem;
           }
         }
       }
       .people {
         li {
+          flex-direction: row;
+          &:nth-child(2) {
+            flex-direction: row-reverse !important;
+          }
           .pic {
-            height: 35rem;
+            width: 47%;
+            height: auto;
           }
+          .texts {
+            width: 48%;
+          }
+        }
+      }
+      .about {
+        .des {
+        }
+      }
+      .stat {
+        flex-direction: row;
+        li {
+          width: 30%;
         }
       }
     }

src/pages/newsPress/index.vue

@@ -102,67 +102,78 @@ export default {
 @import "../../styles/page/page.scss";
 .wrap{
   /deep/ .el-carousel {
-    height: 30rem;
+    height: 24rem;
     .el-carousel__container{
-      height: 30rem;
+      height: 24rem;
     }
     img{
-      height: 30rem;
+      height: 24rem;
     }
   }
 }
+.banner-item {
+  .banner-name {
+    font-size: 1.6rem;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+}
 .inner {
+  /deep/ .el-breadcrumb__item {
+    font-size: 1.5rem;
+  }
   padding-top: 35px;
 }
 .list {
-  margin: 40px 0;
+  margin: 2rem 0;
   li {
     position: relative;
     &:nth-child(even) {
       text-align: right;
       .texts {
         left: 0;
-        padding: 60px 120px 30px 30px;
+        padding: 3rem 6rem 1.5rem 1.5rem;
         text-align: left;
       }
     }
   }
   .pic {
     width: 47%;
-    height: 730px;
+    height: auto;
   }
   .texts {
     position: absolute;
-    top: 120px;
-    right: -40px;
+    top: 6rem;
+    right: -2rem;
     width: 61%;
-    height: 440px;
-    padding: 60px 30px 30px 100px;
+    // height: 440px;
+    padding: 3rem 1.5rem 1.5rem 5rem;
     background: rgba(247, 247, 247, .72);
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
   }
   h6 {
-    font-size: 40px;
+    font-size: 2rem;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
     color: #3C3C3C;
   }
   .sub {
-    margin: 20px 0;
-    font-size: 24px;
+    margin: 1rem 0;
+    font-size: 1.2rem;
     font-weight: 600;
     font-family: PingFangSC-Semibold, PingFang SC;
     color: #1C1C1C;
     line-height: 33px;
   }
   .des {
-    margin-bottom: 20px;
-    font-size: 20px;
+    margin-bottom: 1rem;
+    font-size: 1rem;
     color: #3C3C3C;
-    line-height: 32px;
+    line-height: 1.6rem;
+  }
+  img {
+    width: 3.3rem;
+    height: 3.3rem;
   }
 }
 @media (max-width: 1520px) {
@@ -259,30 +270,35 @@ export default {
 @media (max-width: 320px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 13rem !important;
+      height: 12rem !important;
     }
   }
+  
   .banner-item{
     img {
-      height: 13rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 15rem !important;
+          height: auto !important;
         }
         .texts  {
           top: 1rem;
@@ -307,42 +323,46 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 15rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 15rem !important;
+          height: auto !important;
         }
         .texts  {
-          top: 1rem;
+          top: 4rem;
           h6 {
-            font-size: 1rem !important;
+            font-size: 1.5rem !important;
           }
           .sub{
-             font-size: .85rem;
+             font-size: 1.2rem;
           }
           .des {
-            font-size: .85rem;
-            line-height: .85rem;
+            font-size: 1rem;
+            line-height: 1rem;
           }
           img {
             width: 2rem;height: 2rem;
@@ -355,42 +375,46 @@ export default {
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 18rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 18rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 18rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 18rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 18rem !important;
+          height: auto !important;
         }
         .texts  {
-          top: 2.5rem;
+          top: 4rem;
           h6 {
-            font-size: 1rem !important;
+            font-size: 1.5rem !important;
           }
           .sub{
-             font-size: .85rem;
+             font-size: 1.2rem;
           }
           .des {
-            font-size: .85rem;
-            line-height: .85rem;
+            font-size: 1rem;
+            line-height: 1rem;
           }
           img {
             width: 2rem;height: 2rem;
@@ -403,45 +427,50 @@ export default {
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 22rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 22rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 22rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 22rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 22rem !important;
+          width: 47%;
+          height: auto !important;
         }
         .texts  {
-          top: 2.5rem;
+          top: 2rem;
           h6 {
-            font-size: 1.8rem !important;
+            font-size: 1.5rem !important;
           }
           .sub{
-             font-size: 1.3rem;
+             font-size: 1.2rem;
           }
           .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
+            font-size: 1rem;
+            line-height: 1rem;
           }
           img {
-            width: 4rem;height: 4rem;
+            width: 2rem;height: 2rem;
           }
         }
       }
@@ -451,45 +480,47 @@ export default {
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 28rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 28rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 28rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 28rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
     .list {
       li {
         .pic {
-          height: 28rem !important;
+          width: 47%;
+          height: auto !important;
         }
         .texts  {
-          top: 3rem;
+          top: 4rem;
           h6 {
             font-size: 2rem !important;
           }
           .sub{
-             font-size: 1.3rem;
+             font-size: 1.5rem;
           }
           .des {
-            font-size: 1.8rem;
-            line-height: 1.8rem;
+            font-size: 1.3rem;
+            line-height: 1.3rem;
           }
           img {
-            width: 5rem;height: 5rem;
+            width: 2rem;height: 2rem;
           }
         }
       }
@@ -499,32 +530,48 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 32rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 32rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 32rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 32rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
     .list {
       li {
         .pic {
-          height: 32rem !important;
+          width: 47%;
+          height: auto !important;
         }
         .texts  {
+          top: 6rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
         }
       }
     }
@@ -533,30 +580,48 @@ export default {
 @media (min-width: 980px) and (max-width: 1200px)  {
   .wrap  {
     /deep/ .el-carousel{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 35rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 35rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
     .list {
       li {
         .pic {
-          height: 35rem !important;
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 8rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
         }
       }
     }

src/pages/newsProcurement/index.vue

@@ -102,63 +102,78 @@ export default {
 @import "../../styles/page/page.scss";
 .wrap{
   /deep/ .el-carousel {
-    height: 30rem;
+    height: 24rem;
     .el-carousel__container{
-      height: 30rem;
+      height: 24rem;
     }
     img{
-      height: 30rem;
+      height: 24rem;
     }
   }
 }
+.banner-item {
+  .banner-name {
+    font-size: 1.6rem;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+}
 .inner {
   padding-top: 35px;
+  /deep/ .el-breadcrumb__item {
+    font-size: 1.5rem;
+  }
 }
 .list {
-  margin: 40px 0;
+  margin: 2rem 0;
   li {
     position: relative;
     &:nth-child(even) {
       text-align: right;
       .texts {
         left: 0;
-        padding: 60px 120px 30px 30px;
+        padding: 3rem 6rem 1.5rem 1.5rem;
         text-align: left;
       }
     }
   }
   .pic {
     width: 47%;
-    height: 730px;
+    height: auto;
   }
   .texts {
     position: absolute;
-    top: 120px;
-    right: -40px;
+    top: 6rem;
+    right: -2rem;
     width: 61%;
-    height: 440px;
-    padding: 60px 30px 30px 100px;
+    // height: 440px;
+    padding: 3rem 1.5rem 1.5rem 5rem;
     background: rgba(247, 247, 247, .72);
   }
   h6 {
-    font-size: 40px;
+    font-size: 2rem;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
     color: #3C3C3C;
   }
   .sub {
-    margin: 20px 0;
-    font-size: 24px;
+    margin: 1rem 0;
+    font-size: 1.2rem;
     font-weight: 600;
     font-family: PingFangSC-Semibold, PingFang SC;
     color: #1C1C1C;
     line-height: 33px;
   }
   .des {
-    margin-bottom: 20px;
-    font-size: 20px;
+    margin-bottom: 1rem;
+    font-size: 1rem;
     color: #3C3C3C;
-    line-height: 32px;
+    line-height: 1.6rem;
+  }
+  img {
+    width: 3.3rem;
+    height: 3.3rem;
   }
 }
 @media (max-width: 1520px) {
@@ -256,30 +271,35 @@ export default {
 @media (max-width: 320px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 13rem !important;
+      height: 12rem !important;
     }
   }
+  
   .banner-item{
     img {
-      height: 13rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 15rem !important;
+          height: auto !important;
         }
         .texts  {
           top: 1rem;
@@ -304,42 +324,46 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 15rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 15rem !important;
+          height: auto !important;
         }
         .texts  {
-          top: 1rem;
+          top: 4rem;
           h6 {
-            font-size: 1rem !important;
+            font-size: 1.5rem !important;
           }
           .sub{
-             font-size: .85rem;
+             font-size: 1.2rem;
           }
           .des {
-            font-size: .85rem;
-            line-height: .85rem;
+            font-size: 1rem;
+            line-height: 1rem;
           }
           img {
             width: 2rem;height: 2rem;
@@ -352,42 +376,46 @@ export default {
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 18rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 18rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 18rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 18rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 18rem !important;
+          height: auto !important;
         }
         .texts  {
-          top: 2.5rem;
+          top: 4rem;
           h6 {
-            font-size: 1rem !important;
+            font-size: 1.5rem !important;
           }
           .sub{
-             font-size: .85rem;
+             font-size: 1.2rem;
           }
           .des {
-            font-size: .85rem;
-            line-height: .85rem;
+            font-size: 1rem;
+            line-height: 1rem;
           }
           img {
             width: 2rem;height: 2rem;
@@ -400,45 +428,50 @@ export default {
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 22rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 22rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 22rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 22rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
     .list {
       li {
         .pic {
-          height: 22rem !important;
+          width: 47%;
+          height: auto !important;
         }
         .texts  {
-          top: 2.5rem;
+          top: 2rem;
           h6 {
-            font-size: 1.8rem !important;
+            font-size: 1.5rem !important;
           }
           .sub{
-             font-size: 1.3rem;
+             font-size: 1.2rem;
           }
           .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
+            font-size: 1rem;
+            line-height: 1rem;
           }
           img {
-            width: 4rem;height: 4rem;
+            width: 2rem;height: 2rem;
           }
         }
       }
@@ -448,45 +481,47 @@ export default {
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 28rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 28rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 28rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 28rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
     .list {
       li {
         .pic {
-          height: 28rem !important;
+          width: 47%;
+          height: auto !important;
         }
         .texts  {
-          top: 3rem;
+          top: 4rem;
           h6 {
             font-size: 2rem !important;
           }
           .sub{
-             font-size: 1.3rem;
+             font-size: 1.5rem;
           }
           .des {
-            font-size: 1.8rem;
-            line-height: 1.8rem;
+            font-size: 1.3rem;
+            line-height: 1.3rem;
           }
           img {
-            width: 5rem;height: 5rem;
+            width: 2rem;height: 2rem;
           }
         }
       }
@@ -496,32 +531,48 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 32rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 32rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 32rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 32rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
     .list {
       li {
         .pic {
-          height: 32rem !important;
+          width: 47%;
+          height: auto !important;
         }
         .texts  {
+          top: 6rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
         }
       }
     }
@@ -530,30 +581,48 @@ export default {
 @media (min-width: 980px) and (max-width: 1200px)  {
   .wrap  {
     /deep/ .el-carousel{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/  .el-carousel__item {
-      height: 35rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 35rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .inner {
     .list {
       li {
         .pic {
-          height: 35rem !important;
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 8rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
         }
       }
     }

src/pages/overviewDevHistory/index.vue

@@ -75,14 +75,26 @@ export default {
   background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat,
               url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat;
 }
+.single-banner {
+  .banner-img {
+    height: 24rem;
+  }
+  .texts {
+    top: auto !important;
+    bottom: 2rem;
+    h6 {
+      font-size: 2.16rem
+    }
+  }
+}
 .tabs {
   display: flex;
   justify-content: center;
   box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
   li {
-    padding: 25px 19px;
-    margin: 0 10px;
-    font-size: 1.1rem;
+    padding: 1.25rem .95rem;
+    margin: 0 .5rem;
+    font-size: 1.05rem;
     color: #333;
     border-bottom: 4px solid transparent;
     text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@@ -94,16 +106,17 @@ export default {
   }
 }
 .history {
+  padding: 3.85rem 0;
   h2 {
     position: relative;
-    font-size: 2.2rem;
+    font-size: 1.75rem;
     font-family: PingFangSC-Semibold, PingFang SC;
     font-weight: 600;
     color: #1C1C1C;
   }
   .en {
-    margin: -15px 0 40px;
-    font-size: 2.2rem;
+    margin: 0 0 2rem;
+    font-size: 1.75rem;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
     color: #E3E3E3;
@@ -113,18 +126,18 @@ export default {
   display: flex;
   justify-content: center;
   .time {
-    width: 200px;
-    padding-right: 10px;
-    margin-right: 20px;
+    width: 12.5rem;
+    padding-right: .625rem;
+    margin-right: 1.25rem;
+    flex-shrink: 1;
     border-right: 1px solid #ddd;
     li {
       display: flex;
-      justify-content: flex-end;
+      justify-content: center;
       align-items: center;
-      width: 190px;
-      padding-right: 45px;
-      line-height: 60px;
-      font-size: 1.4rem;
+      padding-right: 2.25rem;
+      line-height: 3rem;
+      font-size: 1.32rem;
       font-weight: 600;
       font-family: SFProDisplay-Semibold, SFProDisplay;
       color: #666;
@@ -145,11 +158,12 @@ export default {
     }
   }
   .right {
-    width: 1000px;
+    // width: 1000px;
+    flex-grow: 1;
   }
   .year {
-    margin: 0 0 20px 20px;
-    font-size: 3.8rem;
+    margin: 0 0 1rem 1rem;
+    font-size: 2.35rem;
     font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
     font-weight: 800;
     color: #1A81F4;
@@ -160,21 +174,21 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 30px;
+      padding: 1.5rem;
       border-bottom: 1px solid #ddd;
     }
     .texts {
-      width: 500px;
+      width: 31.25rem;
     }
     .date {
-      margin-bottom: 15px;
-      font-size: 1.2rem;
+      margin-bottom: .75rem;
+      font-size: 1.26rem;
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
       color: #333;
     }
     .text {
-      font-size: 1.1rem;
+      font-size: 1.08rem;
       color: #333;
       @include mul-ellipsis(3);
       &:before {
@@ -188,8 +202,8 @@ export default {
       }
     }
     .pic {
-      width: 350px;
-      height: 195px;
+      width: 17.5rem;
+      height: 9.75rem;
     }
   }
 }
@@ -264,18 +278,24 @@ export default {
 @media (max-width: 320px) {
   .wrap {
     .banner-img {
-        height: 15rem;
+        height: 12rem;
       }
     .single-banner {
       .texts {
-        top: 11rem !important;
-        left: 8rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .block  {
     .inner {
       .event {
@@ -284,7 +304,7 @@ export default {
             li {
               .pic {
                 width: 100%;
-                height: 13rem;
+                height: 9.75rem;
               }
             }
           }
@@ -296,18 +316,24 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap {
     .banner-img {
-        height: 15rem;
+        height: 12rem;
       }
     .single-banner {
       .texts {
-        top: 11rem !important;
-        left: 10rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .block  {
     .inner {
       .event {
@@ -316,7 +342,7 @@ export default {
             li {
               .pic {
                 width: 100%;
-                height: 15rem;
+                height: 9.75rem;
               }
             }
           }
@@ -324,24 +350,29 @@ export default {
       }
     }
   }
-
 }
 
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 18rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 14rem !important;
-        left: 14rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .block  {
     .inner {
       .event {
@@ -350,7 +381,7 @@ export default {
             li {
               .pic {
                 width: 100%;
-                height: 18rem;
+                height: 9.75rem;
               }
             }
           }
@@ -358,23 +389,28 @@ export default {
       }
     }
   }
-
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 18rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 13rem !important;
-        left: 20rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .block  {
     .inner {
       .event {
@@ -383,7 +419,7 @@ export default {
             li {
               .pic {
                 width: 100%;
-                height: 22rem;
+                height: 9.75rem;
               }
             }
           }
@@ -391,23 +427,28 @@ export default {
       }
     }
   }
- 
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 28rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 20rem !important;
-        left: 30rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 1.8rem;
+          font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .block  {
     .inner {
       .event {
@@ -416,7 +457,7 @@ export default {
             li {
               .pic {
                 width: 100%;
-                height: 25rem;
+                height: 11.75rem;
               }
             }
           }
@@ -424,21 +465,26 @@ export default {
       }
     }
   }
-
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 36rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 25rem !important;
-        left: 38rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 2rem;
+          font-size: 1.5rem;
+        }
+      }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
     }
   }
   .block  {
@@ -449,7 +495,7 @@ export default {
             li {
               .pic {
                 width: 100%;
-                height: 28rem;
+                height: auto
               }
             }
           }
@@ -457,23 +503,28 @@ export default {
       }
     }
   }
-
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 40rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 25rem !important;
-        left: 50rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 1.8rem;
+          font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .block  {
     .inner {
       .event {
@@ -482,7 +533,7 @@ export default {
             li {
               .pic {
                 width: 100%;
-                height: 31rem;
+                height: auto
               }
             }
           }
@@ -490,6 +541,5 @@ export default {
       }
     }
   }
-
 }
 </style>

src/pages/overviewIntro/index.vue

@@ -61,14 +61,26 @@ export default {
 .wrap {
   background: url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
 }
+.single-banner {
+  .banner-img {
+    height: 24rem;
+  }
+  .texts {
+    top: auto !important;
+    bottom: 2rem;
+    h6 {
+      font-size: 2.16rem
+    }
+  }
+}
 .tabs {
   display: flex;
   justify-content: center;
   box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
   li {
-    padding: 25px 19px;
-    margin: 0 10px;
-    font-size: 1.1rem;
+    padding: 1.25rem .95rem;
+    margin: 0 .5rem;
+    font-size: 1.05rem;
     color: #333;
     border-bottom: 4px solid transparent;
     text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@@ -80,38 +92,39 @@ export default {
   }
 }
 .tab-content {
-  padding-top: 150px;
+  padding-top: 3.85rem;
   .intro {
     display: flex;
-    margin-bottom: 110px;
+    margin-bottom: 5.5rem;
     .pic {
       width: 40%;
-      margin-right: 50px;
+      margin-right: 2.5rem;
     }
     .right {
       width: 40%;
     }
     h6 {
       position: relative;
-      font-size: 1.2rem;
+      font-size: 1.36rem;
       color: #333;
     }
     .title-bg {
       position: absolute;
-      top: -40px;
-      left: -20px;
+      top: -2rem;
+      left: -1rem;
     }
     .text {
-      margin-top: 40px;
-      font-size: 1rem;
+      margin-top: 2rem;
+      font-size: .99rem;
       color: #020202;
       line-height: 2;
     }
   }
   .intro-bg {
     position: relative;
-    height: 275px;
-    padding-top: 90px;
+    height: auto;
+    padding-top: 4.5rem;
+    padding-bottom: 2rem;
     color: #fff;
     text-align: center;
     background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
@@ -128,13 +141,13 @@ export default {
       position: relative;
     }
     h6 {
-      margin-bottom: 30px;
-      font-size: 2rem;
+      margin-bottom: 1.5rem;
+      font-size: 1.6rem;
       font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
       font-weight: 800;
     }
     .des {
-      font-size: 1.5rem;
+      font-size: 1.2rem;
     }
   }
 }
@@ -184,100 +197,142 @@ export default {
 @media (max-width: 320px) {
   .single-banner {
     .banner-img {
-      height: 13rem;
+      height: 12rem;
     }
     .texts {
-      top: 9rem !important;
-      left: 8rem !important;
+      bottom: 2rem !important;
+      left: 2rem !important;
       .banner-title {
         font-size: 1.5rem;
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
   .single-banner {
     .banner-img {
-      height: 15rem;
+      height: 12rem;
     }
     .texts {
-      top: 11rem !important;
-    left: 10rem !important;
+      bottom: 2rem !important;
+      left: 2rem !important;
       .banner-title {
         font-size: 1.5rem;
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 
 @media (min-width: 375px) and (max-width: 480px) {
   .single-banner {
     .banner-img {
-      height: 18rem;
+      height: 12rem;
     }
     .texts {
-      top: 14rem !important;
-    left: 13rem !important;
+      bottom: 2rem !important;
+      left: 2rem !important;
       .banner-title {
         font-size: 1.5rem;
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .single-banner {
     .banner-img {
-      height: 22rem;
+      height: 12rem;
     }
     .texts {
-      top: 18rem !important;
-      left: 20rem !important;
+      bottom: 2rem !important;
+      left: 2rem !important;
       .banner-title {
         font-size: 1.5rem;
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .single-banner {
     .banner-img {
-      height: 25rem;
+      height: 12rem;
     }
     .texts {
-      top: 21rem !important;
-      left: 30rem !important;
+      bottom: 2rem !important;
+      left: 2rem !important;
       .banner-title {
         font-size: 1.5rem;
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .single-banner {
     .banner-img {
-      height: 28rem;
+      height: 12rem;
     }
     .texts {
-      top: 21rem !important;
-      left: 37rem !important;
+      bottom: 2rem !important;
+      left: 2rem !important;
       .banner-title {
         font-size: 1.5rem;
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .single-banner {
     .banner-img {
-      height: 32rem;
+      height: 12rem;
     }
     .texts {
-      top: 21rem !important;
-      left: 37rem !important;
+      bottom: 2rem !important;
+      left: 2rem !important;
       .banner-title {
         font-size: 1.5rem;
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 </style>

src/pages/overviewLocation/index.vue

@@ -46,14 +46,26 @@ export default {
   background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat,
               url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
 }
+.single-banner {
+  .banner-img {
+    height: 24rem;
+  }
+  .texts {
+    top: auto !important;
+    bottom: 2rem;
+    h6 {
+      font-size: 2.16rem
+    }
+  }
+}
 .tabs {
   display: flex;
   justify-content: center;
   box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
   li {
-    padding: 25px 19px;
-    margin: 0 10px;
-    font-size: 1.1rem;
+    padding: 1.25rem .95rem;
+    margin: 0 .5rem;
+    font-size: 1.05rem;
     color: #333;
     border-bottom: 4px solid transparent;
     text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@@ -65,8 +77,8 @@ export default {
   }
 }
 .tab-content {
-  width: 1000px;
-  padding: 77px 0;
+  width: 50rem;
+  padding: 3.85rem 0;
   margin: 0 auto;
   span {
     font-size: 1.35rem;
@@ -77,12 +89,12 @@ export default {
 }
 .video {
   width: 100%;
-  margin-bottom: 55px;
+  margin-bottom: 2.75rem;
 }
 .text {
-  font-size: 18px;
+  font-size: .9rem;
   color: #020202;
-  line-height: 32px;
+  line-height: 1.6rem;
 }
 @media (max-width: 1200px) {
   .tabs {
@@ -118,120 +130,156 @@ export default {
 @media (max-width: 320px) {
   .wrap {
     .banner-img {
-        height: 15rem;
+        height: 12rem;
       }
     .single-banner {
       .texts {
-        top: 11rem !important;
-        left: 8rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 320px) and (max-width: 375px)  {
   .wrap {
     .banner-img {
-        height: 15rem;
+        height: 12rem;
       }
     .single-banner {
       .texts {
-        top: 11rem !important;
-        left: 10rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
-
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 
 @media (min-width: 375px) and (max-width: 480px)  {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 18rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 14rem !important;
-        left: 13rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
-
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 480px) and (max-width: 640px)  {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 18rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 12rem !important;
-        left: 20rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
- 
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 640px) and (max-width: 768px)  {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 28rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 20rem !important;
-        left: 30rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 1.8rem;
+          font-size: 1.5rem;
         }
       }
     }
   }
-
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 768px) and (max-width: 980px)  {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 36rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 25rem !important;
-        left: 38rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 2rem;
+          font-size: 1.5rem;
         }
       }
     }
   }
-
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 @media (min-width: 980px) and (max-width: 1200px)  {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 40rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 25rem !important;
-        left: 50rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 1.8rem;
+          font-size: 1.5rem;
         }
       }
     }
   }
-
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
 }
 </style>

src/pages/overviewTrailer/index.vue

@@ -52,14 +52,27 @@ export default {
   background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat,
               url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
 }
+
+.single-banner {
+  .banner-img {
+    height: 24rem;
+  }
+  .texts {
+    top: auto !important;
+    bottom: 2rem;
+    h6 {
+      font-size: 2.16rem
+    }
+  }
+}
 .tabs {
   display: flex;
   justify-content: center;
   box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
   li {
-    padding: 25px 19px;
-    margin: 0 10px;
-    font-size: 1.1rem;
+    padding: 1.25rem .95rem;
+    margin: 0 .5rem;
+    font-size: 1.05rem;
     color: #333;
     border-bottom: 4px solid transparent;
     text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@@ -71,21 +84,21 @@ export default {
   }
 }
 .tab-content {
-  width: 1000px;
-  padding: 77px 0;
+  width: 50rem;
+  padding: 3.85rem 0;
   margin: 0 auto;
   span {
-    font-size: 1.35rem;
+    font-size: 1.08rem;
   }
 }
 .video {
   width: 100%;
-  margin-bottom: 55px;
+  margin-bottom: 2.75rem;
 }
 .text {
-  font-size: 18px;
+  font-size: .9rem;
   color: #020202;
-  line-height: 32px;
+  line-height: 1.6rem;
 }
 @media (max-width: 1200px) {
   .tabs {
@@ -119,18 +132,24 @@ export default {
 @media (max-width: 320px) {
   .wrap {
     .banner-img {
-        height: 15rem;
+        height: 12rem;
       }
     .single-banner {
       .texts {
-        top: 11rem !important;
-        left: 10rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .tab-content {
     .video {
       height: 18rem;
@@ -140,18 +159,24 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap {
     .banner-img {
-        height: 15rem;
+        height: 12rem;
       }
     .single-banner {
       .texts {
-        top: 11rem !important;
-        left: 12rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .tab-content {
     .video {
       height: 18rem;
@@ -161,19 +186,25 @@ export default {
 
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 18rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 14rem !important;
-        left: 15rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .tab-content {
     .video {
       height: 18rem;
@@ -182,85 +213,109 @@ export default {
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 22rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 18rem !important;
-        left: 20rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
           font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .tab-content {
     .video {
-      height: 23rem;
+      height: 18rem;
     }
   }
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 28rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 20rem !important;
-        left: 28rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 1.8rem;
+          font-size: 1.5rem;
+        }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
   }
   .tab-content {
     .video {
-      height: 23rem;
+      height: 18rem;
     }
   }
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 36rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 25rem !important;
-        left: 38rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 2rem;
+          font-size: 1.5rem;
         }
       }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
+    }
+  }
   .tab-content {
     .video {
-      height: auto;
+      height: 18rem;
     }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .wrap {
-    .single-banner {
     .banner-img {
-        height: 40rem;
+        height: 12rem;
       }
+    .single-banner {
       .texts {
-        top: 25rem !important;
-        left: 50rem !important;
+        bottom: 2rem !important;
+        left: 2rem !important;
         .banner-title {
-          font-size: 1.8rem;
+          font-size: 1.5rem;
+        }
+      }
     }
   }
+  .tabs {
+    li {
+      padding: 1rem .5rem;
+      font-size: .85rem;
     }
   }
   .tab-content {
     .video {
-      height: auto;
+      height: 18rem;
     }
   }
 }

src/pages/research/index.vue

@@ -96,21 +96,31 @@ export default {
 @import "../../styles/page/page.scss";
 .wrap{
   /deep/ .el-carousel {
-    height: 30rem;
+    height: 24rem;
     .el-carousel__container{
-      height: 30rem;
+      height: 24rem;
     }
     img{
-      height: 30rem;
+      height: 24rem;
     }
   }
 }
+.banner-item {
+  .banner-name {
+    font-size: 1.6rem;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+  .intro  {
+    margin-bottom: 4rem;
+  }
+}
 .area {
   display: flex;
   li {
     position: relative;
     width: 19%;
-    height: 653px;
     color: #fff;
     background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
     transition: .3s;
@@ -147,24 +157,23 @@ export default {
   }
   .pic {
     width: 100%;
-    height: 443px;
+    height: 32.65rem;
   }
   .icon {
     transition: .3s;
   }
   .texts {
     width: 100%;
-    height: 210px;
-    padding: 20px 40px;
+    padding: 1rem 2rem;
     background: #08577B;
     overflow: hidden;
   }
   h6 {
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     white-space: nowrap;
   }
   .des {
-    font-size: 1.2rem;
+    font-size: .96rem;
     color: rgba(255,255,255,0.55);
   }
 }
@@ -174,7 +183,7 @@ export default {
   li {
     position: relative;
     width: calc((100% - 56px) / 3);
-    margin: 0 28px 39px 0;
+    margin: 0 1.4rem 1.95rem 0;
     transition: .3s;
     &:hover {
       transform: scale(1.05);
@@ -189,18 +198,18 @@ export default {
   }
   img {
     width: 100%;
-    height: 353px;
+    height: auto;
   }
   .text {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 143px;
-    padding: 0 30px;
-    font-size: 1.8rem;
+    height: 7.15rem;
+    padding: 0 1.5rem;
+    font-size: 1.44rem;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
-    line-height: 40px;
+    line-height: 2rem;
     text-align: center;
     color: #272727;
     background-color: #fff;
@@ -215,10 +224,10 @@ export default {
     position: relative;
     width: calc((100% - 56px) / 3);
     padding: 11px;
-    margin-right: 28px;
+    margin-right: 1.4rem;
     color: #333;
     background-color: #fff;
-    box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
+    box-shadow: 0px 5px 1rem 0px rgba(98,117,163,0.08);
     border-radius: 10px;
     transition: .3s;
     &:hover {
@@ -234,19 +243,19 @@ export default {
   }
   img {
     width: 100%;
-    height: 481px;
+    height: auto;
   }
   .texts {
-    padding: 0 18px 50px;
+    padding: 0 .9rem 2.5rem;
   }
   h6 {
-    margin: 35px 0 12px;
-    font-size: 1.3rem;
-    line-height: 33px;
+    margin: 1.75rem 0 .6rem;
+    font-size: 1.04rem;
+    line-height: 1.65rem;
   }
   .des {
-    font-size: 1.1rem;
-    line-height: 26px;
+    font-size: .88rem;
+    line-height: 1.3rem;
   }
 }
 
@@ -302,37 +311,39 @@ export default {
 @media (max-width: 320px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 13rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 13rem !important; 
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 13rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 13rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .b-title  {
-      font-size: 2rem;
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
     }
     .group ,.news{
       li {
         img {
-          height: 13rem;
+          height: auto;
         }
         .text {
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 1.8rem;
         }
       }
@@ -342,37 +353,39 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 15rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 15rem !important;
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 15rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 15rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .b-title  {
-      font-size: 2rem;
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
     }
     .group ,.news{
       li {
         img {
-          height: 13rem;
+          height: auto;
         }
         .text {
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 1.8rem;
         }
       }
@@ -382,236 +395,260 @@ export default {
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 20rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 20rem !important;
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 20rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 20rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
-    }
-  }
-  .area {
-    li {
-      .pic {
-        height: 25rem;
-      }
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .b-title  {
-      font-size: 2rem;
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
     }
     .group ,.news{
       li {
         img {
-          height: 15rem;
+          height: auto;
         }
         .text {
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 1.8rem;
         }
       }
     }
+    .area {
+      li {
+        .pic {
+          height: 22rem;
+        }
+      }
+    }
   }
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 25rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 25rem !important;
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 25rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 25rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
-    }
-  }
-  .area {
-    li {
-      .pic {
-        height: 25rem;
-      }
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .b-title  {
-      font-size: 2rem;
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
     }
     .group ,.news{
       li {
         img {
-          height: 20rem;
+          height: auto;
         }
         .text {
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 1.8rem;
         }
       }
     }
+    .area {
+      li {
+        .pic {
+          height: auto;
+        }
+      }
+    }
   }
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 25rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 25rem !important;
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 25rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 25rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
-    }
-  }
-  .area {
-    li {
-      .pic {
-        height: 30rem;
-      }
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .b-title  {
-      font-size: 2rem;
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
     }
     .group ,.news{
       li {
         img {
-          height: 20rem;
+          height: auto;
         }
         .text {
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 1.8rem;
         }
       }
     }
+    .area {
+      flex-direction: row;;
+      li {
+        width: 19%;
+        .pic {
+          height: auto;
+        }
+      }
+    }
   }
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 30rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 30rem !important;
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 30rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 30rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
-    }
-  }
-  .area {
-    li {
-      .pic {
-        height: 35rem;
-      }
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .b-title  {
-      font-size: 2rem;
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
     }
     .group ,.news{
+      flex-direction: row;
       li {
+        width: calc((100% - 3rem) / 3);
+        margin: 0 .8rem 1.95rem 0;
+        -webkit-transition: .3s;
         img {
-          height: 25rem;
+          height: auto;
         }
         .text {
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 1.8rem;
         }
       }
     }
+    .area {
+      flex-direction: row;;
+      li {
+        width: 19%;
+        .pic {
+          height: auto;
+        }
+      }
+    }
   }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .wrap  {
     /deep/ .el-carousel{
-      height: 35rem !important;
+      height: 12rem !important;
     }
     /deep/ .el-carousel__container{
-      height: 35rem !important;
+      height: 12rem !important; 
     }
     /deep/  .el-carousel__item {
-      height: 35rem !important;
+      height: 12rem !important;
     }
   }
   .banner-item{
     img {
-      height: 35rem !important;
+      height: 12rem !important;
     }
     .banner-name {
       font-size: 1.5rem;
       line-height: 1rem;
-      left: 5rem;
-    }
-  }
-  .area {
-    li {
-      .pic {
-        height: 40rem;
-      }
+      left: 2rem;
+      bottom: 2rem;
     }
   }
   .block {
     padding: 1.25rem 0 ;
     .b-title  {
-      font-size: 2rem;
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
     }
     .group ,.news{
+      flex-direction: row;
       li {
+        width: calc((100% - 3rem) / 3);
+        margin: 0 .8rem 1.95rem 0;
+        -webkit-transition: .3s;
         img {
-          height: 25rem;
+          height: auto;
         }
         .text {
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 1.8rem;
         }
       }
     }
+    .area {
+      flex-direction: row;;
+      li {
+        width: 19%;
+        .pic {
+          height: auto;
+        }
+      }
+    }
   }
 }
 </style>

src/pages/science/index.vue

@@ -97,11 +97,29 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .inner {
-  width: 1200px;
+  width: 960px;
+}
+.single-banner {
+  .banner-img {
+    height: 21.6rem;
+  }
+  .texts {
+    h6 {
+      font-size: 2.16rem;
+      margin-bottom: .95rem;
+    }
+    .banner-des {
+      font-size: .96rem;
+    }
+  }
+}
+.block  {
+  padding: 3.85rem 0;
 }
 .item {
   position: relative;
-  margin-bottom: 58px;
+  margin-bottom: 2.9rem;
+  width: 100%;
   &:hover {
     .texts {
       color: #fff;
@@ -110,8 +128,8 @@ export default {
     }
   }
   img {
-    width: 90%;
-    height: 400px;
+    width: 100%;
+    height: 22rem;
   }
   &:nth-child(2) .texts {
     color: #fff;
@@ -123,26 +141,26 @@ export default {
   }
   &:nth-child(even) .texts {
     left: auto;
-    right: 0;
+    right: -1.6rem;
   }
   .texts {
     position: absolute;
-    top: 79px;
-    left: -28px;
-    width: 532px;
-    padding: 70px 38px;
+    top: 3.9rem;
+    left: -1.4rem;
+    width: 26.6rem;
+    padding: 3.5rem 1.9rem;
     color: #333;
     background: #fff6e9;
     transition: 0.5s;
   }
   h6 {
-    margin-bottom: 14px;
-    font-size: 2rem;
+    margin-bottom: .875rem;
+    font-size: 1.6rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
   }
   .des {
-    font-size: 1rem;
+    font-size: .88rem;
   }
 }
 @media (max-width: 1200px) {
@@ -150,11 +168,10 @@ export default {
     width: 100% !important;
   }
   .inner {
-    width: 100%;
+    width: 80%;
   }
   .item {
     img {
-      margin-left: 30px;
     }
     .rightText {
       right: 12px !important;
@@ -162,7 +179,10 @@ export default {
     .texts {
       width: 85%;
       box-sizing: border-box;
-      left: 12px;
+      left: -1rem;
+      &:nth-child(2) {
+        right: -1.5rem !important;
+      }
       .des{
         -webkit-line-clamp: inherit
       }
@@ -173,11 +193,11 @@ export default {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 13rem;
+        height: 12rem;
       }
       .texts {
-        top: 6rem;
-        left: 12rem;
+        top: 5rem;
+        left: 2rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -196,6 +216,12 @@ export default {
       .texts {
         padding: 1.25rem;
         top: 1.5rem;
+        h6 {
+          font-size: 1.2rem;
+        }
+        .des {
+          font-size: .75rem;
+        }
       }
     }
   }
@@ -204,11 +230,11 @@ export default {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 13rem;
+        height: 12rem;
       }
       .texts {
-        top: 6rem;
-        left: 12rem;
+        top: 5rem;
+        left: 2rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -219,16 +245,33 @@ export default {
       }
     }
   }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+        h6 {
+          font-size: 1.4rem;
+        }
+        .des {
+          font-size: .75rem;
+        }
+      }
+    }
+  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 20rem;
+        height: 12rem;
       }
       .texts {
-        top: 10rem;
-        left: 12rem;
+        top: 5rem;
+        left: 2rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -239,18 +282,35 @@ export default {
       }
     }
   }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+        h6 {
+          font-size: 1.4rem;
+        }
+        .des {
+          font-size: .75rem;
+        }
+      }
+    }
+  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 25rem;
+        height: 12rem;
       }
       .texts {
-        top: 10rem;
-        left: 12rem;
+        top: 5rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -259,18 +319,29 @@ export default {
       }
     }
   }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 35rem;
+        height: 12rem;
       }
       .texts {
-        top: 20rem;
-        left: 12rem;
+        top: 5rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -279,18 +350,29 @@ export default {
       }
     }
   }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 35rem;
+        height: 12rem;
       }
       .texts {
-        top: 20rem;
-        left: 12rem;
+        top: 5rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -299,18 +381,29 @@ export default {
       }
     }
   }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 40rem;
+        height: 12rem;
       }
       .texts {
-        top: 20rem;
-        left: 12rem;
+        top: 5rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -319,5 +412,16 @@ export default {
       }
     }
   }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
 }
 </style>

src/pages/talent/index.vue

@@ -33,7 +33,7 @@
 
     <div class="style">
       <h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6>
-      <el-carousel :interval="4000" type="card" height="36rem">
+      <el-carousel :interval="4000" type="card" height="30rem">
         <template v-for="(item, i) in modules[4].list">
           <el-carousel-item v-if="item.isEnable" :key="i">
             <div class="item" @click="openLink(item)">
@@ -118,15 +118,32 @@ export default {
 .wrap {
   background: #F8F9FB;
 }
+.single-banner {
+  .banner-img {
+    height: 21.6rem;
+  }
+  .texts {
+    h6 {
+      font-size: 2.16rem;
+      margin-bottom: .95rem;
+    }
+    .banner-des {
+      font-size: 1.08rem;
+    }
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+}
 .talent {
   .inner {
-    width: 100%;
+    width: 1200px;
     max-width: 1504px;
   }
   .item {
     display: flex;
-    padding: 42px;
-    margin-bottom: 36px;
+    padding: 2.1rem;
+    margin-bottom: 1.8rem;
     color: #333;
     background: #fff;
     transition: .5s;
@@ -146,7 +163,7 @@ export default {
     }
   }
   .img-wrap {
-    height: 465px;
+    width: 32rem;
     overflow: hidden;
   }
   .pic {
@@ -155,27 +172,27 @@ export default {
     transition: .5s;
   }
   .texts {
-    width: 707px;
-    padding: 98px 72px 30px 80px;
+    width: 44.375rem;
+    padding: 3.9rem 3.6rem 1.5rem 4rem;
   }
   h6 {
-    margin-bottom: 24px;
-    font-size: 2.4rem;
+    margin-bottom: 1.2rem;
+    font-size: 1.92rem;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
   }
   .des {
-    font-size: 1rem;
-    line-height: 33px;
-    -webkit-line-clamp: 8;
+    font-size: .88rem;
+    line-height: 1.65rem;
+    -webkit-line-clamp: 6;
   }
 }
 .style {
-  width: 90%;
+  width: 1200px;
   margin: 0 auto;
   h6 {
-    margin-bottom: 59px;
-    font-size: 2.4rem;
+    margin-bottom: 2.95rem;
+    font-size: 1.92rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     text-align: center;
@@ -184,7 +201,7 @@ export default {
   .item {
     position: relative;
     width: 100%;
-    height: 510px;
+    height: 25.5rem;
   }
   img {
     width: 100%;
@@ -195,16 +212,16 @@ export default {
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: 0 30px;
-    line-height: 3.4rem;
-    font-size: 1.2rem;
+    padding: 0 1.5rem;
+    line-height: 2.72rem;
+    font-size: .96rem;
     color: #fff;
     background: rgba(0,0,0,0.38);
   }
 }
 .intro {
   .inner {
-    width: 100%;
+    width: 1200px;
     max-width: 1504px;
   }
   .item {
@@ -236,21 +253,21 @@ export default {
   }
   .texts {
     width: 45%;
-    padding: 0 58px;
+    padding: 0 2.9rem;
   }
   .type {
-    font-size: 1rem;
+    font-size: .88rem;
   }
   h6 {
-    margin: 20px 0;
-    font-size: 1.6rem;
+    margin: 1rem 0;
+    font-size: 1.28rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
   }
   .des {
-    margin-bottom: 30px;
+    margin-bottom: 1.5rem;
     font-size: 0.9rem;
-    line-height: 30px;
+    line-height: 1.5rem;
   }
 }
 @media (min-width: 280px) and (max-width: 1200px) {
@@ -293,10 +310,10 @@ export default {
 @media (max-width: 320px) {
   .single-banner{
     .banner-img {
-      height: 13rem;
+      height: 12rem;
     }
     .texts {
-      left: 5rem;
+      left: 2rem;
       top:3rem;
       .banner-title{
         font-size: 1.5rem;
@@ -308,22 +325,25 @@ export default {
   }
   .block  {
     .inner {
+      width: 100%;
       .item  {
         .img-wrap {
-          height: 15rem;
+          width: 100%;
+          height: auto;
         }
       }
     }
   }
   .style {
+    width: 100%;
    /deep/ .el-carousel {
-    height: 25rem !important;
+    height: 13rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 18rem !important;
+    height: 13rem !important;
    }
    .item {
-    height: 15rem;
+    height: 13rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -334,11 +354,11 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .single-banner{
     .banner-img {
-      height: 18rem;
+      height: 12rem;
     }
     .texts {
-      left: 5rem;
-      top:8rem;
+      left: 2rem;
+      top:3rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -349,22 +369,25 @@ export default {
   }
   .block  {
     .inner {
+      width: 100%;
       .item  {
         .img-wrap {
-          height: 18rem;
+          width: 100%;
+          height: auto;
         }
       }
     }
   }
   .style {
+    width: 100%;
    /deep/ .el-carousel {
-    height: 25rem !important;
+    height: 13rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 18rem !important;
+    height: 13rem !important;
    }
    .item {
-    height: 15rem;
+    height: 13rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -375,11 +398,11 @@ export default {
 @media (min-width: 375px) and (max-width: 480px) {
   .single-banner{
     .banner-img {
-      height: 18rem;
+      height: 12rem;
     }
     .texts {
-      left: 5rem;
-      top:8rem;
+      left: 2rem;
+      top:3rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -390,22 +413,25 @@ export default {
   }
   .block  {
     .inner {
+      width: 100%;
       .item  {
         .img-wrap {
-          height: 18rem;
+          width: 100%;
+          height: auto;
         }
       }
     }
   }
   .style {
+    width: 100%;
    /deep/ .el-carousel {
-    height: 25rem !important;
+    height: 13rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 18rem !important;
+    height: 13rem !important;
    }
    .item {
-    height: 15rem;
+    height: 13rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -416,11 +442,11 @@ export default {
 @media (min-width: 480px) and (max-width: 640px) {
   .single-banner{
     .banner-img {
-      height: 20rem;
+      height: 12rem;
     }
     .texts {
-      left: 5rem;
-      top:8rem;
+      left: 2rem;
+      top:3rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -431,22 +457,25 @@ export default {
   }
   .block  {
     .inner {
+      width: 100%;
       .item  {
         .img-wrap {
-          height: 20rem;
+          width: 100%;
+          height: auto;
         }
       }
     }
   }
   .style {
+    width: 100%;
    /deep/ .el-carousel {
-    height: 25rem !important;
+    height: 13rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 18rem !important;
+    height: 13rem !important;
    }
    .item {
-    height: 18rem;
+    height: 13rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -457,11 +486,11 @@ export default {
 @media (min-width: 640px) and (max-width: 768px) {
   .single-banner{
     .banner-img {
-      height: 28rem;
+      height: 12rem;
     }
     .texts {
-      left: 5rem;
-      top:17rem;
+      left: 2rem;
+      top:3rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -472,22 +501,25 @@ export default {
   }
   .block  {
     .inner {
+      width: 100%;
       .item  {
         .img-wrap {
-          height: 25rem;
+          width: 100%;
+          height: auto;
         }
       }
     }
   }
   .style {
+    width: 100%;
    /deep/ .el-carousel {
-    height: 30rem !important;
+    height: 13rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 25rem !important;
+    height: 13rem !important;
    }
    .item {
-    height: 22rem;
+    height: 13rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -498,11 +530,11 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .single-banner{
     .banner-img {
-      height: 32rem;
+      height: 12rem;
     }
     .texts {
-      left: 5rem;
-      top:17rem;
+      left: 2rem;
+      top:3rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -513,22 +545,31 @@ export default {
   }
   .block  {
     .inner {
+      width: 100%;
       .item  {
+        width: 100%;
+        flex-direction: row;
         .img-wrap {
-          height: 30rem;
+          width: 60%;
+          height: auto;
+        }
+        .texts {
+          width: 80%;
+          margin-left: 1.5rem;
         }
       }
     }
   }
   .style {
+    width: 100%;
    /deep/ .el-carousel {
-    height: 30rem !important;
+    height: 18rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 25rem !important;
+    height: 18rem !important;
    }
    .item {
-    height: 22rem;
+    height: 18rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -539,11 +580,11 @@ export default {
 @media (min-width: 980px) and (max-width: 1200px) {
   .single-banner{
     .banner-img {
-      height: 32rem;
+      height: 12rem;
     }
     .texts {
-      left: 5rem;
-      top:17rem;
+      left: 2rem;
+      top:3rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -554,22 +595,31 @@ export default {
   }
   .block  {
     .inner {
+      width: 100%;
       .item  {
+        width: 100%;
+        flex-direction: row;
         .img-wrap {
-          height: 35rem;
+          width: 60%;
+          height: auto;
+        }
+        .texts {
+          width: 80%;
+          margin-left: 1.5rem;
         }
       }
     }
   }
   .style {
+    width: 100%;
    /deep/ .el-carousel {
-    height: 30rem !important;
+    height: 20rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 25rem !important;
+    height: 20rem !important;
    }
    .item {
-    height: 22rem;
+    height: 20rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;

src/pages/userSharing/index.vue

@@ -82,59 +82,76 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
+.single-banner {
+  .banner-img {
+    height: 21.6rem;
+  }
+  .texts {
+    h6 {
+      font-size: 2.16rem;
+      margin-bottom: .95rem;
+    }
+    .banner-des {
+      font-size: .96rem;
+    }
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+}
 .share {
   position: relative;
   .inner {
     display: flex;
+
   }
   .left {
     width: 40%;
   }
   h6 {
     position: relative;
-    font-size: 2.2rem;
+    font-size: 1.76rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #333333;
   }
   .en {
-    margin-top: -25px;
-    font-size: 2rem;
+    margin-top: 0;
+    font-size: 1.28rem;
     font-family: AppleSystemUIFont;
     color: #E4E4E4;
   }
   .des {
     margin-top: 25px;
-    font-size: 1rem;
+    font-size: .81rem;
     color: #333;
-    line-height: 37px;
-    overflow: visible;
+    line-height: 1.75rem;
+    -webkit-line-clamp:5;
   }
   .pic {
     width: 60%;
-    height: 568px;
+    height: auto;
     border-top-left-radius: 20px;
   }
   .card {
     position: absolute;
-    bottom: 145px;
+    bottom: 5.2rem;
     left: 0;
-    width: 1068px;
-    height: 145px;
-    padding: 30px 0 0 11%;
+    width: 66.75rem;
+    padding: 1.875rem 0 1.875rem 21.5%;
     background: #7BACC4;
     border-radius: 0px 100px 0px 0px;
     opacity: 0.88;
   }
   .title {
-    margin-bottom: 10px;
-    font-size: 1.8rem;
+    margin-bottom: .625rem;
+    font-size: 1.44rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #fff;
   }
   .en-text {
-    font-size: 1.3rem;
+    font-size: 1.04rem;
     font-family: AppleSystemUIFont;
     color: #fff;
     letter-spacing: 2px;
@@ -143,14 +160,14 @@ export default {
 .group {
   display: flex;
   justify-content: center;
-  width: 1000px;
+  width: 1200px;
   margin: 0 auto;
   li {
     position: relative;
-    width: calc((100% - 40px) / 3);
-    height: 300px;
-    padding: 110px 20px 0 32px;
-    margin-right: 20px;
+    flex: 1;
+    height: 15rem;
+    padding: 5.5rem 1rem 0 1.6rem;
+    margin-right: 1rem;
     color: #fff;
     overflow: hidden;
     &:last-child {
@@ -172,14 +189,14 @@ export default {
   }
   h6 {
     position: relative;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
   }
   .des {
     position: relative;
-    margin-top: 16px;
-    font-size: 0.9rem;
+    margin-top: 1rem;
+    font-size: 0.72rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     line-height: 31px;
@@ -226,8 +243,8 @@ export default {
         height: 13rem;
       }
       .texts {
-        top: 6rem;
-        left: 12rem;
+        top: 7rem;
+        left: 2rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -242,10 +259,17 @@ export default {
     padding: 2rem 0;
     .inner {
       .pic  {
-        height: 20rem;
+        height: auto;
       }
       .card{
+        padding: 1.875rem 0 1.875rem 18.5%;
         bottom: 0;
+        .title {
+          font-size: 1.4rem;
+        }
+        .en-text {
+          font-size: .9rem;
+        }
       }
     }
   }
@@ -257,8 +281,8 @@ export default {
         height: 13rem;
       }
       .texts {
-        top: 6rem;
-        left: 12rem;
+        top: 7rem;
+        left: 2rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -273,23 +297,35 @@ export default {
     padding: 2rem 0;
     .inner {
       .pic  {
-        height: 20rem;
+        height: auto;
       }
       .card{
+        padding: 1.875rem 0 1.875rem 18.5%;
         bottom: 0;
+        .title {
+          font-size: 1.4rem;
+        }
+        .en-text {
+          font-size: .9rem;
         }
       }
     }
+  }
+  .group {
+    li {
+      height: auto;
+    }
+  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 20rem;
+        height: 13rem;
       }
       .texts {
-        top: 10rem;
-        left: 12rem;
+        top: 7rem;
+        left: 2rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -304,25 +340,37 @@ export default {
     padding: 2rem 0;
     .inner {
       .pic  {
-        height: 25rem;
+        height: auto;
       }
       .card{
+        padding: 1.875rem 0 1.875rem 18.5%;
         bottom: 0;
+        .title {
+          font-size: 1.4rem;
+        }
+        .en-text {
+          font-size: .9rem;
+        }
       }
     }
   }
+  .group {
+    li {
+      height: auto;
+    }
+  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 25rem;
+        height: 13rem;
       }
       .texts {
-        top: 10rem;
-        left: 12rem;
+        top: 7rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -335,25 +383,37 @@ export default {
     padding: 2rem 0;
     .inner {
       .pic  {
-        height: 30rem;
+        height: auto;
       }
       .card{
+        padding: 1.875rem 0 1.875rem 18.5%;
         bottom: 0;
+        .title {
+          font-size: 1.4rem;
+        }
+        .en-text {
+          font-size: .9rem;
+        }
+      }
     }
   }
+  .group {
+    li {
+      height: auto;
+    }
   }
 }
 @media (min-width: 640px) and (max-width: 768px) {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 35rem;
+        height: 13rem;
       }
       .texts {
-        top: 20rem;
-        left: 12rem;
+        top: 7rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -366,10 +426,25 @@ export default {
     padding: 2rem 0;
     .inner {
       .pic  {
-        height: 35rem;
+        height: auto;
       }
       .card{
+        padding: 1.875rem 0 1.875rem 18.5%;
         bottom: 0;
+        .title {
+          font-size: 1.4rem;
+        }
+        .en-text {
+          font-size: .9rem;
+        }
+      }
+    }
+  }
+  .group {
+    flex-direction: row;
+    li {
+      .des {
+        line-height: 1rem;
       }
     }
   }
@@ -378,13 +453,13 @@ export default {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 40rem;
+        height: 13rem;
       }
       .texts {
-        top: 20rem;
-        left: 12rem;
+        top: 7rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -397,10 +472,25 @@ export default {
     padding: 2rem 0;
     .inner {
       .pic  {
-        height: 40rem;
+        height: auto;
       }
       .card{
+        padding: 1.875rem 0 1.875rem 18.5%;
         bottom: 0;
+        .title {
+          font-size: 1.4rem;
+        }
+        .en-text {
+          font-size: .9rem;
+        }
+      }
+    }
+  }
+  .group {
+    flex-direction: row;
+    li {
+      .des {
+        line-height: 1rem;
       }
     }
   }
@@ -409,13 +499,13 @@ export default {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 40rem;
+        height: 13rem;
       }
       .texts {
-        top: 20rem;
-        left: 12rem;
+        top: 7rem;
+        left: 2rem;
         .banner-title{
-          font-size: 2rem;
+          font-size: 1.5rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -428,10 +518,25 @@ export default {
     padding: 2rem 0;
     .inner {
       .pic  {
-        height: 50rem;
+        height: auto;
       }
       .card{
+        padding: 1.875rem 0 1.875rem 18.5%;
         bottom: 0;
+        .title {
+          font-size: 1.4rem;
+        }
+        .en-text {
+          font-size: .9rem;
+        }
+      }
+    }
+  }
+  .group {
+    flex-direction: row;
+    li {
+      .des {
+        line-height: 1rem;
       }
     }
   }

src/store/getters.js

@@ -1,4 +1,5 @@
 const getters = {
-    getModelType:(state) => state.modelType
+    getModelType:(state) => state.modelType,
+    getNavSum:(state) => state.navSum
 };
 export default getters;

src/store/index.js

@@ -19,12 +19,23 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
 
 const store = new Vuex.Store({
     state: {
-        modelType: false //true为PC端，false为手机端
+        modelType: false, //true为PC端，false为手机端
+        navSum: sessionStorage.getItem('navPageSize') || 10, // 导航栏显示的条目数量
     },
     mutations: {
+        // 根据屏幕尺寸分别移动或者pc
         updateModelType(state, type) {
             console.log(state)
             state.modelType = type;
+        },
+        // 根据屏幕尺寸显示的导航栏条数
+        updateNavSum(state,num) {
+            state.navSum = num
+        }
+    },
+    actions: {
+        updateNavSumA({ commit },data) {
+            commit('updateNavSum',data)
         }
     },
     modules,