完成通栏版式、组件版式的相关页面

src/api/platestyle.js

@@ -0,0 +1,56 @@
+// 通栏版式
+import request from '@/utils/request'
+
+
+// 获取通栏版式位置
+export const getSectorPlaceSort = (data) => {
+    return request({
+        url: '/public/getSectorPlaceSort',
+        method: 'post',
+        data
+    })
+}
+// 获取通栏版式列表
+export const getSectorPlaceList = (data) => {
+    return request({
+        url: '/public/getSectorPlaceList',
+        method: 'post',
+        data
+    })
+}
+
+//新增通栏版式
+export const addSectorPlace = (data) => {
+    return request({
+        url: '/public/addSectorPlace',
+        method: 'post',
+        data
+    })
+}
+
+//删除通栏版式
+export const delSectorPlace = (data) => {
+    return request({
+        url: '/public/delSectorPlace',
+        method: 'post',
+        data
+    })
+}
+
+//编辑通栏版式
+export const upSectorPlace = (data) => {
+    return request({
+        url: '/public/upSectorPlace',
+        method: 'post',
+        data
+    })
+}
+
+//获取通栏版式详情
+export const getSectorPlaceInfo = (data) => {
+    return request({
+        url: '/public/getSectorPlaceInfo',
+        method: 'post',
+        data
+    })
+}

src/router/index.js

@@ -1166,7 +1166,7 @@ export const constantRoutes = [
         path: '',
         component: () => import('@/views/componentGallery/plate.vue'),
         meta: {
-          title: '版块',
+          title: '通栏',
           hidden: true,
           breadcrumb: true
         }
@@ -1349,6 +1349,40 @@ export const constantRoutes = [
     ]
   },
   // --------------企业管理fr--------------end---------
