diff --git a/src/api/index.js b/src/api/index.js
index 184465b..b58cda7 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,11 +1,13 @@
 import Setting from "@/setting";
 const host = Setting.apiBaseURL
-const uploadURL = Setting.upload.apiURL;
 const host1 = 'http://192.168.31.151:10000/'
 
 export default {
   logins: `iasf/sys/user/login`,
   verification: `${host}iasf/sys/getVerify`,
+  upload: `${host}iasf/sysFiles/upload`,
+  listByPage: `${host}iasf/sysFiles/listByPage`,
+  delFile: `${host}iasf/sysFiles/delete`,
   dept: `iasf/sys/dept`,
   deptTree: `iasf/sys/dept/tree`,
   deptId: `iasf/sys/dept`,
@@ -22,4 +24,5 @@ export default {
   queryArticle: `${host1}iasf/sysContent/pagingQuery`,
   saveArticle: `${host1}iasf/sysContent/save`,
   updateArticle: `${host1}iasf/sysContent/update`,
+  longPageColumnList: `${host1}iasf/pageManagement/longPageColumnList`,
 }
\ No newline at end of file
diff --git a/src/assets/img/article1.png b/src/assets/img/article1.png
new file mode 100644
index 0000000..6f92f81
Binary files /dev/null and b/src/assets/img/article1.png differ
diff --git a/src/assets/img/article2.png b/src/assets/img/article2.png
new file mode 100644
index 0000000..972e33b
Binary files /dev/null and b/src/assets/img/article2.png differ
diff --git a/src/assets/img/article3.png b/src/assets/img/article3.png
new file mode 100644
index 0000000..a40219d
Binary files /dev/null and b/src/assets/img/article3.png differ
diff --git a/src/assets/img/list1.png b/src/assets/img/list1.png
new file mode 100644
index 0000000..39a80e0
Binary files /dev/null and b/src/assets/img/list1.png differ
diff --git a/src/assets/img/list2.png b/src/assets/img/list2.png
new file mode 100644
index 0000000..da8e548
Binary files /dev/null and b/src/assets/img/list2.png differ
diff --git a/src/assets/img/plus.png b/src/assets/img/plus.png
new file mode 100644
index 0000000..9358205
Binary files /dev/null and b/src/assets/img/plus.png differ
diff --git a/src/assets/img/style1.png b/src/assets/img/style1.png
new file mode 100644
index 0000000..d552c61
Binary files /dev/null and b/src/assets/img/style1.png differ
diff --git a/src/assets/img/style2.png b/src/assets/img/style2.png
new file mode 100644
index 0000000..411a3f3
Binary files /dev/null and b/src/assets/img/style2.png differ
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index 27b6d64..52dc542 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -95,7 +95,7 @@ export default {
         return {
           collapse: false,
           active: this.$route.path,
-          siteActive: '/page/list',
+          siteActive: '/page',
           reloadSite: true,
           menus: [
             {
@@ -149,25 +149,22 @@ export default {
               title: '内容管理',
               subs: [
                 {
-                  index: '/page/list',
+                  index: '/page',
                   title: '页面管理'
                 },
                 {
-                  index: '/column/list',
+                  index: '/column',
                   title: '栏目管理'
                 },
                 {
-                  index: '/article/list',
+                  index: '/article',
                   title: '文章管理'
                 }
               ]
             }
           ],
           actives: {
-              dashboard: ["add"],
-              achievement: ["experiment", "experimentVir", "experimentTeach", "addexperiment", "addexperimentoptions", "showExperiment", "showExperimentoption", "showExperimentoptions"],
-              project: ["addproject", "program", "programOption", "programOptions"],
-              backstage: ["report"]
+            dashboard: ["add"],
           }
         };
     },
@@ -177,21 +174,23 @@ export default {
       ])
     },
     watch: {
-        "$route"(to, from) {
-            let actives = this.actives;
-            for (let i in this.actives) {
-                if (actives[i].includes(this.$route.name)) this.active = `/${i}/list`;
-            }
-            let arr=this.$route.path.split("/");
-            let name =  `/${arr[1]}/list`
-            this.active = name
-            const { path } = this.$route
-            console.log("🚀 ~ file: index.vue ~ line 167 ~ path", this.sites[0].subs.find(e => e.index === path))
-            this.collapse = !!this.sites[0].subs.find(e => e.index === path)
+      "$route"(to, from) {
+        let actives = this.actives;
+        for (let i in this.actives) {
+            if (actives[i].includes(this.$route.name)) this.active = `/${i}/list`;
         }
+        let arr=this.$route.path.split("/");
+        let name =  `/${arr[1]}/list`
+        this.active = name
+        const { path } = this.$route
+        this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
+      }
     },
     created() {
-      this.collapse = !!this.sites[0].subs.find(e => e.index === this.$route.path)
+      const { path } = this.$route
+      console.log("🚀 ~ file: index.vue ~ line 191 ~ created ~ path", path)
+      this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
+      if (this.collapse) this.siteActive = '/' + path.split('/')[1]
       // this.getPer()
     },
     methods: {
@@ -200,21 +199,9 @@ export default {
         ]),
         // 菜单选择
         menuSelect(index) {
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ menuSelect ~ index", index)
           this.collapse = false
           if (index.includes('/')) {
-            
             this.$router.push(index)
-            // if (this.collapse) {
-            //   this.reloadSite = false
-            //   this.siteActive = '/page/list'
-            //   this.$nextTick(() => {
-            //     this.reloadSite = true
-            //   })
-            //   this.$router.push('/page')
-            // }
-          } else {
-            
           }
         },
         // 获取权限列表
diff --git a/src/pages/annex/list/index.vue b/src/pages/annex/list/index.vue
new file mode 100644
index 0000000..33b4322
--- /dev/null
+++ b/src/pages/annex/list/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="page">
+    <div class="tool">
+      <div class="search-wrap">
+        <el-input placeholder="请输入站点名称" v-model.trim="keyword" clearable @keyup.enter.native="initData"></el-input>
+        <el-button type="primary" @click="initData">查询</el-button>
+      </div>
+      <div class="actions">
+        <el-button @click="batchDel">删除</el-button>
+      </div>
+    </div>
+
+    <el-table ref="table" :data="list" class="table" header-align="center" @selection-change="handleSelectionChange" row-key="id">
+      <el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column>
+      <el-table-column type="index" width="60" label="ID"></el-table-column>
+      <el-table-column prop="site" label="站点名称" min-width="180"></el-table-column>
+      <el-table-column prop="type" label="文件类型" min-width="100"></el-table-column>
+      <el-table-column prop="format" label="格式" min-width="100"></el-table-column>
+      <el-table-column prop="fileSize" label="大小" min-width="100">
+        <template slot-scope="scope">
+          {{ scope.row.fileSize }}kb
+        </template>
+      </el-table-column>
+      <el-table-column prop="createDate" label="上传时间" min-width="150"></el-table-column>
+      <el-table-column prop="uploader" label="上传人" min-width="100"></el-table-column>
+      <el-table-column prop="quote" label="文章名称" min-width="180"></el-table-column>
+      <el-table-column prop="deleted" label="是否使用" min-width="100">
+        <template slot-scope="scope">
+          {{ scope.row.deleted ? '否' : '是' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="170">
+        <template slot-scope="scope">
+          <el-button type="text" @click="del(scope.row)">删除</el-button>
+          <el-button type="text" @click="edit(scope.row, 'edit')">下级</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import util from "@/libs/util";
+export default {
+    data() {
+        return {
+          keyword: '',
+          page: +this.$route.query.page || 1,
+          pageSize: 10,
+          total: 0,
+          list: [],
+          multipleSelection: [],
+        };
+    },
+    mounted() {
+      this.getData()
+    },
+    methods: {
+      getData() {
+        this.$post(this.api.listByPage, {
+          page: this.page,
+          limit: this.pageSize,
+        }).then(({ data }) => {
+          this.list = data.records
+          this.total = +data.total
+        }).catch(err => {})
+      },
+      initData() {
+        this.$refs.table.clearSelection()
+        this.page = 1
+        this.getData()
+      },
+      add() {
+        this.$router.push('add')
+      },
+      edit(row, type) {
+        this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`)
+      },
+      del(row) {
+        this.$confirm('确定要删除吗？', '提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$del(`${this.api.delFile}`, [row.id]).then(res => {
+            util.successMsg('删除成功')
+            this.getData()
+          }).catch(res => {})
+        }).catch(() => {})
+      },
+      batchDel() {
+        const list = this.multipleSelection
+        if (list.length) {
+          this.$confirm('确定要删除吗？', '提示', {
+            type: 'warning'
+          }).then(() => {
+            this.$del(`${this.api.delFile}`, list.map(e => e.id)).then(res => {
+              this.$refs.table.clearSelection()
+              util.successMsg('删除成功')
+              this.getData()
+            }).catch(res => {})
+          }).catch(() => {})
+        } else {
+          util.errorMsg('请先选择数据 ！')
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+      handleCurrentChange(val) {
+        this.page = val
+        this.$router.push(`list?page=${val}`)
+        this.getData()
+      },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.styles {
+  display: inline-flex;
+  li {
+    margin-right: 20px;
+    text-align: center;
+    &:hover .review {
+      border-color: #2962FF;
+    }
+  }
+  .review {
+    padding: 18px;
+    margin-bottom: 10px;
+    border: 1px solid #DCDEE0;
+    border-radius: 2px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/article/add/index.vue b/src/pages/article/add/index.vue
index 4b0c95e..caf7ac2 100644
--- a/src/pages/article/add/index.vue
+++ b/src/pages/article/add/index.vue
@@ -1,256 +1,231 @@
 <template>
-    <div>
-        <el-form>
-            <el-card shadow="hover" class="m-b-20">
-                <div class="flex-between">
-                    <el-page-header @back="goBack" :content="(isEdit ? '更新' : '创建') + '文章'"></el-page-header>
-                    <div>
-                        <el-button type="primary" @click="submit(1)">发布</el-button>
-                        <el-button v-if="!form.id" type="primary" @click="submit(0)">保存为草稿</el-button>
-                    </div>
-                </div>
-            </el-card>
-
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">标题</p>
-                    <el-input
-                        placeholder="请输入标题"
-                        v-model.trim="form.title"
-                        clearable
-                        maxlength="15"
-                        class="inline-input"
-                        @change="nameChange"
-                    ></el-input>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">所属栏目</p>
-                    <el-cascader
-                      ref="column"
-                      v-model="form.columnId"
-                      :options="columns"
-                      :props="columnProps"
-                      clearable></el-cascader>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">发布日期</p>
-                    <div class="inline-input">
-                      <el-date-picker
-                        v-model="form.releaseTime"
-                        type="date"
-                        placeholder="选择日期"
-                        format="yyyy-MM-dd"
-                        value-format="yyyy-MM-dd">
-                      </el-date-picker>
-                    </div>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">来源</p>
-                    <el-input
-                        placeholder="请输入来源"
-                        v-model.trim="form.source"
-                        clearable
-                        maxlength="15"
-                        class="inline-input"
-                        @change="nameChange"
-                    ></el-input>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">作者</p>
-                    <el-input
-                        placeholder="请输入作者"
-                        v-model.trim="form.author"
-                        clearable
-                        maxlength="15"
-                        class="inline-input"
-                        @change="nameChange"
-                    ></el-input>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">标题图</p>
-                    <el-upload
-                        class="avatar-uploader"
-                        accept=".jpg,.png,.jpeg,.gif"
-                        :on-remove="handleRemove"
-                        :on-error="uploadError"
-                        :on-success="uploadSuccess"
-                        :before-remove="beforeRemove"
-                        :limit="1"
-                        :on-exceed="handleExceed"
-                        :action="this.api.fileupload"
-                        :headers="headers"
-                        name="file"
-                    >
-                        <img v-if="form.titleImg" :src="form.titleImg" class="avatar">
-                        <div class="uploader-default" v-else>
-                            <i class="el-icon-plus"></i>
-                            <p>上传banner</p>
-                        </div>
-                        <div slot="tip" class="el-upload__tip">
-                            <p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p>
-                        </div>
-                    </el-upload>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">banner图</p>
-                    <el-upload
-                        class="avatar-uploader avatar-uploader-lg"
-                        accept=".jpg,.png,.jpeg,.gif"
-                        :on-remove="handleRemove"
-                        :on-error="uploadError"
-                        :on-success="uploadSuccessBanner"
-                        :before-remove="beforeRemove"
-                        :limit="1"
-                        :on-exceed="handleExceed"
-                        :action="this.api.fileupload"
-                        :headers="headers"
-                        name="file"
-                    >
-                        <img v-if="form.bannerImg" :src="form.bannerImg" class="avatar">
-                        <div class="uploader-default" v-else>
-                            <i class="el-icon-plus"></i>
-                            <p>上传banner</p>
-                        </div>
-                        <div slot="tip" class="el-upload__tip">
-                            <p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p>
-                        </div>
-                    </el-upload>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">独立文章模板</p>
-                    <div class="style-wrap">
-                      <ul class="styles">
-                        <li>
-                          <el-radio v-model="form.articleTemplate" :label="1">视频详情</el-radio>
-                        </li>
-                        <li>
-                          <el-radio v-model="form.articleTemplate" :label="2">富文本</el-radio>
-                        </li>
-                        <li>
-                          <el-radio v-model="form.articleTemplate" :label="3">链接</el-radio>
-                        </li>
-                      </ul>
-                    </div>
-                </div>
-            </el-card>
-            <template v-if="form.articleTemplate === 1 || form.articleTemplate === 2">
-              <el-card shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">正文</p>
-                      <quill :border="true" v-model="form.mainBody" :height="400" />
-                  </div>
-              </el-card>
-              <el-card shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">文件上传</p>
-                      <el-upload
-                          :on-remove="handleRemove"
-                          :on-error="uploadError"
-                          :on-success="uploadSuccessFile"
-                          :before-remove="beforeRemove"
-                          :limit="1"
-                          :on-exceed="handleExceed"
-                          :action="this.api.fileupload"
-                          :headers="headers"
-                          name="file"
-                      >
-                        <el-button type="primary">上传</el-button>
-                      </el-upload>
-                  </div>
-              </el-card>
-            </template>
-            <template v-if="form.articleTemplate === 3">
-              <el-card shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">连接类型</p>
-                      <el-radio-group v-model="form.connectionType">
-                        <el-radio :label="1">站内链接</el-radio>
-                        <el-radio :label="2">站外链接</el-radio>
-                        <el-radio :label="3">其他站点链接</el-radio>
-                      </el-radio-group>
-                  </div>
-              </el-card>
-              <el-card v-show="form.connectionType === 1" shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">站内链接</p>
-                      <el-cascader
-                        v-model="links"
-                        :options="columns"
-                        :props="columnProps"
-                        clearable></el-cascader>
-                  </div>
-              </el-card>
-              <el-card v-show="form.connectionType === 2" shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">站外链接</p>
-                      <el-input
-                        placeholder="请输入站外链接"
-                        v-model.trim="form.linkAddress"
-                        clearable
-                    ></el-input>
-                  </div>
-              </el-card>
-              <template v-if="form.connectionType === 3">
-                <el-card shadow="hover" class="mgr20 m-b-20">
-                    <div>
-                        <p class="m-b-20">站点选择</p>
-                        <el-select v-model="form.siteSelection">
-                          <el-option
-                              v-for="item in sites"
-                              :key="item.id"
-                              :label="item.name"
-                              :value="item.id">
-                          </el-option>
-                        </el-select>
-                    </div>
-                </el-card>
-                <el-card shadow="hover" class="mgr20 m-b-20">
-                    <div>
-                        <p class="m-b-20">栏目</p>
-                        <el-cascader
-                          v-model="links"
-                          :options="columns"
-                          :props="columnProps"
-                          clearable></el-cascader>
-                    </div>
-                </el-card>
-              </template>
-            </template>
-            <el-card v-show="form.typeId === 4" shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">在新窗口打开</p>
-                    <el-switch
-                      v-model="form.showWithDetails"
-                      :active-value="1"
-                      :inactive-value="0">
-                    </el-switch>
-                </div>
-            </el-card>
-        </el-form>
+  <div class="page">
+    <p class="page-name mb">新增栏目</p>
+    <el-form class="input-form model" label-width="100px">
+      <el-form-item prop="title" label="标题">
+        <el-input
+          placeholder="请输入标题"
+          v-model.trim="form.title"
+          clearable
+          maxlength="15"
+          class="inline-input"
+          @change="nameChange"
+        ></el-input>
+      </el-form-item>
+      <div class="item-line">
+        <el-form-item prop="columnId" label="所属栏目">
+          <el-cascader
+            ref="column"
+            v-model="form.columnId"
+            :options="columns"
+            :props="columnProps"
+            clearable></el-cascader>
+        </el-form-item>
+        <el-form-item prop="releaseTime" label="发布日期">
+          <el-date-picker
+            v-model="form.releaseTime"
+            type="date"
+            placeholder="选择日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+      </div>
+      <div class="item-line">
+        <el-form-item prop="source" label="来源">
+          <el-input
+            placeholder="请输入来源"
+            v-model.trim="form.source"
+            clearable
+            maxlength="15"
+            class="inline-input"
+            @change="nameChange"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="author" label="作者">
+          <el-input
+            placeholder="请输入作者"
+            v-model.trim="form.author"
+            clearable
+            maxlength="15"
+            class="inline-input"
+            @change="nameChange"
+          ></el-input>
+        </el-form-item>
+      </div>
+      <el-form-item prop="summary" label="摘要">
+        <el-input
+          type="textarea"
+          v-model.trim="form.summary"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <div class="item-line">
+        <el-form-item prop="titleImg" label="标题图">
+          <el-upload
+            class="avatar-uploader"
+            accept=".jpg,.png,.jpeg,.gif"
+            :before-upload="beforeUpload"
+            :on-remove="handleRemove"
+            :on-error="uploadError"
+            :on-success="uploadSuccess"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :show-file-list="false"
+            :action="this.api.upload"
+            :data="{
+              quote: form.title,
+              site: '粒子研究院中文站点',
+              uploader: userName
+            }"
+          >
+            <img v-if="form.titleImg" :src="form.titleImg" class="avatar">
+            <div class="uploader-default" v-else>
+              <img class="plus" src="@/assets/img/plus.png" alt="">
+              <p>点击上传</p>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item prop="bannerImg" label="banner图" style="flex: 1;">
+          <el-upload
+            class="avatar-uploader avatar-uploader-lg"
+            accept=".jpg,.png,.jpeg,.gif"
+            :before-upload="beforeUpload"
+            :on-remove="handleRemove"
+            :on-error="uploadError"
+            :on-success="uploadSuccessBanner"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :show-file-list="false"
+            :action="this.api.upload"
+            :data="{
+              quote: form.title,
+              site: '粒子研究院中文站点',
+              uploader: userName
+            }"
+          >
+            <img v-if="form.bannerImg" :src="form.bannerImg" class="avatar">
+            <div class="uploader-default" v-else>
+              <img class="plus" src="@/assets/img/plus.png" alt="">
+              <p>点击上传</p>
+            </div>
+          </el-upload>
+        </el-form-item>
+      </div>
+      <el-form-item prop="articleTemplate" label="独立文章模板">
+        <ul class="styles">
+          <li>
+            <div class="review">
+              <img src="@/assets/img/article2.png" alt="">
+            </div>
+            <el-radio v-model="form.articleTemplate" :label="1">视频详情</el-radio>
+          </li>
+          <li>
+            <div class="review">
+              <img src="@/assets/img/article1.png" alt="">
+            </div>
+            <el-radio v-model="form.articleTemplate" :label="2">富文本</el-radio>
+          </li>
+          <li>
+            <div class="review">
+              <img src="@/assets/img/article3.png" alt="">
+            </div>
+            <el-radio v-model="form.articleTemplate" :label="3">链接</el-radio>
+          </li>
+        </ul>
+      </el-form-item>
+      <template v-if="form.articleTemplate === 1 || form.articleTemplate === 2">
+        <el-form-item prop="mainBody" label="正文">
+          <quill :border="true" v-model="form.mainBody" :height="150" />
+        </el-form-item>
+        <el-form-item prop="mainBody" label="文件上传">
+          <el-upload
+            class="avatar-uploader avatar-uploader-lg"
+            accept=".jpg,.png,.jpeg,.gif"
+            :on-remove="handleRemove"
+            :on-error="uploadError"
+            :on-success="uploadSuccessFile"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :show-file-list="false"
+            :action="this.api.upload"
+            :data="{
+              quote: form.columnName,
+              site: '粒子研究院中文站点',
+              uploader: userName
+            }"
+          >
+            <el-button type="primary">上传</el-button>
+          </el-upload>
+        </el-form-item>
+      </template>
+      <template v-if="form.articleTemplate === 3">
+        <el-form-item prop="connectionType" label="连接类型">
+          <el-radio-group v-model="form.connectionType">
+            <el-radio :label="1">站内链接</el-radio>
+            <el-radio :label="2">站外链接</el-radio>
+            <el-radio :label="3">其他站点链接</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.connectionType === 1" prop="connectionType" label="站内链接">
+          <el-cascader
+            v-model="links"
+            :options="columns"
+            :props="columnProps"
+            clearable></el-cascader>
+        </el-form-item>
+        <el-form-item v-show="form.connectionType === 2" prop="connectionType" label="站内链接">
+          <el-input
+            placeholder="请输入站外链接"
+            v-model.trim="form.linkAddress"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <template v-if="form.connectionType === 3">
+          <el-form-item prop="siteSelection" label="站点选择">
+            <el-select v-model="form.siteSelection">
+              <el-option
+                  v-for="item in sites"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="栏目">
+            <el-cascader
+              v-model="links"
+              :options="columns"
+              :props="columnProps"
+              clearable></el-cascader>
+          </el-form-item>
+        </template>
+      </template>
+      <el-form-item v-show="form.typeId === 4" prop="showWithDetails" label="栏目">
+        <el-switch
+          v-model="form.showWithDetails"
+          :active-value="1"
+          :inactive-value="0">
+        </el-switch>
+      </el-form-item>
+    </el-form>
+    <div class="btns">
+      <el-button type="primary" @click="submit(1)">发布</el-button>
+      <el-button @click="preview">预览</el-button>
+      <el-button v-if="!isEdit" @click="submit(0)">保存草稿</el-button>
+      <el-button @click="$router.back()">取消</el-button>
     </div>
+  </div>
 </template>
 <script>
-import util from "@/libs/util";
+import util from '@/libs/util'
 import ColumnConst from '@/const/column'
 import quill from '@/components/quill'
-import { mapState, mapActions } from "vuex";
+import { mapState } from 'vuex'
 export default {
     data() {
         return {
+          siteId: this.$store.state.content.siteId,
           isEdit: this.$route.query.type === 'edit',
           headers: {},
           nameRepeat: false,
@@ -265,6 +240,7 @@ export default {
           },
           links: [],
           form: {
+            siteId: this.$store.state.content.siteId,
             id: this.$route.query.id || '',
             founderId: +this.$store.state.user.userId,
             editorId: +this.$store.state.user.userId,
@@ -288,6 +264,11 @@ export default {
           updateTime: 0
         };
     },
+    computed: {
+      ...mapState('user', [
+        'userName'
+      ])
+    },
     components: {
       quill
     },
@@ -308,6 +289,7 @@ export default {
       // 获取栏目
       getList() {
         this.$post(this.api.listWithTree, {
+          siteId: this.siteId,
           columnName: '',
           templateId: '',
           typeId	: '',
@@ -332,6 +314,7 @@ export default {
         const { title, level, id } = this.form
         if(title && title !== this.originalName){
           this.$post(this.api.checkIfTheTitleIsRepeat, {
+            siteId: this.siteId,
             title,
             id: id || ''
           }).then(res => {
@@ -346,6 +329,19 @@ export default {
       // 文章类型回调
       typeChange(val) {
 
+      },
+      // 导入前的钩子
+      beforeUpload(file) {
+        const { size, name } = file
+        const ext = name.substring(name.lastIndexOf('.') + 1)
+        if (!util.isImg(ext)) {
+          this.$message.error('请上传图片！')
+          return false
+        }
+        if (size / 1024 / 1024 > 1) {
+          this.$message.error('请上传1M以内的图片！')
+          return false
+        }
       },
       uploadError(err, file, fileList) {
         this.$message({
@@ -364,13 +360,17 @@ export default {
         this.form.columnBanner = ''
       },
       uploadSuccess(res) {
-        this.form.columnBanner = res.data.filesResult.fileUrl
+        this.form.columnBanner = res.data.url
       },
       uploadSuccessBanner(res) {
-        this.form.bannerImg = res.data.filesResult.fileUrl
+        this.form.bannerImg = res.data.url
       },
       uploadSuccessFile(res) {
-        this.form.file	 = res.data.filesResult.fileUrl
+        this.form.file	 = res.data.url
+      },
+      // 预览
+      preview() {
+
       },
       // 提交
       submit(isRelease) {
@@ -432,86 +432,62 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.inline-input {
-    width: 500px;
-}
 $upload-width: 220px;
-$upload-height: 140px;
-$upload-lg-height: 150px;
+$upload-height: 102px;
+$upload-lg-height: 102px;
 /deep/ .avatar-uploader {
-    .el-upload {
-        position: relative;
-        width: $upload-width;
-        height: $upload-height;
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        overflow: hidden;
-
-        &:hover {
-            border-color: #cb221c;
-        }
-
-        .uploader-default {
-            display: flex;
-            height: $upload-height;
-            flex-direction: column;
-            justify-content: center;
-            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-uploader-lg {
-        .el-upload {
-            width: 100%;
-            max-width: 960px;
-            height: $upload-lg-height;
-
-            .uploader-default {
-                height: $upload-lg-height;
-            }
-        }
-    }
-
-    .avatar {
-        display: block;
-        width: $upload-width;
-        height: $upload-height;
+  .el-upload {
+    position: relative;
+    width: $upload-width;
+    height: $upload-height;
+    border: 1px solid #DCDEE0;
+    border-radius: 2px;
+    cursor: pointer;
+    overflow: hidden;
+    .uploader-default {
+      display: flex;
+      height: $upload-height;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      background: #FAFAFA;
+      p {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #333;
+        line-height: 20px;
+      }
     }
+  }
+  &.avatar-uploader-lg {
+    .el-upload {
+      width: 100%;
+      max-width: 820px;
+      height: $upload-lg-height;
 
-    .avatar-lg {
-        display: block;
-        width: 100%;
+      .uploader-default {
         height: $upload-lg-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;
-            }
-        }
+  }
+  .avatar {
+    display: block;
+    width: $upload-width;
+    height: $upload-height;
+  }
+  .avatar-lg {
+    display: block;
+    width: 100%;
+    height: $upload-lg-height;
+  }
+  .el-upload__tip {
+    margin-top: 0;
+    p {
+      font-size: 12px;
+      color: #333;
     }
+  }
 }
 .style-wrap {
   display: flex;
@@ -524,6 +500,16 @@ $upload-lg-height: 150px;
   display: inline-flex;
   li {
     margin-right: 20px;
+    text-align: center;
+    &:hover .review {
+      border-color: #2962FF;
+    }
+  }
+  .review {
+    padding: 18px;
+    margin-bottom: 10px;
+    border: 1px solid #DCDEE0;
+    border-radius: 2px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/article/list/index.vue b/src/pages/article/list/index.vue
index a1060fe..9ce54ea 100644
--- a/src/pages/article/list/index.vue
+++ b/src/pages/article/list/index.vue
@@ -1,192 +1,161 @@
 <template>
-    <div class="flex">
-      <div class="page" style="width: 320px">
-        <div>
-            <div class="flex-between m-b-20">
-                <h6 class="p-title" style="margin-bottom: 0">栏目</h6>
-            </div>
-
-            <div style="height: 504px; max-height: 504px; overflow: auto">
-              <el-tree ref="column" :data="columns" :props="defaultProps" node-key="id" @node-click="columnClick"></el-tree>
-            </div>
-        </div>
+  <div class="flex page">
+    <div style="width: 218px">
+      <p class="page-name mb">全部栏目</p>
+      <div style="height: 504px;overflow: auto">
+        <el-tree ref="column" :data="columns" :props="defaultProps" node-key="id" @node-click="columnClick"></el-tree>
       </div>
-      <div class="page flex-1 m-l-20">
-        <h6 class="p-title">筛选</h6>
-        <div class="tool">
-            <ul class="filter">
-                <li>
-                    <el-input style="width: 250px;" placeholder="请输入文章标题" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
-                </li>
-            </ul>
-            <div>
-                <el-button type="info" v-auth @click="add">新增</el-button>
-                <el-button type="primary" v-auth @click="delAllSelection">批量删除</el-button>
-            </div>
+    </div>
+    <div class="flex-1">
+      <div class="tool">
+        <div class="search-wrap">
+          <el-input placeholder="请输入文章标题" v-model.trim="keyword" clearable @keyup.enter.native="initData"></el-input>
+          <el-button type="primary" @click="initData">查询</el-button>
         </div>
-
-        <el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
-            <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
-            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
-            <el-table-column prop="title" label="标题" align="center" min-width="100"></el-table-column>
-            <el-table-column prop="columnName" label="栏目" align="center" min-width="100"></el-table-column>
-            <el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100"></el-table-column>
-            <el-table-column prop="workNumber" label="状态" align="center" min-width="100">
-              <template slot-scope="scope">
-                {{ scope.row.isRelease ? '已发布' : '草稿' }}
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="300">
-                <template slot-scope="scope">
-                    <el-button v-auth type="text" @click="resetPassword(scope.row)">预览</el-button>
-                    <el-button v-auth type="text" @click="edit(scope.row)">编辑</el-button>
-                    <el-button v-auth type="text" @click="handleDelete(scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+        <div class="actions">
+          <el-button type="primary" @click="add" >新增</el-button>
+          <el-button @click="batchDel">删除</el-button>
         </div>
       </div>
+      <el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id">
+        <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
+        <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+        <el-table-column prop="title" label="标题" align="center" min-width="100"></el-table-column>
+        <el-table-column prop="columnName" label="栏目" align="center" min-width="100"></el-table-column>
+        <el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100"></el-table-column>
+        <el-table-column prop="workNumber" label="状态" align="center" min-width="100">
+          <template slot-scope="scope">
+            {{ scope.row.isRelease ? '已发布' : '草稿' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="300">
+          <template slot-scope="scope">
+            <el-button v-auth type="text" @click="resetPassword(scope.row)">预览</el-button>
+            <el-button v-auth type="text" @click="edit(scope.row)">编辑</el-button>
+            <el-button v-auth type="text" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import util from "@/libs/util";
-import Setting from "@/setting";
-import { mapState } from "vuex";
+import util from '@/libs/util'
 export default {
     data() {
-        return {
-            columns: [],
-            defaultProps: {
-              value: 'id',
-              label: 'columnName'
-            },
-            keyword: "",
-            originForm: {},
-            form: {
-                userName: "",
-                phone: "",
-                uniqueIdentification: "",
-                workNumber: "",
-                email: "",
-                account: "",
-                classId: ""
-            },
-            list: [],
-            page: 1,
-            pageSize: 10,
-            total: 0,
-            multipleSelection: [],
-        };
+      return {
+        columns: [],
+        defaultProps: {
+          value: 'id',
+          label: 'columnName'
+        },
+        keyword: '',
+        list: [],
+        page: 1,
+        pageSize: 10,
+        total: 0,
+        multipleSelection: [],
+      };
     },
     mounted() {
       this.getColumn()
     },
-    watch: {
-        keyword: function(val) {
-            clearTimeout(this.searchTimer);
-            this.searchTimer = setTimeout(() => {
-                if (this.studentType) {
-                    this.initData();
-                } else {
-                    this.getOrgStudentData();
-                }
-
-            }, 500);
-        },
-    },
     methods: {
-        // 栏目树形
-        getColumn() {
-            this.$post(this.api.listWithTree, {
-              columnName: '',
-              templateId: '',
-              typeId	: '',
-            }).then(({ data }) => {
-              this.columns = data
-              this.$nextTick(() => {
-                this.$refs.column.setCurrentKey(data[0].id)
-                this.getData()
-              })
-            }).catch(e => {})
-        },
-        // 栏目点击
-        columnClick(data, node) {
-          this.getData()
-        },
-        // 文章列表
-        getData() {
-          this.$post(this.api.queryArticle, {
-            columnIds: [this.$refs.column.getCurrentKey()],
-            pageNum: this.page,
-            pageSize: this.pageSize,
-            title: this.keyword
-          }).then(({ data }) => {
-            this.list = data.records
-            this.total = +data.total
-          }).catch(err => {})
-        },
-        currentChange(val) { // 切换页码
-            this.page = val;
+      // 栏目树形
+      getColumn() {
+        this.$post(this.api.listWithTree, {
+          siteId: this.$store.state.content.siteId,
+          columnName: '',
+          templateId: '',
+          typeId	: '',
+        }).then(({ data }) => {
+          this.columns = data
+          this.$nextTick(() => {
+            this.$refs.column.setCurrentKey(data[0].id)
             this.getData()
-        },
-        handleSelectionChange(val) { // 多选
-            this.multipleSelection = val;
-        },
-        initData() {
-            this.$refs.table.clearSelection();
-            this.page = 1;
-            this.getData();
-        },
-        delAllSelection() { // 批量删除
-            if (this.multipleSelection.length) {
-                this.$confirm("确定要删除选中用户吗？", "提示", {
-                    type: "warning"
-                }).then(() => {
-                    let ids = this.multipleSelection.map(item => {
-                        return item.accountId;
-                    });
-                    this.$post(`${this.api.delStudent}?accountIds=${ids.toString()}`).then(res => {
-                        this.multipleSelection = [];
-                        this.$refs.table.clearSelection();
-                        util.successMsg("删除成功");
-                        if (this.studentType) {
-                            this.getData();
-                        } else {
-                            this.getOrgStudentData();
-                        }
-                    }).catch(res => {
-                    });
-                    if(this.multipleSelection.length === this.list.length && this.page>1) {
-                        this.handleCurrentChange(this.page - 1)
-                    }
-                }).catch(() => {
-                });
-            } else {
-                util.errorMsg("请先选择数据 ！");
-            }
-        },
-        handleDelete(row) { // 删除
-            this.$confirm("确定要删除吗？", "提示", {
-                type: "warning"
-            }).then(() => {
-                this.$post(`${this.api.deleteArticle}?id=${row.id}`).then(res => {
-                    util.successMsg("删除成功");
-                    this.getData()
-                }).catch(res => {})
-            }).catch(() => {
-            });
-        },
-        // 新增
-        add() {
-          this.$router.push(`add?columnId=${this.$refs.column.getCurrentKey()}`)
-        },
-        // 编辑
-        edit(row) {
-          this.$router.push(`add?id=${row.id}`)
-        },
+          })
+        }).catch(e => {})
+      },
+      // 栏目点击
+      columnClick(data, node) {
+        this.getData()
+      },
+      // 文章列表
+      getData() {
+        this.$post(this.api.queryArticle, {
+          siteId: this.$store.state.content.siteId,
+          columnIds: [this.$refs.column.getCurrentKey()],
+          pageNum: this.page,
+          pageSize: this.pageSize,
+          title: this.keyword
+        }).then(({ data }) => {
+          this.list = data.records
+          this.total = +data.total
+        }).catch(err => {})
+      },
+      currentChange(val) {
+        this.page = val
+        this.getData()
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+      initData() {
+        this.$refs.table.clearSelection()
+        this.page = 1
+        this.getData()
+      },
+      batchDel() { // 批量删除
+          if (this.multipleSelection.length) {
+              this.$confirm("确定要删除选中用户吗？", "提示", {
+                  type: "warning"
+              }).then(() => {
+                  let ids = this.multipleSelection.map(item => {
+                      return item.accountId;
+                  });
+                  this.$post(`${this.api.delStudent}?accountIds=${ids.toString()}`).then(res => {
+                      this.multipleSelection = [];
+                      this.$refs.table.clearSelection();
+                      util.successMsg("删除成功");
+                      if (this.studentType) {
+                          this.getData();
+                      } else {
+                          this.getOrgStudentData();
+                      }
+                  }).catch(res => {
+                  });
+                  if(this.multipleSelection.length === this.list.length && this.page>1) {
+                      this.handleCurrentChange(this.page - 1)
+                  }
+              }).catch(() => {
+              });
+          } else {
+              util.errorMsg("请先选择数据 ！");
+          }
+      },
+      // 删除
+      handleDelete(row) {
+        this.$confirm("确定要删除吗？", "提示", {
+          type: "warning"
+        }).then(() => {
+          this.$post(`${this.api.deleteArticle}?id=${row.id}`).then(res => {
+            util.successMsg("删除成功")
+            this.getData()
+          }).catch(res => {})
+        }).catch(() => {})
+      },
+      // 新增
+      add() {
+        this.$router.push(`add?columnId=${this.$refs.column.getCurrentKey()}`)
+      },
+      // 编辑
+      edit(row) {
+        this.$router.push(`add?id=${row.id}`)
+      },
     }
 };
 </script>
diff --git a/src/pages/column/add/index.vue b/src/pages/column/add/index.vue
index 422d0d2..727fbb1 100644
--- a/src/pages/column/add/index.vue
+++ b/src/pages/column/add/index.vue
@@ -1,252 +1,239 @@
 <template>
-    <div>
-        <el-form>
-            <el-card shadow="hover" class="m-b-20">
-                <div class="flex-between">
-                    <el-page-header @back="goBack" :content="(isEdit ? '更新' : '创建') + '栏目'"></el-page-header>
-                    <div>
-                        <el-button type="primary" @click="submit">{{ form.id ? "更新" : "创建" }}</el-button>
-                    </div>
-                </div>
-            </el-card>
-
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">栏目名称</p>
-                    <el-input
-                        placeholder="请输入栏目名称"
-                        v-model.trim="form.columnName"
-                        clearable
-                        maxlength="15"
-                        class="inline-input"
-                        @change="nameChange"
-                    ></el-input>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">设置上级</p>
-                    <el-cascader
-                      v-model="form.fatherId"
-                      :options="columns"
-                      :props="columnProps"
-                      clearable></el-cascader>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">栏目类型</p>
-                    <div class="inline-input">
-                        <el-select v-model="form.typeId" @change="typeChange">
-                            <el-option
-                                v-for="item in types"
-                                :key="item.id"
-                                :label="item.name"
-                                :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </div>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">分页条数</p>
-                    <el-input
-                        placeholder="请输入分页条数"
-                        v-model.trim="form.pageSize"
-                        maxlength="15"
-                        type="number"
-                        style="width: 150px"
-                    ></el-input>
-                </div>
-            </el-card>
-            <el-card shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">导航菜单可见</p>
-                    <el-switch
-                      v-model="form.menuVisible"
-                      :active-value="0"
-                      :inactive-value="1">
-                    </el-switch>
-                </div>
-            </el-card>
-            <template v-if="form.typeId === 1 || form.typeId === 4">
-              <el-card shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">栏目banner</p>
-                      <el-upload
-                          class="avatar-uploader avatar-uploader-lg"
-                          accept=".jpg,.png,.jpeg,.gif"
-                          :on-remove="handleRemove"
-                          :on-error="uploadError"
-                          :on-success="uploadSuccess"
-                          :before-remove="beforeRemove"
-                          :limit="1"
-                          :on-exceed="handleExceed"
-                          :action="this.api.fileupload"
-                          :headers="headers"
-                          name="file"
-                      >
-                          <img v-if="form.columnBanner" :src="form.columnBanner" class="avatar">
-                          <div class="uploader-default" v-else>
-                              <i class="el-icon-plus"></i>
-                              <p>上传banner</p>
-                          </div>
-                          <div slot="tip" class="el-upload__tip">
-                              <p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p>
-                          </div>
-                      </el-upload>
-                  </div>
-              </el-card>
-              <el-card shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">栏目模板</p>
-                      <el-select v-model="form.templateId">
-                          <el-option
-                              v-for="item in templates"
-                              :key="item.id"
-                              :label="item.name"
-                              :value="item.id">
-                          </el-option>
-                      </el-select>
-                      <div class="style-wrap">
-                        <p class="label">列表样式</p>
-                        <ul class="styles">
-                          <li>
-                            <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
-                          </li>
-                          <li>
-                            <el-radio v-model="form.listStyleId" :label="2">新闻列表</el-radio>
-                          </li>
-                          <li>
-                            <el-radio v-model="form.listStyleId" :label="3">出版物列表</el-radio>
-                          </li>
-                        </ul>
-                      </div>
-                      <div class="style-wrap">
-                        <p class="label">详情样式</p>
-                        <ul class="styles">
-                          <li>
-                            <el-radio v-model="form.detailStyle" :label="1">视频详情</el-radio>
-                          </li>
-                          <li>
-                            <el-radio v-model="form.detailStyle" :label="2">富文本</el-radio>
-                          </li>
-                          <li>
-                            <el-radio v-model="form.detailStyle" :label="3">链接</el-radio>
-                          </li>
-                        </ul>
-                      </div>
-                  </div>
-              </el-card>
-            </template>
-            <template v-if="form.typeId === 2">
-              <el-card shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">连接类型</p>
-                      <el-radio-group v-model="form.connectionType">
-                        <el-radio :label="1">站内链接</el-radio>
-                        <el-radio :label="2">站外链接</el-radio>
-                        <el-radio :label="3">其他站点链接</el-radio>
-                      </el-radio-group>
-                  </div>
-              </el-card>
-              <el-card v-show="form.connectionType === 1" shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">站内链接</p>
-                      <el-cascader
-                        v-model="links"
-                        :options="columns"
-                        :props="columnProps"
-                        clearable></el-cascader>
-                  </div>
-              </el-card>
-              <el-card v-show="form.connectionType === 2" shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">站外链接</p>
-                      <el-input
-                        placeholder="请输入站外链接"
-                        v-model.trim="form.linkAddress"
-                        clearable
-                    ></el-input>
-                  </div>
-              </el-card>
-              <template v-if="form.connectionType === 3">
-                <el-card shadow="hover" class="mgr20 m-b-20">
-                    <div>
-                        <p class="m-b-20">站点选择</p>
-                        <el-select v-model="form.siteSelection">
-                          <el-option
-                              v-for="item in sites"
-                              :key="item.id"
-                              :label="item.name"
-                              :value="item.id">
-                          </el-option>
-                        </el-select>
-                    </div>
-                </el-card>
-                <el-card shadow="hover" class="mgr20 m-b-20">
-                    <div>
-                        <p class="m-b-20">栏目</p>
-                        <el-cascader
-                          :options="links"
-                          :props="{ checkStrictly: true }"
-                          clearable></el-cascader>
-                    </div>
-                </el-card>
-              </template>
-            </template>
-            <template v-if="form.typeId === 3">
-              <el-card shadow="hover" class="mgr20 m-b-20">
-                  <div>
-                      <p class="m-b-20">栏目模板</p>
-                      <el-select v-model="form.templateId">
-                          <el-option
-                              v-for="item in templates"
-                              :key="item.id"
-                              :label="item.name"
-                              :value="item.id">
-                          </el-option>
-                      </el-select>
-                      <div class="style-wrap">
-                        <p class="label">列表样式</p>
-                        <ul class="styles">
-                          <li>
-                            <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
-                          </li>
-                          <li>
-                            <el-radio v-model="form.listStyleId" :label="2">新闻列表</el-radio>
-                          </li>
-                          <li>
-                            <el-radio v-model="form.listStyleId" :label="3">出版物列表</el-radio>
-                          </li>
-                        </ul>
-                      </div>
-                  </div>
-              </el-card>
-            </template>
-            <el-card v-show="form.typeId === 4" shadow="hover" class="mgr20 m-b-20">
-                <div>
-                    <p class="m-b-20">只有一篇文章时，以详情方式展示</p>
-                    <el-switch
-                      v-model="form.showWithDetails"
-                      :active-value="1"
-                      :inactive-value="0">
-                    </el-switch>
-                </div>
-            </el-card>
-        </el-form>
+  <div class="page">
+    <p class="page-name mb">新增栏目</p>
+    <el-form class="input-form model" label-width="100px">
+      <div class="item-line">
+        <el-form-item prop="columnName" label="栏目名称">
+          <el-input
+            placeholder="请输入栏目名称"
+            v-model.trim="form.columnName"
+            clearable
+            maxlength="15"
+            @change="nameChange"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="fatherId" label="设置上级">
+          <el-cascader
+            v-model="form.fatherId"
+            :options="columns"
+            :props="columnProps"
+            clearable></el-cascader>
+        </el-form-item>
+      </div>
+      <div class="item-line">
+        <el-form-item prop="typeId" label="栏目类型">
+          <el-select v-model="form.typeId" @change="typeChange">
+            <el-option
+              v-for="item in types"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="pageSize" label="分页条数">
+          <el-input-number v-model="form.pageSize" :min="0" class="auto"></el-input-number>
+        </el-form-item>
+        <el-form-item prop="menuVisible" label="导航菜单可见">
+          <el-switch
+            v-model="form.menuVisible"
+            :active-value="0"
+            :inactive-value="1">
+          </el-switch>
+        </el-form-item>
+      </div>
+      <div class="line"></div>
+      <template v-if="form.typeId === 1 || form.typeId === 4">
+        <el-form-item prop="columnBanner" label="栏目banner">
+          <el-upload
+            class="avatar-uploader avatar-uploader-lg"
+            accept=".jpg,.png,.jpeg,.gif"
+            :before-upload="beforeUpload"
+            :on-remove="handleRemove"
+            :on-error="uploadError"
+            :on-success="uploadSuccess"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :show-file-list="false"
+            :action="this.api.upload"
+            :data="{
+              quote: form.columnName,
+              site: '粒子研究院中文站点',
+              uploader: userName
+            }"
+          >
+            <img v-if="form.columnBanner" :src="form.columnBanner" class="avatar">
+            <div class="uploader-default" v-else>
+              <img class="plus" src="@/assets/img/plus.png" alt="">
+              <p>点击上传</p>
+            </div>
+            <div slot="tip" class="el-upload__tip">
+              <p>请上传1920x500PX，1M以内的jpg，bmp，png格式</p>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <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">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="listStyleId" label="列表样式">
+          <ul class="styles">
+            <li>
+              <div class="review">
+                <img src="@/assets/img/list1.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
+            </li>
+            <li>
+              <div class="review">
+                <img src="@/assets/img/list2.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="2">新闻列表</el-radio>
+            </li>
+            <li>
+              <div class="review">
+                <img src="@/assets/img/list2.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="3">出版物列表</el-radio>
+            </li>
+          </ul>
+        </el-form-item>
+        <el-form-item prop="detailStyle" label="详情样式">
+          <ul class="styles">
+            <li>
+              <div class="review">
+                <img src="@/assets/img/article1.png" alt="">
+              </div>
+              <el-radio v-model="form.detailStyle" :label="1">视频详情</el-radio>
+            </li>
+            <li>
+              <div class="review">
+                <img src="@/assets/img/article2.png" alt="">
+              </div>
+              <el-radio v-model="form.detailStyle" :label="2">富文本</el-radio>
+            </li>
+            <li>
+              <div class="review">
+                <img src="@/assets/img/article3.png" alt="">
+              </div>
+              <el-radio v-model="form.detailStyle" :label="3">链接</el-radio>
+            </li>
+          </ul>
+        </el-form-item>
+      </template>
+      <template v-if="form.typeId === 2">
+        <el-form-item prop="connectionType" label="连接类型">
+          <el-radio-group v-model="form.connectionType">
+            <el-radio :label="1">站内链接</el-radio>
+            <el-radio :label="2">站外链接</el-radio>
+            <el-radio :label="3">其他站点链接</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.connectionType === 1" label="站内链接">
+          <el-cascader
+            v-model="links"
+            :options="columns"
+            :props="columnProps"
+            clearable></el-cascader>
+        </el-form-item>
+        <el-form-item v-show="form.connectionType === 2" prop="linkAddress" label="站外链接">
+          <el-input
+            placeholder="请输入站外链接"
+            v-model.trim="form.linkAddress"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <template v-if="form.connectionType === 3">
+          <el-form-item prop="siteSelection" label="站点选择">
+            <el-select v-model="form.siteSelection">
+              <el-option
+                v-for="item in sites"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="栏目">
+            <el-cascader
+              :options="links"
+              :props="{ checkStrictly: true }"
+              clearable></el-cascader>
+          </el-form-item>
+        </template>
+        <el-form-item prop="isOpen" label="新窗口打开">
+          <el-switch
+            v-model="form.isOpen"
+            :active-value="1"
+            :inactive-value="0">
+          </el-switch>
+        </el-form-item>
+      </template>
+      <template v-if="form.typeId === 3">
+        <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">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="listStyleId" label="列表样式">
+          <ul class="styles">
+            <li>
+              <div class="review">
+                <img src="@/assets/img/list1.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
+            </li>
+            <li>
+              <div class="review">
+                <img src="@/assets/img/list2.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="2">新闻列表</el-radio>
+            </li>
+            <li>
+              <div class="review">
+                <img src="@/assets/img/list2.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="3">出版物列表</el-radio>
+            </li>
+          </ul>
+        </el-form-item>
+      </template>
+      <el-form-item v-show="form.typeId === 4" prop="showWithDetails" label="只有一篇文章时，以详情方式展示">
+        <el-switch
+          v-model="form.showWithDetails"
+          :active-value="1"
+          :inactive-value="0">
+        </el-switch>
+      </el-form-item>
+    </el-form>
+    <div class="btns">
+      <el-button type="primary" @click="submit(1)">发布</el-button>
+      <el-button @click="preview">预览</el-button>
+      <el-button v-if="!isEdit" @click="submit(0)">保存草稿</el-button>
+      <el-button @click="$router.back()">取消</el-button>
     </div>
+  </div>
 </template>
 <script>
 import util from "@/libs/util";
 import ColumnConst from '@/const/column'
-import { mapState, mapActions } from "vuex";
+import { mapState } from 'vuex'
 export default {
     data() {
         return {
+          siteId: this.$store.state.content.siteId,
           isEdit: this.$route.query.type === 'edit',
-          headers: {},
           nameRepeat: false,
           types: ColumnConst.types,
           templates: ColumnConst.templates,
@@ -259,6 +246,7 @@ export default {
           },
           links: [],
           form: {
+            siteId: this.$store.state.content.siteId,
             id: this.$route.query.id || '',
             founderId: +this.$store.state.user.userId,
             editorId: +this.$store.state.user.userId,
@@ -278,11 +266,17 @@ export default {
             siteSelection: 1,
             status: 1,
             sort: 1,
+            isOpen: 1
           },
           submiting: false, // 新增编辑防抖标识
           updateTime: 0
         };
     },
+    computed: {
+      ...mapState('user', [
+        'userName'
+      ])
+    },
     mounted() {
       this.getList()
       this.isEdit && this.getData()
@@ -300,6 +294,7 @@ export default {
       // 获取栏目列表
       getList() {
         this.$post(this.api.listWithTree, {
+          siteId: this.siteId,
           columnName: '',
           templateId: '',
           typeId	: '',
@@ -320,8 +315,9 @@ export default {
       // 栏目名称判重
       nameChange(){
         const { columnName, level, id } = this.form
-        if(columnName && columnName !== this.originalName){
+        if (columnName && columnName !== this.originalName) {
           this.$post(this.api.sameLevelJudgment, {
+            siteId: this.siteId,
             columnName,
             level: +level,
             id: +id || ''
@@ -337,6 +333,19 @@ export default {
       // 栏目类型回调
       typeChange(val) {
 
+      },
+      // 导入前的钩子
+      beforeUpload(file) {
+        const { size, name } = file
+        const ext = name.substring(name.lastIndexOf('.') + 1)
+        if (!util.isImg(ext)) {
+          this.$message.error('请上传图片！')
+          return false
+        }
+        if (size / 1024 / 1024 > 1) {
+          this.$message.error('请上传1M以内的图片！')
+          return false
+        }
       },
       uploadError(err, file, fileList) {
         this.$message({
@@ -345,9 +354,6 @@ export default {
           center: true
         })
       },
-      beforeRemove(file, fileList) {
-        return this.$confirm(`确定移除 ${file.name}？`);
-      },
       handleExceed(files, fileList) {
         util.errorMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
       },
@@ -355,10 +361,14 @@ export default {
         this.form.columnBanner = ''
       },
       uploadSuccess(res) {
-        this.form.columnBanner = res.data.filesResult.fileUrl
+        this.form.columnBanner = res.data.url
+      },
+      // 预览
+      preview() {
+
       },
       // 提交
-      submit() {
+      submit(status) {
         if (this.submiting) return false
         const { form } = this
         if (!form.columnName) return util.errorMsg('请填写栏目名称')
@@ -371,7 +381,7 @@ export default {
           if (!links.length && form.connectionType === 3) return util.errorMsg('请选择栏目')
           form.linkAddress = links.join()
         }
-        console.log(44, this.links)
+        form.status = status
         this.submiting = true
         if (this.isEdit) {
           delete form.children
@@ -390,112 +400,68 @@ export default {
             this.submiting = false
           })
         }
-      },
-      // 返回上一页
-      backPage() {
-        this.$router.back()
-      },
-      goBack() {
-        const { id } = this.form
-        const { updateTime } = this
-        // 更改了信息才需要提示
-        if ((!this.isEdit && updateTime > 1) || (id && updateTime > 2)) {
-          this.$confirm(`编辑的内容未保存，是否保存？`, '提示', {
-            type: 'warning'
-          }).then(() => {
-            this.submit()
-          }).catch(() => {
-            this.backPage()
-          })
-        } else {
-          this.backPage()
-        }
       }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.inline-input {
-    width: 500px;
-}
 $upload-width: 220px;
-$upload-height: 140px;
-$upload-lg-height: 150px;
+$upload-height: 102px;
+$upload-lg-height: 102px;
 /deep/ .avatar-uploader {
-    .el-upload {
-        position: relative;
-        width: $upload-width;
-        height: $upload-height;
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        overflow: hidden;
-
-        &:hover {
-            border-color: #cb221c;
-        }
-
-        .uploader-default {
-            display: flex;
-            height: $upload-height;
-            flex-direction: column;
-            justify-content: center;
-            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-uploader-lg {
-        .el-upload {
-            width: 100%;
-            max-width: 960px;
-            height: $upload-lg-height;
-
-            .uploader-default {
-                height: $upload-lg-height;
-            }
-        }
-    }
-
-    .avatar {
-        display: block;
-        width: $upload-width;
-        height: $upload-height;
+  .el-upload {
+    position: relative;
+    width: $upload-width;
+    height: $upload-height;
+    border: 1px solid #DCDEE0;
+    border-radius: 2px;
+    cursor: pointer;
+    overflow: hidden;
+    .uploader-default {
+      display: flex;
+      height: $upload-height;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      background: #FAFAFA;
+      p {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #333;
+        line-height: 20px;
+      }
     }
+  }
+  &.avatar-uploader-lg {
+    .el-upload {
+      width: 100%;
+      max-width: 820px;
+      height: $upload-lg-height;
 
-    .avatar-lg {
-        display: block;
-        width: 100%;
+      .uploader-default {
         height: $upload-lg-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;
-            }
-        }
+  }
+  .avatar {
+    display: block;
+    width: $upload-width;
+    height: $upload-height;
+  }
+  .avatar-lg {
+    display: block;
+    width: 100%;
+    height: $upload-lg-height;
+  }
+  .el-upload__tip {
+    margin-top: 0;
+    p {
+      font-size: 12px;
+      color: #333;
     }
+  }
 }
 .style-wrap {
   display: flex;
@@ -508,6 +474,16 @@ $upload-lg-height: 150px;
   display: inline-flex;
   li {
     margin-right: 20px;
+    text-align: center;
+    &:hover .review {
+      border-color: #2962FF;
+    }
+  }
+  .review {
+    padding: 18px;
+    margin-bottom: 10px;
+    border: 1px solid #DCDEE0;
+    border-radius: 2px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/column/list/index.vue b/src/pages/column/list/index.vue
index c13c1c6..4e873fe 100644
--- a/src/pages/column/list/index.vue
+++ b/src/pages/column/list/index.vue
@@ -1,50 +1,83 @@
 <template>
-    <div class="page">
-        <h6 class="p-title">筛选</h6>
-        <div class="tool mul">
-            <ul class="filter">
-                <li>
-                    <el-input placeholder="请输入栏目名称" prefix-icon="el-icon-search" v-model.trim="keyWord" clearable style="width: 300px"></el-input>
-                </li>
-            </ul>
-            <div>
-                <div>
-                    <el-button type="info" round @click="add" >新增</el-button>
-                    <el-button type="primary" round @click="delAllData">批量删除</el-button>
-                </div>
-            </div>
-        </div>
-
-        <el-table v-loading="listLoading" ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
-            <el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column>
-            <el-table-column type="index" width="60" label="序号" align="center">
-                <template slot-scope="scope">
-                    {{ scope.$index + (page - 1) * pageSize + 1 }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="columnName" label="名称"></el-table-column>
-            <el-table-column prop="typeId" label="栏目类型" align="center">
-              <template slot-scope="scope">
-                {{ types.find(e => e.id == scope.row.typeId) && types.find(e => e.id == scope.row.typeId).name }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="templateId" label="栏目模板" align="center"></el-table-column>
-            <el-table-column prop="listStyleId" label="列表/长页样式" align="center"></el-table-column>
-            <el-table-column prop="detailStyle" label="详情样式" align="center"></el-table-column>
-            <el-table-column prop="menuVisible" label="导航菜单" align="center"></el-table-column>
-            <el-table-column prop="id" label="ID" align="center"></el-table-column>
-            <el-table-column label="操作" width="170" align="center">
-                <template slot-scope="scope">
-                  <el-button type="text" @click="edit(scope.row, 'add')">新增下级</el-button>
-                  <el-button type="text" @click="edit(scope.row, 'edit')">编辑</el-button>
-                  <el-button type="text" @click="del(scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
-        </div>
+  <div class="page">
+    <div class="tool">
+      <div class="search-wrap">
+        <el-input placeholder="请输入栏目名称" v-model.trim="keyword" clearable @keyup.enter.native="initData"></el-input>
+        <el-button type="primary" @click="initData">查询</el-button>
+      </div>
+      <div class="actions">
+        <el-button type="primary" @click="add" >新增</el-button>
+        <el-button @click="batchDel">删除</el-button>
+        <el-button class="lg" @click="sort">更改排序</el-button>
+        <el-button class="lg" @click="styleSet">导航样式设置</el-button>
+      </div>
     </div>
+
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" header-align="center" @selection-change="handleSelectionChange" row-key="id">
+      <el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column>
+      <el-table-column prop="columnName" label="名称"></el-table-column>
+      <el-table-column prop="typeId" label="栏目类型">
+        <template slot-scope="scope">
+          {{ types.find(e => e.id == scope.row.typeId) && types.find(e => e.id == scope.row.typeId).name }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="templateId" label="栏目模板"></el-table-column>
+      <el-table-column prop="listStyleId" label="列表/长页样式"></el-table-column>
+      <el-table-column prop="detailStyle" label="详情样式"></el-table-column>
+      <el-table-column prop="menuVisible" label="导航菜单">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.menuVisible"
+            :active-value="0"
+            :inactive-value="1">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column prop="id" label="ID"></el-table-column>
+      <el-table-column label="操作" width="170">
+        <template slot-scope="scope">
+          <el-button type="text" @click="edit(scope.row, 'add')">新增下级</el-button>
+          <el-button type="text" @click="edit(scope.row, 'edit')">编辑</el-button>
+          <el-button type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog title="导航样式设置" :visible.sync="styleVisible" width="850px" :close-on-click-modal="false">
+      <el-form class="input-form" label-width="100px">
+        <el-form-item label="导航样式">
+          <el-select v-model="form.typeId">
+            <el-option
+              v-for="item in styleTypes"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="样式选择">
+          <ul class="styles">
+            <li>
+              <div class="review">
+                <img src="@/assets/img/style1.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="1">竖行导航</el-radio>
+            </li>
+            <li>
+              <div class="review">
+                <img src="@/assets/img/style2.png" alt="">
+              </div>
+              <el-radio v-model="form.listStyleId" :label="2">横向导航</el-radio>
+            </li>
+          </ul>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="styleVisible = false">取 消</el-button>
+        <el-button type="primary" @click="styleSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -55,104 +88,130 @@ export default {
         return {
           types: ColumnConst.types,
           templates: ColumnConst.templates,
-          keyWord: "", // 搜索框筛选条件
+          keyword: '',
           searchTimer: null,
-          page: +this.$route.query.page || 1, // 当前页数
-          pageSize: 10, // 每页10条
-          total: 0, // 总数
-          listData: [], // 表格数据
-          multipleSelection: [], // 多选
-          listLoading:false,// 列表加载
+          list: [],
+          multipleSelection: [],
+          listLoading: false,
+          styleVisible: false,
+          styleTypes: [
+            {
+              id: 1,
+              name: '目录树结构'
+            },
+            {
+              id: 2,
+              name: '分类结构'
+            }
+          ],
+          form: {
+
+          }
         };
     },
-    watch: {
-        keyWord: function(val) {
-            clearTimeout(this.searchTimer);
-            this.searchTimer = setTimeout(() => {
-                this.initData();
-            }, 500);
-        }
-    },
     mounted() {
       this.getData()
     },
     methods: {
-        getData() {
-            this.$post(this.api.listWithTree, {
-              columnName: this.keyWord,
-              templateId: '',
-              typeId	: '',
-            }).then(({ data }) => {
-              this.listData = data
-              this.listLoading = false
-            }).catch(err => {
-              this.listLoading = false
-            })
-        },
-        initData() {
-          this.$refs.table.clearSelection()
-          this.page = 1
-          this.getData()
-        },
-        add() {
-          this.$router.push('add')
-        },
-        edit(row, type) {
-          this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`)
-        },
-        del(row) {
-          this.$confirm("确定要删除吗？", "提示", {
-            type: "warning"
-          }).then(() => {
-            this.$post(`${this.api.deleteColumn}?id=${row.id}`).then(res => {
-              util.successMsg("删除成功")
-              this.getData()
-            }).catch(res => {})
-          }).catch(() => {})
-        },
-        delAllData() {
-            if (this.multipleSelection.length) {
-                let ids = this.multipleSelection.map(item => {
-                    return item.id;
-                });
-                this.$confirm("确定要删除吗？", "提示", {
-                    type: "warning"
-                }).then(() => {
-                    
-                    this.$post(this.api.deleteAssessment, ids).then(res => {
-                        this.multipleSelection = [];
-                        this.$refs.table.clearSelection();
-                        util.successMsg("删除成功");
-                        this.sss = 0
-                        this.getData();
-                    }).catch(res => {
-                    });
-                    if(this.multipleSelection.length === this.listData.length && this.page>1) {
-                        this.handleCurrentChange(this.page - 1)
-                    }
-                }).catch(() => {
-                });
-            } else {
-                util.errorMsg("请先选择数据 ！");
-            }
-        },
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
-        },
-        handleCurrentChange(val) {
-            this.page = val
-            this.$router.push(`list?page=${val}`)
-            this.getData();
-        }
+      getData() {
+        this.$post(this.api.listWithTree, {
+          siteId: this.$store.state.content.siteId,
+          columnName: this.keyword,
+          templateId: '',
+          typeId	: '',
+        }).then(({ data }) => {
+          this.list = data
+          this.listLoading = false
+        }).catch(err => {
+          this.listLoading = false
+        })
+      },
+      initData() {
+        this.$refs.table.clearSelection()
+        this.page = 1
+        this.getData()
+      },
+      add() {
+        this.$router.push('add')
+      },
+      edit(row, type) {
+        this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`)
+      },
+      del(row) {
+        this.$confirm("确定要删除吗？", "提示", {
+          type: "warning"
+        }).then(() => {
+          this.$post(`${this.api.deleteColumn}?id=${row.id}`).then(res => {
+            util.successMsg("删除成功")
+            this.getData()
+          }).catch(res => {})
+        }).catch(() => {})
+      },
+      batchDel() {
+          if (this.multipleSelection.length) {
+              let ids = this.multipleSelection.map(item => {
+                  return item.id;
+              });
+              this.$confirm("确定要删除吗？", "提示", {
+                  type: "warning"
+              }).then(() => {
+                  
+                  this.$post(this.api.deleteAssessment, ids).then(res => {
+                      this.multipleSelection = [];
+                      this.$refs.table.clearSelection();
+                      util.successMsg("删除成功");
+                      this.sss = 0
+                      this.getData();
+                  }).catch(res => {
+                  });
+                  if(this.multipleSelection.length === this.list.length && this.page>1) {
+                      this.handleCurrentChange(this.page - 1)
+                  }
+              }).catch(() => {
+              });
+          } else {
+              util.errorMsg("请先选择数据 ！");
+          }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+      handleCurrentChange(val) {
+        this.page = val
+        this.$router.push(`list?page=${val}`)
+        this.getData()
+      },
+      // 更改排序
+      sort() {
+
+      },
+      // 导航样式设置
+      styleSet() {
+        this.styleVisible = true
+      },
+      // 导航样式提交
+      styleSubmit() {
+        
+      }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.el-radio-group {
-    white-space: nowrap;
-}
-.el-radio.is-bordered + .el-radio.is-bordered {
-    margin-left: 0;
+.styles {
+  display: inline-flex;
+  li {
+    margin-right: 20px;
+    text-align: center;
+    &:hover .review {
+      border-color: #2962FF;
+    }
+  }
+  .review {
+    padding: 18px;
+    margin-bottom: 10px;
+    border: 1px solid #DCDEE0;
+    border-radius: 2px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/page/list/index.vue b/src/pages/page/list/index.vue
index a23238b..5ccae21 100644
--- a/src/pages/page/list/index.vue
+++ b/src/pages/page/list/index.vue
@@ -1,81 +1,91 @@
 <template>
-    <div class="page">
-        <h6 class="p-title">筛选</h6>
-        <div class="tool mul">
-            <ul class="filter">
-                <li>
-                    <el-input placeholder="请输入栏目或模板名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable style="width: 300px"></el-input>
-                </li>
-            </ul>
-            <div>
-                <div>
-                    <!-- <el-button v-auth type="info" round @click="add" >创建考核</el-button>
-                    <el-button v-auth type="primary" round @click="delAllData">批量删除</el-button> -->
-                </div>
-            </div>
-        </div>
+  <div class="page">
+    <div class="tool">
+      <p class="page-name">长页栏目列表</p>
+      <div class="search-wrap">
+        <el-input placeholder="请输入栏目或模板名称" v-model.trim="keyword" clearable @keyup.enter.native="initData"></el-input>
+        <el-button type="primary" @click="initData">查询</el-button>
+      </div>
+    </div>
 
-        <el-table ref="table" :data="list" class="table" stripe header-align="center" row-key="id">
-            <el-table-column type="selection" :selectable="row => row.status !== 1" width="50" align="center" :reserve-selection="true"></el-table-column>
-            <el-table-column type="index" width="60" label="序号" align="center">
-                <template slot-scope="scope">
-                    {{ scope.$index + (pageNum - 1) * pageSize + 1 }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="createTime" label="长页栏目名称" align="center"></el-table-column>
-            <el-table-column prop="createTime" label="模板名称" align="center"></el-table-column>
-            <el-table-column prop="createTime" label="上级栏目" align="center"></el-table-column>
-            <el-table-column prop="createTime" label="最近编辑" align="center"></el-table-column>
-            <el-table-column prop="createTime" label="编辑人" align="center"></el-table-column>
-            <el-table-column label="操作" width="170" align="center">
-                <template slot-scope="scope">
-                  <el-button type="text" @click="start(scope.row)">预览</el-button>
-                  <el-button type="text" @click="start(scope.row)">编辑</el-button>
-                  <el-button type="text" @click="start(scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="pageNum"></el-pagination>
-        </div>
+    <el-table ref="table" :data="list" class="table" header-align="center" row-key="id">
+      <el-table-column type="index" width="60" label="序号" align="center">
+        <template slot-scope="scope">
+          {{ scope.$index + (page - 1) * pageSize + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="columnName" label="长页栏目名称" align="center"></el-table-column>
+      <el-table-column prop="articleTemplate" label="模板名称" align="center"></el-table-column>
+      <el-table-column prop="columnName" label="上级栏目" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.parents }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
+      <el-table-column prop="updateTime" label="最近编辑" align="center"></el-table-column>
+      <el-table-column prop="editorName" label="编辑人" align="center"></el-table-column>
+      <el-table-column label="操作" width="170" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="start(scope.row)">预览</el-button>
+          <el-button type="text" @click="start(scope.row)">编辑</el-button>
+          <el-button type="text" @click="start(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
     </div>
+  </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import util from "@/libs/util";
 export default {
     data() {
-        return {
-          keyword: '',
-          pageNum: +this.$route.query.page || 1, // 当前页数
-          pageSize: 10, // 每页10条
-          total: 0, // 总数
-          list: []
-        };
-    },
-    watch: {
-        keyword: function(val) {
-            clearTimeout(this.searchTimer);
-            this.searchTimer = setTimeout(() => {
-                this.initData();
-            }, 500);
-        }
+      return {
+        keyword: '',
+        page: +this.$route.query.page || 1,
+        pageSize: 10,
+        total: 0,
+        list: []
+      };
     },
     mounted() {
-      
+      this.getData()
     },
     methods: {
-        handleCurrentChange(val) {
-            this.page = val
-            // this.getData();
-        },
-        add() {
-            this.$router.push("add");
-        },
-        edit(row) {
-            this.$router.push(`add?id=${row.id}`);
-        },
+      // 列表
+      getData() {
+        this.$post(this.api.longPageColumnList, {
+          siteId: this.$store.state.content.siteId,
+          pageNum: this.page,
+          pageSize: this.pageSize,
+          title: this.keyword
+        }).then(({ data }) => {
+          const list = data.records
+          list.map(e => {
+            // 上级栏目
+            e.parents = e.superiorColumn ?
+              e.superiorColumn.map(n => n.columnName).join(' / ') :
+              '--'
+          })
+          this.list = list
+          this.total = +data.total
+        }).catch(err => {})
+      },
+      initData() {
+        this.page = 1
+        this.getData()
+      },
+      handleCurrentChange(val) {
+        this.page = val
+        this.getData()
+      },
+      add() {
+        this.$router.push("add");
+      },
+      edit(row) {
+        this.$router.push(`add?id=${row.id}`);
+      }
     }
 };
 </script>
diff --git a/src/pages/site/list/index.vue b/src/pages/site/list/index.vue
index 50aa572..c5d2582 100644
--- a/src/pages/site/list/index.vue
+++ b/src/pages/site/list/index.vue
@@ -1,73 +1,69 @@
 <template>
-    <div class="page">
-        <h6 class="p-title">筛选</h6>
-        <div class="tool mul">
-            <ul class="filter">
-                <li>
-                    <el-input placeholder="请输入站点名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable style="width: 300px"></el-input>
-                </li>
-            </ul>
-        </div>
+  <div class="page">
+    <div class="tool">
+      <p class="page-name">站点列表</p>
+      <div class="search-wrap">
+        <el-input placeholder="请输入站点名称" v-model.trim="keyword" clearable @keyup.enter.native="getData"></el-input>
+        <el-button type="primary" @click="getData">查询</el-button>
+      </div>
+    </div>
 
-        <el-table ref="table" :data="list" class="table" stripe header-align="center" row-key="id">
-            <el-table-column type="index" width="60" label="序号" align="center">
-                <template slot-scope="scope">
-                    {{ scope.$index + (page - 1) * pageSize + 1 }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="name" label="站点名称" align="center"></el-table-column>
-            <el-table-column prop="domain" label="域名" align="center"></el-table-column>
-            <el-table-column label="操作" width="170" align="center">
-                <template slot-scope="scope">
-                  <el-button type="text" @click="toIndex(scope.row)">前往网站首页</el-button>
-                  <el-button type="text" @click="content(scope.row)">内容管理</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
-        </div>
+    <el-table ref="table" :data="list" class="table" header-align="center" row-key="id">
+      <el-table-column type="index" width="60" label="序号" align="center">
+        <template slot-scope="scope">
+          {{ scope.$index + (page - 1) * pageSize + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="站点名称" align="center"></el-table-column>
+      <el-table-column prop="domain" label="域名" align="center"></el-table-column>
+      <el-table-column label="操作" width="170" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="toIndex(scope.row)">前往网站首页</el-button>
+          <el-button type="text" @click="content(scope.row)">内容管理</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
     </div>
+  </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import util from "@/libs/util";
+import { mapMutations } from 'vuex'
 export default {
     data() {
-        return {
-          keyword: '',
-          page: +this.$route.query.page || 1, // 当前页数
-          pageSize: 10, // 每页10条
-          total: 0, // 总数
-          list: [
-            {
-              id: 1,
-              name: '粒子研究院中文站点',
-              domain: 'www.iasf.ac.cn'
-            },
-            {
-              id: 2,
-              name: '粒子研究院英文文站点',
-              domain: 'www.iasf.ac.en'
-            }
-          ]
-        };
-    },
-    watch: {
-        keyword: function(val) {
-            clearTimeout(this.searchTimer);
-            this.searchTimer = setTimeout(() => {
-                this.initData();
-            }, 500)
-        }
+      return {
+        keyword: '',
+        page: +this.$route.query.page || 1, // 当前页数
+        pageSize: 10, // 每页10条
+        total: 2, // 总数
+        list: [
+          {
+            id: 1,
+            name: '粒子研究院中文站点',
+            domain: 'www.iasf.ac.cn'
+          },
+          {
+            id: 2,
+            name: '粒子研究院英文文站点',
+            domain: 'www.iasf.ac.en'
+          }
+        ]
+      };
     },
     mounted() {
       
     },
     methods: {
+      ...mapMutations('content', [
+        'setSiteId'
+      ]),
+      getData() {
+
+      },
       handleCurrentChange(val) {
-          this.page = val
+        this.page = val
       },
       // 前往网站首页
       toIndex(row) {
@@ -75,6 +71,7 @@ export default {
       },
       // 内容管理
       content(row) {
+        this.setSiteId(row.id)
         this.$router.push(`/page`)
       },
     }
diff --git a/src/plugins/requests/index.js b/src/plugins/requests/index.js
index 4fee956..c209ef2 100644
--- a/src/plugins/requests/index.js
+++ b/src/plugins/requests/index.js
@@ -112,7 +112,7 @@ function post(url, params) {
 function del(url, params) {
     return new Promise((resolve, reject) => {
         service.delete(url, {
-            params
+          data: params
         }).then(res => {
             resolve(res);
         }).catch(err => {
diff --git a/src/router/modules/annex.js b/src/router/modules/annex.js
new file mode 100644
index 0000000..4528d9e
--- /dev/null
+++ b/src/router/modules/annex.js
@@ -0,0 +1,23 @@
+import BasicLayout from '@/layouts/home'
+
+const meta = {}
+
+const pre = 'annex-'
+
+export default {
+  path: '/annex',
+  name: 'annex',
+  redirect: {
+      name: `${pre}list`
+  },
+  meta,
+  component: BasicLayout,
+  children: [
+    {
+      name: `${pre}list`,
+      path: `list`,
+      component: () => import('@/pages/annex/list'),
+      meta: { title: '栏目管理' }
+    }
+  ]
+}
diff --git a/src/store/modules/content.js b/src/store/modules/content.js
new file mode 100644
index 0000000..201b6db
--- /dev/null
+++ b/src/store/modules/content.js
@@ -0,0 +1,17 @@
+/**
+ * 内容管理
+ * */
+ export default {
+  namespaced: true,
+  state: {
+    siteId: ''
+  },
+  mutations: {
+    setSiteId: (state, siteId) => {
+      state.siteId = siteId
+    }
+  },
+  actions: {
+    
+  }
+};
\ No newline at end of file
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index a6e243f..e509fd0 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -10,29 +10,29 @@ import addRoutes from "@/libs/route/addRoutes";
 export default {
     namespaced: true,
     state: {
-        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
-        userId: '',
-        userName: '',
+      avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      userId: '',
+      userName: '',
     },
     mutations: {
-        SET_AVATAR: (state, avatar) => {
-          state.avatar = avatar
-        },
-        SET_USERID: (state, userId) => {
-          state.userId = userId
-        },
-        SET_USERNAME: (state, userName) => {
-          state.userName = userName
-        },
+      SET_AVATAR: (state, avatar) => {
+        state.avatar = avatar
+      },
+      SET_USERID: (state, userId) => {
+        state.userId = userId
+      },
+      SET_USERNAME: (state, userName) => {
+        state.userName = userName
+      }
     },
     actions: {
-        logout({ commit, state, dispatch }) {
-            return new Promise((resolve, reject) => {
-                util.local.remove(Setting.storeKey);
-                util.local.remove(Setting.tokenKey);
-                location.reload()
-                resolve();
-            });
-        }
+      logout({ commit, state, dispatch }) {
+        return new Promise((resolve, reject) => {
+          util.local.remove(Setting.storeKey)
+          util.local.remove(Setting.tokenKey)
+          location.reload()
+          resolve()
+        })
+      }
     }
 };
\ No newline at end of file
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 9c7ad4a..17c7262 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -27,28 +27,11 @@
   justify-content: space-between;
   align-items: center;
 }
-
-.el-button--primary.action-btn {
-  color: $--color-primary !important;
-  font-size: 14px !important;
-  background-color: #fff !important;
-  border-radius: 4px !important;
-}
-
-.el-button--info.action-btn {
-  color: #fff !important;
-  font-size: 14px !important;
-  background-color: $--color-primary !important;
-  border-radius: 4px !important;
-  border: none;
-}
-
 .el-input {
   .el-input__inner {
-    border-color: rgba(0, 0, 0, 0.15);
+    border-color: #DCDEE0;
   }
 }
-
 .p-title {
   padding-left: 5px;
   margin-bottom: 24px;
@@ -60,21 +43,24 @@
 
 .page {
   position: relative;
-  padding: 24px;
+  padding: 16px 20px;
   background-color: #fff;
-  border-radius: 8px;
-
+  .page-name {
+    font-size: 14px;
+    color: #333;
+    &.mb {
+      margin-bottom: 16px;
+    }
+  }
   .tool {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 24px;
-
     .filter {
       display: inline-flex;
-      //flex-wrap: wrap;
       align-items: center;
       flex: 1;
-
       li {
         display: inline-flex;
         align-items: center;
@@ -89,15 +75,6 @@
         }
       }
     }
-
-    .el-button--primary {
-      @extend .action-btn;
-    }
-
-    .el-button--info {
-      @extend .action-btn;
-    }
-
     &.mul {
       margin-bottom: 0;
 
@@ -111,7 +88,61 @@
     }
   }
 }
-
+.search-wrap {
+  display: flex;
+  .el-input__inner {
+    border-radius: 0;
+    border-right: 0;
+  }
+  .el-button {
+    border-radius: 0;
+  }
+}
+.actions, .btns, .el-dialog__footer {
+  .el-button {
+    width: 80px;
+    padding: 8px 0;
+    font-size: 14px;
+    border-radius: 2px;
+    &.lg {
+      width: 100px;
+    }
+  }
+}
+.input-form {
+  &.model {
+    height: calc(100vh - 278px);
+    padding-right: 20px;
+    overflow: auto;
+  }
+  .item-line {
+    display: flex;
+    justify-content: space-between;
+  }
+  .line {
+    margin-bottom: 24px;
+    border-bottom: 1px dashed #C2C2C2;
+  }
+  .el-form-item--small.el-form-item {
+    margin-bottom: 24px;
+  }
+  .el-input, .el-select {
+    width: 300px;
+  }
+  .auto, .auto .el-input {
+    width: auto;
+  }
+}
+.btns {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 14px 0;
+  text-align: center;
+  background-color: #fff;
+  box-shadow: 4px -2px 6px 0px rgba(198,198,198,0.3500);
+}
 .pagination {
   margin: 20px 0;
   text-align: center;
@@ -119,7 +150,7 @@
   button, .number {
     color: rgba(0, 0, 0, .65) !important;
     background-color: transparent !important;
-    border: 1px solid rgba(0, 0, 0, 0.15) !important;
+    border: 1px solid #DCDEE0 !important;
     border-radius: 4px !important;
   }
 
@@ -134,25 +165,24 @@
 }
 
 .el-table {
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
   border-bottom: 0;
-
   .cell {
     font-size: 12px;
+    color: #333;
     line-height: 35px;
   }
-
   th {
-    background: $--color-primary !important;
-
+    background: #F7F7F7 !important;
     .cell {
-      color: #fff;
-      font-size: 14px;
+      color: #323232;
+      font-size: 12px;
       font-weight: normal;
     }
   }
 }
+.el-table th.is-leaf, .el-table td {
+  border-bottom-color: #EBEDF0;
+}
 
 .tabs {
   display: flex;
@@ -226,7 +256,6 @@
     }
   }
 }
-
 .el-message-box {
   padding-bottom: 24px;
 
@@ -272,33 +301,22 @@
 
   }
 }
-
 .el-dialog__wrapper {
   .el-dialog {
     border-radius: 4px;
-
     .el-dialog__header {
       border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-
       .el-dialog__title {
         font-size: 16px;
         color: rgba(0, 0, 0, 0.85);
       }
     }
-
     .el-dialog__footer {
       padding: 10px 16px;
       border-top: 1px solid rgba(0, 0, 0, 0.06);
-
-      .el-button {
-        font-size: 14px;
-        border-radius: 4px;
-        border-color: rgba(0, 0, 0, 0.15);
-      }
     }
   }
 }
-
 .upload-wrap {
   position: relative;
   display: flex;