update

src/router.js

@@ -36,29 +36,11 @@ export default new Router({
         name: '培训科目'
       }, ]
     },
-    // {
-    //   path: '/content',
-    //   name: '内容管理',
-    //   icon: 'el-icon-menu',
-    //   component: () => import('./views/Home.vue'),
-    //   show: 1,
-    //   isLeaf: 0,
-    //   children: [{
-    //       path: '/content',
-    //       component: () => import('./views/content/Index.vue'),
-    //       name: '栏目管理'
-    //     },
-    //     {
-    //       path: '/article',
-    //       component: () => import('./views/content/Article.vue'),
-    //       name: '文章管理'
-    //     },
-    //   ]
-    // },
+
     {
       path: '/',
       name: '报名信息',
-      icon:'el-icon-menu',
+      icon: 'el-icon-menu',
       component: () => import('./views/Home.vue'),
       show:1,
       isLeaf:0,
@@ -70,52 +52,96 @@ export default new Router({
     {
       path: '/',
       name: '培训计划',
-      icon:'el-icon-menu',
+      icon: 'el-icon-menu',
       component: () => import('./views/Home.vue'),
-      show:1,
-      isLeaf:0,
-      children:[
-        { path: '/classes', component: () => import('./views/classes/Index.vue'), name: '班级管理' },
-        { path: '/classes/add', component: () => import('./views/classes/Add.vue'), name: '新增班级' },
+      show: 1,
+      isLeaf: 0,
+      children: [{
+          path: '/classes',
+          component: () => import('./views/classes/Index.vue'),
+          name: '班级管理'
+        },
+        {
+          path: '/classes/add',
+          component: () => import('./views/classes/Add.vue'),
+          name: '新增班级'
+        },
       ]
     },
     {
       path: '/',
       name: '在线培训',
-      icon:'el-icon-menu',
+      icon: 'el-icon-menu',
       component: () => import('./views/Home.vue'),
-      show:1,
-      isLeaf:0,
-      children:[
-        { path: '/papers', component: () => import('./views/paper/Index.vue'), name: '试卷管理' },
-        { path: '/videos', component: () => import('./views/videos/Index.vue'), name: '视频管理' },
-        { path: '/videos/add', component: () => import('./views/videos/Add.vue'), name: '新增视频' },
+      show: 1,
+      isLeaf: 0,
+      children: [{
+          path: '/papers',
+          component: () => import('./views/paper/Index.vue'),
+          name: '试卷管理'
+        },
+        {
+          path: '/videos',
+          component: () => import('./views/videos/Index.vue'),
+          name: '视频管理'
+        },
+        {
+          path: '/videos/add',
+          component: () => import('./views/videos/Add.vue'),
+          name: '新增视频'
+        },
       ]
     },
     {
       path: '/',
       name: '用户管理',
-      icon:'el-icon-menu',
+      icon: 'el-icon-menu',
       component: () => import('./views/Home.vue'),
-      show:1,
-      isLeaf:0,
-      children:[
-        { path: '/user', component: () => import('./views/user/Index.vue'), name: '用户列表' },
+      show: 1,
+      isLeaf: 0,
+      children: [{
+        path: '/user',
+        component: () => import('./views/user/Index.vue'),
+        name: '用户列表'
+      }, ]
+    },
+    {
+      path: '/content',
+      name: '内容管理',
+      icon: 'el-icon-menu',
+      component: () => import('./views/Home.vue'),
+      show: 1,
+      isLeaf: 0,
+      children: [{
+          path: '/content',
+          component: () => import('./views/content/Index.vue'),
+          name: '栏目管理'
+        },
+        {
+          path: '/article',
+          component: () => import('./views/content/Article.vue'),
+          name: '文章管理'
+        },
       ]
     },
-     { path: '/system',
+    {
+      path: '/system',
       name: '系统管理',
       icon: 'el-icon-menu',
       component: () => import('./views/Home.vue'),
       show: 1,
       isLeaf: 0,
       children: [{
-        path: '/system',
-        component: () => import('./views/system/Index.vue'),
-        name: '账号管理'
-      }, 
-      { path: '/system/add', component: () => import('./views/user/Add.vue'), name: '新增用户' },
-    ]
+          path: '/system',
+          component: () => import('./views/system/Index.vue'),
+          name: '账号管理'
+        },
+        {
+          path: '/system/add',
+          component: () => import('./views/user/Add.vue'),
+          name: '新增用户'
+        },
+      ]
     }
   ]
 })

src/views/content/Article.vue

@@ -1,13 +1,81 @@
 <style lang="scss">
+.apply {
+  .filter {
+    background: #fff;
+    padding: 20px 20px 10px;
+    border: 1px solid #ededed;
+    border-radius: 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    .el-form-item {
+      margin-bottom: 10px;
+    }
+    .el-input,
+    .el-select {
+      width: 150px;
+    }
+  }
+  thead {
+    th {
+      background: #eee;
+    }
+  }
+}
 </style>
 <template>
-  <section>文章管理</section>
+  <section class="apply">
+    <p>内容管理 > 文章管理</p>
+    <div class="filter">
+      <el-form label-width="80px" :inline="true" size="small">
+        <el-form-item label="文章标题">
+          <el-input placeholder="请输入文章标题" v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table class="table" :data="list" border style="width: 100%">
+      <el-table-column type="selection" fixed="left" width="55"></el-table-column>
+      <el-table-column prop="name" label="文章标题"></el-table-column>
+      <el-table-column prop="date" label="创建时间"></el-table-column>
+      <el-table-column prop="zip" width="400" label="操作">
+        <template>
+          <el-button size="mini" type="success">查看</el-button>
+          <el-button size="mini" type="warning">编辑</el-button>
+          <el-button size="mini" type="danger">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Page ref="pageButton" :total="total" @pageChange="gopage" />
+  </section>
 </template>
 <script>
+import Page from "../../components/Page";
 export default {
   name: "content",
+  components: {
+    Page
+  },
   data() {
-    return {};
+    return {
+      form: { name: "" },
+      total: 1,
+      list: [
+        {
+          date: "2020-05-02 12:00:00",
+          name: "文章标题1"
+        },
+        {
+          date: "2020-05-02 12:00:00",
+          name: "文章标题2"
+        },
+        {
+          date: "2020-05-02 12:00:00",
+          name: "文章标题3"
+        }
+      ]
+    };
   },
   methods: {},
   created() {}

src/views/content/Index.vue

@@ -1,13 +1,53 @@
 <style lang="scss">
+.apply {
+  .filter {
+    // height: 20px;
+  }
+}
 </style>
 <template>
-  <section>栏目管理</section>
+  <section class="apply">
+    <p>内容管理 > 栏目管理</p>
+    <div class="filter"></div>
+    <el-table class="table" :data="list" border style="width: 100%">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="name" label="栏目名称"></el-table-column>
+      <el-table-column prop="date" label="创建时间"></el-table-column>
+      <el-table-column prop="operation" width="200" label="操作">
+        <template>
+          <el-button size="mini" type="warning">编辑</el-button>
+          <el-button size="mini" type="danger">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Page ref="pageButton" :total="total" @pageChange="gopage" />
+  </section>
 </template>
 <script>
+import Page from "../../components/Page";
 export default {
   name: "content",
+  components: {
+    Page
+  },
   data() {
-    return {};
+    return {
+      total: 1,
+      list: [
+        {
+          date: "2020-05-02 12:00:00",
+          name: "机构介绍"
+        },
+        {
+          date: "2020-05-02 12:00:00",
+          name: "在线报名"
+        },
+        {
+          date: "2020-05-02 12:00:00",
+          name: "在线上课"
+        }
+      ]
+    };
   },
   methods: {},
   created() {}

src/views/system/Index.vue

@@ -1,13 +1,77 @@
 <style lang="scss">
+.apply {
+  .filter {
+    background: #fff;
+    padding: 20px 20px 10px;
+    border: 1px solid #ededed;
+    border-radius: 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    .el-form-item {
+      margin-bottom: 10px;
+    }
+    .el-input,
+    .el-select {
+      width: 150px;
+    }
+  }
+  thead {
+    th {
+      background: #eee;
+    }
+  }
+}
 </style>
 <template>
-  <section>账号管理</section>
+  <section class="apply">
+    <p>系统管理 > 账号管理</p>
+    <div class="filter">
+      <el-form label-width="80px" :inline="true" size="small">
+        <el-form-item label="用户名">
+          <el-input placeholder="请输入用户/姓名" v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+          <el-button type="primary">新增账号</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table class="table" :data="list" border style="width: 100%">
+      <el-table-column type="selection" fixed="left" width="55"></el-table-column>
+      <el-table-column prop="account" label="账号"></el-table-column>
+      <el-table-column prop="name" label="姓名"></el-table-column>
+      <el-table-column prop="permission" label="权限"></el-table-column>
+      <el-table-column prop="date" label="创建时间"></el-table-column>
+      <el-table-column prop="zip" width="300" label="操作">
+        <template>
+          <el-button size="mini" type="warning">编辑</el-button>
+          <el-button size="mini" type="danger">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Page ref="pageButton" :total="total" @pageChange="gopage" />
+  </section>
 </template>
 <script>
+import Page from "../../components/Page";
 export default {
   name: "account",
+  components: {
+    Page
+  },
   data() {
-    return {};
+    return {
+      form: { name: "" },
+      total: 1,
+      list: [
+        {
+          account: "admin",
+          name: "肖小肖",
+          permission: "内容管理，培训管理",
+          date: "2020-05-02 12:00:00"
+        }
+      ]
+    };
   },
   methods: {},
   created() {}