产品中心等

package.json

@@ -20,6 +20,7 @@
     "lru-cache": "^7.14.1",
     "mavon-editor": "^2.9.1",
     "node-sass": "^4.14.1",
+    "pinyin-pro": "^3.15.1",
     "vue": "^2.6.14",
     "vue-animate-number": "^0.4.2",
     "vue-cropperjs": "^3.0.0",

src/const/column.js

@@ -71,5 +71,5 @@
       id: 2,
       name: '实用外观'
     }
-  ]
+  ],
 }

src/pages/article/index.vue

@@ -96,6 +96,7 @@ export default {
           if (temId === 25 || temId === 26) { // 会议活动/期刊详情
             this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
           } else {
+            if (temId == 69) this.isParty = 1
             data.releaseTime = data.releaseTime.split(' ')[0]
             this.form = data
             this.columnId = data.columnId

src/pages/industrial/index.vue

@@ -1,31 +1,43 @@
 <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>
       </div>
     </div>
 
     <div class="block history gray">
-      <div class="inner" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+      <div class="inner"
-        <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+           :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
-        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+           @click="openLink(modules[1].form)">
+        <h2 class="wow fadeInLeft"
+            style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
           <div class="left">
             <h2>{{ modules[1].form.subTitle }}</h2>
-            <div class="text" v-html="modules[1].form.des"></div>
+            <div class="text"
+                 v-html="modules[1].form.des"></div>
           </div>
-          <img class="bg" :src="modules[1].form.pic" alt="">
+          <img class="bg"
+               :src="modules[1].form.pic"
+               alt="">
         </div>
       </div>
     </div>
 
     <div class="block land">
       <div class="inner">
-        <img class="pic" :src="modules[2].form.pic" alt="">
+        <img class="pic"
-          <div class="right">
+             :src="modules[2].form.pic"
-            <h6>{{ modules[2].form.title }}</h6>
+             alt="">
-            <div class="text" v-html="modules[2].form.des"></div>
+        <div class="right">
+          <h6>{{ modules[2].form.title }}</h6>
+          <div class="text"
+               v-html="modules[2].form.des"></div>
         </div>
       </div>
     </div>
@@ -33,27 +45,90 @@
     <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="plan">
           <li>
             <div class="left">
               <h6>{{ modules[4].form.title }}</h6>
-              <div class="text" v-html="modules[4].form.des"></div>
+              <div class="text"
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
+                   v-html="modules[4].form.des"></div>
+              <a v-if="isLink(modules[4].form.link.linkName)"
+                 class="survey"
+                 @click="openLink(modules[4].form)">需求调研 ></a>
             </div>
-            <img class="pic" :src="modules[4].form.pic" alt="">
+            <img class="pic"
+                 :src="modules[4].form.pic"
+                 alt="">
           </li>
           <li>
             <div class="left">
               <h6>{{ modules[5].form.title }}</h6>
-              <div class="text" v-html="modules[5].form.des"></div>
+              <div class="text"
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[5].form.link.linkName)}" @click="openLink(modules[5].form)">
+                   v-html="modules[5].form.des"></div>
+              <a v-if="isLink(modules[5].form.link.linkName)"
+                 class="survey"
+                 @click="openLink(modules[5].form)">需求调研 ></a>
             </div>
-            <img class="pic" :src="modules[5].form.pic" alt="">
+            <img class="pic"
+                 :src="modules[5].form.pic"
+                 alt="">
           </li>
         </ul>
       </div>
     </div>
+
+    <div class="block">
+      <div class="inner app-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>
+        <ul class="app">
+          <li v-for="(item, i) in modules[7].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)">
+            <img class="bg"
+                 :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
+                 alt="">
+            <img class="icon"
+                 :src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')"
+                 alt="">
+            <p class="text">{{ item.title }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block news-block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[8].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
+        <ul class="news">
+          <li class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              v-for="(item, i) in articles"
+              :key="i"
+              @click="toArtice(item, modules[9].form)">
+            <img :src="item.titleImg"
+                 alt="">
+            <div class="texts">
+              <span class="meta">{{ item.releaseTime }}</span>
+              <h6>{{ item.title }}</h6>
+            </div>
+          </li>
+        </ul>
+        <div class="all-link"
+             @click="toAll(modules[9 ].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -64,17 +139,17 @@ import Util from "@/libs/util";
 import WOW from "wow.js";
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
-      routes: [],
+      articles: [],
     };
   },
