全站去掉移动适配

src/pages/article/index.vue

@@ -19,6 +19,7 @@
           <p v-if="form.summary"
              class="brief">{{ form.summary }}</p>
           <div class="des"
+               id="mainBody"
                v-html="form.mainBody"></div>
           <div v-if="form.fileList && form.fileList.length"
                class="annex">
@@ -126,6 +127,16 @@ export default {
               if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
               data.releaseTime = data.releaseTime.split(' ')[0]
               this.form = data
+              // 手动修复tinymce缩进bug（p标签下包裹多个子元素，p标签上只有text-indent，没有font-size，导致缩进2em的情况下未能缩进两个字符）
+              this.$nextTick(() => {
+                document.querySelectorAll('#mainBody p').forEach(e => {
+                  try {
+                    if (e.children.length && e.style.textIndent) {
+                      e.style.fontSize = e.children[0].style.fontSize
+                    }
+                  } catch (e) { }
+                })
+              })
               this.columnId = data.columnId
               // 如果没上传banner
               if (!data.bannerImg) {

src/pages/column/index.vue

@@ -341,7 +341,7 @@
                                alt=""
                                onerror="javascript:this.src='./images/1.png';" />
 
-                          <template v-else>
+                          <template v-else-if="item.fileList">
                             <!-- <el-image class="media-pic"
                                       :style="{backgroundImage: 'url(http://10.10.11.7/iasf/sysFiles/preview/1706961813193707521)'}"
                                       src="http://10.10.11.7/iasf/sysFiles/preview/1706961813193707521"
@@ -357,7 +357,6 @@
                             </video>
                             <el-image v-else
                                       class="media-pic"
-                                      :style="{backgroundImage: 'url(' + item.fileList[0].filePath + ')'}"
                                       :src="item.fileList[0].filePath"
                                       :preview-src-list="[item.fileList[0].filePath]">
                             </el-image>
@@ -725,6 +724,7 @@ export default {
           columnIds: [411, 412, 413],
           pageNum: 1,
           pageSize: 10,
+          publicationTimeSort: 1
         }).then(({ data }) => {
           this.site2News = Util.removeTag(data.records);
         }).catch((res) => { });
@@ -732,7 +732,8 @@ export default {
         this.$post(this.api.newlyPublishedArticles, {
           pageNum: 1,
           pageSize: 5,
-          siteId: this.site
+          siteId: this.site,
+          publicationTimeSort: 1
         }).then(({ data }) => {
           this.news = Util.removeTag(data.records);
         }).catch((res) => { });
@@ -1178,8 +1179,8 @@ export default {
         margin-left: 10px;
         li {
             flex-direction: column;
-            width: calc(25% - 20px);
+            width: calc(25% - 30px);
-            margin-right: 20px;
+            margin-right: 30px;
             background-color: transparent;
             &:nth-child(4n) {
                 margin-right: 0;
@@ -1187,16 +1188,13 @@ export default {
         }
         .media-video {
             width: 100%;
-            min-height: 155px;
+            height: 155px;
         }
         /deep/.media-pic {
             width: 100%;
-            min-height: 155px;
+            height: 155px;
-            // height: 200px;
-            background-position: center center;
-            background-repeat: no-repeat;
             img {
-                opacity: 0;
+                object-fit: cover;
             }
         }
         .texts {
@@ -1206,7 +1204,7 @@ export default {
         h6 {
             margin-top: 10px;
             margin-bottom: 0;
-            font-size: 1.2rem;
+            font-size: 1rem;
             text-align: center;
         }
     }
@@ -1407,127 +1405,4 @@ export default {
         color: #333;
     }
 }
-@media (max-width: 1200px) {
-    .banner {
-        height: 15rem !important;
-        img {
-            height: 15rem !important;
-        }
-        .texts {
-            top: 6rem;
-            left: 3rem;
-        }
-    }
-    .article {
-        flex-direction: column;
-
-        .columns {
-            width: 40%;
-        }
-        .left {
-            width: 100%;
-
-            .forms {
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-
-                .item,
-                .search {
-                    margin: 20px 0 0 0;
-                }
-
-                .item:first-child {
-                    margin: 0;
-                }
-
-                div {
-                    width: 100%;
-                }
-            }
-        }
-
-        .article-wrap {
-            width: 90%;
-            margin: 0 auto;
-        }
-
-        .articles {
-            li {
-                flex-direction: column;
-                align-items: flex-start;
-                padding: 1rem;
-                margin-top: 1rem;
-                .pic {
-                    width: 100%;
-                    margin: 10px 0;
-                }
-            }
-            .readDetail {
-                .texts {
-                    padding-left: 0;
-                }
-            }
-        }
-        .media {
-            li {
-                padding: 0;
-            }
-        }
-
-        .right {
-            width: 95%;
-            margin: 20px auto;
-        }
-    }
-}
-
-@media (max-width: 640px) {
-    .banner {
-        height: 12rem !important;
-        img {
-            height: 12rem !important;
-        }
-        .texts {
-            left: 2rem;
-            bottom: 2rem;
-            .text {
-                font-size: 1.5rem;
-            }
-        }
-    }
-    .article {
-        .contents {
-            flex-direction: column;
-            padding: 0 15px;
-        }
-        .columns,
-        .article-wrap {
-            width: 100%;
-            margin-right: 0;
-        }
-        .articles {
-            li {
-                .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;
-            }
-        }
-    }
-}
 </style>

src/pages/column/result.vue

@@ -170,32 +170,4 @@ export default {
         color: #333;
     }
 }
-@media (max-width: 1100px) {
-    .top {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    .search {
-        margin-bottom: 10px;
-    }
-}
-
-@media (max-width: 750px) {
-    .articles {
-        width: 90%;
-        .top {
-            flex-direction: column;
-            .search {
-                width: 95%;
-                margin: 0 auto;
-            }
-        }
-        .none {
-            margin-top: 50px;
-            .text {
-                font-size: 0.5rem;
-            }
-        }
-    }
-}
 </style>

src/pages/contactUs/index.vue

@@ -196,11 +196,4 @@ export default {
         background-color: #1583ff;
     }
 }
-@media (max-width: 1200px) {
-    .inner {
-        .contact {
-            padding: 3rem 1rem;
-        }
-    }
-}
 </style>

src/pages/devHistory/index.vue

@@ -92,11 +92,4 @@ export default {
         overflow: auto;
     }
 }
-@media (max-width: 1000px) {
-    .history {
-        .inner {
-            width: 90%;
-        }
-    }
-}
 </style>

src/pages/deviceIntroBeam/index.vue

@@ -230,62 +230,4 @@ $banner-height: 21.6rem;
         border-left: 4px solid #1583ff;
     }
 }
-
-@media (max-width: 1200px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-    .beamBox {
-        .imgText {
-            bottom: 4rem;
-            right: 4rem;
-        }
-    }
-    .share {
-        width: 90%;
-        padding-left: 0;
-        margin: 0 auto;
-    }
-    .beamBox {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-
-        .left {
-            width: 100%;
-        }
-        .des {
-            -webkit-line-clamp: 100;
-        }
-        .pic {
-            margin-top: 10px;
-            width: 100%;
-            height: auto;
-        }
-    }
-    .intro {
-        width: 90%;
-        padding: 1rem 0;
-        height: auto;
-        .intro-inner {
-            flex-direction: column;
-        }
-        .pic {
-            width: 80%;
-        }
-        .des {
-            width: 80%;
-            height: auto;
-            padding: 2rem 0 0;
-            -webkit-line-clamp: 100;
-        }
-    }
-    .unit {
-        width: 95%;
-        img {
-            width: 100%;
-        }
-    }
-}
 </style>

src/pages/deviceIntroLayout/index.vue

@@ -211,78 +211,4 @@ $banner-height: 21.6rem;
         border-left: 4px solid #1583ff;
     }
 }
-@media (max-width: 1400px) {
-    .share {
-        .card {
-            position: relative;
-            margin-left: -2.5%;
-        }
-        .inner {
-            max-width: none;
-            width: 95%;
-            .texts {
-                position: static;
-                display: flex;
-                flex-direction: column;
-                align-items: flex-end;
-                margin-left: 15%;
-                .des {
-                    width: 100%;
-                    -webkit-line-clamp: 100;
-                }
-            }
-        }
-        .pic {
-            width: 50%;
-            margin-top: 20px;
-        }
-    }
-
-    .bg {
-        width: 100%;
-    }
-    .intro {
-        height: 36rem;
-        margin-top: 0;
-        .pic {
-            width: 100%;
-            left: 0;
-            top: 6%;
-        }
-    }
-    .unit {
-        width: 95%;
-        img {
-            width: 100%;
-        }
-    }
-}
-@media (max-width: 980px) {
-    .share {
-        .pic {
-            width: 80%;
-        }
-    }
-}
-@media (max-width: 640px) {
-    .share {
-        .inner {
-            .texts {
-                margin: 0 auto;
-            }
-        }
-        .des {
-            margin-right: 0;
-        }
-    }
-    .intro {
-        height: auto;
-        .bg,
-        .pic {
-            position: static;
-            width: 100%;
-            height: auto;
-        }
-    }
-}
 </style>

src/pages/deviceIntroLinear/index.vue

@@ -244,118 +244,4 @@ $banner-height: 21.6rem;
         height: 85%;
     }
 }
-
-@media (min-width: 280px) and (max-width: 620px) {
-    .inner {
-        flex-direction: column;
-
-        .left,
-        .right {
-            width: 50%;
-            margin: 20px auto;
-        }
-    }
-
-    .history {
-        .left {
-            .line {
-                width: 100%;
-            }
-        }
-    }
-    .block {
-        padding: 50px 0;
-        .inner {
-            .texts {
-                .bg {
-                    width: 100%;
-                    height: 200px;
-                    margin: -50px 0px 0 0;
-                }
-            }
-        }
-    }
-}
-
-@media (max-width: 1200px) {
-    body {
-        width: 100% !important;
-    }
-
-    .history {
-        .inner {
-            width: 95%;
-        }
-        .texts {
-            flex-direction: column;
-        }
-        .bg {
-            margin: 0 auto;
-        }
-    }
-
-    .inner {
-        flex-direction: column;
-        width: 95%;
-        .left,
-        .right {
-            width: 95%;
-            margin: 20px auto;
-        }
-    }
-    .intro {
-        img {
-            height: auto;
-        }
-    }
-}
-@media (max-width: 980px) {
-    .history {
-        .bg {
-            width: 100%;
-        }
-    }
-}
-@media (max-width: 320px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
 </style>

src/pages/edu/index.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+        <el-carousel-item v-if="item.pic && item.isEnable"
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+                          :key="i">
-            <img :src="item.pic" alt="">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -14,27 +19,51 @@
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
+        <p class="intro wow fadeInUp"
-        <img class="block-pic br wow fadeInLeft" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
+           data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
+        <img class="block-pic br wow fadeInLeft"
+             data-wow-delay="0.8s"
+             :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+             width="100%"
+             height="536"
+             :src="modules[1].form.pic"
+             alt=""
+             @click="openLink(modules[1].form)">
       </div>
     </div>
-    
+
     <div class="block">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
+        <p class="intro wow fadeInUp"
-        <img class="block-pic wow fadeInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
+           data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
+        <img class="block-pic wow fadeInRight"
+             data-wow-delay="0.8s"
+             :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+             width="100%"
+             height="536"
+             :src="modules[2].form.pic"
+             alt=""
+             @click="openLink(modules[2].form)">
       </div>
     </div>
-    
+
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
         <ul class="list">
           <template v-for="(item, i) in modules[4].list">
-            <li v-if="item.isEnable" :key="i" class="wow fadeInUp" data-wow-delay="0.5s">
+            <li v-if="item.isEnable"
-              <img class="pic" :src="item.pic" alt="" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+                :key="i"
+                class="wow fadeInUp"
+                data-wow-delay="0.5s">
+              <img class="pic"
+                   :src="item.pic"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(item.link.linkName)}"
+                   @click="openLink(item)">
               <div class="texts">
                 <h6>{{ item.title }}</h6>
                 <p class="sub">{{ item.subTitle }}</p>
