修改自助建站对应的静态页面

修改自助建站对应的静态页面

src/router/modules/dangyunlong.js

@@ -67,5 +67,53 @@ const dangyunlongRouter= [
       }
     ]
   },
+  {
+    path: '/size',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/size'),
+        meta: {
+          title: '尺寸',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/skin',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/skin'),
+        meta: {
+          title: '皮肤',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/deploy',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/deploy'),
+        meta: {
+          title: '部署列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 ]
 export default dangyunlongRouter

src/views/componentGallery/deploy.vue

@@ -0,0 +1,438 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <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="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">运行状态</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择应用状态">
+                            <el-option>未部署</el-option>
+                            <el-option>运行中</el-option>
+                            <el-option>已停止</el-option>
+                        </el-select>
+                    </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" />
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="server_website_name" label="网站名称" width=""></el-table-column>
+                        <el-table-column prop="server_url" label="域名" width=""></el-table-column>
+                        <el-table-column prop="server_port" label="运行端口" width=""></el-table-column>
+                        <el-table-column prop="server_path" label="运行目录" width=""></el-table-column>
+                        <el-table-column prop="server_status" label="运行状态" width=""></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------------------------------------------------------------>
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+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: [
+                {
+                    id: 1,
+                    server_website_name: '孪生站-农业类站点1',
+                    server_url: 'http://ls1.chsnzxw.com.cn',
+                    server_port: '10014',
+                    server_path: '/www/ls1chsnzxwcomcn/',
+                    server_status: '运行中'
+                },
+                {
+                    id: 2,
+                    server_website_name: '孪生站-农业类站点2',
+                    server_url: 'http://ls2.chsnzxw.com.cn',
+                    server_port: '10015',
+                    server_path: '/www/ls2chsnzxwcomcn/',
+                    server_status: '已停止'
+                }
+            ],//表格数据
+
+
+            //1.2 搜索框相关 ----------------------------------
+            templateStyle: '',//模板风格
+            templateName: '',//模板名称
+
+
+            // 1.3 分页相关 -----------------------------------
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 获得服务器运行状态
+        getData() {
+            
+        },
+        
+       
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            
+        },
+        //1.6 重置按钮
+        goReset() {
+           
+        },
+        //列表和分页相关 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>

src/views/componentGallery/module.vue

@@ -6,27 +6,53 @@
             <el-row>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">版块</div>
-                        <el-select v-model="templateName" clearable placeholder="请选择版块">
+                        <div class="searchTitle">组件名称</div>
+                        <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
+                    </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="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="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row class="rowMargin">
                 <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>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸</div>
+                        <div class="sizeBox">
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="宽"></el-input> </div>
+                            <div class="sizeInputSymbol">*</div>
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="高"></el-input></div>
+                        </div>
                     </div>
                 </el-col>
             </el-row>
+
+
         </div>
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
@@ -35,16 +61,14 @@
             <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 prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="component_name" label="组件名称" width=""></el-table-column>
+                        <el-table-column prop="component_size" label="尺寸" width=""></el-table-column>
+                        <el-table-column prop="component_skin" label="所属皮肤" width=""></el-table-column>
+                        <el-table-column prop="component_skin" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="component_page" 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">
@@ -82,17 +106,58 @@
             :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-form-item label="组件名称:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属页面:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属页面">
+                            <el-option>首页</el-option>
+                            <el-option>列表页</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="所属风格:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属页面">
+                            <el-option>简约</el-option>
+                            <el-option>黑暗</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="风格id:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属皮肤:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
+                            <el-option>简约</el-option>
+                            <el-option>黑暗</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="皮肤id:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                    </el-form-item>
+                    <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 label="通栏id:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="尺寸:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
+                            <el-option>600x480</el-option>
+                            <el-option>300x200</el-option>
+                        </el-select>
+                    </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_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
+                            :disabled="this.dialogName === '编辑'"></el-input>
                     </el-form-item>
-                    <el-form-item label="组件代码:" prop="component_code">
-                        <el-input v-model="ruleForm.component_code" placeholder="请输入组件代码"
+                    <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"
@@ -710,6 +775,27 @@ input[aria-hidden=true] {
     }
 }
 
