diff --git a/src/assets/images/about/1.png b/src/assets/images/about/1.png
new file mode 100644
index 0000000..d6c4bab
Binary files /dev/null and b/src/assets/images/about/1.png differ
diff --git a/src/assets/images/about/10.png b/src/assets/images/about/10.png
new file mode 100644
index 0000000..a617279
Binary files /dev/null and b/src/assets/images/about/10.png differ
diff --git a/src/assets/images/about/11.png b/src/assets/images/about/11.png
new file mode 100644
index 0000000..afc900d
Binary files /dev/null and b/src/assets/images/about/11.png differ
diff --git a/src/assets/images/about/12.png b/src/assets/images/about/12.png
new file mode 100644
index 0000000..4f68fe3
Binary files /dev/null and b/src/assets/images/about/12.png differ
diff --git a/src/assets/images/about/2.png b/src/assets/images/about/2.png
new file mode 100644
index 0000000..100e662
Binary files /dev/null and b/src/assets/images/about/2.png differ
diff --git a/src/assets/images/about/3.png b/src/assets/images/about/3.png
new file mode 100644
index 0000000..9ed56da
Binary files /dev/null and b/src/assets/images/about/3.png differ
diff --git a/src/assets/images/about/4.png b/src/assets/images/about/4.png
new file mode 100644
index 0000000..7982688
Binary files /dev/null and b/src/assets/images/about/4.png differ
diff --git a/src/assets/images/about/5.png b/src/assets/images/about/5.png
new file mode 100644
index 0000000..d9d1dad
Binary files /dev/null and b/src/assets/images/about/5.png differ
diff --git a/src/assets/images/about/6.png b/src/assets/images/about/6.png
new file mode 100644
index 0000000..3c8389b
Binary files /dev/null and b/src/assets/images/about/6.png differ
diff --git a/src/assets/images/about/7.png b/src/assets/images/about/7.png
new file mode 100644
index 0000000..2034a43
Binary files /dev/null and b/src/assets/images/about/7.png differ
diff --git a/src/assets/images/about/8.png b/src/assets/images/about/8.png
new file mode 100644
index 0000000..9d7376a
Binary files /dev/null and b/src/assets/images/about/8.png differ
diff --git a/src/assets/images/about/9.png b/src/assets/images/about/9.png
new file mode 100644
index 0000000..68dc21b
Binary files /dev/null and b/src/assets/images/about/9.png differ
diff --git a/src/assets/images/arrow-white.png b/src/assets/images/arrow-white.png
new file mode 100644
index 0000000..9cfaa21
Binary files /dev/null and b/src/assets/images/arrow-white.png differ
diff --git a/src/assets/images/channel/arrow.png b/src/assets/images/arrow.png
similarity index 100%
rename from src/assets/images/channel/arrow.png
rename to src/assets/images/arrow.png
diff --git a/src/assets/images/page/about.png b/src/assets/images/page/about.png
new file mode 100644
index 0000000..408f83e
Binary files /dev/null and b/src/assets/images/page/about.png differ
diff --git a/src/assets/images/page/careers.png b/src/assets/images/page/careers.png
new file mode 100644
index 0000000..f6383a6
Binary files /dev/null and b/src/assets/images/page/careers.png differ
diff --git a/src/assets/images/page/home.png b/src/assets/images/page/home.png
new file mode 100644
index 0000000..2b3c4d4
Binary files /dev/null and b/src/assets/images/page/home.png differ
diff --git a/src/components/modules/content.vue b/src/components/modules/content.vue
index 0642fb2..5855307 100644
--- a/src/components/modules/content.vue
+++ b/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
-      let linkEle = null
+      const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link
+      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 (!links.length) return util.errorMsg('请选择站内链接')
-          data.linkAddress = links.join()
-          if (article) data.linkAddress += '-' + article
+          if (!data.columnId.length) return Util.errorMsg('请选择站内链接')
         }
         if (data.connectionType === 3) {
-          linkEle = el.$refs.otherLink
-          if (!otherLink.length) return util.errorMsg('请选择栏目')
-          data.linkAddress = otherLink.join()
-          if (otherArticle) data.linkAddress += '-' + otherArticle
+          if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目')
         }
       }
