src/App.vue

@@ -10,7 +10,6 @@ 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)));
@@ -35,88 +34,13 @@ export default {
     }
     var flagZt = IsPCModel();
     this.$store.commit('updateModelType', flagZt)
-    window.onresize = this.throttle(() => {
+    window.onresize = () => {
       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,13 +7,9 @@
         </template>
         <menuTree :menuList="item.children"></menuTree>
       </el-submenu>
-      <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>
+      <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>
+      </el-menu-item>
     </template>
   </div>
 </template>

src/i18n/index.js

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

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" @showMoreBtns="updateBtnsType"></navbar>
+      <navbar ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate"></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,13 +90,6 @@ export default {
     },
     stop() {
 
-    },
-    /**
-     * pc端下,当导航栏条目大于10的情况下,显示更多按钮
-     * type : true显示,false隐藏
-     */
-    updateBtnsType(type) {
-      this.showMoreBtns = type
     },
     // 获取页面滚动距离(home长页专用)
     handleScroll () {

src/layouts/navbar/index.vue

@@ -2,19 +2,14 @@
   <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,mapGetters } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 export default {
   props: ['isHome', 'isEstate', 'updateModelType'],
   mixins: [mixins],
@@ -27,21 +22,12 @@ export default {
       activeTextColor: '#1583FF',
       menuRefresh: 1,
       toItem: {},
-      parentId: 0,
-      otherMenus: [],
-      // 当导航栏条目大于10条,则在pc端显示更多的按钮
-      showMoreBtns: false
+      parentId: 0
     };
   },
   components: {
     menuTree
   },
-  computed: {
-    ...mapGetters(["getNavSum"]),
-    mapboxMap1() {
-      return this.navSum;
-    }
-  },
   watch: {
     '$route'() {
       const { siteId } = this.$route.query
@@ -54,15 +40,11 @@ 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', [
@@ -77,20 +59,7 @@ export default {
         typeId	: '',
         isSort: 1
       }).then(({ 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
-        }
+        this.menus = data
         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
@@ -133,11 +102,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
     }
   }
@@ -146,13 +115,7 @@ 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%;
@@ -212,6 +175,7 @@ $height: 90px;
 @media (max-width: 1500px) {
   /deep/.nav {
     .el-menu-item {
+      padding: 0 8px;
     }
   }
 }

src/pages/application/index.vue

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

src/pages/careers/index.vue

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

src/pages/column/index.vue

@@ -649,48 +649,40 @@ 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.024rem;
+  font-size: 1.28rem;
 }
 
 .banner {
   position: relative;
-  height: 14rem;
+  height: 280px;
 
   color: #fff;
 
   .texts {
     position: absolute;
-    top: 6.15rem;
-    left: 12.15rem;
+    top: 123px;
+    left: 243px;
   }
 
   .text {
-    font-size: 2.16rem;
+    font-size: 3rem;
     font-weight: 600;
     @include ellipsis;
   }
 
   .sub {
-    margin-top: .5rem;
-    font-size: 1.6rem;
+    margin-top: 10px;
+    font-size: 2rem;
   }
 }
 
 .column-wrap {
-  padding: 2rem 0;
+  padding: 40px 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;
@@ -704,7 +696,7 @@ export default {
 
   .left {
     width: 66%;
-    margin-right: 1.4rem;
+    margin-right: 28px;
   }
 
   .article-wrap {
@@ -714,12 +706,12 @@ export default {
   .switch {
     display: inline-flex;
     align-items: center;
-    margin-right: 2.5rem;
+    margin-right: 50px;
 
     li {
-      padding: 0 .75rem;
-      margin-right: .5rem;
-      line-height: 1.8rem;
+      padding: 0 15px;
+      margin-right: 10px;
+      line-height: 36px;
       font-size: 1rem;
       color: #333;
       background: #f7f7f7;
@@ -735,26 +727,26 @@ export default {
   .forms {
     display: flex;
     align-items: center;
-    padding: 1.5rem;
-    margin-bottom: 1rem;
+    padding: 30px;
+    margin-bottom: 20px;
     background-color: #fff;
 
     .item {
       display: inline-flex;
       align-items: center;
-      margin-right: 1.5rem;
+      margin-right: 30px;
     }
 
     .label {
-      font-size: .912rem;
+      font-size: 1.14rem;
       color: #333;
       white-space: nowrap;
     }
 
     /deep/.el-input__inner {
       width: 100%;
-      height: 2.4rem;
-      line-height: 2.4rem;
+      height: 48px;
+      line-height: 48px;
       border: 0;
       background: #f7f7f7;
     }
@@ -762,12 +754,11 @@ export default {
     .search {
       display: inline-flex;
       width: 34%;
-      margin-top: .1rem;
 
       input {
         width: 100%;
-        height: 2.4rem;
-        padding: 0 .75rem;
+        height: 48px;
+        padding: 0 15px;
         font-size: 1rem;
         color: #333;
         background: #f7f7f7;
@@ -785,8 +776,8 @@ export default {
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      width: 3.1rem;
-      height: 2.4rem;
+      width: 62px;
+      height: 48px;
       background: #1583ff;
       border-radius: 0px 6px 6px 0px;
       cursor: pointer;
@@ -799,7 +790,7 @@ export default {
 
   /deep/.columns {
     width: 22%;
-    margin-right: .6rem;
+    margin-right: 12px;
     overflow: auto;
     span{
       white-space: nowrap; 
@@ -819,10 +810,10 @@ export default {
 
     .el-tree-node__content {
       position: relative;
-      height: 2.4rem;
-      padding-left: 2rem;
+      height: 48px;
+      padding-left: 40px;
       margin-bottom: 1px;
-      font-size: 1.04rem;
+      font-size: 1.28rem;
       color: #666;
       background-color: #fff;
       border-top: 1px solid #f8f9f9;
@@ -892,12 +883,10 @@ export default {
       }
       .texts {
         .titleDes {
-          margin-bottom: 1.248rem;
-          font-size: 1.2rem;
-          margin-top: .6rem;
+          margin-bottom: 1.56rem;
         }
         .des {
-          margin-top: 1rem;
+          margin-top: 1.7rem;
         }
       }
       .titleDes {
@@ -906,10 +895,10 @@ export default {
         -webkit-line-clamp: 1;
         text-overflow: ellipsis;
         overflow: hidden;
-        margin-top: .8rem;
+        margin-top: 1rem;
       }
       .readDetailBtn {
-        margin-top: 1rem;
+        margin-top: 2rem;
       }
       .texts {
         flex-grow: 1;
@@ -925,19 +914,19 @@ export default {
     }
 
     .texts {
-      width: 60%;
+      width: 52%;
       padding-left: 30px;
     }
 
     .type {
       margin-bottom: 15px;
-      font-size: 1.024rem;
+      font-size: 1.28rem;
       color: #333;
     }
 
     h6 {
       margin-bottom: 15px;
-      font-size: 1.368rem;
+      font-size: 1.71rem;
       color: #000;
       line-height: 38px;
       @include mul-ellipsis(2);
@@ -946,7 +935,7 @@ export default {
     .meta {
       display: flex;
       align-items: center;
-      font-size: .88rem;
+      font-size: 1rem;
       font-family: PingFangSC-Medium;
       color: #333;
     }
@@ -961,8 +950,8 @@ export default {
     }
 
     .pic {
-      width: 30%;
-      height: auto;
+      width: 35%;
+      height: 244px;
     }
   }
   .news-notice {
@@ -995,13 +984,13 @@ export default {
   }
   .right {
     width: 14%;
-    min-width: 15rem;
+    min-width: 240px;
     overflow: hidden;
   }
 
   .column {
     width: 100%;
-    margin-bottom: 1.25rem;
+    margin-bottom: 25px;
 
     /deep/.el-tree-node__content {
       height: 44px;
@@ -1016,16 +1005,16 @@ export default {
   }
 
   .list {
-    margin-bottom: 1rem;
+    margin-bottom: 20px;
 
     li {
-      padding: .8rem 0;
+      padding: 16px 0;
       border-bottom: 1px solid #d8d8d8;
     }
 
     .text {
       margin-bottom: 5px;
-      font-size: .98rem;
+      font-size: 1rem;
       cursor: pointer;
       @include ellipsis;
 
@@ -1035,7 +1024,7 @@ export default {
     }
 
     .date {
-      font-size: .78rem;
+      font-size: .85rem;
       color: #999;
     }
   }
@@ -1231,103 +1220,11 @@ export default {
 
 @media (max-width: 320px) {
   .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: 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;
+    height: 13rem;
     img {
-      height: 12rem !important;
+      height: 13rem !important;
     }
     .texts {
-      left: 2rem;
-      bottom: 2rem;
       .text {
         font-size: 1.5rem;
       }
@@ -1337,16 +1234,7 @@ export default {
     .article-wrap {
       .articles {
         .pic {
-          height: auto !important;
-        }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
-            }
-          }
+          height: 10rem !important;
         }
       }
     }
@@ -1365,211 +1253,59 @@ 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: auto !important;
-        }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
-            }
-          }
+          height: 15rem !important;
         }
       }
     }
   }
-  .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: auto !important;
-        }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
-            }
-          }
+          height: 20rem !important;
         }
       }
     }
   }
-  .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: 12rem !important;
+    height: 16rem;
     img {
-      height: 12rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
+      height: 16rem !important;
     }
   }
   .contents {
     .article-wrap {
       .articles {
         .pic {
-          height: auto !important;
-        }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
-            }
-          }
+          height: 25rem !important;
         }
       }
     }
   }
-  .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: 14rem !important;
+    height: 18rem !important;
     img {
-      height: 14rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
+      height: 18rem !important;
     }
   }
   .contents {
     .article-wrap {
       .articles {
         .pic {
-          height: auto !important;
-        }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
-            }
-          }
+          height: 30rem !important;
         }
       }
     }
   }
-  .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,25 +57,6 @@ 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;
@@ -102,16 +83,15 @@ export default {
 .share {
   position: relative;
   .inner {
-    width: 1200px;
+    width: 1323px;
   }
   .left {
-    // width: 34.1875rem;
-    flex-grow: 1;
-    margin-right: 4.125rem;
+    width: 547px;
+    margin-right: 66px;
   }
   h6 {
     position: relative;
-    font-size: 1.92rem;
+    font-size: 2.4rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: bold;
     color: #333333;
@@ -132,16 +112,15 @@ export default {
     line-height: 44px;
   }
   .des {
-    margin-top: 1.25rem;
-    font-size: .88rem;
+    margin-top: 25px;
+    font-size: 1rem;
     color: #333;
-    line-height: 1.85rem;
-    -webkit-line-clamp: inherit;
+    line-height: 37px;
     overflow: visible;
   }
   .pic {
-    width: 30.5rem;
-    height: auto;
+    width: 610px;
+    height: 409px;
     margin-top: 10px;
     border-top-left-radius: 20px;
   }
@@ -149,21 +128,21 @@ export default {
 .intro {
   display: flex;
   align-items: center;
-  width: 77.5%;
-  height: 19.65rem;
+  max-width: 1490px;
+  width: 90%;
+  height: 393px;
   margin-bottom: 67px;
   .pic {
     width: 60%;
     height: 100%;
   }
   .des {
-    height: 19.65rem;
-    padding: 2.85rem 3rem 1rem 3rem;
-    font-size: .96rem;
+    height: 100%;
+    padding: 57px 60px 20px 60px;
+    font-size: 1.2rem;
     color: #fff;
-    line-height: 2rem;
+    line-height: 40px;
     background: #2E4984;
-    -webkit-line-clamp: 7;            //设定一共3行，超出的部分隐藏，并用省略号来表示
   }
 }
 .unit {
@@ -171,9 +150,9 @@ export default {
   padding-bottom: 60px;
   margin: 0 auto;
   h6 {
-    padding-left: .93rem;
-    margin-bottom: .93rem;
-    font-size: .88rem;
+    padding-left: 15px;
+    margin-bottom: 15px;
+    font-size: 1.1rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #2A2A2A;
@@ -227,128 +206,44 @@ export default {
 }
 @media (max-width: 320px) {
   .banner{
-    height: 12rem;
-    padding: 6rem 0 0 2rem;
-  }
-  .beamBox {
-    .imgText {
-      bottom: 1rem;
-      right: 1rem;
-    }
-  }
-  .intro {
-    width: 100%;
-    .des {
-      height: auto;
-    }
+    height: 13rem;
+    padding: 6rem 0 0 8rem;
   }
 }
-@media (min-width: 320px) and (max-width: 375px)  {
+@media (min-width: 320px) and (max-width: 375px) {
   .banner{
-    height: 12rem;
-    padding: 6rem 0 0 2rem;
-  }
-  .beamBox {
-    .imgText {
-      bottom: 1rem;
-      right: 1rem;
-    }
+    height: 13rem;
+    padding: 8rem 0 0 10rem;
   }
-  .intro {
-    width: 100%;
-    .des {
-      height: auto;
-    }
-  }
-}
- @media (min-width: 375px) and (max-width: 480px)  {
+ }
+ @media (min-width: 375px) and (max-width: 480px) {
   .banner{
-    height: 12rem;
-    padding: 6rem 0 0 2rem;
-  }
-  .beamBox {
-    .imgText {
-      bottom: 2rem;
-      right: 2rem;
-    }
-  }
-  .intro {
-    width: 100%;
-    .des {
-      height: auto;
-    }
+    height: 15rem;
+    padding: 10rem 0 0 14rem;
   }
 }
-@media (min-width: 480px) and (max-width: 640px)  {
+@media (min-width: 480px) and (max-width: 640px) {
   .banner{
-    height: 12rem;
-    padding: 6rem 0 0 2rem;
-  }
-  .beamBox {
-    .imgText {
-      bottom: 3rem;
-      right: 3rem;
-    }
-  }
-  .intro {
-    width: 100%;
-    .des {
-      height: auto;
-    }
+    height: 17rem;
+    padding: 12rem 0 0 22rem;
   }
 }
-@media (min-width: 640px) and (max-width: 768px)  {
+@media (min-width: 640px) and (max-width: 768px) {
   .banner{
-    height: 12rem;
-    padding: 6rem 0 0 2rem;
-  }
-  .beamBox {
-    .imgText {
-      bottom: 3rem;
-      right: 3rem;
-    }
-  }
-  .intro {
-    width: 100%;
-    .des {
-      height: auto;
-    }
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
   }
 }
-@media (min-width: 768px) and (max-width: 980px)  {
+@media (min-width: 768px) and (max-width: 980px) {
   .banner{
-    height: 12rem;
-    padding: 6rem 0 0 2rem;
-  }
-  .beamBox {
-    .imgText {
-      bottom: 3rem;
-      right: 3rem;
-    }
-  }
-  .intro {
-    width: 100%;
-    .des {
-      height: auto;
-    }
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
   }
 }
-@media (min-width: 980px) and (max-width: 1200px)  {
+@media (min-width: 980px) and (max-width: 1200px) {
   .banner{
-    height: 12rem;
-    padding: 6rem 0 0 2rem;
-  }
-  .beamBox {
-    .imgText {
-      bottom: 4rem;
-      right: 4rem;
-    }
-  }
-  .intro {
-    width: 100%;
-    .des {
-      height: auto;
-    }
+    height: 25rem;
+    padding: 12rem 0 0 22rem;
   }
 }
 </style>

src/pages/deviceIntroLayout/index.vue

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

src/pages/deviceIntroLinear/index.vue

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

src/pages/edu/index.vue

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

src/pages/exp/index.vue

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

src/pages/home/index.vue

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

src/pages/newsPress/index.vue

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

src/pages/newsProcurement/index.vue

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

src/pages/overviewDevHistory/index.vue

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

src/pages/overviewIntro/index.vue

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

src/pages/overviewLocation/index.vue

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

src/pages/overviewTrailer/index.vue

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

src/pages/research/index.vue

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

src/pages/science/index.vue

@@ -97,29 +97,11 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .inner {
-  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;
+  width: 1200px;
 }
 .item {
   position: relative;
-  margin-bottom: 2.9rem;
-  width: 100%;
+  margin-bottom: 58px;
   &:hover {
     .texts {
       color: #fff;
@@ -128,8 +110,8 @@ export default {
     }
   }
   img {
-    width: 100%;
-    height: 22rem;
+    width: 90%;
+    height: 400px;
   }
   &:nth-child(2) .texts {
     color: #fff;
@@ -141,26 +123,26 @@ export default {
   }
   &:nth-child(even) .texts {
     left: auto;
-    right: -1.6rem;
+    right: 0;
   }
   .texts {
     position: absolute;
-    top: 3.9rem;
-    left: -1.4rem;
-    width: 26.6rem;
-    padding: 3.5rem 1.9rem;
+    top: 79px;
+    left: -28px;
+    width: 532px;
+    padding: 70px 38px;
     color: #333;
     background: #fff6e9;
     transition: 0.5s;
   }
   h6 {
-    margin-bottom: .875rem;
-    font-size: 1.6rem;
+    margin-bottom: 14px;
+    font-size: 2rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
   }
   .des {
-    font-size: .88rem;
+    font-size: 1rem;
   }
 }
 @media (max-width: 1200px) {
@@ -168,10 +150,11 @@ export default {
     width: 100% !important;
   }
   .inner {
-    width: 80%;
+    width: 100%;
   }
   .item {
     img {
+      margin-left: 30px;
     }
     .rightText {
       right: 12px !important;
@@ -179,10 +162,7 @@ export default {
     .texts {
       width: 85%;
       box-sizing: border-box;
-      left: -1rem;
-      &:nth-child(2) {
-        right: -1.5rem !important;
-      }
+      left: 12px;
       .des{
         -webkit-line-clamp: inherit
       }
@@ -193,11 +173,11 @@ export default {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 12rem;
+        height: 13rem;
       }
       .texts {
-        top: 5rem;
-        left: 2rem;
+        top: 6rem;
+        left: 12rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -216,12 +196,6 @@ export default {
       .texts {
         padding: 1.25rem;
         top: 1.5rem;
-        h6 {
-          font-size: 1.2rem;
-        }
-        .des {
-          font-size: .75rem;
-        }
       }
     }
   }
@@ -230,11 +204,11 @@ export default {
   .wrap {
     .single-banner {
       .banner-img {
-        height: 12rem;
+        height: 13rem;
       }
       .texts {
-        top: 5rem;
-        left: 2rem;
+        top: 6rem;
+        left: 12rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -245,33 +219,16 @@ 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: 12rem;
+        height: 20rem;
       }
       .texts {
-        top: 5rem;
-        left: 2rem;
+        top: 10rem;
+        left: 12rem;
         .banner-title{
           font-size: 1.5rem;
           margin-bottom: .5rem;
@@ -282,35 +239,18 @@ 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: 12rem;
+        height: 25rem;
       }
       .texts {
-        top: 5rem;
-        left: 2rem;
+        top: 10rem;
+        left: 12rem;
         .banner-title{
-          font-size: 1.5rem;
+          font-size: 2rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -319,29 +259,18 @@ 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: 12rem;
+        height: 35rem;
       }
       .texts {
-        top: 5rem;
-        left: 2rem;
+        top: 20rem;
+        left: 12rem;
         .banner-title{
-          font-size: 1.5rem;
+          font-size: 2rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -350,29 +279,18 @@ 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: 12rem;
+        height: 35rem;
       }
       .texts {
-        top: 5rem;
-        left: 2rem;
+        top: 20rem;
+        left: 12rem;
         .banner-title{
-          font-size: 1.5rem;
+          font-size: 2rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -381,29 +299,18 @@ 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: 12rem;
+        height: 40rem;
       }
       .texts {
-        top: 5rem;
-        left: 2rem;
+        top: 20rem;
+        left: 12rem;
         .banner-title{
-          font-size: 1.5rem;
+          font-size: 2rem;
           margin-bottom: .5rem;
         }
         .banner-des{
@@ -412,16 +319,5 @@ 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="30rem">
+      <el-carousel :interval="4000" type="card" height="36rem">
         <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,32 +118,15 @@ 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: 1200px;
+    width: 100%;
     max-width: 1504px;
   }
   .item {
     display: flex;
-    padding: 2.1rem;
-    margin-bottom: 1.8rem;
+    padding: 42px;
+    margin-bottom: 36px;
     color: #333;
     background: #fff;
     transition: .5s;
@@ -163,7 +146,7 @@ export default {
     }
   }
   .img-wrap {
-    width: 32rem;
+    height: 465px;
     overflow: hidden;
   }
   .pic {
@@ -172,27 +155,27 @@ export default {
     transition: .5s;
   }
   .texts {
-    width: 44.375rem;
-    padding: 3.9rem 3.6rem 1.5rem 4rem;
+    width: 707px;
+    padding: 98px 72px 30px 80px;
   }
   h6 {
-    margin-bottom: 1.2rem;
-    font-size: 1.92rem;
+    margin-bottom: 24px;
+    font-size: 2.4rem;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
   }
   .des {
-    font-size: .88rem;
-    line-height: 1.65rem;
-    -webkit-line-clamp: 6;
+    font-size: 1rem;
+    line-height: 33px;
+    -webkit-line-clamp: 8;
   }
 }
 .style {
-  width: 1200px;
+  width: 90%;
   margin: 0 auto;
   h6 {
-    margin-bottom: 2.95rem;
-    font-size: 1.92rem;
+    margin-bottom: 59px;
+    font-size: 2.4rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     text-align: center;
@@ -201,7 +184,7 @@ export default {
   .item {
     position: relative;
     width: 100%;
-    height: 25.5rem;
+    height: 510px;
   }
   img {
     width: 100%;
@@ -212,16 +195,16 @@ export default {
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: 0 1.5rem;
-    line-height: 2.72rem;
-    font-size: .96rem;
+    padding: 0 30px;
+    line-height: 3.4rem;
+    font-size: 1.2rem;
     color: #fff;
     background: rgba(0,0,0,0.38);
   }
 }
 .intro {
   .inner {
-    width: 1200px;
+    width: 100%;
     max-width: 1504px;
   }
   .item {
@@ -253,21 +236,21 @@ export default {
   }
   .texts {
     width: 45%;
-    padding: 0 2.9rem;
+    padding: 0 58px;
   }
   .type {
-    font-size: .88rem;
+    font-size: 1rem;
   }
   h6 {
-    margin: 1rem 0;
-    font-size: 1.28rem;
+    margin: 20px 0;
+    font-size: 1.6rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
   }
   .des {
-    margin-bottom: 1.5rem;
+    margin-bottom: 30px;
     font-size: 0.9rem;
-    line-height: 1.5rem;
+    line-height: 30px;
   }
 }
 @media (min-width: 280px) and (max-width: 1200px) {
@@ -310,10 +293,10 @@ export default {
 @media (max-width: 320px) {
   .single-banner{
     .banner-img {
-      height: 12rem;
+      height: 13rem;
     }
     .texts {
-      left: 2rem;
+      left: 5rem;
       top:3rem;
       .banner-title{
         font-size: 1.5rem;
@@ -325,25 +308,22 @@ export default {
   }
   .block  {
     .inner {
-      width: 100%;
       .item  {
         .img-wrap {
-          width: 100%;
-          height: auto;
+          height: 15rem;
         }
       }
     }
   }
   .style {
-    width: 100%;
    /deep/ .el-carousel {
-    height: 13rem !important;
+    height: 25rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 13rem !important;
+    height: 18rem !important;
    }
    .item {
-    height: 13rem;
+    height: 15rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -354,11 +334,11 @@ export default {
 @media (min-width: 320px) and (max-width: 375px) {
   .single-banner{
     .banner-img {
-      height: 12rem;
+      height: 18rem;
     }
     .texts {
-      left: 2rem;
-      top:3rem;
+      left: 5rem;
+      top:8rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -369,25 +349,22 @@ export default {
   }
   .block  {
     .inner {
-      width: 100%;
       .item  {
         .img-wrap {
-          width: 100%;
-          height: auto;
+          height: 18rem;
         }
       }
     }
   }
   .style {
-    width: 100%;
    /deep/ .el-carousel {
-    height: 13rem !important;
+    height: 25rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 13rem !important;
+    height: 18rem !important;
    }
    .item {
-    height: 13rem;
+    height: 15rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -398,11 +375,11 @@ export default {
 @media (min-width: 375px) and (max-width: 480px) {
   .single-banner{
     .banner-img {
-      height: 12rem;
+      height: 18rem;
     }
     .texts {
-      left: 2rem;
-      top:3rem;
+      left: 5rem;
+      top:8rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -413,25 +390,22 @@ export default {
   }
   .block  {
     .inner {
-      width: 100%;
       .item  {
         .img-wrap {
-          width: 100%;
-          height: auto;
+          height: 18rem;
         }
       }
     }
   }
   .style {
-    width: 100%;
    /deep/ .el-carousel {
-    height: 13rem !important;
+    height: 25rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 13rem !important;
+    height: 18rem !important;
    }
    .item {
-    height: 13rem;
+    height: 15rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -442,11 +416,11 @@ export default {
 @media (min-width: 480px) and (max-width: 640px) {
   .single-banner{
     .banner-img {
-      height: 12rem;
+      height: 20rem;
     }
     .texts {
-      left: 2rem;
-      top:3rem;
+      left: 5rem;
+      top:8rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -457,25 +431,22 @@ export default {
   }
   .block  {
     .inner {
-      width: 100%;
       .item  {
         .img-wrap {
-          width: 100%;
-          height: auto;
+          height: 20rem;
         }
       }
     }
   }
   .style {
-    width: 100%;
    /deep/ .el-carousel {
-    height: 13rem !important;
+    height: 25rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 13rem !important;
+    height: 18rem !important;
    }
    .item {
-    height: 13rem;
+    height: 18rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -486,11 +457,11 @@ export default {
 @media (min-width: 640px) and (max-width: 768px) {
   .single-banner{
     .banner-img {
-      height: 12rem;
+      height: 28rem;
     }
     .texts {
-      left: 2rem;
-      top:3rem;
+      left: 5rem;
+      top:17rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -501,25 +472,22 @@ export default {
   }
   .block  {
     .inner {
-      width: 100%;
       .item  {
         .img-wrap {
-          width: 100%;
-          height: auto;
+          height: 25rem;
         }
       }
     }
   }
   .style {
-    width: 100%;
    /deep/ .el-carousel {
-    height: 13rem !important;
+    height: 30rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 13rem !important;
+    height: 25rem !important;
    }
    .item {
-    height: 13rem;
+    height: 22rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -530,11 +498,11 @@ export default {
 @media (min-width: 768px) and (max-width: 980px) {
   .single-banner{
     .banner-img {
-      height: 12rem;
+      height: 32rem;
     }
     .texts {
-      left: 2rem;
-      top:3rem;
+      left: 5rem;
+      top:17rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -545,31 +513,22 @@ export default {
   }
   .block  {
     .inner {
-      width: 100%;
       .item  {
-        width: 100%;
-        flex-direction: row;
         .img-wrap {
-          width: 60%;
-          height: auto;
-        }
-        .texts {
-          width: 80%;
-          margin-left: 1.5rem;
+          height: 30rem;
         }
       }
     }
   }
   .style {
-    width: 100%;
    /deep/ .el-carousel {
-    height: 18rem !important;
+    height: 30rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 18rem !important;
+    height: 25rem !important;
    }
    .item {
-    height: 18rem;
+    height: 22rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;
@@ -580,11 +539,11 @@ export default {
 @media (min-width: 980px) and (max-width: 1200px) {
   .single-banner{
     .banner-img {
-      height: 12rem;
+      height: 32rem;
     }
     .texts {
-      left: 2rem;
-      top:3rem;
+      left: 5rem;
+      top:17rem;
       .banner-title{
         font-size: 1.5rem;
       }
@@ -595,31 +554,22 @@ export default {
   }
   .block  {
     .inner {
-      width: 100%;
       .item  {
-        width: 100%;
-        flex-direction: row;
         .img-wrap {
-          width: 60%;
-          height: auto;
-        }
-        .texts {
-          width: 80%;
-          margin-left: 1.5rem;
+          height: 35rem;
         }
       }
     }
   }
   .style {
-    width: 100%;
    /deep/ .el-carousel {
-    height: 20rem !important;
+    height: 30rem !important;
    }     
    /deep/ .el-carousel__container {
-    height: 20rem !important;
+    height: 25rem !important;
    }
    .item {
-    height: 20rem;
+    height: 22rem;
     .text {
       line-height: 1.5rem;
       font-size: 1rem;

src/pages/userSharing/index.vue

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

src/store/index.js

@@ -19,23 +19,12 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
 
 const store = new Vuex.Store({
     state: {
-        modelType: false, //true为PC端，false为手机端
-        navSum: sessionStorage.getItem('navPageSize') || 10, // 导航栏显示的条目数量
+        modelType: false //true为PC端，false为手机端
     },
     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,