+.sizeBox {
+    display: flex;
+    align-items: center;
+    width: 80%;
+    .sizeInputSymbol {
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .sizeInput {
+        width: 50%;
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 100%;
+        }
+    }
+}
+
 // 弹出层内容
 .dialogText {
     margin: 0 7px 0 3px;
@@ -832,4 +918,8 @@ input[aria-hidden=true] {
 .dialog-footer {
     margin: 0 auto;
 }
+
+.rowMargin {
+    margin-top: 20px;
+}
 </style>

src/views/componentGallery/plate.vue

@@ -4,6 +4,12 @@
         <!-- 头部搜索框部分 -->
         <div class="title">
             <el-row>
+                <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="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">模板风格</div>
@@ -15,35 +21,45 @@
                 </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 class="searchTitle">所属皮肤</div>
+                        <el-input v-model="plateName" clearable placeholder="请输入皮肤名称"></el-input>
                     </div>
                 </el-col>
-                <el-col :span="8" class="right">
+                <el-col :span="6" class="right">
                     <div class="btnList">
                         <button class="search" @click="goSearch">搜索</button>
                         <button class="reset" @click="goReset">重置</button>
                     </div>
                 </el-col>
             </el-row>
+            <el-row class="rowMargin">
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸</div>
+                        <div class="sizeBox">
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="宽"></el-input> </div>
+                            <div class="sizeInputSymbol">*</div>
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="高"></el-input></div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
         </div>
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
             <tableTitle :name="tableDivTitle" />
-            <button class="btn" @click="addWebsite">添加版块</button>
+            <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 prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="sector_name" label="通栏名称" width=""></el-table-column>
+                        <el-table-column prop="sector_size" label="尺寸" width=""></el-table-column>
+                        <el-table-column prop="sector_skin" label="所属皮肤" width=""></el-table-column>
+                        <el-table-column prop="sector_style" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="sector_page" 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">
@@ -81,19 +97,44 @@
             :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-form-item label="通栏名称:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="输入通栏名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属页面:" prop="plateName">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择所属页面" :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option>首页</el-option>
+                            <el-option>列表</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <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 label="风格id:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="所属风格id" disabled></el-input>
+                    </el-form-item>
+                    <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="皮肤id:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="所属皮肤id" disabled></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 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="输入关键词" disabled></el-input>
                     </el-form-item>
                     <el-form-item label="页面类型:" prop="pageType">
                         <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
@@ -103,7 +144,7 @@
                             }}</el-checkbox>
                         </el-checkbox-group>
                     </el-form-item>
-                    <el-form-item label="组件展示图：" prop="image" :label-width="formLabelWidth"
+                    <el-form-item label="通栏缩略图：" prop="image" :label-width="formLabelWidth"
                         :class="['custom-form-item']" class="custom-align-right">
                         <div class="uploaderBox">
                             <!--图片上传组件 start ------------------------------------------------------------>
@@ -719,6 +760,28 @@ input[aria-hidden=true] {
         line-height: 36px;
         font-size: 16px;
     }
+
+}
+
+.sizeBox {
+    display: flex;
+    align-items: center;
+    width: 80%;
+    .sizeInputSymbol {
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .sizeInput {
+        width: 50%;
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 100%;
+        }
+    }
 }
 
 // 弹出层内容
@@ -837,4 +900,10 @@ input[aria-hidden=true] {
 .dialog-footer {
     margin: 0 auto;
 }
+
+.rowMargin {
+    margin-top: 20px;
+}
+
+
 </style>

src/views/componentGallery/size.vue

@@ -0,0 +1,498 @@
+<template>
+    <div>
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸高度</div>
+                        <el-input v-model="sizeHeight" clearable placeholder="请输入尺寸高度"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸宽度</div>
+                        <el-input v-model="sizeWidth" 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="addSize">添加尺寸</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column label="尺寸高度" prop="height"></el-table-column>
+                        <el-table-column label="尺寸宽度" prop="width"></el-table-column>
+                        <el-table-column label="添加时间" prop="created_at"></el-table-column>
+                        <el-table-column label="修改时间" prop="updated_at"></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)">
+                                        <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="sizeWidth">
+                        <el-input v-model="ruleForm.sizeWidth" placeholder="请输入宽度"></el-input>
+                    </el-form-item>
+                    <el-form-item label="尺寸高度:" prop="sizeHeight">
+                        <el-input v-model="ruleForm.sizeHeight" placeholder="请输入高度"></el-input>
+                    </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';
+
+export default {
+    components: {
+        tableTitle,//表格标题
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            //1.查询条件 start ---------------------------------------->
+            sizeHeight: '',
+            sizeWidth: '',
+            //1.查询条件 end ---------------------------------------->
+
+            //2.列表数据 start ---------------------------------------->
+            tableData: [
+                {"id":1,"height":"1200","width":"300","created_at":"2025-05-23 10:00:00","updated_at":"2025-05-23 10:00:00"},
+                {"id":1,"height":"1200","width":"450","created_at":"2025-05-23 10:00:00","updated_at":"2025-05-23 10:00:00"},
+            ],
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            //2.列表数据 end ---------------------------------------->
+
+            //3.弹出框 start ---------------------------------------->
+            dialogTableVisible: false,
+            tableDivTitle:'尺寸管理',
+            dialogName:'添加尺寸',
+            ruleForm: {
+                sizeWidth: '', 
+                sizeHeight: '', 
+            },
+            rules: {
+                sizeWidth: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sizeHeight: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+            //3.弹出框 end ---------------------------------------->
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 请求数据
+        getData() {
+            
+        },
+        //1.2 删除
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意：删除后通栏与组件中无法再选择该尺寸！', '是否确认删除该尺寸？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                
+            }).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() {
+           
+        },
+        //1.6 重置
+        goReset() {
+            this.templateStyle = ""
+            this.templateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id) {
+            this.dialogTableVisible = true
+        },
+        //1.8 添加
+        addSize() {
+            this.dialogTableVisible = true
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            this.dialogTableVisible = false
+        },
+        // 1.10 取消提交
+        cancelForm(){
+            this.dialogTableVisible = false
+        }
+        // 弹出层相关方法 end ---------------------------------------------------->
+    },
+    mounted() {
+      
+    },
+}
+</script>
+
+<style scoped lang="less">
+// 提示信息
+.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>

