提交风格,版块,组件代码

src/api/module.js

@@ -0,0 +1,47 @@
+// 组件
+import request from '@/utils/request'
+
+//获取组件列表
+export const getComponentList = (data) => {
+    return request({
+        url: '/public/getComponentList',
+        method: 'post',
+        data
+    })
+}
+
+//新增组件
+export const addComponent = (data) => {
+    return request({
+        url: '/public/addComponent',
+        method: 'post',
+        data
+    })
+}
+
+//删除组件
+export const delComponent = (data) => {
+    return request({
+        url: '/public/delComponent',
+        method: 'post',
+        data
+    })
+}
+
+//编辑组件
+export const updateComponent = (data) => {
+    return request({
+        url: '/public/updateComponent',
+        method: 'post',
+        data
+    })
+}
+
+//获取组件详情
+export const getComponentInfo = (data) => {
+    return request({
+        url: '/public/getComponentInfo',
+        method: 'post',
+        data
+    })
+}

src/api/plate.js

@@ -0,0 +1,47 @@
+// 版块
+import request from '@/utils/request'
+
+//获取版块列表
+export const getSectorList = (data) => {
+    return request({
+        url: '/public/getSectorList',
+        method: 'post',
+        data
+    })
+}
+
+//新增版块
+export const addSector = (data) => {
+    return request({
+        url: '/public/addSector',
+        method: 'post',
+        data
+    })
+}
+
+//删除版块
+export const delSector = (data) => {
+    return request({
+        url: '/public/delSector',
+        method: 'post',
+        data
+    })
+}
+
+//编辑版块
+export const updateSector = (data) => {
+    return request({
+        url: '/public/updateSector',
+        method: 'post',
+        data
+    })
+}
+
+//获取版块详情
+export const getSectorInfo = (data) => {
+    return request({
+        url: '/public/getSectorInfo',
+        method: 'post',
+        data
+    })
+}

src/api/style.js

