页面设置：about

src/components/modules/content.vue

@@ -39,12 +39,13 @@
         <el-button type="primary" @click="contentSubmit">确定</el-button>
       </span>
     </el-dialog>
-    <Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
+    <Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
   </div>
 </template>
 
 <script>
 import Link from '@/components/modules/link'
+import Util from '@/libs/util'
 export default {
   props: ['data', 'visible'],
   components: {
@@ -104,26 +105,23 @@ export default {
     },
     // 链接设置提交
     linkSubmit() {
-      // return console.log(3, this.$refs.link.data)
       const el = this.$refs.link
-      const { data, links, article, otherLink, otherArticle } = el
+      const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link
-      let linkEle = null
+      const linkEle = data.connectionType === 1 ?
+        el.$refs.column :
+        data.connectionType === 3 ?
+          el.$refs.otherColumn :
+          null
       if (data.connectionType !== 2) {
         if (data.connectionType === 1) {
-          linkEle = el.$refs.links
+          if (!data.columnId.length) return Util.errorMsg('请选择站内链接')
-          if (!links.length) return util.errorMsg('请选择站内链接')
-          data.linkAddress = links.join()
-          if (article) data.linkAddress += '-' + article
         }
         if (data.connectionType === 3) {
-          linkEle = el.$refs.otherLink
+          if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目')
-          if (!otherLink.length) return util.errorMsg('请选择栏目')
-          data.linkAddress = otherLink.join()
-          if (otherArticle) data.linkAddress += '-' + otherArticle
         }
       }
-      data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
+      data.linkName = linkEle ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
-      this.data.list[this.curIndex].link = data
+      console.log("🚀 ~ file: module.vue ~ line 296 ~ linkSubmit ~ data", this.data)
       this.linkVisible = false
     },
     // 模块设置提交

src/components/modules/link.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 设置链接 -->
   <div>
-    <el-dialog title="设置链接地址" :visible.sync="diaVisible" width="500px" :close-on-click-modal="false">
+    <el-dialog title="设置链接地址" :visible.sync="visible" width="500px" :close-on-click-modal="false">
       <el-form :model="data" class="model" label-width="120px">
         <el-form-item prop="connectionType" label="连接类型">
           <el-radio-group v-model="data.connectionType">
@@ -14,15 +14,15 @@
         <template v-if="data.connectionType === 1">
           <el-form-item label="站内链接">
             <el-cascader
-              ref="links"
+              ref="column"
-              v-model="links"
+              v-model="data.columnId"
               :options="columns"
               :props="columnProps"
               clearable
-              @change="getArticle"></el-cascader>
+              @change="columnChange"></el-cascader>
           </el-form-item>
           <el-form-item label="文章">
-            <el-select v-model="article">
+            <el-select v-model="data.articleId">
               <el-option
                 v-for="item in articles"
                 :key="item.id"
@@ -52,15 +52,15 @@
           </el-form-item>
           <el-form-item label="栏目">
             <el-cascader
-              ref="otherLink"
+              ref="otherColumn"
-              v-model="otherLink"
+              v-model="data.otherColumnId"
               :options="columns"
               :props="columnProps"
               clearable
-              @change="getArticle"></el-cascader>
+              @change="columnChange"></el-cascader>
           </el-form-item>
           <el-form-item label="文章">
-            <el-select v-model="otherArticle">
+            <el-select v-model="data.otherArticleId">
               <el-option
                 v-for="item in articles"
                 :key="item.id"
@@ -79,7 +79,7 @@
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="$emit('update:diaVisible', false)">取消</el-button>
+        <el-button @click="$emit('update:visible', false)">取消</el-button>
         <el-button type="primary" @click="linkSubmit">确定</el-button>
       </span>
     </el-dialog>
@@ -92,7 +92,7 @@ export default {
     data: {
       required: true
     },
-    diaVisible: {
+    visible: {
       type: Boolean,
       required: true
     }
@@ -108,12 +108,16 @@ export default {
         value: 'id',
         label: 'columnName'
       },
-      links: [],
-      article: '',
-      otherLink: [],
-      otherArticle: '',
     };
   },
+  watch: {
+    visible(open) {
+      // 每次打开的时候处理参数
+      if (open) {
+        this.data.connectionType !== 2 && this.getArticle()
+      }
+    }
+  },
   mounted() {
     this.getList()
     this.getSite()
@@ -135,6 +139,7 @@ export default {
         } else {
           this.loaded = true
         }
+        this.data.connectionType !== 2 && this.getArticle()
       }).catch(err => {})
     },
     // 给当前栏目加上disabled禁止选中
