research、application

src/App.vue

@@ -1,25 +1,24 @@
 <template>
-    <div id="app">
+  <div id="app">
-        <router-view></router-view>
+    <router-view></router-view>
-    </div>
+  </div>
 </template>
 
 <script>
 import Setting from "@/setting";
 import util from "@/libs/util";
-
 export default {
-    name: "App",
+  name: "App",
-    created() {
+  created() {
-        //在页面加载时读取localStorage里的状态信息
+    //在页面加载时读取localStorage里的状态信息
-        if (util.local.get(Setting.storeKey)) {
+    if (util.local.get(Setting.storeKey)) {
-            this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey)));
+      this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey)));
-        }
-
-        //在页面刷新时将vuex里的信息保存到localStorage里
-        window.addEventListener("beforeunload", () => {
-            util.local.get(Setting.tokenKey) && util.local.set(Setting.storeKey, this.$store.state);
-        });
     }
+
+    //在页面刷新时将vuex里的信息保存到localStorage里
+    window.addEventListener("beforeunload", () => {
+      util.local.set(Setting.storeKey, this.$store.state);
+    });
+  }
 };
 </script>

src/api/index.js

@@ -5,4 +5,9 @@ export default {
   findPage: `iasf/sysColumnLongPage/getLongPageInformation`,
   queryArticle: `iasf/sysContent/pagingQuery`,
   getRedisCache: `iasf/sysColumnLongPage/getRedisCache`,
+  listWithTreeMenuVisible: `iasf/sysColumn/listWithTreeMenuVisible`,
+  theAttachmentUnderTheQueryColumn: `iasf/content/file/theAttachmentUnderTheQueryColumn`,
+  findColumn: `iasf/sysColumn/findById`,
+  queryClassif: `iasf/content/classification/allTheQuery`,
+  queryLabel: `iasf/content/label/queryAllArticleSubjectTags`,
 }

src/const/column.js

@@ -0,0 +1,63 @@
+/**
+ * 栏目配置
+ * */
+
+export default {
+  // 栏目类型
+  types: [
+    {
+      id: 1,
+      name: '常规栏目'
+    },
+    {
+      id: 2,
+      name: '跳转链接'
+    },
+    {
+      id: 3,
+      name: '长页栏目'
+    },
+    {
+      id: 4,
+      name: '子级优先栏目'
+    }
+  ],
+  // 长页样式
+  pageStyle: [
+    {
+      id: 1,
+      path: 'home',
+      name: 'HOME'
+    },
+    {
+      id: 2,
+      path: 'about',
+      name: 'ABOUT'
+    },
+    {
+      id: 3,
+      path: 'careers',
+      name: 'CAREERS'
+    },
+    {
+      id: 4,
+      path: 'edu',
+      name: 'EDUCATION & COLLABORATION'
+    },
+    {
+      id: 5,
+      path: 'news',
+      name: 'NEWS&EVENTS'
+    },
+    {
+      id: 6,
+      path: 'newsPress',
+      name: 'NEWS&EVENTS-PRESS ROOM'
+    },
+    {
+      id: 7,
+      path: 'newsProcurement',
+      name: 'NEWS&EVENTS-PROCUREMENT'
+    }
+  ],
+}

src/layouts/footer/index.vue

@@ -9,9 +9,9 @@
           <p class="meta">Tel：400-0010-998</p>
         </div>
         <div v-for="(item, i) in columns" :key="i" class="column">
-          <h6>{{ item.columnName }}</h6>
+          <h6 @click="jump(item)">{{ item.columnName }}</h6>
           <ul v-if="item.children.length" class="children">
-            <li v-for="(column, j) in item.children" :key="j">{{ column.columnName }}</li>
+            <li v-for="(column, j) in item.children" :key="j" @click="jump(item)">{{ column.columnName }}</li>
           </ul>
         </div>
       </div>
@@ -21,9 +21,11 @@
 </template>
 <script>
 import Setting from '@/setting'
