适配

src/components/menuTree/index.vue

@@ -32,10 +32,10 @@ export default {
 </script>
 <style lang="scss" scoped>
   
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
   .menu-child{
     /deep/ .el-menu-item {
-      height: 40px;line-height: 40px;
+      height: 40px;line-height: 40px;color: black !important;
     }
   }
   .el-submenu{
@@ -43,6 +43,7 @@ export default {
       height: 40px;
       line-height: 40px;
       font-size: 1rem;
+      color: black !important;
     }
   }
 }

src/layouts/header/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div :class="['header', { channel: isHome }]">
     <a class="logo" @click="toIndex">
+    <template v-if="!$store.getters.getModelType">
+      <img :src="require('@/assets/images/logo-black.png')" alt="">
+    </template>
+    <template v-else>
       <img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt="">
+    </template>
+      
     </a>
     <!-- pc端 -->
     <template v-if="$store.getters.getModelType">
@@ -22,8 +28,8 @@
       <div class="contentBox" v-show="modelType">
         <navbar ref="nav" :isHome.sync="isHome" :updateModelType="updateType"></navbar>
         <div class="modelBox">
-          <div class="searchBox"><img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch"></div>
-          <div class="languageBox"><img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"></div>
+          <div class="searchBox"><img class="search" :src="require('@/assets/images/search' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch"></div>
+          <div class="languageBox"><img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"></div>
           <div v-if="showSearch" class="search-wrap" @click.stop="stop">
             <input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
             <img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
@@ -130,7 +136,7 @@ $height: 90px;
   left: 0;
   width: 100%;
   // min-width: $min-width;
-  background-color: #fff;
+  // background-color: #fff;
   height: $height;
   box-sizing: content-box;
   &:not(.channel) {
@@ -239,7 +245,11 @@ $height: 90px;
   }
 }
 
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
+  .header{
+    color: black !important;
+    background-color: #fff;
+  }
   .contentBox{
     .searchBox, .languageBox{
       padding-left: 20px;

src/layouts/navbar/index.vue

@@ -179,5 +179,12 @@ $height: 90px;
     }
   }
 }
+@media (min-width: 280px) and (max-width: 1200px) {
+  /deep/.nav {
+    .el-menu-item {
+      padding: 0 8px;color: black !important;
+    }
+  }
+}
 
 </style>

src/pages/article/index.vue

@@ -302,7 +302,7 @@ export default {
     }
   }
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
 
   .article {
     /deep/.des {
@@ -338,4 +338,11 @@ export default {
     }
   }
 }
+@media (max-width: 320px) {
+  .wrap  {
+    .banner {
+      padding: 12rem 0 0  10rem;
+    }
+  }
+}
 </style>

src/pages/column/index.vue

@@ -922,7 +922,7 @@ export default {
 
               .pic {
                 width: 95%;
-                margin: 0 atuo;
+                margin: 0 auto;
               }
             }
           }
@@ -932,7 +932,7 @@ export default {
   }
 }
 
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
   
   .banner {
     height: 15rem !important;
@@ -987,4 +987,71 @@ export default {
   }
 }
 
