英文版适配80%

src/App.vue

@@ -33,7 +33,6 @@ export default {
       return flagPc;
     }
     var flagZt = IsPC();
-    console.log(flagZt)
     this.$store.commit('updateModelType', flagZt)
   }
 };

src/components/menuTree/tree.vue

@@ -1,36 +0,0 @@
-<template>
-    <div class="menu-child">
-      <template v-for="item in this.menuList">
-        <el-submenu :popper-class="$route.path === '/home' || $route.path === '/sfel' ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length">
-          <template slot="title">
-            <span slot="title" :id="item.id">{{item.columnName}}</span>
-          </template>
-          <!-- <menuTree :menuList="item.children"></menuTree> -->
-        </el-submenu>
-        <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else>
-          <span slot="title" :id="item.id">{{item.columnName}}</span>
-        </el-menu-item>
-      </template>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'menuTree',
-    props: {
-      menuList: {
-        type: Array,
-        default: []
-      }
-    },
-    data () {
-      return {}
-    },
-    mounted () {},
-    methods: {}
-  }
-  </script>
-  <style lang="scss" scoped>
-    
-  </style>
-  

src/layouts/footer/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="showDefaultPath.includes($route.path)" class="footer">
       <div class="info">
-        <div style="margin-right: 100px">
+        <div class="leftBox">
           <img class="m-b-20" src="@/assets/images/iasf.png" alt="">
           <p class="meta">Copyright ©2002- 2021</p>
           <p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
@@ -92,6 +92,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.leftBox{
+  margin-right: 100px;
+}
 .footer{
   padding: 64px 10% 25px;
   color: #fff;
@@ -199,7 +202,7 @@ export default {
     }
   }
 }
-@media (max-width: 992px)  {
+@media (max-width: 1200px)  {
   body{
     width: 100% !important;
   }
@@ -217,6 +220,29 @@ export default {
       margin-top: 90px;
     }
   }
+}
+@media (min-width: 280px) and (max-width: 750px) {
+  .footer {
+    .info{
+       flex-direction: column;
+       .column{
+        margin-top: 20px;
+        margin-left: 0;
+       }
+    }
+  }
+}
 
+@media (min-width: 751px) and (max-width: 1200px) {
+  .footer {
+    .info{
+       flex-direction: column;
+       .column{
+        margin-top: 20px;
+        margin-left: 0;
        }
+    }
+  }
+}
+
 </style>

src/layouts/header/index.vue

@@ -3,7 +3,6 @@
     <a class="logo" @click="toIndex">
       <img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt="">
     </a>
-    <!-- <template v-if="$store.getters.getModelType"> -->
     <navbar ref="nav" :isHome.sync="isHome"></navbar>
     <div class="tools">
       <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
@@ -14,39 +13,6 @@
         <i class="el-icon-close close-icon" @click="showSearch = false"></i>
       </div>
     </div>
-    <!-- </template> -->
-
-    <!-- <template v-else>
-      <i class="el-icon-s-fold rightNavBox"></i>
-    </template>
-    <div class="btnsBox">
-      <el-menu
-      default-active="2"
-      class="el-menu-vertical-demo"
-      @open="handleOpen"
-      @close="handleClose">
-      <el-submenu index="1">
-        <template slot="title">
-          <span>导航一</span>
-        </template>
-        <el-menu-item index="1-1">选项1</el-menu-item>
-        <el-menu-item index="1-2">选项2</el-menu-item>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-menu-item index="2">
-        <span slot="title">导航二</span>
-      </el-menu-item>
-      <el-menu-item index="3">
-        <span slot="title">导航三</span>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <span slot="title">导航四</span>
-      </el-menu-item>
-    </el-menu>
-    </div> -->
   </div>
 </template>
 <script>
@@ -134,6 +100,7 @@ $height: 90px;
   top: 0;
   left: 0;
   width: 100%;
+  min-width: $min-width;
   height: $height;
   box-sizing: content-box;
   &:not(.channel) {
@@ -164,13 +131,6 @@ $height: 90px;
     margin-right: 43px;
   }
 }
-
-.rightNavBox{
-  font-size: 50px;
-  position: absolute;
-  right: 20px;
-  top: 20px;
-}
 .search-wrap {
   position: absolute;
   top: 67px;
@@ -215,17 +175,4 @@ $height: 90px;
     }
   }
 }
-
-
-.btnsBox{
-  width: 100%;
-  height: 300px;
-  overflow: hidden;
-  overflow-y: scroll;
-  position: absolute;
-  top: 90px;
-  left: 0;
-  background-color: white;
-  z-index: 99;;
-}
 </style>

src/pages/about/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap" v-if="modules.length>=1">
     <el-carousel height="480px" :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">
@@ -446,4 +446,128 @@ export default {
     width: 98%;
   }
 }