-      data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
-      this.data.list[this.curIndex].link = data
+      data.linkName = linkEle ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
+      console.log("🚀 ~ file: module.vue ~ line 296 ~ linkSubmit ~ data", this.data)
       this.linkVisible = false
     },
     // 模块设置提交
diff --git a/src/components/modules/link.vue b/src/components/modules/link.vue
index b606406..b0e4ee5 100644
--- a/src/components/modules/link.vue
+++ b/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"
-              v-model="links"
+              ref="column"
+              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"
-              v-model="otherLink"
+              ref="otherColumn"
+              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],
diff --git a/src/components/modules/module.vue b/src/components/modules/module.vue
index 599546e..f853916 100644
--- a/src/components/modules/module.vue
+++ b/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
-      let linkEle = null
+      const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link
+      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 (!links.length) return util.errorMsg('请选择站内链接')
-          data.linkAddress = links.join()
-          if (article) data.linkAddress += '-' + article
+          if (!data.columnId.length) return Util.errorMsg('请选择站内链接')
         }
         if (data.connectionType === 3) {
-          linkEle = el.$refs.otherLink
-          if (!otherLink.length) return util.errorMsg('请选择栏目')
-          data.linkAddress = otherLink.join()
-          if (otherArticle) data.linkAddress += '-' + otherArticle
+          if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目')
         }
       }
-      data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
-      this.data.list[this.curIndex].link = data
+      data.linkName = linkEle ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
+      console.log("🚀 ~ file: module.vue ~ line 296 ~ linkSubmit ~ data", this.data)
       this.linkVisible = false
     },
     // 模块设置提交
diff --git a/src/const/column.js b/src/const/column.js
index e851b8a..1c0cf03 100644
--- a/src/const/column.js
+++ b/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'
+    }
+  ],
 }
\ No newline at end of file
diff --git a/src/mixins/app.js b/src/mixins/app.js
index fa8020a..87bf3ca 100644
--- a/src/mixins/app.js
+++ b/src/mixins/app.js
@@ -2,10 +2,7 @@
  * 通用混合
  * */
 export default {
-    methods: {
-        // 当 $route 更新时触发
-        appRouteChange(to, from) {
-
-        }
-    }
+  methods: {
+    
+  }
 };
diff --git a/src/mixins/page/index.js b/src/mixins/page/index.js
new file mode 100644
index 0000000..b077eb7
--- /dev/null
+++ b/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 => {})
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/mixins/setBackground/index.js b/src/mixins/setBackground/index.js
deleted file mode 100644
index 3c058de..0000000
--- a/src/mixins/setBackground/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-    beforeCreate() {
-        document.querySelector("body").setAttribute("style", "background-color:#fff");
-    },
-    beforeDestroy() {
-        document.body.removeAttribute("style");
-    }
-};
\ No newline at end of file
diff --git a/src/pages/column/add/index.vue b/src/pages/column/add/index.vue
index dd29739..3fc6922 100644
--- a/src/pages/column/add/index.vue
+++ b/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"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
+              label="长页模板"
+              :value="1">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="listStyleId" label="列表样式">
           <ul class="styles">
-            <li>
-              <div class="review">
-                <img src="@/assets/images/list1.png" alt="">
-              </div>
-              <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
-            </li>
-            <li>
+            <li v-for="(item, i) in pageStyle" :key="i">
               <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="2">新闻列表</el-radio>