@@ -144,10 +149,15 @@ export default {
         e.children.length ? this.handleId(e.children) : delete e.children
       })
     },
+    // 栏目选择回调
+    columnChange() {
+      this.data.articleId = ''
+      this.getArticle()
+    },
     // 文章列表
     getArticle() {
       // 站内链接/其他站点链接
-      const id = this.data.connectionType === 1 ? this.links[this.links.length - 1] : this.otherLink[this.otherLink.length - 1]
+      const id = this.data.connectionType === 1 ? this.data.columnId[this.data.columnId.length - 1] : this.data.otherColumnId[this.data.otherColumnId.length - 1]
       this.$post(this.api.queryArticle, {
         siteId: this.site.id,
         columnIds: [id],

src/components/modules/module.vue

@@ -127,7 +127,7 @@
         <el-button type="primary" @click="moduleSubmit">确定</el-button>
       </span>
     </el-dialog>
-    <Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
+    <Link ref="link" :data.sync="linkForm" :visible.sync="linkVisible" @linkSubmit="linkSubmit" />
     <Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" />
   </div>
 </template>
@@ -135,13 +135,16 @@
 <script>
 import Link from '@/components/modules/link'
 import Content from '@/components/modules/content'
+import Editor from '@tinymce/tinymce-vue'
+import Util from '@/libs/util'
 import editorConfig from '@/components/editor'
 export default {
   name: 'module',
   props: ['data', 'visible'],
   components: {
     Link,
-    Content
+    Content,
+    Editor
   },
   data() {
     return {
@@ -253,9 +256,9 @@ export default {
     },
     // 展示链接设置
     toLink(row, i = 0) {
-      this.linkVisible = true
       this.curIndex = i
       this.linkForm = row.link
+      this.linkVisible = true
     },
     // 编辑内容
     editIntro(row, i = 0) {
@@ -272,30 +275,26 @@ export default {
       }
       this.data.form = JSON.parse(JSON.stringify(this.data.originForm))
       console.log("🚀 ~ file: module.vue ~ line 267 ~ contentSubmit ~ list", this.data)
-
     },
     // 链接设置提交
     linkSubmit() {
-      // return console.log(3, this.$refs.link.data)
       const el = this.$refs.link
-      const { data, links, article, otherLink, otherArticle } = el
+      const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link
-      let linkEle = null
+      const linkEle = data.connectionType === 1 ?
+        el.$refs.column :
+        data.connectionType === 3 ?
+          el.$refs.otherColumn :
+          null
       if (data.connectionType !== 2) {
         if (data.connectionType === 1) {
-          linkEle = el.$refs.links
+          if (!data.columnId.length) return Util.errorMsg('请选择站内链接')
-          if (!links.length) return util.errorMsg('请选择站内链接')
-          data.linkAddress = links.join()
-          if (article) data.linkAddress += '-' + article
         }
         if (data.connectionType === 3) {
-          linkEle = el.$refs.otherLink
+          if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目')
-          if (!otherLink.length) return util.errorMsg('请选择栏目')
-          data.linkAddress = otherLink.join()
-          if (otherArticle) data.linkAddress += '-' + otherArticle
         }
       }
-      data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
+      data.linkName = linkEle ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
-      this.data.list[this.curIndex].link = data
+      console.log("🚀 ~ file: module.vue ~ line 296 ~ linkSubmit ~ data", this.data)
       this.linkVisible = false
     },
     // 模块设置提交

src/const/column.js

@@ -63,4 +63,22 @@ export default {
       name: '链接'
     }
   ],
+  // 长页样式
+  pageStyle: [
+    {
+      id: 1,
+      path: 'home',
+      name: 'HOME'
+    },
+    {
+      id: 2,
+      path: 'about',
+      name: 'ABOUT'
+    },
+    {
+      id: 3,
+      path: 'careers',
+      name: 'CAREERS'
+    }
+  ],
 }

src/mixins/app.js

@@ -3,9 +3,6 @@
  * */
 export default {
   methods: {
-        // 当 $route 更新时触发
-        appRouteChange(to, from) {
     
   }
-    }
 };

src/mixins/page/index.js

@@ -0,0 +1,92 @@
+import Module from '@/components/modules/module'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  data() {
+    return {
+      userId: +this.$store.state.user.userId,
+      site: this.$store.state.content.site,
+      id: '',
+      columnId: +this.$route.query.id,
+      diaVisible: false,
+      curModule: 0,
+      curData: {},
+    }
+  },
+  components: {
+    Module,
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    // 获取详情
+    getInfo() {
+      this.modules.map(e => {
+        const { type } = e
+        // 克隆一个原始row，方便添加
+        if (type === 'banner' || type === 'introduce') {
+          const data = JSON.parse(JSON.stringify(e.list[0]))
+          data.pic = ''
+          e.originForm = data
+        }
+      })
+
+      // 查询页面详情
+      this.$post(`${this.api.findPage}?columnId=${this.columnId}`).then(({ data }) => {
+        if (data.length) {
+          const json = data[0]
+          this.id = json.id
+          this.modules = JSON.parse(json[json.state ? 'theEditedJson' : 'jsonBeforeEditing'])
+        }
+      }).catch(err => {})
+    },
+    // 展开模块设置
+    toSet(i) {
+      this.curModule = i
+      this.curData = JSON.parse(JSON.stringify(this.modules[i]))
+      this.diaVisible = true
+    },
+    // 模块设置提交
+    moduleSubmit() {
+      this.diaVisible = false
+      this.modules[this.curModule] = this.curData
+      console.log("🚀 ~ file: index.vue ~ line 520 ~ moduleSubmit ~ this.modules[this.curModule]", this.modules[this.curModule])
+    },
+    // 处理预览和保存的json
+    handleJson() {
+      // const list = JSON.parse(JSON.stringify(this.modules))
+      // list.map(e => {
+      //   if (e.type === 'form') delete e.forms
+      // })
+      return JSON.stringify(this.modules)
+    },
+    // 预览
+    preview() {
+      this.$post(this.api.saveRedisPage, {
+        columnId: this.columnId,
+        json: this.handleJson()
+      }).then(({ data }) => {
+        
+      }).catch(err => {})
+    },
+    // 保存
+    save(state) {
+      const json = this.handleJson()
+      const data = {
+        id: this.id,
+        columnId: this.columnId,
+        state,
+        sort: 1,
+        founderId: this.userId,
+        editorId: this.userId,
+        jsonBeforeEditing: json
+      }
+      if (state) data.theEditedJson = json
+      this.$post(this.api[this.id ? 'updatePage' : 'savePage'], data).then(res => {
+        Util.successMsg((state ? '发布' : '保存') +  '成功')
+        this.$router.back()
+      }).catch(err => {})
+    }
+  }
+};

src/mixins/setBackground/index.js

@@ -1,8 +0,0 @@
-export default {
-    beforeCreate() {
-        document.querySelector("body").setAttribute("style", "background-color:#fff");
-    },
-    beforeDestroy() {
-        document.body.removeAttribute("style");
-    }
-};

src/pages/column/add/index.vue

@@ -186,32 +186,18 @@
         <el-form-item prop="templateId" label="栏目模板">
           <el-select v-model="form.templateId">
             <el-option
-                v-for="item in templates"
+              label="长页模板"
-                :key="item.id"
+              :value="1">
-                :label="item.name"
-                :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="listStyleId" label="列表样式">
           <ul class="styles">
-            <li>
+            <li v-for="(item, i) in pageStyle" :key="i">
-              <div class="review">
-                <img src="@/assets/images/list1.png" alt="">
-              </div>
-              <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
-            </li>
-            <li>
-              <div class="review">
-                <img src="@/assets/images/list2.png" alt="">
-              </div>
-              <el-radio v-model="form.listStyleId" :label="2">新闻列表</el-radio>
-            </li>
-            <li>
               <div class="review">
-                <img src="@/assets/images/list2.png" alt="">
+                <img :src="require('@/assets/images/page/' + item.path + '.png')" alt="">
               </div>
-              <el-radio v-model="form.listStyleId" :label="3">出版物列表</el-radio>
+              <el-radio v-model="form.listStyleId" :label="item.id">{{ item.name }}</el-radio>
             </li>
           </ul>
         </el-form-item>
@@ -256,6 +242,7 @@ export default {
           detailStyle: ColumnConst.detailStyle,
           types: ColumnConst.types,
           templates: ColumnConst.templates,
+          pageStyle: ColumnConst.pageStyle,
           sites: [],
           columns: [],
           articles: [],
@@ -579,7 +566,7 @@ export default {
           }
         }
         // 更新附件的状态为发布
-        this.$post(this.api.updateFile, {
+        this.fileId && this.$post(this.api.updateFile, {
           id: this.fileId,
           isRelease: 1,
           quote: this.form.columnName
@@ -693,6 +680,9 @@ $upload-lg-height: 102px;
     margin-bottom: 10px;
     border: 1px solid #DCDEE0;
     border-radius: 2px;
+    img {
+      width: 50px;
+    }
   }
 }
 /deep/.input-form .auto .el-input {

src/pages/column/list/index.vue

@@ -275,11 +275,13 @@ export default {
       },
       // 预览
       preview(row) {
-        window.open(`http://192.168.31.${Setting.isDev ? 126 : 136}:8095/#/channel?id=` + row.id)
+        const item = ColumnConst.pageStyle.find(e => e.id == row.listStyleId)
+        window.open(`http://192.168.31.${Setting.isDev ? 126 : 136}:8095/#/${item ? item.path : 'home'}?id=${row.id}`)
       },
       // 页面管理
       page(row) {
-        this.$router.push(`page?id=${row.id}`)
+        const item = ColumnConst.pageStyle.find(e => e.id == row.listStyleId)
+        this.$router.push(`${item ? item.path : 'home'}?id=${row.id}`)
       },
       // 批量删除
       batchDel() {

src/pages/column/page/home.vue

@@ -31,7 +31,7 @@
             <div class="texts">
               <h6>{{ modules[2].form.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
               <p class="des">{{ modules[2].form.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
-              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
             </div>
             <div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div>
           </li>
@@ -40,7 +40,7 @@
             <div class="texts">
               <h6>{{ modules[3].form.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
               <p class="des">{{ modules[3].form.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
-              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
             </div>
             <div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div>
           </li>
@@ -122,7 +122,7 @@
             <div class="texts">
               <h6>{{ item.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
               <p class="des">{{ item.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
-              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
             </div>
           </li>
           <div class="cover" @click="toSet(7)">点击更改图片、标题概述与链接</div>
@@ -186,16 +186,11 @@
 </template>
 
 <script>
-import Setting from '@/setting'
+import mixins from '@/mixins/page'
-import Util from '@/libs/util'
-import Module from '@/components/modules/module'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      userId: +this.$store.state.user.userId,
-      site: this.$store.state.content.site,
-      id: '',
-      columnId: +this.$route.query.id,
       modules: [
         {
           type: 'banner',
@@ -205,7 +200,12 @@ export default {
               link: {
                 linkName: '无',
                 connectionType: 1,
+                columnId: [],
+                articleId: '',
                 linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
                 isOpen: 1
               },
               isEnable: 1
@@ -264,7 +264,13 @@ export default {
             link: {
               linkName: '无',
               connectionType: 1,
+              columnId: [],
+              articleId: '',
               linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
             },
             des: ''
           }
@@ -301,7 +307,13 @@ export default {
             link: {
               linkName: '无',
               connectionType: 1,
+              columnId: [],
+              articleId: '',
               linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
             },
             des: ''
           }
@@ -394,7 +406,13 @@ export default {
             link: {
               linkName: '无',
               connectionType: 1,
+              columnId: [],
+              articleId: '',
               linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
             },
             des: ''
           },
@@ -406,7 +424,12 @@ export default {
               link: {
                 linkName: '无',
                 connectionType: 1,
+                columnId: [],
+                articleId: '',
                 linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
                 isOpen: 1
               },
               isEnable: 1
@@ -439,7 +462,13 @@ export default {
             link: {
               linkName: '无',
               connectionType: 1,
+              columnId: [],
+              articleId: '',
               linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
             },
             des: ''
           }
@@ -585,124 +614,20 @@ export default {
           }
         },
       ],
-      diaVisible: false,
-      curModule: 0,
-      curData: {},
-      edited: false
     }
   },
-  components: {
-    Module,
-  },
   mounted() {
-    this.getInfo()
+    
   },
   methods: {
-    // 获取详情
-    getInfo() {
-      this.modules.map(e => {
-        const { type } = e
-        // 克隆一个原始row，方便添加
-        if (type === 'banner' || type === 'introduce') {
-          const data = JSON.parse(JSON.stringify(e.list[0]))
-          data.pic = ''
-          e.originForm = data
-        }
-      })
-
-      this.$post(`${this.api.findPage}?columnId=${this.columnId}`).then(({ data }) => {
-        if (data.length) {
-          this.id = data[0].id
-          this.edited = true
-        }
-      }).catch(err => {})
-    },
-    // 展开模块设置
-    toSet(i) {
-      this.curModule = i
-      this.curData = JSON.parse(JSON.stringify(this.modules[i]))
-      this.diaVisible = true
-    },
-    // 模块设置提交
-    moduleSubmit() {
-      this.diaVisible = false
-      this.modules[this.curModule] = this.curData
-      console.log("🚀 ~ file: index.vue ~ line 520 ~ moduleSubmit ~ this.modules[this.curModule]", this.modules[this.curModule])
-    },
-    // 处理预览和保存的json
-    handleJson() {
-      const list = JSON.parse(JSON.stringify(this.modules))
-      list.map(e => {
-        if (e.type === 'form') delete e.forms
-      })
-      return JSON.stringify(list)
-    },
-    // 预览
-    preview() {
-      this.$post(this.api.saveRedisPage, {
-        columnId: this.columnId,
-        json: this.handleJson()
-      }).then(({ data }) => {
-        
-      }).catch(err => {})
-    },
-    // 保存
-    save(state) {
-      const json = this.handleJson()
-      const data = {
-        id: this.id,
-        columnId: this.columnId,
-        state,
-        sort: 1,
-        founderId: this.userId,
-        editorId: this.userId,
-        jsonBeforeEditing: json
-      }
-      debugger
-      if (state) data.theEditedJson = json
-      this.$post(this.api[this.edited ? 'updatePage' : 'savePage'], data).then(({ data }) => {
     
-      }).catch(err => {})
-    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.actions {
+@import "../../../styles/page/page.scss";
-  margin-bottom: 20px;
-  text-align: right;
-}
-.c-wrap {
-  position: relative;
-}
 .block {
-  padding: 118px 0;
-  .b-title {
-    position: relative;
-    margin-bottom: 50px;
-    font-size: 50px;
-    line-height: 59px;
-    text-align: center;
-    color: #1F1F1F;
-    &:after {
-      content: '';
-      position: absolute;
-      top: 70px;
-      left: 50%;
-      width: 136px;
-      height: 4px;
-      transform: translateX(-50%);
-      background: #1583FF;
-    }
-  }
-  .intro {
-    margin-bottom: 80px;
-    font-size: 30px;
-    text-align: center;
-    color: #5B5B5E;
-    line-height: 40px;
-  }
   .card {
     display: flex;
     justify-content: space-between;
@@ -825,10 +750,6 @@ export default {
     }
   }
 }
-.inner {
-  width: 1400px;
-  margin: 0 auto;
-}
 .about {
   position: relative;
   padding: 77px 0 198px;
@@ -861,115 +782,4 @@ export default {
     border-radius: 17px;
   }
 }
-.cover {
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  background-color: rgba(0, 0, 0, .5);
-  cursor: pointer;
-  &:hover {
-    background-color: rgba(0, 0, 0, .7);
-  }
-}
-/deep/.module {
-  .el-table.module-table td {
-    .cell {
-      padding-top: 10px;
-    }
-    .link-wrap {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .set-link {
-      margin-left: 10px;
-    }
-    .del {
-      margin-left: 5px;
-      font-size: 18px;
-      color: #333;
-      cursor: pointer;
-    }
-  }
-  .plus {
-    margin-top: 10px;
-    font-size: 20px;
-    text-align: center;
-    color: $main-color;
-    cursor: pointer;
-  }
-}
-$avatar-width: 140px;
-$avatar-height: 80px;
-/deep/.upload-pic, /deep/.upload-none {
-  width: $avatar-width;
-  height: $avatar-height;
-  margin-bottom: 10px;
-}
-/deep/.upload-none {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.04);
-  i {
-    font-size: 20px;
-    color: #8c939d;
-  }
-}
-/deep/ .uploader {
-  .el-upload {
-    position: relative;
-    width: $avatar-width;
-    border: 1px dashed #d9d9d9;
-    border-radius: 2px;
-    cursor: pointer;
-    overflow: hidden;
-    &:hover {
-      border-color: #409EFF;
-    }
-    .uploader-default {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      width: $avatar-width !important;
-      height: $avatar-height;
-      text-align: center;
-      background: rgba(0, 0, 0, 0.04);
-      i {
-        font-size: 20px;
-        font-weight: bold;
-        color: #8c939d;
-      }
-      p {
-        margin-top: 10px;
-        font-size: 14px;
-        color: rgba(0, 0, 0, 0.65);
-        line-height: 1;
-      }
-    }
-    .avatar {
-      display: block;
-      width: $avatar-width;
-      height: $avatar-height;
-    }
-  }
-  .el-upload__tip {
-    margin-top: 0;
-    p {
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.45);
-      line-height: 1;
-      &:first-child {
-        margin-bottom: 5px;
-      }
-    }
-  }
-}
 </style>

src/router/modules/column.js

@@ -22,14 +22,20 @@ export default {
     {
       name: `${pre}add`,
       path: `add`,
-            component: () => import('@/pages/column/add/index.vue'),
+      component: () => import('@/pages/column/add'),
       meta: { title: '添加栏目' }
     },
     {
-            name: `${pre}page`,
+      name: `${pre}home`,
-            path: `page`,
+      path: `home`,
-            component: () => import('@/pages/column/page/index.vue'),
+      component: () => import('@/pages/column/page/home'),
-            meta: { title: '页面管理' }
+      meta: { title: 'HOME' }
+    },
+    {
+      name: `${pre}about`,
+      path: `about`,
+      component: () => import('@/pages/column/page/about'),
+      meta: { title: 'ABOUT' }
     }
   ]
 }

src/router/modules/page.js

@@ -1,29 +0,0 @@
-import BasicLayout from '@/layouts/home'
-
-const meta = {}
-
-const pre = 'page-'
-
-export default {
-    path: '/page',
-    name: 'page',
-    redirect: {
-        name: `${pre}list`
-    },
-    meta,
-    component: BasicLayout,
-    children: [
-        {
-            name: `${pre}list`,
-            path: `list`,
-            component: () => import('@/pages/page/list'),
-            meta: { title: '页面管理' }
-        },
-        {
-            name: `${pre}add`,
-            path: `add`,
-            component: () => import('@/pages/page/add/index.vue'),
-            meta: { title: '添加页面' }
-        }
-    ]
-}

src/styles/page/page.scss

@@ -0,0 +1,157 @@
+.block {
+  padding: 118px 0;
+  .b-title {
+    position: relative;
+    margin-bottom: 50px;
+    font-size: 50px;
+    line-height: 59px;
+    text-align: center;
+    color: #1F1F1F;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 70px;
+      left: 50%;
+      width: 136px;
+      height: 4px;
+      transform: translateX(-50%);
+      background: #1583FF;
+    }
+  }
+  .intro {
+    margin-bottom: 80px;
+    font-size: 30px;
+    text-align: center;
+    color: #5B5B5E;
+    line-height: 40px;
+  }
+}
+.inner {
+  width: 1400px;
+  margin: 0 auto;
+  &.lg {
+    width: 1505px;
+  }
+}
+.gray {
+  background-color: #F2F6F8;
+}
+
+.actions {
+  margin-bottom: 20px;
+  text-align: right;
+}
+.c-wrap {
+  position: relative;
+}
+.cover {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  background-color: rgba(0, 0, 0, .5);
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(0, 0, 0, .7);
+  }
+}
+/deep/.module {
+  .el-table.module-table td {
+    .cell {
+      padding-top: 10px;
+    }
+    .link-wrap {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .set-link {
+      margin-left: 10px;
+    }
+    .del {
+      margin-left: 5px;
+      font-size: 18px;
+      color: #333;
+      cursor: pointer;
+    }
+  }
+  .plus {
+    margin-top: 10px;
+    font-size: 20px;
+    text-align: center;
+    color: $main-color;
+    cursor: pointer;
+  }
+}
+$avatar-width: 140px;
+$avatar-height: 80px;
+/deep/.upload-pic, /deep/.upload-none {
+  width: $avatar-width;
+  height: $avatar-height;
+  margin-bottom: 10px;
+}
+/deep/.upload-none {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.04);
+  i {
+    font-size: 20px;
+    color: #8c939d;
+  }
+}
+/deep/ .uploader {
+  .el-upload {
+    position: relative;
+    width: $avatar-width;
+    border: 1px dashed #d9d9d9;
+    border-radius: 2px;
+    cursor: pointer;
+    overflow: hidden;
+    &:hover {
+      border-color: #409EFF;
+    }
+    .uploader-default {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: $avatar-width !important;
+      height: $avatar-height;
+      text-align: center;
+      background: rgba(0, 0, 0, 0.04);
+      i {
+        font-size: 20px;
+        font-weight: bold;
+        color: #8c939d;
+      }
+      p {
+        margin-top: 10px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 1;
+      }
+    }
+    .avatar {
+      display: block;
+      width: $avatar-width;
+      height: $avatar-height;
+    }
+  }
+  .el-upload__tip {
+    margin-top: 0;
+    p {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 1;
+      &:first-child {
+        margin-bottom: 5px;
+      }
+    }
+  }
+}