src/views/componentGallery/skin.vue

@@ -0,0 +1,1263 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <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="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="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_name" label="皮肤名称" width=""></el-table-column>
+                        <el-table-column prop="template_class_name" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="template_skin_keyword" 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="templateKeyword">
+                        <el-input v-model="ruleForm.templateKeyword" 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>

src/views/componentGallery/style.vue

@@ -6,17 +6,8 @@
             <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 class="searchTitle">风格名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入风格名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -36,13 +27,13 @@
                     <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 prop="template_class_name" label="风格名称" width="">
                         </el-table-column>
-                        <el-table-column prop="template_name" label="模板名称" width="">
+                        <el-table-column prop="template_keyword" label="风格关键词" width="">
                         </el-table-column>
-                        <el-table-column prop="created_at" label="添加时间" width="">
+                        <el-table-column prop="template_count" label="皮肤总量" width="">
                         </el-table-column>
-                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        <el-table-column prop="created_at" label="添加时间" width="">
                         </el-table-column>
                         <el-table-column fixed="right" label="操作" width="200">
                             <template slot-scope="scope">
@@ -81,203 +72,11 @@
             :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 label="风格名称:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入风格名称"></el-input>
                     </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 label="风格关键词:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入风格关键词"></el-input>
                     </el-form-item>
                 </div>
                 <div class="dialogBtn">

src/views/template/templateBase.vue

@@ -1,157 +1,246 @@
 <template>
-  <div class="mainBox">
-    <div class="layerBox" v-if="this.$store.state.template.stepStatus">
-      <tableTitle :name="templateStepTitle"/>
-      <step :activeNumber="1"/>
-    </div>
-    <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
-      <div class="layerBox">
-        <tableTitle :name="templateBaseTitle"/>
-        <div class="formDiv">
-          <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-checkbox-group v-model="form.page_type">
-                <el-checkbox label="1" disabled>首页</el-checkbox>
-                <el-checkbox label="2">分类页</el-checkbox>
-                <el-checkbox label="3">列表页</el-checkbox>
-                <el-checkbox label="4">详情页</el-checkbox>
-                <el-checkbox label="5">搜索页</el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </el-form-item>
-          <el-form-item :label="null" :label-width="formLabelWidth" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <div class="labelTitleStyle">
-                单页模板类型：
-                <el-tooltip class="item" effect="dark" content="该类型仅供底部导航栏使用" placement="top">
-                  <i class="el-icon-question"></i>
-                </el-tooltip>
-              </div>
-              <el-checkbox-group v-model="form.page_type">
-                <el-checkbox label="6">自定义列表页</el-checkbox>
-                <el-checkbox label="7" disabled>自定义详情页</el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </el-form-item>
+    <div class="mainBox">
+        <div class="layerBox" v-if="this.$store.state.template.stepStatus">
+            <tableTitle :name="templateStepTitle" />
+            <step :activeNumber="1" />
         </div>
