设配部分移动端

package-lock.json

@@ -3690,7 +3690,7 @@
     },
     "clone-deep": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
       "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
       "dev": true,
       "requires": {
@@ -4374,7 +4374,7 @@
       "dependencies": {
         "lru-cache": {
           "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-4.1.5.tgz",
           "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
           "requires": {
             "pseudomap": "^1.0.2",
@@ -9538,7 +9538,7 @@
       "dependencies": {
         "gaze": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+          "resolved": "https://registry.npmmirror.com/gaze/-/gaze-1.1.3.tgz",
           "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
           "requires": {
             "globule": "^1.0.0"
@@ -9569,7 +9569,7 @@
           "dependencies": {
             "glob": {
               "version": "7.1.7",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+              "resolved": "https://registry.npmmirror.com/glob/-/glob-7.1.7.tgz",
               "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
               "requires": {
                 "fs.realpath": "^1.0.0",
@@ -9584,12 +9584,12 @@
         },
         "lodash": {
           "version": "4.17.21",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
           "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "minimatch": {
           "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.0.8.tgz",
           "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -12409,12 +12409,12 @@
         },
         "lodash": {
           "version": "4.17.21",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
           "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "minimatch": {
           "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
           "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -12424,7 +12424,7 @@
     },
     "sass-loader": {
       "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-8.0.2.tgz",
       "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
       "dev": true,
       "requires": {
@@ -12437,7 +12437,7 @@
       "dependencies": {
         "schema-utils": {
           "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
           "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
           "dev": true,
           "requires": {
@@ -12448,7 +12448,7 @@
         },
         "semver": {
           "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
         }
@@ -12687,7 +12687,7 @@
     },
     "shallow-clone": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz",
       "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
       "dev": true,
       "requires": {

src/App.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import Setting from "@/setting";
-import util from "@/libs/util";
+import Setting from '@/setting';
+import util from '@/libs/util';
 export default {
-  name: "App",
+  name: 'App',
   created() {
     //在页面加载时读取localStorage里的状态信息
     if (util.local.get(Setting.storeKey)) {
@@ -16,9 +16,24 @@ export default {
     }
 
     //在页面刷新时将vuex里的信息保存到localStorage里
-    window.addEventListener("beforeunload", () => {
+    window.addEventListener('beforeunload', () => {
       util.local.set(Setting.storeKey, this.$store.state);
     });
+
+    function IsPC() {
+      var userAgentInfo = navigator.userAgent;
+      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
+      var flagPc = true;
+      for (var v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+          flagPc = false;
+          break;
+        }
+      }
+      return flagPc;
+    }
+    var flagZt = IsPC();
+    console.log(flagZt) //true为PC端，false为手机端
   }
 };
 </script>

src/layouts/footer/index.vue

@@ -199,4 +199,24 @@ export default {
     }
   }
 }
+@media (max-width: 992px)  {
+  body{
+    width: 100% !important;
+  }
+  .inner {
+    width: 100% !important;
+    .title{
+      width: 100%;
+      text-align: center;
+    }
+    .region{
+      top: 300px;
+      left: 50%;
+    }
+    .info{
+      margin-top: 90px;
+    }
+  }
+  
+}
 </style>

src/pages/article/activity.vue

@@ -262,4 +262,6 @@ export default {
     width: 98%;
   }
 }
+
+
 </style>

src/pages/article/index.vue

@@ -280,4 +280,20 @@ export default {
     width: 98%;
   }
 }
+@media (max-width: 1200px ) {
+  .article {
+    flex-direction: column;
+    .left, .right{
+      width: 95%;
+      margin: 0 auto;
+      .el-tree{
+        position: fixed;
+        right: 10px;
+        top: 160px;
+        z-index: 99;;
+        width: 180px;
+      }
+    }
+  }
+}
 </style>

src/pages/column/index.vue

@@ -730,4 +730,77 @@ export default {
     }
   }
 }
+
+@media (max-width: 1200px) {
+  .article{ 
+    flex-direction: column;
+    .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{
+          .pic{
+            margin-top: 20px;
+          }
+        }
+      }
+    }
+    .right{
+      width: 95%;
+      margin: 20px auto;
+    }
+  }
+  .column-wrap{
+    .article{
+      flex-direction: column;
+      .left{
+        width: 100%;
+        .item{
+          width: 80%;
+          margin: 20px auto;
+        }
+        .search{
+          width: 80%;
+          margin: 20px auto;
+          margin-top: 0;
+        }
+
+        .contents{
+          .articles{
+            li {
+              flex-direction: column;
+              .texts{
+                width: 100%;
+                .meta {
+                  font-size: .5rem;
+                }
+              }
+              .pic{
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/deviceIntroBeam/index.vue

@@ -7,7 +7,7 @@
         <h6>光束线</h6>
         <p class="en">The beam line</p>
         <div class="sum">S³FEL光束线覆盖的波段范围为1~30 nm，包含前端区、光学传输系统和诊断系统，是连接自由电子激光光源和后端科学实验站的桥梁。</div>
-        <div class="flex">
+        <div class="flex beamBox">
           <div class="left">
             <div class="des">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div>
           </div>
@@ -135,4 +135,48 @@ export default {
     border-left: 4px solid #1583FF;
   }
 }
+
+
+@media (max-width: 1200px) {
+  .inner{
+    padding: 0 20px;
+    width: 90% !important;
+    .sum{
+      line-height: 25px;
+      margin-top: 40px;
+    }
+  }
+  .beamBox{
+    display: flex;
+    flex-direction: column;
+    .left {
+      width: 100%;
+
+    }
+    .des{
+      -webkit-line-clamp: 100
+    }
+    .pic{
+      margin-top: 10px;
+      width: 100%;
+      height: auto;
+    }
+  }
+  .intro{
+    height: auto;
+    flex-direction: column;
+    .pic {
+      width: 100%;
+    }
+    .des {
+      -webkit-line-clamp: 100
+    }
+  }
+  .unit {
+    width: 100%;
+    img{
+       width: 100%;
+    }
+  }
+}
 </style>

src/pages/deviceIntroLayout/index.vue

@@ -7,7 +7,7 @@
         <h6>整体布局</h6>
         <p class="en">The overall layout</p>
         <div class="card">S³FEL装置主要包括一台超导直线加速器（电子束能量为2.5 GeV、重复频率为1 MHz）、4条波荡器线及首批14个实验线站。根据具体的功能可以分为注入器、主加速器、自由电子激光放大器（波荡器线）、光束线和实验站，还有包括束流诊断、控制、激光、同步、数据采集与处理等在内的公共子系统，以及低温、公用设施等配套系统和设施。</div>
-        <div class="flex" style="margin-top: 290px">
+        <div class="flex textBox" >
           <div class="left">
             <div class="des">    S³FEL首批拟建设4条波荡器线，分别是2条外种子（EEHG）线和2条自放大自发辐射（SASE）线，以同时满足首批实验站的不同研究需求。按照能区划分，FEL-1、FEL-2工作在自放大自发辐射模式（SASE），并且为将来升级为self-seeding模式预留空间。FEL-1出光波段为1-3 nm（调整电子束能量时可覆盖1-6 nm），FEL-2输出光波长为2.3-15 nm，作为光刻研究专用光束线。FEL-3和4基于回声型谐波产生原理（EEHG），FEL-3输出波长为2.3-15 nm，涵盖水窗波段，FEL-4输出波长为5-30 nm的极紫外FEL脉冲。通过快速束流分配技术，波荡器束线可同时工作。各条波荡器线产生的FEL光，通过光束线系统实现FEL光学参数的实时诊断，包括光强、光谱、光斑位置，光斑尺寸以及相干性等，并通过传输与聚焦系统传输至后端的实验站，以满足各个实验站对光源的不同需求。首批建设实验站共涉及6个前沿科技领域，分别为极紫外光刻、量子材料、能源催化、生物医药、大气与星际科学以及原子分子科学。</div>
           </div>
@@ -54,13 +54,17 @@ export default {
   background: url(../../assets/images/device/4.png) bottom right/auto no-repeat;
 }
 .banner {
-  background: url(../../assets/images/device/14.png) 0 0/100% 100% no-repeat;
+  background: url(../../assets/images/device/14.png)  no-repeat center;
+  background-size:  100% 100%;
 }
 .share {
   position: relative;
   .inner {
     width: 90%;
     max-width: 1323px;
+    .textBox{
+      margin-top: 290px;
+    }
   }
   .left {
     width: 547px;
@@ -136,4 +140,169 @@ export default {
     border-left: 4px solid #1583FF;
   }
 }
+@media screen and (min-width:351px) and (max-width:420px) {
+  .intro {
+    height: 18rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+
+@media (min-width:421px) and (max-width:490px) {
+  .intro {
+    height: 22rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+@media screen and (min-width:491px) and (max-width:620px) {
+  .intro {
+    height: 28rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+@media screen and (min-width:621px) and (max-width:720px) {
+  .intro {
+    height: 32rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+
+@media screen and (min-width:721px) and (max-width:820px) {
+  .intro {
+    height: 36rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+@media screen and (min-width:821px) and (max-width:920px) {
+  .intro {
+    height: 40rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+@media screen and (min-width:921px) and (max-width:1020px) {
+  .intro {
+    height: 44rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+@media screen and (min-width:1021px) and (max-width:1120px) {
+  .intro {
+    height: 48rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}/* 大于960 小于1200 */
+@media screen and (min-width:1121px) and (max-width:1220px) {
+  .intro {
+    height: 52rem !important;
+  }
+  .block {
+    padding: 50px 0;
+  }
+}
+@media (min-width: 300px) and (max-width: 1200px)  {
+  body{
+    width: 100% !important;
+  }
+  .unit{
+    width: 100%;
+    img{
+      width: 100%;
+    }
+  }
+  .card{
+    width: 100% !important;position: relative !important;margin-left: -50px;;
+  }
+  .textBox{
+    margin-top: 40px !important;
+  }
+  .textBox{
+    display: flex;
+    flex-direction: column;
+    .left{
+      width: 100%;
+      .des{ 
+        -webkit-line-clamp: 100
+      }
+    }
+    .pic{ 
+      width: 100%;
+      height: auto;
+      margin-top: 20px;
+    }
+  }
+  .bg{
+    width:100%
+  }
+  .intro {
+    height: 45rem;
+    .pic{
+      width: 100% !important;
+      left: 0;
+      top: 6%;
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 375px) {
+  body{
+    width: 100% !important;
+  }
+  .block{
+    padding: 50px 0;
+  }
+  .unit{
+    width: 100%;
+    img{
+      width: 100%;
+    }
+  }
+  .card{
+    width: 100% !important;position: relative !important;margin-left: -50px;;
+  }
+  .textBox{
+    margin-top: 40px !important;
+  }
+  .textBox{
+    display: flex;
+    flex-direction: column;
+    .left{
+      width: 100%;
+      .des{ 
+        -webkit-line-clamp: 100
+      }
+    }
+    .pic{ 
+      width: 100%;
+      height: auto;
+      margin-top: 20px;
+    }
+  }
+  .bg{
+    width:100%
+  }
+  .intro {
+    height: 15rem;
+    .pic{
+      width: 100% !important;
+      left: 0;
+      top: 6%;
+    }
+  }
+}
+
 </style>

src/pages/deviceIntroLinear/index.vue

@@ -12,7 +12,7 @@
             <div class="line"></div>
             <div class="text">{{ modules[0].form.des }}</div>
           </div>
-          <img class="bg" src="@/assets/images/device/10.png" alt="">
+          <img class="bg" src="@/assets/images/device/10.png" alt="" />
         </div>
       </div>
     </div>
@@ -21,11 +21,11 @@
       <div class="inner">
         <div class="left">
           <h5>S³FEL超导直线加速器示意图</h5>
-          <img src="@/assets/images/device/11.png" alt="">
+          <img src="@/assets/images/device/11.png" alt="" />
         </div>
         <div class="right">
           <h6>S³FEL超导直线加速器性能指标</h6>
-          <img src="@/assets/images/device/12.png" alt="">
+          <img src="@/assets/images/device/12.png" alt="" />
         </div>
       </div>
     </div>
@@ -33,32 +33,32 @@
 </template>
 
 <script>
-import mixins from '@/mixins/page'
-import WOW from 'wow.js'
+import mixins from '@/mixins/page';
+import WOW from 'wow.js';
 export default {
   mixins: [mixins],
   data() {
-    return {
-      
-    }
+    return {};
   },
   mounted() {
-    new WOW().init()
+    new WOW().init();
   },
   methods: {
     // 获取文章详情
     getInfo() {
       // 预览/详情
-      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-        if (data.length) {
-          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(this.preview ?
-            data :
-            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-        }
-      }).catch(err => {})
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`)
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview ? data : data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']
+            );
+            this.modules = json;
+            console.log('🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json', json);
+          }
+        })
+        .catch((err) => { });
     }
   }
 };
@@ -66,100 +66,173 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
+
 .banner {
   background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat;
 }
+
 .history {
   .inner {
     width: 90%;
     max-width: 1504px;
   }
+
   h2 {
     position: relative;
     font-size: 2.2rem;
     font-family: PingFangSC-Semibold, PingFang SC;
     font-weight: 600;
-    color: #1C1C1C;
+    color: #1c1c1c;
   }
+
   .en {
     margin: -25px 0 40px;
     font-size: 2.2rem;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
-    color: #E3E3E3;
+    color: #e3e3e3;
   }
+
   .texts {
     display: flex;
     justify-content: space-between;
     padding: 82px 0 30px 38px;
     margin-top: 20px;
-    background: #1583FF;
+    background: #1583ff;
     border-radius: 65px 100px 0px 0px;
-    transition: .3s;
+    transition: 0.3s;
+
     &:hover {
       transform: scale(1.05);
     }
   }
+
   .left {
     width: 50%;
   }
+
   h6 {
     font-size: 1.4rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #FFFFFF;
+    color: #ffffff;
   }
+
   .line {
     width: 214px;
     height: 5px;
     margin: 54px 0 44px;
-    background: #FFFFFF;
+    background: #ffffff;
     opacity: 0.52;
   }
+
   .text {
     font-size: 1.1rem;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 44px;
   }
+
   .bg {
     width: 50%;
     margin: -142px -50px 0 0;
     border-top-left-radius: 30px;
   }
 }
+
 .intro {
   .inner {
     display: flex;
   }
+
   .left {
     width: 30%;
   }
+
   .right {
     width: 68%;
     margin-left: 2%;
   }
+
   h5 {
     margin-bottom: 15px;
     font-size: 1rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #2A2A2A;
+    color: #2a2a2a;
   }
+
   h6 {
     padding-left: 15px;
     margin-bottom: 15px;
     font-size: 1rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #2A2A2A;
-    border-left: 4px solid #1583FF;
+    color: #2a2a2a;
+    border-left: 4px solid #1583ff;
   }
+
   img {
     width: 100%;
     height: 85%;
   }
 }
+
+/* 小于400 */
+@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 {
+    .bg {
+      margin: -142px -0px 0 0;
+    }
+  }
+
+  .inner {
+    flex-direction: column;
+
+    .left,
+    .right {
+      width: 95%;
+      margin: 20px auto;
+    }
+  }
+}
 </style>

src/pages/exp/index.vue

@@ -166,4 +166,24 @@ export default {
     width: 28%;
   }
 }
+@media (max-width: 1200px) {
+  body{
+    width: 100% !important;
+  }
+  .block {
+    .inner{
+      .des{
+        -webkit-line-clamp: inherit
+      }
+    }
+  }
+  .list {
+     display: block;
+     li {
+      width: 80% !important;
+      height: 400px;
+      margin: 10px auto;
+     }
+  }
+}
 </style>

src/pages/overviewLocation/index.vue

@@ -96,4 +96,17 @@ export default {
   color: #020202;
   line-height: 32px;
 }
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+ 
+}
 </style>

src/pages/overviewSetup/index.vue

@@ -124,4 +124,28 @@ export default {
   width: 85%;
   margin: 0 auto;
 }
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+  .tab-content{
+    padding: 20px 0;
+    .org{
+    width: 100%;
+    padding:15px;
+    flex-direction: column;
+    .left{
+      width: 100%;
+    }
+  }
+  }
+ 
+}
 </style>

src/pages/overviewTrailer/index.vue

@@ -102,4 +102,21 @@ export default {
   color: #020202;
   line-height: 32px;
 }
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+  .tab-content{
+     width: 95%;
+     margin: 0 auto;
+  }
+ 
+}
 </style>

src/pages/science/index.vue

@@ -1,7 +1,7 @@
 <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">{{ modules[0].form.des }}</p>
@@ -10,22 +10,37 @@
 
     <div class="block">
       <div class="inner">
-        <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
-          <img src="@/assets/images/science/1.png" alt="">
+        <div
+          class="item wow bounceInLeft"
+          data-wow-delay="0.5s"
+          :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
+          @click="openLink(modules[1].form)"
+        >
+          <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 class="item wow bounceInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
-          <img src="@/assets/images/science/2.png" alt="">
-          <div class="texts">
+        <div
+          class="item wow bounceInRight"
+          data-wow-delay="0.8s"
+          :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
+          @click="openLink(modules[2].form)"
+        >
+          <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 class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
-          <img src="@/assets/images/science/3.png" alt="">
+        <div
+          class="item wow bounceInLeft"
+          data-wow-delay="0.5s"
+          :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
+          @click="openLink(modules[3].form)"
+        >
+          <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>
@@ -37,36 +52,44 @@
 </template>
 
 <script>
-import mixins from '@/mixins/page'
-import Setting from '@/setting'
-import Util from '@/libs/util'
-import WOW from 'wow.js'
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
 export default {
   mixins: [mixins],
   data() {
     return {
-      routes: []
-    }
+      routes: [],
+    };
   },
   mounted() {
-    new WOW().init()
+    new WOW().init();
   },
   methods: {
     // 获取文章详情
     getInfo() {
       // 预览/详情
-      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-        if (data.length) {
-          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(this.preview ?
-            data :
-            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-        }
-      }).catch(err => {})
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                  ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => {});
     },
-  }
+  },
 };
 </script>
 
@@ -92,11 +115,11 @@ export default {
   }
   &:nth-child(2) .texts {
     color: #fff;
-    background: #33B3C1;
+    background: #33b3c1;
   }
   &:nth-child(3) .texts {
     color: #fff;
-    background: #E47C22;
+    background: #e47c22;
   }
   &:nth-child(even) .texts {
     left: auto;
@@ -109,8 +132,8 @@ export default {
     width: 532px;
     padding: 70px 38px;
     color: #333;
-    background: #FFF6E9;
-    transition: .5s;
+    background: #fff6e9;
+    transition: 0.5s;
   }
   h6 {
     margin-bottom: 14px;
@@ -122,4 +145,28 @@ export default {
     font-size: 1rem;
   }
 }
+@media (max-width: 1200px) {
+  body {
+    width: 100% !important;
+  }
+  .inner {
+    width: 100%;
+  }
+  .item {
+    img {
+      margin-left: 30px;
+    }
+    .rightText {
+      right: 12px !important;
+    }
+    .texts {
+      width: 85%;
+      box-sizing: border-box;
+      left: 12px;
+      .des{
+        -webkit-line-clamp: inherit
+      }
+    }
+  }
+}
 </style>

src/pages/sfel/index.vue

@@ -19,7 +19,7 @@
         </div>
         <template v-if="articles.length">
           <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
-            <div style="width: 50%;height: 410px;overflow: hidden;">
+            <div style="width: 50%;height: 410px;overflow: hidden;" class="newBox">
               <img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
             </div>
             <div class="right">
@@ -700,7 +700,7 @@ export default {
   .left {
     position: relative;
     width: 550px;
-    min-width: 550px;
+    // min-width: 550px;
     height: 550px;
     margin-right: 20px;
     cursor: pointer;
@@ -991,7 +991,7 @@ export default {
       height: 204px;
       padding: 36px 22px;
       margin-right: 14px;
-      background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat;
+      background: url(../../assets/images/sfel/7.png)  no-repeat center;
       transition: .5s;
       cursor: pointer;
       &:nth-child(2) {
@@ -1059,4 +1059,95 @@ export default {
     }
   }
 }
+@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%;
+        }
+      }
+    }
+  }
+  .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;
+    }
+  }
+  #part6 {
+    .slide{
+      .texts{
+        height: 430px;
+      }
+    }
+  }
+}
+
 </style>

src/pages/userSharing/index.vue

@@ -185,4 +185,37 @@ 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;
+    }
+  }
+}
 </style>

src/styles/common.scss

@@ -52,7 +52,7 @@
 }
 .main {
   .view {
-    min-width: $min-width;
+    // min-width: $min-width;
     min-height: calc(100vh - 90px);
     margin: 0 auto;
     background-color: #fff;

src/styles/layout/index.scss

@@ -10,7 +10,7 @@ body,
 }
 
 body {
-  min-width: 1280px;
+  // min-width: 1280px;
   font-family: PingFang, PingFang SC, "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
   font-size: 14px;
   background: rgba(0, 0, 0, 0.02);