@@ -55,17 +84,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -76,7 +105,7 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -84,596 +113,90 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 
-.wrap{
+.wrap {
-  /deep/ .el-carousel {
+    /deep/ .el-carousel {
-    height: 21.6rem;
+        height: 21.6rem;
-    .el-carousel__container{
+        .el-carousel__container {
-      height: 21.6rem;
+            height: 21.6rem;
-    }
+        }
-    img{
+        img {
-      height: 21.6rem;
+            height: 21.6rem;
+        }
     }
-  }
 }
 
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.15rem 0;
-  .inner {
-    .b-title  {
-      font-size: 2.25rem;
-      margin-bottom: 2.25rem;
-    }
-    .intro  {
-      margin-bottom: 2.25rem;
-    }
-   
-  }
-}
-.block-pic {
-  transition: .3s;
-  height: auto;
-  &.br {
-    border-radius: 270px;
-  }
-  &:hover {
-    transform: scale(1.05);
-  }
-}
-.list {
-  li {
-    position: relative;
-    &:nth-child(even) {
-      text-align: right;
-      .texts {
-        left: 0;
-        text-align: left;
-      }
-    }
-  }
-  .pic {
-    width: 45%;
-    height: auto;
-  }
-  .texts {
-    position: absolute;
-    top: 7.59rem;
-    left: 40%;
-    width: 60%;
-    padding: 2.7rem 1.35rem ;
-    background-color: #fff;
-    overflow: hidden;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
-  h6 {
-    font-size: 1.8rem;
-    color: #3C3C3C;
-  }
-  .sub {
-    margin-top: 1.48rem;
-    font-size: 1.08rem;
-    color: #1C1C1C;
-    line-height: 33px;
-  }
-  .des {
-    margin-top: 1.2rem;
-    font-size: 1rem;
-    color: #3C3C3C;
-    line-height: 32px;
-  }
-}
-@media (max-width: 1520px) {
-  .list {
-    .pic {
-      width: 45%;
-    }
-    li:nth-child(odd) {
-      .texts {
-        width: 50%;
-      }
-    }
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
-    }
-    img{
-      height: 18rem;
-    }
-  }
-}
-.banner-item .banner-name {
-  font-size: 1.5rem;
-  bottom: 5.25rem;
-  left: 14.125rem;
-  line-height: 2rem
-}
- .block{ 
-  padding: 50px 0;
-  .inner {
-    width: 95%;margin: 0 auto;
-    .b-title{
-      margin-bottom: 30px;
-    }
-    .intro {
-      margin-bottom: 30px;
-    }
-    .block-pic{
-      height: 15rem;
-    }
-  }
-  .list{
-    li {
-      margin-top: 20px;
-      .pic{
-        width: 100%;height: 25rem;
-      }
-      .texts{
-        padding: 10px;
-        width: 70%;
-        top: 2rem;
-        height: auto;
-        left: 24%;
-      }
-    }
-  }
- }
-}
-
-@media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
     .banner-name {
-      font-size: 1rem;
+        font-size: 2.16rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            h6 {
-              font-size: 1rem;
-            }
-            .sub {
-              font-size: .85rem;
-              line-height: .85rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: .85rem;
-              line-height: .85rem;
-              margin-top: .5rem;
-
-            }
-          }
-        }
-      }
     }
-  }
 }
-@media (min-width: 320px) and (max-width: 375px) {
+.block {
-  .wrap  {
+    padding: 3.15rem 0;
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block  {
-    padding: 1.25rem 0;
     .inner {
-      .intro  {
+        .b-title {
-        margin-bottom: 1rem;
+            font-size: 2.25rem;
-      }
+            margin-bottom: 2.25rem;
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            top: 5rem;
-            h6 {
-              font-size: 1.5rem;
-            }
-            .sub {
-              font-size: 1.05rem;
-              line-height: 1.05rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: 1.05rem;
-              line-height: 1.05rem;
-              margin-top: .5rem;
-
-            }
-          }
         }
-      }
+        .intro {
-    }
+            margin-bottom: 2.25rem;
-  }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .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;
-
-            }
-          }
         }
-      }
     }
-  }
 }
-@media (min-width: 480px) and (max-width: 640px) {
+.block-pic {
-  .wrap  {
+    transition: 0.3s;
-    /deep/ .el-carousel{
+    height: auto;
-      height: 12rem !important;
+    &.br {
-    }
+        border-radius: 270px;
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
     }
-  }
+    &:hover {
-  .block  {
+        transform: scale(1.05);
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .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;
-
-            }
-          }
-        }
-      }
     }
-  }
 }
-@media (min-width: 640px) and (max-width: 768px)  {
+.list {
-  .wrap  {
+    li {
-    /deep/ .el-carousel{
+        position: relative;
-      height: 12rem !important;
+        &:nth-child(even) {
-    }
+            text-align: right;
-    /deep/ .el-carousel__container{
+            .texts {
-      height: 12rem !important;
+                left: 0;
-    }
+                text-align: left;
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .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;
-
             }
-          }
         }
-      }
-    }
-  }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
     }
-    /deep/ .el-carousel__container{
+    .pic {
-      height: 12rem !important;
+        width: 45%;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
         height: auto;
-      }
-      .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;
-
-            }
-          }
-        }
-      }
-    }
-  }
-}
-@media (min-width: 980px) and (max-width: 1200px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
     }
-    /deep/  .el-carousel__item {
+    .texts {
-      height: 12rem !important;
+        position: absolute;
+        top: 7.59rem;
+        left: 40%;
+        width: 60%;
+        padding: 2.7rem 1.35rem;
+        background-color: #fff;
+        overflow: hidden;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
     }
-  }
+    h6 {
-  .banner-item{
+        font-size: 1.8rem;
-    img {
+        color: #3c3c3c;
-      height: 12rem !important;
     }
-    .banner-name {
+    .sub {
-      font-size: 1rem;
+        margin-top: 1.48rem;
-      line-height: 1.5rem;
+        font-size: 1.08rem;
-      left: 2rem;
+        color: #1c1c1c;
-      bottom: 2rem;
+        line-height: 33px;
     }
-  }
+    .des {
-  .block  {
+        margin-top: 1.2rem;
-    padding: 1.25rem 0;
+        font-size: 1rem;
-    .inner {
+        color: #3c3c3c;
-      .intro  {
+        line-height: 32px;
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .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;
-
-            }
-          }
-        }
-      }
     }
-  }
 }
 </style>

src/pages/estate/event/index.vue

@@ -191,50 +191,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .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%;
-                                height: auto;
-                                margin-top: 1rem;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 </style>

src/pages/estate/index/index.vue

@@ -698,124 +698,4 @@ export default {
         }
     }
 }
-@media (max-width: 1520px) {
-}
-@media (max-width: 1200px) {
-    .sfel-banner {
-        flex-direction: column;
-        .newBox {
-            width: 100% !important;
-        }
-        .right {
-            margin-top: 10px;
-            width: 100%;
-            height: 410px;
-        }
-    }
-    .card {
-        flex-direction: column;
-        li {
-            width: 100%;
-            margin-top: 20px;
-        }
-    }
-    .shop-shows {
-        flex-direction: column;
-        .left {
-            width: 100%;
-        }
-        .right {
-            width: 100%;
-            margin-top: 20px;
-        }
-    }
-    .shows {
-        flex-direction: column;
-        .left {
-            width: 100%;
-        }
-        .card-list {
-            width: 100%;
-            margin-top: 20px;
-            li {
-                flex-direction: column;
-                .pic {
-                    width: 100% !important;
-                    margin-right: 0;
-                }
-                .texts {
-                    margin-top: 20px;
-                    width: 100%;
-                }
-            }
-        }
-    }
-    .talent {
-        .shows {
-            .left {
-                width: 100%;
-                margin-bottom: 20px;
-            }
-            .pic {
-                width: 100%;
-                min-height: 0;
-            }
-        }
-    }
-    .media-wrap {
-        flex-direction: column;
-        .left {
-            width: 100%;
-        }
-        .right {
-            width: 100%;
-            margin-top: 20px;
-        }
-    }
-    .news {
-        flex-direction: column;
-        li {
-            margin-top: 30px;
-            width: 100%;
-        }
-    }
-    .slide,
-    .list {
-        flex-direction: column;
-        .texts,
-        .img-wrap {
-            width: 100%;
-        }
-    }
-    .list {
-        li {
-            width: 100% !important;
-            margin-top: 20px;
-        }
-    }
-    .slides {
-        div {
-            flex: 1;
-        }
-    }
-    .program {
-        .list {
-            li {
-                background-size: cover;
-            }
-        }
-    }
-    #part6 {
-        .slide {
-            .texts {
-                height: 430px;
-            }
-        }
-    }
-}
-@media (max-width: 980px) {
-    /deep/ .el-carousel {
-        height: 600px;
-    }
-}
 </style>

src/pages/estate/location/index.vue

@@ -139,22 +139,4 @@ export default {
         -webkit-line-clamp: 8;
     }
 }
-@media (max-width: 1200px) {
-    .tab-content {
-        width: 80%;
-        padding: 1.25rem 0;
-        .item {
-            padding: 0.85rem;
-            flex-direction: column !important;
-            .texts {
-                margin-top: 0.5rem;
-                width: 100%;
-                padding: 0;
-            }
-        }
-        .img-wrap {
-            height: auto;
-        }
-    }
-}
 </style>

src/pages/estate/orgSetup/index.vue

@@ -97,21 +97,4 @@ export default {
     margin: 0 auto;
     text-align: center;
 }
-@media (max-width: 1200px) {
-    .tab-content {
-        padding: 20px 0;
-        .org {
-            width: 100%;
-            padding: 15px;
-            flex-direction: column;
-            .left {
-                width: 100%;
-            }
-            img {
-                width: 100%;
-                height: auto;
-            }
-        }
-    }
-}
 </style>

src/pages/estate/survey/index.vue

@@ -95,23 +95,4 @@ export default {
 .lg-bg {
     width: 40%;
 }
-@media (max-width: 1300px) {
-    .tab-content {
-        padding: 20px 0;
-    }
-    .lg-bg {
-        width: 100%;
-    }
-    .survey {
-        width: 95%;
-        padding: 80px 86px 29px 47%;
-        margin-bottom: 2rem;
-    }
-}
-@media (max-width: 768px) {
-    .survey {
-        padding: 30px;
-        background: none;
-    }
-}
 </style>

src/pages/exp/index.vue

@@ -230,329 +230,4 @@ $banner-height: 21.6rem;
         width: 28%;
     }
 }