-  mounted() {
+  mounted () {
     new WOW().init();
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(
         `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
@@ -86,14 +161,23 @@ 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);
+
+
+            // 获取文章列表
+            const { column, articleNum } = json[9].form
+            if (column.length) {
+              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+                this.articles = Util.removeTag(data.slice(0, articleNum || 6))
+              }).catch(err => { })
+            }
           }
         })
-        .catch((err) => {});
+        .catch((err) => { });
     },
   },
 };
@@ -101,152 +185,231 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .history {
-  h2 {
+    h2 {
-    font-size: 1.8rem;
+        font-size: 1.8rem;
-    color: #333;
+        color: #333;
-  }
+    }
-  .texts {
+    .texts {
-    display: flex;
+        display: flex;
-    justify-content: space-between;
+        justify-content: space-between;
-    padding: 82px 57px 30px;
+        padding: 82px 57px 30px;
-    margin-top: 20px;
+        margin-top: 20px;
-    background-color: #fff;
+        background-color: #fff;
-    border-radius: 100px 0px 0px 0px;
+        border-radius: 100px 0px 0px 0px;
-    transition: .3s;
+        transition: 0.3s;
-    &:hover {
+        &:hover {
-      transform: scale(1.05);
+            transform: scale(1.05);
-    }
+        }
-  }
+    }
-  .left {
+    .left {
-    width: 500px;
+        width: 500px;
-    padding-right: 30px;
+        padding-right: 30px;
-  }
+    }
-  .text {
+    .text {
-    margin: 20px 0;
+        margin: 20px 0;
-    font-size: 1.2rem;
+        font-size: 1.2rem;
-    color: #181818;
+        color: #181818;
-    line-height: 31px;
+        line-height: 31px;
-    @include mul-ellipsis(10);
+        @include mul-ellipsis(10);
-  }
+    }
-  .bg {
+    .bg {
-    width: 560px;
+        width: 560px;
-    height: 500px;
+        height: 500px;
-    margin: -122px 0 0 0;
+        margin: -122px -83px 0 0;
-  }
+    }
 }
 .land {
-  .inner {
+    .inner {
-    display: flex;
+        display: flex;
-  }
-  .pic {
-    width: 50%;
-    height: 450px;
-  }
-  .right {
-    width: 50%;
-  }
-  h6 {
-    margin-left: 50px;
-    font-size: 1.3rem;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    color: #333;
-    @include ellipsis();
-  }
-  .text {
-    height: 405px;
-    padding: 50px;
-    margin-top: 1rem;
-    background: rgba(242,246,248,0.45);
-    border-radius: 0px 100px 0px 0px;
-  }
-}
-.plan {
-  li {
-    display: flex;
-    height: 500px;
-    margin-bottom: 60px;
-    color: #333;
-    background-color: #fff;
-    border-radius: 100px 0px 0px 0px;
-    &:nth-child(even) {
-      flex-direction: row-reverse;
-      .pic {
-        margin: -20px 0 0 -20px;
-        border-radius: 0 100px 0 0;
-      }
     }
-    .left {
+    .pic {
-      width: 50%;
+        width: 50%;
-      padding: 50px;
+        height: 450px;
+    }
+    .right {
+        width: 50%;
     }
     h6 {
-      font-size: 1.4rem;
+        margin-left: 50px;
-      font-family: PingFangSC-Medium, PingFang SC;
+        font-size: 1.3rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #333;
+        @include ellipsis();
     }
     .text {
-      margin: 1rem 0;
+        height: 405px;
-      font-size: 1rem;
+        padding: 50px;
-      line-height: 1.6;
+        margin-top: 1rem;
+        background: rgba(242, 246, 248, 0.45);
+        border-radius: 0px 100px 0px 0px;
     }
-    .pic {
+}
-      width: 48%;
+.plan {
-      height: 500px;
+    li {
-      margin: -20px -20px 0 0;
+        display: flex;
-      border-radius: 100px 0 0 0;
+        justify-content: space-between;
+        height: 500px;
+        margin-bottom: 60px;
+        color: #333;
+        background-color: #fff;
+        border-radius: 100px 0px 0px 0px;
+        &:nth-child(even) {
+            flex-direction: row-reverse;
+            .pic {
+                margin: -20px 0 0 -20px;
+                border-radius: 0 100px 0 0;
+            }
+        }
+        .left {
+            width: 50%;
+            padding: 50px;
+        }
+        h6 {
+            font-size: 1.4rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+        }
+        .text {
+            margin: 1rem 0;
+            font-size: 1rem;
+            line-height: 1.6;
+        }
+        .survey {
+            padding: 8px 15px;
+            font-size: 0.9rem;
+            color: #fff;
+            background-color: #1150ac;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        .pic {
+            width: 48%;
+            height: 500px;
+            margin: -20px -20px 0 0;
+            border-radius: 100px 0 0 0;
+        }
     }
-  }
 }
-@media (max-width: 1200px) {
+
-  .history {
+.app-inner {
-    .left {
+    width: 1558px;
-      width: 50%;
+}
+.app {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 368px;
+        height: 252px;
+        margin: 0 14px 14px 0;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+            .icon {
+                transform: rotateY(180deg);
+            }
+        }
+        &:nth-child(4n) {
+            margin-right: 0;
+        }
     }
     .bg {
-      width: 50%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .icon {
+        position: relative;
+        transition: 0.5s;
+    }
+    .text {
+        position: relative;
+        margin-top: 20px;
+        font-size: 32px;
+        color: #fff;
     }
-  }
 }
-@media (max-width: 1200px) {
+.news {
-  .history {
+    position: relative;
-    .texts {
+    display: flex;
-      flex-direction: column;
+    flex-wrap: wrap;
+    li {
+        width: calc((100% - 34px) / 3);
+        margin: 0 17px 20px 0;
+        background-color: #fff;
+        cursor: pointer;
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
     }
-    .left {
+    img {
-      width: 100%;
+        width: 100%;
+        height: 220px;
     }
-    .bg {
+    .texts {
-      width: 100%;
+        padding: 20px 24px;
-      height: auto;
+        background-color: #fff;
-      margin-top: 1rem;
     }
-  }
+    h6 {
-  .land {
+        margin-top: 8px;
-    .inner {
+        font-size: 1rem;
-      flex-direction: column;
+        color: #333;
+        text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
     }
-    .pic, .right {
+    .meta {
-      width: 100%;
+        font-size: 0.9rem;
+        color: #666;
+        text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
     }
-    .right {
+}
-      margin-top: 1rem;
+@media (max-width: 1200px) {
+    .history {
+        .texts {
+            flex-direction: column;
+        }
+        .left {
+            width: 100%;
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+            margin-top: 1rem;
+        }
     }
-    .text {
+    .land {
-      height: auto;
+        .inner {
+            flex-direction: column;
+        }
+        .pic,
+        .right {
+            width: 100%;
+        }
+        .right {
+            margin-top: 1rem;
+        }
+        .text {
+            height: auto;
+        }
     }
-  }
+    .plan {
-  .plan {
+        li {
-    li {
+            flex-direction: column !important;
-      flex-direction: column !important;
+            height: auto;
-      height: auto;
+            .left,
-      .left, .pic {
+            .pic {
-        width: 100%;
+                width: 100%;
-      }
+            }
-      .pic {
+            .pic {
-        margin: 1rem 0 0 !important;
+                margin: 1rem 0 0 !important;
-      }
+            }
+        }
     }
-  }
 }
 </style>

src/pages/publication/monograph.vue

@@ -3,30 +3,53 @@
     <div class="forms">
       <div class="item">
         <span class="label">{{$t('column.Publicationtime')}}：</span>
-        <el-date-picker
+        <el-date-picker style="width: 300px"
-          style="width: 300px"
+                        v-model="form.publicationYear"
-          v-model="form.publicationYear"
+                        type="year"
-          type="year"
+                        :placeholder="$t('column.pleaseSelectThePublicationTime')"
-          :placeholder="$t('column.pleaseSelectThePublicationTime')"
+                        format="yyyy"
-          format="yyyy"
+                        value-format="yyyy"
-          value-format="yyyy"
+                        clearable
-          clearable
+                        @change="initData">
-          @change="initData">
         </el-date-picker>
       </div>
       <div class="search">
-        <input type="text" :placeholder="$t('column.PleasenameoftheAuthor')" v-model="form.monographQueryKeyWord" clearable>
+        <input type="text"
+               :placeholder="$t('column.PleasenameoftheAuthor')"
+               v-model="form.monographQueryKeyWord"
+               clearable>
       </div>
     </div>
 
-    <el-table :data="list" class="patent-table" ref="table" stripe header-align="center">
+    <el-table :data="list"
-      <el-table-column prop="title" :label="$t('column.titleOfWork')" align="center" min-width="150"></el-table-column>
+              class="patent-table"
-      <el-table-column prop="publishingHouse" :label="$t('column.press')" align="center" min-width="150"></el-table-column>
+              ref="table"
-      <el-table-column prop="writersAndEditors" :label="$t('column.authorPersion')" align="center" min-width="150"></el-table-column>
+              stripe
-      <el-table-column prop="publicationYear" :label="$t('column.Publicationtime')" align="center" min-width="150"></el-table-column>
+              header-align="center"
+              @row-click="rowClick">
+      <el-table-column prop="title"
+                       :label="$t('column.titleOfWork')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="publishingHouse"
+                       :label="$t('column.press')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="writersAndEditors"
+                       :label="$t('column.authorPersion')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="publicationYear"
+                       :label="$t('column.Publicationtime')"
+                       align="center"
+                       min-width="150"></el-table-column>
     </el-table>
     <div class="pagination">
-      <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+      <el-pagination background
+                     @current-change="currentChange"
+                     :current-page="page"
+                     layout="total, prev, pager, next"
+                     :total="total"></el-pagination>
     </div>
   </div>
 </template>
@@ -36,7 +59,7 @@ import Util from '@/libs/util';
 import ColumnConst from '@/const/column'
 export default {
   props: ['id'],
-  data() {
+  data () {
     return {
       patentClasses: ColumnConst.patentClasses,
       searchTimer: null,
@@ -52,7 +75,7 @@ export default {
     }
   },
   watch: {
-    id() {
+    id () {
       this.id && this.initData()
     },
     'form.monographQueryKeyWord': function (val) {
@@ -62,12 +85,12 @@ export default {
       }, 500);
     }
   },
-  mounted() {
+  mounted () {
     this.initData()
   },
   methods: {
     // 查询文章列表
-    getArticle() {
+    getArticle () {
       this.id && this.$post(this.api.newlyPublishedArticles, {
         siteId: this.$route.query.siteId || this.$store.state.content.site,
         columnIds: this.id,
@@ -81,24 +104,32 @@ export default {
         })
         .catch((res) => { });
     },
-    initData() {
+    initData () {
       this.page = 1
       this.getArticle()
     },
-    currentChange(val) {
+    currentChange (val) {
       this.page = val
       this.getData()
     },
+    // 单行点击回调
+    rowClick (row) {
+      this.$parent.toArtice(row)
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/page/publication.scss";
+@import '../../styles/page/publication.scss';
 /deep/.patent-table {
-  thead tr, thead th {
+    thead tr,
-    color: #fff;
+    thead th {
-    background-color: #1583FF;
+        color: #fff;
-  }
+        background-color: #1583ff;
+    }
+    .el-table__row {
+        cursor: pointer;
+    }
 }
 </style>

src/pages/publication/patent.vue

@@ -3,47 +3,80 @@
     <div class="forms">
       <div class="item">
         <span class="label">{{$t('column.patentClassification')}}：</span>
-        <el-select v-model="form.patentClassId" clearable @change="initData" :placeholder="$t('column.Pleaseselect')">
+        <el-select v-model="form.patentClassId"
-          <el-option
+                   clearable
-            v-for="item in patentClasses"
+                   @change="initData"
-            :key="item.id"
+                   :placeholder="$t('column.Pleaseselect')">
-            :label="item.name === '发明专利' ? $t('column.inventionpatent') : $t('column.practicalAppearance')"
+          <el-option v-for="item in patentClasses"
-            :value="item.id">
+                     :key="item.id"
+                     :label="item.name === '发明专利' ? $t('column.inventionpatent') : $t('column.practicalAppearance')"
+                     :value="item.id">
           </el-option>
         </el-select>
       </div>
       <div class="item">
         <span class="label">{{$t('column.applicationDate')}}：</span>
-        <el-date-picker
+        <el-date-picker v-model="form.applicationDate"
-          v-model="form.applicationDate"
+                        type="date"
-          type="date"
+                        :placeholder="$t('column.applicationDate')"
-          :placeholder="$t('column.applicationDate')"
+                        format="yyyy-MM-dd"
-          format="yyyy-MM-dd"
+                        value-format="yyyy-MM-dd"
-          value-format="yyyy-MM-dd"
+                        @change="initData">
-          @change="initData">
         </el-date-picker>
       </div>
       <div class="search">
-        <el-tooltip class="item" effect="dark" :content="$t('column.pleaseEnterPatentOfficer')" placement="top-start">
+        <el-tooltip class="item"
-          <input type="text" :placeholder="$t('column.pleaseEnterPatentOfficer')" v-model="form.patentQueryKeyWord" clearable>
+                    effect="dark"
+                    :content="$t('column.pleaseEnterPatentOfficer')"
+                    placement="top-start">
+          <input type="text"
+                 :placeholder="$t('column.pleaseEnterPatentOfficer')"
+                 v-model="form.patentQueryKeyWord"
+                 clearable>
         </el-tooltip>
       </div>
     </div>
 
-    <el-table :data="list" class="patent-table" ref="table" stripe header-align="center">
+    <el-table :data="list"
-      <el-table-column prop="title" :label="$t('column.patentName')" align="center" min-width="150"></el-table-column>
+              class="patent-table"
-      <el-table-column :label="$t('column.patentClassification')" align="center" min-width="150">
+              ref="table"
+              stripe
+              header-align="center"
+              @row-click="rowClick">
+      <el-table-column prop="title"
+                       :label="$t('column.patentName')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column :label="$t('column.patentClassification')"
+                       align="center"
+                       min-width="150">
         <template slot-scope="scope">
           {{ scope.row.patentClassId ? patentClasses.find(e => e.id == scope.row.patentClassId).name === '发明专利' ? $t('column.inventionpatent') : $t('column.practicalAppearance') : '' }}
         </template>
       </el-table-column>
-      <el-table-column prop="applicationNumber" :label="$t('column.ApplicationNumber')" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="applicationNumber"
-      <el-table-column prop="applicationDate" :label="$t('column.ApplicationDate')" align="center" min-width="150"></el-table-column>
+                       :label="$t('column.ApplicationNumber')"
-      <el-table-column prop="dateOfAuthorization" :label="$t('column.AuthorizationDate')" align="center" min-width="150"></el-table-column>
+                       align="center"
-      <el-table-column prop="inventor" :label="$t('column.inventor')" align="center" min-width="150"></el-table-column>
+                       min-width="150"></el-table-column>
+      <el-table-column prop="applicationDate"
+                       :label="$t('column.ApplicationDate')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="dateOfAuthorization"
+                       :label="$t('column.AuthorizationDate')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="inventor"
+                       :label="$t('column.inventor')"
+                       align="center"
+                       min-width="150"></el-table-column>
     </el-table>
     <div class="pagination">
-      <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+      <el-pagination background
+                     @current-change="currentChange"
+                     :current-page="page"
+                     layout="total, prev, pager, next"
+                     :total="total"></el-pagination>
     </div>
   </div>
 </template>
@@ -53,7 +86,7 @@ import Util from '@/libs/util';
 import ColumnConst from '@/const/column'
 export default {
   props: ['id'],
-  data() {
+  data () {
     return {
       patentClasses: ColumnConst.patentClasses,
       searchTimer: null,
@@ -70,7 +103,7 @@ export default {
     }
   },
   watch: {
-    id() {
+    id () {
       this.id && this.initData()
     },
     'form.patentQueryKeyWord': function (val) {
@@ -80,12 +113,12 @@ export default {
       }, 500);
     }
   },
-  mounted() {
+  mounted () {
     this.initData()
   },
   methods: {
     // 查询文章列表
-    getArticle() {
+    getArticle () {
       this.id && this.$post(this.api.newlyPublishedArticles, {
         siteId: this.$route.query.siteId || this.$store.state.content.site,
         columnIds: this.id,
@@ -99,24 +132,32 @@ export default {
         })
         .catch((res) => { });
     },
-    initData() {
+    initData () {
       this.page = 1
       this.getArticle()
     },
-    currentChange(val) {
+    currentChange (val) {
       this.page = val
       this.getData()
     },
+    // 单行点击回调
+    rowClick (row) {
+      this.$parent.toArtice(row)
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/page/publication.scss";
+@import '../../styles/page/publication.scss';
 /deep/.patent-table {
-  thead tr, thead th {
+    thead tr,
-    color: #fff;
+    thead th {
-    background-color: #1583FF;
+        color: #fff;
-  }
+        background-color: #1583ff;
+    }
+    .el-table__row {
+        cursor: pointer;
+    }
 }
 </style>

src/pages/researchTeam/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <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>
       </div>
@@ -10,46 +12,46 @@
       <div class="article">
         <div class="left">
           <div class="search">
-            <input type="text" placeholder="请输入搜索内容" v-model="title" clearable>
+            <input type="text"
+                   placeholder="请输入搜索内容"
+                   v-model="title"
+                   clearable>
+          </div>
+
+          <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 modules[1].list" :key="i">
+            <li v-for="(item, i) in modules[1].list"
+                :key="i">
               <div class="line">
-                <img src="http://10.10.11.7/images/researchTeam/3.png" alt="" class="icon">
+                <img src="http://10.10.11.7/images/researchTeam/3.png"
+                     alt=""
+                     class="icon">
                 <span class="bold">{{ item.name }}</span>
                 <span class="val">/ {{ item.job }}</span>
               </div>
               <div class="line">
-                <img src="http://10.10.11.7/images/researchTeam/4.png" alt="" class="icon">
+                <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">
+                <img src="http://10.10.11.7/images/researchTeam/5.png"
+                     alt=""
+                     class="icon">
                 <span class="text">荣誉 {{ item.honor }}</span>
               </div>
             </li>
           </ul>
         </div>
-        <div class="right">
-          <el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
 
-          <p class="l-title">{{$t('column.hot')}}</p>
+        <RightColumns />
-          <ul class="list">
-            <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-
-          <p class="l-title">{{$t('column.latestNews')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-        </div>
       </div>
     </div>
   </div>
@@ -61,22 +63,22 @@ import articleMixins from '@/mixins/article';
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import WOW from 'wow.js'
+import RightColumns from '@/components/rightColumns'
+import { pinyin } from 'pinyin-pro'
 export default {
   mixins: [mixins, articleMixins],
-  data() {
+  data () {
     return {
       allList: [],
       title: '',
       searchTimer: null,
-      columns: [],
+      curLetter: '全部',
-      defaultProps: {
+      letters: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
-        value: 'id',
-        label: 'columnName'
-      },
-      news: [],
-      hots: []
     }
   },
+  components: {
+    RightColumns
+  },
   watch: {
     title: function (val) {
       clearTimeout(this.searchTimer);
@@ -85,13 +87,12 @@ export default {
       }, 500);
     }
   },
-  mounted() {
+  mounted () {
-    this.getColumn()
+
-    this.getArticle()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -103,174 +104,146 @@ export default {
           this.allList = json[1].list
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 筛选列表
-    filter() {
+    filter () {
-      const { title } = this
+      const { title, curLetter } = this
       this.modules[1].list = this.allList.filter(e => {
-        return e.name.includes(title) || e.job.includes(title) || e.major.includes(title) || e.honor.includes(title)
+        console.log(11, pinyin(e.name, { toneType: 'none' })[0].toUpperCase())
+        return (e.name.includes(title) || e.job.includes(title) || e.major.includes(title) || e.honor.includes(title)) && (curLetter === '全部' || (curLetter !== '全部' && curLetter === pinyin(e.name, { toneType: 'none' })[0].toUpperCase()))
       })
     },
-    // 资讯
+    // 字母点击回调
-    getColumn() {
+    letterClick (e) {
-      this.$post(this.api.listWithTreeMenuVisible, {
+      this.curLetter = e
-        siteId: this.$route.query.siteId || this.$store.state.content.site,
+      this.filter()
-        columnName: '',
+    }
-        templateId: '',
-        typeId	: '',
-        isSort: 1
-      }).then(({ data }) => {
-        this.columns = data
-        this.getInfo()
-      }).catch(err => {})
-      
-      this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
-        this.hots = Util.removeTag(data)
-      }).catch(err => {})
-    },
-    // 最新资讯
-    getArticle() {
-      this.$post(this.api.newlyPublishedArticles, {
-        pageNum: 1,
-        pageSize: 5,
-        siteId: this.$route.query.siteId || this.$store.state.content.site
-      }).then(({ data }) => {
-        this.news = Util.removeTag(data.records)
-      }).catch(res => {})
-    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .content {
-  width: 1400px;
+    width: 1400px;
 }
 .article {
-  display: flex;
-  justify-content: space-between;
-  .left {
-    width: 66%;
-    .search {
-      display: inline-flex;
-      width: 34%;
-      input {
-        width: 100%;
-        height: 38px;
-        padding: 0 15px;
-        font-size: 14px;
-        color: #333;
-        background: #F7F7F7;
-        border: 0;
-        border-top-left-radius: 6px;
-        border-bottom-left-radius: 6px;
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-  }
-  .teams {
     display: flex;
-    flex-wrap: wrap;
+    justify-content: space-between;
-    margin-top: 30px;
+    .left {
-    li {
+        width: 66%;
-      width: calc((100% - 10px) / 2);
+        .search {
-      padding: 20px 30px;
+            display: inline-flex;
-      margin: 0 10px 10px 0;
+            width: 34%;
-      background: url(http://10.10.11.7/images/researchTeam/2.png) 0 0/cover no-repeat;
+            input {
-      &:nth-child(even) {
+                width: 100%;
-        margin-right: 0;
+                height: 38px;
-      }
+                padding: 0 15px;
-    }
+                font-size: 14px;
-    .line {
+                color: #333;
-      display: flex;
+                background: #f7f7f7;
-      align-items: center;
+                border: 0;
-      margin-bottom: 8px;
+                border-top-left-radius: 6px;
-    }
+                border-bottom-left-radius: 6px;
-    .icon {
+                &:focus {
-      margin-right: 8px;
+                    outline: none;
-    }
+                }
-    .bold {
+            }
-      margin-right: 5px;
+        }
-      font-size: 1.1rem;
-      color: #333;
-    }
-    .val {
-      font-size: 1rem;
-      color: #999;
-    }
-    .text {
-      font-size: 1rem;
-      color: #666;
-    }
-  }
-  .right {
-    width: 20%;
-  }
-  .column {
-    width: 100%;
-    margin-bottom: 25px;
-  }
-  /deep/.el-tree-node__content {
-    height: 44px;
-    background-color: #E5EDF8;
-    border-bottom: 2px solid #fff;
-  }
-  /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    color: #fff;
-    background-color: #0f5698;
-  }
-  .list {
-    margin-bottom: 20px;
-    li {
-      padding: 16px 0;
-      border-bottom: 1px solid #D8D8D8;
     }
-    .text {
+    .letter {
-      margin-bottom: 5px;
+        display: flex;
-      font-size: 14px;
+        margin: 30px 0;
-      cursor: pointer;
+        border-radius: 4px;
-      &:hover {
+        .item {
-        color: $main-color;
+            padding: 5px 10px;
-      }
+            font-size: 1rem;
+            color: #999;
+            cursor: pointer;
+            border: 1px solid #dbdbdb;
+            border-right: 0;
+            &:first-child {
+                border-radius: 4px 0px 0px 4px;
+            }
+            &:last-child {
+                border-right: 1px solid #dbdbdb;
+                border-radius: 0 4px 4px 0;
+            }
+            &:hover {
+                color: #fff;
+                background: #1583ff;
+            }
+            &.active {
+                color: #fff;
+                background: #1583ff;
+            }
+        }
     }
-    .date {
+    .teams {
-      font-size: 12px;
+        display: flex;
-      color: #999;
+        flex-wrap: wrap;
+        li {
+            width: calc((100% - 10px) / 2);
+            padding: 20px 30px;
+            margin: 0 10px 10px 0;
+            background: url(http://10.10.11.7/images/researchTeam/2.png) 0 0 / cover no-repeat;
+            &:nth-child(even) {
+                margin-right: 0;
+            }
+        }
+        .line {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .icon {
+            margin-right: 8px;
+        }
+        .bold {
+            margin-right: 5px;
+            font-size: 1.1rem;
+            color: #333;
+        }
+        .val {
+            font-size: 1rem;
+            color: #999;
+        }
+        .text {
+            font-size: 1rem;
+            color: #666;
+        }
     }
-  }
 }
 @media (max-width: 1200px) {
-  .content {
+    .content {
-    width: 98%;
+        width: 98%;
-  }
+    }
-  .article {
+    .article {
-    flex-direction: column;
+        flex-direction: column;
-    .left, .right {
+        .left,
-      width: 100%;
+        .right {
-    }
+            width: 100%;
-    .left {
+        }
-      margin-bottom: 30px;
+        .left {
+            margin-bottom: 30px;
+        }
     }
-  }
 }
 @media (max-width: 640px) {
-  .article {
+    .article {
-    .left {
+        .left {
-      .search {
+            .search {
-        width: 5 0%;
+                width: 5 0%;
-      }
+            }
-    }
+        }
-    .teams {
+        .teams {
-      flex-direction: column;
+            flex-direction: column;
-      li {
+            li {
-        width: 100%;
+                width: 100%;
-      }
+            }
+        }
     }
-  }
 }
 </style>

src/pages/talentCentre/index.vue

@@ -50,38 +50,8 @@
             </li>
           </ul>
         </div>
-        <div class="right">
-          <el-tree class="column"
-                   ref="column"
-                   :data="columns"
-                   highlight-current
-                   :expand-on-click-node="false"
-                   :props="defaultProps"
-                   node-key="id"
-                   @node-click="columnTo"></el-tree>
 
-          <p class="l-title">{{$t('column.hot')}}</p>
+        <RightColumns />
-          <ul class="list">
-            <li v-for="(item, i) in hots"
-                :key="i"
-                :title="item.title"
-                @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-
-          <p class="l-title">{{$t('column.latestNews')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in news"
-                :key="i"
-                :title="item.title"
-                @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-        </div>
       </div>
     </div>
   </div>
@@ -93,24 +63,20 @@ import articleMixins from '@/mixins/article';
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import WOW from 'wow.js'
+import RightColumns from '@/components/rightColumns'
 export default {
   mixins: [mixins, articleMixins],
   data () {
     return {
       columnId: '',
       form: {},
-      columns: [],
-      defaultProps: {
-        value: 'id',
-        label: 'columnName'
-      },
-      news: [],
-      hots: []
     }
   },
+  components: {
+    RightColumns
+  },
   mounted () {
-    this.getColumn()
+
-    this.getArticle()
   },
   methods: {
     // 获取文章详情
@@ -127,33 +93,6 @@ export default {
         }
       }).catch(err => { })
     },
-    // 资讯
-    getColumn () {
-      this.$post(this.api.listWithTreeMenuVisible, {
-        siteId: this.$route.query.siteId || this.$store.state.content.site,
-        columnName: '',
-        templateId: '',
-        typeId: '',
-        isSort: 1
-      }).then(({ data }) => {
-        this.columns = data
-        this.getInfo()
-      }).catch(err => { })
-
-      this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
-        this.hots = Util.removeTag(data)
-      }).catch(err => { })
-    },
-    // 最新资讯
-    getArticle () {
-      this.$post(this.api.newlyPublishedArticles, {
-        pageNum: 1,
-        pageSize: 5,
-        siteId: this.$route.query.siteId || this.$store.state.content.site
-      }).then(({ data }) => {
-        this.news = Util.removeTag(data.records)
-      }).catch(res => { })
-    },
   }
 };
 </script>

src/pages/team/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="wrap p-b-30">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="left">
+        <ul class="list">
+          <li>
+            <img src="http://10.10.11.7/images/team/2.png"
+                 alt=""
+                 class="pic">
+            <div class="texts">
+              <h6>孙冬柏</h6>
+              <p class="job">院长/深圳产业光源项目总经理</p>
+              <div class="text">孙冬柏作为院领导，负责组织制定研究院的战略规划与实施监督，分管人才队伍建设、财务管理等方面工作，同时作为总指挥、总负责人，主持建设深圳产业光源项目。孙冬柏曾任中山大学常务副校长，层主持建设了“十一五”国家重大科技基础设施“重大工程材料服役安全研究评价设施”暨国家材料服役安全科学中心；担任分总体负责人，负责研制建设了“十二五”国家重大科技基础设施“高能同步辐射光源验证装置”—工程材料线站。</div>
+            </div>
+          </li>
+          <li>
+            <img src="http://10.10.11.7/images/team/2.png"
+                 alt=""
+                 class="pic">
+            <div class="texts">
+              <h6>孙冬柏</h6>
+              <p class="job">院长/深圳产业光源项目总经理</p>
+              <div class="text">孙冬柏作为院领导，负责组织制定研究院的战略规划与实施监督，分管人才队伍建设、财务管理等方面工作，同时作为总指挥、总负责人，主持建设深圳产业光源项目。孙冬柏曾任中山大学常务副校长，层主持建设了“十一五”国家重大科技基础设施“重大工程材料服役安全研究评价设施”暨国家材料服役安全科学中心；担任分总体负责人，负责研制建设了“十二五”国家重大科技基础设施“高能同步辐射光源验证装置”—工程材料线站。</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <RightColumns />
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import WOW from 'wow.js'
+import RightColumns from '@/components/rightColumns'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    RightColumns
+  },
+  mounted () {
+    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) => { });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.content {
+    display: flex;
+    width: 1400px;
+    justify-content: space-between;
+    .left {
+        width: calc(100% - 300px);
+    }
+    .list {
+        li {
+            display: flex;
+            align-items: center;
+            padding-bottom: 30px;
+            margin-bottom: 30px;
+            border-bottom: 1px solid #ddd;
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+        .pic {
+            width: 224px;
+            height: 268px;
+            margin-right: 25px;
+        }
+        h6 {
+            font-size: 1.2rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+        }
+        .job {
+            margin: 10px 0;
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #333;
+        }
+        .text {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #333;
+        }
+    }
+}
+</style>

src/router/modules/team.js

@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'team'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};