diff --git a/src/api/subject.js b/src/api/subject.js
new file mode 100644
index 0000000..7c1dd47
--- /dev/null
+++ b/src/api/subject.js
@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// 查询主题列表
+export function listSubject(query) {
+  return request({
+    url: '/special/specialBackList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 新增主题
+export function addSubject(data) {
+  return request({
+    url: '/special/addSpecial',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改主题
+export function updateSubject(data) {
+  return request({
+    url: '/special/specialEdit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除主题
+export function delSubject(data) {
+  return request({
+    url: '/special/specialDel',
+    method: 'post',
+    data: data
+  })
+}
+
+
+
+// 查询主题文章列表
+export function listSubjectArticle(query) {
+  return request({
+    url: '/special/specialBackListMore',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 新增文章
+export function addSubjectArticle(data) {
+  return request({
+    url: '/special/specialBind',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除主题
+export function delSubjectArticle(data) {
+  console.log(data)
+  return request({
+    url: '/special/specialSolution',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/router/routes.js b/src/router/routes.js
index c81da2b..814e48f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -40,37 +40,55 @@ const routes = [
       path: '/dashboard',
       component: () => import('@/views/dashboard'),
     }],
-    meta: { title: '欢迎页', icon: 'form', noCache: true}
+    meta: { title: '欢迎页', icon: 'form', noCache: true }
   },
   {
     path: '/menuManage',
     component: Layout,
     children: [{
-        path: 'index',
-        name: 'MenuManage',
-        component: () => import('@/views/menu'),
-        meta: { title: '菜单管理', icon: 'tree-table', noCache: true}
+      path: 'index',
+      name: 'MenuManage',
+      component: () => import('@/views/menu'),
+      meta: { title: '菜单管理', icon: 'tree-table', noCache: true }
     }]
   },
 
   { path: '*', component: Notfound, hidden: true },
   {
-      path: '/article',
-      component: Layout,
-      name: 'article',
-      meta: { title: '内容中心', icon: 'form' },
+    path: '/article',
+    component: Layout,
+    name: 'article',
+    meta: { title: '内容中心', icon: 'form' },
+    children: [{
+      path: 'index',
+      name: 'articleIndex',
+      component: () => import('@/views/article/index'),
+      meta: { title: '文章列表', icon: 'form', noCache: true }
+    }, {
+      path: 'category',
+      name: 'articleCategory',
+      component: () => import('@/views/article/category'),
+      meta: { title: '文章类别', icon: 'form', noCache: true }
+    },
+    {
+      path: 'subject',
+      component: () => import('@/views/article/subject/layout'),
+      name: 'subject',
+      meta: { title: '专题管理', icon: 'form' },
       children: [{
-          path: 'index',
-          name: 'articleIndex',
-          component: () => import('@/views/article/index'),
-          meta: { title: '文章列表', icon: 'form', noCache: true}
-        },{
-          path: 'category',
-          name: 'articleCategory',
-          component: () => import('@/views/article/category'),
-          meta: { title: '文章类别', icon: 'form', noCache: true}
+        path: 'list',
+        name: 'subjectIndex',
+        component: () => import('@/views/article/subject/index'),
+        meta: { title: '专题列表', icon: 'form', noCache: true }
+      }, {
+        path: 'article',
+        name: 'subjectArticle',
+        component: () => import('@/views/article/subject/article'),
+        meta: { title: '专题文章', icon: 'form', noCache: true }
       },
       ]
+    },
+    ]
   },
 
   {
@@ -79,40 +97,40 @@ const routes = [
     name: 'AD',
     meta: { title: '广告中心', icon: 'form' },
     children: [{
-        path: 'index',
-        name: 'adIndex',
-        component: () => import('@/views/ad/index'),
-        meta: { title: '首页管理', icon: 'form', noCache: true}
-      }
+      path: 'index',
+      name: 'adIndex',
+      component: () => import('@/views/ad/index'),
+      meta: { title: '首页管理', icon: 'form', noCache: true }
+    }
     ]
-},
+  },
 
-{
-  path: '/admin',
-  component: Layout,
-  name: 'Admin',
-  meta: { title: '用户', icon: 'form' },
-  children: [{
+  {
+    path: '/admin',
+    component: Layout,
+    name: 'Admin',
+    meta: { title: '用户', icon: 'form' },
+    children: [{
       path: 'index',
       name: 'AdminIndex',
       component: () => import('@/views/admin/index'),
-      meta: { title: '管理员管理', icon: 'form', noCache: true}
+      meta: { title: '管理员管理', icon: 'form', noCache: true }
     }
-  ]
-},
-{
-  path: '/role',
-  component: Layout,
-  name: 'Role',
-  meta: { title: '角色', icon: 'form' },
-  children: [{
+    ]
+  },
+  {
+    path: '/role',
+    component: Layout,
+    name: 'Role',
+    meta: { title: '角色', icon: 'form' },
+    children: [{
       path: 'index',
       name: 'RoleIndex',
       component: () => import('@/views/role/index'),
-      meta: { title: '角色管理', icon: 'form', noCache: true}
+      meta: { title: '角色管理', icon: 'form', noCache: true }
     }
-  ]
-},
+    ]
+  },
 
 
   ...warning,
@@ -121,10 +139,10 @@ const routes = [
     path: '/updateVersion',
     component: Layout,
     children: [{
-        path: 'index',
-        name: 'UpdateVersion',
-        component: () => import('@/views/updateVersion/updateVersion'),
-        meta: { title: '版本更新', icon: 'form', noCache: true}
+      path: 'index',
+      name: 'UpdateVersion',
+      component: () => import('@/views/updateVersion/updateVersion'),
+      meta: { title: '版本更新', icon: 'form', noCache: true }
     }]
   },
   ...playground,
diff --git a/src/views/article/subject/article.vue b/src/views/article/subject/article.vue
new file mode 100644
index 0000000..6c6f264
--- /dev/null
+++ b/src/views/article/subject/article.vue
@@ -0,0 +1,323 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button
+        class="filter-item el-button el-button--primary el-button--mini"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+        >添加文章</el-button>
+    </div>
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column label="ID" prop="id" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="专题" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.special_id | getSubjectName(subject) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.article_title }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="封面图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.img" height="100" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.create_time }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
+    <!-- 添加或修改分类对话框 -->
+    <el-drawer
+      ref="drawer"
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogFormVisible"
+      direction="rtl"
+      custom-class="drawer"
+      size="950px"
+    >
+      <div class="drawer__content">
+        <el-form
+          ref="dataForm"
+          :model="temp"
+          label-position="left"
+          label-width="70px"
+          style
+        >
+          <el-form-item label="专题">
+            <el-select v-model="temp.special_id" placeholder="选择专题">
+              <el-option
+                v-for="(item, index) in subject"
+                :key="index"
+                :label="item.title"
+                :value="item.special_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关联文章">
+            <el-select
+              v-model="temp.article_id"
+              remote
+              :loading="searchArticleLoading"
+              :remote-method="remoteMethod"
+              reserve-keyword
+              placeholder="请输入关键字搜索"
+              filterable
+              :clearable="true"
+              @change="handleSelectBranch"
+            >
+              <el-option
+                v-for="(item, index) in articles"
+                :key="index"
+                :label="item.title"
+                :value="item.article_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div class="drawer__footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import {
+  listSubject,
+  listSubjectArticle,
+  addSubjectArticle,
+  delSubjectArticle,
+} from "@/api/subject";
+
+import {
+  searchArticle,
+} from "@/api/ad";
+
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+
+export default {
+  name: "adIndex",
+  components: { Pagination },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        special_id: undefined
+      },
+      subject: [],
+      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
+      temp: {
+        id: undefined,
+        special_id: undefined,
+        article_id: undefined,
+      },
+      dialogFormVisible: false,
+      dialogStatus: "",
+      textMap: {
+        update: "编辑",
+        create: "添加",
+      },
+      rules: {
+        // title: [
+        //   { required: true, message: "title is required", trigger: "blur" },
+        // ],
+      },
+      downloadLoading: false,
+      searchArticleLoading: false,
+      articles: [],
+      validation: true,
+    };
+  },
+  created() {
+    this.getSubjectList()
+    this.getList();
+  },
+  filters: {
+    getSubjectName(id, subject) {
+      for (var i = 0; i < subject.length; i++) {
+        if (id == subject[i].special_id) {
+          return subject[i].title;
+        }
+      }
+      return "";
+    },
+  },
+  methods: {
+    getSubjectList() {
+      this.listLoading = true;
+      listSubject(this.listQuery).then((response) => {
+        this.subject = response.data;
+      });
+    },
+    getList() {
+      this.listLoading = true;
+      listSubjectArticle(this.listQuery).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.count;
+
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 1.5 * 1000);
+      });
+    },
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: "操作Success",
+        type: "success",
+      });
+      row.status = status;
+    },
+    resetTemp() {
+      this.temp = {
+         id: undefined,
+         special_id: undefined,
+         article_id: undefined,
+      };
+    },
+    submitForm() {
+      if (this.dialogStatus == "create") {
+        this.createData();
+      } else if (this.dialogStatus == "update") {
+        this.updateData();
+      }
+    },
+    handleCreate() {
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
+    },
+    createData() {
+      // this.$refs['dataForm'].validate((valid) => {
+      //   if (valid) {
+      addSubjectArticle(this.temp).then(() => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "添加成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
+        this.getList();
+      });
+      //   }
+      // })
+    },
+    handleDelete({ article_title, article_id, special_id }) {
+      this.$confirm('是否确认删除名称为"' + article_title + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          console.log("del11");
+          return delSubjectArticle({ article_id, special_id });
+        })
+        .then((response) => {
+          if (response.code === 200) {
+            this.$message({
+              message: "删除成功",
+              type: "success",
+              duration: 2 * 1000,
+            });
+            this.open = false;
+            this.getList();
+          } else {
+            this.$message({
+              message: "删除失败",
+              type: "error",
+              duration: 2 * 1000,
+            });
+          }
+        })
+        .catch(function () {});
+    },
+    
+    handleSelectBranch(item) {
+      console.log("远程搜索选中后返回的item：：：：：即value的值");
+      console.log(item);
+      //如果要获取选择的 id或者名字   从item中取值
+      this.$set(this.temp, "article_id", item);
+    },
+    // 搜索模糊查询数据下拉框
+    remoteMethod(query) {
+      var that = this;
+      searchArticle(query)
+        .then(function (res) {
+          //将取到的值进行遍历
+          that.articles = res.data;
+          that.list = that.states.map((item) => {
+            // item.uid     item.name根据接口里的关键字
+            return { value: item.uid, label: item.name };
+          });
+        })
+        .catch(function (err) {
+          console.log(err);
+        });
+      return;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  .filter-container {
+    margin-left: 5px;
+    margin-bottom: 6px;
+  }
+  ::v-deep .el-drawer__body {
+    padding: 20px;
+  }
+}
+</style>
+ 
\ No newline at end of file
diff --git a/src/views/article/subject/index.vue b/src/views/article/subject/index.vue
new file mode 100644
index 0000000..06d020d
--- /dev/null
+++ b/src/views/article/subject/index.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button
+        class="filter-item el-button el-button--primary el-button--mini"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+        >添加专题</el-button
+      >
+    </div>
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column label="ID" prop="id" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.special_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.title }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="封面图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.img" height="100" />
+        </template>
+      </el-table-column>
+      <el-table-column label="banner图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.image" height="100" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.create_time }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改分类对话框 -->
+    <el-drawer
+      ref="drawer"
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogFormVisible"
+      direction="rtl"
+      custom-class="drawer"
+      size="950px"
+    >
+      <div class="drawer__content">
+        <el-form
+          ref="dataForm"
+          :model="temp"
+          label-position="left"
+          label-width="70px"
+          style
+        >
+          <el-form-item label="状态">
+            <el-select v-model="temp.is_show" placeholder="选择状态">
+              <el-option
+                v-for="(item, index) in statics"
+                :key="index"
+                :label="item.name"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="temp.title" />
+          </el-form-item>
+          <el-form-item label="封面" prop="img" required>
+            <img
+              v-if="temp.img"
+              :src="temp.img"
+              class="el-upload el-upload--picture-card"
+              style="float: left; width: auto"
+            />
+            <el-upload
+              ref="sys_app_logo"
+              :on-success="uploadImgSuccess"
+              :on-error="uploadError"
+              :action="uploadAction"
+              style="float: left"
+              list-type="picture-card"
+              :show-file-list="false"
+              :before-upload="validationImg"
+            >
+              <i class="el-icon-plus" />
+            </el-upload>
+          </el-form-item>
+
+          <el-form-item label="banner" prop="image" required>
+            <img
+              v-if="temp.image"
+              :src="temp.image"
+              class="el-upload el-upload--picture-card"
+              style="float: left; width: auto"
+            />
+            <el-upload
+              ref="sys_app_logo"
+              :on-success="uploadSuccess"
+              :on-error="uploadError"
+              :action="uploadAction"
+              style="float: left"
+              list-type="picture-card"
+              :show-file-list="false"
+              :before-upload="validationImages"
+            >
+              <i class="el-icon-plus" />
+            </el-upload>
+          </el-form-item>
+
+        </el-form>
+        <div class="drawer__footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import {
+  listSubject,
+  addSubject,
+  updateSubject,
+  delSubject,
+} from "@/api/subject";
+
+export default {
+  name: "SubjectIndex",
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+      },
+      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
+      temp: {
+        id: undefined,
+        title: "",
+        is_show: 1,
+        title: "",
+        img: "",
+        image: "",
+      },
+      statics: [
+        { name: "显示", value: 1 },
+        { name: "隐藏", value: 2 },
+      ],
+      dialogFormVisible: false,
+      dialogStatus: "",
+      textMap: {
+        update: "编辑",
+        create: "添加",
+      },
+      rules: {
+        title: [
+          { required: true, message: "title is required", trigger: "blur" },
+        ],
+      },
+      downloadLoading: false,
+      searchArticleLoading: false,
+      articles: [],
+      validation: true,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 验证图片宽高
+    async validationImg(file) {
+      let res = await this.$getImgWidth(file, 'subjectCover');
+      this.validation = res;
+      return res;
+    },
+    async validationImages(file) {
+      let res = await this.$getImgWidth(file, 'subjectBanner');
+      this.validation = res;
+      return res;
+    },
+    getList() {
+      this.listLoading = true;
+      listSubject(this.listQuery).then((response) => {
+        this.list = response.data;
+
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 1.5 * 1000);
+      });
+    },
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: "操作Success",
+        type: "success",
+      });
+      row.status = status;
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        title: "",
+        is_show: 1,
+        title: "",
+        img: "",
+        image: "",
+      };
+    },
+    submitForm() {
+      if (this.dialogStatus == "create") {
+        this.createData();
+      } else if (this.dialogStatus == "update") {
+        this.updateData();
+      }
+    },
+    handleCreate() {
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
+      // this.$nextTick(() => {
+      //   this.$refs['dataForm'].clearValidate()
+      // })
+    },
+    createData() {
+      // this.$refs['dataForm'].validate((valid) => {
+      //   if (valid) {
+      addSubject(this.temp).then(() => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "添加成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
+        this.getList();
+      });
+      //   }
+      // })
+    },
+    handleUpdate(row) {
+      // let special_id = row.special_id
+      // fetchAdDetails({special_id}).then(res => {
+
+      var that = this;
+          that.temp = row;
+          this.dialogStatus = "update";
+          this.dialogFormVisible = true;
+    },
+    updateData() {
+      // this.$refs['dataForm'].validate((valid) => {
+      //   if (valid) {
+      updateSubject(this.temp).then(() => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "更新成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
+
+        this.getList();
+      });
+      //   }
+      // })
+    },
+    handleDelete({ title, special_id }) {
+      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          console.log("del");
+          return delSubject({ special_id });
+        })
+        .then((response) => {
+          if (response.code === 200) {
+            this.$message({
+              message: "删除成功",
+              type: "success",
+              duration: 2 * 1000,
+            });
+            this.open = false;
+            this.getList();
+          } else {
+            this.$message({
+              message: "删除失败",
+              type: "error",
+              duration: 2 * 1000,
+            });
+          }
+        })
+        .catch(function () {});
+    },
+    uploadImgSuccess(response, file) {
+      if (this.validation && response.state == "SUCCESS") {
+        this.temp.img = response.url;
+      }
+    },
+    uploadSuccess(response, file) {
+      if (this.validation && response.state == "SUCCESS") {
+        this.temp.image = response.url;
+      }
+    },
+    uploadRemove(file) {
+      const uid = file.uid;
+      const objKeyArr = Object.keys(this.listObj);
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]];
+          return;
+        }0
+      }
+    },
+    uploadError(err) {
+      this.$alert(err, "发生错误", {
+        confirmButtonText: "确定",
+        callback: (action) => {},
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  .filter-container {
+    margin-left: 5px;
+    margin-bottom: 6px;
+  }
+  ::v-deep .el-drawer__body {
+    padding: 20px;
+  }
+}
+</style>
diff --git a/src/views/article/subject/layout.vue b/src/views/article/subject/layout.vue
new file mode 100644
index 0000000..5e1bb62
--- /dev/null
+++ b/src/views/article/subject/layout.vue
@@ -0,0 +1,3 @@
+<template>
+    <router-view />
+</template>