+@media (max-width: 320px) {
+  .banner {
+    height: 13rem;
+    img {
+      height: 13rem !important;
+    }
+  }
+  .contents {
+    .article-wrap {
+      .articles {
+        .pic {
+          height: 10rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .contents {
+    .article-wrap {
+      .articles {
+        .pic {
+          height: 15rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .contents {
+    .article-wrap {
+      .articles {
+        .pic {
+          height: 20rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .contents {
+    .article-wrap {
+      .articles {
+        .pic {
+          height: 25rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .banner {
+    height: 18rem;
+    img {
+      height: 18rem !important;
+    }
+  }
+  .contents {
+    .article-wrap {
+      .articles {
+        .pic {
+          height: 30rem !important;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/column/result.vue

@@ -97,7 +97,7 @@ export default {
   background-color: #fff;
 }
 .articles {
-  width: 1000px;
+  width: 100%;
   padding-top: 47px;
   margin: 0 auto;
 }

src/pages/deviceIntroBeam/index.vue

@@ -179,9 +179,46 @@ export default {
     }
   }
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (max-width: 320px) {
+  .banner{
+    height: 13rem;
+    padding: 6rem 0 0 12rem;
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .banner{
+    height: 13rem;
+    padding: 8rem 0 0 13rem;
+  }
+ }
+ @media (min-width: 375px) and (max-width: 480px) {
   .banner{
     height: 15rem;
+    padding: 10rem 0 0 14rem;
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .banner{
+    height: 17rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .banner{
+    height: 25rem;
+    padding: 12rem 0 0 22rem;
   }
 }
 </style>

src/pages/deviceIntroLayout/index.vue

@@ -214,7 +214,7 @@ export default {
     padding: 50px 0;
   }
 }
-@media (min-width: 300px) and (max-width: 1200px)  {
+@media (min-width: 280px) and (max-width: 1200px)  {
   body{
     width: 100% !important;
   }
@@ -305,4 +305,46 @@ export default {
   }
 }
 
+@media (max-width: 320px) {
+  .banner{
+    height: 13rem;
+    padding: 6rem 0 0 12rem;
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .banner{
+    height: 15rem;
+    padding: 8rem 0 0 13rem;
+  }
+ }
+ @media (min-width: 375px) and (max-width: 480px) {
+  .banner{
+    height: 17rem;
+    padding: 10rem 0 0 14rem;
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
 </style>

src/pages/deviceIntroLinear/index.vue

@@ -235,9 +235,46 @@ export default {
     }
   }
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (max-width: 320px) {
+  .banner{
+    height: 13rem;
+    padding: 6rem 0 0 12rem;
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .banner{
+    height: 13rem;
+    padding: 8rem 0 0 13rem;
+  }
+ }
+ @media (min-width: 375px) and (max-width: 480px) {
   .banner{
     height: 15rem;
+    padding: 10rem 0 0 14rem;
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .banner{
+    height: 17rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .banner{
+    height: 19rem;
+    padding: 12rem 0 0 22rem;
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .banner{
+    height: 25rem;
+    padding: 12rem 0 0 22rem;
   }
 }
 </style>

src/pages/estate/event/index.vue

@@ -194,4 +194,325 @@ export default {
     }
   }
 }
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+  .tab-content{
+    padding: 20px 0;
+    .org{
+      width: 100%;
+      padding:15px;
+      flex-direction: column;
+      .left{
+        width: 100%;
+      }
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .event {
+        flex-direction: column;
+        .time {
+          width: 100%;
+          li {
+            width: 100%;
+            justify-content: flex-start;
+          }
+        }
+        .right {
+          width: 100%;
+          .list {
+            li {
+              padding: 1.25rem;
+              flex-direction: column;
+              .texts {
+                width: 100%;
+              }
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 13rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 15rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 15rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 18rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 10rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 20rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 22rem;
+      }
+      .texts {
+        top: 12rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 22rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 25rem;
+      }
+      .texts {
+        top: 15rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 25rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 32rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 27rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/estate/location/index.vue

@@ -165,4 +165,443 @@ export default {
   }
  
 }
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+  .tab-content{
+    padding: 20px 0;
+    .org{
+      width: 100%;
+      padding:15px;
+      flex-direction: column;
+      .left{
+        width: 100%;
+      }
+      img{
+        width: 100%;
+      }
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .event {
+        flex-direction: column;
+        .time {
+          width: 100%;
+          li {
+            width: 100%;
+            justify-content: flex-start;
+          }
+        }
+        .right {
+          width: 100%;
+          .list {
+            li {
+              padding: 1.25rem;
+              flex-direction: column;
+              .texts {
+                width: 100%;
+              }
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .tab-content {
+    padding: 1.25rem 0;
+    .item  {
+      padding: .85rem;
+      flex-direction: column !important;
+      .texts {
+        margin-top: .5rem;
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 13rem;
+      }
+    }
+    .item {
+      .img-wrap {
+        height: 13rem;
+      }
+      .texts {
+        h6 {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 13rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+     
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 18rem;
+      }
+    }
+    .item {
+        .img-wrap {
+          height: 15rem;
+        }
+        .texts {
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 15rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 15rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 20rem;
+      }
+    }
+    .item {
+        .img-wrap {
+          height: 18rem;
+        }
+        .texts {
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 18rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 10rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 24rem;
+      }
+    }
+    .item {
+        .img-wrap {
+          height: 22rem;
+        }
+        .texts {
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 20rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 22rem;
+      }
+      .texts {
+        top: 12rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 28rem;
+      }
+    }
+    .item {
+        .img-wrap {
+          height: 25rem;
+        }
+        .texts {
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 22rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 25rem;
+      }
+      .texts {
+        top: 15rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 30rem;
+      }
+    }
+    .item {
+        .img-wrap {
+          height: 28rem;
+        }
+        .texts {
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 25rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 32rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 32rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 27rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/estate/orgSetup/index.vue

@@ -130,4 +130,370 @@ export default {
   }
  
 }
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+  .tab-content{
+    padding: 20px 0;
+    .org{
+      width: 100%;
+      padding:15px;
+      flex-direction: column;
+      .left{
+        width: 100%;
+      }
+      img{
+        width: 100%;
+      }
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .event {
+        flex-direction: column;
+        .time {
+          width: 100%;
+          li {
+            width: 100%;
+            justify-content: flex-start;
+          }
+        }
+        .right {
+          width: 100%;
+          .list {
+            li {
+              padding: 1.25rem;
+              flex-direction: column;
+              .texts {
+                width: 100%;
+              }
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 13rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 13rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 18rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 15rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 15rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 20rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 18rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 10rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 24rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 20rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 22rem;
+      }
+      .texts {
+        top: 12rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 28rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 22rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 25rem;
+      }
+      .texts {
+        top: 15rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 30rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 25rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 32rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+    .org{
+      img{
+        width: 100%;
+        height: 32rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                margin-top: 1rem;
+                height: 27rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/estate/survey/index.vue

@@ -125,6 +125,173 @@ export default {
     }
   }
   }
- 
+}
+@media (max-width: 320px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .lg-bg {
+    width: 100%;
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .lg-bg {
+    width: 100%;
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 15rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .lg-bg {
+    width: 100%;
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .lg-bg {
+    width: 100%;
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 20rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .lg-bg {
+    width: 100%;
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 25rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 5rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .lg-bg {
+    width: 100%;
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 35rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 9rem;
+       
+      }
+    }
+  }
+  .tab-content {
+    .survey {
+      padding: 1.25rem;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+  .lg-bg {
+    width: 100%;
+  }
 }
 </style>

src/pages/exp/index.vue

@@ -197,7 +197,7 @@ export default {
      }
   }
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
   .wrap{
     /deep/ .el-carousel {
       height: 15rem;
@@ -223,4 +223,286 @@ export default {
     }
   }
 }
+@media (max-width: 320px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 13rem !important;
+    }
+    /deep/ .el-carousel__item {
+      height: 13rem !important;
+    }
+    /deep/ .el-carousel__container {
+      height: 13rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 13rem !important;
+    }
+    .banner-name {
+      left: 11rem;
+      top: 8rem;
+      font-size: 1.5rem;
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .text-center {
+        .pic {
+          width: 100%;
+          height: 13rem;
+        }
+      }
+     
+    }
+  }
+  .list {
+    li {
+      width: 100% !important;
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem !important;
+    }
+    /deep/ .el-carousel__item {
+      height: 15rem !important;
+    }
+    /deep/ .el-carousel__container {
+      height: 15rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 15rem !important;
+    }
+    .banner-name {
+      left: 15rem;
+      top: 10rem;
+      font-size: 1.5rem;
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .text-center {
+        .pic {
+          width: 100%;
+          height: 13rem;
+        }
+      }
+     
+    }
+  }
+  .list {
+    li {
+      width: 100% !important;
+    }
+  }
+ }
+ @media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 20rem !important;
+    }
+    /deep/ .el-carousel__item {
+      height: 20rem !important;
+    }
+    /deep/ .el-carousel__container {
+      height: 20rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 20rem !important;
+    }
+    .banner-name {
+      left: 20rem;
+      top: 13rem;
+      font-size: 1.5rem;
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .text-center {
+        .pic {
+          width: 100%;
+          height: 18rem;
+        }
+      }
+     
+    }
+  }
+  .list {
+    li {
+      width: 100% !important;
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 25rem !important;
+    }
+    /deep/ .el-carousel__item {
+      height: 25rem !important;
+    }
+    /deep/ .el-carousel__container {
+      height: 25rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 25rem !important;
+    }
+    .banner-name {
+      left: 22rem;
+      top: 15rem;
+      font-size: 1.5rem;
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .text-center {
+        .pic {
+          width: 100%;
+          height: 22rem;
+        }
+      }
+     
+    }
+  }
+  .list {
+    li {
+      width: 100% !important;
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 25rem !important;
+    }
+    /deep/ .el-carousel__item {
+      height: 25rem !important;
+    }
+    /deep/ .el-carousel__container {
+      height: 25rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 25rem !important;
+    }
+    .banner-name {
+      left: 22rem;
+      top: 15rem;
+      font-size: 1.5rem;
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .text-center {
+        .pic {
+          width: 100%;
+          height: 22rem;
+        }
+      }
+     
+    }
+  }
+  .list {
+    li {
+      width: 100% !important;
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 28rem !important;
+    }
+    /deep/ .el-carousel__item {
+      height: 28rem !important;
+    }
+    /deep/ .el-carousel__container {
+      height: 28rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 28rem !important;
+    }
+    .banner-name {
+      left: 39rem;
+      top: 22rem;
+      font-size: 2.5rem;
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .text-center {
+        .pic {
+          width: 100%;
+          height: 25rem;
+        }
+      }
+     
+    }
+  }
+  .list {
+    li {
+      width: 100% !important;
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 32rem !important;
+    }
+    /deep/ .el-carousel__item {
+      height: 32rem !important;
+    }
+    /deep/ .el-carousel__container {
+      height: 32rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 32rem !important;
+    }
+    .banner-name {
+      left: 39rem;
+      top: 22rem;
+      font-size: 2.5rem;
+    }
+  }
+  .block  {
+    padding: 2rem 0;
+    .inner {
+      width: 90%;
+      .text-center {
+        .pic {
+          width: 100%;
+          height: 32rem;
+        }
+      }
+     
+    }
+  }
+}
 </style>

src/pages/overviewDevHistory/index.vue

@@ -193,4 +193,303 @@ export default {
     }
   }
 }
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+  .tab-content{
+    width: 90%;
+    span {
+      font-size: 1.35rem;
+    }
+  }
+ .block  {
+  padding: 1.25rem 0;
+  .inner {
+    width: 90%;
+    h2 {
+      font-size: 1.5rem;
+    }
+    p {
+      font-size: 1rem;
+      margin: 10px 0 1.25rem;
+    }
+    .event {
+      flex-direction: column;
+      .time {
+        width: 100%;
+        li {
+          width: 100%;
+          justify-content: flex-start;
+        }
+      }
+      .right {
+        margin-top: 1.25rem;
+        width: 100%;
+        h6{
+          font-size: 2rem;
+        }
+        .list {
+          li {
+            padding: 1.25rem;
+            flex-direction: column;
+            align-items: flex-start;
+            .texts {
+              width: 100%;
+            }
+            .pic {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+ }
+}
+@media (min-width: 280px) and (max-width: 1200px) {
+  .single-banner {
+    .banner-img {
+      height: 15rem;
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap {
+    .banner-img {
+        height: 15rem;
+      }
+    .single-banner {
+      .texts {
+        top: 11rem !important;
+        left: 10rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                height: 13rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .banner-img {
+        height: 15rem;
+      }
+    .single-banner {
+      .texts {
+        top: 11rem !important;
+        left: 15rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                height: 15rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 14rem !important;
+        left: 18rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                height: 18rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 13rem !important;
+        left: 24rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                height: 22rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+ 
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 28rem;
+      }
+      .texts {
+        top: 20rem !important;
+        left: 34rem !important;
+        .banner-title {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                height: 25rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 36rem;
+      }
+      .texts {
+        top: 25rem !important;
+        left: 38rem !important;
+        .banner-title {
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                height: 28rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 40rem;
+      }
+      .texts {
+        top: 25rem !important;
+        left: 55rem !important;
+        .banner-title {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .event {
+        .right {
+          .list {
+            li {
+              .pic {
+                width: 100%;
+                height: 31rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
 </style>

src/pages/overviewIntro/index.vue

@@ -151,10 +151,133 @@ export default {
   }
   .tab-content{
     width: 90%;
+    margin: auto;
+    padding-top: 1.25rem;
+    .intro {
+      flex-direction: column;
+      .pic {
+        width: 100%;
+      }
+    }
+    .intro-bg {
+      padding-top: 3rem;
+      .texts {
+        h6 {
+          font-size: 1.6rem;
+        }
+      }
+    }
+    .right {
+      width: 100% !important;
+      margin-top: 1.25rem;
+      .text {
+        margin-top: 1.25rem;
+      }
+    }
     span {
       font-size: 1.35rem;
     }
   }
  
 }
+
+@media (max-width: 320px) {
+  .single-banner {
+    .banner-img {
+      height: 13rem;
+    }
+    .texts {
+      top: 9rem !important;
+      left: 11rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .single-banner {
+    .banner-img {
+      height: 15rem;
+    }
+    .texts {
+      top: 11rem !important;
+    left: 15rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+
+@media (min-width: 375px) and (max-width: 480px) {
+  .single-banner {
+    .banner-img {
+      height: 18rem;
+    }
+    .texts {
+      top: 14rem !important;
+    left: 18rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .single-banner {
+    .banner-img {
+      height: 22rem;
+    }
+    .texts {
+      top: 18rem !important;
+      left: 25rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .single-banner {
+    .banner-img {
+      height: 25rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .single-banner {
+    .banner-img {
+      height: 28rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .single-banner {
+    .banner-img {
+      height: 32rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
 </style>

src/pages/overviewLocation/index.vue

@@ -71,6 +71,9 @@ export default {
   span {
     font-size: 1.35rem;
   }
+  /deep/ img {
+    width: 100% !important;
+  }
 }
 .video {
   width: 100%;
@@ -100,7 +103,7 @@ export default {
   }
  
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 120px) {
   .single-banner {
     .banner-img {
       height: 15rem;
@@ -112,4 +115,123 @@ export default {
     
   }
 }
+@media (max-width: 320px) {
+  .wrap {
+    .banner-img {
+        height: 15rem;
+      }
+    .single-banner {
+      .texts {
+        top: 11rem !important;
+        left: 12rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .banner-img {
+        height: 15rem;
+      }
+    .single-banner {
+      .texts {
+        top: 11rem !important;
+        left: 15rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+
+}
+
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 14rem !important;
+        left: 18rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 12rem !important;
+        left: 24rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+ 
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 28rem;
+      }
+      .texts {
+        top: 20rem !important;
+        left: 34rem !important;
+        .banner-title {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 36rem;
+      }
+      .texts {
+        top: 25rem !important;
+        left: 38rem !important;
+        .banner-title {
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 40rem;
+      }
+      .texts {
+        top: 25rem !important;
+        left: 55rem !important;
+        .banner-title {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+
+}
 </style>

src/pages/overviewSetup/index.vue

@@ -123,6 +123,9 @@ export default {
     width: 100%;
     padding:15px;
     flex-direction: column;
+    .pic {
+      width: 100%;
+    }
     .left{
       width: 100%;
     }
@@ -130,7 +133,7 @@ export default {
   }
 }
 
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
   .single-banner {
     .banner-img {
       height: 15rem;
@@ -141,4 +144,135 @@ export default {
     }
   }
 }
+@media (max-width: 320px) {
+  .single-banner {
+    .banner-img {
+      height: 13rem;
+    }
+    .texts {
+      top: 9rem !important;
+      left: 11rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tab-content{
+    .org{
+    .pic {
+      width: 100%;
+      height: 13rem;
+    }
+  }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .single-banner {
+    .banner-img {
+      height: 15rem;
+    }
+    .texts {
+      top: 11rem !important;
+    left: 15rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+
+@media (min-width: 375px) and (max-width: 480px) {
+  .single-banner {
+    .banner-img {
+      height: 18rem;
+    }
+    .texts {
+      top: 14rem !important;
+    left: 18rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .single-banner {
+    .banner-img {
+      height: 22rem;
+    }
+    .texts {
+      top: 18rem !important;
+      left: 25rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .single-banner {
+    .banner-img {
+      height: 25rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tab-content{
+    .org{
+      .pic {
+        width: 100%;
+        height: 25rem;
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .single-banner {
+    .banner-img {
+      height: 28rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tab-content{
+    .org{
+      .pic {
+        width: 100%;
+        height: 28rem;
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .single-banner {
+    .banner-img {
+      height: 32rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tab-content{
+    .org{
+      .pic {
+        width: 100%;
+        height: 32rem;
+      }
+    }
+  }
+}
 </style>

src/pages/overviewTrailer/index.vue

@@ -104,16 +104,164 @@ export default {
   }
  
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
   .single-banner {
     .banner-img {
       height: 15rem;
     }
     .texts {
       top: 9rem !important;
-     left: 22rem !important;
+      left: 22rem !important;
     }
     
   }
 }
+@media (max-width: 320px) {
+  .wrap {
+    .banner-img {
+        height: 15rem;
+      }
+    .single-banner {
+      .texts {
+        top: 11rem !important;
+        left: 10rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .tab-content {
+    .video {
+      height: 18rem;
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .banner-img {
+        height: 15rem;
+      }
+    .single-banner {
+      .texts {
+        top: 11rem !important;
+        left: 15rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .tab-content {
+    .video {
+      height: 18rem;
+    }
+  }
+}
+
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        top: 14rem !important;
+        left: 18rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .tab-content {
+    .video {
+      height: 18rem;
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 22rem;
+      }
+      .texts {
+        top: 18rem !important;
+        left: 24rem !important;
+        .banner-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .tab-content {
+    .video {
+      height: 23rem;
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 28rem;
+      }
+      .texts {
+        top: 20rem !important;
+        left: 34rem !important;
+        .banner-title {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+  .tab-content {
+    .video {
+      height: 23rem;
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 36rem;
+      }
+      .texts {
+        top: 25rem !important;
+        left: 38rem !important;
+        .banner-title {
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+  .tab-content {
+    .video {
+      height: auto;
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 40rem;
+      }
+      .texts {
+        top: 25rem !important;
+        left: 55rem !important;
+        .banner-title {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+  .tab-content {
+    .video {
+      height: auto;
+    }
+  }
+}
 </style>

src/pages/publication/index.vue

@@ -126,4 +126,34 @@ export default {
   padding: 20px 0;
   margin: 0 auto;
 }
+@media (max-width: 1200px) {
+  .banner {
+    .texts {
+      .text {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tabs  {
+    // flex-direction: column;
+    width: 100%;
+    overflow-x: scroll;
+    li {
+      padding: 1.25rem 0;
+      margin: 0 1.25rem;
+    }
+  }
+  .tab-content{
+    width: 90%;
+    margin: 0 auto;
+  }
+}
+@media (max-width: 320px) {
+  .banner {
+    .texts {
+      left: 6rem;
+      top: 6rem;
+    }
+  }
+}
 </style>

src/pages/publication/monograph.vue

@@ -154,4 +154,15 @@ export default {
     background-color: #1583FF;
   }
 }
+@media (max-width: 1200px) {
+  .forms {
+    padding: 1.25rem;
+    flex-direction: column;
+    .item, .search,div {
+      width: 80%;margin: 0 auto;
+      justify-content: center;
+      margin-top: 20px;
+    }
+  } 
+}
 </style>

src/pages/publication/patent.vue

@@ -171,4 +171,15 @@ export default {
     background-color: #1583FF;
   }
 }
+@media (max-width: 1200px) {
+  .forms {
+    padding: 1.25rem;
+    flex-direction: column;
+    .item, .search,div {
+      width: 80%;margin: 0 auto;
+      justify-content: center;
+      margin-top: 20px;
+    }
+  } 
+}
 </style>

src/pages/publication/thesis.vue

@@ -155,4 +155,15 @@ export default {
     line-height: 30px;
   }
 }
+@media (max-width: 1200px) {
+  .forms {
+    padding: 1.25rem;
+    flex-direction: column;
+    .item, .search,div {
+      width: 80%;margin: 0 auto;
+      justify-content: center;
+      margin-top: 20px;
+    }
+  } 
+}
 </style>

src/pages/science/index.vue

@@ -4,7 +4,7 @@
       <img class="banner-img" :src="modules[0].form.pic" alt="" />
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
-        <p class="banner-des">{{ modules[0].form.des }}</p>
+        <p class="banner-des des">{{ modules[0].form.des }}</p>
       </div>
     </div>
 
@@ -169,4 +169,155 @@ export default {
     }
   }
 }
+@media (max-width: 320px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 20rem;
+      }
+      .texts {
+        top: 10rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 25rem;
+      }
+      .texts {
+        top: 10rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 35rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 35rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 40rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/sfel/index.vue

@@ -387,6 +387,7 @@ export default {
   padding-bottom: 25px;
   margin-bottom: 30px;
   border-bottom: 1px solid #ddd;
+  align-items: center;
   h5 {
     padding-left: 16px;
     font-size: 1.6rem;
@@ -992,6 +993,7 @@ export default {
       padding: 36px 22px;
       margin-right: 14px;
       background: url(../../assets/images/sfel/7.png)  no-repeat center;
+      background-size: 100% 100%;
       transition: .5s;
       cursor: pointer;
       &:nth-child(2) {
@@ -1060,6 +1062,9 @@ export default {
   }
 }
 @media (max-width: 1200px) {
+  .tools {
+    display: none;
+  }
   .sfel-banner{
     flex-direction: column;
     .newBox{
@@ -1149,7 +1154,7 @@ export default {
     }
   }
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
   .block {
     padding: 2rem 0;
   }
@@ -1206,4 +1211,716 @@ export default {
     }
   }
 }
+@media (max-width: 320px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 15rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 15rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 15rem;
+    img{
+      height: 15rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1.25rem;
+        margin-bottom: 1.25rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: 13rem !important;
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .shop-shows{
+        .slide {
+          height: 15rem;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: 15rem;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: 15rem !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: 15rem ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: 15rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 20rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 20rem;
+   }
+   /deep/ .el-carousel__item{
+    height: 20rem;
+    img{
+      height: 20rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1.25rem;
+        margin-bottom: 1.25rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: 15rem !important;
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .shop-shows{
+        .left  {
+          /deep/ .el-carousel{
+            height: 18rem;
+          }
+          /deep/ .el-carousel__container {
+            height: 18rem;
+          }
+          /deep/ .el-carousel__item{
+            height: 18rem;
+            img{
+              height: 18rem;
+            }
+          }
+        }
+        .slide {
+          height: 15rem;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: 15rem;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: 15rem !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: 15rem ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: 15rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  
+  .wrap {
+   /deep/ .el-carousel{
+    height: 22rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 22rem;
+   }
+   /deep/ .el-carousel__item{
+    height: 22rem;
+    img{
+      height: 22rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1.25rem;
+        margin-bottom: 1.25rem;
+        h5 {
+          font-size: 1.5rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: 15rem !important;
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: 18rem;
+          }
+        }
+      }
+      .shop-shows{
+        .left  {
+          /deep/ .el-carousel{
+            height: 20rem;
+          }
+          /deep/ .el-carousel__container {
+            height: 20rem;
+          }
+          /deep/ .el-carousel__item{
+            height: 20rem;
+            img{
+              height: 20rem;
+            }
+          }
+        }
+        .slide {
+          height: 18rem;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: 17rem;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: 15rem !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: 15rem ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: 15rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  
+  .wrap {
+   /deep/ .el-carousel{
+    height: 25rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 25rem;
+   }
+   /deep/ .el-carousel__item{
+    height: 25rem;
+    img{
+      height: 25rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1.25rem;
+        margin-bottom: 1.25rem;
+        h5 {
+          font-size: 1.5rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: 20rem !important;
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: 22rem;
+          }
+        }
+      }
+      .shop-shows{
+        .left  {
+          /deep/ .el-carousel{
+            height: 22rem;
+          }
+          /deep/ .el-carousel__container {
+            height: 22rem;
+          }
+          /deep/ .el-carousel__item{
+            height: 22rem;
+            img{
+              height: 22rem;
+            }
+          }
+        }
+        .slide {
+          height: 20rem;
+          p {
+            line-height: 2.5rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: 20rem;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: 20rem !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: 18rem ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: 18rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  
+  .wrap {
+   /deep/ .el-carousel{
+    height: 28rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 28rem;
+   }
+   /deep/ .el-carousel__item{
+    height: 28rem;
+    img{
+      height: 28rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1.25rem;
+        margin-bottom: 1.25rem;
+        h5 {
+          font-size: 1.5rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: 25rem !important;
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .shop-shows{
+        .left  {
+          /deep/ .el-carousel{
+            height: 28rem;
+          }
+          /deep/ .el-carousel__container {
+            height: 28rem;
+          }
+          /deep/ .el-carousel__item{
+            height: 28rem;
+            img{
+              height: 28rem;
+            }
+          }
+        }
+        .slide {
+          height: 23rem;
+          p {
+            line-height: 2.5rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: 23rem;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          li{
+            .pic {
+              height: 23rem !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: 20rem !important;
+          }
+        }
+        .left {
+          .slides {
+            .item  {
+              height: 13rem !important;
+            }
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: 20rem ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: 20rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  
+  .wrap {
+   /deep/ .el-carousel{
+    height: 32rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 32rem;
+   }
+   /deep/ .el-carousel__item{
+    height: 32rem;
+    img{
+      height: 32rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1.25rem;
+        margin-bottom: 1.25rem;
+        h5 {
+          font-size: 1.5rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: 32rem !important;
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: 30rem;
+          }
+        }
+      }
+      .shop-shows{
+        .left  {
+          /deep/ .el-carousel{
+            height: 35rem;
+          }
+          /deep/ .el-carousel__container {
+            height: 35rem;
+          }
+          /deep/ .el-carousel__item{
+            height: 35rem;
+            img{
+              height: 35rem;
+            }
+          }
+        }
+        .slide {
+          height: 28rem;
+          p {
+            line-height: 2.5rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: 28rem;
+          .text {
+            line-height: 3rem;
+            font-size: 1.5rem;
+          }
+        }
+        .card-list  {
+          li{
+            .pic {
+              height: 26rem !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: 25rem !important;
+          }
+        }
+        .left {
+          .slides {
+            .item  {
+              height: 15rem !important;
+            }
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: 28rem ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: 28rem !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  
+  .wrap {
+   /deep/ .el-carousel{
+    height: 40rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 40rem;
+   }
+   /deep/ .el-carousel__item{
+    height: 40rem;
+    img{
+      height: 40rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1.25rem;
+        margin-bottom: 1.25rem;
+        h5 {
+          font-size: 1.5rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: 35rem !important;
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: 35rem;
+          }
+        }
+      }
+      .shop-shows{
+        .left  {
+          /deep/ .el-carousel{
+            height: 40rem;
+          }
+          /deep/ .el-carousel__container {
+            height: 40rem;
+          }
+          /deep/ .el-carousel__item{
+            height: 40rem;
+            img{
+              height: 40rem;
+            }
+          }
+        }
+        .slide {
+          height: 35rem;
+          p {
+            line-height: 2.5rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: 32rem;
+          .text {
+            line-height: 3rem;
+            font-size: 1.5rem;
+          }
+        }
+        .card-list  {
+          li{
+            .pic {
+              height: 30rem !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: 30rem !important;
+          }
+        }
+        .left {
+          .slides {
+            .item  {
+              height: 18rem !important;
+            }
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: 32rem ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: 32rem !important;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/talent/index.vue

@@ -33,7 +33,7 @@
 
     <div class="style">
       <h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6>
-      <el-carousel :interval="4000" type="card" height="36rem" :autoplay="false">
+      <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)">
@@ -253,7 +253,7 @@ export default {
     line-height: 30px;
   }
 }
-@media (min-width: 280px) and (max-width: 750px) {
+@media (min-width: 280px) and (max-width: 1200px) {
   .single-banner{
     .texts {
       left: 200px;
@@ -289,4 +289,292 @@ export default {
     }
   }
 }
+
+@media (max-width: 320px) {
+  .single-banner{
+    .banner-img {
+      height: 13rem;
+    }
+    .texts {
+      left: 5rem;
+      top:3rem;
+      .banner-title{
+        font-size: 1.5rem;
+      }
+      .banner-des {
+        font-size: 1rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .item  {
+        .img-wrap {
+          height: 15rem;
+        }
+      }
+    }
+  }
+  .style {
+   /deep/ .el-carousel {
+    height: 25rem !important;
+   }     
+   /deep/ .el-carousel__container {
+    height: 18rem !important;
+   }
+   .item {
+    height: 15rem;
+    .text {
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+   }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .single-banner{
+    .banner-img {
+      height: 18rem;
+    }
+    .texts {
+      left: 5rem;
+      top:8rem;
+      .banner-title{
+        font-size: 1.5rem;
+      }
+      .banner-des {
+        font-size: 1rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .item  {
+        .img-wrap {
+          height: 18rem;
+        }
+      }
+    }
+  }
+  .style {
+   /deep/ .el-carousel {
+    height: 25rem !important;
+   }     
+   /deep/ .el-carousel__container {
+    height: 18rem !important;
+   }
+   .item {
+    height: 15rem;
+    .text {
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+   }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .single-banner{
+    .banner-img {
+      height: 18rem;
+    }
+    .texts {
+      left: 5rem;
+      top:8rem;
+      .banner-title{
+        font-size: 1.5rem;
+      }
+      .banner-des {
+        font-size: 1rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .item  {
+        .img-wrap {
+          height: 18rem;
+        }
+      }
+    }
+  }
+  .style {
+   /deep/ .el-carousel {
+    height: 25rem !important;
+   }     
+   /deep/ .el-carousel__container {
+    height: 18rem !important;
+   }
+   .item {
+    height: 15rem;
+    .text {
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+   }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .single-banner{
+    .banner-img {
+      height: 20rem;
+    }
+    .texts {
+      left: 5rem;
+      top:8rem;
+      .banner-title{
+        font-size: 1.5rem;
+      }
+      .banner-des {
+        font-size: 1rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .item  {
+        .img-wrap {
+          height: 20rem;
+        }
+      }
+    }
+  }
+  .style {
+   /deep/ .el-carousel {
+    height: 25rem !important;
+   }     
+   /deep/ .el-carousel__container {
+    height: 18rem !important;
+   }
+   .item {
+    height: 18rem;
+    .text {
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+   }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .single-banner{
+    .banner-img {
+      height: 28rem;
+    }
+    .texts {
+      left: 5rem;
+      top:17rem;
+      .banner-title{
+        font-size: 1.5rem;
+      }
+      .banner-des {
+        font-size: 1rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .item  {
+        .img-wrap {
+          height: 25rem;
+        }
+      }
+    }
+  }
+  .style {
+   /deep/ .el-carousel {
+    height: 30rem !important;
+   }     
+   /deep/ .el-carousel__container {
+    height: 25rem !important;
+   }
+   .item {
+    height: 22rem;
+    .text {
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+   }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .single-banner{
+    .banner-img {
+      height: 32rem;
+    }
+    .texts {
+      left: 5rem;
+      top:17rem;
+      .banner-title{
+        font-size: 1.5rem;
+      }
+      .banner-des {
+        font-size: 1rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .item  {
+        .img-wrap {
+          height: 30rem;
+        }
+      }
+    }
+  }
+  .style {
+   /deep/ .el-carousel {
+    height: 30rem !important;
+   }     
+   /deep/ .el-carousel__container {
+    height: 25rem !important;
+   }
+   .item {
+    height: 22rem;
+    .text {
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+   }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .single-banner{
+    .banner-img {
+      height: 32rem;
+    }
+    .texts {
+      left: 5rem;
+      top:17rem;
+      .banner-title{
+        font-size: 1.5rem;
+      }
+      .banner-des {
+        font-size: 1rem;
+      }
+    }
+  }
+  .block  {
+    .inner {
+      .item  {
+        .img-wrap {
+          height: 35rem;
+        }
+      }
+    }
+  }
+  .style {
+   /deep/ .el-carousel {
+    height: 30rem !important;
+   }     
+   /deep/ .el-carousel__container {
+    height: 25rem !important;
+   }
+   .item {
+    height: 22rem;
+    .text {
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+   }
+  }
+}
 </style>

src/pages/talentCenter/index.vue

@@ -283,4 +283,199 @@ export default {
     width: 98%;
   }
 }
+@media (max-width: 1200px) {
+  .content {
+    .article {
+      flex-direction: column;
+      .left {
+        width: 100%;
+        .recruit {
+          li {
+            flex-direction: column;
+            .pic {
+              width: 100%;
+
+            }
+            .texts {
+              margin-top: .8rem;
+            }
+          }
+        }
+        .notice {
+          flex-direction: column;
+          li {
+            width: 100%;
+          }
+        }
+      }
+      .right{
+        width: 100%;
+        .el-tree {
+          display: none;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 13rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 13rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 15rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 15rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 18rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 18rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 22rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 22rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 26rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 26rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 30rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 30rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 35rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 35rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/userSharing/index.vue

@@ -218,4 +218,222 @@ export default {
     }
   }
 }
+
+@media (max-width: 320px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    padding: 2rem 0;
+    .inner {
+      .pic  {
+        height: 20rem;
+      }
+      .card{
+        bottom: 0;
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        top: 6rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    padding: 2rem 0;
+    .inner {
+      .pic  {
+        height: 20rem;
+      }
+      .card{
+        bottom: 0;
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 20rem;
+      }
+      .texts {
+        top: 10rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    padding: 2rem 0;
+    .inner {
+      .pic  {
+        height: 25rem;
+      }
+      .card{
+        bottom: 0;
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 25rem;
+      }
+      .texts {
+        top: 10rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    padding: 2rem 0;
+    .inner {
+      .pic  {
+        height: 30rem;
+      }
+      .card{
+        bottom: 0;
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 35rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    padding: 2rem 0;
+    .inner {
+      .pic  {
+        height: 35rem;
+      }
+      .card{
+        bottom: 0;
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 40rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    padding: 2rem 0;
+    .inner {
+      .pic  {
+        height: 40rem;
+      }
+      .card{
+        bottom: 0;
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 40rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    padding: 2rem 0;
+    .inner {
+      .pic  {
+        height: 50rem;
+      }
+      .card{
+        bottom: 0;
+      }
+    }
+  }
+}
 </style>