@@ -0,0 +1,56 @@
+// 风格
+import request from '@/utils/request'
+
+//获取风格名称
+export const getTemplateClass=(data)=>{
+    return request({
+        url:'/public/getTemplateClass',
+        method:'post',
+        data
+    })
+}
+
+//获取风格列表
+export const getTemplateList = (data) => {
+    return request({
+        url: '/public/getTemplateList',
+        method: 'post',
+        data
+    })
+}
+
+//新增风格
+export const addTemplate = (data) => {
+    return request({
+        url: '/public/addTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//删除风格
+export const delTemplate=(data)=>{
+    return request({
+        url:'/public/delTemplate',
+        method:'post',
+        data
+    })
+}
+
+//更新风格
+export const updateTemplate = (data) => {
+    return request({
+        url: '/public/updateTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//获取风格详情
+export const getTemplateInfo=(data)=>{
+    return request({
+        url:'/public/getTemplateInfo',
+        method:'post',
+        data
+    })
+}

src/router/index.js

@@ -386,220 +386,220 @@ export const constantRoutes = [
       }
     ]
   },
-    // ----fr-课题分类
-     {
-      path: '/topicType',
-      component: Layout,
-      children: [
-        {
-          name: '',
-          path: '',
-          component: () => import('@/views/chat/topicType'),
-          meta: {
-            title: '课题分类',
-            hidden: true,
-            breadcrumb: true
-          }
-        }
-      ]
-    },
-    {
-      path: '/surveyList',
-      component: Layout,
-      children: [
-        {
-          name: '',
-          path: '',
-          component: () => import('@/views/news/surveyList'),
-          meta: {
-            title: '投票列表',
-            hidden: true,
-            breadcrumb: true
-          }
-        }
-      ]
-    },
-    ,
-    {
-      path: '/jobRecruitingList',
-      component: Layout,
-      children: [
-        {
-         name: '',
-         path: '',
-         component: () => import('@/views/job/jobRecruitingList'),
-         meta: {
-         title: '招聘列表',
-         hidden: true,
-         breadcrumb: true
-         }
-        }
-      ]
-    },
-    {
-      path: '/checkjobRecruitingList',
-      component: Layout,
-      children: [
-        {
-         name: '',
-         path: '',
-         component: () => import('@/views/job/checkjobRecruitingList'),
-         meta: {
-         title: '招聘审核列表',
-         hidden: true,
-         breadcrumb: true
-         }
-        }
-      ]
-    },
-    {
-      path: '/jobResumeList',
-      component: Layout,
-      children: [
-        {
-          name: '',
-          path: '',
-          component: () => import('@/views/job/jobResumeList'),
-          meta: {
+  // ----fr-课题分类
+  {
+    path: '/topicType',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/chat/topicType'),
+        meta: {
+          title: '课题分类',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/surveyList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/surveyList'),
+        meta: {
+          title: '投票列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  ,
+  {
+    path: '/jobRecruitingList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/job/jobRecruitingList'),
+        meta: {
+          title: '招聘列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/checkjobRecruitingList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/job/checkjobRecruitingList'),
+        meta: {
+          title: '招聘审核列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/jobResumeList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/job/jobResumeList'),
+        meta: {
           title: '我的沟通列表',
           hidden: true,
           breadcrumb: true
-          }
         }
-      ]
-    },
-    {
-      path: '/creatJob',
-      component: Layout, 
-      children: [
-        {
-         name: '',
-         path: '',
-         component: () => import('@/views/job/creatJob'),
-         meta: {
-         title: '发布职位',
-         hidden: true,
-         breadcrumb: true
-         }
-        }
-      ]
-    },
+      }
+    ]
+  },
+  {
+    path: '/creatJob',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/job/creatJob'),
+        meta: {
+          title: '发布职位',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // -----------fr---------
   // ----------liuj------------
-    {
-      path: '/goodList',
-      component: Layout,
-      children: [
-        {
-          name: '',
-          path: '',
-          component: () => import('@/views/news/GoodList'),
-          meta: {
-            title: '商品列表',
-            hidden: true,
-            breadcrumb: true
-          }
-        }
-      ]
-    },
-    {
-      path: '/goodListApply',
-      component: Layout,
-      children: [
-        {
-          name: '',
-          path: '',
-          component: () => import('@/views/news/GoodListApply'),
-          meta: {
-            title: '商品待审核列表',
-            hidden: true,
-            breadcrumb: true
-          }
-        }
-      ]
-    },
-    {
-        path: '/addGood',
-        component: Layout,
-        children: [
-          {
-            name: '',
-            path: '',
-            component: () => import('@/views/news/addGood'),
-            meta: {
-              title: '添加商品',
-              hidden: true,
-              breadcrumb: true
-            }
-          }
-        ]
-      },
- 
-    {
-        path: '/jobHuntingList',
-        component: Layout,
-        children: [
-          {
-            name: '',
-            path: '',
-            component: () => import('@/views/news/jobHuntingList'),
-            meta: {
-              title: '求职信息',
-              hidden: true,
-              breadcrumb: true
-            }
-          }
-        ]
-      },
+  {
+    path: '/goodList',
+    component: Layout,
+    children: [
       {
-        path: '/jobHuntingListApply',
-        component: Layout,
-        children: [
-          {
-            name: '',
-            path: '',
-            component: () => import('@/views/news/jobHuntingListApply'),
-            meta: {
-              title: '求职信息',
-              hidden: true,
-              breadcrumb: true
-            }
-          }
-        ]
-      },
+        name: '',
+        path: '',
+        component: () => import('@/views/news/GoodList'),
+        meta: {
+          title: '商品列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/goodListApply',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/GoodListApply'),
+        meta: {
+          title: '商品待审核列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/addGood',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/addGood'),
+        meta: {
+          title: '添加商品',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 
+  {
+    path: '/jobHuntingList',
+    component: Layout,
+    children: [
       {
-        path: '/addJobHunting',
-        component: Layout,
-        children: [
-          {
-            name: '',
-            path: '',
-            component: () => import('@/views/news/addJobHunting'),
-            meta: {
-              title: '添加求职',
-              hidden: true,
-              breadcrumb: true
-            }
-          }
-        ]
+        name: '',
+        path: '',
+        component: () => import('@/views/news/jobHuntingList'),
+        meta: {
+          title: '求职信息',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/jobHuntingListApply',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/jobHuntingListApply'),
+        meta: {
+          title: '求职信息',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/addJobHunting',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/addJobHunting'),
+        meta: {
+          title: '添加求职',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
 
   },
-       {
-        path: '/addNotice',
-        component: Layout,
-        children: [
-          {
-            name: '',
-            path: '',
-            component: () => import('@/views/news/addNotice'),
-            meta: {
-              title: '添加通知',
-              hidden: true,
-              breadcrumb: true
-            }
-          }
-        ]
+  {
+    path: '/addNotice',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/addNotice'),
+        meta: {
+          title: '添加通知',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
   },
   {
     path: '/noticeList',
@@ -686,7 +686,7 @@ export const constantRoutes = [
     ]
 
   },
-  
+
   {
     path: '/addNcomplaint',
     component: Layout,
@@ -735,7 +735,7 @@ export const constantRoutes = [
         }
       }
     ]
-  }, 
+  },
   {
     path: '/bookListApply',
     component: Layout,
@@ -751,7 +751,7 @@ export const constantRoutes = [
         }
       }
     ]
-  }, 
+  },
   {
     path: '/jobHuntingApplyList',
     component: Layout,
@@ -767,7 +767,7 @@ export const constantRoutes = [
         }
       }
     ]
-  },   
+  },
   {
     path: '/jobHuntingApplyDetil',
     component: Layout,
@@ -783,7 +783,7 @@ export const constantRoutes = [
         }
       }
     ]
-  },   
+  },
   {
     path: '/jobOpportunities',
     component: Layout,
@@ -799,7 +799,7 @@ export const constantRoutes = [
         }
       }
     ]
-  }, 
+  },
   {
     path: '/jobOpportunitiesDetails',
     component: Layout,
@@ -815,7 +815,7 @@ export const constantRoutes = [
         }
       }
     ]
-  }, 
+  },
   {
     path: '/myApplyList',
     component: Layout,
@@ -831,7 +831,7 @@ export const constantRoutes = [
         }
       }
     ]