-      </div>
-      <div class="layerBox">
-        <tableTitle :name="templateInfoTitle"/>
-        <div class="formDiv">
-          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="statement" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.statement" placeholder="请输入.."></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="organizer" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.organizer" placeholder="请输入.."></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="copyright_information" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.copyright_information" placeholder="请输入.."></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.contact_number" placeholder="请输入.." maxlength="255"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_address" placeholder="请输入.." maxlength="255"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
-            <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="projectLogoUpload">
-                <!-- 预览图片 -->
-                <img v-if="project_logo_src" :src="project_logo_src" class="avatar">
-                <div v-else class="chooseImgDiv">
-                  <div>
-                    <img src="@/assets/public/upload/noImage.png">
-                    <div>选择图片</div>
-                  </div>
+        <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
+            <div class="layerBox">
+                <tableTitle :name="templateBaseTitle" />
+                <div class="formDiv">
+                    <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-checkbox-group v-model="form.page_type">
+                                <el-checkbox label="1" disabled>首页</el-checkbox>
+                                <el-checkbox label="2" disabled>分类页</el-checkbox>
+                                <el-checkbox label="3" disabled>列表页</el-checkbox>
+                                <el-checkbox label="4" disabled>详情页</el-checkbox>
+                                <el-checkbox label="5">搜索页</el-checkbox>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
+                    <el-form-item :label="null" :label-width="formLabelWidth" class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <div class="labelTitleStyle">
+                                单页模板类型：
+                                <el-tooltip class="item" effect="dark" content="该类型仅供底部导航栏使用" placement="top">
+                                    <i class="el-icon-question"></i>
+                                </el-tooltip>
+                            </div>
+                            <el-checkbox-group v-model="form.page_type">
+                                <el-checkbox label="6">底部菜单列表页</el-checkbox>
+                                <el-checkbox label="7" disabled>底部菜单详情页</el-checkbox>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
                 </div>
-              </el-upload>
-              <input type="hidden" v-model="form.project_logo">
-            </div>
-          </el-form-item>
-          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_name" placeholder="请输入.." maxlength="100"></el-input>
             </div>
-          </el-form-item>
-          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_url" placeholder="请输入.."  maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
-            <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="companyLogoUpload">
-                <!-- 预览图片 -->
-                <img v-if="company_logo_src" :src="company_logo_src" class="avatar">
-                <div v-else class="chooseImgDiv">
-                  <div>
-                    <img src="@/assets/public/upload/noImage.png">
-                    <div>选择图片</div>
-                  </div>
+            <div class="layerBox">
+                <tableTitle :name="templateInfoTitle" />
+                <div class="formDiv">
+                    <el-form-item :label="null" :label-width="formLabelWidth" prop="role_id"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <div class="labelTitleStyle">
+                                底部导航菜单展示：
+                                <el-tooltip class="item" effect="dark" content="如需修改，请去其他设置-单页中进行修改/添加。" placement="top">
+                                    <i class="el-icon-question"></i>
+                                </el-tooltip>
+                            </div>
+                            <el-checkbox-group v-model="form.singlePage">
+                                <el-checkbox label="1" disabled>本网概况</el-checkbox>
+                                <el-checkbox label="2" disabled>会员服务</el-checkbox>
+                                <el-checkbox label="3" disabled>免责声明</el-checkbox>
+                                <el-checkbox label="4" disabled>本网招聘</el-checkbox>
+                                <el-checkbox label="5" disabled>联系我们</el-checkbox>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
                 </div>
-              </el-upload>
-              <input type="hidden" v-model="form.company_logo">
-            </div>
-          </el-form-item>
-          <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_name" placeholder="请输入.." maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_url" placeholder="请输入.." maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number" placeholder="请输入.." maxlength="50"></el-input>
-            </div>  
-          </el-form-item>
-          <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.." maxlength="100"></el-input>
-            </div>  
-          </el-form-item>
-          <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number" placeholder="请输入.." maxlength="50"></el-input>
             </div>
-          </el-form-item>
-          <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.." maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="customer_service_qq" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.." maxlength="50"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="通联QQ号：" :label-width="formLabelWidth" prop="communications" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.communications" placeholder="请输入.." maxlength="50"></el-input>
+            <div class="layerBox">
+                <tableTitle :name="templateInfoTitle2" />
+                <div class="formDiv">
+                    <el-form-item :label="null" :label-width="formLabelWidth" prop="role_id"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <div class="labelTitleStyle">
+                                友情链接：
+                                <el-tooltip class="item" effect="dark" content="如需修改，请去其他设置-友情链接中进行修改/添加。" placement="top">
+                                    <i class="el-icon-question"></i>
+                                </el-tooltip>
+                            </div>
+                            <el-checkbox-group v-model="form.singlePage" class="linkBox">
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>不良举报中心</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250427/1745733680817523.png">
+                                    <div class="linkUrl">https://www.12377.cn/</div>
+                                </div>
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>网络110举报服务</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250427/1745733722226988.png">
+                                    <div class="linkUrl">http://www.bj.cyberpolice.cn/</div>
+                                </div>
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>住房与建设法制调研中心</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250427/1745734162658708.jpg">
+                                    <div class="linkUrl">http://zjfzdy.org.cn/</div>
+                                </div>
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>乡村振兴调研中心</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250427/1745734241791617.jpg">
+                                    <div class="linkUrl">http://xczxdyzx.org.cn/</div>
+                                </div>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
+                </div>
             </div>