-            </li>
-            <li>
-              <div class="review">
-                <img src="@/assets/images/list2.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 {
diff --git a/src/pages/column/list/index.vue b/src/pages/column/list/index.vue
index 2091b24..d3daa48 100644
--- a/src/pages/column/list/index.vue
+++ b/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() {
diff --git a/src/pages/column/page/about.vue b/src/pages/column/page/about.vue
new file mode 100644
index 0000000..9510d54
--- /dev/null
+++ b/src/pages/column/page/about.vue
@@ -0,0 +1,1142 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <el-button type="primary" @click="preview">预览</el-button>
+      <el-button @click="save(0)">保存为草稿</el-button>
+      <el-button type="primary" @click="save(1)">发布</el-button>
+      <el-button @click="$router.back()">放弃编辑</el-button>
+    </div>
+
+    <div class="relative">
+      <el-carousel height="480px">
+        <template v-for="(item, i) in modules[0].list">
+          <el-carousel-item v-if="item.pic" :key="i">
+            <img width="100%" height="100%" :src="item.pic" alt="">
+          </el-carousel-item>
+        </template>
+      </el-carousel>
+      <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+    </div>
+    
+    <div class="block history gray">
+      <div class="inner c-wrap">
+        <h2 style="margin-left: 57px">{{ modules[1].form.title || 'Our History' }}</h2>
+        <div class="texts">
+          <div class="left">
+            <h2>{{ modules[1].form.subTitle || 'Throughout the world, most of the top science and technology innovation centers are distributed' }}</h2>
+            <div class="line"></div>
+            <div class="des">{{ modules[1].form.des || `Greater Bay area is the most economically developed China. Therefore, in 2019, the Chinese central government proposed to build this region an international science ion cente.
+
+              As one of the core cities in the bay area, with the convenient transportation infrastructure.` }}</div>
+          </div>
+          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+        </div>
+        <div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[2].form.title || 'Our Values' }}</h2>
+          <p class="intro">{{ modules[2].form.des || 'What makes a light chaser' }}</p>
+          <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
+        </div>
+        <ul class="card">
+          <li class="item1">
+            <h6>{{ modules[3].form.title || 'Integrity' }}</h6>
+            <div class="des" v-html="modules[3].form.des"></div>
+            <div class="cover" @click="toSet(3)">点击更换标题、概述与跳转</div>
+          </li>
+          <li class="item2">
+            <h6>{{ modules[4].form.title || 'Adventure ' }}</h6>
+            <div class="des" v-html="modules[4].form.des"></div>
+            <div class="cover" @click="toSet(4)">点击更换标题、概述与跳转</div>
+          </li>
+          <li class="item3">
+            <h6>{{ modules[5].form.title || 'Serve ' }}</h6>
+            <div class="des" v-html="modules[5].form.des"></div>
+            <div class="cover" @click="toSet(5)">点击更换标题、概述与跳转</div>
+          </li>
+          <li class="item4">
+            <h6>{{ modules[6].form.title || 'Focus on Future ' }}</h6>
+            <div class="des" v-html="modules[6].form.des"></div>
+            <div class="cover" @click="toSet(6)">点击更换标题、概述与跳转</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[7].form.title || 'Facts' }}</h2>
+          <p class="intro">{{ modules[7].form.des || 'Strength in numbers' }}</p>
+          <div class="cover" @click="toSet(7)">点击更换标题与描述</div>
+        </div>
+        <ul class="stat">
+          <li>
+            <p class="num">{{ modules[8].form.title }}</p>
+            <p class="text">{{ modules[8].form.des }}</p>
+            <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <p class="num">{{ modules[9].form.title }}</p>
+            <p class="text">{{ modules[9].form.des }}</p>
+            <div class="cover" @click="toSet(9)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <p class="num">{{ modules[10].form.title }}</p>
+            <p class="text">{{ modules[10].form.des }}</p>
+            <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <p class="num">{{ modules[11].form.title }}</p>
+            <p class="text">{{ modules[11].form.des }}</p>
+            <div class="cover" @click="toSet(11)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <p class="num">{{ modules[12].form.title }}</p>
+            <p class="text">{{ modules[12].form.des }}</p>
+            <div class="cover" @click="toSet(12)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <p class="num">{{ modules[13].form.title }}</p>
+            <p class="text">{{ modules[13].form.des }}</p>
+            <div class="cover" @click="toSet(13)">点击更换标题与描述</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="plan">
+      <div class="inner c-wrap">
+        <img class="pic" :src="modules[14].form.pic" alt="">
+        <div class="texts">
+          <h6>{{ modules[14].form.title || 'Strategic Plan' }}</h6>
+          <div class="des">{{ modules[14].form.des || 'IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative, pursuing scientific management and decision-making.' }}</div>
+          <img src="@/assets/images/arrow-white.png" alt="">
+        </div>
+        <div class="cover" @click="toSet(14)">点击更换标题、概述与跳转</div>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[15].form.title || 'Govening Board & Leadership' }}</h2>
+          <p class="intro">{{ modules[15].form.des || 'What makes a ligh chinese bay chaser' }}</p>
+          <div class="cover" @click="toSet(15)">点击更换标题与描述</div>
+        </div>
+        <ul class="people">
+          <li v-for="(item, i) in modules[16].list" :key="i">
+            <img class="pic" :src="item.pic" alt="">
+            <div class="texts">
+              <p class="sub">{{ item.title || 'Founder and 1st PRESIDENT OF THE INSTITUTE OF ADVANCED SCIENCE FACILITIES, SHENZHEN' }}</p>
+              <h6>{{ item.subTitle || 'Sun Dongbai' }}</h6>
+              <p class="des">{{ item.des || 'Dr. Sun was the executive vice president of Sun Yat- and vice president of the University of Science and Technology Beijing (2008-2017). One of the most widely well-known material scientists aation' }}</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+          <div class="cover" @click="toSet(16)">点击更改图片、标题概述与链接</div>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block list-block gray">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[17].form.title || 'Committees' }}</h2>
+          <p class="intro">{{ modules[17].form.des || 'What makes a ligh chinese bay chaser' }}</p>
+          <div class="cover" @click="toSet(17)">点击更换标题与描述</div>
+        </div>
+        <ul class="list">
+          <li>
+            <img class="pic" :src="modules[18].form.pic" alt="">
+            <h6>{{ modules[18].form.title || 'Science and Technology' }}</h6>
+            <p class="des">{{ modules[18].form.des || 'installation and nanostructuring' }}</p>
+            <div class="cover" @click="toSet(18)">点击更改图片、标题概述与链接</div>
+          </li>
+          <li>
+            <img class="pic" :src="modules[19].form.pic" alt="">
+            <h6>{{ modules[19].form.title || 'User Committee' }}</h6>
+            <p class="des">{{ modules[19].form.des || 'installation and nanostructuring' }}</p>
+            <div class="cover" @click="toSet(19)">点击更改图片、标题概述与链接</div>
+          </li>
+          <li>
+            <img class="pic" :src="modules[20].form.pic" alt="">
+            <h6>{{ modules[20].form.title || 'Industry Advancement Committee' }}</h6>
+            <p class="des">{{ modules[20].form.des || 'installation and nanostructuring' }}</p>
+            <div class="cover" @click="toSet(20)">点击更改图片、标题概述与链接</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[21].form.title || 'Staff & Organization Chart' }}</h2>
+          <p class="intro">{{ modules[21].form.des || 'Meet the light chaser' }}</p>
+          <div class="cover" @click="toSet(21)">点击更换标题与描述</div>
+        </div>
+        <div class="staff">
+          <div class="left">
+            <h6>{{ modules[22].form.title || 'Throughout the world, most of the top science and technology innovation centers are distributed' }}</h6>
+            <div class="des">{{ modules[22].form.des || 'The IASF has over 300 employees, of which 50% hold a Ph.D. degree, and more than 25% of core positions had abroad research and management experience.' }}</div>
+          </div>
+          <img class="pic" :src="modules[22].form.pic" alt="">
+          <div class="cover" @click="toSet(22)">点击更改图片、标题概述与链接</div>
+        </div>
+      </div>
+    </div>
+
+    <Module :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      modules: [
+        {
+          type: 'banner',
+          list: [
+            {
+              pic: require('@/assets/images/about/1.png'),
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                columnId: [],
+                articleId: '',
+                linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
+                isOpen: 1
+              },
+              isEnable: 1
+            }
+          ]
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'subTitle',
+              label: '小标题'
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/about/2.png'),
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'editor',
+              prop: 'des',
+              label: '概述',
+              required: true
+            }
+          ],
+          form: {
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'editor',
+              prop: 'des',
+              label: '概述',
+              required: true
+            }
+          ],
+          form: {
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'editor',
+              prop: 'des',
+              label: '概述',
+              required: true
+            }
+          ],
+          form: {
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'editor',
+              prop: 'des',
+              label: '概述',
+              required: true
+            }
+          ],
+          form: {
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '2020',
+            des: 'The year IASF was founded'
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '2',
+            des: 'Facility projects'
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '240',
+            des: 'Employees'
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '10',
+            des: 'Academicians'
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '45%',
+            des: 'Hold doctorates or the highest degree in their field'
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '$32B+',
+            des: 'Facility construction need-based grant aid provided '
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/about/5.png'),
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'introduce',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'subTitle',
+              label: '小标题'
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: '',
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          },
+          list: [
+            {
+              pic: require('@/assets/images/channel/channel1.png'),
+              title: '',
+              subTitle: '',
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                columnId: [],
+                articleId: '',
+                linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
+                isOpen: 1
+              },
+              isEnable: 1
+            }
+          ]
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/about/9.png'),
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/about/10.png'),
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/about/11.png'),
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/about/12.png'),
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          }
+        },
+      ],
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+
+  }
+};
+</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;
+  }
+  .line {
+    width: 136px;
+    height: 2px;
+    margin: 20px 0;
+    background: #D7D7D7;
+  }
+  .des {
+    font-size: 22px;
+    color: #181818;
+    line-height: 31px;
+  }
+  .bg {
+    margin: -122px 0 0 0;
+  }
+}
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: 686px;
+    height: 277px;
+    padding: 70px 67px 20px;
+    margin-bottom: 28px;
+    color: #fff;
+    &:nth-child(odd) {
+      margin-right: 28px;
+    }
+  }
+  .item1 {
+    background: url(../../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
+  }
+  .item2 {
+    background-color: #4984B6;
+  }
+  .item3 {
+    background-color: #567180;
+  }
+  .item4 {
+    background: url(../../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
+  }
+  h6 {
+    margin-bottom: 10px;
+    font-size: 40px;
+  }
+  .des {
+    font-size: 18px;
+  }
+}
+.plan {
+  padding: 73px 0;
+  background: #072947;
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    width: 1575px;
+  }
+  .pic {
+    width: 664px;
+    height: 488px;
+    margin-bottom: -120px;
+  }
+  .texts {
+    width: 802px;
+    margin-top: 36px;
+    color: #fff;
+  }
+  h6 {
+    font-size: 36px;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 20px;
+  }
+}
+.people {
+  position: relative;
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 126px;
+  }
+  .pic {
+    width: 660px;
+    height: 465px;
+  }
+  .texts {
+    width: 680px;
+    padding-top: 90px;
+  }
+  h6 {
+    margin: 20px 0;
+    font-size: 40px;
+  }
+  .sub {
+    font-size: 20px;
+    color: #020202;
+  }
+  .des {
+    font-size: 18px;
+    color: #020202;
+    line-height: 30px;
+  }
+}
+.list-block {
+  .inner {
+    width: 80%;
+    padding: 90px 0;
+    background-color: #fff;
+  }
+}
+.list {
+  display: flex;
+  justify-content: center;
+  li {
+    position: relative;
+    width: calc((100% - 100px) / 3);
+    padding-bottom: 30px;
+    margin-right: 28px;
+    text-align: center;
+    background-color: #F5F5F5;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .pic {
+    width: 100%;
+    height: 353px;
+  }
+  h6 {
+    margin: 35px 0 5px;
+    font-size: 24px;
+    color: #272727;
+  }
+  .des {
+    font-size: 16px;
+    color: #757575;
+  }
+}
+.staff {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  background: #F8F8F8;
+  .left {
+    width: 658px;
+    margin: 50px 0 0 46px;
+  }
+  h6 {
+    margin-bottom: 30px;
+    font-size: 30px;
+    color: #333;
+  }
+  .des {
+    font-size: 20px;
+    color: #333;
+    line-height: 34px;
+  }
+  .pic {
+    width: 650px;
+  }
+}
+.stat {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-top: 60px;
+  li {
+    position: relative;
+    width: 30%;
+    margin-bottom: 50px;
+  }
+  .num {
+    margin-bottom: 10px;
+    font-size: 60px;
+    font-weight: 800;
+    color: #035CE1;
+    line-height: 49px;
+  }
+  .text {
+    font-size: 24px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/column/page/index.vue b/src/pages/column/page/home.vue
similarity index 79%
rename from src/pages/column/page/index.vue
rename to src/pages/column/page/home.vue
index 855e817..93bc8a3 100644
--- a/src/pages/column/page/index.vue
+++ b/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 Util from '@/libs/util'
-import Module from '@/components/modules/module'
+import mixins from '@/mixins/page'
 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 {
-  margin-bottom: 20px;
-  text-align: right;
-}
-.c-wrap {
-  position: relative;
-}
+@import "../../../styles/page/page.scss";
 .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>
\ No newline at end of file
diff --git a/src/router/modules/column.js b/src/router/modules/column.js
index 9b20a3c..df4f9bf 100644
--- a/src/router/modules/column.js
+++ b/src/router/modules/column.js
@@ -5,31 +5,37 @@ const meta = {}
 const pre = 'column-'
 
 export default {
-    path: '/column',
-    name: 'column',
-    redirect: {
-        name: `${pre}list`
+  path: '/column',
+  name: 'column',
+  redirect: {
+    name: `${pre}list`
+  },
+  meta,
+  component: BasicLayout,
+  children: [
+    {
+      name: `${pre}list`,
+      path: `list`,
+      component: () => import('@/pages/column/list'),
+      meta: { title: '栏目管理' }
     },
-    meta,
-    component: BasicLayout,
-    children: [
-        {
-            name: `${pre}list`,
-            path: `list`,
-            component: () => import('@/pages/column/list'),
-            meta: { title: '栏目管理' }
-        },
-        {
-            name: `${pre}add`,
-            path: `add`,
-            component: () => import('@/pages/column/add/index.vue'),
-            meta: { title: '添加栏目' }
-        },
-        {
-            name: `${pre}page`,
-            path: `page`,
-            component: () => import('@/pages/column/page/index.vue'),
-            meta: { title: '页面管理' }
-        }
-    ]
+    {
+      name: `${pre}add`,
+      path: `add`,
+      component: () => import('@/pages/column/add'),
+      meta: { title: '添加栏目' }
+    },
+    {
+      name: `${pre}home`,
+      path: `home`,
+      component: () => import('@/pages/column/page/home'),
+      meta: { title: 'HOME' }
+    },
+    {
+      name: `${pre}about`,
+      path: `about`,
+      component: () => import('@/pages/column/page/about'),
+      meta: { title: 'ABOUT' }
+    }
+  ]
 }
diff --git a/src/router/modules/page.js b/src/router/modules/page.js
deleted file mode 100644
index 8373090..0000000
--- a/src/router/modules/page.js
+++ /dev/null
@@ -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: '添加页面' }
-        }
-    ]
-}
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
new file mode 100644
index 0000000..6d280b1
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
\ No newline at end of file