+import ColumnConst from '@/const/column'
 export default {
   data() {
     return {
+      site: this.$store.state.content.site,
       columns: [],
       isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号
     };
@@ -34,21 +36,54 @@ export default {
   methods: {
     // 资讯
     getColumn() {
-      this.$post(this.api.listWithTree, {
+      this.$post(this.api.listWithTreeMenuVisible, {
-        siteId: 1,
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
         columnName: '',
         templateId: '',
         typeId	: '',
-        isSort: 0
+        isSort: 1
       }).then(({ data }) => {
-        this.columns = data.filter(e => !e.menuVisible).slice(0, 8)
+        this.columns = data.slice(0, 8)
       }).catch(err => {})
     },
     // 跳转
-    jump(item) {
+    jump(to) {
-      const { id } = item
+      const { id } = to
-      this.active = id
+      this.active = to.id
-      this.$router.push('channel?id=' + id).catch(err => {})
+      const { typeId } = to
+      // 跳转链接
+      if (typeId === 2) {
+        let href = to.linkAddress
+        const cType = to.connectionType
+        if (cType !== 2) { // 非站外链接
+          const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+          // 站点id：站内链接取当前站点，其他站点链接取siteSelection
+          const site = cType === 1 ?
+            (this.$route.query.siteId || this.site) :
+            to.siteSelection
+          if (ids[1]) { // 文章
+            href = '/article?id=' + ids[1]
+          } else { // 栏目
+            const columnIds = ids[0].split(',')
+            href = '/column?id=' + columnIds[columnIds.length - 1]
+          }
+          href = this.$router.resolve(href + '&siteId=' + site).href
+        }
+        // 是否新窗口打开
+        if (to.isOpen) {
+          window.open(href)
+        } else {
+          location.href = href
+        }
+      } else {
+        // 常规栏目和子级优先栏目跳转到column页
+        let path = 'column'
+        if (typeId === 3) { // 长页栏目要获取选择的是哪个长页模板
+          const item = ColumnConst.pageStyle.find(e => e.id === to.listStyleId)
+          if (item) path = item.path
+        }
+        this.$router.push(`/${path}?id=${id}`).catch(err => {})
+      }
     }
   },
 };

src/layouts/home/index.vue

@@ -12,10 +12,11 @@
 </template>
 
 <script>
-import util from "@/libs/util";
+import util from '@/libs/util'
-import Setting from "@/setting";
+import Setting from '@/setting'
-import vHead from "../header";
+import vHead from '../header'
-import vFooter from "../footer";
+import vFooter from '../footer'
+import { mapMutations } from 'vuex'
 export default {
   data() {
     return {
@@ -32,21 +33,24 @@ export default {
     }
   },
   mounted() {
-    
+    this.$route.query.siteId && this.setSite(this.$route.query.siteId)
   },
   methods: {
+    ...mapMutations('content', [
+      'setSite'
+    ]),
     // 长时间未操作,自动退出登录
     autoLogout() {
       let lastTime = new Date().getTime();
       document.onmousedown = () => {
-          lastTime = new Date().getTime();
+        lastTime = new Date().getTime();
       };
 
       setInterval(() => {
-          if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) {
+        if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) {
-              util.errorMsg("用户登录过期，请重新登录");
+          util.errorMsg("用户登录过期，请重新登录");
-              setTimeout(this.logout, 1500);
+          setTimeout(this.logout, 1500);
-          }
+        }
       }, 1000);
     }
   }

src/layouts/navbar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-menu class="nav" ref="type" :key="menuRefresh" mode="horizontal" :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @select="jump" :default-active="String(active)">
+    <el-menu class="nav" ref="type" :key="menuRefresh" mode="horizontal" :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)">
       <menuTree :menuList="menus"/>
     </el-menu>
   </div>
@@ -9,16 +9,19 @@
 <script>
 import Setting from '@/setting'
 import menuTree from '@/components/menuTree'
+import ColumnConst from '@/const/column'
 export default {
   data() {
     return {
+      site: this.$store.state.content.site,
       isChannel: this.$route.path === '/home',
       active: this.$route.query.id,
       menus: [],
       bgColor: '#fff',
       textColor: '#333',
       activeTextColor: '#1583FF',
-      menuRefresh: 1
+      menuRefresh: 1,
+      toItem: {}
     };
   },
   components: {
@@ -37,32 +40,73 @@ export default {
   methods: {
     // 资讯
     getColumn() {
-      this.$post(this.api.listWithTree, {
+      this.$post(this.api.listWithTreeMenuVisible, {
-        siteId: 1,
+        siteId: this.$route.query.siteId || this.site,
         columnName: '',
         templateId: '',
         typeId	: '',
-        isSort: 0
+        isSort: 1
       }).then(({ data }) => {
-        this.menus = data.filter(e => !e.menuVisible)
+        this.menus = data
         if (!this.active && data.length) this.active = data[0].id
       }).catch(err => {})
     },
     // 改变菜单颜色
     handleColor() {
-      if (this.isChannel) {
+      const channel = this.isChannel
-        this.bgColor = 'transparent'
+      this.bgColor = channel ? 'transparent' : '#fff'
-        this.textColor = '#fff'
+      this.textColor = channel ? '#fff' : '#333'
-        this.menuRefresh++
+      // this.menuRefresh++
+    },
+    // 获取点击菜单的路径
+    getPath(data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.toItem = e
+          break
+        } else {
+          this.getPath(e.children ,id)
+        }
       }
     },
     // 跳转
-    jump(item, indexPath) {
+    jump(id) {
-      console.log("🚀 ~ file: index.vue ~ line 61 ~ jump ~ item", item)
+      this.getPath(this.menus ,id)
-      // return
+      const to = this.toItem
-      const { id } = item
+      const { typeId } = to
-      this.active = id
+      // 跳转链接
-      this.$router.push('channel?id=' + id).catch(err => {})
+      if (typeId === 2) {
+        let href = to.linkAddress
+        const cType = to.connectionType
+        if (cType !== 2) { // 非站外链接
+          const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+          // 站点id：站内链接取当前站点，其他站点链接取siteSelection
+          const site = cType === 1 ?
+            (this.$route.query.siteId || this.site) :
+            to.siteSelection
+          if (ids[1]) { // 文章
+            href = '/article?id=' + ids[1]
+          } else { // 栏目
+            const columnIds = ids[0].split(',')
+            href = '/column?id=' + columnIds[columnIds.length - 1]
+          }
+          href = this.$router.resolve(href + '&siteId=' + site).href
+        }
+        // 是否新窗口打开
+        if (to.isOpen) {
+          window.open(href)
+        } else {
+          location.href = href
+        }
+      } else {
+        // 常规栏目和子级优先栏目跳转到column页
+        let path = 'column'
+        if (typeId === 3) { // 长页栏目要获取选择的是哪个长页模板
+          const item = ColumnConst.pageStyle.find(e => e.id === to.listStyleId)
+          if (item) path = item.path
+        }
+        this.$router.push(`/${path}?id=${id}`).catch(err => {})
+      }
     }
   }
 };
@@ -78,9 +122,6 @@ $height: 90px;
 }
 /deep/.nav.el-menu--horizontal {
   border: 0;
-  &>.menu-child>li {
-    float: left;
-  }
   .el-menu-item, .el-submenu__title {
     height: $height;
     line-height: $height;
@@ -88,6 +129,18 @@ $height: 90px;
       font-size: 14px;
     }
   }
+  .el-submenu__title {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .menu-child {
+    display: flex;
+  }
+  .el-submenu__icon-arrow {
+    position: static;
+    margin: 0;
+  }
 }
 @media (max-width: 1430px) {
   .nav {

src/pages/about/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.length > 1) ? 'hover' : 'never'">
+    <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">
           <div class="banner-item" @click="openLink(item)">

src/pages/application/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="wrap">
+    <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">
+          <div class="banner-item" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">APPLICATION</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+    
+    <div class="block history gray">
+      <div class="inner">
+        <h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+        <div class="texts">
+          <div class="left">
+            <h2>{{ modules[1].form.subTitle }}</h2>
+            <div class="line"></div>
+            <div class="des">{{ modules[1].form.des }}</div>
+            <img src="@/assets/images/arrow.png" alt="">
+          </div>
+          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+        </div>
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner" style="width: 1558px">
+        <h2 class="b-title">{{ modules[2].form.title }}</h2>
+        <p class="intro">{{ modules[2].form.des }}</p>
+        <ul class="app">
+          <li v-for="(item, i) in modules[3].list" :key="i">
+            <img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt="">
+            <img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt="">
+            <p class="text">{{ item.title }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title">{{ modules[4].form.title }}</h2>
+        <p class="intro">{{ modules[4].form.des }}</p>
+        <ul class="group">
+          <li v-for="(item, i) in modules[5].list" :key="i">
+            <img :src="item.pic" alt="">
+            <p class="text">{{ item.title }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block news-block">
+      <div class="inner">
+        <h2 class="b-title">{{ modules[6].form.title }}</h2>
+        <p class="intro">{{ modules[6].form.des }}</p>
+        <ul class="news">
+          <li v-for="(item, i) in articles" :key="i">
+            <img src="@/assets/images/channel1.png" alt="">
+            <div class="texts">
+              <h6>{{ item.columnName }}</h6>
+              <div class="des" v-html="item.mainBody"></div>
+              <span class="meta">{{ item.createTime }}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      articles: []
+    }
+  },
+  mounted() {
+    
+  },
+  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[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+          
+          // 获取文章列表
+          const { column, site, articleNum } = json[7].form
+          if (column.length) {
+            this.$post(this.api.queryArticle, {
+              siteId: site,
+              columnIds: [column[column.length - 1]],
+              pageNum: 1,
+              pageSize: articleNum || 6
+            }).then(({ data }) => {
+              this.articles = data.records
+            }).catch(err => {})
+          }
+        }
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/page.scss";
+.history {
+  h2 {
+    font-size: 30px;
+    color: #333;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 82px 57px 30px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+  }
+  .left {
+    width: 695px;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 22px;
+    color: #181818;
+    line-height: 31px;
+  }
+  .bg {
+    margin: -122px 0 0 0;
+  }
+}
+.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;
+    &:first-child {
+      width: 750px;
+    }
+    &:nth-child(3), &:nth-child(7), &:nth-child(10) {
+      margin-right: 0;
+    }
+    &:nth-child(9) {
+      width: 563px;
+    }
+    &:nth-child(10) {
+      width: 555px;
+    }
+  }
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .icon {
+    position: relative;
+  }
+  .text {
+    position: relative;
+    margin-top: 20px;
+    font-size: 32px;
+    color: #fff;
+  }
+}
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    width: 448px;
+    margin: 0 28px 39px 0;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  .text {
+    font-size: 30px;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
+    line-height: 143px;
+    color: #272727;
+    text-align: center;
+    background-color: #F5F5F5;
+  }
+}
+.news-block {
+  background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+}
+.news {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    display: inline-flex;
+    width: 686px;
+    padding: 34px;
+    margin-bottom: 28px;
+    background-color: #fff;
+    &:nth-child(odd) {
+      margin-right: 28px;
+    }
+  }
+  img {
+    width: 237px;
+    height: 167px;
+  }
+  .texts {
+    margin-left: 34px;
+  }
+  h6 {
+    font-size: 18px;
+    color: #0648A8;
+  }
+  .des {
+    margin: 14px 0;
+    font-size: 16px;
+    color: #333;
+    line-height: 22px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #999;
+  }
+}
+</style>

src/pages/article/editor.css

@@ -4,7 +4,6 @@
   background-color: #ededed;
 }
 .tiny-wrap {
-  width: 900px;
   margin: 0 auto;
 }
 .tiny-wrap blockquote p {

src/pages/article/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="wrap">
     <div class="banner" :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
-      S³FEL概况
+      {{ form.title }}
     </div>
-    <div class="content">
+    <div class="content" style="width: 1400px;">
       <Breadcrumb ref="breadcrumb" :data="'装置概况/' + form.title"/>
       <div class="article">
         <div class="left">
@@ -11,12 +11,14 @@
           <div class="meta">{{ form.createTime }} | {{ form.source && form.source + '|' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} 浏览</div>
           <p class="brief">{{ form.summary }}</p>
           <div v-html="form.mainBody"></div>
-          <div class="annex">
+          <div v-if="files.length" class="annex">
             <h6>附件下载</h6>
-            <div class="file">
+            <ul class="files">
-              <span class="name">{{ form.file }}</span>
+              <li v-for="(file, i) in files" :key="i">
-              <span class="download" @click="download">下载</span>
+                <span class="name">{{ file.fileName }}</span>
-            </div>
+                <span class="download" @click="download(file)">下载</span>
+              </li>
+            </ul>
           </div>
         </div>
         <div class="right">
@@ -66,7 +68,8 @@ export default {
         value: 'id',
         label: 'columnName'
       },
-      news: []
+      news: [],
+      files: []
     }
   },
   components: {
@@ -81,6 +84,7 @@ export default {
   mounted() {
     this.getColumn()
     this.getArticle()
+    this.getFile()
   },
   methods: {
     // 获取文章详情
@@ -105,10 +109,16 @@ export default {
         }
       }
     },
+    // 获取附件
+    getFile() {
+      this.$post(`${this.api.theAttachmentUnderTheQueryColumn}?contentId=${this.id}`).then(({ data }) => {
+        this.files = data
+      }).catch(err => {})
+    },
     // 资讯
     getColumn() {
       this.$post(this.api.listWithTree, {
-        siteId: 1,
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
         columnName: '',
         templateId: '',
         typeId	: '',
@@ -123,14 +133,14 @@ export default {
       this.$post(this.api.newlyPublishedArticles, {
         pageNum: 1,
         pageSize: 5,
-        siteId: 1
+        siteId: this.$route.query.siteId || this.$store.state.content.site
       }).then(({ data }) => {
         this.news = data.records
       }).catch(res => {})
     },
     // 下载附件
-    download() {
+    download(e) {
-      Util.downloadFile('附件', this.form.file)
+      Util.downloadFile(e.fileName, e.filePath)
     }
   }
 };
@@ -149,7 +159,7 @@ export default {
   display: flex;
   justify-content: space-between;
   .left {
-    width: 1090px;
+    width: 920px;
   }
   h2 {
     font-size: 36px;
@@ -178,9 +188,10 @@ export default {
       color: #333;
       border-left: 2px solid #1583FF;
     }
-    .file {
+    li {
       display: flex;
       align-items: center;
+      margin-bottom: 10px;
     }
     .name {
       margin-right: 8px;

src/pages/careers/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.length > 1) ? 'hover' : 'never'">
+    <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">
           <div class="banner-item" @click="openLink(item)">

src/pages/column/index.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="wrap">
     <div class="banner">
-      IASF的最新新闻、公告、活动
+      <img width="100%" height="280" :src="info.columnBanner" alt="">
+      <p class="text">{{ info.columnName }}</p>
     </div>
     <div class="column-wrap">
       <div class="article">
         <div class="left">
           <div class="forms">
             <div class="item">
-              <span class="label">文章类型：</span>
+              <span class="label">所属分类：</span>
               <el-select v-model="form.typeId">
                 <el-option
-                  v-for="item in labels"
+                  v-for="item in classifications"
                   :key="item.id"
-                  :label="item.name"
+                  :label="item.classificationName"
                   :value="item.id">
                 </el-option>
               </el-select>
@@ -96,12 +97,18 @@ export default {
   data() {
     return {
       id: this.$route.query.id,
+      site: this.$store.state.content.site,
       columnId: '',
+      info: {
+        columnName: '',
+        columnBanner: ''
+      },
       searchTimer: null,
       form: {
         title: ''
       },
-      labels: {},
+      classifications: [],
+      labels: [],
       columns: [],
       curColumn: 0,
       page: 1,
@@ -128,33 +135,42 @@ export default {
       }
   },
   mounted() {
+    this.getInfo()
     this.getColumn()
     this.getNews()
+    this.getArticle([this.id])
+    this.getClassification()
+    this.getLabel()
   },
   methods: {
-    // 获取banner 规则：当前文章有上传的，用上传的，没有上传的栏目有图片，读取上级栏目的（上级没有读上上级，以此类推）都没有的读取默认的
+    // 获取栏目详情
-    getBanner(data) {
+    getInfo() {
-      this.columnBanner = ''
+      this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
-      for (const e of data) {
+        this.info = data
-        if (e.columnBanner) this.columnBanner = e.columnBanner
+      }).catch(res => {})
-        if (e.id == this.columnId) {
+    },
-          break
+    // 获取所属分类
-        } else {
+    getClassification() {
-          this.getBanner(e.children)
+      this.$post(`${this.api.queryClassif}?siteId=${this.$route.query.siteId || this.site}`).then(({ data }) => {
-        }
+        this.classifications = data
-      }
+      }).catch(err => {})
+    },
+    // 获取标签
+    getLabel() {
+      this.$post(`${this.api.queryLabel}?siteId=${this.$route.query.siteId || this.site}`).then(({ data }) => {
+        this.labels = data
+      }).catch(err => {})
     },
     // 资讯
     getColumn() {
       this.$post(this.api.listWithTree, {
-        siteId: 1,
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
         columnName: '',
         templateId: '',
         typeId	: '',
         isSort: 0
       }).then(({ data }) => {
         this.columns = data
-        this.initData()
       }).catch(err => {})
     },
     // 最新资讯
@@ -162,7 +178,7 @@ export default {
       this.$post(this.api.newlyPublishedArticles, {
         pageNum: 1,
         pageSize: 5,
-        siteId: 1
+        siteId: this.$route.query.siteId || this.$store.state.content.site
       }).then(({ data }) => {
         this.news = data.records
       }).catch(res => {})
@@ -173,10 +189,10 @@ export default {
       this.initData()
     },
     // 查询文章列表
-    getArticle() {
+    getArticle(columnIds) {
       this.$post(this.api.queryArticle, {
-        siteId: 1,
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
-        columnIds: [this.columns[this.curColumn].id],
+        columnIds,
         pageNum: this.page,
         pageSize: this.pageSize,
         ...this.form
@@ -187,7 +203,7 @@ export default {
     },
     initData() {
       this.page = 1
-      this.getArticle()
+      this.getArticle([this.columns[this.curColumn].id])
     },
     currentChange(val) {
       this.page = val
@@ -199,11 +215,15 @@ export default {
 
 <style lang="scss" scoped>
 .banner {
+  position: relative;
   height: 280px;
-  padding: 123px 0 0 243px;
   font-size: 48px;
   color: #fff;
-  background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
+  .text {
+    position: absolute;
+    top: 123px;
+    left: 243px;
+  }
 }
 .column-wrap {
   padding: 40px 0;

src/pages/edu/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.length > 1) ? 'hover' : 'never'">
+    <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">
           <div class="banner-item" @click="openLink(item)">

src/pages/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="959px" :interval="6000" :arrow="(modules[0] && modules[0].list.length > 1) ? 'hover' : 'never'">
+    <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'">
       <template v-for="(item, i) in modules[0].list">
         <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
           <img class="cursor-pointer" width="100%" height="959" :src="item.pic" alt="" @click="openLink(item)">
@@ -120,7 +120,7 @@ export default {
   mixins: [mixins],
   data() {
     return {
-      
+      articles: []
     }
   },
   mounted() {

src/pages/news/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.length > 1) ? 'hover' : 'never'">
+    <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">
           <div class="banner-item" @click="openLink(item)">

src/pages/newsPress/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.length > 1) ? 'hover' : 'never'">
+    <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">
           <div class="banner-item" @click="openLink(item)">

src/pages/newsProcurement/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.length > 1) ? 'hover' : 'never'">
+    <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">
           <div class="banner-item" @click="openLink(item)">

src/pages/research/index.vue

@@ -1,196 +1,71 @@
 <template>
   <div class="wrap">
-    <img width="100%" height="480" src="@/assets/images/research/1.png" alt="">
+    <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">
-    <div class="block history gray">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-      <div class="inner">
+          <div class="banner-item" @click="openLink(item)">
-        <h2 style="margin-left: 57px">Why IASF?</h2>
+            <img :src="item.pic" alt="">
-        <div class="texts">
+            <p class="banner-name">RESEARCH</p>
-          <div class="left">
-            <h2>IASF started its journey to chase light, 
-The one that can drive innovation, 
-push the boundaries forward, and discover the unknown.</h2>
-            <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao IASF</div>
-            <img src="@/assets/images/arrow.png" alt="">
           </div>
-          <img class="bg" width="562" height="506" src="@/assets/images/research/2.png" alt="">
+        </el-carousel-item>
-        </div>
+      </template>
-      </div>
+    </el-carousel>
-    </div>
 
     <div class="block">
-      <h2 class="b-title">Research Areas </h2>
+      <h2 class="b-title">{{ modules[1].form.title }}</h2>
-      <p class="intro">What we can do and beyound</p>
+      <p class="intro">{{ modules[1].form.des }}</p>
       <ul class="area">
-        <li>
+        <li v-for="(item, i) in modules[2].list" :key="i">
-          <div class="texts">
+          <img :src="item.pic" alt="" class="pic">
-            <img src="@/assets/images/research/res1-1.png" alt="">
-            <h6>Physics</h6>
-            <p class="des">Research Field Description</p>
-          </div>
-        </li>
-        <li>
-          <div class="texts">
-            <img src="@/assets/images/research/res2-1.png" alt="">
-            <h6>Chemistry</h6>
-            <p class="des">Research Field Description</p>
-          </div>
-        </li>
-        <li>
-          <div class="texts">
-            <img src="@/assets/images/research/res3-1.png" alt="">
-            <h6>Biology</h6>
-            <p class="des">Research Field Description</p>
-          </div>
-        </li>
-        <li>
-          <div class="texts">
-            <img src="@/assets/images/research/res4-1.png" alt="">
-            <h6>Advanced Materials</h6>
-            <p class="des">Research Field Description</p>
-          </div>
-        </li>
-        <li>
           <div class="texts">
-            <img src="@/assets/images/research/res5-1.png" alt="">
+            <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
-            <h6>Advanced Manufacturing</h6>
+            <h6>{{ item.title }}</h6>
-            <p class="des">Research Field Description</p>
+            <p class="des">{{ item.des }}</p>
           </div>
         </li>
       </ul>
     </div>
 
     <div class="block gray">
-      <div class="inner" style="width: 1558px">
-        <h2 class="b-title">Applications</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
-        <ul class="app">
-          <li v-for="(item, i) in apps" :key="i">
-            <img class="bg" :src="require('@/assets/images/research/app' + (i + 1) + '.png')" alt="">
-            <img class="icon" :src="require('@/assets/images/research/app' + (i + 1) + '-1.png')" alt="">
-            <p class="text">{{ item }}</p>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="block">
       <div class="inner">
-        <h2 class="b-title">R&D Group</h2>
+        <h2 class="b-title">{{ modules[3].form.title }}</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <p class="intro">{{ modules[3].form.des }}</p>
         <ul class="group">
-          <li>
+          <li v-for="(item, i) in modules[4].list" :key="i">
-            <img src="@/assets/images/research/3.png" alt="">
+            <img :src="item.pic" alt="">
-            <p class="text">Accelerator</p>
+            <p class="text">{{ item.title }}</p>
-          </li>
-          <li>
-            <img src="@/assets/images/research/4.png" alt="">
-            <p class="text">Physics</p>
-          </li>
-          <li>
-            <img src="@/assets/images/research/5.png" alt="">
-            <p class="text">Mechanical Engineering</p>
-          </li>
-          <li>
-            <img src="@/assets/images/research/6.png" alt="">
-            <p class="text">Digital Light-source</p>
-          </li>
-          <li>
-            <img src="@/assets/images/research/7.png" alt="">
-            <p class="text">Beam Lines</p>
-          </li>
-          <li>
-            <img src="@/assets/images/research/8.png" alt="">
-            <p class="text">End Stations</p>
           </li>
         </ul>
       </div>
     </div>
     
-    <div class="block gray">
+    <div class="block">
       <div class="inner" style="width: 1558px">
-        <h2 class="b-title">Research & Industry News</h2>
+        <h2 class="b-title">{{ modules[5].form.title }}</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <p class="intro">{{ modules[5].form.des }}</p>
         <ul class="news">
-          <li>
+          <li v-for="(item, i) in modules[6].list" :key="i">
-            <img src="@/assets/images/research/3.png" alt="">
+            <img :src="item.pic" alt="">
-            <div class="texts">
-              <h6>2022 New Year Message from President Sun Dongbai</h6>
-              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
-              <span class="meta">2022.08.12</span>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/research/3.png" alt="">
-            <div class="texts">
-              <h6>2022 New Year Message from President Sun Dongbai</h6>
-              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
-              <span class="meta">2022.08.12</span>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/research/3.png" alt="">
             <div class="texts">
-              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <h6>{{ item.title }}</h6>
-              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
+              <div class="des">{{ item.des }}</div>
-              <span class="meta">2022.08.12</span>
             </div>
           </li>
         </ul>
       </div>
     </div>
-    
-    <div class="block">
-      <div class="inner">
-        <h2 class="b-title">Publications</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
-        <div class="pub">
-          <div class="column">
-            <div class="item" style="height: 342px">
-              <div class="text">Online single-shot characterization of ultrafast pulses from high-gain free-electron lasers, Li Zeng</div>
-            </div>
-            <div class="item" style="height: 685px">
-              <div class="text">软X射线自由电子激光单色器优化方法，胡凯，杨川，真空电子技术. 2022, 356(01)</div>
-            </div>
-          </div>
-          <div class="column">
-            <div class="item" style="height: 507px">
-              <div class="text">High-repetition-rate seeded free-electron laser with direct-amplification of an external coherent laser</div>
-            </div>
-            <div class="item" style="height: 519px">
-              <div class="text">产生超快水窗波段X射线的ESASE方案模拟，强激光与粒子束, 2022, 34(3):031019</div>
-            </div>
-          </div>
-          <div class="column">
-            <div class="item" style="height: 705px">
-              <div class="text">多层膜元件热应力分析方法、系统和终端设备申请(专利)号：CN202111530134.0</div>
-            </div>
-            <div class="item" style="height: 323px">
-              <div class="text">Online single-shot characterization of ultrafast pulses from high-gain free-electron lasers, Li Zeng</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
+
-      columnId: '',
-      form: {},
-      apps: ['Astronomical Science', ' Extreme Ultraviolet', ' Quantum Materials', 'Energy Catalytic', 'Biomedicine  ', 'New Energy', 'Cancer Treatment', 'Atomic Science', 'Radioactive Waste Materials ', 'High-sensitivity Detection']
-    }
-  },
-  watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      // this.getInfo()
     }
   },
   mounted() {
@@ -199,9 +74,16 @@ export default {
   methods: {
     // 获取文章详情
     getInfo() {
-      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+      // 预览/详情
-        this.form = data
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-        this.columnId = data.columnId
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
       }).catch(err => {})
     },
   }
@@ -210,32 +92,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "../../styles/page/page.scss";
-.history {
-  h2 {
-    font-size: 30px;
-    color: #333;
-  }
-  .texts {
-    display: flex;
-    justify-content: space-between;
-    padding: 82px 57px 30px;
-    margin-top: 20px;
-    background-color: #fff;
-    border-radius: 100px 0px 0px 0px;
-  }
-  .left {
-    width: 695px;
-  }
-  .des {
-    margin: 20px 0;
-    font-size: 22px;
-    color: #181818;
-    line-height: 31px;
-  }
-  .bg {
-    margin: -122px 0 0 0;
-  }
-}
 .area {
   display: flex;
   li {
@@ -247,35 +103,33 @@ export default {
     &:nth-child(2) {
       width: 21%;
       margin-top: 70px;
-      background-image: url(../../assets/images/research/res2.png);
       .texts {
         background: #2B1B1C;
       }
     }
     &:nth-child(3) {
-      background-image: url(../../assets/images/research/res3.png);
       .texts {
         background: #009C91;
       }
     }
     &:nth-child(4) {
       margin-top: 70px;
-      background-image: url(../../assets/images/research/res4.png);
       .texts {
         background: #005388;
       }
     }
     &:nth-child(5) {
       width: 22%;
-      background-image: url(../../assets/images/research/res5.png);
       .texts {
         background: #9A4E10;
       }
     }
   }
+  .pic {
+    width: 100%;
+    height: 443px;
+  }
   .texts {
-    position: absolute;
-    bottom: 0;
     width: 100%;
     height: 210px;
     padding: 20px 40px;
@@ -290,60 +144,25 @@ export default {
     color: rgba(255,255,255,0.55);
   }
 }
-.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;
-    &:first-child {
-      width: 750px;
-    }
-    &:nth-child(3), &:nth-child(7), &:nth-child(10) {
-      margin-right: 0;
-    }
-    &:nth-child(9) {
-      width: 563px;
-    }
-    &:nth-child(10) {
-      width: 555px;
-    }
-  }
-  .bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .icon {
-    position: relative;
-  }
-  .text {
-    position: relative;
-    margin-top: 20px;
-    font-size: 32px;
-    color: #fff;
-  }
-}
 .group {
   display: flex;
   flex-wrap: wrap;
   li {
+    position: relative;
     width: 448px;
     margin: 0 28px 39px 0;
     &:nth-child(3n) {
       margin-right: 0;
     }
   }
+  img {
+    width: 100%;
+    height: 353px;
+  }
   .text {
     font-size: 30px;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
     line-height: 143px;
     color: #272727;
     text-align: center;
@@ -352,61 +171,40 @@ export default {
 }
 .news {
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
   li {
-    display: flex;
+    position: relative;
-    align-items: center;
+    width: 448px;
-    width: 686px;
+    padding: 11px;
-    padding: 34px;
+    margin-right: 28px;
-    margin: 0 28px 28px 0;
+    color: #333;
     background-color: #fff;
-    &:nth-child(2n) {
+    box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
+    border-radius: 10px;
+    &:nth-child(3n) {
       margin-right: 0;
     }
+    &:hover {
+      color: #fff;
+      background-color: #0252D9;
+    }
   }
   img {
-    width: 237px;
+    width: 427px;
-    height: 167px;
+    height: 481px;
-    margin-right: 34px;
+  }
+  .texts {
+    padding: 0 18px 50px;
   }
   h6 {
-    font-size: 18px;
+    margin: 35px 0 12px;
-    color: #0648A8;
+    font-size: 24px;
+    line-height: 33px;
   }
   .des {
-    margin: 10px 0;
+    font-size: 18px;
-    font-size: 16px;
+    line-height: 26px;
-    color: #333;
-    line-height: 22px;
-  }
-  .meta {
-    font-size: 16px;
-    color: #999;
-  }
-}
-.pub {
-  display: flex;
-  .column {
-    width: 451px;
-    margin-right: 23px;
-  }
-  .item {
-    position: relative;
-    margin-bottom: 22px;
-    background: url(../../assets/images/research/3.png) 0 0/100% 100% no-repeat;
-  }
-  .text {
-    position: absolute;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 160px;
-    padding: 0 24px;
-    font-size: 19px;
-    color: #fff;
-    background-color: #193F5C;
   }
 }
 </style>

src/router/modules/application.js

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

src/store/modules/content.js

@@ -0,0 +1,24 @@
+/**
+ * 内容管理
+ * */
+
+ import Router from '@/router'
+ export default {
+  namespaced: true,
+  state: {
+    site: 1,
+  },
+  getters: {
+    site: state => {
+      return Router.app.query.site || state.site
+    }
+  },
+  mutations: {
+    setSite: (state, site) => {
+      state.site = +site
+    },
+  },
+  actions: {
+    
+  }
+};

src/store/modules/user.js

@@ -1,107 +0,0 @@
-import Setting from "@/setting";
-import util from "@/libs/util";
-import { post, get, del, put } from "@/plugins/requests/index.js";
-import api from "@/api";
-/**
- * 用户信息
- * */
-export default {
-    namespaced: true,
-    state: {
-        activeTab: "/station/list", // 当前激活菜单
-        title: '',
-        logoUrl: '',
-        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
-        userId: '',
-        studentId: '',
-        userName: '',
-        customerName: '',
-        schoolId: '',
-        roleId: '',
-        dataTime: '',
-        logView: false // 是否查询过日志状态，如果有，则不再调接口
-    },
-    mutations: {
-        SET_INFO: (state, info) => {
-            if (info.avatar) state.avatar = info.avatar;
-            state.userId = info.userId;
-            state.studentId = info.studentId;
-            state.schoolId = info.schoolId;
-            state.userName = info.userName;
-            state.roleId = info.roleId;
-            state.dataTime = info.dataTime;
-        },
-        SET_TITLE: (state, title) => {
-            state.title = title;
-        },
-        SET_LOGO_URL: (state, logoUrl) => {
-            state.logoUrl = logoUrl;
-        },
-        SET_AVATAR: (state, avatar) => {
-            state.avatar = avatar;
-        },
-        SET_USERNAME: (state, userName) => {
-            state.userName = userName;
-        },
-        SET_CUSTOMERNAME: (state, customerName) => {
-            state.customerName = customerName;
-        },
-        SET_ACTIVE_TAB: (state, activeTab) => {
-            state.activeTab = activeTab;
-        },
-        SET_LOG: (state) => {
-            state.logView = true
-        },
-    },
-    actions: {
-        login({ state, commit }, userInfo) {
-            return new Promise((resolve, reject) => {
-                post(api.logins, userInfo).then(res => {
-                    if (res.status == 200) {
-                        let { data } = res;
-                        // 生成路由权限
-                        // 每个系统都是用这套角色权限代码的,后端也是基本一样,除了个别字段可能会不一样
-                        // 总体来说就两个步骤: 1是生成能够访问的路由的数组集合,2是生成能看到的按钮的数组集合
-                        //res.message.listValue && Setting.dynamicRoute && addRoutes(res.message.listValue)
-                        util.local.set(Setting.tokenKey, data.token, Setting.tokenExpires);
-                        util.successMsg("登录成功");
-                        // console.log(data, "登录保存的数据");
-                        commit("SET_INFO", data);
-                        resolve();
-                    } else {
-                        util.errorMsg(res.message);
-                        reject(res);
-                    }
-                }).catch(error => {
-                    reject(error);
-                });
-            });
-        },
-        logout({ commit, state, dispatch }) {
-            return new Promise((resolve, reject) => {
-                util.local.remove(Setting.storeKey);
-                util.local.remove(Setting.tokenKey);
-                location.reload();
-                resolve();
-            });
-        },
-        setInfo({ state, commit }, info) {
-            commit("SET_INFO", info);
-        },
-        setTitle({ state, commit }, title) {
-            commit("SET_TITLE", title);
-        },
-        setLogoUrl({ state, commit }, logoUrl) {
-            commit("SET_LOGO_URL", logoUrl);
-        },
-        setAvatar({ state, commit }, avatar) {
-            commit("SET_AVATAR", avatar);
-        },
-        setUserName({ state, commit }, userName) {
-            commit("SET_USERNAME", userName);
-        },
-        setActiveTab({ state, commit }, activeTab) {
-            commit("SET_ACTIVE_TAB", activeTab);
-        }
-    }
-};

src/styles/page/page.scss

@@ -8,7 +8,6 @@
     line-height: 59px;
     text-align: center;
     color: #1F1F1F;
-    @include ellipsis;
     &:after {
       content: '';
       position: absolute;