-          </el-form-item>
+            <!-- <div class="layerBox">
+                <tableTitle :name="templateInfoTitle" />
+                <div class="formDiv">
+                    <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="statement"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.statement" placeholder="请输入.."></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="organizer"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.organizer" placeholder="请输入.."></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="copyright_information"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.copyright_information" placeholder="请输入.."></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.contact_number" placeholder="请输入.."
+                                maxlength="255"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.company_address" placeholder="请输入.."
+                                maxlength="255"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
+                        <div class="uploaderBox">
+                            <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                :before-upload="projectLogoUpload">
+                                <img v-if="project_logo_src" :src="project_logo_src" class="avatar">
+                                <div v-else class="chooseImgDiv">
+                                    <div>
+                                        <img src="@/assets/public/upload/noImage.png">
+                                        <div>选择图片</div>
+                                    </div>
+                                </div>
+                            </el-upload>
+                            <input type="hidden" v-model="form.project_logo">
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.project_name" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.project_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
+                        <div class="uploaderBox">
+                            <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                :before-upload="companyLogoUpload">
+                                <img v-if="company_logo_src" :src="company_logo_src" class="avatar">
+                                <div v-else class="chooseImgDiv">
+                                    <div>
+                                        <img src="@/assets/public/upload/noImage.png">
+                                        <div>选择图片</div>
+                                    </div>
+                                </div>
+                            </el-upload>
+                            <input type="hidden" v-model="form.company_logo">
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.company_name" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.company_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.icp_number" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.record_number" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.record_number_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="customer_service_qq"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="通联QQ号：" :label-width="formLabelWidth" prop="communications"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.communications" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                </div>
+            </div> -->
+        </el-form>
+        <div class="bottomBtnBox">
+            <el-button type="info" @click="goToWebsite">返回</el-button>
+            <el-button type="primary" @click="editData" v-if="this.$route.query.step != undefined">编辑并进入下一步</el-button>
+            <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
         </div>
-      </div>
-    </el-form>
-    <div class="bottomBtnBox">
-      <el-button type="info" @click="goToWebsite">返回</el-button>
-      <el-button type="primary" @click="editData" v-if="this.$route.query.step!=undefined">编辑并进入下一步</el-button>
-      <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
     </div>
-  </div>
 </template>
 
 <script>
