上传代码

3 years ago · bd19571934
parent 343e29dca9
commit bd19571934
55 changed files with 29873 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,45 @@
+{
+  "name": "mange",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.20.0",
+    "core-js": "^3.6.5",
+    "drag-tree-table": "^2.1.0",
+    "element-ui": "^2.13.2",
+    "global": "^4.4.0",
+    "lib-flexible": "^0.3.2",
+    "moment": "^2.27.0",
+    "normalize.css": "^8.0.1",
+    "sortable.js": "^0.3.0",
+    "vue": "^2.6.11",
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^3.2.0",
+    "vue-video-player": "^5.0.2",
+    "vuedraggable": "^2.24.1",
+    "vuex": "^3.4.0",
+    "wangeditor": "^3.1.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.4.0",
+    "@vue/cli-plugin-eslint": "^4.4.0",
+    "@vue/cli-plugin-router": "^4.4.0",
+    "@vue/cli-plugin-vuex": "^4.4.0",
+    "@vue/cli-service": "^4.4.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "node-sass": "^6.0.1",
+    "postcss-loader": "^4.0.4",
+    "postcss-px2rem": "^0.3.0",
+    "sass-loader": "^12.3.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
--- a/public/2.png
+++ b/public/2.png
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./2.png">
+    <title>后台管理系统</title>
+    <!-- <link rel="stylesheet" href="../src/assets/fonts/font.css"> -->
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="less">
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
--- a/src/apis/request.js
+++ b/src/apis/request.js
@ -0,0 +1,283 @@
+import axios from 'axios';
+//基础地址
+// axios.defaults.baseURL='http://139.9.247.137/msdw';
+// axios.defaults.baseURL='https://www.feifanhitech.com/msdw';
+// axios.defaults.baseURL='http://www.zxyicloud.com/msdw';
+axios.defaults.baseURL='http://47.107.237.129/msdw';
+
+//token为登录时，账号密码正确，服务端res中的数据
+//joggle为上传文件地址
+// export  const joggle='https://www.feifanhitech.com/msdw/aliyun/uploadFiles';
+// export  const joggle='http://www.zxyicloud.com/msdw/aliyun/uploadFiles';
+export  const joggle='http://47.107.237.129/msdw/aliyun/uploadFiles';
+axios.interceptors.request.use((req)=>{
+    // console.log('请求拦截器拦截的数据：req',req)
+    const token = sessionStorage.getItem('token');
+    if(token){//给所有需要token的接口统一在请求头上添加token
+        req.headers.token = token;
+    }
+    return req;
+});
+//获取栏目信息，未被删除的
+export function allColumn(){
+    return axios.get('/column/column'
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//修改栏目信息
+export function editColumn(parms){
+    return axios.post('/column/column/modify',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//新增栏目信息
+export function addColumn(parms){
+    return axios.put('/column/column',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//删除栏目信息
+export function deleteColumn(parms){
+    return axios.delete('/column/carouse/'+parms,
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//根据一个或多个id查找栏目数据
+export function returnColumn(parms){
+    return axios.get('/column/'+parms,
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//更新栏目排序
+export function sortColumn(parms){
+    return axios.post('/column/sorting',parms
+    ).then(res=>{
+        return res.data
+    });
+}
+/*上传文件
+// export function uploadimg(parms){
+//     return axios.post('/upload/uploadImage',parms
+//     ).then(res=>{
+//         return res.data.data
+//     });
+// }
+*/
+//查看该栏目下的文章详情
+export function getColumnarticle(parms,pangNum){
+    return axios.get('/column/column/'+parms+'?pangNum='+pangNum,
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//该id栏目下的所有文章，管理系统
+export function getColumnallarticle(params){
+    return axios.get('/column/column/all/'+params,
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//修改文章
+export function keepOreder(parms){
+    return axios.put('/article/article',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//删除二级栏目文章
+export function deleteArticle(parms){
+    return axios.delete('/article/article/'+parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//修改文章
+export function editArticle(parms){
+    return axios.put('/article/article',parms
+    ).then(res=>{
+        return res.data
+    });
+}
+//新增文章
+export function addArticle(parms){
+    return axios.post('/article/articles',
+        parms
+    ).then(res=>{
+        return res.data
+    });
+}
+//获取主页上各部分id，根据id查询各部分的详情
+export function getHomecolumn(){
+    return axios.get('/homepage/getAllPage'
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//根据id查找图片
+export function getHomebanner(parms){
+    return axios.get('/img/images/'+parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//新增图片信息
+export function postHomebanner(parms){
+    return axios.post('/img/images',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//根据传入id查询轮播图信息
+export function getHomecarouse(parms){
+    return axios.get('/carouse/carouse/'+parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//增加轮播图
+export function addHomecarouse(parms){
+    return axios.put('/carouse/carouses',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//删除carouse
+export function deleteHomecarouse(parms){
+    return axios.delete('/carouse/carouses/'+parms
+    ).then(res=>{
+        return res.data
+    });
+}
+//轮播图排序接口
+export function Homecarousesort(parms){
+    return axios.post('/carouse/sorting',parms
+    ).then(res=>{
+        return res.data
+    });
+}
+//修改轮播图信息
+export function Homecarouseedit(parms){
+    return axios.post('/carouse/modify',parms
+    ).then(res=>{
+        return res.data
+    });
+}
+//根据id查找链接
+export function getHomelinks(parms){
+    return axios.get('/link/'+parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//修改链接
+export function editHomelinks(parms){
+    return axios.post('/link',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//根据id查找标题
+export function getHomeheadline(parms){
+    return axios.get('/headline/'+parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//新增一个标题
+export function addHomeheadline(parms){
+    return axios.put('/headline/headlines',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//获取所有未被删除的分类
+export function getHomeclassify(){
+    return axios.get('/classify/classifies'
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//添加分类
+export function addHomeclassify(parms){
+    return axios.post('/classify/classifies/add',parms
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//获取所有友情链接，未被删除的is——show
+export function getHomefriendlink(){
+    return axios.get('/friendshipLink/getAll'
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//新增一条友情链接
+export function addHomefriendlink(params){
+    return axios.put('/friendshipLink/addOne',params
+    ).then(res=>{
+        return res.data
+    });
+}
+//修改多条友情链接
+export function modifyHomefriendlink(params){
+    return axios.post('/friendshipLink/modify',params
+    ).then(res=>{
+        return res.data
+    });
+}
+//修改分类信息
+export function modifyHomeclassify(params){
+    return axios.post('/classify/classify',params
+    ).then(res=>{
+        return res.data
+    });
+}
+//新增一个主页
+export function addHomepage(params){
+    return axios.put('/homepage/homepage',params
+    ).then(res=>{
+        return res.data
+    });
+}
+//管理员登录接口
+export function login(params){
+    return axios.post('/admin/login',
+        params
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//管理员修改密码
+export function adminChangepwd(params){
+    return axios.post('/admin/change',
+        params
+    ).then(res=>{
+        return res.data
+    });
+}
+//获取所有友情链接分类以及子级信息
+export function getHomelink(){
+    return axios.get('/friendshipLink/friendshipLinkGet/all'
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//删除友情链接，删除未传入的
+export function deleteHomelink(params){
+    return axios.delete('/friendshipLink/deleteFriend/'+params,
+    ).then(res=>{
+        return res.data.data
+    });
+}
+//删除分类，传入的不删
+export function deleteHomeclassify(params){
+    return axios.delete('/classify/classifies/'+params,
+    ).then(res=>{
+        return res.data.data
+    });
+}
--- a/src/assets/images/12.png
+++ b/src/assets/images/12.png
--- a/src/assets/images/2.png
+++ b/src/assets/images/2.png
--- a/src/assets/images/btn_close_hover.png
+++ b/src/assets/images/btn_close_hover.png
--- a/src/assets/images/btn_notvisule_n.png
+++ b/src/assets/images/btn_notvisule_n.png
--- a/src/assets/images/btn_pic_1.png
+++ b/src/assets/images/btn_pic_1.png
--- a/src/assets/images/btn_pic_2.png
+++ b/src/assets/images/btn_pic_2.png
--- a/src/assets/images/btn_pic_3.png
+++ b/src/assets/images/btn_pic_3.png
--- a/src/assets/images/btn_pic_4.png
+++ b/src/assets/images/btn_pic_4.png
--- a/src/assets/images/btn_visule_n.png
+++ b/src/assets/images/btn_visule_n.png
--- a/src/assets/images/icon.png
+++ b/src/assets/images/icon.png
--- a/src/assets/images/icon_link.png
+++ b/src/assets/images/icon_link.png
--- a/src/assets/images/icon_list.png
+++ b/src/assets/images/icon_list.png
--- a/src/assets/images/icon_msg_.png
+++ b/src/assets/images/icon_msg_.png
--- a/src/assets/images/icon_submenu_black.png
+++ b/src/assets/images/icon_submenu_black.png
--- a/src/assets/images/icon_submenu_blue.png
+++ b/src/assets/images/icon_submenu_blue.png
--- a/src/assets/images/icon_submenu_white.png
+++ b/src/assets/images/icon_submenu_white.png
--- a/src/assets/images/leftbar_icon_home_blue.png
+++ b/src/assets/images/leftbar_icon_home_blue.png
--- a/src/assets/images/leftbar_icon_home_white.png
+++ b/src/assets/images/leftbar_icon_home_white.png
--- a/src/assets/images/leftbar_icon_index_blue.png
+++ b/src/assets/images/leftbar_icon_index_blue.png
--- a/src/assets/images/leftbar_icon_index_white.png
+++ b/src/assets/images/leftbar_icon_index_white.png
--- a/src/assets/images/leftbar_icon_messages_blue.png
+++ b/src/assets/images/leftbar_icon_messages_blue.png
--- a/src/assets/images/leftbar_icon_messages_white.png
+++ b/src/assets/images/leftbar_icon_messages_white.png
--- a/src/assets/images/login.jpg
+++ b/src/assets/images/login.jpg
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/university.jpg
+++ b/src/assets/images/university.jpg
--- a/src/assets/images/无数据.png
+++ b/src/assets/images/无数据.png
--- a/src/assets/images/隐藏.png
+++ b/src/assets/images/隐藏.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/common.less
+++ b/src/assets/styles/common.less
@ -0,0 +1,18 @@
+html,body,#app{
+    height: 100%;
+}
+#app{
+    text-align: left;
+    font-family: 'Source Han Sans CN';
+}
+p,h3{
+    margin: 0;
+    padding: 0;
+}
+img{
+    vertical-align: middle;
+}
+.container{
+    width: 1200px;
+    margin: 0 auto;
+}
--- a/src/components/Childmenu.vue
+++ b/src/components/Childmenu.vue
@ -0,0 +1,82 @@
+<template>
+  <div class="menu-tree">
+    <label v-for="list in dataList" :key="list.id">
+      <!-- 如果栏目深度不等于零，则迭代组件child进行显示，否则只显示一项 -->
+      <el-submenu :index="list.id" v-if="list.children.length != 0">
+        <template slot="title">
+           <img src="../assets/images/icon_submenu_blue.png" v-if="$route.params.id==list.id" alt="">
+           <img src="../assets/images/icon_submenu_black.png" v-else alt="" >  
+           <span :class="{acitive:$route.params.id==list.id}">{{ list.columnName }}</span>
+        </template>
+        <label>
+          <Child :dataList="list.children"></Child>
+        </label>
+      </el-submenu>
+      <!-- 最深的栏目项目 -->
+      <el-menu-item v-else :index="list.id" @click="getColumnmessage(list.id)">
+       <img src="../assets/images/icon_submenu_blue.png" v-if="$route.params.id==list.id" alt="">
+       <img src="../assets/images/icon_submenu_black.png" v-else alt="" ><span slot="title">{{ list.columnName }}</span>
+      </el-menu-item>
+    </label>
+  </div>
+</template>
+
+<script>
+import { getColumnarticle } from "@/apis/request.js";
+import { returnColumn } from "@/apis/request.js";
+
+export default {
+  name: "Child",
+  props: ["dataList"],//父传子获取
+
+  data() {
+    return {
+      id: 12,
+    };
+  },
+  methods: {
+    getColumnmessage(id) {
+      this.id = id;
+        this.$store.state.columnid = id;
+          localStorage.setItem('columnid',id)
+          this.$router.push({
+        path:
+         '/home/contentmange/' + id,
+      });
+          returnColumn(id).then(res=>{
+         this.$store.state.styleType=res[0].styleType;
+            localStorage.setItem(
+                    "style",
+                    res[0].styleType
+                  );
+       
+      })
+      getColumnarticle(id,1).then((res) => {
+        this.$store.state.article = res.list;
+         this.$store.state.total=res.total
+      });
+    
+      console.log(id);
+    },
+
+  },
+};
+</script>
+<style lang="less" scoped>
+.el-menu-item{
+font-family: 'Source Han Sans CN';
+}
+.el-submenu__title{
+  font-family:'Source Han Sans CN' ;
+}
+img{
+  // margin-top: 2px;
+  // display: inline-block;
+  margin-right: 4px;
+  margin-bottom: -3px;
+  
+}
+.acitive{
+  color: #409EFF;
+}
+</style>
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@ -0,0 +1,96 @@
+<template>
+  <div class="left-menu">
+    <ul>
+      <li
+        @click="link('/home/homemange')"
+        :class="{ active: $route.path.indexOf('/home/homemange')>-1   ? true : false }">
+      
+       <img  src="../assets/images/leftbar_icon_home_white.png" alt="" v-if="$route.path.indexOf('/home/homemange')>-1">
+        <img  src="../assets/images/leftbar_icon_home_blue.png" alt="" v-else>  
+         首页管理
+      </li>
+      <li
+        @click="link('/home/columnmange')"
+        :class="{ active: $route.path.indexOf('/home/columnmange')>-1 ? true : false }"
+      >
+        <img  src="../assets/images/leftbar_icon_index_white.png" alt="" v-if="$route.path.indexOf('/home/columnmange')>-1">
+       <img  src="../assets/images/leftbar_icon_index_blue.png" alt="" v-else>
+     
+       栏目管理
+      </li>
+      <li
+        @click="link('/home/contentmange/')"
+        :class="{
+          active: address.indexOf('/home/contentmange/') > -1 ? true : false,
+        }"
+      >   <img  src="../assets/images/leftbar_icon_messages_white.png" alt="" v-if="$route.path.indexOf('/home/contentmange/')>-1">
+          <img  src="../assets/images/leftbar_icon_messages_blue.png" alt="" v-else>
+       
+          内容管理
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { allColumn } from "@/apis/request.js";//导入所有栏目名
+export default {
+  data() {
+    return {
+      address: "/home/homemange",
+    };
+  },
+  methods: {
+    link(a) {
+      if (a == "/home/contentmange/") {//如果页面是内容管理，
+        allColumn().then((res) => {
+          console.log("res=>",res)
+          this.listData = res;//内容管理二级栏目所有数据
+          this.$store.state.styleType = res[0].styleType;//资源样式，文本/样式
+          this.$store.state.columnid = res[0].id;//栏目id
+          // console.log(this.$store.state.columnid)
+          this.$router.push(a + this.$store.state.columnid);//二级栏目
+        });
+      } else {
+        this.$router.push(a);
+      }
+
+      this.address = a;
+    },
+  },
+  // created() {
+  //   console.log(this.$route,666);
+  //   this.address =this.$route.path;
+  // },
+};
+</script>
+
+<style lang="less">
+.left-menu {
+  // color: #000;
+  height: 100%;
+  ul {
+    padding: 0px;
+    margin: 0px;
+  }
+  li {
+    list-style: none;
+    width: 200px;
+    line-height: 80px;
+    background: #fff;
+    text-align: center;
+    margin-bottom: 10px;
+    cursor: pointer;
+    font-size: 20px;
+
+  }
+  li:hover {
+    background: rgb(150, 211, 235);
+    color: #fff;
+  }
+  .active {
+    background: rgb(150, 211, 235);
+    color: #fff;
+  }
+}
+</style>
--- a/src/components/Topbar.vue
+++ b/src/components/Topbar.vue
@ -0,0 +1,257 @@
+<template>
+  <div class="home-top-bar">
+    <div class="top">
+      <p class="webmange">网站管理后台</p>
+      <div class="change">
+        <img src="../assets/images/university.jpg" class="avatar" />
+        <span class="name">{{name}}</span>
+        <el-dropdown @command="handleCommand">
+          <i class="el-icon-arrow-down el-icon--right"></i>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="password"
+              ><i class="el-icon-edit-outline"></i>修改密码</el-dropdown-item
+            >
+            <el-dropdown-item command="loginout"
+              ><i class="el-icon-switch-button"></i>退出系统</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </div>
+    <!-- 对话框 -->
+    <el-dialog :visible.sync="dialogVisible" width="30%" >
+      <span class="title_password">更改登录密码</span>
+      <!-- 表单  -->
+      <el-form
+        :model="changeForm"
+        :rules="rules"
+        ref="changeForm"
+        label-width="90px"
+      >
+        <el-form-item label=" 旧设密码" prop="oldPassword">
+          <el-input
+            type="password"
+            v-model="changeForm.oldPassword"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="新设密码" prop="newPassword">
+          <el-input
+            show-password
+            type="password"
+            v-model="changeForm.newPassword"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="checkPass">
+          <el-input
+            show-password
+            type="password"
+            v-model="changeForm.checkPass"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <div class="forget">忘记密码?</div>
+        <div class="bottom">
+          <el-button type="info" @click="dialogVisible = false"
+            >取 消</el-button
+          >
+          <el-button type="primary" @click="submitForm()">确 认</el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { adminChangepwd } from "@/apis/request.js";
+export default {
+  data() {
+    const accountAddComp = this;
+    // 自定义的密码验证规则 // field,value,callback
+    const validatePass = (rules, value, callback) => {
+      if (value === "") {
+        // 为空进去
+        callback(new Error("密码不能为空！"));
+      } else if (!/^[0-9|a-z|A-Z]+/.test(value)) {
+        // 验证失败
+        callback(new Error("密码必须为数组或字母！"));
+      } else if (value != accountAddComp.changeForm.checkPass) {
+        // 密码和确认密码验证
+        callback(new Error("两次密码不一致！"));
+      } else {
+        callback();
+      }
+    };
+    // 自定义的确认密码验证规则
+    const validatePass2 = function(rules, value, callback) {
+      if (value === "") {
+        // 为空进去
+        callback(new Error("确认密码不能为空！"));
+      } else if (!/^[0-9|a-z|A-Z]+/.test(value)) {
+        // 验证失败
+        callback(new Error("确认密码必须为数组或字母！"));
+      } else if (value != accountAddComp.changeForm.newPassword) {
+        // 密码和确认密码验证
+        callback(new Error("两次密码不一致！"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      name:"",
+      changeForm: {
+        oldPassword: "", // 初始化表单数据
+        newPassword: "",
+        checkPass: "",
+      },
+      // 验证规则
+      rules: {
+        oldPassword: [
+          { required: true, message: "请输入旧设密码", trigger: "blur" },
+        ],
+        newPassword: [
+          { required: true, validator: validatePass, trigger: "blur" },
+        ],
+        checkPass: [
+          //  validator: 自定义的验证函数
+          { required: true, validator: validatePass2, trigger: "blur" },
+        ],
+      },
+      dialogVisible: false,
+      formLabelWidth: "90px",
+    };
+  },
+  methods: {
+    handleCommand(command) {
+      if (command === "password") {
+        this.dialogVisible = true;
+      } else if (command === "loginout") {
+        this.$message({
+          type: "success",
+          message: "下次再来玩丫,我会想你的~~",
+          duration: 1000,
+          onClose: () => {
+         localStorage.removeItem("flag");
+            this.$router.replace("/login");
+          },
+        });
+      }
+    },
+    submitForm() {
+      let that = this;
+      this.$refs.changeForm.validate((valid) => {
+        if (valid) {
+          adminChangepwd({
+            oldPwd: that.changeForm.oldPassword,
+            newPwd: that.changeForm.newPassword,
+          }).then((res) => {
+            if (res.message == "修改成功") {
+              this.$message({
+                type: "success",
+                message: "修改密码成功",
+                duration: 2000,
+                onClose: () => {
+                  that.$router.replace("/login");
+                },
+              });
+            } else {
+                this.$message({
+                type: "error",
+                message: "修改密码失败,请检查密码",
+                duration: 2000,
+              });
+            }
+          });
+          console.log(sessionStorage.getItem("token"), 6);
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm() {
+      this.$refs.changeForm.resetFields();
+    },
+  },
+  computed: {},
+  created(){
+     this.name=localStorage.getItem('username')
+  }
+};
+</script>
+
+<style lang="less">
+.home-top-bar {
+    
+  width: 1300px;
+  margin: 0 auto;
+  height: 80px;
+  line-height: 80px;
+  .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: #242424;
+    margin-right: 16px;
+  }
+  .name {
+    color: white;
+  }
+  p {
+    font-size: 24px;
+    color: #fff;
+  }
+  .el-icon-arrow-down {
+    color: blanchedalmond;
+  }
+  .el-dialog__header {
+    padding: 0;
+  }
+  .el-dialog__body {
+    padding-top: 16px;
+  }
+  .el-input__inner {
+    width: 80%;
+    font-family: sans-serif;
+  }
+  .forget {
+    width: 94%;
+    margin: 0 auto;
+    text-align: right;
+  }
+  .forget:hover {
+    color: skyblue;
+    cursor: pointer;
+  }
+  .bottom {
+    display: flex;
+    justify-content: center;
+  }
+}
+.home-top-bar > .top {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.home-top-bar > .top > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.name,
+.el-dropdown {
+  line-height: 60px;
+}
+.title_password {
+  display: block;
+  width: 94%;
+  margin: 0 auto;
+  color: rgb(20, 146, 196);
+  font-size: 18px;
+  text-align: center;
+  border-bottom: 1px solid rgb(20, 146, 196);
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,30 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+// 样式初始化
+import 'normalize.css'
+//element ui样式
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+//视频播放器
+import VideoPlayer from 'vue-video-player'
+import  'video.js/dist/video-js.css'
+import 'vue-video-player/src/custom-theme.css'
+import '@/assets/styles/common.less'
+// 富文本编辑器
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+//引入rem与px的适配文件
+import 'lib-flexible/flexible.js'
+Vue.use(VideoPlayer)
+Vue.use(ElementUI);
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,95 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "../views/Home.vue";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    //redirect:'/login',
+    redirect: {
+      name: "login",
+    },
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: () =>
+      import( "../views/Login.vue"),
+  },
+  {
+    path: "/home",
+    name: "home",
+    component: Home,
+    redirect: {
+      name: "homemange",
+    },
+    meta: { ispass: true },
+    children: [
+      {
+        // 账号添加
+        path: "columnmange", // 相对地址,自定带上父级地址
+        name: "columnmange",
+        component: () =>
+      import( "../views/column/Demo.vue"),
+        meta: { ispass: true },
+      },
+      {
+        path: "homemange", // 相对地址,自定带上父级地址
+        name: "homemange",
+        component: () =>
+          import(
+            "../views/home/Homemange.vue"
+          ),
+        meta: { ispass: true },
+      },
+      {
+        path: "contentmange/:id", // 相对地址,自定带上父级地址
+        name: "contentmange",
+        component: () =>
+          import(
+             "../views/content/Contentmange.vue"
+          ),
+        meta: { ispass: true },
+      },
+      {
+        path: "addtitle", // 相对地址,自定带上父级地址
+        name: "addtitle",
+        component: () =>
+          import("../views/title/Addtitle.vue"),
+        meta: { ispass: true },
+      },
+      {
+        path: "editphoto", // 相对地址,自定带上父级地址
+        name: "editphoto",
+        component: () =>
+          import(
+            "../views/title/Editphoto.vue"
+          ),
+        meta: { ispass: true },
+      },
+    ],
+  },
+  {
+    path: "*",
+    redirect: "/",
+  },
+];
+
+const router = new VueRouter({
+  routes,
+});
+router.beforeEach((to, from, next) => {
+  if (to.meta.ispass === true) {
+    const token = sessionStorage.getItem("token");
+    if (token) {
+      next();
+    } else {
+      next("/");
+    }
+  } else {
+    next();
+  }
+});
+export default router;
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    article:[],
+    editid:{ bgImgUrl:"",title: "", createTime: "", description: "", textContent: null },//栏目所要编辑的行id
+    columnid:0,
+    total:0,
+    flag:1
+  
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,63 @@
+<template>
+  <div id="ply">
+<el-container>
+  <el-header height="80px"><Topbar/></el-header>
+  <el-container id="box">
+    <LeftMenu  v-if="!fun"/>
+    <el-main>
+    <router-view/>
+    </el-main>
+  </el-container>
+</el-container>
+    
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+ import LeftMenu from '@/components/LeftMenu.vue'
+ import Topbar from '@/components/Topbar.vue'
+
+export default {
+  name: 'Home',
+  data(){
+    return{
+       title:["/home/addtitle","/home/editphoto"]
+    }
+  },
+  components: {
+    // HelloWorld
+    LeftMenu,
+    Topbar
+  },
+  computed:{
+      fun(){
+         return this.title.includes(this.$route.path)
+      }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+#ply{
+  background: #f8f8f8;
+}
+#ply,.el-container,.el-header{
+  padding:0 ;
+}
+
+.el-container .el-main{
+  margin-left: 20px;
+  padding: 50px;
+  overflow: visible;
+ background: #fff;
+}
+.el-header{
+  background: #333;
+}
+#box{
+  width: 1300px;
+  margin:  0 auto;
+  margin-top: 20px;
+}
+</style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -0,0 +1,253 @@
+<template>
+  <div class="ply" @keyup.enter="submitForm">
+    <div class="topbar">
+      <div class="container ">
+        <span>网站管理后台</span><span class="regist" @click="go()">返回</span>
+      </div>
+    </div>
+    <div class="form container">
+      <div class="welcome">
+        <p>欢&nbsp;迎&nbsp;来&nbsp;到</p>
+        <p>网&nbsp;站&nbsp;后&nbsp;台</p>
+        <p>管&nbsp;理&nbsp;系&nbsp;统&nbsp;平&nbsp;台</p>
+      </div>
+      <div id="box">
+        <div class="title">
+          <p>欢迎登录</p>
+        </div>
+        <!-- element ui表单数据 -->
+        <el-form
+          :model="loginForm"
+          :rules="rules"
+          ref="loginFormId"
+          label-width="70px"
+          class="demo-ruleForm"
+        >
+          <p class="user">用户名</p>
+          <el-form-item prop="username">
+            <el-input
+              clearable
+              type="text"
+              v-model="loginForm.username"
+              placeholder="用户名"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <p class="password">密码</p>
+          <!-- 表单验证，其prop是必备属性，且必须写再el-form-item中 -->
+          <!-- 显示密码 show-password -->
+          <el-form-item prop="password">
+            <el-input
+              placeholder="密码"
+              type="password"
+              v-model="loginForm.password"
+              autocomplete="off"
+              show-password
+            ></el-input>
+          </el-form-item>
+          <el-form-item class="bottom">
+            <!-- 勾选框 -->
+            <el-checkbox v-model="loginForm.checked">下次自动登录</el-checkbox>
+            <a class="right">忘记密码?</a>
+          </el-form-item>
+
+          <el-form-item>
+            <input
+              type="button"
+              name=""
+              id="btn"
+              value="登录"
+              @click="submitForm()"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { login } from "@/apis/request.js";//登录接口
+
+export default {
+  data() {
+    return {
+      loginForm: {
+        username: "",
+        password: "",
+        checked: true,
+      },
+      rules: {//数据检索
+        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    //返回即回到前端地址
+    go(){
+      this.$router.push("")
+    },
+    submitForm() {//登录
+      var that = this;
+      if (that.loginForm.checked == true) {//当选择记住密码时，获取用户名和密码，并存储至本地
+        localStorage.setItem("username", that.loginForm.username);
+        localStorage.setItem("pwd", that.loginForm.password);
+        localStorage.setItem("flag", true);//有用户名和密码，则设置flag为true
+      }
+      if (that.loginForm.checked == false) {//如果为未选中记住密码，则移除本地用户名和密码与flag
+        localStorage.removeItem("username");
+        localStorage.removeItem("pwd");
+        localStorage.removeItem("flag");
+      }
+      this.$refs.loginFormId.validate((valid) => {//
+        if (valid) {//数据校验，如果有数据，则处理login接口，如果没有数据，则弹出消息，输入用户名或者密码
+          login({
+            adminName: that.loginForm.username,
+            adminPwd: that.loginForm.password,
+          }).then((res) => {
+            if (res.token) {//如果验证通过，则弹出消息，并跳转，如果错误，则弹出消息错误
+              sessionStorage.setItem("token", res.token);
+              this.$message({//弹出消息提示
+                showClose: true,//显示关闭按钮
+                message: "登陆成功",//消息文字
+                type: "success",//主题
+                duration: 1000,//弹出1秒
+                onClose: () => {
+                  this.$router.replace("/home/homemange");//编程式跳转，关闭当前页面并跳转至下一个页面
+                },
+              });
+            } else {
+              this.$message({
+                showClose: true,
+                message: "用户名或者密码输入错误",
+                type: "error",
+              });
+            }
+          });
+        } else {
+          this.$message({
+            showClose: true,
+            message: "请输入用户名或者密码",
+            type: "error",
+          });
+        }
+      });
+    },
+  },
+  created(){
+   if(localStorage.getItem('username')){//如果本地缓存有数据，则获取用户名和密码
+     this.loginForm.username=localStorage.getItem('username')
+   }
+   if(localStorage.getItem('pwd')){
+     this.loginForm.password=localStorage.getItem('pwd')
+   }
+  },
+  mounted() {
+    if(localStorage.getItem('flag')){//如果本地存储flag为true，则自动登录
+      this.submitForm()
+    }
+    sessionStorage.removeItem("token");
+  },
+};
+</script>
+<style lang="less" scoped>//scoped表示此样式只作用域本组件
+.ply {
+  height: 100%;
+  opacity: 1;
+  background: url('../assets/images/login.jpg');
+  // font-family: "Source Han Serif CN";
+  .container {
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .topbar {
+    font-size: 24px;
+    height: 60px;
+    background: #333;
+    color: #fff;
+    line-height: 60px;
+    div {
+      display: flex;
+      justify-content: space-between;
+      .regist {
+        font-size: 16px;
+      }
+    }
+  }
+  #box {
+    padding-right: 50px;
+    padding-top: 70px;
+    padding-bottom: 28px;
+    width: 490px;
+    background: white;
+    font-family: "Source Han Serif CN";
+    margin: 0;
+    p {
+      font-size: 24px;
+      text-indent: 70px;
+    }
+    .title {
+      margin-bottom: 50px;
+    }
+    .password,
+    .user {
+      margin-top: 30px;
+      font-size: 14px;
+      font-family: "Source Han Serif CN";
+      margin-bottom: 10px;
+    }
+    .el-form {
+      width: 490px;
+    }
+    .el-input {
+      font-family: sans-serif;
+    }
+  }
+
+  .form {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    .welcome {
+   
+      color: #fff;
+      p{
+        font-size: 54px;
+        margin-bottom: 8px;
+      }
+      // .introduce {
+      //   font-size: 16px;
+      //   margin-top: 20px;
+      // }
+    }
+  }
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both;
+  }
+  .bottom .right {
+    float: right;
+    cursor: pointer;
+  }
+  #btn {
+    width: 420px;
+    border: 0;
+    height: 46px;
+    background: #333;
+    color: #fff;
+    margin-top: 60px;
+    border-radius: 10px;
+    outline: none;
+  }
+  #btn:hover {
+    background: rgb(109, 103, 103);
+    cursor: pointer;
+  }
+
+}
+</style>
--- a/src/views/column/Demo.vue
+++ b/src/views/column/Demo.vue
@ -0,0 +1,865 @@
+<template>
+  <div class="column">
+    <div class="top">
+      <span class="title">
+        <img src="../../assets/images/leftbar_icon_index_blue.png" alt="" />栏目管理</span>
+      <div>
+        <!-- <span @click="returndata()">添加栏目</span> -->
+        <el-button size="mini" @click="handleAdd()">添加栏目</el-button>
+      </div>
+    </div>
+    <div class="addcolumn">
+      <p>栏目列表</p>
+    </div>
+    <div class="mange">
+      <div class="titlehead">
+        <span class="lanmu">栏目</span>
+        <span class="show">显示</span>
+        <span class="action">操作</span>
+      </div>
+      <!-- element ui树形控件 -->
+     <!-- data:展示数据
+     node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
+     default-expand-all：是否默认展开所有节点
+     expand-on-click-node：是否在点击节点的时候展开或者收缩节点
+     draggable：是否开启节点拖拽功能
+     allow-drag：判断节点能否被拓展 -->
+      <el-tree
+        :data="tableData"
+        node-key="id"
+        :props="defaultProps"
+        default-expand-all
+        :expand-on-click-node="false"
+        @node-drag-start="handleDragStart"
+        @node-drag-enter="handleDragEnter"
+        @node-drag-leave="handleDragLeave"
+        @node-drag-over="handleDragOver"
+        @node-drag-end="handleDragEnd"
+        @node-drop="handleDrop"
+        draggable
+        :allow-drag="allowDrag"
+      >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span class="name">
+            <img
+              v-if="data.columnName == '首页'"
+              src="../../assets/images/leftbar_icon_home_blue.png"
+              alt=""
+            />
+            <img
+              v-if="data.level == 1 && data.columnName != '首页'"
+              src="../../assets/images/icon_list.png"
+              alt=""
+            />
+            <img
+              class="pho"
+              v-if="data.level != 1 && data.children.length == 0"
+              src="../../assets/images/icon_submenu_white.png"
+              alt=""
+            />
+            {{ node.label }}</span
+          >
+          <span class="fixed">
+            <img
+              v-if="data.isShow == 0"
+              src="../../assets/images/btn_visule_n.png"
+              alt=""
+              width="20px"
+              @click="handlehidden(data)"
+            />
+            <img
+              v-if="data.isShow == 1"
+              src="../../assets/images/btn_notvisule_n.png"
+              alt=""
+              width="20px"
+              @click="handlehidden(data)"
+            />
+          </span>
+          <span class="handle">
+            <!-- 修改栏目 -->
+            <i class="el-icon-edit-outline" @click="handleEdit(data)"></i>
+            <!-- 新增栏目 -->
+            <i class="el-icon-plus" @click="handleAdd(data)"></i>
+            <!-- 删除栏目 -->
+            <i class="el-icon-delete" @click="handleDelete(data)"></i>
+          </span>
+        </span>
+      </el-tree>
+    </div>
+
+    <!-- 对话框 -->
+    <el-dialog
+      title="添加栏目"
+      :visible.sync="dialogaddFormVisible"
+      width="50%"
+    >
+      <el-form :model="addform" :rules="rules" ref="addform">
+        <el-form-item
+          label="栏目名称"
+          :label-width="formLabelWidth"
+          prop="columnName"
+        >
+          <el-input v-model="addform.columnName" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="栏目英文" :label-width="formLabelWidth">
+          <el-input autocomplete="off" v-model="addform.english"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="栏目banner"
+          :label-width="formLabelWidth"
+          prop="bgImgUrl"
+        >
+          <el-upload
+            class="avatar-uploader"
+            :action="joggle"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccessadd"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img
+              v-if="addform.bgImgUrl"
+              :src="addform.bgImgUrl"
+              class="avatar"
+              width="200px"
+            />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="展示类型" :label-width="formLabelWidth">
+          <el-radio-group v-model="addform.showType">
+            <el-radio :label="0">
+              <img src="../../assets/images/btn_pic_1.png" alt="" />
+              <span class="showtitle">图片列表</span>
+            </el-radio>
+            <el-radio :label="1">
+              <img src="../../assets/images/btn_pic_2.png" alt="" />
+              <span class="showtitle">新闻列表</span>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="详情样式" :label-width="formLabelWidth">
+          <el-radio-group v-model="addform.styleType">
+            <el-radio :label="0">
+              <img src="../../assets/images/12.png" alt="" />
+              <span class="showtitle">视频详情</span>
+            </el-radio>
+            <el-radio :label="1">
+              <img src="../../assets/images/btn_pic_4.png" alt="" />
+              <span class="showtitle">富文本</span>
+            </el-radio>
+            <el-radio :label="2">
+              <img src="../../assets/images/icon_link.png" alt="" />
+              <span class="showtitle">链接</span>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          label="设置上级"
+          :label-width="formLabelWidth"
+          prop="parentId"
+        >
+        <!-- cascader级联选择器 -->
+          <el-cascader
+            :change-on-select="true"
+            :props="defaultParams"
+            :options="options"
+            v-model="addform.parentId"
+            @change="handleChange"
+            :clearable="true"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item label="打开方式" :label-width="formLabelWidth">
+          <el-radio-group v-model="addform.openMethod">
+            <el-radio :label="0">当前窗口</el-radio>
+            <el-radio :label="1">新窗口</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogaddFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="修改栏目"
+      :visible.sync="dialogeditFormVisible"
+      width="50%"
+    >
+    <!-- lable：指定节点标签为节点对象的某个属性 -->
+      <el-form :model="editform">
+        <el-form-item
+          label="栏目名称"
+          :label-width="formLabelWidth"
+          v-if="this.editid != 66"
+        >
+          <el-input v-model="editform.columnName" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="栏目英文" :label-width="formLabelWidth">
+          <el-input v-model="editform.english" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="栏目banner" :label-width="formLabelWidth">
+          <el-upload
+            class="avatar-uploader"
+            :action="joggle"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img
+              v-if="editform.bgImgUrl"
+              :src="editform.bgImgUrl"
+              class="avatar"
+              width="200px"
+            />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="展示类型" :label-width="formLabelWidth">
+          <el-radio-group v-model="editform.showType">
+            <el-radio :label="0">
+              <img src="../../assets/images/btn_pic_1.png" alt="" />
+              <span class="showtitle">图片列表</span>
+            </el-radio>
+            <el-radio :label="1">
+              <img src="../../assets/images/btn_pic_2.png" alt="" />
+              <span class="showtitle">新闻列表</span>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="详情样式" :label-width="formLabelWidth">
+          <el-radio-group v-model="editform.styleType">
+            <el-radio :label="0">
+              <img src="../../assets/images/12.png" alt="" />
+              <span class="showtitle">视频详情</span>
+            </el-radio>
+            <el-radio :label="1">
+              <img src="../../assets/images/btn_pic_4.png" alt="" />
+              <span class="showtitle">富文本</span>
+            </el-radio>
+            <el-radio :label="2">
+              <img src="../../assets/images/icon_link.png" alt="" />
+              <span class="showtitle">链接</span>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="设置上级" :label-width="formLabelWidth">
+          <el-cascader
+            :change-on-select="true"
+            :props="defaultParams"
+            :options="options"
+            v-model="editform.parentId"
+            @change="handleChange"
+            :clearable="true"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item label="打开方式" :label-width="formLabelWidth">
+          <el-radio-group v-model="editform.openMethod">
+            <el-radio :label="0">当前窗口</el-radio>
+            <el-radio :label="1">新窗口</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogeditFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="editForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { allColumn } from "@/apis/request.js";
+import { editColumn } from "@/apis/request.js";
+import { addColumn } from "@/apis/request.js";
+import { deleteColumn } from "@/apis/request.js";
+import { returnColumn } from "@/apis/request.js";
+import { joggle } from "@/apis/request.js";
+import { sortColumn } from "@/apis/request.js";
+
+export default {
+  data() {
+    return {
+      data: [
+        {
+          id: 1,
+          label: "一级 1",
+          children: [
+            {
+              id: 4,
+              label: "二级 1-1",
+              children: [
+                {
+                  id: 9,
+                  label: "三级 1-1-1",
+                },
+                {
+                  id: 10,
+                  label: "三级 1-1-2",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "一级 2",
+          children: [
+            {
+              id: 5,
+              label: "二级 2-1",
+            },
+            {
+              id: 6,
+              label: "二级 2-2",
+            },
+          ],
+        },
+        {
+          id: 3,
+          label: "一级 3",
+          children: [
+            {
+              id: 7,
+              label: "二级 3-1",
+            },
+            {
+              id: 8,
+              label: "二级 3-2",
+              children: [
+                {
+                  id: 11,
+                  label: "三级 3-2-1",
+                },
+                {
+                  id: 12,
+                  label: "三级 3-2-2",
+                },
+                {
+                  id: 13,
+                  label: "三级 3-2-3",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "columnName",
+      },
+      joggle,
+      editid: 1,
+      deleteid: 1,
+      options: [],
+      selectedOptions: [],
+      defaultParams: {
+        label: "columnName",
+        value: "id",
+        children: "children",
+      },
+      tableData: [
+        {
+          id: 1,
+          date: "首页管理",
+          name: "",
+          hidden: "no",
+        },
+        {
+          id: 3,
+          date: " 项目介绍",
+          hidden: "no",
+          children: [
+            {
+              id: 31,
+              date: "项目1",
+              hidden: "no",
+            },
+            {
+              id: 32,
+              date: "项目1-1",
+              hidden: "no",
+            },
+          ],
+        },
+        {
+          id: 2,
+          date: "产品",
+          hidden: "no",
+          children: [
+            {
+              id: 21,
+              date: "介绍",
+              hidden: "no",
+              children: [
+                {
+                  id: 211,
+                  date: "项目1",
+                  hidden: "no",
+                },
+                {
+                  id: 212,
+                  date: "项目1-1",
+                  hidden: "no",
+                },
+              ],
+            },
+            {
+              id: 22,
+              date: "咨询",
+              hidden: "no",
+            },
+          ],
+        },
+      ],
+      value: [],
+      addform: {
+        columnName: "",
+        english: null,
+        bgImgUrl: null,
+        showType: 0,
+        styleType: 0,
+        openMethod: 0,
+        parentId: [],
+      },
+      editform: {
+        columnName: "",
+        english: "",
+        bgImgUrl: null,
+        showType: 0,
+        styleType: 0,
+        openMethod: 0,
+        parentId: [0],
+      },
+      //编辑与新增框是否可见
+      dialogaddFormVisible: false,
+      dialogeditFormVisible: false,
+      formLabelWidth: "110px",
+      rules: {
+        columnName: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+        ],
+        bgImgUrl: [
+          { required: true, message: "请选择banner", trigger: "blur" },
+        ],
+        parentId: [{ required: true, message: "请选择上级", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    allowDrag(res) {
+      console.log(res);
+      if (res.data.columnName == "首页") {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    handleAvatarSuccess(res) {
+      this.editform.bgImgUrl = res.data.fileUrl;
+      console.log(this.editform.bgImgUrl);
+    },
+    handleAvatarSuccessadd(res) {
+      // this.addform.bgImgUrl = res.imgUrl;
+      this.addform.bgImgUrl = res.data.fileUrl;
+      console.log(res);
+    },
+    handleChange(value) {
+      console.log(value, 0);
+    },
+    //通过isshow控制栏目的显示与隐藏
+    handlehidden(row) {
+      if (row.isShow == 0) {
+        editColumn({
+          id: row.id,
+          isShow: 1,
+        }).then((res) => {
+          console.log(res, 666);
+          allColumn().then((res) => {
+            console.log(res);
+            this.tableData = res;
+          });
+        });
+      } else {
+        editColumn({
+          id: row.id,
+          isShow: 0,
+        }).then((res) => {
+          console.log(res);
+          allColumn().then((res) => {
+            console.log(res);
+            this.tableData = res;
+          });
+        });
+      }
+    },
+
+    handleEdit(row) {
+      this.dialogeditFormVisible = true;
+      this.editid = row.id;
+      console.log(row, 0);
+      returnColumn(row.id).then((res) => {
+        var a = [];
+        a.push(res[0].parentId);
+        this.editform.columnName = res[0].columnName;
+        this.editform.english = res[0].english;
+        this.editform.bgImgUrl = res[0].bgImgUrl;
+        this.editform.showType = res[0].showType;
+        this.editform.styleType = res[0].styleType;
+        this.editform.parentId = a;
+        this.editform.openMethod = res[0].openMethod;
+        console.log(res, 6);
+      });
+      console.log(row);
+    },
+    handleAdd(row) {
+      console.log(row, 66);
+      this.dialogaddFormVisible = true;
+      if (row) {
+        this.addform = {
+          columnName: null,
+          english: null,
+          bgImgUrl: null,
+          showType: 0,
+          styleType: 0,
+          openMethod: 0,
+          parentId: row.id,
+        };
+      } else {
+        this.addform = {
+          columnName: null,
+          english: null,
+          bgImgUrl: null,
+          showType: 0,
+          styleType: 0,
+          openMethod: 0,
+          parentId: [],
+        };
+      }
+    },
+    handleDelete(row) {
+      console.log(row);
+      if (row.columnName == "首页") {
+        this.$message({
+          message: "警告!首页不可删掉",
+          type: "warning",
+          duration: 1000,
+        });
+        return false;
+      }
+      this.deleteid = row.id;
+      this.open();
+    },
+    addForm() {
+      this.$refs["addform"].validate((valid) => {
+        if (valid) {
+          this.addform.id = this.editid;
+
+          if (typeof this.addform.parentId == "object") {
+            var index = this.addform.parentId.length - 1;
+            this.addform.parentId = this.addform.parentId[index];
+          }
+
+          addColumn(this.addform).then((res) => {
+            if (res == 0) {
+              this.$message.error("请完善栏目必填信息");
+            } else {
+              this.common();
+              this.dialogaddFormVisible = false;
+            }
+            console.log(res);
+          });
+          console.log(this.addform, 666);
+        } else {
+          return false;
+        }
+      });
+    },
+    editForm() {
+      this.editform.id = this.editid;
+      if (this.editform.parentId.length == 0) {
+        this.editform.parentId = 0;
+      } else {
+        var index = this.editform.parentId.length - 1;
+        this.editform.parentId = this.editform.parentId[index];
+      }
+
+      editColumn(this.editform).then((res) => {
+        console.log(res);
+        this.common();
+      });
+      this.dialogeditFormVisible = false;
+      // console.log(this.editform,'ply');
+    },
+
+    open() {
+      this.$confirm("此操作将永久删除该栏目, 是否继续?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteColumn(this.deleteid).then((res) => {
+            console.log(res);
+            this.common();
+          });
+          // this.$message({
+          //   type: 'success',
+          //   message: '删除成功!'
+          // });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    returndata() {
+      this.dialogFormVisible = true;
+    },
+
+    load(tree, treeNode, resolve) {
+      setTimeout(() => {
+        resolve([
+          {
+            id: 31,
+            date: "2016-05-01",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1519 弄",
+          },
+          {
+            id: 32,
+            date: "2016-05-01",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1519 弄",
+          },
+        ]);
+      }, 1000);
+    },
+    append(data) {
+      console.log(data, "ply");
+    },
+
+    remove(node, data) {
+      const parent = node.parent;
+      const children = parent.data.children || parent.data;
+      const index = children.findIndex((d) => d.id === data.id);
+      children.splice(index, 1);
+    },
+    getTreeData(data) {
+      // 循环遍历json数据
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].children.length < 1) {
+          // children若为空数组，则将children设为undefined
+          data[i].children = undefined;
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          this.getTreeData(data[i].children);
+        }
+      }
+      return data;
+    },
+    common() {
+      allColumn().then((res) => {
+        console.log(res, "呸");
+        //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
+        //JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
+        this.tableData = JSON.parse(JSON.stringify(res));
+        this.options = this.getTreeData(JSON.parse(JSON.stringify(res)));
+        this.options.push({
+          id: 0,
+          columnName: "无",
+          children: [],
+        });
+        console.log(this.options, 1);
+      });
+    },
+
+    handleDragEnd(draggingNode, dropNode, dropType) {
+      console.log("tree drag end: ", dropNode && dropNode.label, dropType, 6);
+    },
+    TreeData(data) {
+      // 循环遍历json数据
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].children.length >= 1) {
+          // children若为空数组，则将children设为undefined
+          for (var j = 0; j < data[i].children.length; j++) {
+            data[i].children[j].parentId = data[i].id;
+            if (data[i].children[j].children.length >= 1) {
+              this.TreeData(data[i].children[j].children);
+            }
+          }
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          data[i].children = [];
+        }
+      }
+      return data;
+    },
+    handleDrop(draggingNode, dropNode, dropType) {
+      if (dropType == "after") {
+        draggingNode.data.level = dropNode.data.level;
+      }
+      if (dropType == "before") {
+        draggingNode.data.level = dropNode.data.level;
+      }
+      if (dropType == "inner") {
+        draggingNode.data.level = dropNode.data.level + 1;
+      }
+      console.log("tree drop: ", draggingNode, dropNode, dropType);
+
+      sortColumn(this.tableData).then();
+    },
+  },
+  mounted() {
+    this.common();
+    // this.rowDrop()
+    // this.columnDrop()
+  },
+};
+</script>
+<style lang="less">
+.column {
+  height: 100%;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 30px;
+    .el-button {
+      margin-top: 16px;
+    }
+  }
+  .title {
+    margin-top: 18px;
+    font-size: 20px;
+    img {
+      margin-right: 10px;
+    }
+  }
+  .addcolumn {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 18px;
+    color: #000;
+  }
+  i {
+    font-size: 20px;
+    margin-right: 10px;
+  }
+  .el-table {
+    font-size: 16px;
+    color: #333;
+  }
+
+  .el-input__inner {
+    width: 350px;
+  }
+  .el-dialog__header {
+    text-align: center;
+  }
+  .el-dialog__header .el-dialog__title {
+    border-bottom: 1px solid skyblue;
+    display: block;
+    width: 80%;
+    margin: 0 auto;
+    padding: 0px 0px 10px 0px;
+  }
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+  }
+  .el-table .has-gutter th div {
+    font-size: 18px;
+    color: #fff;
+    background: #68b6c9;
+    height: 40px;
+  }
+  .el-table td {
+    // font-size: 16px;
+    color: #333;
+  }
+  .el-table th > .cell {
+    line-height: 40px;
+    vertical-align: top;
+  }
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 18px;
+
+    padding-right: 8px;
+  }
+  .name {
+    //   flex-basis: 200px;
+    flex: 1;
+  }
+  .el-tree-node__content {
+    position: relative;
+    height: 36px;
+  }
+
+  .fixed {
+    position: absolute;
+    left: 546px;
+  }
+  .titlehead {
+    color: white;
+    font-size: 18px;
+    position: relative;
+    width: 100%;
+    height: 50px;
+    background: skyblue;
+    line-height: 50px;
+    span {
+      position: absolute;
+    }
+    .lanmu {
+      left: 18px;
+    }
+    .show {
+      left: 540px;
+    }
+    .action {
+      left: 860px;
+    }
+  }
+  .handle {
+    width: 173px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .pho {
+    margin-left: -13px;
+  }
+  .showtitle {
+    margin-left: 10px;
+  }
+}
+</style>
--- a/src/views/content/Contentmange.vue
+++ b/src/views/content/Contentmange.vue
@ -0,0 +1,454 @@
+<template>
+  <div class="content">
+    <div class="top">
+      <span class="title">
+          <img  src="../../assets/images/leftbar_icon_messages_blue.png" alt="">
+        内容管理</span>
+        <!-- 顶部按钮 -->
+      <div>
+        <el-button size="mini" @click="keepOrder()">保存排序</el-button>
+        <el-button size="mini" @click="addtitle()">新增文章</el-button>
+        <el-button size="mini" @click="toggleSelection()">批量删除</el-button>
+      </div>
+    </div>
+    <!-- 二级栏目主体内容 -->
+    <el-container>
+      <el-aside width="210px">
+        <!-- 二级栏目左侧导航栏 -->
+        <el-menu
+          :default-active="this.$route.params.id"
+          unique-opened
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <Child :dataList="listData"></Child>
+        </el-menu>
+      </el-aside>
+      <el-main>
+        <el-table
+          ref="multipleTable"
+          :data="tablelist"
+          tooltip-effect="dark"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+          align="center"
+        >
+        <!-- 二级内容表格列 -->
+          <el-table-column type="selection" width="55" align="center">
+          </el-table-column>
+          <el-table-column label="编号" width="60" align="center">
+            <template slot-scope="scope">{{ scope.row.id }}</template>
+          </el-table-column>
+          <el-table-column label="标题" width="120" align="center">
+            <template slot-scope="scope">{{ scope.row.title }}</template>
+          </el-table-column>
+          <el-table-column label="排序值" width="100" align="center">
+            <template slot-scope="scope">
+              <el-input-number
+                step-strictly
+                v-model="scope.row.sort"
+                controls-position="right"
+                :min="0"
+              ></el-input-number>
+            </template>
+          </el-table-column>
+          <el-table-column label="日期" width="120" align="center">
+            <template slot-scope="scope">{{ scope.row.createTime }}</template>
+          </el-table-column>
+          <el-table-column label="状态" width="120" align="center">
+            <template slot-scope="scope"
+              ><el-switch
+                :active-value="0"
+                :inactive-value="1"
+                v-model="scope.row.isShow"
+                @change="text(scope.row)"
+              >
+              </el-switch
+            ></template>
+          </el-table-column>
+          <el-table-column label="操作" width="150" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                @click="handleEdit(scope.$index, scope.row)"
+                >编辑</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                @click="
+                  open();
+                  handleDelete(scope.$index, scope.row);
+                "
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 表单页 -->
+        <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-size="6"
+      background
+      layout="prev, pager, next"
+      :total="this.$store.state.total"
+    >
+        </el-pagination>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import Child from "@/components/Childmenu.vue";
+import { allColumn } from "@/apis/request.js";
+import { deleteArticle } from "@/apis/request.js";
+import { editArticle } from "@/apis/request.js";
+import { getColumnarticle } from "@/apis/request.js";
+import { returnColumn } from "@/apis/request.js";
+import moment from "moment";
+//  import { keepOreder } from "@/apis/request.js";
+export default {
+  data() {
+    return {
+      currentPage: 1,//页码
+      total: 12,
+      deleteid: [],
+      id: 0,
+      styleType: 0,
+      value1: 0,
+      listData: [
+        {
+          name: "钠管设备",
+          id: "1",
+          level: 1,
+          child: [
+            {
+              name: "系统默认组",
+              id: "2",
+              flag: true,
+            },
+            {
+              name: "设备一组",
+              id: "3",
+              child: [
+                {
+                  name: "一组A小组",
+                  id: "4",
+                  child: [
+                    {
+                      name: "一组A小组的成员1",
+                      id: "5",
+                    },
+                    {
+                      name: "一组A小组的成员2",
+                      id: "6",
+                      child: [
+                        {
+                          name: "一组A小组的成员何总",
+                          id: "7",
+                        },
+                        {
+                          name: "一组A小组的成员曾",
+                          id: "8",
+                        },
+                        {
+                          name: "一组A小组的成员飘总",
+                          id: "9",
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  name: "一组B小组",
+                  id: "10",
+                },
+              ],
+            },
+            {
+              name: "设备二组",
+              id: "11",
+            },
+          ],
+        },
+      ],
+
+      multipleSelection: [],
+    };
+  },
+  components: {
+    Child,
+    // Ue
+  },
+
+  methods: {
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      console.log(`当前页: ${val}`);
+      this.querystock();
+    },
+    querystock() {
+        getColumnarticle(this.$store.state.columnid,this.currentPage).then((res) => {
+        this.$store.state.article = res.list;
+        this.total=res.total;
+      });
+    },
+    toggleSelection() {
+      this.open();
+    },
+    text(row) {//获取整行数据，并更改样式，传给后台进行存储
+      this.$store.state.editid = row;
+      var form = { ...this.$store.state.editid };
+      var date = moment(form.createTime).format("YYYY-MM-DD");
+      form.createTime = date;
+      var arr = [];
+      arr.push(form);
+
+      editArticle(arr).then((res) => {
+        console.log(res);
+      });
+    },
+    handleSelectionChange(val) {//选择栏目id，并放入数组中进行存储
+      this.deleteid = val.map((res) => {
+        return res.id;
+      });
+      console.log(this.deleteid);
+    },
+    handleEdit(index, row) {//编辑栏目
+      this.$store.state.editid = row;
+      localStorage.setItem('row', JSON.stringify(row) )
+      console.log( this.$store.state.editid,0);
+      this.$router.push("/home/editphoto");
+
+    },
+    handleDelete(index, row) {//删除栏目
+      console.log(index, row);
+      this.deleteid = row.id;
+    },
+    addtitle() {//新增文章
+      this.$router.push("/home/addtitle");
+    },
+    open() {//删除文章，弹出确认框
+      // const a=this;
+      this.$confirm("此操作将永久删除该栏目内容, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      }).then(() => {
+          deleteArticle(this.deleteid).then((res) => {//确认删除
+            if (res == 1) {
+              //个人建议，别直接更改state，异步处理用dispatch方法，再action内用delete方法进行删除，这样就可以使用devtool进行实时检测了
+              getColumnarticle(this.$store.state.columnid,this.currentPage).then((res) => {//删除成功，更新state值
+                this.$store.state.article = res.list;
+                this.$store.state.total = res.total;
+                console.log( this.$store.state.article,'ply')
+              });
+            }
+         
+          });
+        })
+        .catch(() => {//取消删除
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+            duration: 1000,
+          });
+        });
+    },
+    keepOrder() {//保持排序
+      editArticle(this.tablelist).then((res) => {//参数为所有栏目信息，成功返回值为排序成功
+       if(res.message=="修改成功"){
+            getColumnarticle(this.$route.params.id,this.currentPage).then((res) => {//基于排序值排序后的所有值,更改栏目内容信息
+            this.$store.state.article = res.list;
+             this.$store.state.total = res.total;
+            //  console.log( res,66)
+      });
+              this.$message({
+                showClose: true,
+                message: "修改排序成功",
+                type: "success",
+                duration: 1000,
+              });
+       }
+       else{
+            this.$message({
+                showClose: true,
+                message: "修改排序失败",
+                type: "error",
+                duration: 1000,
+              });
+       }
+      });
+    },
+    handleOpen(key,keyPath) {//打开二级栏目
+    console.log(keyPath,66)
+
+      this.$store.state.columnid = key;
+      localStorage.setItem('columnid',key)
+      console.log(this.$store.state.columnid);
+            this.$router.push({
+        path:'/home/contentmange/' + key,
+      });
+      returnColumn(key).then((res) => {
+        this.$store.state.styleType = res[0].styleType;
+         localStorage.setItem("style",res[0].styleType);
+      });
+      getColumnarticle(key,1).then((res) => {//获得二级栏目信息
+        // console.log(res, 1);
+        this.$store.state.article = res.list;
+         this.$store.state.total=res.total;
+            console.log( res,66)
+      });
+      
+    },
+    handleClose(key, keyPath) {//关闭二级栏目
+      console.log(key, keyPath);
+      this.$store.state.columnid = key;
+       localStorage.setItem('columnid',key)
+            this.$router.push({
+        path:
+         '/home/contentmange/' + key,
+      });
+      returnColumn(key).then((res) => {
+        this.$store.state.style = res[0].styleType;
+           localStorage.setItem(
+                    "styleType",
+                    res[0].styleType
+                  );
+      });
+      getColumnarticle(key,1).then((res) => {
+        this.$store.state.article = res.list;
+         this.$store.state.total=res.total;
+         console.log( res,66)
+      });
+    },
+  },
+  computed: {//定义的时候是方法，用起来像属性
+    tablelist() {
+      if (this.$store.state.article.length != 0) {
+        return this.$store.state.article;
+      } else {
+        return "";
+      }
+    },
+  },
+  created() {//钩子函数，页面创建后
+    this.$store.state.columnid = this.$route.params.id;
+    localStorage.setItem('columnid',this.$route.params.id)//存储栏目id，统一本地存储和state
+    returnColumn(this.$route.params.id).then((res) => {
+        this.$store.state.styleType = res[0].styleType;
+            localStorage.setItem(
+                    "style",
+                    res[0].styleType
+                  );
+      });
+    allColumn().then((res) => {//获取所有二级栏目信息
+      this.listData = res;
+      
+      getColumnarticle(this.$route.params.id,1).then((res) => {
+        console.log("res",res)
+        this.$store.state.article = res.list;//栏目内容信息
+         this.$store.state.total=res.total; //栏目总数      
+      });
+    });
+  },
+};
+</script>
+<style lang="less">
+.content {
+  height: 100%;
+  
+  .top {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 30px;
+    .el-button {
+      margin-top: 16px;
+    }
+  }
+  .title {
+ 
+    margin-top: 18px;
+    font-size: 20px;
+    img{
+      margin-right: 10px;
+    }
+  }
+  .el-icon-tickets {
+    font-size: 20px;
+    margin-right: 10px;
+  }
+  .el-container {
+    height: 90%;
+    margin-top: 20px;
+    // width: 800px;
+    .el-main {
+      margin-left: 0px;
+      padding: 0px;
+    }
+
+    .el-aside {
+      border-right: 1px solid #e6e6e6;
+      .el-menu {
+        border-right: 0px;
+        .el-menu-item {
+          font-size: 16px;
+        }
+        .el-submenu {
+          .el-submenu__title {
+            span {
+              font-size: 16px;
+          
+            }
+          }
+        }
+      }
+    }
+    .el-table td,
+    .el-table .has-gutter th div {
+      text-align: center;
+    }
+    .el-table .has-gutter th div {
+      font-size: 18px;
+      color: #fff;
+      background: #68b6c9;
+      height: 40px;
+      line-height: 40px;
+      font-weight: normal;
+    }
+  }
+  .el-menu-item * {
+    vertical-align: inherit;
+  }
+  .el-submenu__title * {
+    vertical-align: inherit;
+  }
+  .el-table th > .cell {
+    line-height: 40px;
+    vertical-align: top;
+  }
+  .el-input {
+    width: 100px;
+  }
+  .el-input-number {
+    width: 100px;
+  }
+  .el-pagination{
+    width: 180px;
+   margin-left: 520px;
+   margin-top: 20px;
+  }
+  .el-menu-vertical-demo .el-submenu.is-opened>.el-submenu__title {
+  color:#409EFF;
+}
+
+.el-menu-vertical-demo .el-submenu .el-submenu__title{
+  color: #303133;
+}
+}
+</style>
--- a/src/views/home/Homemange.vue
+++ b/src/views/home/Homemange.vue
--- a/src/views/title/Addtitle.vue
+++ b/src/views/title/Addtitle.vue
@ -0,0 +1,763 @@
+<template>
+  <div>
+    <div class="photocontent" v-if="show == 1">
+      <div class="top">
+        <span class="title"><i class="el-icon-tickets"></i>新增文章</span>
+        <div>
+          <span @click="back()">&lt;&emsp;返回</span>
+        </div>
+      </div>
+      <div class="contentbottom">
+        <el-form :model="photoForm" :rules="rules" ref="photoForm">
+          <el-form-item
+            label="封面图"
+            :label-width="formLabelWidth"
+            prop="bgImgUrl"
+          >
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              :show-file-list="false"
+              :on-success="handlePhotoSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="photoForm.bgImgUrl"
+                :src="photoForm.bgImgUrl"
+                class="avatar"
+                width="200px"
+              />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <!-- <img id="preview" :src="imageUrl" width="250px" height="60px"/>
+          <a href="javascript:;" class="file gradient">
+          <input id="pop_file" type="file" accept=".jpg,.jpeg,.png" v-on:change="uploadFile($event)" name="fileTrans" ref="file" value="" />选择文件</a> -->
+          </el-form-item>
+          <el-form-item
+            label="文章标题"
+            :label-width="formLabelWidth"
+            prop="title"
+          >
+            <el-input v-model="photoForm.title" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="日期" :label-width="formLabelWidth">
+            <el-col>
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="photoForm.createTime"
+                style="width: 100%;"
+              ></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item
+            label="来源"
+            :label-width="formLabelWidth"
+            prop="description"
+          >
+            <el-input
+              v-model="photoForm.description"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <!-- <quill-editor v-model="form.content" ref="myQuillEditor" style="height: 300px;" :options="editorOption">
+      </quill-editor> -->
+          <!-- <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>  -->
+          <el-form-item
+            label="文章内容"
+            :label-width="formLabelWidth"
+            prop="textContent"
+          >
+            <quill-editor
+              ref="text"
+              v-model="photoForm.textContent"
+              class="myQuillEditor"
+              :options="editorOption"
+            />
+          </el-form-item>
+
+          <div class="footer">
+            <el-button type="primary" @click="photoAdd('photoForm')"
+              >确认</el-button
+            >
+            <el-button type="info" @click="cancel()">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="photocontent" v-else-if="show== 0">
+      <div class="top">
+        <span class="title"><i class="el-icon-tickets"></i>新增文章</span>
+        <div>
+          <span @click="back()">&lt;&emsp;返回</span>
+        </div>
+      </div>
+      <div class="contentbottom">
+        <el-form :model="videoForm" :rules="rules" ref="videoForm">
+          <el-form-item
+            label="封面图"
+            :label-width="formLabelWidth"
+            prop="bgImgUrl"
+          >
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="videoForm.bgImgUrl"
+                :src="videoForm.bgImgUrl"
+                class="avatar"
+                width="200px"
+              />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+          <el-form-item
+            label="文章标题"
+            :label-width="formLabelWidth"
+            prop="title"
+          >
+            <el-input v-model="videoForm.title" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="日期" :label-width="formLabelWidth">
+            <el-col>
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="videoForm.createTime"
+                style="width: 100%;"
+              ></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item
+            label="来源"
+            :label-width="formLabelWidth"
+            prop="description"
+          >
+            <el-input
+              v-model="videoForm.description"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="视频"
+            :label-width="formLabelWidth"
+            prop="videoUrl"
+          >
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
+              v-bind:on-progress="uploadVideoProcess"
+              v-bind:on-success="handleVideoSuccess"
+              v-bind:before-upload="beforeUploadVideo"
+              v-bind:show-file-list="false"
+            >
+              <video
+                v-if="videoForm.videoUrl != '' && !videoFlag"
+                v-bind:src="videoForm.videoUrl"
+                class="avatar video-avatar"
+                controls="controls"
+              >
+                您的浏览器不支持视频播放
+              </video>
+              <i
+                v-else-if="videoForm.videoUrl == '' && !videoFlag"
+                class="el-icon-plus avatar-uploader-icon"
+              ></i>
+              <el-progress
+                v-if="videoFlag == true"
+                type="circle"
+                v-bind:percentage="videoUploadPercent"
+                style="margin-top:7px;"
+              ></el-progress>
+            </el-upload>
+          </el-form-item>
+          <el-form-item
+            label="文章内容"
+            :label-width="formLabelWidth"
+            prop="textContent"
+          >
+            <quill-editor
+              ref="text"
+              v-model="videoForm.textContent"
+              class="myQuillEditor"
+              :options="editorOption"
+            />
+          </el-form-item>
+          <div class="footer">
+            <el-button type="primary" @click="videoAdd('videoForm')"
+              >确认</el-button
+            >
+            <el-button type="info" @click="cancel()">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="photocontent" v-if="show== 2">
+      <div class="top">
+        <span class="title"><i class="el-icon-tickets"></i>新增文章</span>
+        <div>
+          <span @click="back()">&lt;&emsp;返回</span>
+        </div>
+      </div>
+      <div class="contentbottom">
+        <el-form :model="linkForm" :rules="rules" ref="linkForm">
+          <el-form-item
+            label="封面图"
+            :label-width="formLabelWidth"
+            prop="bgImgUrl"
+          >
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              :show-file-list="false"
+              :on-success="handleLinkSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="linkForm.bgImgUrl"
+                :src="linkForm.bgImgUrl"
+                class="avatar"
+                width="200px"
+              />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="日期" :label-width="formLabelWidth">
+            <el-col>
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="linkForm.createTime"
+                style="width: 100%;"
+              ></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item
+            label="连接类型"
+            :label-width="formLabelWidth"
+            prop="linkType"
+          >
+            <el-radio-group v-model="linkForm.linkType">
+              <el-radio :label="0">站内链接</el-radio>
+              <el-radio :label="1">站外链接</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            prop="value"
+            label="站内链接"
+            :label-width="formLabelWidth"
+            v-if="linkForm.linkType == 0"
+          >
+            <el-cascader
+              :change-on-select="true"
+              :props="defaultParams"
+              :options="options"
+              v-model="value"
+              @change="handleChange"
+              :clearable="true"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item
+            label="文章"
+            :label-width="formLabelWidth"
+            v-if="linkForm.linkType == 0"
+            prop="linkArticleId"
+          >
+            <el-select v-model="linkForm.linkArticleId" placeholder="请选择">
+              <el-option
+                v-for="item in option"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            prop="linkUrl"
+            label="站外链接"
+            :label-width="formLabelWidth"
+            v-if="linkForm.linkType == 1"
+          >
+            <el-input
+              v-model="linkForm.linkUrl"
+              placeholder="请输入链接"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="文章标题"
+            :label-width="formLabelWidth"
+            prop="title"
+          >
+            <el-input v-model="linkForm.title" autocomplete="off"></el-input>
+          </el-form-item>
+          <div class="footer">
+            <el-button type="primary" @click="linkAdd('linkForm')"
+              >确认</el-button
+            >
+            <el-button type="info" @click="cancel()">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <el-upload class="avatar-uploader"
+               action="http://47.107.237.129/msdw/aliyun/uploadFiles"
+               name="img"
+               :headers="headerObj"
+               :show-file-list="false"
+               :on-success="uploadSuccess"
+               :on-error="uploadError"
+               :before-upload="beforeAvatarUpload"> </el-upload>
+  </div>
+</template>
+<script>
+// import { editArticle } from "@/apis/request.js";
+import { quillEditor } from "vue-quill-editor";
+import { allColumn } from "@/apis/request.js";
+import moment from "moment";
+import { getColumnarticle } from "@/apis/request.js";
+import { addArticle } from "@/apis/request.js";
+import { getColumnallarticle } from "@/apis/request.js";
+import { joggle } from "@/apis/request.js";
+export default {
+  components: {
+    quillEditor,
+  },
+  data() {
+    return {
+      rules: {
+        bgImgUrl: [
+          { required: true, message: "请上传图片", trigger: "change" },
+        ],
+        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        textContent: [
+          { required: true, message: "请输入内容", trigger: "blur" },
+        ],
+        description: [
+          { required: true, message: "请输入来源", trigger: "blur" },
+        ],
+        videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }],
+        linkType: [
+          { required: true, message: "请选择链接类型", trigger: "blur" },
+        ],
+        value: [{ required: true, message: "请选择站内链接", trigger: "blur" }],
+        linkArticleId: [
+          { required: true, message: "请选择链接文章", trigger: "blur" },
+        ],
+        linkUrl: [
+          { required: true, message: "请输入站外链接", trigger: "blur" },
+        ],
+      },
+      joggle,
+      defaultParams: {
+        label: "columnName",
+        value: "id",
+        children: "children",
+      },
+      value: "",
+      videoFlag: false,
+      //是否显示进度条
+      videoUploadPercent: "",
+      //进度条的进度，
+      isShowUploadVideo: false,
+      //显示上传按钮
+      options: [
+        {
+          value: "zhinan",
+          label: "指南",
+          children: [
+            {
+              value: "shejiyuanze",
+              label: "设计原则",
+              children: [
+                {
+                  value: "yizhi",
+                  label: "一致",
+                },
+                {
+                  value: "fankui",
+                  label: "反馈",
+                },
+                {
+                  value: "xiaolv",
+                  label: "效率",
+                },
+                {
+                  value: "kekong",
+                  label: "可控",
+                },
+              ],
+            },
+            {
+              value: "daohang",
+              label: "导航",
+              children: [
+                {
+                  value: "cexiangdaohang",
+                  label: "侧向导航",
+                },
+                {
+                  value: "dingbudaohang",
+                  label: "顶部导航",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: "ziyuan",
+          label: "资源",
+          children: [
+            {
+              value: "axure",
+              label: "Axure Components",
+            },
+            {
+              value: "sketch",
+              label: "Sketch Templates",
+            },
+            {
+              value: "jiaohu",
+              label: "组件交互文档",
+            },
+          ],
+        },
+      ],
+      option: [],
+      photoForm: {
+        bgImgUrl: "",
+        title: "",
+        createTime: "",
+        description: "",
+        textContent: null,
+      },
+      videoForm: {
+        videoUrl: "",
+        bgImgUrl: "",
+        title: "",
+        createTime: "",
+        description: "",
+        textContent: null,
+      },
+      linkForm: {
+        bgImgUrl: "",
+        createTime: "2020-08-20",
+        linkType: 0,
+        linkUrl: "",
+        linkColumnId: 0,
+        columnId: "",
+        title: "",
+        linkArticleId: "",
+      },
+      formLabelWidth: "90px",
+      editorOption: {
+        scrollingContainer: '#editorcontainer',
+        placeholder: '',
+        // or 'bubble'
+        theme: 'snow',
+        modules: {
+          imageResize: {
+            displayStyles: {
+              backgroundColor: 'black', border: 'none', color: 'white'
+            },
+            modules: ['Resize', 'DisplaySize', 'Toolbar']
+          },toolbar: {
+            // 工具栏
+            container: 'toolbarOptions.toolbarOptions',
+            handlers: { 'image': function (value) { if (value) {
+              // upload点击上传事件
+                document.querySelector('.avatar-uploader input').click()
+            } else {
+              this.quill.format('image', false)
+            }
+            }
+            }
+          }
+        }
+      },
+      isClear: false,
+      headerObj:{}
+    };
+  },
+  methods: {
+    uploadError(){
+
+    },
+    uploadSuccess(res) {
+      var dt = res.result
+      let quill = this.$refs.myQuillEditor.quill
+      // 如果上传成功
+      if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index
+        // 插入图片 dt.url为服务器返回的图片地址
+        quill.insertEmbed(length, 'image', this.glAPI + dt.url)
+        // 调整光标到最后
+        quill.setSelection(length + 1)
+      } else {
+        this.$message.error('图片插入失败')
+      }// loading加载隐藏
+      this.quillUpdateImg = false
+    },
+    handleChange(value) {
+      let index = value.length - 1;
+      let id = value[index];
+      this.linkForm.linkColumnId = value[index];
+      getColumnallarticle(id).then((res) => {
+        this.option = res.map((res) => {
+          return {
+            value: res.id,
+            label: res.title,
+          };
+        });
+        console.log(res, 1);
+      });
+    },
+    beforeAvatarUpload(file) {
+      console.log(file);
+      const isJPG = file.type === "image/jpeg" || "image/jpg" || "image/png";
+      const isLt1M = file.size / 1024 / 1024 < 1;
+
+      if (!isJPG) {
+        this.$message.error("图片格式错误!");
+      }
+      if (!isLt1M) {
+        this.$message.error("图片大小不能超过 1MB!");
+      }
+      return isJPG && isLt1M;
+    },
+    common() {
+      allColumn().then((res) => {
+        this.options = this.getTreeData(res);
+      });
+    },
+    getTreeData(data) {
+      // 循环遍历json数据
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].children.length < 1) {
+          // children若为空数组，则将children设为undefined
+          data[i].children = undefined;
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          this.getTreeData(data[i].children);
+        }
+      }
+      return data;
+    },
+    //上传前回调
+    beforeUploadVideo(file) {
+      var fileSize = file.size / 1024 / 1024 < 50;
+      if (
+        [
+          "video/mp4",
+          "video/ogg",
+          "video/flv",
+          "video/avi",
+          "video/wmv",
+          "video/rmvb",
+          "video/mov",
+        ].indexOf(file.type) == -1
+      ) {
+        this.$message.error("上传视频格式错误!");
+        return false;
+      }
+      if (!fileSize) {
+        this.$message.error("上传视频大小不能超过 50MB!");
+        return false;
+      }
+      this.isShowUploadVideo = false;
+    },
+    //进度条
+    uploadVideoProcess(event, file) {
+      this.videoFlag = true;
+      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
+    },
+    //上传成功回调
+    handleVideoSuccess(res) {
+      this.isShowUploadVideo = true;
+      this.videoFlag = false;
+      this.videoUploadPercent = 0;
+      this.videoForm.videoUrl = res.data.fileUrl;
+    },
+    change(val) {
+      console.log(val);
+    },
+    submit() {
+      console.log(this.$refs.text.value);
+    },
+    handlePhotoSuccess(res) {
+      // this.photoForm.bgImgUrl = res.imgUrl;
+      this.photoForm.bgImgUrl = res.data.fileUrl;
+    },
+    handleAvatarSuccess(res) {
+      // this.videoForm.bgImgUrl = res.imgUrl;
+      this.videoForm.bgImgUrl = res.data.fileUrl;
+    },
+    handleLinkSuccess(res) {
+      // this.linkForm.bgImgUrl = res.imgUrl;
+      this.linkForm.bgImgUrl = res.data.fileUrl;
+    },
+    back() {
+         let a=localStorage.getItem('columnid')
+      this.$router.push("/home/contentmange/" + a);
+      return false;
+    },
+    photoAdd(formName) {
+         let a=localStorage.getItem('columnid')
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          var form = { ...this.photoForm };
+          var date = moment(form.createTime).format("YYYY-MM-DD");
+          form.createTime = date;
+          form.columnId = a;
+          addArticle(form).then((res) => {
+            console.log(res);
+            getColumnarticle(a, 1).then((res) => {
+              this.$store.state.article = res;
+              this.$router.push(
+                "/home/contentmange/" + a
+              );
+            });
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    videoAdd(formName) {
+         let a=localStorage.getItem('columnid')
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          var form = { ...this.videoForm };
+          var date = moment(form.createTime).format("YYYY-MM-DD");
+          form.createTime = date;
+          form.columnId = a;
+          addArticle(form).then((res) => {
+            console.log(res);
+            getColumnarticle(a, 1).then((res) => {
+              this.$store.state.article = res;
+              this.$router.push(
+                "/home/contentmange/" + a
+              );
+            });
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    linkAdd(formName) {
+         let a=localStorage.getItem('columnid')
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          var form = { ...this.linkForm };
+          var date = moment(form.createTime).format("YYYY-MM-DD");
+          form.createTime = date;
+          form.columnId = a;
+          addArticle(form).then((res) => {
+            console.log(res);
+            getColumnarticle(a, 1).then((res) => {
+              this.$store.state.article = res;
+              this.$router.push(
+                "/home/contentmange/" + a
+              );
+            });
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    cancel() {
+      let a=localStorage.getItem('columnid')
+      this.$router.push("/home/contentmange/" + a);
+    },
+  },
+  computed: {
+    show() {
+      if (localStorage.getItem("style")) {
+        return localStorage.getItem("style");
+      }
+      else{
+        return ''
+      }
+    },
+  },
+
+  mounted() {
+    var date = new Date();
+    date = moment(date).format("YYYY-MM-DD");
+    this.linkForm.createTime = date;
+    this.photoForm.createTime = date;
+    this.videoForm.createTime = date;
+    this.common();
+  },
+};
+</script>
+
+<style lang="less">
+.photocontent {
+  height: 100%;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    height: 50px;
+    line-height: 50px;
+    div {
+      span {
+        color: skyblue;
+      }
+      span:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .contentbottom {
+    margin-top: 20px;
+    .el-input__inner {
+      width: 350px;
+    }
+  }
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+  }
+  .avatar {
+    height: 178px;
+    display: block;
+  }
+  .video-avatar {
+    height: 200px;
+  }
+  .ql-container {
+    height: 300px;
+  }
+  .footer {
+    width: 200px;
+    margin: 40px auto;
+  }
+}
+</style>
--- a/src/views/title/Editphoto.vue
+++ b/src/views/title/Editphoto.vue
@ -0,0 +1,744 @@
+<template>
+  <div>
+    <div class="photocontent" v-if="show == 1">
+      <div class="top">
+        <span class="title"
+          ><i class="el-icon-tickets"></i>图文样式内容编辑</span
+        >
+        <div>
+          <span @click="back()">&lt;&emsp;返回</span>
+        </div>
+      </div>
+      <div class="contentbottom">
+        <el-form :model="photoForm">
+          <el-form-item label="封面图" :label-width="formLabelWidth">
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              :show-file-list="false"
+              :on-success="handlePhotoSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="photoForm.bgImgUrl"
+                :src="photoForm.bgImgUrl"
+                class="avatar"
+                width="200px"
+              />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="文章标题" :label-width="formLabelWidth">
+            <el-input v-model="photoForm.title" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="日期" :label-width="formLabelWidth">
+            <el-col>
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="photoForm.createTime"
+                style="width: 100%"
+              ></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="来源" :label-width="formLabelWidth">
+            <el-input
+              v-model="photoForm.description"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="文章内容" :label-width="formLabelWidth">
+            <!-- 富文本编辑器 -->
+            <quill-editor
+              ref="text"
+              v-model="photoForm.textContent"
+              class="myQuillEditor"
+              :options="editorOption"
+            />
+            <el-upload class="avatar-uploaders"
+                       action="http://47.107.237.129/msdw/aliyun/uploadFiles"
+                       name="img"
+                       :headers="headerObj"
+                       :show-file-list="false"
+                       :on-success="uploadSuccess"
+                       :on-error="uploadError"
+                       :before-upload="beforeAvatarUpload"> </el-upload>
+          </el-form-item>
+
+          <div class="footer">
+            <el-button type="primary" @click="photoEdit()">确认</el-button>
+            <el-button type="info" @click="cancel()">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="photocontent" v-else-if="show == 0">
+      <div class="top">
+        <span class="title"
+          ><i class="el-icon-tickets"></i>视频样式内容编辑</span
+        >
+        <div>
+          <span @click="back()">&lt;&emsp;返回</span>
+          <!-- <a href="" >&lt;&emsp;返回1</a>  -->
+        </div>
+      </div>
+      <div class="contentbottom">
+        <el-form :model="videoForm">
+          <el-form-item label="封面图" :label-width="formLabelWidth">
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="videoForm.bgImgUrl"
+                :src="videoForm.bgImgUrl"
+                class="avatar"
+                width="200px"
+              />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="文章标题" :label-width="formLabelWidth">
+            <el-input v-model="videoForm.title" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="日期" :label-width="formLabelWidth">
+            <el-col>
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="videoForm.createTime"
+                style="width: 100%"
+              ></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="来源" :label-width="formLabelWidth">
+            <el-input
+              v-model="videoForm.description"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="视频" :label-width="formLabelWidth">
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
+              v-bind:on-progress="uploadVideoProcess"
+              v-bind:on-success="handleVideoSuccess"
+              v-bind:before-upload="beforeUploadVideo"
+              v-bind:show-file-list="false"
+            >
+              <video
+                v-if="videoForm.videoUrl != '' && !videoFlag"
+                v-bind:src="videoForm.videoUrl"
+                class="avatar video-avatar"
+                controls="controls"
+              >
+                您的浏览器不支持视频播放
+              </video>
+              <i
+                v-else-if="videoForm.videoUrl == '' && !videoFlag"
+                class="el-icon-plus avatar-uploader-icon"
+              ></i>
+              <el-progress
+                v-if="videoFlag == true"
+                type="circle"
+                v-bind:percentage="videoUploadPercent"
+                style="margin-top: 7px"
+              ></el-progress>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="文章内容" :label-width="formLabelWidth">
+            <quill-editor
+              ref="text"
+              v-model="videoForm.textContent"
+              class="myQuillEditor"
+              :options="editorOption"
+            />
+            <el-upload class="avatar-uploaders"
+                       action="http://47.107.237.129/msdw/aliyun/uploadFiles"
+                       name="img"
+                       :headers="headerObj"
+                       :show-file-list="false"
+                       :on-success="uploadSuccess"
+                       :on-error="uploadError"
+                       :before-upload="beforeAvatarUpload"> </el-upload>
+          </el-form-item>
+          <div class="footer">
+            <el-button type="primary" @click="videoEdit()">确认</el-button>
+            <el-button type="info" @click="cancel()">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="photocontent" v-if="show == 2">
+      <div class="top">
+        <span class="title"><i class="el-icon-tickets"></i>链接内容编辑</span>
+        <div>
+          <span @click="back()">&lt;&emsp;返回</span>
+        </div>
+      </div>
+      <div class="contentbottom">
+        <el-form :model="linkForm">
+          <el-form-item label="封面图" :label-width="formLabelWidth">
+            <el-upload
+              class="avatar-uploader"
+              :action="joggle"
+              :show-file-list="false"
+              :on-success="handleLinkSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="linkForm.bgImgUrl"
+                :src="linkForm.bgImgUrl"
+                class="avatar"
+                width="200px"
+              />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="日期" :label-width="formLabelWidth">
+            <el-col>
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="linkForm.createTime"
+                style="width: 100%"
+              ></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item
+            label="连接类型"
+            :label-width="formLabelWidth"
+            prop="linkType"
+          >
+            <el-radio-group v-model="linkForm.linkType">
+              <el-radio :label="0">站内链接</el-radio>
+              <el-radio :label="1">站外链接</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            prop="in"
+            label="站内链接"
+            :label-width="formLabelWidth"
+            v-if="linkForm.linkType == 0"
+          >
+            <el-cascader
+              :change-on-select="true"
+              :props="defaultParams"
+              :options="options"
+              v-model="linkForm.linkColumnId"
+              @change="handleChange"
+              :clearable="true"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item
+            label="文章"
+            :label-width="formLabelWidth"
+            v-if="linkForm.linkType == 0"
+          >
+            <el-select v-model="linkForm.linkArticleId" placeholder="请选择">
+              <el-option
+                v-for="item in option"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            prop="out"
+            label="站外链接"
+            :label-width="formLabelWidth"
+            v-if="linkForm.linkType == 1"
+          >
+            <el-input
+              v-model="linkForm.linkUrl"
+              placeholder="请输入链接"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="文章标题" :label-width="formLabelWidth">
+            <el-input v-model="linkForm.title" autocomplete="off"></el-input>
+          </el-form-item>
+          <div class="footer">
+            <el-button type="primary" @click="linkEdit()">确认</el-button>
+            <el-button type="info" @click="cancel()">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { editArticle } from "@/apis/request.js";
+import { quillEditor } from "vue-quill-editor";
+import { allColumn } from "@/apis/request.js";
+import moment from "moment";
+import { joggle } from "@/apis/request.js";
+import { getColumnallarticle } from "@/apis/request.js";
+import { getColumnarticle } from "@/apis/request.js";
+export default {
+  components: {
+    quillEditor,
+  },
+  data() {
+
+    const toolbarOptions = [
+      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+      ['blockquote', 'code-block'],
+
+      [{ header: 1 }, { header: 2 }], // custom button values
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+      [{ direction: 'rtl' }], // text direction
+
+      [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+      [{ font: [] }],
+      [{ align: [] }],
+      ['link', 'image', 'video'],
+      ['clean'] // remove formatting button
+  ]
+    return {
+      joggle,
+      defaultParams: {
+        label: "columnName",
+        value: "id",
+        children: "children",
+      },
+      value: "",
+      videoFlag: false,
+      //是否显示进度条
+      videoUploadPercent: "",
+      //进度条的进度，
+      isShowUploadVideo: false,
+      //显示上传按钮
+      options: [
+        {
+          value: "zhinan",
+          label: "指南",
+          children: [
+            {
+              value: "shejiyuanze",
+              label: "设计原则",
+              children: [
+                {
+                  value: "yizhi",
+                  label: "一致",
+                },
+                {
+                  value: "fankui",
+                  label: "反馈",
+                },
+                {
+                  value: "xiaolv",
+                  label: "效率",
+                },
+                {
+                  value: "kekong",
+                  label: "可控",
+                },
+              ],
+            },
+            {
+              value: "daohang",
+              label: "导航",
+              children: [
+                {
+                  value: "cexiangdaohang",
+                  label: "侧向导航",
+                },
+                {
+                  value: "dingbudaohang",
+                  label: "顶部导航",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: "ziyuan",
+          label: "资源",
+          children: [
+            {
+              value: "axure",
+              label: "Axure Components",
+            },
+            {
+              value: "sketch",
+              label: "Sketch Templates",
+            },
+            {
+              value: "jiaohu",
+              label: "组件交互文档",
+            },
+          ],
+        },
+      ],
+      option: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      photoForm: {
+        bgImgUrl: "",
+        title: "",
+        createTime: "",
+        description: "",
+        textContent: null,
+      },
+      videoForm: {
+        videoUrl: "",
+        bgImgUrl: "",
+        title: "",
+        createTime: "",
+        description: "",
+        textContent: null,
+      },
+      linkForm: {
+        bgImgUrl: "",
+        createTime: "2020-08-20",
+        linkType: 0,
+        linkUrl: "",
+        linkColumnId: 0,
+        title: "",
+        linkArticleId: "",
+      },
+      formLabelWidth: "90px",
+      editorOption: {
+        imageResize: {
+          displayStyles: {
+            backgroundColor: 'black', border: 'none', color: 'white'
+          },
+          modules: ['Resize', 'DisplaySize', 'Toolbar']
+        },toolbar: {
+          // 工具栏
+          container: toolbarOptions.toolbarOptions,
+          handlers: { 'image': function (value) {
+            if (value) {
+              // upload点击上传事件
+              document.querySelector('.avatar-uploaders input').click()
+            } else {
+              this.quill.format('image', false)
+            }
+          }}
+        }
+      },
+      isClear: false,
+      headerObj:{
+
+      },
+    };
+  },
+  methods: {
+    uploadError(){
+      console.log('====')
+    },
+    uploadSuccess(res) {
+      console.log(res)
+      var dt = res.result
+      let quill = this.$refs.quillEditor.quill
+      // 如果上传成功
+      if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index
+        // 插入图片 dt.url为服务器返回的图片地址
+        quill.insertEmbed(length, 'image', this.glAPI + dt.url)
+        // 调整光标到最后
+        quill.setSelection(length + 1)
+      } else {
+        this.$message.error('图片插入失败')
+      }// loading加载隐藏
+      this.quillUpdateImg = false
+    },
+    handleChange(value) {
+      let index = value.length - 1;
+      let id = value[index];
+      this.linkForm.linkColumnId = value[index];
+      console.log(id, value, 1);
+      getColumnallarticle(id).then((res) => {
+        this.option = res.map((res) => {
+          return {
+            value: res.id,
+            label: res.title,
+          };
+        });
+        console.log(res, 666);
+      });
+    },
+    common() {
+      allColumn().then((res) => {
+        this.options = this.getTreeData(res);
+        if (this.linkForm.linkColumnId) {
+          getColumnallarticle(this.linkForm.linkColumnId).then((res) => {
+            this.option = res.map((res) => {
+              return {
+                value: res.id,
+                label: res.title,
+              };
+            });
+            console.log(res, 0);
+          });
+        }
+      });
+    },
+    getTreeData(data) {
+      // 循环遍历json数据
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].children.length < 1) {
+          // children若为空数组，则将children设为undefined
+          data[i].children = undefined;
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          this.getTreeData(data[i].children);
+        }
+      }
+      return data;
+    },
+    //上传前回调
+    beforeUploadVideo(file) {
+      var fileSize = file.size / 1024 / 1024 < 50;
+      if (
+        [
+          "video/mp4",
+          "video/ogg",
+          "video/flv",
+          "video/avi",
+          "video/wmv",
+          "video/rmvb",
+          "video/mov",
+        ].indexOf(file.type) == -1
+      ) {
+        this.$message.error("上传视频格式错误!");
+        return false;
+      }
+      if (!fileSize) {
+        this.$message.error("上传视频大小不能超过 50MB!");
+        return false;
+      }
+      this.isShowUploadVideo = false;
+    },
+    //进度条
+    uploadVideoProcess(event, file) {
+      this.videoFlag = true;
+      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
+    },
+    beforeAvatarUpload(file) {
+      console.log(file);
+      const isJPG = file.type === "image/jpeg" || "image/jpg" || "image/png";
+      const isLt1M = file.size / 1024 / 1024 < 1;
+
+      if (!isJPG) {
+        this.$message.error("图片格式错误!");
+      }
+      if (!isLt1M) {
+        this.$message.error("图片大小不能超过 1MB!");
+      }
+      return isJPG && isLt1M;
+    },
+    //上传成功回调
+    handleVideoSuccess(res) {
+      this.isShowUploadVideo = true;
+      this.videoFlag = false;
+      this.videoUploadPercent = 0;
+      this.videoForm.videoUrl = res.data.fileUrl;
+    },
+    change(val) {
+      console.log(val);
+    },
+    submit() {
+      console.log(this.$refs.text.value);
+    },
+    handlePhotoSuccess(res) {
+      this.photoForm.bgImgUrl = res.data.fileUrl;
+    },
+    handleAvatarSuccess(res) {
+      this.videoForm.bgImgUrl = res.data.fileUrl;
+      console.log(res);
+    },
+    handleLinkSuccess(res) {
+      this.linkForm.bgImgUrl = res.data.fileUrl;
+    },
+    back() {
+      let a = localStorage.getItem("columnid");
+      this.$router.push("/home/contentmange/" + a);
+      return false;
+    },
+    photoEdit() {
+      let a = localStorage.getItem("columnid");
+      let editid = JSON.parse(localStorage.getItem("row"));
+      var form = { ...editid, ...this.photoForm };
+      var date = moment(form.createTime).format("YYYY-MM-DD");
+      form.createTime = date;
+      var arr = [];
+      arr.push(form);
+      console.log(arr);
+      editArticle(arr).then((res) => {
+        console.log(res);
+        getColumnarticle(a, 1).then((res) => {
+          this.$store.state.article = res;
+          this.$router.push("/home/contentmange/" + a);
+        });
+      });
+    },
+    videoEdit() {
+      let a = localStorage.getItem("columnid");
+      let editid = JSON.parse(localStorage.getItem("row"));
+      var form = { editid, ...this.videoForm };
+      var date = moment(form.createTime).format("YYYY-MM-DD");
+      form.createTime = date;
+      var arr = [];
+      arr.push(form);
+      console.log(arr);
+      editArticle(arr).then((res) => {
+        console.log(res);
+        getColumnarticle(a, 1).then((res) => {
+          this.$store.state.article = res;
+          this.$router.push("/home/contentmange/" + a);
+        });
+      });
+    },
+    linkEdit() {
+      let a = localStorage.getItem("columnid");
+      let editid = JSON.parse(localStorage.getItem("row"));
+      var form = { ...editid, ...this.linkForm };
+      var date = moment(form.createTime).format("YYYY-MM-DD");
+      form.createTime = date;
+      var arr = [];
+      arr.push(form);
+      console.log(arr, 9);
+      editArticle(arr).then((res) => {
+        console.log(res);
+        getColumnarticle(a, 1).then((res) => {
+          this.$store.state.article = res;
+          this.$router.push("/home/contentmange/" + a);
+        });
+      });
+    },
+    cancel() {
+      let a = localStorage.getItem("columnid");
+      this.$router.push("/home/contentmange/" + a);
+    },
+  },
+  computed: {
+    show() {
+      if (localStorage.getItem("style")) {
+        return localStorage.getItem("style");
+      } else {
+        return "";
+      }
+    },
+  },
+  mounted() {
+    let editid = JSON.parse(localStorage.getItem("row"));
+    if (localStorage.getItem("style") == 1) {
+      this.photoForm.bgImgUrl = editid.bgImgUrl;
+      this.photoForm.title = editid.title;
+      this.photoForm.createTime = editid.createTime;
+      this.photoForm.description = editid.description;
+      this.photoForm.textContent = editid.textContent;
+    }
+    if (localStorage.getItem("style") == 0) {
+      this.videoForm.bgImgUrl = editid.bgImgUrl;
+      this.videoForm.title = editid.title;
+      this.videoForm.videoUrl = editid.videoUrl;
+      this.videoForm.createTime = editid.createTime;
+      this.videoForm.description = editid.description;
+      this.videoForm.textContent = editid.textContent;
+    }
+    if (localStorage.getItem("style") == 2) {
+      this.linkForm.bgImgUrl = editid.bgImgUrl;
+      this.linkForm.title = editid.title;
+      this.linkForm.createTime = editid.createTime;
+      this.linkForm.description = editid.description;
+      this.linkForm.linkType = editid.linkType;
+      this.linkForm.linkUrl = editid.linkUrl;
+      this.linkForm.linkColumnId = editid.linkColumnId;
+      this.linkForm.linkArticleId = editid.linkArticleId;
+    }
+    this.common();
+  },
+};
+</script>
+
+<style lang="less">
+.photocontent {
+  height: 100%;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    height: 50px;
+    line-height: 50px;
+    div {
+      span {
+        color: skyblue;
+      }
+      span:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .contentbottom {
+    margin-top: 20px;
+    .el-input__inner {
+      width: 350px;
+    }
+  }
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+  }
+  .avatar {
+    height: 178px;
+    display: block;
+  }
+  .video-avatar {
+    height: 200px;
+  }
+  .ql-container {
+    height: 300px;
+  }
+  .footer {
+    width: 200px;
+    margin: 0 auto;
+  }
+}
+</style>
--- a/start.bat
+++ b/start.bat
@ -0,0 +1 @@
+yarn serve
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,20 @@
+module.exports = {
+    //基本路径
+  publicPath: "./",
+  outputDir: "dist", 
+  //放置静态资源目录
+  assetsDir: "static",
+    css: {
+        loaderOptions: {
+            css: {
+                // options here will be passed to css-loader
+            },
+            postcss: {
+                // options here will be passed to postcss-loader
+                plugins: [require('postcss-px2rem')({
+                    remUnit: 54
+                })]
+            }
+        }
+    }
+}
--- a/yarn.lock
+++ b/yarn.lock