+
+@media (max-width: 1200px) {
+ .texts {
+  flex-direction: column;
+  .left{
+    width: 100%;
+    h2{
+      font-size: 20px;
+    }
+    
+  }
+  .bg{ 
+      margin: 0;
+      width: 100%;
+      height: 450px;
+    }
+ }
+ .block{
+  padding: 50px 0;
+  .intro{
+    margin-bottom: 50px;
+  }
+  .inner {
+    .card{
+      flex-direction: column;
+      li {
+        width: 100%;
+      }
+    }
+  }
+  
+ }
+ .gray {
+    .inner{
+      .stat{
+        flex-direction: column;
+        li{
+          width: 100%;
+          text-align: center;
+        }
+      } 
+    }
+    
+  }
+  .plan{
+    .inner{
+       flex-direction: column;
+       .pic{
+        width: 95%;margin: 0 auto;
+       }
+       .texts {
+        width: 100%;
+        text-align: center;
+       }
+    }
+  }
+  .block {
+    .inner {
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .people{
+        .wow {
+          flex-direction: column;
+          .pic {
+            width: 95%;
+            margin: 0 auto;
+          }
+          .texts{
+            padding-top: 50px;
+            width: 100%;
+          }
+        }
+      }
+      .list{
+        flex-direction: column;
+        .wow {
+          width: 100%;
+        }
+      }
+      .staff {
+        flex-direction: column;
+        .left{
+          width: 100%;
+          h6 {
+            font-size: 20px;
+          }
+          .des{
+             font-size: 15px;
+          }
+        }
+        .pic {
+          width: 95%;margin: 0 auto;
+          height: 400px;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .inner{
+    .texts {
+      .bg {
+        height: 350px;
+      }
+    }
+    .card {
+      li {
+        h6 {
+          font-size: 2rem;
+        }
+      }
+    }
+    .people{
+      li {
+        margin-bottom: 30px;
+        .pic {
+          height: 350px;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/application/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap" v-if="modules.length>=1">
     <el-carousel height="480px" :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">
@@ -288,4 +288,106 @@ export default {
     width: 1558px;
   }
 }
+
+
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .inner{
+    width: 95%;
+    margin: 0 auto;
+    .texts{
+      flex-direction: column;
+      .left {
+        width: 100%;
+      }
+      .bg{
+        margin: 0;
+        width: 100%;
+        height: 450px;
+      }
+    }
+  }
+  .app{
+    li {
+      width: 100%;
+    }
+  }
+  .intro {
+    margin-bottom: 30px;
+  }
+  .group{
+     flex-direction: column;
+     li {
+      width: 100%;
+     }
+  }
+  .news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 0 auto;
+      flex-direction: column;
+      img{
+        width: 100%;
+        height: 200px;
+      }
+      .texts{
+        margin-left: 0;
+        margin-top: 20px;
+      }
+    }
+  }
+ }
+}
+@media (max-width: 1200px) {
+ .block{ 
+  padding: 50px 0;
+  .inner{
+    width: 95%;
+    margin: 0 auto;
+    .texts{
+      flex-direction: column;
+      .left {
+        width: 100%;
+      }
+      .bg{
+        margin: 0;
+        width: 100%;
+        height: 450px;
+      }
+    }
+  }
+  .app{
+    li {
+      width: 100%;
+    }
+  }
+  .intro {
+    margin-bottom: 30px;
+  }
+  .group{
+     flex-direction: column;
+     li {
+      width: 100%;
+     }
+  }
+  .news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 0 auto;
+      flex-direction: column;
+      img{
+        width: 100%;
+        height: 200px;
+      }
+      .texts{
+        margin-left: 0;
+        margin-top: 20px;
+      }
+    }
+  }
+ }
+}
 </style>

src/pages/careers/index.vue

@@ -195,7 +195,7 @@ export default {
       display: flex;
       justify-content: flex-end;
       .comma {
-        left: 660px;
+        left: 70%;
       }
       .pic {
         left: 0;
@@ -292,4 +292,49 @@ export default {
     transition: .3s;
   }
 }
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .inner {
+    width: 95%;margin: 0 auto;
+    .card{
+      flex-direction: column;
+      li{
+        margin-top: 20px;
+        width: 100%;
+        height: 450px;
+      }
+    }
+    .people{
+      li {
+        padding: 200px 20px 30px;
+        .left {
+          width: 100%;
+        }
+        .pic{
+          top: -60px;
+          right: 13px;
+          width: 55%;
+          height: 230px;
+        }
+      }
+    }
+    
+  }
+ }
+ .shows{
+    li {
+      flex-direction: column;
+      align-items:flex-start;
+      height: 450px;
+      .left {
+        padding: 10px ;
+        h6{
+          font-size: 2rem;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/edu/index.vue

@@ -150,4 +150,36 @@ export default {
     }
   }
 }
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .inner {
+    width: 95%;margin: 0 auto;
+    .b-title{
+      margin-bottom: 30px;
+    }
+    .intro {
+      margin-bottom: 30px;
+    }
+    .block-pic{
+      height: 450px;
+    }
+  }
+  .list{
+    li {
+      margin-top: 20px;
+      .pic{
+        width: 100%;height: 450px;
+      }
+      .texts{
+        padding: 10px;
+        width: 70%;
+        top: 80px;
+        height: auto;
+        left: 24%;
+      }
+    }
+  }
+ }
+}
 </style>

src/pages/home/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="wrap">
-    <el-carousel height="959px" :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'">
+  <div class="wrap" v-if="modules.length>=1">
+    <el-carousel class="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">
-          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" height="959" :src="item.pic" alt="" @click="openLink(item)">
+          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" :src="item.pic" alt="" @click="openLink(item)">
         </el-carousel-item>
       </template>
     </el-carousel>
@@ -176,6 +176,16 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
+.carousel{
+  height: 959px;
+  img{
+    height: 100%;
+  }
+  /deep/.el-carousel__container{
+    height: 959px ;
+  }
+}
+
 .card {
   display: flex;
   justify-content: space-between;
@@ -363,4 +373,118 @@ export default {
     }
   }
 }
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .carousel{
+    height: 350px;
+    img{
+      height: 100%;
+    }
+    /deep/.el-carousel__container{
+      height: 350px ;
+    }
+  }
+  .el-carousel__item{
+     height: 350px;
+     img {
+      height: 350px;
+     }
+  }
+  .block{
+    padding: 50px 0;
+    .inner{
+      width: 95%;
+      margin: 0 auto;
+      .b-title{
+        font-size: 2rem;
+        margin-bottom: 20px;
+      }
+      .wow {
+        font-size: 1.5rem;
+      }
+      .intro {
+        margin-bottom: 20px;
+      }
+      .card {
+        flex-direction: column;
+        li{
+          margin-top: 20px;
+          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: 20px;
+        .pic {
+          width: 100%;
+          height: 350px;
+        }
+        .texts{
+          padding-top: 20px;
+          width: 100%;
+        }
+       }
+
+      }
+      
+    }
+  }
+  .about {
+    width: 100%;
+    padding: 20px 0 30px;
+    .inner {
+      width: 95%;
+      margin: 0 auto;
+      .line{
+        margin: 20px 0 20px;
+      }
+      .des {
+        margin-top: 20px;
+        padding: 10px 20px;
+      }
+    }
+  }
+  .glance {
+    padding-bottom: 20px;
+  }
+  .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: 15px;
+      img{
+          width: 10rem;
+      }
+      .texts {
+        width: calc(100% - 10rem);
+      }
+    }
+  }
+}
 </style>