@@ -163,289 +252,347 @@ import tableTitle from './public/tableTitle';
 import step from './public/step';
 
 export default {
-  components: {
-    tableTitle,//表格标题
-    step//步骤条
-  },
-  data() {
-    // 配置验证规则：用于表单验证
-    const validateEmpty = (rule,value,callback) => {
-      if (value.length == 0) {
-        callback(new Error('该项不能为空！'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      templateStepTitle:"仅需四步，即可完成模板创建",
-      templateBaseTitle:"模板类型设置",
-      templateInfoTitle:"模板信息设置",
-      formLabelWidth:"120px",
-      editId:"",
-      form:{
-        website_id:"",//网站id
-        page_type:["1","7"],//页面类型
-        statement:"",//网站声明
-        organizer:"",//主办单位
-        copyright_information:"",//版权信息
-        contact_number:"",//联系电话
-        company_address:"",//公司地址
-        project_logo:"",//项目logo
-        project_name:"",//项目名称
-        project_url:"",//项目网址
-        company_logo:"",//公司logo
-        company_name:"",//公司名称
-        company_url:"",//公司网址
-        icp_number:"",//网站备案号
-        icp_number_url:"",//网站备案号链接
-        record_number:"",//网安备案号
-        record_number_url:"",//网安备案号链接
-        customer_service_qq:"",//客服qq客服
-        communications:"",//通联qq客服
-      },
-      project_logo_src:"",//项目logo缩略图
-      company_logo_src:"",//公司logo缩略图
-      //配置from表单验证规则
-      loginRules: { 
-        statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        organizer: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        copyright_information: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        contact_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        project_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        project_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        icp_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        record_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        icp_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        record_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        project_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        customer_service_qq: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        communications: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-      }
-    };
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //上一步
-    goToWebsite(){
-      this.$router.push({
-        path: '/templateList'
-      });
+    components: {
+        tableTitle,//表格标题
+        step//步骤条
     },
-    //下一步
-    goToStyle(){
-      //先判断表达能否提交
-      this.$refs.form.validate(valid => {
-        if (valid) {
-
-        }
-      })
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
+    data() {
+        // 配置验证规则：用于表单验证
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
         }
-      });
+        return {
+            templateStepTitle: "仅需四步，即可完成模板创建",
+            templateBaseTitle: "网站页面类型设置",
+            templateInfoTitle: "单页设置",
+            templateInfoTitle2: "友情链接设置",
+            formLabelWidth: "120px",
+            editId: "",
+            form: {
+                website_id: "",//网站id
+                page_type: ["1", "2", "3", "4", "7"],//页面类型
+                singlePage: ["1", "2", "3", "4", "5"],//单页类型
+                // statement: "",//网站声明
+                // organizer: "",//主办单位
+                // copyright_information: "",//版权信息
+                // contact_number: "",//联系电话
+                // company_address: "",//公司地址
+                // project_logo: "",//项目logo
+                // project_name: "",//项目名称
+                // project_url: "",//项目网址
+                // company_logo: "",//公司logo
+                // company_name: "",//公司名称
+                // company_url: "",//公司网址
+                // icp_number: "",//网站备案号
+                // icp_number_url: "",//网站备案号链接
+                // record_number: "",//网安备案号
+                // record_number_url: "",//网安备案号链接
+                // customer_service_qq: "",//客服qq客服
+                // communications: "",//通联qq客服
+            },
+            project_logo_src: "",//项目logo缩略图
+            company_logo_src: "",//公司logo缩略图
+            //配置from表单验证规则
+            loginRules: {
+                statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                organizer: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                copyright_information: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contact_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                project_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                project_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                icp_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                record_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                icp_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                record_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                project_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                customer_service_qq: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                communications: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        };
     },
-    //0.全局操作 end ------------------------------------------------------------>
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //上一步
+        goToWebsite() {
+            this.$router.push({
+                path: '/templateList'
+            });
+        },
+        //下一步
+        goToStyle() {
+            //先判断表达能否提交
+            this.$refs.form.validate(valid => {
+                if (valid) {
 
-    //1.提交表单 start ------------------------------------------------------------>
-    //1.1提交表单
-    addData(){
-      this.form.website_id = this.$route.query.website_id;
-      //console.log(this.form);
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          this.$store.dispatch('template/addWebsiteTemplateintel',this.form).then(res=>{
-            if(res.code==200){
-              this.$message.success('网站基本信息保存成功！');
-              //跳转到风格选择页面
-              this.$router.push({
+                }
+            })
+            this.$router.push({
                 path: '/templateStyle',
                 query: {
-                  website_id: this.$route.query.website_id,
-                  step:1
+                    id: this.editId
+                }
+            });
+        },
+        //0.全局操作 end ------------------------------------------------------------>
+
+        //1.提交表单 start ------------------------------------------------------------>
+        //1.1提交表单
+        addData() {
+            this.form.website_id = this.$route.query.website_id;
+            //console.log(this.form);
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$store.dispatch('template/addWebsiteTemplateintel', this.form).then(res => {
+                        if (res.code == 200) {
+                            this.$message.success('网站基本信息保存成功！');
+                            //跳转到风格选择页面
+                            this.$router.push({
+                                path: '/templateStyle',
+                                query: {
+                                    website_id: this.$route.query.website_id,
+                                    step: 1
+                                }
+                            });
+                        } else {
+                            this.$message.error(res.message);
+                        }
+                    })
                 }
-              });
-            }else{
-              this.$message.error(res.message);
+            })
+        },
+        //1.2上传项目logo
+        projectLogoUpload(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;
             }
-          })
-        }
-      })
-    },
-    //1.2上传项目logo
-    projectLogoUpload(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.project_logo_src = res.data.imgUrl;//显示缩略图
-        this.form.project_logo = res.data.imgUrl;//提供表单地址
-        console.log(res.data.imgUrl)
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
-      })
-      // 阻止默认的上传行为
-      return false;
-    },
-    //1.3上传公司logo
-    companyLogoUpload(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.company_logo_src = res.data.imgUrl;//显示缩略图
-        this.form.company_logo = res.data.imgUrl;//提供表单地址
-        console.log(res.data.imgUrl)
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
-      })
-      // 阻止默认的上传行为
-      return false;
-    },
-    //提交表单 start ------------------------------------------------------------>
+            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.project_logo_src = res.data.imgUrl;//显示缩略图
+                this.form.project_logo = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '网络错误，请重试！'
+                });
+            })
+            // 阻止默认的上传行为
+            return false;
+        },
+        //1.3上传公司logo
+        companyLogoUpload(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.company_logo_src = res.data.imgUrl;//显示缩略图
+                this.form.company_logo = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '网络错误，请重试！'
+                });
+            })
+            // 阻止默认的上传行为
+            return false;
+        },
+        //提交表单 start ------------------------------------------------------------>
 