-  }, 
+  },
   // ----------liuj------------
 
   {
@@ -1074,6 +1074,54 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/style',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/style.vue'),
+        meta: {
+          title: '风格',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/plate',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/plate.vue'),
+        meta: {
+          title: '版块',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/module',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/module.vue'),
+        meta: {
+          title: '组件',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // {
   //   path: '/documentation',
   //   component: Layout,

src/views/componentGallery/components/tableTitle.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+    }
+  }
+</style>

src/views/componentGallery/module.vue

@@ -0,0 +1,835 @@
+<!-- 组件 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">版块</div>
+                        <el-select v-model="templateName" clearable placeholder="请选择版块">
+                            <el-option v-for="item in options" :key="item.id" :label="item.sector_name"
+                                :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">组件名称</div>
+                        <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加组件</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="moduleLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="component_name" label="组件名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="component_code" label="组件代码" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联版块:" prop="plateName">
+                        <el-cascader v-model="ruleForm.plateName" :options="styleOptions" :props="cascaderProps"
+                            :disabled="this.dialogName === '编辑'" @change="handleChange" placeholder="请选择关联的版块名称"
+                            clearable>
+                        </el-cascader>
+                    </el-form-item>
+                    <el-form-item label="组件名称:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="组件代码:" prop="component_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入组件代码"
+                            :disabled="this.dialogName === '编辑'"></el-input>
+                    </el-form-item>
+                    <el-form-item label="组件展示图:" prop="component_img" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName === '编辑'">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.webLogo">
+                                    <!-- <input type="hidden" name="logo" v-model="logoUrl"> -->
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getComponentList, addComponent, delComponent, updateComponent, getComponentInfo } from '@/api/module'
+import { getSectorList } from '@/api/plate'
+import { getTemplateClass } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1 初始化数据
+            tableDivTitle: "组件列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            moduleLoading: true, //表格数据加载中
+
+            tableData: [],//表格数据
+            options: [],//版块列表
+            activeid: "", //活动id
+            styleOptions: [],//关联版块
+            plateOptions: [],//关联版块
+            selectedId: '',
+            selectedOptions: [],
+            cascaderProps: {
+                value: "id", // 指定实际表示值的字段为id
+                label: "name", // 指定实际表示显示文本的字段为name
+                expandTrigger: 'hover',
+                checkStrictly: true, // 严格模式，只能选择叶子节点
+                children: 'children',
+            },
+
+
+            // 1.2 搜索框相关
+            templateName: '', //版块名称
+            componentName: '', //组件名称
+
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            template_id: '', //关联风格id
+            sector_id: '', //关联版块id
+
+            ruleForm: {
+                plateName: '', //关联版块名称
+                component_name: '', //组件名称
+                component_code: '', //组件代码
+                component_img: '',//组件展示
+            },
+
+            rules: {
+                plateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_code: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if (this.templateName != '' || this.componentName != '') {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: '',
+                    component_name: this.componentName,
+                    sector_id: this.templateName,
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            } else {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log('组件', data);
+                    if (data.code == 200) {
+                        this.moduleLoading = false
+                        this.tableData = data.data.data
+                        this.total = data.data.total
+                    }
+                })
+            }
+        },
+        //获取版块列表
+        getList() {
+            getSectorList({
+                page: this.page,
+                page_size: 1000,
+            }).then(data => {
+                console.log('获取版块', data.data.data);
+                this.options = data.data.data
+            })
+
+            getTemplateClass().then(data => {
+                console.log("风格", data.data);
+                this.styleOptions = data.data
+                for (let item of this.styleOptions) {
+                    item.children = []
+                }
+            })
+        },
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delComponent({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 版块发生改变时 获取版块下的组件列表
+
+        // handleMouseEnter(event) {
+        //     const currentValue = this.ruleForm.plateName[this.ruleForm.plateName.length - 1];
+        //     console.log('当前级的值:', currentValue);
+        //     console.log('当前级:', event);
+        // },
+
+        handleChange(value) {
+            console.log('val', value);
+            this.template_id = value[0]
+            this.sector_id = value[1]
+            console.log("当前选中的父级：", this.template_id);
+            console.log("当前选中的子级：", this.sector_id);
+            // 当选中的选项发生变化时触发
+            if (value.length > 0) {
+                const selectedValue = value[value.length - 1]; // 获取最后一级选中的值
+                this.fetchChildren(selectedValue); // 请求对应的子选项
+
+            }
+        },
+        fetchChildren(parentValue) {
+            // 根据父级值请求子选项的接口
+            getSectorList({
+                page: this.page,
+                page_size: 1000,
+                template_class_id: parentValue
+            }).then(data => {
+                console.log('data', data.data.data);
+                this.plateOptions = data.data.data
+                this.styleOptions = this.styleOptions.map(item => {
+                    if (item.id === parentValue) {
+                        const children = []
+                        for (let item of this.plateOptions) {
+                            children.push({
+                                id: item.id,
+                                name: item.sector_name,
+                            })
+                        }
+                        item.children = children
+                    }
+                    return item
+                })
+                console.log(this.styleOptions);
+
+            })
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            getComponentList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: '',
+                component_name: this.componentName,
+                sector_id: this.templateName,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.templateName = ""
+            this.componentName = ""
+            this.page = 1
+            this.pageSize = 10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.plateName = '' //关联版块
+            this.ruleForm.component_name = '' //组件名称
+            this.ruleForm.component_code = '' //组件代码
+            this.ruleForm.component_img = '' //组件展示图
+            this.logoUrl = '' //组件展示图
+
+        },
+
+
+        //1.9 编辑
+        goEdit(id, val) {
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+            this.getList()
+
+            //数据回显
+            this.template_id = val.template_class_id
+            this.sector_id = val.sector_id
+            this.ruleForm.plateName = val.template_class_name //关联版块
+            this.ruleForm.plateName = [val.template_class_id, val.sector_id] // 组合成数组
+            this.ruleForm.plateName = [this.template_id, this.sector_id] // 组合成数组
+            // this.ruleForm.plateName = val.template_class_name+'/'+val.sector_name //组件名称
+            this.ruleForm.component_name = val.component_name //组件名称
+            this.ruleForm.component_code = val.component_code //组件代码
+            this.ruleForm.component_img = val.component_img //组件展示图
+            this.logoUrl = val.component_img //组件展示图
+        },
+
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                addComponent({
+                    template_id: this.template_id,
+                    sector_id: this.sector_id,
+                    component_name: this.ruleForm.component_name,
+                    component_img: this.ruleForm.component_img,
+                    component_code: this.ruleForm.component_code,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+
+            if (this.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                updateComponent({
+                    id: this.activeid,
+                    component_name: this.ruleForm.component_name,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.component_img = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+
+    },
+    mounted() {
+        this.getData()
+        this.getList()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .el-cascader--medium {
+        font-size: 14px;
+        line-height: 36px;
+        width: 100%;
+    }
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/componentGallery/plate.vue

@@ -0,0 +1,840 @@
+<!-- 板块 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">模板风格</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择模板风格">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">版块</div>
+                        <el-input v-model="plateName" clearable placeholder="请输入版块名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加版块</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="plateLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="sector_name" label="版块" width="">
+                        </el-table-column>
+                        <el-table-column prop="sector_code" label="版块代码" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联风格名称:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择关联风格名称"
+                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="版块名称:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="请输入版块名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="版块代码:" prop="plateCode">
+                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码"
+                            :disabled="this.dialogName === '编辑'"></el-input>
+                    </el-form-item>
+                    <el-form-item label="页面类型:" prop="pageType">
+                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
+                            :disabled="this.dialogName === '编辑'">
+                            <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{
+                                item.label
+                            }}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item label="组件展示图：" prop="image" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName === '编辑'">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.image">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getSectorList, addSector, delSector, updateSector, getSectorInfo } from '@/api/plate'
+import { getTemplateClass } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            //1.1 初始化信息 
+            tableDivTitle: "版块列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            plateLoading: true, //表格内容加载中
+
+            tableData: [],//表格数据
+            options: [],//模板风格下拉列表
+
+            // 1.2搜索框相关 
+            templateStyle: '',//风格
+            plateName: '',
+
+            pageType: '',//页面类型
+            value: '',
+            checkList: [
+                {
+                    value: '1',
+                    label: '首页',
+                },
+                {
+                    value: '2',
+                    label: '分类页',
+                },
+                {
+                    value: '3',
+                    label: '列表页',
+                },
+                {
+                    value: '4',
+                    label: '详情页',
+                },
+                {
+                    value: '5',
+                    label: '搜索页',
+                },
+                {
+                    value: '6',
+                    label: '特殊列表页',
+                },
+                {
+                    value: '7',
+                    label: '特殊详情页',
+                },
+            ],
+
+            //活动id
+            activeid: "",
+
+            newArr: [],
+
+            // 1.3 分页相关 
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            //1.4 弹框相关数据 
+            ruleForm: {
+                templateStyle: '', //关联风格名称
+                plateName: '', //版块名称
+                plateCode: '',//版块代码
+                pageType: [], //页面类型
+                image: '',//组件展示图
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                plateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                plateCode: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                pageType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                image: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            },
+
+
+            //1.5 弹窗中 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if (this.templateStyle != '' || this.plateName != '') {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle,
+                    sector_name: this.plateName,
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            } else {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.plateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+
+        },
+
+        //获取风格列表
+        getStyleList() {
+            getTemplateClass({
+                page: this.page,
+                page_size: this.pageSize
+            }).then(data => {
+                console.log('模板风格列表', data);
+                this.options = data.data
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delSector({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 多选按钮发生变化
+        changeCheckbox(val) {
+            console.log(val);
+            this.newArr = []
+            val.forEach(item => {
+                if (typeof item !== 'object' || !item.hasOwnProperty('__ob__')) {
+                    this.newArr.push(item);
+                }
+            });
+            this.pageType = JSON.stringify(this.newArr);
+            console.log(this.pageType);
+        },
+
+        changeTemplateStyle(val) {
+            console.log('风格id', val);
+            console.log(this.ruleForm.templateStyle);
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            getSectorList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: this.templateStyle,
+                sector_name: this.plateName,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.templateStyle = ""
+            this.plateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+            // console.log("状态", val.status);
+            this.hovering = false
+
+            //数据回显
+            this.ruleForm.templateStyle = val.template_class_id //关联风格名称
+            this.ruleForm.plateName = val.sector_name //版块名称
+            this.ruleForm.plateCode = val.sector_code //版块代码
+            this.ruleForm.pageType = JSON.parse(JSON.parse(val.page_type))//页面类型
+            this.ruleForm.image = val.sector_img //组件展示图 
+            this.logoUrl = val.sector_img
+        },
+
+
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.templateStyle = '' //关联风格名称
+            this.ruleForm.plateName = '' //版块名称
+            this.ruleForm.plateCode = '' //版块代码
+            this.ruleForm.pageType = [] //页面类型
+            this.ruleForm.image = '' //组件展示图
+            this.logoUrl = ''
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                addSector({
+                    template_id: this.ruleForm.templateStyle,
+                    sector_name: this.ruleForm.plateName,
+                    sector_code: this.ruleForm.plateCode,
+                    page_type: this.pageType,
+                    sector_img: this.ruleForm.image,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+
+            if (this.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                updateSector({
+                    id: this.activeid,
+                    sector_name: this.ruleForm.plateName,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.image = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+        //
+        getWebNavList(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    console.log(res.data)
+                    for (let item of res.data) {
+                        let data = {};
+                        data.key = item.id;
+                        data.value = item.id;
+                        data.label = item.website_name;
+                        dataArr.push(data)
+                    }
+                    this.webSiteList = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/componentGallery/style.vue

@@ -0,0 +1,1265 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">模板风格</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">模板名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入模板名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加风格</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="templateLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="template_class_name" label="模板风格" width="">
+                        </el-table-column>
+                        <el-table-column prop="template_name" label="模板名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="6vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="模板风格:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择模板风格">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="模板名称:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入模板名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="风格图:" prop="templateImg" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_home">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_home" :src="logoUrl_home" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="homeImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_home" class="delete-button" @click="handleDelete_home">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>首页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_classify">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_class" :src="logoUrl_class" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="classifyImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_class" class="delete-button" @click="handleDelete_class">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>分类页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_list">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_list" :src="logoUrl_list" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="listImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_list" class="delete-button" @click="handleDelete_list">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_detail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_detail" :src="logoUrl_detail" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="detailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_detail" class="delete-button"
+                                    @click="handleDelete_detail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_search">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_search" :src="logoUrl_search" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="searchImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_search" class="delete-button"
+                                    @click="handleDelete_search">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>搜索页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_sList">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sList" :src="logoUrl_sList" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="sListImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sList" class="delete-button" @click="handleDelete_sList">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_sDetail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sDetail" :src="logoUrl_sDetail" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="sDetailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sDetail" class="delete-button"
+                                    @click="handleDelete_sDetail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <!--  -->
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getTemplateClass, getTemplateList, addTemplate, delTemplate, updateTemplate, getTemplateInfo } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1  初始化数据 ---------------------------------
+            tableDivTitle: "模板列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            templateLoading: true,//页面加载中
+
+            tableData: [],//表格数据
+
+
+            //1.2 搜索框相关 ----------------------------------
+            templateStyle: '',//模板风格
+            templateName: '',//模板名称
+
+
+            // 1.3 分页相关 -----------------------------------
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            //3.4 上传logo图片 --------------------------------
+            // logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            //首页图片
+            homeImg: '',
+            logoUrl_home: '',
+            home_obj: {
+                url: '',
+                name: '首页',
+                value: '1',
+            },
+            //分类页图片
+            classifyImg: '',
+            logoUrl_class: '',
+            class_obj: {
+                url: '',
+                name: '分类页',
+                value: '2',
+            },
+            //列表页图片
+            listImg: '',
+            logoUrl_list: '',
+            list_obj: {
+                url: '',
+                name: '列表页',
+                value: '3',
+            },
+            //详情页图片
+            detailImg: '',
+            logoUrl_detail: '',
+            detail_obj: {
+                url: '',
+                name: '详情页',
+                value: '4',
+            },
+            //搜索页图片
+            searchImg: '',
+            logoUrl_search: '',
+            search_obj: {
+                url: '',
+                name: '搜索页',
+                value: '5',
+            },
+            //特殊列表页图片
+            sListImg: '',
+            logoUrl_sList: '',
+            sList_obj: {
+                url: '',
+                name: '特殊列表页',
+                value: '6',
+            },
+            //特殊详情页图片
+            sDetailImg: '',
+            logoUrl_sDetail: '',
+            sDetail_obj: {
+                url: '',
+                name: '特殊详情页',
+                value: '7',
+            },
+            //图片json
+            img_arr: [],
+
+            value: '',
+            options: [],
+
+            //活动id
+            activeid: "",
+
+            formLabelWidth: '', //广告示例图相关
+
+            // 弹框相关 -------------------------------------------
+            ruleForm: {
+                templateStyle: '', //模板风格
+                templateName: '', //模板名称
+                templateImg: [], //模板图片
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if(this.templateStyle != '' || this.templateName != ''){
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle, //模板风格id
+                    template_name: this.templateName, //模板名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }else{
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.templateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+        },
+        
+        //获取模板风格
+        getStyleList() {
+            getTemplateClass({
+                page: this.page,
+                page_size: this.pageSize
+            }).then(data => {
+                console.log('模板风格列表', data);
+                this.options = data.data
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                delTemplate({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            getTemplateList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: this.templateStyle, //模板风格id
+                template_name: this.templateName, //模板名称
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.templateStyle = ""
+            this.templateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id, val) {
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+
+            //数据回显
+            this.ruleForm.templateStyle = val.template_class_id
+            this.ruleForm.templateName = val.template_name
+            this.img_arr = JSON.parse(val.template_img)
+
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+
+            for (let item of this.img_arr) {
+                if (item.name == '首页') {
+                    this.logoUrl_home = item.url
+                    this.homeImg = item.url
+                }
+                if (item.name == '分类页') {
+                    this.logoUrl_class = item.url
+                    this.classifyImg = item.url
+                }
+                if (item.name == '列表页') {
+                    this.logoUrl_list = item.url
+                    this.listImg = item.url
+                }
+                if (item.name == '详情页') {
+                    this.logoUrl_detail = item.url
+                    this.detailImg = item.url
+                }
+                if (item.name == '搜索页') {
+                    this.logoUrl_search = item.url
+                    this.searchImg = item.url
+                }
+                if (item.name == '特殊列表页') {
+                    this.logoUrl_sList = item.url
+                    this.sListImg = item.url
+                }
+                if (item.name == '特殊详情页') {
+                    this.logoUrl_sDetail = item.url
+                    this.sDetailImg = item.url
+                }
+            }
+        },
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.templateStyle = ''
+            this.ruleForm.templateName = ''
+            this.ruleForm.templateImg = []
+            this.img_arr = []
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            this.img_arr = []
+            //首页
+            if (this.logoUrl_home) {
+                this.home_obj.url = this.homeImg
+                this.img_arr.push(this.home_obj)
+            }
+            //分类页
+            if (this.logoUrl_class) {
+                this.class_obj.url = this.classifyImg
+                this.img_arr.push(this.class_obj)
+            }
+            //列表页
+            if (this.logoUrl_list) {
+                this.list_obj.url = this.listImg
+                this.img_arr.push(this.list_obj)
+            }
+            //详情页
+            if (this.logoUrl_detail) {
+                this.detail_obj.url = this.detailImg
+                this.img_arr.push(this.detail_obj)
+            }
+            //搜索页
+            if (this.logoUrl_search) {
+                this.search_obj.url = this.searchImg
+                this.img_arr.push(this.search_obj)
+            }
+            //特殊列表页
+            if (this.logoUrl_sList) {
+                this.sList_obj.url = this.sListImg
+                this.img_arr.push(this.sList_obj)
+            }
+            //特殊详情页
+            if (this.logoUrl_sDetail) {
+                this.sDetail_obj.url = this.sDetailImg
+                this.img_arr.push(this.sDetail_obj)
+            }
+            function cleanObProp(arr) {
+                return arr.map(item => {
+                    const newItem = {};
+                    for (const key in item) {
+                        if (key !== '__ob__') {
+                            newItem[key] = item[key];
+                        }
+                    }
+                    return newItem;
+                });
+            }
+            const cleanArray = cleanObProp(this.img_arr);
+            this.ruleForm.templateImg = JSON.stringify(cleanArray);
+            console.log(this.ruleForm.templateImg);
+
+            if (this.dialogName == "添加") {
+                addTemplate({
+                    template_name: this.ruleForm.templateName, //模板名称
+                    template_img: this.ruleForm.templateImg, // 模板图片
+                    template_class_id: this.ruleForm.templateStyle, //模板风格id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+
+            if (this.dialogName == "编辑") {
+                updateTemplate({
+                    id: this.activeid, //活动id
+                    template_name: this.ruleForm.templateName, //模板名称
+                    template_img: this.ruleForm.templateImg, // 模板图片
+                    template_class_id: this.ruleForm.templateStyle, //模板风格id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+
+        //3.6 上传图片操作
+        beforeAvatarUpload_home(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_home = res.data.imgUrl;//显示缩略图
+                this.homeImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_classify(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_class = res.data.imgUrl;//显示缩略图
+                this.classifyImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_list(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_list = res.data.imgUrl;//显示缩略图
+                this.listImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_detail(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_detail = res.data.imgUrl;//显示缩略图
+                this.detailImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_search(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_search = res.data.imgUrl;//显示缩略图
+                this.searchImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sList(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_sList = res.data.imgUrl;//显示缩略图
+                this.sListImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sDetail(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_sDetail = res.data.imgUrl;//显示缩略图
+                this.sDetailImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete_home() {
+            // 删除图片
+            this.logoUrl_home = ''; // 清空图片 URL
+        },
+        handleDelete_class() {
+            // 删除图片
+            this.logoUrl_class = ''; // 清空图片 URL
+        },
+        handleDelete_list() {
+            // 删除图片
+            this.logoUrl_list = ''; // 清空图片 URL
+        },
+        handleDelete_detail() {
+            // 删除图片
+            this.logoUrl_detail = ''; // 清空图片 URL
+        },
+        handleDelete_search() {
+            // 删除图片
+            this.logoUrl_search = ''; // 清空图片 URL
+        },
+        handleDelete_sList() {
+            // 删除图片
+            this.logoUrl_sList = ''; // 清空图片 URL
+        },
+        handleDelete_sDetail() {
+            // 删除图片
+            this.logoUrl_sDetail = ''; // 清空图片 URL
+        },
+        // 3.7 弹出层相关方法 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList() //获取模板风格
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>