+  // --------------通栏版式管理fr--------------start---------
+  {
+    path: '/plateStyle',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/format/plateStyle'),
+        meta: {
+          title: '通栏版式列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/componentPlaceList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/format/componentPlaceList'),
+        meta: {
+          title: '组件版式列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  // --------------通栏版式管理fr--------------end---------
 ]
 
 /**

src/store/modules/platestyle.js

@@ -0,0 +1,77 @@
+import { getSectorPlaceSort,getSectorPlaceList,addSectorPlace,delSectorPlace,upSectorPlace,getSectorPlaceInfo} from '@/api/platestyle'
+
+
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+
+const actions = {
+    getSectorPlaceSort({commit},data) {
+        // console.log(data);
+        return new Promise((resolve, reject) => {
+            getSectorPlaceSort(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    getSectorPlaceList({commit},data) {
+        return new Promise((resolve, reject) => {
+            getSectorPlaceList(data).then(response => {
+            resolve(response)
+          }).catch(error => {
+            reject(error)
+          })
+        })
+      },
+      addSectorPlace({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addSectorPlace(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delSectorPlace({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delSectorPlace(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upSectorPlace({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upSectorPlace(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    getSectorPlaceInfo({commit},data) {
+        console.log(data);
+        return new Promise((resolve, reject) => {
+            getSectorPlaceInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/views/format/componentPlaceList.vue

@@ -0,0 +1,693 @@
+<template>
+    <!-- 广告位管理 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" v-if="this.total < this.tabbarType" />
+            <button class="btn" @click="addWebsite()">添加组件版式</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="component_type" label="组件版式编号" width="120">
+                        </el-table-column>
+                        <el-table-column prop="name" label="组件版式名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="size" label="尺寸（宽 * 高）" width="">
+                        </el-table-column>
+                        <el-table-column prop="sort_id" label="位置" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="组件版式名字:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="请输入组件版式名字"></el-input>
+                    </el-form-item>
+                    <el-form-item label="组件版式编号:" prop="type">
+                        <el-input v-model="ruleForm.type" placeholder="请输入组件版式编号" type="number" min="0"></el-input>
+                    </el-form-item>
+                       <el-form-item label="组件版式尺寸:" prop="size_id">
+                        <el-select v-model="ruleForm.size_id" placeholder="请选择尺寸">
+                            <el-option v-for="item in size_options" :key="item.id" :label="item.label" :value="item.id">{{item.label}}
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                   
+                 
+                    <el-form-item label="组件版式预览图：" prop="sector_img" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload">
+                                    <!-- 预览图片 -->
+                                    <img v-if="this.logoUrl" :src="this.logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.sector_img">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="组件版式位置:" prop="sort_id">
+                        <el-select v-model="ruleForm.sort_id" placeholder="请选择位置">
+                            <el-option v-for="item in sort_options" :key="item.id" :label="item.label" :value="item.id">{{item.label}}
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+// import { addFooterContent, getFooterContent, upFooterContent, delFooterContent } from '@/api/tabbar'
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
+export default {
+    components: {
+        tableTitle,//表格标题
+        myEditor,
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: "组件版式列表",  //列表标题
+            dialogTableVisible: false,  //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            logoUrl:'',
+            formLabelWidth: '', //广告示例图相关
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+            tableData: [],//表格数据
+            tabbarId: '',//底部导航传递的id
+            tabbarType: 1,//底部导航传递的类型
+            size_options: [],//尺寸下拉列表:[],
+            sort_options: [],//位置下拉列表:[],
+            //活动id
+            activeid: "",
+            type:null,
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            //弹框相关
+            ruleForm: {
+                type_id: 2,
+                name: '', //列表标题
+                sector_type:this.tabbarId,
+                type:null,
+                size_id:null,
+                sort_id:null,
+                sector_img: '', //组件版式预览图
+            },
+            rules: {
+                name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sector_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                type: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                size_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sort_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                // contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            const data = {
+                page:this.page,
+                page_size: this.pageSize,
+                type_id: 2,
+                sector_type: this.tabbarId
+            }
+            this.$store.dispatch('platestyle/getSectorPlaceList',data).then(data => {
+               
+                this.tableData =  data.data.row.data; //给与内容
+                this.total = data.data.count; //给与总条数
+                for(let i = 0; i < this.tableData.length; i++){
+                    this.tableData[i].size = this.tableData[i].width + " * " + this.tableData[i].height;
+                }
+                if (data.code != 200 && data.code != 0) {
+                    this.$message({
+                        message: data.code,
+                        type: 'error'
+                    })
+                }
+            }).catch(() => {
+                const data = {
+                    'code' : this.total,
+                    'msg' : this.tabbarType
+                }
+                 console.log("----------12-----------",data);
+               
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            // console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                // console.log("当前删除：" + id)
+                this.$store.dispatch('platestyle/delSectorPlace',{
+                    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();
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        // //1.7 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val)
+
+            //数据回显
+            this.ruleForm.name = val.name //列表标题
+            this.ruleForm.type = val.component_type
+            this.ruleForm.size_id = val.size_id
+            this.ruleForm.sort_id = val.sort_id
+            this.ruleForm.sector_img = val.sector_img //内容标题
+            this.logoUrl = val.sector_img
+            
+        },
+
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.name = '' //列表标题
+            this.ruleForm.sector_type = this.tabbarId //组件版式类型
+            this.ruleForm.type = null //组件类型
+            this.ruleForm.size_id = null //尺寸
+            this.ruleForm.sort_id = null //位置
+            this.ruleForm.sector_img = '' //组件版式预览图
+            this.logoUrl = ''
+        },
+        // 弹出层相关方法
+        // 1.9 提交表单
+        submitForm(formName) {
+            // 判断用户是否输入数据
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                } else {
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                // this.ruleForm. = 2;
+                
+                this.$store.dispatch('platestyle/addSectorPlace',this.ruleForm).then(data => {
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+            }
+            if (this.dialogName == "编辑") {
+                this.ruleForm.id = this.activeid;
+                this.ruleForm.sector_type = this.tabbarId;
+                this.$store.dispatch('platestyle/upSectorPlace',this.ruleForm).then(data => {
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '修改成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+            }
+
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            console.log(file);
+            const isJPEG = file.type === 'image/jpeg';
+            const isJPG = file.type === 'image/jpg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPEG && !isPNG && !isJPG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 或 JPEG格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.sector_img = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+         // 获取尺寸列表
+        getSizeList() {
+            this.$store.dispatch('plate/getAllSize').then(res => {
+                this.size_options  = res.data
+                if(res.data){
+                    this.size_options.forEach(item => {
+                        item.label = item.width + ' * ' + item.height;
+                    })
+                }
+                console.log(res.data);
+            }).catch(() => {
+                if (data.code != 200) {
+                    this.$message({
+                        message: data.message,
+                        type: 'error'
+                    })
+                }
+            })
+        },
+         // 获取位置列表
+        getSortList() {
+            this.sector_type = this.tabbarId;
+            this.$store.dispatch('platestyle/getSectorPlaceSort',{sector_type:this.sector_type}).then(res => {
+                this.sort_options  = res.data
+                console.log("位置列表",this.sort_options);
+            }).catch(() => {
+                if (data.code != 200) {
+                    this.$message({
+                        message: data.message,
+                        type: 'error'
+                    })
+                }
+            })
+        },
+        //取消
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+    },
+    mounted() {
+        console.log(this.$route.query.id);
+        this.tabbarId = this.$route.query.id
+        this.tabbarType = this.$route.query.type
+        this.getSizeList() //获取尺寸列表
+        this.getData() //获取数据
+        this.getSortList()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/format/components/CityCascader.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-cascader
+    :key="cascaderKey"
+    v-model="internalValue"
+    placeholder="请选择地区"
+    :props="SearchCityData"
+    filterable
+    clearable
+    @change="handleChange">
+  </el-cascader>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { // 接收外部传递的 v-model 值
+      type: [Array, String], // 允许传入数组或字符串类型的数据
+      default: () => [],
+    },
+  },
+  data() {
+    let self = this;
+    return {
+      internalValue: [], // 用于与级联选择器进行双向绑定的内部数据
+      cascaderKey: 0, // 用于强制刷新 cascader
+      SearchCityData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          let parentId = level == 0 ? 0 : data.value;
+          let parames = {
+            pid: parentId,
+          };
+          self.$store
+            .dispatch("pool/getcityList", parames)
+            .then((res) => {
+              if (res.data) {
+                const nodes = res.data.map((item) => ({
+                  value: item.id,
+                  label: item.name,
+                  leaf: level >= 3,
+                  children: [],
+                }));
+                resolve(nodes);
+              }
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                message: "网络错误，请重试！",
+              });
+            });
+        },
+      },
+    };
+  },
+  watch: {
+    value: {
+      immediate: true, // 组件挂载时立即执行
+      handler(newVal) {
+        try {
+          const parsedValue = Array.isArray(newVal) ? newVal : JSON.parse(newVal);
+          this.internalValue = parsedValue; // 设置内部值
+          if (parsedValue.length) {
+            this.loadCascaderPath(parsedValue); // 动态加载回显的路径
+          }
+        } catch (error) {
+          console.error("无法解析传入的值:", error);
+          this.internalValue = []; // 如果解析失败，重置为默认空数组
+        }
+      },
+    },
+  },
+  methods: {
+    handleChange(value) {
+      // 当选择变化时，向父组件发送更新的值
+      this.$emit("input", value); // v-model 双向绑定
+      this.$emit("update-city-id", value); // 额外事件，方便父组件监听
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/getcityList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.internalValue = path; // 确保最后一级路径正确设置
+              this.cascaderKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 可根据需要自定义样式 */
+</style>

src/views/format/components/tableTitle.vue

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

src/views/format/plateStyle.vue

@@ -0,0 +1,819 @@
+<template>
+    <!-- 单页 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                 <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">通栏版式名称</div>
+                        <el-input v-model="apiData.name" clearable placeholder="请输入通栏名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">组件版式数量</div>
+                        <el-input v-model="apiData.component_num" clearable placeholder="请输入组件版式数量"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸</div>
+                        <div class="sizeBox">
+                            <div class="sizeInput"><el-input v-model="apiData.width" clearable placeholder="宽"></el-input> </div>
+                            <div class="sizeInputSymbol">*</div>
+                            <div class="sizeInput"><el-input v-model="apiData.height" clearable placeholder="高"></el-input></div>
+                        </div>
+                    </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>
+        </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%">
+                        <el-table-column prop="sector_type" label="类型编号" width="">
+                        </el-table-column>
+                        <el-table-column prop="name" label="通栏版式名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="component_num" label="组件版式数量" width="">
+                        </el-table-column>
+                        <el-table-column prop="size" 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="300">
+                            <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 class="listLookBtn" @click="goLook(scope.row.id, scope.row)">
+                                        <i class="el-icon-view"></i>
+                                        查看
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="通栏版式名称:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="请输入通栏版式名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="通栏版式编号:" prop="type">
+                        <el-input v-model="ruleForm.type" placeholder="请输入通栏版式编号" type="number" min='1'></el-input>
+                    </el-form-item>
+                    <el-form-item label="组件版式数量:" prop="component_num">
+                        <el-input v-model="ruleForm.component_num" placeholder="请输入组件版式数量" type="number" min='1'></el-input>
+                    </el-form-item>
+                    <el-form-item label="通栏版式尺寸:" prop="size_id">
+                        <el-select v-model="ruleForm.size_id" placeholder="请选择通栏版式尺寸">
+                            <el-option v-for="item in size_options" :key="item.id" :label="item.label" :value="item.id">{{item.label}}
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="通栏版式预览图：" prop="sector_img" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload">
+                                    <!-- 预览图片 -->
+                                    <img v-if="this.logoUrl" :src="this.logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.sector_img">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: "通栏版式列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            disabled: false, //禁用
+
+            tableData: [],//表格数据
+            size_options: [],//尺寸下拉列表:[],
+            // 可以输入的搜索框相关
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+
+            activeid: "",  //通栏版式类型id 
+            type: "",  //查看时需要传递的组件版式数量
+            formLabelWidth: '', //广告示例图相关
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            apiData: {
+                name: '', //通栏版式名称
+                component_num: null, //组件数量
+                size_id: '',       //尺寸
+                width:null,
+                height:null,
+            },
+
+            ruleForm: {
+                name: '', //通栏版式名称
+                type: '', //通栏版式编号
+                component_num: '', //组件数量
+                size_id: '', //尺寸
+                sector_img: '', //通栏版式预览图
+                sector_type:null,
+            },
+            rules: {
+                name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                type: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_num: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                size_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sector_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            const data = {
+                page: this.page,
+                page_size: this.pageSize,
+                type_id: 1,
+            }
+            this.$store.dispatch('platestyle/getSectorPlaceList',data).then(res => {
+                this.tableData =  res.data.row.data; //给与内容
+                this.total = res.data.count; //给与总条数
+                for(let i = 0; i < this.tableData.length; i++){
+                    this.tableData[i].size = this.tableData[i].width + " * " + this.tableData[i].height;
+                }
+            }).catch(() => {
+            this.$message({
+                type: 'error',
+                message: '网络错误，请重试！'
+            });
+            })
+
+
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                this.$store.dispatch('platestyle/delSectorPlace',{id:id}).then(res => {
+                    if(res.code == 200){
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    }else if(res.code == 0){
+                        this.$message({
+                            message: res.message,
+                            type: 'error'
+                        })
+                    }
+                })
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 查看示例图
+        goGraph() {
+            this.dialogVisible = true
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            const data = {
+                page: this.page,
+                page_size: this.pageSize,
+                type_id: 1,
+                component_num : this.apiData.component_num ?? '',
+                width : this.apiData.width ?? '',
+                height : this.apiData.height ?? '',
+                name : this.apiData.name ?? '',
+            }
+            this.$store.dispatch('platestyle/getSectorPlaceList',data).then(res => {
+                this.tableData =  res.data.row.data; //给与内容
+                this.total = res.data.count; //给与总条数
+                for(let i = 0; i < this.tableData.length; i++){
+                    this.tableData[i].size = this.tableData[i].width + " * " + this.tableData[i].height;
+                }
+            }).catch(() => {
+            this.$message({
+                type: 'error',
+                message: '网络错误，请重试！'
+            });
+            })
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.apiData.name = '', //通栏版式名称
+            this.apiData.component_num = null, //组件数量
+            this.apiData.width = null,
+            this.apiData.height = null,
+            this.apiData.size_id = '',       //尺寸
+            this.getData()
+        },
+         // 获取尺寸列表
+        getSizeList() {
+            this.$store.dispatch('plate/getAllSize').then(res => {
+                this.size_options  = res.data
+                if(res.data){
+                    this.size_options.forEach(item => {
+                        item.label = item.width + ' * ' + item.height;
+                    })
+                }
+                console.log(res.data);
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.disabled = true
+            console.log(id, val);
+            console.log("状态", val);
+
+            //数据回显
+        //    console.log("fesfefefef",val);
+           this.ruleForm.name = val.name
+           this.ruleForm.type = val.sector_type
+           this.ruleForm.component_num = val.component_num
+           this.ruleForm.size_id = val.size_id
+           this.ruleForm.sector_img = val.sector_img
+           this.ruleForm.sector_type = val.sector_type
+           this.logoUrl = val.sector_img
+        },
+
+        //2.0 查看
+        goLook(id, val) {
+            this.activeid = val.sector_type
+            this.type = val.component_num
+            this.$router.push({
+                path: '/componentPlaceList',
+                query: {
+                    id: this.activeid,
+                    type: this.type
+                }
+            })
+        },
+
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+            this.disabled = false
+
+            //添加时清空回显回来的数据
+            this.ruleForm.name = '', //通栏版式名称
+            this.ruleForm.type = '', //通栏版式编号
+            this.ruleForm.component_num = '' //组件数量
+            this.ruleForm.size_id = '', //尺寸
+            this.ruleForm.sector_img = '' //通栏版式预览图
+            this.logoUrl = ''
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                this.ruleForm.type_id = 1;
+                this.$store.dispatch('platestyle/addSectorPlace',this.ruleForm).then(res => {
+                    console.log(res);
+                    if(res.code != 200){
+                        this.$message({
+                            type: 'error',
+                            message: res.message
+                        })
+                    }else{
+                        this.$message({
+                            type: 'success',
+                            message: '添加成功'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    }
+                }).catch(() => {
+                     this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                    
+                })
+            }
+            if (this.dialogName == "编辑") {
+               this.ruleForm.type_id = 1;
+               this.ruleForm.id = this.activeid;
+               delete this.ruleForm.sector_type;
+               console.log("回显相关",this.ruleForm);
+                this.$store.dispatch('platestyle/upSectorPlace',this.ruleForm).then(res => {
+                    console.log(res);
+                    if(res.code != 200){
+                        this.$message({
+                            type: 'error',
+                            message: res.message
+                        })
+                    }else{
+                        this.$message({
+                            type: 'success',
+                            message: '修改成功！'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    }
+                }).catch(() => {
+                     this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                    
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            console.log(file);
+            const isJPEG = file.type === 'image/jpeg';
+            const isJPG = file.type === 'image/jpg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPEG && !isPNG && !isJPG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 或 JPEG格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.sector_img = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+        //
+        
+    },
+    mounted() {
+        this.getData()
+        this.getSizeList()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+.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%;
+        }
+    }
+}
+// 提示信息
+.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,
+    .listLookBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+
+        >i {
+            padding-right: 8px;
+        }
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>