-    //2.编辑表单 start ------------------------------------------------------------>
-    //2.1回显数据
-    getWebsiteBase(website_id){
-      this.$store.dispatch('template/getWebsiteTemplateintel',{website_id:website_id}).then(res=>{
-        if(res.code==200){
-          this.form.website_id = res.data.website_id;//网站id
-          this.form.page_type = res.data.page_type;//页面类型
-          this.form.statement = res.data.statement;//网站声明
-          this.form.organizer = res.data.organizer;//主办单位
-          this.form.copyright_information = res.data.copyright_information;//版权信息
-          this.form.contact_number = res.data.contact_number;//联系电话
-          this.form.company_address = res.data.company_address;//公司地址
-          this.form.project_logo = res.data.project_logo;//项目logo
-          this.project_logo_src = res.data.project_logo;//项目logo缩略图
-          this.form.project_name = res.data.project_name;//项目名称
-          this.form.project_url = res.data.project_url;//项目网址
-          this.form.company_logo = res.data.company_logo;//公司logo
-          this.company_logo_src = res.data.company_logo;//公司logo缩略图
-          this.form.company_name = res.data.company_name;//公司名称
-          this.form.company_url = res.data.company_url;//公司网址
-          this.form.icp_number = res.data.icp_number;//网站备案号
-          this.form.icp_number_url = res.data.icp_number_url;//网站备案号链接
-          this.form.record_number = res.data.record_number;//网安备案号
-          this.form.record_number_url = res.data.record_number_url;//网安备案号链接
-          this.form.customer_service_qq = res.data.customer_service_qq;//客服qq客服
-          this.form.communications = res.data.communications;//通联qq客服
-        }else{
-          this.$message.error(res.message);
-        }
-      })
-    },
-    //2.2提交编辑的数据
-    editData(){
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          this.$store.dispatch('template/upWebsiteTemplateintel',this.form).then(res=>{
-            if(res.code==200){
-              this.$message.success('网站基本信息编辑成功！');
-              this.$router.push({
-                path: '/templateStyle',
-                query: {
-                  website_id: this.$route.query.website_id,
-                  step:this.$route.query.step
+        //2.编辑表单 start ------------------------------------------------------------>
+        //2.1回显数据
+        getWebsiteBase(website_id) {
+            this.$store.dispatch('template/getWebsiteTemplateintel', { website_id: website_id }).then(res => {
+                if (res.code == 200) {
+                    this.form.website_id = res.data.website_id;//网站id
+                    this.form.page_type = res.data.page_type;//页面类型
+                    this.form.statement = res.data.statement;//网站声明
+                    this.form.organizer = res.data.organizer;//主办单位
+                    this.form.copyright_information = res.data.copyright_information;//版权信息
+                    this.form.contact_number = res.data.contact_number;//联系电话
+                    this.form.company_address = res.data.company_address;//公司地址
+                    this.form.project_logo = res.data.project_logo;//项目logo
+                    this.project_logo_src = res.data.project_logo;//项目logo缩略图
+                    this.form.project_name = res.data.project_name;//项目名称
+                    this.form.project_url = res.data.project_url;//项目网址
+                    this.form.company_logo = res.data.company_logo;//公司logo
+                    this.company_logo_src = res.data.company_logo;//公司logo缩略图
+                    this.form.company_name = res.data.company_name;//公司名称
+                    this.form.company_url = res.data.company_url;//公司网址
+                    this.form.icp_number = res.data.icp_number;//网站备案号
+                    this.form.icp_number_url = res.data.icp_number_url;//网站备案号链接
+                    this.form.record_number = res.data.record_number;//网安备案号
+                    this.form.record_number_url = res.data.record_number_url;//网安备案号链接
+                    this.form.customer_service_qq = res.data.customer_service_qq;//客服qq客服
+                    this.form.communications = res.data.communications;//通联qq客服
+                } else {
+                    this.$message.error(res.message);
+                }
+            })
+        },
+        //2.2提交编辑的数据
+        editData() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$store.dispatch('template/upWebsiteTemplateintel', this.form).then(res => {
+                        if (res.code == 200) {
+                            this.$message.success('网站基本信息编辑成功！');
+                            this.$router.push({
+                                path: '/templateStyle',
+                                query: {
+                                    website_id: this.$route.query.website_id,
+                                    step: this.$route.query.step
+                                }
+                            });
+                        } else {
+                            this.$message.error(res.message);
+                        }
+                    })
                 }
-              });
-            }else{
-              this.$message.error(res.message);
+            })
+        },
+        //2.编辑表单 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        //1.展示步骤
+        this.$store.commit('template/showStepStatus');
+        //2.判断是新建还是回显
+        if (this.$route.query.step != undefined) {
+            console.log("编辑模板！")
+            if (this.$route.query.website_id) {
+                this.getWebsiteBase(this.$route.query.website_id);
+            } else {
+                this.$message.error("无法编辑，缺少关键参数！");
             }
-          })
+        } else {
+            console.log("添加模板基本信息！")
         }