-
-@media (min-width: 280px) and (max-width: 768px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
-            .el-carousel__container {
-                height: 15rem;
-            }
-            img {
-                height: 15rem;
-            }
-        }
-    }
-    .station {
-        .pic {
-            height: 20rem;
-        }
-    }
-    .list {
-        li {
-            height: 20rem;
-            h6 {
-                top: 5rem;
-            }
-        }
-    }
-}
-@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 {
-            padding: 7rem 0 0 1rem;
-            font-size: 1.5rem;
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            width: 90%;
-            .text-center {
-                .pic {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .list {
-        width: 80%;
-        margin: 0 auto;
-        li {
-            margin-top: 1rem;
-            width: 100% !important;
-        }
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .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 {
-            padding: 7rem 0 0 1rem;
-            font-size: 1.5rem;
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            width: 90%;
-            .text-center {
-                .pic {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .list {
-        width: 80%;
-        margin: 0 auto;
-        li {
-            margin-top: 1rem;
-            width: 100% !important;
-        }
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 13rem !important;
-        }
-        /deep/ .el-carousel__item {
-            height: 13rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 13rem !important;
-        }
-    }
-    .banner-item {
-        img {
-            height: 13rem !important;
-        }
-        .banner-name {
-            padding: 7rem 0 0 1rem;
-            font-size: 1.5rem;
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            width: 90%;
-            .text-center {
-                .pic {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .list {
-        width: 80%;
-        margin: 0 auto;
-        li {
-            margin-top: 1rem;
-            width: 100% !important;
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .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 {
-            padding: 7rem 0 0 1rem;
-            font-size: 1.5rem;
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            width: 90%;
-            .text-center {
-                .pic {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .list {
-        width: 80%;
-        margin: 0 auto;
-        li {
-            margin-top: 1rem;
-            width: 100% !important;
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .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 {
-            padding: 7rem 0 0 1rem;
-            font-size: 1.5rem;
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            width: 90%;
-            .text-center {
-                .pic {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .list {
-        width: 80%;
-        margin: 0 auto;
-        li {
-            margin-top: 1rem;
-            width: 100% !important;
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .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 {
-            padding: 7rem 0 0 1rem;
-            font-size: 1.5rem;
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            width: 90%;
-            .text-center {
-                .pic {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .list {
-        display: flex;
-        width: 100%;
-        li {
-            width: 25%;
-        }
-    }
-    .item3 {
-        width: 50% !important;
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .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 {
-            padding: 7rem 0 0 1rem;
-            font-size: 1.5rem;
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            width: 90%;
-            .text-center {
-                .pic {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .list {
-        display: flex;
-        width: 100%;
-        li {
-            width: 25%;
-        }
-    }
-    .item3 {
-        width: 50% !important;
-    }
-}
 </style>

src/pages/governance/index.vue

@@ -215,41 +215,4 @@ export default {
         height: 300px;
     }
 }
-@media (max-width: 1200px) {
-    .history {
-        .texts {
-            flex-direction: column;
-        }
-        .left {
-            width: 90%;
-        }
-        .bg {
-            width: 100%;
-            margin-top: 2rem;
-        }
-    }
-    .cards {
-        ul {
-            width: 98%;
-        }
-        li {
-            width: 100%;
-            margin: 0 0 20px 0;
-        }
-    }
-}
-@media (max-width: 640px) {
-    .committee {
-        .inner {
-            flex-direction: column;
-        }
-        .left {
-            width: 100%;
-        }
-        .pic {
-            width: 100%;
-            margin-top: 2rem;
-        }
-    }
-}
 </style>

src/pages/home/index.vue

@@ -464,500 +464,4 @@ export default {
         }
     }
 }
-
-// @media (min-width: 280px) and (max-width: 1200px) {
-//     .carousel {
-//         height: 21.87rem;
-//         img {
-//             height: 100%;
-//         }
-//         /deep/.el-carousel__container {
-//             height: 21.87rem;
-//         }
-//     }
-//     .about {
-//         .des {
-//             font-size: 1rem;
-//         }
-//     }
-//     .el-carousel__item {
-//         height: 21.87rem;
-//         img {
-//             height: 21.87rem;
-//         }
-//     }
-//     .block {
-//         padding: 3.125rem 0;
-//         .inner {
-//             width: 95%;
-//             margin: 0 auto;
-//             .b-title {
-//                 font-size: 2rem;
-//                 margin-bottom: 1.25rem;
-//             }
-//             .wow {
-//                 font-size: 1.5rem;
-//             }
-//             .intro {
-//                 margin-bottom: 1.25rem;
-//             }
-//             .card {
-//                 flex-direction: column;
-//                 li {
-//                     margin-top: 1.25rem;
-//                     width: 100%;
-//                 }
-//             }
-//             .news {
-//                 flex-direction: column;
-//                 li {
-//                     width: 100%;
-//                     margin-bottom: 15px;
-//                     img {
-//                         width: 10rem;
-//                     }
-//                     .texts {
-//                         width: calc(100% - 10rem);
-//                     }
-//                 }
-//             }
-//             .people {
-//                 li {
-//                     flex-direction: column;
-//                     margin-bottom: 1.25rem;
-//                     .pic {
-//                         width: 100%;
-//                         height: 21.875rem;
-//                     }
-//                     .texts {
-//                         padding-top: 1.25rem;
-//                         width: 100%;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-//     .card .pic {
-//         height: 20rem;
-//     }
-//     .about {
-//         width: 100%;
-//         padding: 1.25rem 0 1.875rem;
-//         .inner {
-//             width: 95%;
-//             margin: 0 auto;
-//             .line {
-//                 margin: 1.25rem 0 1.25rem;
-//             }
-//             .des {
-//                 margin-top: 1.25rem;
-//                 padding: 10px 1.25rem;
-//             }
-//         }
-//     }
-//     .glance {
-//         padding-bottom: 1.25rem;
-//     }
-//     .stat {
-//         flex-direction: column;
-//         li {
-//             width: 100%;
-//             text-align: center;
-//         }
-//     }
-// }
-
-// @media (min-width: 751px) and (max-width: 920px) {
-//     .news {
-//         flex-direction: column;
-//         li {
-//             width: 100%;
-//             margin-bottom: 0.9375rem;
-//             img {
-//                 width: 10rem;
-//             }
-//             .texts {
-//                 width: calc(100% - 10rem);
-//             }
-//         }
-//     }
-// }
-
-// @media (min-width: 320px) and (max-width: 375px) {
-//     .wrap {
-//         /deep/ .el-carousel {
-//             height: 15rem;
-//         }
-//         /deep/ .el-carousel__container {
-//             height: 15rem;
-//         }
-//         /deep/ .el-carousel__item {
-//             height: 15rem;
-//             img {
-//                 height: 15rem;
-//             }
-//         }
-//     }
-//     .block {
-//         padding: 1rem 0;
-//         .inner {
-//             .intro {
-//                 margin-bottom: 1rem;
-//                 font-size: 0.95rem;
-//                 line-height: 1rem;
-//             }
-//             .card {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         margin-top: 1.2rem;
-//                     }
-//                 }
-//             }
-//             .news {
-//                 li {
-//                     padding: 1.2rem;
-//                     img {
-//                         width: 8rem;
-//                     }
-//                 }
-//             }
-//             .people {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-//     .about {
-//         .inner {
-//             .des {
-//                 line-height: 1.5rem;
-//             }
-//         }
-//     }
-// }
-// @media (min-width: 375px) and (max-width: 480px) {
-//     .wrap {
-//         /deep/ .el-carousel {
-//             height: 15rem;
-//         }
-//         /deep/ .el-carousel__container {
-//             height: 15rem;
-//         }
-//         /deep/ .el-carousel__item {
-//             height: 15rem;
-//             img {
-//                 height: 15rem;
-//             }
-//         }
-//     }
-//     .block {
-//         padding: 1rem 0;
-//         .inner {
-//             .intro {
-//                 margin-bottom: 1rem;
-//                 font-size: 0.95rem;
-//                 line-height: 1rem;
-//             }
-//             .card {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         margin-top: 1.2rem;
-//                     }
-//                 }
-//             }
-//             .news {
-//                 li {
-//                     padding: 1.2rem;
-//                     img {
-//                         width: 8rem;
-//                     }
-//                 }
-//             }
-//             .people {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-//     .about {
-//         .inner {
-//             .des {
-//                 line-height: 1.5rem;
-//             }
-//         }
-//     }
-// }
-// @media (min-width: 480px) and (max-width: 640px) {
-//     .wrap {
-//         /deep/ .el-carousel {
-//             height: 18rem;
-//         }
-//         /deep/ .el-carousel__container {
-//             height: 18rem;
-//         }
-//         /deep/ .el-carousel__item {
-//             height: 18rem;
-//             img {
-//                 height: 18rem;
-//             }
-//         }
-//     }
-//     .block {
-//         padding: 1rem 0;
-//         .inner {
-//             .intro {
-//                 margin-bottom: 1rem;
-//                 font-size: 0.95rem;
-//                 line-height: 1rem;
-//             }
-//             .card {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         margin-top: 1.2rem;
-//                     }
-//                 }
-//             }
-//             .news {
-//                 li {
-//                     padding: 1.2rem;
-//                     img {
-//                         width: 8rem;
-//                     }
-//                 }
-//             }
-//             .people {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                 }
-//             }
-//             .about {
-//                 .des {
-//                     line-height: 1.5rem;
-//                 }
-//             }
-//         }
-//     }
-// }
-// @media (min-width: 640px) and (max-width: 768px) {
-//     .wrap {
-//         /deep/ .el-carousel {
-//             height: 20rem;
-//         }
-//         /deep/ .el-carousel__container {
-//             height: 20rem;
-//         }
-//         /deep/ .el-carousel__item {
-//             height: 20rem;
-//             img {
-//                 height: 20rem;
-//             }
-//         }
-//     }
-//     .block {
-//         padding: 1rem 0;
-//         .inner {
-//             .intro {
-//                 margin-bottom: 1rem;
-//                 font-size: 0.95rem;
-//                 line-height: 1rem;
-//             }
-//             .card {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         margin-top: 1.2rem;
-//                     }
-//                 }
-//             }
-//             .news {
-//                 li {
-//                     padding: 1.2rem;
-//                     img {
-//                         width: 8rem;
-//                     }
-//                 }
-//             }
-//             .people {
-//                 li {
-//                     .pic {
-//                         height: auto;
-//                     }
-//                 }
-//             }
-//             .about {
-//                 .des {
-//                     line-height: 1.2rem;
-//                 }
-//             }
-//             .stat {
-//                 flex-direction: row;
-//                 li {
-//                     width: 30%;
-//                 }
-//             }
-//         }
-//     }
-// }
-// @media (min-width: 768px) and (max-width: 980px) {
-//     .wrap {
-//         /deep/ .el-carousel {
-//             height: 22rem;
-//         }
-//         /deep/ .el-carousel__container {
-//             height: 22rem;
-//         }
-//         /deep/ .el-carousel__item {
-//             height: 22rem;
-//             img {
-//                 height: 22rem;
-//             }
-//         }
-//     }
-//     .block {
-//         padding: 1rem 0;
-//         .inner {
-//             .intro {
-//                 margin-bottom: 1rem;
-//                 font-size: 0.95rem;
-//                 line-height: 1rem;
-//             }
-//             .card {
-//                 flex-direction: row;
-//                 li {
-//                     width: 47%;
-//                     .pic {
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         margin-top: 1.2rem;
-//                     }
-//                 }
-//             }
-//             .news {
-//                 li {
-//                     padding: 1.2rem;
-//                     img {
-//                         width: 8rem;
-//                     }
-//                 }
-//             }
-//             .people {
-//                 li {
-//                     flex-direction: row;
-//                     &:nth-child(2) {
-//                         flex-direction: row-reverse !important;
-//                     }
-//                     .pic {
-//                         width: 47%;
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         width: 48%;
-//                     }
-//                 }
-//             }
-//             .about {
-//                 .des {
-//                     line-height: 1.2rem;
-//                 }
-//             }
-//             .stat {
-//                 flex-direction: row;
-//                 li {
-//                     width: 30%;
-//                 }
-//             }
-//         }
-//     }
-// }
-// @media (min-width: 980px) and (max-width: 1200px) {
-//     .wrap {
-//         /deep/ .el-carousel {
-//             height: 25rem;
-//         }
-//         /deep/ .el-carousel__container {
-//             height: 25rem;
-//         }
-//         /deep/ .el-carousel__item {
-//             height: 25rem;
-//             img {
-//                 height: 25rem;
-//             }
-//         }
-//     }
-//     .block {
-//         padding: 1rem 0;
-//         .inner {
-//             .intro {
-//                 margin-bottom: 1rem;
-//                 font-size: 0.95rem;
-//                 line-height: 1rem;
-//             }
-//             .card {
-//                 flex-direction: row;
-//                 li {
-//                     width: 47%;
-//                     .pic {
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         margin-top: 1.2rem;
-//                     }
-//                 }
-//             }
-//             .news {
-//                 li {
-//                     padding: 1.2rem;
-//                     img {
-//                         width: 8rem;
-//                     }
-//                 }
-//             }
-//             .people {
-//                 li {
-//                     flex-direction: row;
-//                     &:nth-child(2) {
-//                         flex-direction: row-reverse !important;
-//                     }
-//                     .pic {
-//                         width: 47%;
-//                         height: auto;
-//                     }
-//                     .texts {
-//                         width: 48%;
-//                     }
-//                 }
-//             }
-//             .about {
-//                 .des {
-//                 }
-//             }
-//             .stat {
-//                 flex-direction: row;
-//                 li {
-//                     width: 30%;
-//                 }
-//             }
-//         }
-//     }
-// }
 </style>

src/pages/iasf/index.vue

@@ -234,12 +234,11 @@
 
       <div class="block talent-block">
         <div class="inner">
-          <h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
+          <h2 class="b-title">{{ modules[11].form.title }}</h2>
-          <p class="intro wow fadeInUp"
+          <p class="intro"
              data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
           <div class="talent">
-            <div class="left wow fadeInLeft"
+            <div class="left">
-                 data-wow-delay="0.5s">
               <h6>{{ modules[12].form.title }}</h6>
               <p class="sub-title">{{ modules[12].form.subTitle }}</p>
               <div class="text"
@@ -252,8 +251,7 @@
             </div>
             <img :src="modules[12].form.pic"
                  alt=""
-                 class="pic wow fadeInRight"
+                 class="pic">
-                 data-wow-delay="0.5s">
           </div>
         </div>
       </div>
@@ -504,6 +502,7 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 $bannerHeight: calc(100vw / 2.03);
+$bannerMh: 800px;
 .carousel {
     z-index: 1;
     position: fixed;
@@ -511,11 +510,14 @@ $bannerHeight: calc(100vw / 2.03);
     left: 0;
     width: 100%;
     height: $bannerHeight;
+    min-height: $bannerMh;
     img {
         height: $bannerHeight;
+        min-height: $bannerMh;
     }
     /deep/.el-carousel__container {
         height: $bannerHeight;
+        min-height: $bannerMh;
     }
     .texts {
         position: absolute;
@@ -1086,105 +1088,29 @@ $bannerHeight: calc(100vw / 2.03);
         margin-right: 10px;
     }
 }
-// @media (max-width: 1470px) {
+@media (max-width: 1440px) {
-//     .carousel {
+    .carousel {
-//         height: 724px;
+        .texts {
-//         img {
+            top: 30%;
-//             height: 724px;
+            bottom: auto;
-//         }
+        }
-//         /deep/.el-carousel__container {
+    }
-//             height: 724px;
+}
-//         }
+@media (max-width: 980px) {
-//     }
+    .carousel {
-// }
+        height: 500px;
-// @media (max-width: 1470px) {
+        min-height: 0;
-//     .inner {
+        img {
-//         width: 95%;
+            height: 500px;
-//     }
+            min-height: 0;
-//     .card {
+        }
-//         li {
+        /deep/.el-carousel__container {
-//             height: auto;
+            height: 500px;
-//         }
+            min-height: 0;
-//     }
+        }
-//     .about {
+    }
-//         .pic {
+    .block-wrap {
-//             width: 700px;
+        top: 500px;
-//             height: auto;
+    }
-//         }
+}
-//     }
-// }
-// @media (max-width: 1370px) {
-//     .card {
-//         .texts {
-//             padding: 0 1rem;
-//         }
-//     }
-//     .about {
-//         .inner {
-//             height: auto;
-//         }
-//         .left {
-//             width: 100%;
-//         }
-//         .pic {
-//             position: static;
-//             width: auto;
-//             max-width: 100%;
-//             height: auto;
-//             margin-top: 10px;
-//         }
-//     }
-// }
-// @media (max-width: 1200px) {
-//     .carousel .texts {
-//         left: 5%;
-//         right: 5%;
-//     }
-//     .card {
-//         flex-direction: column;
-//         li {
-//             margin-top: 1.25rem;
-//             width: 100%;
-//         }
-//     }
-//     .news {
-//         flex-direction: column;
-//         li {
-//             width: 100%;
-//         }
-//     }
-//     .news-banner {
-//         flex-direction: column;
-//         .pic-wrap,
-//         .right {
-//             width: 100%;
-//         }
-//     }
-//     .news-carousel,
-//     .people {
-//         flex-direction: column;
-//         li {
-//             width: 100%;
-//             margin-bottom: 10px;
-//         }
-//     }
-//     .talent {
-//         flex-direction: column;
-//         .left,
-//         .pic {
-//             width: 100%;
-//         }
-//         .left {
-//             padding-bottom: 50px;
-//             margin-bottom: 10px;
-//         }
-//     }
-//     .entry {
-//         flex-direction: column;
-//         li {
-//             width: 100% !important;
-//             margin-right: 0;
-//         }
-//     }
-// }
 </style>

src/pages/industrial/index.vue

@@ -370,74 +370,4 @@ export default {
         text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
     }
 }
-@media (max-width: 1200px) {
-    .history {
-        .texts {
-            flex-direction: column;
-        }
-        .left {
-            width: 100%;
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-            margin-top: 1rem;
-        }
-    }
-    .land {
-        .inner {
-            flex-direction: column;
-        }
-        .pic,
-        .right {
-            width: 100%;
-        }
-        h6 {
-            margin-left: 0;
-        }
-        .right {
-            margin-top: 1rem;
-        }
-        .text {
-            height: auto;
-        }
-    }
-    .plan {
-        li {
-            flex-direction: column !important;
-            height: auto;
-            .left,
-            .pic {
-                width: 100%;
-            }
-            .pic {
-                margin: 1rem 0 0 !important;
-            }
-        }
-    }
-    .app {
-        li {
-            width: calc((100% - 10px) / 2);
-            height: 267px;
-            &:nth-child(2n) {
-                margin-right: 0;
-            }
-        }
-    }
-    .news {
-        flex-direction: column;
-        li {
-            width: 100%;
-            margin: 0 0 20px 0;
-        }
-    }
-}
-@media (max-width: 780px) {
-    .app {
-        li {
-            width: 100%;
-            margin-right: 0;
-        }
-    }
-}
 </style>

src/pages/lightSources/index.vue

@@ -222,10 +222,4 @@ export default {
     line-height: 1.6;
     color: #8d8d8d;
 }
-@media (max-width: 1200px) {
-    .table-wrap {
-        width: 100%;
-        overflow: auto;
-    }
-}
 </style>

src/pages/mission/index.vue

@@ -188,45 +188,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .inner {
-        width: 98%;
-    }
-    .item {
-        img {
-            margin-left: 30px;
-        }
-        .rightText {
-            right: 12px !important;
-        }
-        .texts {
-            width: 85%;
-            box-sizing: border-box;
-            left: 12px;
-        }
-    }
-}
-@media (max-width: 980px) {
-    .mind {
-        .list {
-            flex-direction: column;
-        }
-        li {
-            width: 100%;
-        }
-    }
-}
-@media (max-width: 480px) {
-    .mind {
-        li {
-            .pic {
-                width: 150px;
-                height: 130px;
-            }
-            .texts {
-                width: calc(100% - 150px);
-            }
-        }
-    }
-}
 </style>

src/pages/news/index.vue

@@ -783,995 +783,4 @@ export default {
         }
     }
 }
-
-@media (max-width: 1200px) {
-    .newsTab {
-        overflow-x: scroll;
-        display: -webkit-box;
-    }
-    .block {
-        padding: 50px 0;
-        .inner {
-            .more {
-                width: 100%;
-                margin: 20px auto 0;
-            }
-            .news-banner {
-                flex-direction: column;
-                img {
-                    width: 100%;
-                }
-                .right {
-                    margin-top: 10px;
-                    width: 100%;
-                    .inds {
-                        left: 50%;
-                        margin-left: -43px;
-                    }
-                }
-            }
-            .card {
-                flex-direction: column;
-                .wow {
-                    width: 95%;
-                    margin: 20px auto;
-                }
-            }
-            .b-title {
-                font-size: 20px;
-            }
-            .intro {
-                font-size: 15px;
-                margin-bottom: 50px;
-            }
-            .shop-shows {
-                flex-direction: column;
-                .left {
-                    width: 95%;
-                    margin: 0 auto;
-                }
-                .right {
-                    width: 93%;
-                    margin: 20px auto;
-                    .show-card {
-                        flex-direction: column;
-                        li {
-                            width: 100%;
-                            .pic {
-                                width: 100%;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .texts {
-                                margin-right: 30px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@media (min-width: 280px) and (max-width: 1200px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
-            .el-carousel__container {
-                height: 15rem;
-            }
-            img {
-                height: 15rem;
-            }
-        }
-    }
-    .banner-item .banner-name {
-        font-size: 1.5rem;
-    }
-    .newsTab {
-        li {
-            padding: 15px 10px;
-            font-size: 15px;
-            margin: 0;
-        }
-    }
-    .block {
-        padding: 20px 0;
-        .inner {
-            width: 90%;
-            .news-banner {
-                img {
-                    height: 20rem;
-                }
-            }
-            .b-title {
-                margin-bottom: 20px;
-            }
-            .intro {
-                margin-bottom: 20px;
-            }
-            .shop-shows {
-                .left {
-                    img {
-                        height: 20rem;
-                    }
-                }
-            }
-            .show-card {
-                .text {
-                    font-size: 13px;
-                    line-height: 20px;
-                    white-space: inherit;
-                }
-            }
-            .card-list {
-                padding: 20px 10px;
-                li {
-                    width: 100%;
-                    img {
-                        margin-right: 10px;
-                    }
-                    .texts {
-                        margin-right: 10px;
-                        h6 {
-                            font-size: 15px;
-                            font-weight: bold;
-                            display: -webkit-box;
-                            -webkit-box-orient: vertical;
-                            -webkit-line-clamp: 3;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                            margin-bottom: 5px;
-                        }
-                    }
-                    .des {
-                        line-height: 15px;
-                    }
-                    .arrow {
-                        margin-right: 0;
-                    }
-                }
-            }
-            .shows {
-                flex-direction: column;
-                .left {
-                    width: 100%;
-                    .pic {
-                        height: 20rem;
-                    }
-                }
-                .card-list {
-                    width: 100%;
-                    padding: 20px 0;
-                    li {
-                        .pic {
-                            width: 100px;
-                            height: 7.5rem;
-                        }
-                        .texts {
-                            h6 {
-                                font-size: 15px;
-                                font-weight: bold;
-                                display: -webkit-box;
-                                -webkit-box-orient: vertical;
-                                -webkit-line-clamp: 1;
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                            }
-                            .text {
-                                margin: 2px 0;
-                                font-size: 12px;
-                                display: -webkit-box;
-                                -webkit-box-orient: vertical;
-                                -webkit-line-clamp: 1;
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (max-width: 320px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 6rem;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 6rem;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                flex-direction: row;
-                img {
-                    width: 50%;
-                    height: auto;
-                }
-                .right {
-                    margin-top: 0;
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 30% !important;
-                    margin-right: 0.5rem;
-                    margin: 0 0.5rem 0 0 !important;
-                    .pic {
-                        height: auto;
-                    }
-                    &:last-child() {
-                        margin-right: 0 !important;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    margin-right: 0.5rem;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    margin-top: 0;
-                    .show-card {
-                        li {
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                            &:nth-child(2) {
-                                margin-top: 0.5rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .card-list {
-                    padding: 0;
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                flex-direction: row;
-                img {
-                    width: 50%;
-                    height: auto;
-                }
-                .right {
-                    margin-top: 0;
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 30% !important;
-                    margin-right: 0.5rem;
-                    margin: 0 0.5rem 0 0 !important;
-                    .pic {
-                        height: auto;
-                    }
-                    &:last-child() {
-                        margin-right: 0 !important;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    margin-right: 0.5rem;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    margin-top: 0;
-                    .show-card {
-                        li {
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                            &:nth-child(2) {
-                                margin-top: 0.5rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .card-list {
-                    padding: 0;
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 21.6rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 21.6rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 21.6rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 21.6rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                flex-direction: row;
-                img {
-                    width: 50%;
-                    height: auto;
-                }
-                .right {
-                    margin-top: 0;
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 30% !important;
-                    margin-right: 0.5rem;
-                    margin: 0 0.5rem 0 0 !important;
-                    .pic {
-                        height: auto;
-                    }
-                    &:last-child() {
-                        margin-right: 0 !important;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    margin-right: 0.5rem;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    margin-top: 0;
-                    .show-card {
-                        flex-direction: row;
-                        li {
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                            &:nth-child(2) {
-                                margin-top: 0;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .card-list {
-                    padding: 0;
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 </style>

src/pages/newsPress/index.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-carousel  :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+        <el-carousel-item v-if="item.pic && item.isEnable"
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+                          :key="i">
-            <img :src="item.pic" alt="">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -12,16 +17,25 @@
     </el-carousel>
 
     <div class="inner">
-      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable" :key="i">
+          <li v-if="item.isEnable"
-            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
+              :key="i">
-            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
+            <img class="pic wow fadeInLeft"
+                 data-wow-delay="0.1s"
+                 :src="item.pic"
+                 alt="">
+            <div class="texts wow fadeInRight"
+                 data-wow-delay="0.1s">
               <h6>{{ item.title }}</h6>
               <p class="sub">{{ item.subTitle }}</p>
               <div class="des">{{ item.des }}</div>
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(item.link.linkName)}"
+                   @click="openLink(item)">
             </div>
           </li>
         </template>
@@ -38,7 +52,7 @@ import Breadcrumb from '@/components/breadcrumb'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: []
     }
@@ -46,13 +60,13 @@ export default {
   components: {
     Breadcrumb
   },
-  mounted() {
+  mounted () {
     new WOW().init()
     this.getColumn()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -63,10 +77,10 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 获取父级所有栏目名称和id
-    getParent(data, id) {
+    getParent (data, id) {
       for (const e of data) {
         if (e.id == id) {
           this.routes.push({
@@ -88,10 +102,10 @@ export default {
       }
     },
     // 获取上级面包屑
-    getColumn() {
+    getColumn () {
       this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
         this.getParent(data, this.id)
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -99,532 +113,144 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
-.wrap{
+.wrap {
-  /deep/ .el-carousel {
+    /deep/ .el-carousel {
-    height: 24rem;
+        height: 24rem;
-    .el-carousel__container{
+        .el-carousel__container {
-      height: 24rem;
+            height: 24rem;
-    }
-    img{
-      height: 24rem;
-    }
-  }
-}
-.banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.85rem 0;
-}
-.inner {
-  /deep/ .el-breadcrumb__item {
-    font-size: 1.5rem;
-  }
-  padding-top: 35px;
-}
-.list {
-  margin: 2rem 0;
-  li {
-    position: relative;
-    &:nth-child(even) {
-      text-align: right;
-      .texts {
-        left: 0;
-        padding: 3rem 6rem 1.5rem 1.5rem;
-        text-align: left;
-      }
-    }
-  }
-  .pic {
-    width: 47%;
-    height: auto;
-  }
-  .texts {
-    position: absolute;
-    top: 6rem;
-    right: -2rem;
-    width: 61%;
-    // height: 440px;
-    padding: 3rem 1.5rem 1.5rem 5rem;
-    background: rgba(247, 247, 247, .72);
-  }
-  h6 {
-    font-size: 2rem;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    font-weight: bold;
-    color: #3C3C3C;
-  }
-  .sub {
-    margin: 1rem 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    color: #1C1C1C;
-    line-height: 33px;
-  }
-  .des {
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    color: #3C3C3C;
-    line-height: 1.6rem;
-  }
-  img {
-    width: 3.3rem;
-    height: 3.3rem;
-  }
-}
-@media (max-width: 1520px) {
-  .list {
-    li {
-      &:nth-child(even) {
-        .texts {
-          left: 25px;
-        }
-      }
-    }
-    .texts {
-      right: 25px;
-      width: 55%;
-    }
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
-    }
-    img{
-      height: 18rem;
-    }
-  }
-}
-.banner-item .banner-name[data-v-1525064c] {
-  font-size: 1.5rem;
-}
-  
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 25rem !important;
-        }
-        .texts {
-          padding: 10px 5px 10px  !important;
-          top: 30px;
-          height: auto;
-          h6{
-            font-size: 1.5rem !important;
-          }
-          p {
-            font-size: 1rem;
-            margin: 5px 0 !important;
-            line-height: 1.5rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
         }
-      }
+        img {
-    }
+            height: 24rem;
-  }
-}
-
-@media (max-width: 1200px) {
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 500px;
         }
-        .texts {
-          padding: 20px 10px 10px ;
-          top: 30px;
-          h6{
-            font-size: 2rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
-        }
-      }
     }
-  }
 }
-@media (max-width: 320px) {
+.banner-item {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
     .banner-name {
-      font-size: 1.5rem;
+        font-size: 2.16rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 1rem;
-          h6 {
-            font-size: 1rem !important;
-          }
-          .sub{
-             font-size: .85rem;
-          }
-          .des {
-            font-size: .85rem;
-            line-height: .85rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
     }
-  }
 }
-@media (min-width: 320px) and (max-width: 375px) {
+.block {
-  .wrap  {
+    padding: 3.85rem 0;
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
-    }
-  }
 }
-@media (min-width: 375px) and (max-width: 480px) {
+.inner {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
     /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
+        font-size: 1.5rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
     }
-  }
+    padding-top: 35px;
 }
-@media (min-width: 480px) and (max-width: 640px) {
+.list {
-  .wrap  {
+    margin: 2rem 0;
-    /deep/ .el-carousel{
+    li {
-      height: 12rem !important;
+        position: relative;
-    }
+        &:nth-child(even) {
-    /deep/ .el-carousel__container{
+            text-align: right;
-      height: 12rem !important;
+            .texts {
-    }
+                left: 0;
-    /deep/  .el-carousel__item {
+                padding: 3rem 6rem 1.5rem 1.5rem;
-      height: 12rem !important;
+                text-align: left;
-    }
+            }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 2rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
     }
-  }
+    .pic {
-}
+        width: 47%;
-@media (min-width: 640px) and (max-width: 768px) {
+        height: auto;
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
     }
-    /deep/  .el-carousel__item {
+    .texts {
-      height: 12rem !important;
+        position: absolute;
+        top: 6rem;
+        right: -2rem;
+        width: 61%;
+        // height: 440px;
+        padding: 3rem 1.5rem 1.5rem 5rem;
+        background: rgba(247, 247, 247, 0.72);
+    }
+    h6 {
+        font-size: 2rem;
+        font-family: SFProDisplay-Bold, SFProDisplay;
+        font-weight: bold;
+        color: #3c3c3c;
+    }
+    .sub {
+        margin: 1rem 0;
+        font-size: 1.2rem;
+        font-weight: 600;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #1c1c1c;
+        line-height: 33px;
+    }
+    .des {
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        color: #3c3c3c;
+        line-height: 1.6rem;
     }
-  }
-  .banner-item{
     img {
-      height: 12rem !important;
+        width: 3.3rem;
+        height: 3.3rem;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
-    }
-  }
 }
-@media (min-width: 768px) and (max-width: 980px) {
+@media (max-width: 1520px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
     .list {
-      li {
+        li {
-        .pic {
+            &:nth-child(even) {
-          width: 47%;
+                .texts {
-          height: auto !important;
+                    left: 25px;
+                }
+            }
         }
-        .texts  {
+        .texts {
-          top: 6rem;
+            right: 25px;
-          h6 {
+            width: 55%;
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
     }
-  }
 }
-@media (min-width: 980px) and (max-width: 1200px)  {
+@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap  {
+    .wrap {
-    /deep/ .el-carousel{
+        /deep/ .el-carousel {
-      height: 12rem !important;
+            height: 18rem;
-    }
+            .el-carousel__container {
-    /deep/ .el-carousel__container{
+                height: 18rem;
-      height: 12rem !important;
+            }
-    }
+            img {
-    /deep/  .el-carousel__item {
+                height: 18rem;
-      height: 12rem !important;
+            }
-    }
+        }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
     }
-    .banner-name {
+    .banner-item .banner-name[data-v-1525064c] {
-      font-size: 1.5rem;
+        font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
     }
-  }
+
-  .inner {
+    .inner {
-    .list {
+        width: 95%;
-      li {
+        .list {
-        .pic {
+            li {
-          width: 47%;
+                margin-top: 20px;
-          height: auto !important;
+                .pic {
-        }
+                    width: 100%;
-        .texts  {
+                    height: 25rem !important;
-          top: 8rem;
+                }
-          h6 {
+                .texts {
-            font-size: 2rem !important;
+                    padding: 10px 5px 10px !important;
-          }
+                    top: 30px;
-          .sub{
+                    height: auto;
-             font-size: 1.5rem;
+                    h6 {
-          }
+                        font-size: 1.5rem !important;
-          .des {
+                    }
-            font-size: 1.3rem;
+                    p {
-            line-height: 1.3rem;
+                        font-size: 1rem;
-          }
+                        margin: 5px 0 !important;
-          img {
+                        line-height: 1.5rem;
-            width: 2rem;height: 2rem;
+                    }
-          }
+                    .sub {
+                        margin: 10px 0;
+                    }
+                    .des {
+                        margin-bottom: 10px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>

src/pages/newsProcurement/index.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+        <el-carousel-item v-if="item.pic && item.isEnable"
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+                          :key="i">
-            <img :src="item.pic" alt="">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -12,16 +17,25 @@
     </el-carousel>
 
     <div class="inner">
-      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable" :key="i">
+          <li v-if="item.isEnable"
-            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
+              :key="i">
-            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
+            <img class="pic wow fadeInLeft"
+                 data-wow-delay="0.1s"
+                 :src="item.pic"
+                 alt="">
+            <div class="texts wow fadeInRight"
+                 data-wow-delay="0.1s">
               <h6>{{ item.title }}</h6>
               <p class="sub">{{ item.subTitle }}</p>
               <div class="des">{{ item.des }}</div>
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(item.link.linkName)}"
+                   @click="openLink(item)">
             </div>
           </li>
         </template>
@@ -38,7 +52,7 @@ import Breadcrumb from '@/components/breadcrumb'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: []
     }
@@ -46,13 +60,13 @@ export default {
   components: {
     Breadcrumb
   },
-  mounted() {
+  mounted () {
     new WOW().init()
     this.getColumn()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -63,10 +77,10 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 获取父级所有栏目名称和id
-    getParent(data, id) {
+    getParent (data, id) {
       for (const e of data) {
         if (e.id == id) {
           this.routes.push({
@@ -88,10 +102,10 @@ export default {
       }
     },
     // 获取上级面包屑
-    getColumn() {
+    getColumn () {
       this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
         this.getParent(data, this.id)
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -99,533 +113,81 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
-.wrap{
+.wrap {
-  /deep/ .el-carousel {
+    /deep/ .el-carousel {
-    height: 24rem;
+        height: 24rem;
-    .el-carousel__container{
+        .el-carousel__container {
-      height: 24rem;
+            height: 24rem;
-    }
-    img{
-      height: 24rem;
-    }
-  }
-}
-.banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.85rem 0;
-}
-.inner {
-  padding-top: 35px;
-  /deep/ .el-breadcrumb__item {
-    font-size: 1.5rem;
-  }
-}
-.list {
-  margin: 2rem 0;
-  li {
-    position: relative;
-    &:nth-child(even) {
-      text-align: right;
-      .texts {
-        left: 0;
-        padding: 3rem 6rem 1.5rem 1.5rem;
-        text-align: left;
-      }
-    }
-  }
-  .pic {
-    width: 47%;
-    height: auto;
-  }
-  .texts {
-    position: absolute;
-    top: 6rem;
-    right: -2rem;
-    width: 61%;
-    // height: 440px;
-    padding: 3rem 1.5rem 1.5rem 5rem;
-    background: rgba(247, 247, 247, .72);
-  }
-  h6 {
-    font-size: 2rem;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    font-weight: bold;
-    color: #3C3C3C;
-  }
-  .sub {
-    margin: 1rem 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    color: #1C1C1C;
-    line-height: 33px;
-  }
-  .des {
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    color: #3C3C3C;
-    line-height: 1.6rem;
-  }
-  img {
-    width: 3.3rem;
-    height: 3.3rem;
-  }
-}
-@media (max-width: 1520px) {
-  .list {
-    li {
-      &:nth-child(even) {
-        .texts {
-          left: 25px;
         }
-      }
+        img {
-    }
+            height: 24rem;
-    .texts {
-      right: 25px;
-      width: 55%;
-    }
-  }
-}
-
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
-    }
-    img{
-      height: 18rem;
-    }
-  }
-}
-.banner-item .banner-name[data-v-1525064c] {
-  font-size: 1.5rem;
-}
-  
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 25rem !important;
-        }
-        .texts {
-          padding: 10px 5px 10px  !important;
-          top: 30px;
-          height: auto;
-          h6{
-            font-size: 1.5rem !important;
-          }
-          p {
-            font-size: 1rem;
-            margin: 5px 0 !important;
-            line-height: 1.5rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
         }
-      }
     }
-  }
 }
-
+.banner-item {
-@media (max-width: 1200px) {
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 500px;
-        }
-        .texts {
-          padding: 20px 10px 10px ;
-          top: 30px;
-          h6{
-            font-size: 2rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-@media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 1rem;
-          h6 {
-            font-size: 1rem !important;
-          }
-          .sub{
-             font-size: .85rem;
-          }
-          .des {
-            font-size: .85rem;
-            line-height: .85rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
-    }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
     .banner-name {
-      font-size: 1.5rem;
+        font-size: 2.16rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
     }
-  }
 }
-@media (min-width: 375px) and (max-width: 480px) {
+.block {
-  .wrap  {
+    padding: 3.85rem 0;
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
-    }
-  }
 }
-@media (min-width: 480px) and (max-width: 640px) {
+.inner {
-  .wrap  {
+    padding-top: 35px;
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
     /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
+        font-size: 1.5rem;
     }
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 2rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
-    }
-  }
 }
-@media (min-width: 640px) and (max-width: 768px) {
+.list {
-  .wrap  {
+    margin: 2rem 0;
-    /deep/ .el-carousel{
+    li {
-      height: 12rem !important;
+        position: relative;
-    }
+        &:nth-child(even) {
-    /deep/ .el-carousel__container{
+            text-align: right;
-      height: 12rem !important;
+            .texts {
-    }
+                left: 0;
-    /deep/  .el-carousel__item {
+                padding: 3rem 6rem 1.5rem 1.5rem;
-      height: 12rem !important;
+                text-align: left;
-    }
+            }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
-        }
-      }
-    }
-  }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 6rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
     }
-  }
+    .pic {
-}
+        width: 47%;
-@media (min-width: 980px) and (max-width: 1200px)  {
+        height: auto;
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
     }
-    /deep/ .el-carousel__container{
+    .texts {
-      height: 12rem !important;
+        position: absolute;
-    }
+        top: 6rem;
-    /deep/  .el-carousel__item {
+        right: -2rem;
-      height: 12rem !important;
+        width: 61%;
+        // height: 440px;
+        padding: 3rem 1.5rem 1.5rem 5rem;
+        background: rgba(247, 247, 247, 0.72);
+    }
+    h6 {
+        font-size: 2rem;
+        font-family: SFProDisplay-Bold, SFProDisplay;
+        font-weight: bold;
+        color: #3c3c3c;
+    }
+    .sub {
+        margin: 1rem 0;
+        font-size: 1.2rem;
+        font-weight: 600;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #1c1c1c;
+        line-height: 33px;
+    }
+    .des {
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        color: #3c3c3c;
+        line-height: 1.6rem;
     }
-  }
-  .banner-item{
     img {
-      height: 12rem !important;
+        width: 3.3rem;
-    }
+        height: 3.3rem;
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
     }
-  }
-  .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;
-          }
-        }
-      }
-    }
-  }
 }
 </style>

src/pages/org/index.vue

@@ -104,31 +104,4 @@ export default {
     width: 50%;
     margin: 0 auto;
 }
-@media (max-width: 1300px) {
-    .org {
-        width: 100%;
-        padding: 15px;
-        .left {
-            width: 60%;
-        }
-        .pic {
-            width: 30%;
-            height: auto;
-        }
-    }
-    .lg-bg {
-        width: 85%;
-    }
-}
-@media (max-width: 980px) {
-    .org {
-        flex-direction: column;
-        .pic {
-            width: 100%;
-        }
-        .left {
-            width: 100%;
-        }
-    }
-}
 </style>

src/pages/overviewDevHistory/index.vue

@@ -212,57 +212,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .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%;
-                                height: auto;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 </style>

src/pages/overviewIntro/index.vue

@@ -187,35 +187,4 @@ export default {
         right: 90%;
     }
 }
-@media (max-width: 1200px) {
-    .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;
-        }
-    }
-}
 </style>

src/pages/overviewLocation/index.vue

@@ -76,12 +76,4 @@ export default {
     color: #020202;
     line-height: 1.6rem;
 }
-@media (max-width: 1200px) {
-    .tab-content {
-        width: 90%;
-        span {
-            font-size: 1.35rem;
-        }
-    }
-}
 </style>

src/pages/overviewSetup/index.vue

@@ -104,21 +104,4 @@ export default {
     width: 50%;
     margin: 0 auto;
 }
-@media (max-width: 1200px) {
-    .tab-content {
-        padding: 20px 0;
-        .org {
-            width: 95%;
-            padding: 15px;
-            flex-direction: column;
-            .pic {
-                width: 100%;
-                height: auto;
-            }
-            .left {
-                width: 100%;
-            }
-        }
-    }
-}
 </style>

src/pages/overviewTrailer/index.vue

@@ -84,13 +84,4 @@ export default {
     color: #020202;
     line-height: 1.6rem;
 }
-@media (max-width: 1200px) {
-    .tab-content {
-        width: 95%;
-        margin: 0 auto;
-        .video {
-            max-height: 18rem;
-        }
-    }
-}
 </style>

src/pages/publication/index.vue

@@ -157,34 +157,4 @@ 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/single.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="wrap">
     <div class="banner">
-      <img width="100%" height="280" src="@/assets/images/publication-bg.png" alt="" />
+      <img width="100%"
+           height="280"
+           src="@/assets/images/publication-bg.png"
+           alt="" />
       <div class="texts">
         <p class="text">{{ info.columnName }}</p>
       </div>
@@ -11,11 +14,14 @@
       <!-- <Breadcrumb style="margin-bottom: 30px" ref="breadcrumb" :data.sync="routes"/> -->
       <!-- 根据栏目的listStyleId判断是哪个列表样式，这个出版物页面只显示下面三个列表样式 -->
       <!-- 论文 -->
-      <Thesis v-if="type === 46" :id.sync="id" />
+      <Thesis v-if="type === 46"
+              :id.sync="id" />
       <!-- 专利 -->
-      <Patent v-if="type === 44" :id.sync="id" />
+      <Patent v-if="type === 44"
+              :id.sync="id" />
       <!-- 专著 -->
-      <Monograph v-if="type === 45" :id.sync="id" />
+      <Monograph v-if="type === 45"
+                 :id.sync="id" />
     </div>
   </div>
 </template>
@@ -28,7 +34,7 @@ import Monograph from './monograph'
 import Breadcrumb from '@/components/breadcrumb'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: [
         {
@@ -49,13 +55,13 @@ export default {
     Patent,
     Monograph
   },
-  mounted() {
+  mounted () {
     this.getColumn()
     this.getInfo()
   },
   methods: {
     // 获取栏目详情
-    getInfo() {
+    getInfo () {
       this.id &&
         this.$post(`${this.api.findColumn}?id=${this.id}`)
           .then(({ data }) => {
@@ -64,7 +70,7 @@ export default {
           .catch((res) => { })
     },
     // 获取所有栏目
-    getColumn() {
+    getColumn () {
       this.$post(this.api.listWithTreeMenuVisible, {
         siteId: this.site,
         columnName: '',
@@ -80,7 +86,7 @@ export default {
         .catch((err) => { });
     },
     // 获取父级
-    getParent(data, parent = {}) {
+    getParent (data, parent = {}) {
       for (const e of data) {
         if (e.id == this.id) {
           this.parent = parent
@@ -95,49 +101,32 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-  background-color: #f9f9f9;
+    background-color: #f9f9f9;
 }
 .banner {
-  position: relative;
+    position: relative;
-  height: 280px;
+    height: 280px;
-  color: #fff;
+    color: #fff;
-  .texts {
+    .texts {
-    position: absolute;
+        position: absolute;
-    top: 123px;
+        top: 123px;
-    left: 243px;
+        left: 243px;
-  }
+    }
 
-  .text {
+    .text {
-    font-size: 3.42rem;
+        font-size: 3.42rem;
-    font-weight: 600;
+        font-weight: 600;
-    @include ellipsis;
+        @include ellipsis;
-  }
+    }
 
-  .sub {
+    .sub {
-    margin-top: 10px;
+        margin-top: 10px;
-    font-size: 2rem;
+        font-size: 2rem;
-  }
-}
-.tab-content {
-  width: 1000px;
-  padding: 20px 0;
-  margin: 0 auto;
-}
-@media (max-width: 1200px) {
-  .banner {
-    .texts {
-      .text {
-        font-size: 1.5rem;
-      }
     }
-  }
 }
-@media (max-width: 320px) {
+.tab-content {
-  .banner {
+    width: 1000px;
-    .texts {
+    padding: 20px 0;
-      left: 6rem;
+    margin: 0 auto;
-      top: 6rem;
-    }
-  }
 }
 </style>

src/pages/publish/show.vue

@@ -261,19 +261,4 @@ export default {
         }
     }
 }
-@media (max-width: 1084px) {
-    .content {
-        width: 95%;
-    }
-    .article {
-        flex-direction: column;
-        .left,
-        .right {
-            width: 100%;
-        }
-        .right {
-            margin: 20px 0 0;
-        }
-    }
-}
 </style>

src/pages/research/index.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="wrap" v-if="modules.length>=1">
+  <div class="wrap"
-    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+       v-if="modules.length>=1">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+        <el-carousel-item v-if="item.pic && item.isEnable"
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+                          :key="i">
-            <img :src="item.pic" alt="">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -13,12 +19,22 @@
 
     <div class="block">
       <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
-      <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
+      <p class="intro wow fadeInUp"
+         data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
       <ul class="area">
-        <li v-for="(item, i) in modules[2].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+        <li v-for="(item, i) in modules[2].list"
-          <img :src="item.pic" alt="" class="pic">
+            :key="i"
+            class="wow fadeInDown"
+            :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+            :class="{'cursor-pointer': isLink(item.link.linkName)}"
+            @click="openLink(item)">
+          <img :src="item.pic"
+               alt=""
+               class="pic">
           <div class="texts">
-            <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
+            <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')"
+                 alt=""
+                 class="icon">
             <h6>{{ item.title }}</h6>
             <p class="des">{{ item.des }}</p>
           </div>
@@ -29,23 +45,37 @@
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
         <ul class="group">
-          <li v-for="(item, i) in modules[4].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+          <li v-for="(item, i) in modules[4].list"
-            <img :src="item.pic" alt="">
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="text">{{ item.title }}</p>
           </li>
         </ul>
       </div>
     </div>
-    
+
     <div class="block">
       <div class="inner news-inner">
         <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
         <ul class="news">
-          <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+          <li v-for="(item, i) in modules[6].list"
-            <img :src="item.pic" alt="">
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <div class="des">{{ item.des }}</div>
@@ -64,17 +94,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
 
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -85,7 +115,7 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -93,562 +123,169 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
-.wrap{
+.wrap {
-  /deep/ .el-carousel {
+    /deep/ .el-carousel {
-    height: 24rem;
+        height: 24rem;
-    .el-carousel__container{
+        .el-carousel__container {
-      height: 24rem;
+            height: 24rem;
-    }
+        }
-    img{
+        img {
-      height: 24rem;
+            height: 24rem;
+        }
     }
-  }
 }
 .banner-item {
-  .banner-name {
+    .banner-name {
-    font-size: 2.16rem;
+        font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.85rem 0;
-  .intro  {
-    margin-bottom: 4rem;
-  }
-}
-.area {
-  display: flex;
-  li {
-    position: relative;
-    width: 19%;
-    color: #fff;
-    background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
-    transition: .3s;
-    &:hover {
-      transform: translateY(20px);
-      .icon {
-        transform: rotateY(360deg);
-      }
-    }
-    &:nth-child(2) {
-      width: 21%;
-      margin-top: 70px;
-      .texts {
-        background: #2B1B1C;
-      }
-    }
-    &:nth-child(3) {
-      .texts {
-        background: #009C91;
-      }
-    }
-    &:nth-child(4) {
-      margin-top: 70px;
-      .texts {
-        background: #005388;
-      }
-    }
-    &:nth-child(5) {
-      width: 22%;
-      .texts {
-        background: #9A4E10;
-      }
-    }
-  }
-  .pic {
-    width: 100%;
-    height: 32.65rem;
-  }
-  .icon {
-    transition: .3s;
-  }
-  .texts {
-    width: 100%;
-    padding: 1rem 2rem;
-    background: #08577B;
-    overflow: hidden;
-  }
-  h6 {
-    font-size: 1.2rem;
-    white-space: nowrap;
-  }
-  .des {
-    font-size: .96rem;
-    color: rgba(255,255,255,0.55);
-  }
-}
-.group {
-  display: flex;
-  flex-wrap: wrap;
-  li {
-    position: relative;
-    width: calc((100% - 56px) / 3);
-    margin: 0 1.4rem 1.95rem 0;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-      .text {
-        color: #fff;
-        background-color: #465f85;
-      }
-    }
-    &:nth-child(3n) {
-      margin-right: 0;
-    }
-  }
-  img {
-    width: 100%;
-    height: auto;
-  }
-  .text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 7.15rem;
-    padding: 0 1.5rem;
-    font-size: 1.44rem;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    font-weight: bold;
-    line-height: 2rem;
-    text-align: center;
-    color: #272727;
-    background-color: #fff;
-    transition: .3s;
-  }
-}
-.news {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  li {
-    position: relative;
-    width: calc((100% - 56px) / 3);
-    padding: 11px;
-    margin-right: 1.4rem;
-    color: #333;
-    background-color: #fff;
-    box-shadow: 0px 5px 1rem 0px rgba(98,117,163,0.08);
-    border-radius: 10px;
-    transition: .3s;
-    &:hover {
-      transform: translateY(20px);
-    }
-    &:nth-child(3n) {
-      margin-right: 0;
-    }
-    &:hover {
-      color: #fff;
-      background-color: #0252D9;
     }
-  }
-  img {
-    width: 100%;
-    height: auto;
-  }
-  .texts {
-    padding: 0 .9rem 2.5rem;
-  }
-  h6 {
-    margin: 1.75rem 0 .6rem;
-    font-size: 1.04rem;
-    line-height: 1.65rem;
-  }
-  .des {
-    font-size: .88rem;
-    line-height: 1.3rem;
-  }
 }
-
+.block {
-@media (min-width: 280px) and (max-width: 1200px) {
+    padding: 3.85rem 0;
-  .wrap{
+    .intro {
-  /deep/ .el-carousel {
+        margin-bottom: 4rem;
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
-    }
-    img{
-      height: 18rem;
     }
-  }
 }
- .block{ 
+.area {
-  padding: 50px 0;
+    display: flex;
-  .intro {
-    margin-bottom: 30px;
-  }
-  .area{
-    flex-direction: column;
-    li{
-      width: 95%;margin: 1.25rem auto;
-    }
-  }
-  .group,.news{
-    flex-direction: column;
     li {
-      width: 95%;
+        position: relative;
-      margin: 20px auto;
+        width: 19%;
-    }
+        color: #fff;
-  }
+        background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
- }
+        transition: 0.3s;
- .area {
+        &:hover {
-  li {
+            transform: translateY(20px);
-    height:  auto;
+            .icon {
-    .pic{
+                transform: rotateY(360deg);
-      height: 20rem;
+            }
-    }
-    .texts{
-      height: 10rem;
-    }
-  }
- }
- .group img {
-  height: 20rem;
- }
- .news img{
-  height: 20rem;
- }
-}
-@media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
-        img {
-          height: auto;
-        }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
-        }
-      }
-    }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
-        img {
-          height: auto;
         }
-        .text {
+        &:nth-child(2) {
-          font-size: 1.5rem;
+            width: 21%;
-          line-height: 1.8rem;
+            margin-top: 70px;
+            .texts {
+                background: #2b1b1c;
+            }
         }
-      }
+        &:nth-child(3) {
-    }
+            .texts {
-  }
+                background: #009c91;
-}
+            }
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
-        img {
-          height: auto;
         }
-        .text {
+        &:nth-child(4) {
-          font-size: 1.5rem;
+            margin-top: 70px;
-          line-height: 1.8rem;
+            .texts {
+                background: #005388;
+            }
         }
-      }
+        &:nth-child(5) {
-    }
+            width: 22%;
-    .area {
+            .texts {
-      li {
+                background: #9a4e10;
-        .pic {
+            }
-          height: 22rem;
         }
-      }
     }
-  }
+    .pic {
-}
+        width: 100%;
-@media (min-width: 480px) and (max-width: 640px) {
+        height: 32.65rem;
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
     }
-    /deep/ .el-carousel__container{
+    .icon {
-      height: 12rem !important; 
+        transition: 0.3s;
     }
-    /deep/  .el-carousel__item {
+    .texts {
-      height: 12rem !important;
+        width: 100%;
+        padding: 1rem 2rem;
+        background: #08577b;
+        overflow: hidden;
     }
-  }
+    h6 {
-  .banner-item{
+        font-size: 1.2rem;
-    img {
+        white-space: nowrap;
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
     }
-    .group ,.news{
+    .des {
-      li {
+        font-size: 0.96rem;
-        img {
+        color: rgba(255, 255, 255, 0.55);
-          height: auto;
-        }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
-        }
-      }
-    }
-    .area {
-      li {
-        .pic {
-          height: auto;
-        }
-      }
     }
-  }
 }
-@media (min-width: 640px) and (max-width: 768px) {
+.group {
-  .wrap  {
+    display: flex;
-    /deep/ .el-carousel{
+    flex-wrap: wrap;
-      height: 12rem !important;
+    li {
-    }
+        position: relative;
-    /deep/ .el-carousel__container{
+        width: calc((100% - 56px) / 3);
-      height: 12rem !important; 
+        margin: 0 1.4rem 1.95rem 0;
-    }
+        transition: 0.3s;
-    /deep/  .el-carousel__item {
+        &:hover {
-      height: 12rem !important;
+            transform: scale(1.05);
-    }
+            .text {
-  }
+                color: #fff;
-  .banner-item{
+                background-color: #465f85;
-    img {
+            }
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
-        img {
-          height: auto;
         }
-        .text {
+        &:nth-child(3n) {
-          font-size: 1.5rem;
+            margin-right: 0;
-          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;
     }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
     img {
-      height: 12rem !important;
+        width: 100%;
-    }
+        height: auto;
-    .banner-name {
+    }
-      font-size: 1.5rem;
+    .text {
-      line-height: 1rem;
+        display: flex;
-      left: 2rem;
+        justify-content: center;
-      bottom: 2rem;
+        align-items: center;
+        height: 7.15rem;
+        padding: 0 1.5rem;
+        font-size: 1.44rem;
+        font-family: SFProDisplay-Bold, SFProDisplay;
+        font-weight: bold;
+        line-height: 2rem;
+        text-align: center;
+        color: #272727;
+        background-color: #fff;
+        transition: 0.3s;
     }
-  }
+}
-  .block {
+.news {
-    padding: 1.25rem 0 ;
+    display: flex;
-    .b-title  {
+    justify-content: center;
-      font-size: 1.5rem;
+    flex-wrap: wrap;
-      margin-bottom: 1rem;
+    li {
-    }
+        position: relative;
-    .group ,.news{
+        width: calc((100% - 56px) / 3);
-      flex-direction: row;
+        padding: 11px;
-      li {
+        margin-right: 1.4rem;
-        width: calc((100% - 3rem) / 3);
+        color: #333;
-        margin: 0 .8rem 1.95rem 0;
+        background-color: #fff;
-        -webkit-transition: .3s;
+        box-shadow: 0px 5px 1rem 0px rgba(98, 117, 163, 0.08);
-        img {
+        border-radius: 10px;
-          height: auto;
+        transition: 0.3s;
+        &:hover {
+            transform: translateY(20px);
         }
-        .text {
+        &:nth-child(3n) {
-          font-size: 1.5rem;
+            margin-right: 0;
-          line-height: 1.8rem;
         }
-      }
+        &:hover {
-    }
+            color: #fff;
-    .area {
+            background-color: #0252d9;
-      flex-direction: row;;
-      li {
-        width: 19%;
-        .pic {
-          height: auto;
         }
-      }
-    }
-  }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
     }
-  }
-  .banner-item{
     img {
-      height: 12rem !important;
+        width: 100%;
+        height: auto;
     }
-    .banner-name {
+    .texts {
-      font-size: 1.5rem;
+        padding: 0 0.9rem 2.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
     }
-  }
+    h6 {
-  .block {
+        margin: 1.75rem 0 0.6rem;
-    padding: 1.25rem 0 ;
+        font-size: 1.04rem;
-    .b-title  {
+        line-height: 1.65rem;
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      flex-direction: row;
-      li {
-        width: calc((100% - 3rem) / 3);
-        margin: 0 .8rem 1.95rem 0;
-        -webkit-transition: .3s;
-        img {
-          height: auto;
-        }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
-        }
-      }
     }
-    .area {
+    .des {
-      flex-direction: row;;
+        font-size: 0.88rem;
-      li {
+        line-height: 1.3rem;
-        width: 19%;
-        .pic {
-          height: auto;
-        }
-      }
     }
-  }
 }
 </style>

src/pages/science/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="wrap">
     <div class="single-banner">
-      <img class="banner-img" :src="modules[0].form.pic" alt="" />
+      <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 des">{{ modules[0].form.des }}</p>
@@ -10,37 +12,34 @@
 
     <div class="block">
       <div class="inner">
-        <div
+        <div class="item wow bounceInLeft"
-          class="item wow bounceInLeft"
+             data-wow-delay="0.5s"
-          data-wow-delay="0.5s"
+             :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
-          :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
+             @click="openLink(modules[1].form)">
-          @click="openLink(modules[1].form)"
+          <img src="@/assets/images/science/1.png"
-        >
+               alt="" />
-          <img src="@/assets/images/science/1.png" alt="" />
           <div class="texts">
             <h6>{{ modules[1].form.title }}</h6>
             <div class="des">{{ modules[1].form.des }}</div>
           </div>
         </div>
-        <div
+        <div class="item wow bounceInRight"
-          class="item wow bounceInRight"
+             data-wow-delay="0.8s"
-          data-wow-delay="0.8s"
+             :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
-          :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
+             @click="openLink(modules[2].form)">
-          @click="openLink(modules[2].form)"
+          <img src="@/assets/images/science/2.png"
-        >
+               alt="" />
-          <img src="@/assets/images/science/2.png" alt="" />
           <div class="texts rightText">
             <h6>{{ modules[2].form.title }}</h6>
             <div class="des">{{ modules[2].form.des }}</div>
           </div>
         </div>
-        <div
+        <div class="item wow bounceInLeft"
-          class="item wow bounceInLeft"
+             data-wow-delay="0.5s"
-          data-wow-delay="0.5s"
+             :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
-          :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
+             @click="openLink(modules[3].form)">
-          @click="openLink(modules[3].form)"
+          <img src="@/assets/images/science/3.png"
-        >
+               alt="" />
-          <img src="@/assets/images/science/3.png" alt="" />
           <div class="texts">
             <h6>{{ modules[3].form.title }}</h6>
             <div class="des">{{ modules[3].form.des }}</div>
@@ -58,17 +57,17 @@ import Util from "@/libs/util";
 import WOW from "wow.js";
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: [],
     };
   },
-  mounted() {
+  mounted () {
     new WOW().init();
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(
         `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
@@ -80,14 +79,14 @@ export default {
               this.preview
                 ? data
                 : data[data.length - 1][
-                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                  ]
+                ]
             );
             this.modules = json;
             console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
           }
         })
-        .catch((err) => {});
+        .catch((err) => { });
     },
   },
 };
@@ -95,333 +94,72 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .inner {
-  width: 960px;
+    width: 960px;
 }
 .single-banner {
-  .banner-img {
+    .banner-img {
-    height: 21.6rem;
+        height: 21.6rem;
-  }
-  .texts {
-    h6 {
-      font-size: 2.16rem;
-      margin-bottom: .95rem;
-    }
-    .banner-des {
-      font-size: .96rem;
-    }
-  }
-}
-.block  {
-  padding: 3.85rem 0;
-}
-.item {
-  position: relative;
-  margin-bottom: 2.9rem;
-  width: 100%;
-  &:hover {
-    .texts {
-      color: #fff;
-      transform: scale(1.05);
-      background: #32b6e9 !important;
-    }
-  }
-  img {
-    width: 100%;
-    height: 22rem;
-  }
-  &:nth-child(2) .texts {
-    color: #fff;
-    background: #33b3c1;
-  }
-  &:nth-child(3) .texts {
-    color: #fff;
-    background: #e47c22;
-  }
-  &:nth-child(even) .texts {
-    left: auto;
-    right: -1.6rem;
-  }
-  .texts {
-    position: absolute;
-    top: 3.9rem;
-    left: -1.4rem;
-    width: 26.6rem;
-    padding: 3.5rem 1.9rem;
-    color: #333;
-    background: #fff6e9;
-    transition: 0.5s;
-  }
-  h6 {
-    margin-bottom: .875rem;
-    font-size: 1.6rem;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-  }
-  .des {
-    font-size: .88rem;
-  }
-}
-@media (max-width: 1200px) {
-  body {
-    width: 100% !important;
-  }
-  .inner {
-    width: 80%;
-  }
-  .item {
-    img {
-    }
-    .rightText {
-      right: 12px !important;
     }
     .texts {
-      width: 85%;
-      box-sizing: border-box;
-      left: -1rem;
-      &:nth-child(2) {
-        right: -1.5rem !important;
-      }
-      .des{
-        -webkit-line-clamp: inherit
-      }
-    }
-  }
-}
-@media (max-width: 320px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .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;
         h6 {
-          font-size: 1.2rem;
+            font-size: 2.16rem;
+            margin-bottom: 0.95rem;
         }
-        .des {
+        .banner-des {
-          font-size: .75rem;
+            font-size: 0.96rem;
         }
-      }
     }
-  }
 }
-@media (min-width: 320px) and (max-width: 375px) {
+.block {
-  .wrap {
+    padding: 3.85rem 0;
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .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;
-        h6 {
-          font-size: 1.4rem;
-        }
-        .des {
-          font-size: .75rem;
-        }
-      }
-    }
-  }
 }
-@media (min-width: 375px) and (max-width: 480px) {
+.item {
-  .wrap {
+    position: relative;
-    .single-banner {
+    margin-bottom: 2.9rem;
-      .banner-img {
+    width: 100%;
-        height: 12rem;
+    &:hover {
-      }
+        .texts {
-      .texts {
+            color: #fff;
-        top: 5rem;
+            transform: scale(1.05);
-        left: 2rem;
+            background: #32b6e9 !important;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
         }
-      }
     }
-  }
+    img {
-  .block {
+        width: 100%;
-    .inner {
+        height: 22rem;
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-        h6 {
-          font-size: 1.4rem;
-        }
-        .des {
-          font-size: .75rem;
-        }
-      }
     }
-  }
+    &:nth-child(2) .texts {
-}
+        color: #fff;
-@media (min-width: 480px) and (max-width: 640px) {
+        background: #33b3c1;
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
     }
-  }
+    &:nth-child(3) .texts {
-  .block {
+        color: #fff;
-    .inner {
+        background: #e47c22;
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-      }
     }
-  }
+    &:nth-child(even) .texts {
-}
+        left: auto;
-@media (min-width: 640px) and (max-width: 768px) {
+        right: -1.6rem;
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .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: 768px) and (max-width: 980px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
     }
-  }
+    .texts {
-  .block {
+        position: absolute;
-    .inner {
+        top: 3.9rem;
-      img {
+        left: -1.4rem;
-        height: 18rem;
+        width: 26.6rem;
-      }
+        padding: 3.5rem 1.9rem;
-      .texts {
+        color: #333;
-        padding: 1.25rem;
+        background: #fff6e9;
-        top: 1.5rem;
+        transition: 0.5s;
-      }
     }
-  }
+    h6 {
-}
+        margin-bottom: 0.875rem;
-@media (min-width: 980px) and (max-width: 1200px) {
+        font-size: 1.6rem;
-  .wrap {
+        font-family: PingFangSC-Medium, PingFang SC;
-    .single-banner {
+        font-weight: 500;
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
     }
-  }
+    .des {
-  .block {
+        font-size: 0.88rem;
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-      }
     }
-  }
 }
 </style>

src/pages/scientific/index.vue

@@ -291,43 +291,4 @@ export default {
         line-height: 1.6;
     }
 }
-@media (max-width: 1200px) {
-    .items {
-        li {
-            .texts {
-                left: 0;
-                width: 98%;
-            }
-            &:nth-child(even) {
-                .texts {
-                    right: auto;
-                }
-            }
-        }
-    }
-    .about {
-        height: 30rem;
-    }
-}
-@media (max-width: 780px) {
-    .program {
-        .slide {
-            flex-direction: column;
-        }
-        .texts {
-            width: 100%;
-        }
-        .img-wrap {
-            width: 100%;
-            height: 250px;
-        }
-        .list {
-            flex-direction: column;
-            li {
-                width: 100%;
-                margin-bottom: 1rem;
-            }
-        }
-    }
-}
 </style>

src/pages/speech/index.vue

@@ -115,22 +115,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .inner {
-        width: 95%;
-    }
-}
-@media (max-width: 920px) {
-    .inner {
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        .pic {
-            max-width: 100%;
-        }
-        .texts {
-            margin: 20px 0 0;
-        }
-    }
-}
 </style>

src/pages/talent/index.vue

@@ -298,359 +298,4 @@ export default {
         line-height: 1.5rem;
     }
 }
-@media (min-width: 280px) and (max-width: 1200px) {
-    .single-banner {
-        .texts {
-            left: 200px;
-            .banner-title {
-                font-size: 2.2rem;
-            }
-        }
-    }
-    .block {
-        padding: 30px 0;
-        .inner {
-            .item {
-                flex-direction: column;
-                padding: 1.5rem;
-            }
-            .texts {
-                width: 100%;
-                padding: 1.5rem;
-            }
-        }
-    }
-    .style {
-        /deep/ .el-carousel__container {
-            height: 27rem !important;
-        }
-        .wow {
-            margin-bottom: 2rem;
-        }
-        .item {
-            height: 25rem;
-        }
-    }
-}
-
-@media (max-width: 320px) {
-    .single-banner {
-        .banner-img {
-            height: 12rem;
-        }
-        .texts {
-            left: 2rem;
-            top: 3rem;
-            .banner-title {
-                font-size: 1.5rem;
-            }
-            .banner-des {
-                font-size: 1rem;
-            }
-        }
-    }
-    .block {
-        .inner {
-            width: 100%;
-            .item {
-                .img-wrap {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .style {
-        width: 100%;
-        /deep/ .el-carousel {
-            height: 13rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 13rem !important;
-        }
-        .item {
-            height: 13rem;
-            .text {
-                line-height: 1.5rem;
-                font-size: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .single-banner {
-        .banner-img {
-            height: 12rem;
-        }
-        .texts {
-            left: 2rem;
-            top: 3rem;
-            .banner-title {
-                font-size: 1.5rem;
-            }
-            .banner-des {
-                font-size: 1rem;
-            }
-        }
-    }
-    .block {
-        .inner {
-            width: 100%;
-            .item {
-                .img-wrap {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .style {
-        width: 100%;
-        /deep/ .el-carousel {
-            height: 13rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 13rem !important;
-        }
-        .item {
-            height: 13rem;
-            .text {
-                line-height: 1.5rem;
-                font-size: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .single-banner {
-        .banner-img {
-            height: 12rem;
-        }
-        .texts {
-            left: 2rem;
-            top: 3rem;
-            .banner-title {
-                font-size: 1.5rem;
-            }
-            .banner-des {
-                font-size: 1rem;
-            }
-        }
-    }
-    .block {
-        .inner {
-            width: 100%;
-            .item {
-                .img-wrap {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .style {
-        width: 100%;
-        /deep/ .el-carousel {
-            height: 13rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 13rem !important;
-        }
-        .item {
-            height: 13rem;
-            .text {
-                line-height: 1.5rem;
-                font-size: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .single-banner {
-        .banner-img {
-            height: 12rem;
-        }
-        .texts {
-            left: 2rem;
-            top: 3rem;
-            .banner-title {
-                font-size: 1.5rem;
-            }
-            .banner-des {
-                font-size: 1rem;
-            }
-        }
-    }
-    .block {
-        .inner {
-            width: 100%;
-            .item {
-                .img-wrap {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .style {
-        width: 100%;
-        /deep/ .el-carousel {
-            height: 13rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 13rem !important;
-        }
-        .item {
-            height: 13rem;
-            .text {
-                line-height: 1.5rem;
-                font-size: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .single-banner {
-        .banner-img {
-            height: 12rem;
-        }
-        .texts {
-            left: 2rem;
-            top: 3rem;
-            .banner-title {
-                font-size: 1.5rem;
-            }
-            .banner-des {
-                font-size: 1rem;
-            }
-        }
-    }
-    .block {
-        .inner {
-            width: 100%;
-            .item {
-                .img-wrap {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-    }
-    .style {
-        width: 100%;
-        /deep/ .el-carousel {
-            height: 13rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 13rem !important;
-        }
-        .item {
-            height: 13rem;
-            .text {
-                line-height: 1.5rem;
-                font-size: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .single-banner {
-        .banner-img {
-            height: 12rem;
-        }
-        .texts {
-            left: 2rem;
-            top: 3rem;
-            .banner-title {
-                font-size: 1.5rem;
-            }
-            .banner-des {
-                font-size: 1rem;
-            }
-        }
-    }
-    .block {
-        .inner {
-            width: 100%;
-            .item {
-                width: 100%;
-                flex-direction: row;
-                .img-wrap {
-                    width: 60%;
-                    height: auto;
-                }
-                .texts {
-                    width: 80%;
-                    margin-left: 1.5rem;
-                }
-            }
-        }
-    }
-    .style {
-        width: 100%;
-        /deep/ .el-carousel {
-            height: 18rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 18rem !important;
-        }
-        .item {
-            height: 18rem;
-            .text {
-                line-height: 1.5rem;
-                font-size: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .single-banner {
-        .banner-img {
-            height: 12rem;
-        }
-        .texts {
-            left: 2rem;
-            top: 3rem;
-            .banner-title {
-                font-size: 1.5rem;
-            }
-            .banner-des {
-                font-size: 1rem;
-            }
-        }
-    }
-    .block {
-        .inner {
-            width: 100%;
-            .item {
-                width: 100%;
-                flex-direction: row;
-                .img-wrap {
-                    width: 60%;
-                    height: auto;
-                }
-                .texts {
-                    width: 80%;
-                    margin-left: 1.5rem;
-                }
-            }
-        }
-    }
-    .style {
-        width: 100%;
-        /deep/ .el-carousel {
-            height: 20rem !important;
-        }
-        /deep/ .el-carousel__container {
-            height: 20rem !important;
-        }
-        .item {
-            height: 20rem;
-            .text {
-                line-height: 1.5rem;
-                font-size: 1rem;
-            }
-        }
-    }
-}
 </style>

src/pages/talentCenter/index.vue

@@ -322,310 +322,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .content {
-        width: 98%;
-    }
-    .article {
-        flex-direction: column;
-        .left,
-        .right {
-            width: 100%;
-        }
-        .left {
-            margin-bottom: 30px;
-        }
-    }
-}
-
-@media (min-width: 280px) and (max-width: 750px) {
-    .article {
-        .recruit {
-            li {
-                flex-direction: column;
-            }
-            .pic {
-                width: 100%;
-                margin-bottom: 10px;
-            }
-        }
-        .notice {
-            flex-direction: column;
-            li {
-                width: 100%;
-            }
-        }
-    }
-}
-@media (max-width: 1200px) {
-    .content {
-        .article {
-            flex-direction: column;
-            .left {
-                width: 100%;
-                .recruit {
-                    li {
-                        flex-direction: column;
-                        .pic {
-                            width: 100%;
-                        }
-                        .texts {
-                            margin-top: 0.8rem;
-                        }
-                    }
-                }
-                .notice {
-                    flex-direction: column;
-                    li {
-                        width: 100%;
-                    }
-                }
-            }
-            .right {
-                width: 100%;
-                .el-tree {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-@media (max-width: 320px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                left: 3rem;
-                top: 7rem;
-            }
-        }
-    }
-    .content {
-        .article {
-            .left {
-                .recruit {
-                    li {
-                        .pic {
-                            height: 13rem;
-                        }
-                    }
-                }
-                .notice {
-                    li {
-                        height: auto;
-                        .pic {
-                            height: 13rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 15rem;
-            }
-            .texts {
-                left: 3rem;
-                top: 7rem;
-            }
-        }
-    }
-    .content {
-        .article {
-            .left {
-                .recruit {
-                    li {
-                        .pic {
-                            height: 15rem;
-                        }
-                    }
-                }
-                .notice {
-                    li {
-                        height: auto;
-                        .pic {
-                            height: 15rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 18rem;
-            }
-            .texts {
-                left: 3rem;
-                top: 10rem;
-            }
-        }
-    }
-    .content {
-        .article {
-            .left {
-                .recruit {
-                    li {
-                        .pic {
-                            height: 18rem;
-                        }
-                    }
-                }
-                .notice {
-                    li {
-                        height: auto;
-                        .pic {
-                            height: 18rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 20rem;
-            }
-            .texts {
-                left: 3rem;
-                top: 12rem;
-            }
-        }
-    }
-    .content {
-        .article {
-            .left {
-                .recruit {
-                    li {
-                        .pic {
-                            height: 22rem;
-                        }
-                    }
-                }
-                .notice {
-                    li {
-                        height: auto;
-                        .pic {
-                            height: 22rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 22rem;
-            }
-            .texts {
-                left: 3rem;
-                top: 14rem;
-            }
-        }
-    }
-    .content {
-        .article {
-            .left {
-                .recruit {
-                    li {
-                        .pic {
-                            height: 26rem;
-                        }
-                    }
-                }
-                .notice {
-                    li {
-                        height: auto;
-                        .pic {
-                            height: 26rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 26rem;
-            }
-            .texts {
-                left: 3rem;
-                top: 16rem;
-            }
-        }
-    }
-    .content {
-        .article {
-            .left {
-                .recruit {
-                    li {
-                        .pic {
-                            height: 30rem;
-                        }
-                    }
-                }
-                .notice {
-                    li {
-                        height: auto;
-                        .pic {
-                            height: 30rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 30rem;
-            }
-            .texts {
-                left: 3rem;
-                top: 18rem;
-            }
-        }
-    }
-    .content {
-        .article {
-            .left {
-                .recruit {
-                    li {
-                        .pic {
-                            height: 35rem;
-                        }
-                    }
-                }
-                .notice {
-                    li {
-                        height: auto;
-                        .pic {
-                            height: 35rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 </style>

src/pages/talentCentre/index.vue

@@ -292,49 +292,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .content {
-        width: 90%;
-    }
-    .article {
-        flex-direction: column;
-        .left {
-            width: 100%;
-            .recruit {
-                li {
-                    flex-direction: column;
-                    .pic {
-                        width: 100%;
-                    }
-                    .texts {
-                        margin-top: 0.8rem;
-                    }
-                }
-            }
-            .notice {
-                flex-direction: column;
-                li {
-                    width: 100%;
-                }
-            }
-        }
-        .right {
-            width: 100%;
-        }
-    }
-}
-@media (max-width: 480px) {
-    .article {
-        .left {
-            .people {
-                li {
-                    .texts {
-                        left: 10px;
-                        right: auto;
-                    }
-                }
-            }
-        }
-    }
-}
 </style>

src/pages/userSharing/index.vue

@@ -221,343 +221,4 @@ export default {
         line-height: 31px;
     }
 }
-@media (max-width: 1200px) {
-    body {
-        width: 100% !important;
-    }
-    .share {
-        width: 100%;
-        .inner {
-            width: 100%;
-            flex-direction: column;
-            .left {
-                width: 100%;
-            }
-        }
-        .des {
-            display: block;
-            padding: 0 10px;
-        }
-        .pic {
-            width: 100%;
-        }
-        .card {
-            width: 100%;
-        }
-    }
-    .group {
-        width: 100%;
-        flex-direction: column;
-        li {
-            width: 100%;
-            margin-top: 20px;
-        }
-    }
-}
-
-@media (max-width: 320px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                top: 7rem;
-                left: 2rem;
-                .banner-title {
-                    font-size: 1.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .banner-des {
-                    font-size: 0.85rem;
-                }
-            }
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            .pic {
-                height: auto;
-            }
-            .card {
-                padding: 1.875rem 0 1.875rem 18.5%;
-                bottom: 0;
-                .title {
-                    font-size: 1.4rem;
-                }
-                .en-text {
-                    font-size: 0.9rem;
-                }
-            }
-        }
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                top: 7rem;
-                left: 2rem;
-                .banner-title {
-                    font-size: 1.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .banner-des {
-                    font-size: 0.85rem;
-                }
-            }
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            .pic {
-                height: auto;
-            }
-            .card {
-                padding: 1.875rem 0 1.875rem 18.5%;
-                bottom: 0;
-                .title {
-                    font-size: 1.4rem;
-                }
-                .en-text {
-                    font-size: 0.9rem;
-                }
-            }
-        }
-    }
-    .group {
-        li {
-            height: auto;
-        }
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                top: 7rem;
-                left: 2rem;
-                .banner-title {
-                    font-size: 1.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .banner-des {
-                    font-size: 0.85rem;
-                }
-            }
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            .pic {
-                height: auto;
-            }
-            .card {
-                padding: 1.875rem 0 1.875rem 18.5%;
-                bottom: 0;
-                .title {
-                    font-size: 1.4rem;
-                }
-                .en-text {
-                    font-size: 0.9rem;
-                }
-            }
-        }
-    }
-    .group {
-        li {
-            height: auto;
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                top: 7rem;
-                left: 2rem;
-                .banner-title {
-                    font-size: 1.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .banner-des {
-                    font-size: 0.85rem;
-                }
-            }
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            .pic {
-                height: auto;
-            }
-            .card {
-                padding: 1.875rem 0 1.875rem 18.5%;
-                bottom: 0;
-                .title {
-                    font-size: 1.4rem;
-                }
-                .en-text {
-                    font-size: 0.9rem;
-                }
-            }
-        }
-    }
-    .group {
-        li {
-            height: auto;
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                top: 7rem;
-                left: 2rem;
-                .banner-title {
-                    font-size: 1.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .banner-des {
-                    font-size: 0.85rem;
-                }
-            }
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            .pic {
-                height: auto;
-            }
-            .card {
-                padding: 1.875rem 0 1.875rem 18.5%;
-                bottom: 0;
-                .title {
-                    font-size: 1.4rem;
-                }
-                .en-text {
-                    font-size: 0.9rem;
-                }
-            }
-        }
-    }
-    .group {
-        flex-direction: row;
-        li {
-            .des {
-                line-height: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                top: 7rem;
-                left: 2rem;
-                .banner-title {
-                    font-size: 1.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .banner-des {
-                    font-size: 0.85rem;
-                }
-            }
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            .pic {
-                height: auto;
-            }
-            .card {
-                padding: 1.875rem 0 1.875rem 18.5%;
-                bottom: 0;
-                .title {
-                    font-size: 1.4rem;
-                }
-                .en-text {
-                    font-size: 0.9rem;
-                }
-            }
-        }
-    }
-    .group {
-        flex-direction: row;
-        li {
-            .des {
-                line-height: 1rem;
-            }
-        }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 13rem;
-            }
-            .texts {
-                top: 7rem;
-                left: 2rem;
-                .banner-title {
-                    font-size: 1.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .banner-des {
-                    font-size: 0.85rem;
-                }
-            }
-        }
-    }
-    .block {
-        padding: 2rem 0;
-        .inner {
-            .pic {
-                height: auto;
-            }
-            .card {
-                padding: 1.875rem 0 1.875rem 18.5%;
-                bottom: 0;
-                .title {
-                    font-size: 1.4rem;
-                }
-                .en-text {
-                    font-size: 0.9rem;
-                }
-            }
-        }
-    }
-    .group {
-        flex-direction: row;
-        li {
-            .des {
-                line-height: 1rem;
-            }
-        }
-    }
-}
 </style>