自适应修复

src/layouts/header/index.vue

@@ -27,6 +27,7 @@
              @click.stop="toggleSearch">
         <template v-if="site == 2">
           <img class="search"
+               style="margin-right: 40px"
                :src="require('@/assets/images/email' + (isHome ? '-white' : '') + '.png')"
                alt=""
                @click.stop="toMail">
@@ -236,11 +237,12 @@ $height: 90px;
     position: fixed;
     top: 0;
     left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 100%;
-    // min-width: $min-width;
-    // background-color: #fff;
     height: $height;
-    box-sizing: content-box;
+    padding: 0 5% 0 5%;
     &:not(.channel) {
         background-color: #fff;
         border-bottom: 1px solid #f7f7f7;
@@ -249,9 +251,6 @@ $height: 90px;
         background-color: rgba(0, 0, 0, 0.15);
     }
     .logo {
-        position: absolute;
-        top: 0;
-        left: 5%;
         font-size: 1.428rem;
         color: #333330;
         line-height: $height;
@@ -261,9 +260,6 @@ $height: 90px;
         }
     }
     .tools {
-        position: absolute;
-        top: 30px;
-        right: 5%;
         img {
             cursor: pointer;
         }
@@ -309,10 +305,11 @@ $height: 90px;
     }
 }
 .rightBox {
-    font-size: 2.57rem;
     position: absolute;
     right: 10px;
     top: 2rem;
+    font-size: 2.57rem;
+    color: #818181;
 }
 .contentBox {
     width: 100%;
@@ -343,7 +340,7 @@ $height: 90px;
             left: 10px;
         }
         .search {
-            margin-right: 20px;
+            margin-right: 20px !important;
         }
         .tools {
             right: 30px;

src/layouts/navbar/index.vue

@@ -175,10 +175,10 @@ $height: 90px;
 }
 /deep/.nav.el-menu--horizontal {
     display: flex;
-    position: absolute;
+    // position: absolute;
-    top: 0;
+    // top: 0;
-    left: 50%;
+    // left: 50%;
-    transform: translateX(-50%);
+    // transform: translateX(-50%);
     border: 0;
     outline: none;
     .el-menu-item,

src/pages/article/index.vue

@@ -77,7 +77,7 @@ export default {
   methods: {
     // 获取文章详情
     getInfo () {
-      this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+      this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => {
         // 设置面包屑
         const { columnName, path, id } = this.$route.query
         this.routes = [
@@ -102,14 +102,21 @@ export default {
             this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
           } else {
             if (temId == 69) this.isParty = 1 // 组织架构（articleTemplate=69）是另一套主题，加个class即可
-            if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文以外的所有字段
+            if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
             data.releaseTime = data.releaseTime.split(' ')[0]
             this.form = data
             this.columnId = data.columnId
             // 如果没上传banner
             if (!data.bannerImg) {
-              this.getBanner(this.$refs.right.columns)
+              const columns = await this.$post(this.api.listWithTree, {
-              this.form.bannerImg = this.gotBanner && this.columnBanner || require('@/assets/images/article-banner.png')
+                siteId: this.site,
+                columnName: '',
+                templateId: '',
+                typeId: '',
+                isSort: 1
+              })
+              this.getBanner(columns.data)
+              this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : ''
             }
 
             // 浏览量+1
@@ -128,10 +135,10 @@ export default {
         })
         .catch((res) => { });
     },
-    // 获取banner 规则：当前文章有上传的，用上传的，没有上传的话，如果栏目有图片，读取栏目的（上级没有读上上级，以此类推）都没有的读取默认的
+    // 获取banner 规则：当前文章有上传的话，用上传的，没有上传的话，如果所属栏目有图片，读取栏目的（所属栏目没有的话读上级，上级没有就上上级，以此类推）都没有的话读取默认的
     getBanner (data) {
       for (const e of data) {
-        if (e.columnBanner) this.columnBanner = e.columnBanner
+        if (e.columnBanner && !this.gotBanner) this.columnBanner = e.columnBanner
         if (e.id == this.columnId) {
           this.gotBanner = 1
           break

src/pages/column/index.vue

@@ -449,6 +449,7 @@ export default {
   watch: {
     $route () {
       this.id = this.$route.query.id;
+      this.info = {}
       this.init();
     },
     'form.title': function (val) {
@@ -985,18 +986,18 @@ export default {
 
     .articles {
         .readDetail {
-            padding: 1.3rem 1.5rem;
+            padding: 10px 20px;
             justify-content: flex-start;
             align-items: center;
             .texts {
                 padding-left: 1.5rem;
                 .titleDes {
-                    margin-bottom: 1.3rem;
+                    margin-bottom: 10px;
                     font-size: 1.2rem;
                     margin-top: 0;
                 }
                 .des {
-                    margin-top: 1.3rem;
+                    margin-top: 10px;
                 }
             }
             .titleDes {
@@ -1004,7 +1005,7 @@ export default {
                 -webkit-line-clamp: 1;
             }
             .readDetailBtn {
-                margin-top: 1.3rem;
+                margin-top: 10px;
             }
             .texts {
                 flex-grow: 1;
@@ -1036,10 +1037,9 @@ export default {
         }
 
         h6 {
-            margin-bottom: 15px;
+            margin-bottom: 10px;
             font-size: 1.368rem;
             color: #000;
-            line-height: 38px;
             @include mul-ellipsis(2);
         }
 
@@ -1047,6 +1047,7 @@ export default {
             display: flex;
             align-items: center;
             font-size: 0.88rem;
+            line-height: 1;
             font-family: PingFangSC-Medium;
             color: #333;
         }
@@ -1056,7 +1057,7 @@ export default {
         }
 
         .des {
-            margin-top: 15px;
+            margin-top: 10px;
             @include mul-ellipsis(2);
         }
 

src/pages/contactUs/index.vue

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

src/pages/governance/index.vue

@@ -228,10 +228,11 @@ export default {
     }
     .cards {
         ul {
-            width: 100%;
+            width: 98%;
         }
         li {
-            width: 30%;
+            width: 100%;
+            margin: 0 0 20px 0;
         }
     }
 }

src/pages/iasf/index.vue

@@ -9,7 +9,8 @@
       </div>
     </div>
 
-    <div class="block">
+    <div class="block"
+         style="padding-top: 110px">
       <div class="inner">
         <ul class="card">
           <li class="wow fadeInDown"
@@ -815,18 +816,11 @@ export default {
     }
 }
 @media (max-width: 1200px) {
-    .block {
+    .card {
-        padding: 3.125rem 0;
+        flex-direction: column;
-        .inner {
+        li {
-            width: 95%;
+            margin-top: 1.25rem;
-            margin: 0 auto;
+            width: 100%;
-            .card {
-                flex-direction: column;
-                li {
-                    margin-top: 1.25rem;
-                    width: 100%;
-                }
-            }
         }
     }
     .news {
@@ -856,6 +850,9 @@ export default {
         .pic {
             width: 100%;
         }
+        .left {
+            margin-bottom: 10px;
+        }
     }
     .about {
         .inner {
@@ -879,4 +876,11 @@ export default {
         }
     }
 }
+@media (max-width: 1200px) {
+    .iasf-banner {
+        .texts {
+            left: 3%;
+        }
+    }
+}
 </style>

src/pages/industrial/index.vue

@@ -79,7 +79,7 @@
     </div>
 
     <div class="block">
-      <div class="inner app-inner">
+      <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
         <p class="intro wow fadeInUp"
            data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
@@ -187,14 +187,14 @@ export default {
 @import '../../styles/page/page.scss';
 .history {
     h2 {
+        margin-bottom: 20px;
         font-size: 1.8rem;
         color: #333;
     }
     .texts {
         display: flex;
         justify-content: space-between;
-        padding: 82px 57px 30px;
+        padding: 30px 57px;
-        margin-top: 20px;
         background-color: #fff;
         border-radius: 100px 0px 0px 0px;
         transition: 0.3s;
@@ -291,9 +291,6 @@ export default {
     }
 }
 
-.app-inner {
-    width: 1200px;
-}
 .app {
     display: flex;
     flex-wrap: wrap;
@@ -391,6 +388,9 @@ export default {
         .right {
             width: 100%;
         }
+        h6 {
+            margin-left: 0;
+        }
         .right {
             margin-top: 1rem;
         }
@@ -411,5 +411,29 @@ export default {
             }
         }
     }
+    .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

@@ -34,72 +34,74 @@
               :key="i"
               @click="tabChange(item)">{{ item.name }}</li>
         </ul>
-        <table v-if="!active"
+        <div class="table-wrap">
-               class="table">
+          <table v-if="!active"
-          <thead>
+                 class="table">
-            <tr>
+            <thead>
-              <th>光源名称</th>
+              <tr>
-              <th>国家</th>
+                <th>光源名称</th>
-              <th>电子束能量（GeV）</th>
+                <th>国家</th>
-              <th>储存环周长(m)</th>
+                <th>电子束能量（GeV）</th>
-              <th>实验站数量</th>
+                <th>储存环周长(m)</th>
-              <th>代际</th>
+                <th>实验站数量</th>
-              <th>建成/改造时间</th>
+                <th>代际</th>
-              <th>发射度(nm.rad)</th>
+                <th>建成/改造时间</th>
-              <th>状态</th>
+                <th>发射度(nm.rad)</th>
-            </tr>
+                <th>状态</th>
-          </thead>
+              </tr>
-          <tr v-for="(item, i) in modules[2].list"
+            </thead>
-              :key="i">
+            <tr v-for="(item, i) in modules[2].list"
-            <td>{{ item.name }}</td>
-            <td>{{ item.country }}</td>
-            <td>{{ item.gev }}</td>
-            <td>{{ item.storage }}</td>
-            <td>{{ item.stations }}</td>
-            <td>{{ item.intergenerational }}</td>
-            <td>{{ item.time }}</td>
-            <td>{{ item.emittance }}</td>
-            <td>{{ item.status }}</td>
-          </tr>
-        </table>
-        <table v-else
-               class="table">
-          <thead>
-            <tr>
-              <th>光源名称</th>
-              <th>国家</th>
-              <th>地点</th>
-              <th>加速器技术</th>
-              <th>能量/GeV</th>
-              <th>波长范围/nm</th>
-              <th>重复频率/Hz Repetition rate</th>
-              <th>设施长度/m Overall length</th>
-              <th>线站数量</th>
-              <th>状态</th>
-              <th>出光时间</th>
-            </tr>
-          </thead>
-          <template v-if="modules[3].list.length">
-            <tr v-for="(item, i) in modules[3].list"
                 :key="i">
               <td>{{ item.name }}</td>
               <td>{{ item.country }}</td>
-              <td>{{ item.address }}</td>
-              <td>{{ item.accelerator }}</td>
               <td>{{ item.gev }}</td>
-              <td>{{ item.wavelength }}</td>
+              <td>{{ item.storage }}</td>
-              <td>{{ item.repetitive }}</td>
-              <td>{{ item.facility }}</td>
               <td>{{ item.stations }}</td>
-              <td>{{ item.status }}</td>
+              <td>{{ item.intergenerational }}</td>
               <td>{{ item.time }}</td>
+              <td>{{ item.emittance }}</td>
+              <td>{{ item.status }}</td>
             </tr>
-          </template>
+          </table>
-          <tr v-else>
+          <table v-else
-            <td class="none"
+                 class="table">
-                colspan="11">暂无数据</td>
+            <thead>
-          </tr>
+              <tr>
-        </table>
+                <th>光源名称</th>
+                <th>国家</th>
+                <th>地点</th>
+                <th>加速器技术</th>
+                <th>能量/GeV</th>
+                <th>波长范围/nm</th>
+                <th>重复频率/Hz Repetition rate</th>
+                <th>设施长度/m Overall length</th>
+                <th>线站数量</th>
+                <th>状态</th>
+                <th>出光时间</th>
+              </tr>
+            </thead>
+            <template v-if="modules[3].list.length">
+              <tr v-for="(item, i) in modules[3].list"
+                  :key="i">
+                <td>{{ item.name }}</td>
+                <td>{{ item.country }}</td>
+                <td>{{ item.address }}</td>
+                <td>{{ item.accelerator }}</td>
+                <td>{{ item.gev }}</td>
+                <td>{{ item.wavelength }}</td>
+                <td>{{ item.repetitive }}</td>
+                <td>{{ item.facility }}</td>
+                <td>{{ item.stations }}</td>
+                <td>{{ item.status }}</td>
+                <td>{{ item.time }}</td>
+              </tr>
+            </template>
+            <tr v-else>
+              <td class="none"
+                  colspan="11">暂无数据</td>
+            </tr>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -186,6 +188,9 @@ export default {
     width: 100%;
     margin-top: 20px;
     border-collapse: collapse;
+    th {
+        white-space: nowrap;
+    }
     th,
     td {
         padding: 10px 10px;
@@ -193,4 +198,10 @@ export default {
         text-align: left;
     }
 }
+@media (max-width: 1200px) {
+    .table-wrap {
+        width: 100%;
+        overflow: auto;
+    }
+}
 </style>

src/pages/overview/index.vue

@@ -60,15 +60,20 @@
     <div class="block gray fac">
       <div class="inner">
         <div class="event">
-          <h6>{{ modules[4].form.title }}</h6>
+          <img src="http://10.10.11.7/images/overview/16.png"
-          <p class="en">{{ modules[4].form.subTitle }}</p>
-          <div class="text"
-               v-html="modules[4].form.des"></div>
-          <img v-if="isLink(modules[4].form.link.linkName)"
-               class="arrow"
-               src="@/assets/images/arrow.png"
                alt=""
-               @click="openLink(modules[4].form)">
+               class="pic">
+          <div class="texts">
+            <h6>{{ modules[4].form.title }}</h6>
+            <p class="en">{{ modules[4].form.subTitle }}</p>
+            <div class="text"
+                 v-html="modules[4].form.des"></div>
+            <img v-if="isLink(modules[4].form.link.linkName)"
+                 class="arrow"
+                 src="@/assets/images/arrow.png"
+                 alt=""
+                 @click="openLink(modules[4].form)">
+          </div>
         </div>
         <ul class="l-card">
           <li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
@@ -220,13 +225,12 @@ export default {
         -webkit-line-clamp: 6;
     }
     .bg {
-        margin: -115px -80px 0 0;
+        margin: -115px -80px 0 30px;
         border-top-right-radius: 40px;
     }
 }
 .core {
     position: relative;
-    height: 424px;
     margin-bottom: 40px;
     &:last-child {
         .texts {
@@ -236,7 +240,6 @@ export default {
     }
     .pic {
         width: 100%;
-        height: 100%;
     }
     .texts {
         position: absolute;
@@ -264,9 +267,16 @@ export default {
 .fac {
     .event {
         position: relative;
-        height: 387px;
+        .pic {
-        padding: 70px 300px 70px 60px;
+            width: 100%;
-        background: url(http://10.10.11.7/images/overview/16.png) 0 0/100% 100% no-repeat;
+        }
+        .texts {
+            position: absolute;
+            top: 70px;
+            right: 300px;
+            bottom: 70px;
+            left: 60px;
+        }
         h6 {
             position: relative;
             font-size: 2.2rem;
@@ -409,7 +419,7 @@ export default {
             width: auto;
             max-width: 100%;
             height: auto;
-            margin-top: 20px;
+            margin: 20px 0 0 0;
         }
     }
     .scan {
@@ -425,15 +435,27 @@ export default {
             margin-top: 2rem;
         }
     }
+    .fac {
+        .event {
+            .texts {
+                position: static;
+                margin-top: 20px;
+            }
+        }
+    }
 }
 @media (max-width: 920px) {
     .core {
         .texts {
-            top: 20px;
+            top: 20px !important;
-            left: 20px;
+            left: 20px !important;
-            right: auto;
+            right: 20px !important;
+            width: auto;
         }
     }
+    .scan {
+        padding: 20px;
+    }
     .fac {
         .l-card {
             flex-direction: column;
@@ -444,14 +466,15 @@ export default {
         }
     }
 }
-@media (max-width: 640px) {
+@media (max-width: 750px) {
-    .about {
+    .core {
-        .inner {
+        .texts {
-            flex-direction: column;
+            position: static;
+            padding: 20px;
+            color: #333;
         }
-        .pic {
+        .line {
-            width: 100%;
+            background: #333;
-            margin-bottom: 2rem;
         }
     }
 }

src/pages/publish/show.vue

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

src/pages/researchTeam/index.vue

@@ -18,38 +18,40 @@
                    clearable>
           </div>
 
-          <div class="letter">
+          <div class="team-wrap">
-            <span v-for="(letter, i) in letters"
+            <div class="letter">
+              <span v-for="(letter, i) in letters"
+                    :key="i"
+                    :class="['item', {active: curLetter == letter}]"
+                    @click="letterClick(letter)">{{ letter }}</span>
+            </div>
+
+            <ul class="teams">
+              <li v-for="(item, i) in articles"
                   :key="i"
-                  :class="['item', {active: curLetter == letter}]"
+                  @click="toArtice(item, modules[1].form)">
-                  @click="letterClick(letter)">{{ letter }}</span>
+                <div class="line">
+                  <img src="http://10.10.11.7/images/researchTeam/3.png"
+                       alt=""
+                       class="icon">
+                  <span class="bold">{{ item.title }}</span>
+                  <span class="val">/ {{ item.post }}</span>
+                </div>
+                <div class="line">
+                  <img src="http://10.10.11.7/images/researchTeam/4.png"
+                       alt=""
+                       class="icon">
+                  <span class="text">专业 {{ item.major }}</span>
+                </div>
+                <div class="line">
+                  <img src="http://10.10.11.7/images/researchTeam/5.png"
+                       alt=""
+                       class="icon">
+                  <span class="text">荣誉 {{ item.honor }}</span>
+                </div>
+              </li>
+            </ul>
           </div>
-
-          <ul class="teams">
-            <li v-for="(item, i) in articles"
-                :key="i"
-                @click="toArtice(item, modules[1].form)">
-              <div class="line">
-                <img src="http://10.10.11.7/images/researchTeam/3.png"
-                     alt=""
-                     class="icon">
-                <span class="bold">{{ item.title }}</span>
-                <span class="val">/ {{ item.post }}</span>
-              </div>
-              <div class="line">
-                <img src="http://10.10.11.7/images/researchTeam/4.png"
-                     alt=""
-                     class="icon">
-                <span class="text">专业 {{ item.major }}</span>
-              </div>
-              <div class="line">
-                <img src="http://10.10.11.7/images/researchTeam/5.png"
-                     alt=""
-                     class="icon">
-                <span class="text">荣誉 {{ item.honor }}</span>
-              </div>
-            </li>
-          </ul>
         </div>
 
         <RightColumns />
@@ -178,6 +180,7 @@ export default {
         .item {
             padding: 5px 10px;
             font-size: 1rem;
+            text-align: center;
             color: #999;
             cursor: pointer;
             border: 1px solid #dbdbdb;
@@ -237,7 +240,7 @@ export default {
 }
 @media (max-width: 1200px) {
     .content {
-        width: 98%;
+        width: 95%;
     }
     .article {
         flex-direction: column;
@@ -250,11 +253,37 @@ export default {
         }
     }
 }
+@media (max-width: 980px) {
+    .article {
+        .team-wrap {
+            display: flex;
+            align-items: flex-start;
+        }
+        .letter {
+            flex-direction: column;
+            margin: 16px 10px 0 0;
+            .item {
+                border: 1px solid #dbdbdb;
+                border-top: 0;
+                &:first-child {
+                    border-top: 1px solid #dbdbdb;
+                    border-radius: 4px 4px 0 0;
+                }
+                &:last-child {
+                    border-radius: 0 0 4px 4px;
+                }
+            }
+        }
+        .teams {
+            flex: 1;
+        }
+    }
+}
 @media (max-width: 640px) {
     .article {
         .left {
             .search {
-                width: 5 0%;
+                width: 50%;
             }
         }
         .teams {

src/pages/speech/index.vue

@@ -116,4 +116,22 @@ 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/team/index.vue

@@ -122,4 +122,26 @@ export default {
         }
     }
 }
+@media (max-width: 1200px) {
+    .content {
+        width: 95%;
+        flex-direction: column;
+        .left,
+        .right {
+            width: 100%;
+        }
+    }
+}
+@media (max-width: 640px) {
+    .content {
+        .list {
+            li {
+                flex-direction: column;
+            }
+            .pic {
+                margin: 0 0 20px 0;
+            }
+        }
+    }
+}
 </style>

src/styles/page/page.scss

@@ -130,13 +130,8 @@
         }
     }
 }
-@media (max-width: 1410px) {
-    .inner {
-        width: 80%;
-    }
-}
 
-@media (max-width: 1300px) {
+@media (max-width: 1200px) {
     .wrap {
         .single-banner {
             .banner-img {
@@ -148,6 +143,9 @@
             }
         }
     }
+    .inner {
+        width: 95%;
+    }
     .tabs {
         overflow: hidden;
         overflow-x: auto;
@@ -159,25 +157,6 @@
         }
     }
 }
-@media (max-width: 980px) {
-    .wrap {
-        .single-banner {
-            .banner-img {
-                height: 32rem;
-            }
-            .texts {
-                top: 20rem;
-                left: 5rem;
-            }
-        }
-    }
-    .tabs {
-        li {
-            font-size: 0.8rem;
-        }
-    }
-}
-
 @media (max-width: 980px) {
     .wrap {
         .single-banner {
@@ -190,6 +169,9 @@
             }
         }
     }
+    .block {
+        padding: 50px 0;
+    }
 }
 @media (max-width: 768px) {
     .wrap {