-      })
-    },
-    //2.编辑表单 end ------------------------------------------------------------>
-
-  },
-  mounted(){
-    //1.展示步骤
-    this.$store.commit('template/showStepStatus');
-    //2.判断是新建还是回显
-    if(this.$route.query.step!=undefined){
-      console.log("编辑模板！")
-      if(this.$route.query.website_id){
-        this.getWebsiteBase(this.$route.query.website_id);
-      }else{
-        this.$message.error("无法编辑，缺少关键参数！");
-      }
-    }else{
-      console.log("添加模板基本信息！")
     }
-  }
 };
 </script>
 
 <style scoped lang="less">
-  .labelTitleStyle{
+.labelTitleStyle {
     font-size: 14px;
     color: #606266;
     font-weight: bold;
-  }
-  .exampleBox {
+}
+
+.exampleBox {
     border: 1px solid #ccc;
-  }
+}
 
-  .formDiv{
+.formDiv {
     background: #F5F7FB;
     padding: 10px 20px 10px 20px;
-  }
-  .uploaderBox .avatar-uploader {
+}
+
+.uploaderBox .avatar-uploader {
     background: #fff;
-  }
-  ::v-deep .formDiv .el-form-item:last-child {
+}
+
+.linkBox {
+    display: flex;
+    align-items: center;
+    
+    .linkItem:nth-child(1) {
+        text-align: left;
+        width: 160px;
+        .linkUrl { 
+            text-align: left;
+        }
+        img {
+            display: block;
+            width: 120px;
+            height: 50px;
+            margin-left: 0;
+        }
+    }
+    .linkItem {
+        text-align: center;
+        width: 200px;
+        padding-right: 20px;
+        .linkUrl {
+            font-size: 12px;
+            color: #999;
+            text-align: center;
+        }
+        img {
+            display: block;
+            width: 120px;
+            height: 50px;
+            margin: 0 auto;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+::v-deep .formDiv .el-form-item:last-child {
     margin-bottom: 0 !important;
-  }
-  ::v-deep .formDiv .el-form-item__content{
+}
+
+::v-deep .formDiv .el-form-item__content {
     margin-left: 0 !important;
-  }
-  ::v-deep .formDiv .el-form-item__label{
+}
+
+::v-deep .formDiv .el-form-item__label {
     float: none;
-  }
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .custom-form-item > .el-form-item__label {
+}
+
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
-  }
-  ::v-deep .custom-textarea .el-textarea__inner {
-    resize: none; /* 禁止用户拖拽调整大小 */
-  }
-  ::v-deep .custom-align-right .el-form-item__label {
-    text-align: right; /* 设置标签文字右对齐 */
-  }
-  ::v-deep .el-select {
-    width: 100%; /* 禁止用户拖拽调整大小 */
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+}
+
+::v-deep .custom-textarea .el-textarea__inner {
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .custom-align-right .el-form-item__label {
+    text-align: right;
+    /* 设置标签文字右对齐 */
+}
+
+::v-deep .el-select {
+    width: 100%;
+    /* 禁止用户拖拽调整大小 */
+}
+
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/template/templateStyle.vue

@@ -10,7 +10,7 @@
         <el-row>
           <el-col :span="8">
             <div class="searchBox">
-              <div class="searchTitle">模板风格</div>
+              <div class="searchTitle">按风格搜索</div>
               <el-select v-model="getApiData.template_class_id" placeholder="请选择..">
                 <el-option
                   v-for="item in allClass"
@@ -21,7 +21,13 @@
               </el-select>
             </div>
           </el-col>
-          <el-col :span="16">
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">按关键字搜索</div>
+              <el-input v-model="getApiData.keyword" placeholder="根据您的描述自动推荐皮肤"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="8">
             <div class="searchBtnBox">
               <el-button type="primary" @click="getData('search')">搜索</el-button>
             </div>