src/pages/news/index.vue

@@ -11,9 +11,9 @@
       </template>
     </el-carousel>
 
-    <ul class="tabs wow fadeInLeft">
+    <ul class="tabs wow fadeInLeft" ref="tabs">
       <template v-for="(item, i) in modules[1].list">
-        <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li>
+        <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange($event,i)">{{ item.columnName }}</li>
       </template>
     </ul>
 
@@ -208,6 +208,7 @@ export default {
           }
 
           this.modules = json
+          console.log(this.modules)
           this.carouselInterval()
         }
       }).catch(err => {})
@@ -229,7 +230,10 @@ export default {
       }
     },
     // tab回调
-    tabChange(i) {
+    tabChange(e,i) {
+      const tabs = this.$refs.tabs
+      tabs.scrollLeft  = e.target.offsetLeft
+      // e.target.offsetLeft
       const { column } = this.modules[1].list[i]
       if (column && column.length) {
         const id = column[column.length - 1]
@@ -626,4 +630,182 @@ export default {
     width: 98%;
   }
 }
+
+
+@media (max-width: 1200px) {
+ .tabs {
+  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: 750px) {
+  .tabs  {
+    li {
+      padding: 15px 10px;
+      font-size: 15px;
+      margin: 0;
+    }
+  }
+  .block{
+    padding: 20px 0;
+    .inner {
+      width: 90%;
+      .news-banner{
+        img{
+          height: 350px;
+        }
+      }
+      .b-title{
+        margin-bottom: 20px;
+      }
+      .intro {
+        margin-bottom: 20px;
+      }
+      .shop-shows{
+        .left {
+          img{
+            height: 350px;
+          }
+        }
+      }
+      .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: 450px;
+          }
+        }
+        .card-list{
+          width: 100%;
+          padding: 20px 0;
+          li {
+            .pic {
+              width: 100px;
+              height: 120px;
+            }
+            .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;
+             }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/newsPress/index.vue

@@ -169,4 +169,31 @@ export default {
     }
   }
 }
+@media (min-width: 280px) and (max-width: 750px) {
+  .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;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/newsProcurement/index.vue

@@ -165,4 +165,60 @@ export default {
     }
   }
 }
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .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: 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;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/overviewLocation/index.vue

@@ -107,6 +107,9 @@ export default {
       white-space: normal;
     }
   }
+  .tab-content{
+    width: 90%;
+  }
  
 }
 </style>

src/pages/research/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap" v-if="modules.length>=1">
     <el-carousel height="480px" :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">
@@ -238,4 +238,26 @@ export default {
     line-height: 26px;
   }
 }
+
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .intro {
+    margin-bottom: 30px;
+  }
+  .area{
+    flex-direction: column;
+    li{
+      width: 95%;margin: 0 auto;
+    }
+  }
+  .group,.news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 20px auto;
+    }
+  }
+ }
+}
 </style>