增加广告，设置，权限管理

增加广告，设置，权限管理

src/layout/components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <div class="pageTitle">{{this.$route.meta.title}}</div>
+    <div class="pageTitle">{{ this.$route.meta.title }}</div>
     <!--收缩左侧菜单按钮-->
     <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
@@ -16,11 +16,13 @@
         </el-tooltip>
         <lang-select class="right-menu-item hover-effect" />
       </template> -->
+      
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <!-- <img src="@/assets/public/nav/notice.png" class="user-notice"> -->
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <span class="userName">{{this.$store.state.user.name}}</span>
+          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" v-if="avatar != ''">
+          <img src="@/assets/login/userDefault.png" class="user-avatar" v-else>
+          <span class="userName">{{ this.$store.state.user.name }}</span>
           <img src="@/assets/public/nav/arrowDown.png" class="arrowDown">
           <!--向下按钮-->
           <!-- <i class="el-icon-caret-bottom" /> -->
@@ -48,7 +50,7 @@
           </a> -->
           <el-dropdown-item divided @click.native="logout">
             <div class="userMenuDownItem">
-              <span style="display:block;">{{$t('navbar.logOut')}}</span>
+              <span style="display:block;">{{ $t('navbar.logOut') }}</span>
               <img src="@/assets/public/nav/Logout.png">
             </div>
           </el-dropdown-item>
@@ -68,7 +70,8 @@ import SizeSelect from '@/components/SizeSelect'
 import LangSelect from '@/components/LangSelect'
 import Search from '@/components/HeaderSearch'
 import axios from 'axios';
-
+import router, { resetRouter } from '@/router'
+import BASEURL from '@/utils/baseUrl'
 
 export default {
   components: {
@@ -80,6 +83,11 @@ export default {
     LangSelect,
     Search
   },
+  data() {
+    return {
+      msg: {}
+    }
+  },
   computed: {
     ...mapGetters([
       'sidebar',
@@ -87,7 +95,19 @@ export default {
       'device'
     ]),
   },
+  mounted() {
+    this.getMsg();
+  },
   methods: {
+    getMsg() {
+      this.$store.dispatch('news/getMSG').then(response => {
+        console.log(response);
+        this.msg = response.data;
+        console.log(this.msg);
+      }).catch(error => {
+        console.log(error);
+      });
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -96,9 +116,23 @@ export default {
     //   this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     // },
     logout() {
-      const token = this.getTokenFromCookie(); // 获取 token
-      
-      axios.get('http://admindev.bjzxtw.org.cn/auth/logoutapi.php', {params:{token:token} }).then(response => {
+      //获取 token
+      const token = this.getTokenFromCookie();
+
+      // 新做的，待替换
+      // this.$store.dispatch('user/logoutapi', {token: token}).then(response => {
+      //   //重置访问过的路由
+      //   resetRouter()
+      //   dispatch('tagsView/delAllViews', null, { root: true })
+      //   console.log(response);
+      //   this.$store.commit("user/LOGOUT");
+      //   this.$router.push(`/login`);
+      // }).catch(error => {
+      //   this.$store.commit("user/LOGOUT");
+      //   this.$router.push(`/login`);
+      // });
+
+      axios.get(BASEURL.WebCLogoutUrl, { params: { token: token } }).then(response => {
         console.log(response);
         this.$store.commit("user/LOGOUT");
         this.$router.push(`/login`);
@@ -107,7 +141,7 @@ export default {
         this.$store.commit("user/LOGOUT");
         this.$router.push(`/login`);
         this.$message.error(response.message);
-      }); 
+      });
     },
     getTokenFromCookie() {
       const name = "Admin-Token=";
@@ -130,12 +164,12 @@ export default {
   height: 60px;
   overflow: hidden;
   position: relative;
-  display:flex;
+  display: flex;
   align-items: center;
   justify-content: space-between;
   background: #fff;
   // box-shadow: 0 1px 4px rgba(0,21,41,.08);
-  border-bottom:1px solid #E9EDF7;
+  border-bottom: 1px solid #E9EDF7;
 
   .pageTitle {
     font-size: 20px;
@@ -146,7 +180,7 @@ export default {
 
   .userName {
     font-size: 14px;
-    color:#1C1D22;
+    color: #1C1D22;
     margin-left: 10px;
     font-weight: bold;
   }
@@ -158,7 +192,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
@@ -216,15 +250,15 @@ export default {
         }
 
         .arrowDown {
-          width:12px;
-          height:8px;
-          margin-left:10px;
+          width: 12px;
+          height: 8px;
+          margin-left: 10px;
         }
 
         .user-notice {
           width: 20px;
           height: 20px;
-          margin-right:20px;
+          margin-right: 20px;
         }
 
         .el-icon-caret-bottom {
@@ -238,15 +272,16 @@ export default {
     }
   }
 }
+
 .userMenuDownItem {
   width: 100px;
-  display:flex;
+  display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .el-dropdown-menu__item:not(.is-disabled):hover {
   background: none;
-  color:#606266;
+  color: #606266;
 }
-
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -1,12 +1,36 @@
 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <!--pre环境-->
+      <a href="/" class="sidebar-logo-link" v-if="this.$store.state.user.userurl=='adminpre.bjzxtw.org.cn'||this.$store.state.user.userurl=='localhost:9527'">
+        <h1 class="sidebar-title">返回首页</h1>
+      </a>
+      <a :href="'http://' + this.$store.state.user.userurl" class="sidebar-logo-link" target="_blank" v-else>
+        <h1 class="sidebar-title">返回首页</h1>
+      </a>
+      <!--dev环境-->
+      <!-- <a href="/" class="sidebar-logo-link" v-if="this.$store.state.user.userurl=='admindev.bjzxtw.org.cn'||this.$store.state.user.userurl=='localhost:9527'">
+        <h1 class="sidebar-title">返回首页</h1>
+      </a>
+      <a :href="'http://' + this.$store.state.user.userurl" class="sidebar-logo-link" target="_blank" v-else>
+        <h1 class="sidebar-title">返回首页</h1>
+      </a> -->
+
+
+      <!-- <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <h1 class="sidebar-title">{{ title }} </h1>
-      </router-link>
+      </router-link> -->
+      <!-- <a :href="'http://' + this.$store.state.user.userurl" v-if="collapse" key="collapse" class="sidebar-logo-link">
+        <h1 class="sidebar-title" v-if="this.$store.state.user.usertype==10000">返回首页</h1>
+        <h1 class="sidebar-title" v-else>返回首页</h1>
+      </a>
+      <a :href="'http://' + this.$store.state.user.userurl" v-else key="expand" class="sidebar-logo-link">
+        <h1 class="sidebar-title" v-if="this.$store.state.user.usertype==10000">返回首页</h1>
+        <h1 class="sidebar-title" v-else>返回首页</h1>
+      </a> -->
     </transition>
   </div>
 </template>

src/permission.js

@@ -19,6 +19,8 @@ router.beforeEach(async(to, from, next) => {
 
   // determine whether the user has logged in
   const hasToken = getToken()
+  //检测token的状态
+  await store.dispatch('user/logoutStatus')
 
   if (hasToken) {
     if (to.path === '/login') {

src/router/index.js

@@ -107,6 +107,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/addWebsite',
+    component: Layout,
+    children: [
+      {
+        name: '', //直接就是根目录所以为空
+        path: '',
+        component: () => import('@/views/website/addWebsite'),
+        meta: {
+          title: '添加网站', // 设置菜单和面包屑显示的标题
+          hidden: true, // 不在侧边菜单显示
+          breadcrumb: true // 强制在面包屑中显示
+        }
+      }
+    ]
+  },
   {
     path: '/categoryList',
     component: Layout,
@@ -459,6 +475,70 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/adPlaceDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/advertise/adPlaceDetail'),
+        meta: {
+          title: '广告位详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/blogroll',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/website/blogroll.vue'),
+        meta: {
+          title: '友情链接',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/tabbar',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/tabbar/tabbar.vue'),
+        meta: {
+          title: '单页',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/tabbarDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/tabbar/tabbarDetail.vue'),
+        meta: {
+          title: '单页详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // {
   //   path: '/documentation',
   //   component: Layout,

src/utils/baseUrl.js

@@ -6,7 +6,11 @@ const URL = {
   //baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
   //baseUrl: 'http://192.168.1.127:9501',//刘剑的本地环境
   //WebsocketUrl: 'ws://192.168.1.201:9506',//刘佳伟websocket地址
-  WebsocketUrl: 'ws://192.168.1.127:9506'//刘剑websocket地址
+  //WebsocketUrl: 'ws://192.168.1.127:9506',//刘剑websocket地址
+  WebsocketUrl: 'wss://flzxw.bjzxtw.org.cn',//正式环境域名 wss可用 -- websocket地址
+  WebCloginUrl: 'https://flzxw.bjzxtw.org.cn/api/loginapi', //单点登录地址
+  WebCLogoutUrl: 'https://flzxw.bjzxtw.org.cn/api/logoutapi', //单点登录退出
+  webClogBackUrL: 'https://admin.bjzxtw.org.cn/auth/back_login.php' //单点登录返回地址
 }
 
 export default URL;

src/views/advertise/adPlaceDetail.vue

@@ -0,0 +1,118 @@
+<template>
+    <!-- 广告位详情 -->
+    <div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <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="website_name" label="网站名称" width="">
+                </el-table-column>
+                <el-table-column prop="name" label="广告名称" width="">
+                </el-table-column>
+                <!-- <el-table-column prop="image_src" label="广告图" width="">
+                </el-table-column> -->
+                <el-table-column label="广告图" width="">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.image_src" alt="" class="uploadImage">
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column prop="status" label="尺寸" width="">
+                </el-table-column> -->
+                <el-table-column prop="image_url" label="广告链接" width="">
+                </el-table-column>
+                <el-table-column prop="fromtime" label="开始时间" width="">
+                </el-table-column>
+                <el-table-column prop="totime" label="结束时间" width="">
+                </el-table-column>
+                <el-table-column prop="day" label="剩余时间 (天)" width="">
+                </el-table-column>
+            </el-table>
+        </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'
+
+//引入公用样式
+import '@/styles/global.less';
+import { getAdList } from '@/api/advertise'
+export default {
+    components: {
+        tableTitle,//表格标题
+    },
+    data() {
+        return {
+            tableDivTitle: "广告位详情",  //列表标题
+
+            tableData: [],//表格数据
+
+            //活动id
+            activeid: "",
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+        }
+    },
+
+    methods: {
+        //1.1 开始请求列表信息方法
+        getData() {
+            getAdList({
+                pid: this.activeid,
+                page: this.page,
+                pageSize: this.pageSize
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+            })
+
+        },
+        //1.2 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.3 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+    },
+    mounted() {
+        this.activeid = this.$route.query.id
+        console.log(this.activeid);
+
+        this.getData()
+
+
+    },
+}
+</script>
+
+<style scoped lang="less">
+.layerBox {
+    padding: 30px 20px;
+}
+</style>

src/views/advertise/advertiseList.vue

@@ -4,9 +4,9 @@
         <!-- 提示信息 -->
         <div class="tips">
             <el-row>
-                <el-col :span="12">
+                <el-col :span="24">
                     <i class="tipsIcon"></i>
-                    <span class="tipsText">7个工作日内，若运营没有操作用户的申请，则用户申请的时间、信息等将会释放。</span>
+                    <span class="tipsText">24小时内，若运营没有操作用户的申请，则用户申请的时间、信息等将会释放。</span>
                 </el-col>
             </el-row>
         </div>
@@ -16,29 +16,19 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">工单编号</div>
-                        <el-input class="input" v-model="order_code" placeholder="请输入工单编号"></el-input>
+                        <el-input class="input" v-model="order_code" clearable placeholder="请输入工单编号"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">审核状态</div>
-                        <el-select v-model="status" placeholder="请选择审核状态">
+                        <div class="searchTitle">订单状态</div>
+                        <el-select v-model="order_status" clearable placeholder="请选择订单状态">
                             <el-option v-for="item in order" :key="item.value" :label="item.label" :value="item.value">
                             </el-option>
                         </el-select>
                     </div>
                 </el-col>
-                <el-col :span="6" class="left">
-                    <div class="searchBox">
-                        <div class="searchTitle">广告状态</div>
-                        <el-select v-model="ad_status" placeholder="请选择广告状态">
-                            <el-option v-for="item in order_ad" :key="item.value" :label="item.label"
-                                :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </div>
-                </el-col>
-                <el-col :span="6" class="right">
+                <el-col :span="8" class="right">
                     <div class="btnList">
                         <button class="search" @click="goSearch">搜索</button>
                         <button class="reset" @click="goReset">重置</button>
@@ -52,23 +42,21 @@
             <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 fixed prop="id" label="编号" width="80">
                         </el-table-column>
-                        <el-table-column prop="order_num" label="工单编号" width="120">
+                        <el-table-column prop="order_num" label="工单编号" width="175">
                         </el-table-column>
-                        <el-table-column prop="user_name" label="广告名称" width="255">
+                        <el-table-column prop="name" label="广告名称" width="160">
                         </el-table-column>
-                        <el-table-column prop="status" label="审核状态" width="90" algin="center">
+                        <el-table-column prop="orderStatus" label="订单状态" width="100">
                         </el-table-column>
-                        <el-table-column prop="ad_status" label="广告状态" width="90">
+                        <el-table-column prop="sttime" label="开始时间" width="">
                         </el-table-column>
-                        <el-table-column prop="sttime" label="开始时间" width="120">
-                        </el-table-column>
-                        <el-table-column prop="edtime" label="结束时间" width="120">
+                        <el-table-column prop="edtime" label="结束时间" width="">
                         </el-table-column>
                         <el-table-column prop="cttime" label="创建时间" width="">
                         </el-table-column>
-                        <el-table-column prop="admin_user_name" label="操作人" width="100">
+                        <el-table-column prop="price" label="总金额" width="110">
                         </el-table-column>
                         <el-table-column fixed="right" label="操作" width="330">
                             <template slot-scope="scope">
@@ -108,35 +96,67 @@
                         <el-input v-model="ruleForm.name" disabled placeholder="请输入网站名称"></el-input>
                     </el-form-item>
                     <el-form-item label="广告网址:" prop="">
-                        <el-input v-model="ruleForm.name" disabled placeholder="请输入网站名称"></el-input>
+                        <el-input v-model="ruleForm.ad_url" disabled placeholder="请输入网站名称"></el-input>
                     </el-form-item>
                     <el-form-item label="广告图:" prop="">
                         <div class="adImage">
-                            <img src="../../assets/advertise/404.png" alt="">
+                            <img :src="ruleForm.adImg" v-if="this.ruleForm.adImg" alt="">
+                            <img :src="'../../assets/advertise/404.png'" v-else-if="this.ruleForm.adImg = ''" alt="">
                         </div>
                     </el-form-item>
                     <el-form-item label="持续时间:" prop="">
-                        <el-date-picker v-model="ruleForm.startTime" type="datetime" disabled placeholder="选择日期时间">
-                        </el-date-picker> 至
-                        <el-date-picker v-model="ruleForm.endTime" type="datetime" disabled placeholder="选择日期时间">
+                        <el-date-picker v-model="ruleForm.time" type="datetimerange" range-separator="至"
+                            start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
+                            value-format="yyyy-MM-dd HH:mm:ss" :picker-options="startTimeOptions"
+                            @change="changeStartTime">
                         </el-date-picker>
+                        <!-- <el-col :span="11">
+                            <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期时间"
+                                format="yyyy-MM-dd HH:00:00" value-format="yyyy-MM-dd HH:00:00"
+                                :picker-options="startTimeOptions" @change="changeStartTime">
+                            </el-date-picker>
+                        </el-col>
+                        <el-col :span="2" class="zhi">
+                            至
+                        </el-col>
+                        <el-col :span="11">
+                            <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期时间"
+                                format="yyyy-MM-dd HH:00:00" value-format="yyyy-MM-dd HH:00:00"
+                                :picker-options="endTimeOptions">
+                            </el-date-picker>
+                        </el-col> -->
                     </el-form-item>
                     <el-form-item label="广告尺寸:" prop="">
-                        <el-radio v-model="ruleForm.radio" label="1">1200x90px</el-radio>
-                        <el-radio v-model="ruleForm.radio" label="2">420x560px</el-radio>
+                        <el-radio v-model="ruleForm.radio" v-for="(item,index) in adSizeList" :key="index" disabled :label=item.id>{{ item.width+'x'+item.height }}</el-radio>
                     </el-form-item>
 
                     <el-form-item label="价格:" prop="price">
                         <div class="price">
-                            <el-input v-model="ruleForm.price" placeholder="请输入价格"></el-input> 元 x
-                            <el-input v-model="ruleForm.days" disabled placeholder="请输入天数"></el-input> 天 x
-                            <el-input v-model="ruleForm.num" disabled placeholder="请输入个数"></el-input> 个
+                            <el-col :span="6">
+                                <el-input v-model="ruleForm.price" placeholder="请输入价格"></el-input>
+                            </el-col>
+                            <el-col :span="2" class="zhi">
+                                元 x
+                            </el-col>
+                            <el-col :span="6">
+                                <el-input v-model="ruleForm.days" disabled placeholder="请输入天数"></el-input>
+                            </el-col>
+                            <el-col :span="2" class="zhi">
+                                天 x
+                            </el-col>
+                            <el-col :span="6">
+                                <el-input v-model="ruleForm.num" disabled placeholder="请输入个数"></el-input>
+                            </el-col>
+                            <el-col :span="2" class="zhi">
+                                个
+                            </el-col>
                         </div>
                     </el-form-item>
                     <el-form-item label="广告位置:" prop="">
                         <span class="example" @click="goGraph">查看示例图</span>
                         <div>
-                            <el-button disabled v-for="item in 12" class="el_btnList">中农兴业网 一号广告位</el-button>
+                            <el-button disabled v-for="item in ruleForm.adPlace" class="el_btnList">{{ item
+                            }}</el-button>
                         </div>
                     </el-form-item>
                 </div>
@@ -149,26 +169,28 @@
         <!-- 弹出框 编辑 end----------------------------------------------------------->
 
         <!-- 弹出框 广告位示例图 start----------------------------------------------------------->
-        <el-dialog title="审核状态" :visible.sync="dialogVisible" width="50%" top="25vh">
-            <ul class="graph">
-                <li>
-                    <h3>首页:</h3>
-                    <img src="../../assets/advertise/guanggaowei2.png" alt="">
-                </li>
-                <li>
-                    <h3>列表页:</h3>
-                    <img src="../../assets/advertise/guanggaowei1.png" alt="">
-                </li>
-            </ul>
-            <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-dialog title="广告位示例图" :visible.sync="dialogVisible" width="60%" top="10vh">
+            <div class="graph">
+                <el-carousel indicator-position="outside" autoplay loop>
+                    <el-carousel-item>
+                        <img src="../../assets/advertise/001.png" alt="" class="shilitu">
+                    </el-carousel-item>
+                    <el-carousel-item>
+                        <img src="../../assets/advertise/002.png" alt="" class="shilitu">
+                    </el-carousel-item>
+                </el-carousel>
             </div>
         </el-dialog>
         <!-- 弹出框 广告位示例图 end----------------------------------------------------------->
 
         <!-- 弹出框 审核 start----------------------------------------------------------->
         <el-dialog title="审核状态" :visible.sync="dialogFormVisible" width="35%" top="25vh">
+            <template slot="title">
+                <div style="display: flex; align-items: center;">
+                    <span>审核状态</span>
+                    <span class="redTips">(确定后,审核状态不可再次更改.请确认好再审核)</span>
+                </div>
+            </template>
             <el-form ref="form" :model="form" label-width="80px">
                 <div class="radioGroup">
                     <el-radio-group v-model="status_radio">
@@ -181,7 +203,6 @@
                         </el-input>
                     </el-form-item>
                 </div>
-
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -199,7 +220,7 @@ import tableTitle from './components/tableTitle.vue';
 
 //引入公用样式
 import '@/styles/global.less';
-import { getStatus, getOrderListAdmin, getOrderDetailAdmin, applyOrderStatusAdmin, editOrderAdmin, rejectOrderAdmin, endOrderAdmin, delOrderAdmin } from '@/api/advertise'
+import { getStatus, getOrderList, getOrderListAdmin, getOrderDetail, getOrderDetailAdmin, applyOrderStatusAdmin, editOrderAdmin, rejectOrderAdmin, endOrderAdmin, delOrderAdmin,getSize } from '@/api/advertise'
 export default {
     components: {
         tableTitle,//表格标题-
@@ -211,17 +232,13 @@ export default {
             dialogName: '编辑', //编辑弹窗名称
             dialogFormVisible: false,     //审核弹框
             dialogVisible: false,  //示例图弹窗
-
             form: {},  //审核状态的ref属性名称
-
-
             tableData: [],//表格数据
-
+            ad_img: 'http://183.131.25.186:9501/image/20250102/1735810611310322.png', //广告图
             // 搜索框相关
             order_code: '', //工单编号 
-            status: '',//审核状态
-            ad_status: '',//广告状态
-            order: [ //审核状态数据
+            order_status: '',//订单状态
+            order: [ //订单状态数据
                 {
                     value: 1,
                     label: '已通过'
@@ -230,27 +247,9 @@ export default {
                     value: 2,
                     label: '已驳回'
                 },
-                {
-                    value: 5,
-                    label: '待审核'
-                },
-            ],
-            order_ad: [ //广告状态数据
-                {
-                    value: 1,
-                    label: '待投放'
-                },
-                {
-                    value: 2,
-                    label: '已驳回'
-                },
                 {
                     value: 3,
-                    label: '已撤回'
-                },
-                {
-                    value: 4,
-                    label: '已修改'
+                    label: '已取消'
                 },
                 {
                     value: 5,
@@ -262,37 +261,33 @@ export default {
                 },
                 {
                     value: 7,
-                    label: '已结束'
-                },
-                {
-                    value: 8,
-                    label: '投放中'
+                    label: '已完成'
                 }
             ],
-
             //活动id
             activeid: "",
-
             // 分页相关
             page: 1,
             pageSize: 10,
-            total: '',
-
+            total: 0,
+            orderads: [],
             // 审核弹窗相关
             status_radio: "",   //审核状态
             textarea: '',    //驳回原因
-
             formLabelWidth: '',
-
+            adSizeList: '', //广告尺寸
             ruleForm: {
                 name: '', //广告名称
                 ad_url: '', //广告网址
+                adImg: '', //广告图
                 radio: '',//广告尺寸
+                time: [], //持续时间
                 startTime: '', //开始时间
                 endTime: '',   //结束时间
                 price: '',  //价格
                 days: '',   //天数
                 num: '',   //个数
+                adPlace: [] //广告位
             },
             rules: {
                 name: [
@@ -301,60 +296,79 @@ export default {
                 price: [
                     { required: true, message: '请输入要修改的价格', trigger: 'change' }
                 ]
-            }
-        }
-    },
-    watch: {
-        status_radio: {
-            handler(newVal, oldVal) {
-                // console.log(newVal);
             },
-            deep: true,
-            immediate: true
+            //时间选择器
+            //日期选择器方法
+            startTimeOptions: {
+                disabledDate(time) {
+                    return time.getTime() < Date.now() - 8.64e7; // 禁用今天之前的日期
+                }
+            },
+            endTimeOptions: {
+                disabledDate(time) {
+                    return time.getTime() < Date.now() - 8.64e7; // 禁用今天之前的日期
+                }
+            },
         }
     },
     methods: {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            let data = new FormData()
-            data.append('page', this.page)
-            data.append('pageSize', this.pageSize)
-            console.log(data);
+            if (this.order_code == '' || this.order_status == '') {
+                let data = new FormData()
+                data.append('page', this.page)
+                data.append('pageSize', this.pageSize)
+                data.append('status', this.order_status)
+                data.append('order_num', this.order_code)
 
-            getOrderListAdmin(data).then(data => {
-                console.log("全部数据", data);
-                console.log(data.data.rows);
-                this.tableData = data.data.rows
-                this.total = data.data.count
-                for (let item of this.tableData) {
-                    if (item.status == 1) {
-                        item.status = "已通过"
-                    } else if (item.status == 2) {
-                        item.status = "已驳回"
-                    } else if (item.status == 6) {
-                        item.status = "待审核"
+                getOrderListAdmin(data).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count1
+                    for (let item of this.tableData) {
+                        if (item.status == 1) {
+                            item.orderStatus = '已通过'
+                        } else if (item.status == 7) {
+                            item.orderStatus = '已完成'
+                        } else if (item.status == 2) {
+                            item.orderStatus = '已驳回'
+                        } else if (item.status == 3) {
+                            item.orderStatus = '已取消'
+                        } else if (item.status == 5) {
+                            item.orderStatus = '已过期'
+                        } else if (item.status == 6) {
+                            item.orderStatus = '待审核'
+                        }
                     }
-
-                    if (item.ad_status == 1) {
-                        item.ad_status = "待投放"
-                    } else if (item.ad_status == 2) {
-                        item.ad_status = "已驳回"
-                    } else if (item.ad_status == 3) {
-                        item.ad_status = "已撤回"
-                    } else if (item.ad_status == 4) {
-                        item.ad_status = "已修改"
-                    } else if (item.ad_status == 5) {
-                        item.ad_status = "已过期"
-                    } else if (item.ad_status == 6) {
-                        item.ad_status = "待审核"
-                    } else if (item.ad_status == 7) {
-                        item.ad_status = "已结束"
-                    } else if (item.ad_status == 8) {
-                        item.ad_status = "待投放"
+                })
+            } else {
+                let data = new FormData()
+                data.append('page', this.page)
+                data.append('pageSize', this.pageSize)
+                console.log(data);
+                getOrderListAdmin(data).then(data => {
+                    console.log("getOrderListAdmin", data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count1
+                    for (let item of this.tableData) {
+                        if (item.status == 1) {
+                            item.orderStatus = '已通过'
+                        } else if (item.status == 7) {
+                            item.orderStatus = '已完成'
+                        } else if (item.status == 2) {
+                            item.orderStatus = '已驳回'
+                        } else if (item.status == 3) {
+                            item.orderStatus = '已取消'
+                        } else if (item.status == 5) {
+                            item.orderStatus = '已过期'
+                        } else if (item.status == 6) {
+                            item.orderStatus = '待审核'
+                        }
                     }
-                }
-            })
+                })
+            }
+
         },
 
         //1.2 删除内容
@@ -414,80 +428,102 @@ export default {
         // 1.6 搜索按钮
         goSearch() {
             console.log(this.status);
-            
+
             let data = new FormData()
             data.append('page', this.page)
             data.append('pageSize', this.pageSize)
-            data.append('status', this.status)
-            data.append('ad_status', this.ad_status)
+            data.append('status', this.order_status)
             data.append('order_num', this.order_code)
-            data.append('sttime', "")
-            data.append('edtime', "")
             console.log(data);
 
             getOrderListAdmin(data).then(data => {
                 console.log(data);
-                console.log(data.data.rows);
                 this.tableData = data.data.rows
-                this.total = data.data.count
+                this.total = data.data.count1
                 for (let item of this.tableData) {
                     if (item.status == 1) {
-                        item.status = "已通过"
+                        item.orderStatus = '已通过'
+                    } else if (item.status == 7) {
+                        item.orderStatus = '已完成'
                     } else if (item.status == 2) {
-                        item.status = "已驳回"
+                        item.orderStatus = '已驳回'
+                    } else if (item.status == 3) {
+                        item.orderStatus = '已取消'
+                    } else if (item.status == 5) {
+                        item.orderStatus = '已过期'
                     } else if (item.status == 6) {
-                        item.status = "待审核"
-                    }
-
-                    if (item.ad_status == 1) {
-                        item.ad_status = "待投放"
-                    } else if (item.ad_status == 2) {
-                        item.ad_status = "已驳回"
-                    } else if (item.ad_status == 3) {
-                        item.ad_status = "已撤回"
-                    } else if (item.ad_status == 4) {
-                        item.ad_status = "已修改"
-                    } else if (item.ad_status == 5) {
-                        item.ad_status = "已过期"
-                    } else if (item.ad_status == 6) {
-                        item.ad_status = "待审核"
-                    } else if (item.ad_status == 7) {
-                        item.ad_status = "已结束"
-                    } else if (item.ad_status == 8) {
-                        item.ad_status = "待投放"
+                        item.orderStatus = '待审核'
                     }
                 }
             })
         },
         //1.7 重置按钮
         goReset() {
-            this.order_code = '',
-                this.status = ''
-            this.ad_status = ''
+            this.order_code = ''
+            this.order_status = ''
+            this.page = 1
+            this.pageSize = 10
             this.getData();
         },
         //列表和分页相关 end ------------------------------------------------------------>
 
         //1.9 编辑
         goEdit(id, val) {
-            console.log(id);
-
+            console.log(id, val);
             this.activeid = id
             this.dialogTableVisible = true
-            console.log(id, val);
-            this.ruleForm.name = val.user_name
-            this.ruleForm.ad_url = val.ad_url
-            // this.ruleForm.radio = val.width
+            this.ruleForm.name = val.name
+            if (val.width == 1200 && val.height == 90) {
+                this.ruleForm.radio = 1
+            } else if(val.width == 830 && val.height == 110) {
+                this.ruleForm.radio = 2
+            } else if(val.width == 450 && val.height == 290) {
+                this.ruleForm.radio = 3
+            }
             this.ruleForm.startTime = val.sttime
             this.ruleForm.endTime = val.edtime
-            this.ruleForm.price = val.price
             this.ruleForm.days = val.days
+
+            let data = new FormData()
+            data.append('id', id)
+
+            //查看列表详情
+            getOrderDetailAdmin(data).then(data => {
+                // console.log('详情', data);
+                console.log('详情', data.data.ad[0]?.image_url);
+
+                this.ruleForm.ad_url = data.data.ad[0]?.image_url //广告链接
+                this.ruleForm.adImg = data.data.ad[0]?.image_src //广告图
+                this.ruleForm.num = data.data.ad.length //广告个数
+                this.ruleForm.price = val.price / val.days / this.ruleForm.num //广告价格
+                this.ruleForm.startTime = val.sttime//持续时间开始
+                this.ruleForm.endTime = val.edtime//持续时间结束
+                this.ruleForm.time = [val.sttime, val.edtime] //持续时间
+
+                let adPlace = data.data.ad
+
+                this.ruleForm.adPlace = []
+
+                for (let item of adPlace) {
+                    this.ruleForm.adPlace.push(item.ad_name)//广告位名称
+                }
+                console.log(this.ruleForm.adPlace);
+            })
         },
 
         //2.0 审核
         goReview(id, val) {
             this.activeid = id
-            this.dialogFormVisible = true
+            this.activeid = id
+            if (val.status != 6) {
+                this.$message({
+                    message: '该广告已经审核，不能再次审核',
+                    type: 'warning'
+                })
+                this.dialogFormVisible = false
+            } else {
+                this.dialogFormVisible = true
+            }
         },
 
         //审核中的确定
@@ -517,20 +553,20 @@ export default {
                 let data = new FormData()
                 data.append('id', this.activeid)
                 data.append('reason', this.textarea)
-                rejectOrderAdmin(data).then(data=>{
+                rejectOrderAdmin(data).then(data => {
                     console.log(data);
-                    if(data.code==200){
+                    if (data.code == 200) {
                         this.$message({
-                            message:'修改成功',
-                            type:'success'
+                            message: '修改成功',
+                            type: 'success'
                         })
                         this.dialogFormVisible = false
                         this.getData()
                     }
-                    if(data.code==0){
+                    if (data.code == 0) {
                         this.$message({
-                            message:data.message,
-                            type:'error'
+                            message: data.message,
+                            type: 'error'
                         })
                     }
                 })
@@ -540,9 +576,12 @@ export default {
         // 弹出层相关方法
         // 提交表单
         submitForm() {
+            let total = this.ruleForm.price * this.ruleForm.days * this.ruleForm.num
             let data = new FormData()
             data.append('id', this.activeid)
-            data.append('price', this.ruleForm.price)
+            data.append('price', total.toFixed(2))
+            data.append('sttime', this.ruleForm.startTime)
+            data.append('edtime', this.ruleForm.endTime)
             editOrderAdmin(data).then(data => {
                 console.log(data);
                 if (data.code == 200) {
@@ -551,29 +590,176 @@ export default {
                         message: '修改成功',
                         type: 'success'
                     })
+                    this.getData()
                 }
                 if (data.code == 0) {
                     this.$message({
-                        message: data.message + ',需要保留两位小数',
+                        message: data.message,// + ',需要保留两位小数',
                         type: 'error'
                     })
-                    this.dialogTableVisible = true
                 }
             })
         },
+        //获取天数
+        getDays() {
+            let total = this.ruleForm.price * this.ruleForm.days * this.ruleForm.num
+            let data = new FormData()
+            data.append('id', this.activeid)
+            data.append('price', total.toFixed(2))
+            data.append('sttime', this.ruleForm.startTime)
+            data.append('edtime', this.ruleForm.endTime)
+            editOrderAdmin(data).then(data => {
+                console.log(data);
+                // if (data.code == 200) {
+                //     // this.dialogTableVisible = false
+                //     this.$message({
+                //         message: '修改成功',
+                //         type: 'success'
+                //     })
+                //     this.getData()
+                // }
+                // if (data.code == 0) {
+                //     this.$message({
+                //         message: data.message,// + ',需要保留两位小数',
+                //         type: 'error'
+                //     })
+                // }
+            })
+        },
         //取消添加或编辑
         cancelForm() {
             this.dialogTableVisible = false
         },
+        // 时间选择器相关方法
+        changeStartTime(val) {
+            console.log('1111111111111111111', val);
+
+            // 先格式化传入的时间，选择的时间为下一个整数小时 0 分 0 秒
+            let time1 = new Date(new Date(val[0]).setMinutes(0, 0, 0) + 60 * 60 * 1000).getTime();
+            let time2 = new Date(new Date(val[1]).setMinutes(0, 0, 0) + 60 * 60 * 1000).getTime();
+            // 同样的道理，获取当前时间的下一个整数小时 0 分 0 秒
+            let currentTimestamp = new Date(new Date().setMinutes(0, 0, 0) + 60 * 60 * 1000).getTime();
+
+            if (time1 < currentTimestamp) {
+                this.$message.error('时间选择错误，已为您自动重设！');
+                // 第一步，将时间戳转换为本地时间
+                let localTime = new Date(currentTimestamp).toLocaleString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                }).replace(/\//g, '-');
+                // 第二步，将当前时间加 24 小时
+                let twoHoursLocalTime = new Date(currentTimestamp + 24 * 60 * 60 * 1000).toLocaleString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                }).replace(/\//g, '-');
+
+                // 第三步，将当前时间赋值给 ruleForm.time[0]
+
+                this.ruleForm.time[0] = localTime;
+                this.ruleForm.time[1] = twoHoursLocalTime;
+                this.ruleForm.startTime = localTime;
+                this.ruleForm.endTime = twoHoursLocalTime;
+
+                const time1 = new Date(this.ruleForm.endTime);
+                const time2 = new Date(this.ruleForm.startTime);
+                const diff = time1.getTime() - time2.getTime();
+                this.ruleForm.days = diff / (1000 * 60 * 60 * 24);
+
+
+            } else {
+                // 第二种情况，传入的时间戳大于当前时间
+                // 但是时间间隔小于 24 小时
+                if (time2 - time1 < 24 * 60 * 60 * 1000) {
+                    this.$message.error('广告持续时间不得低于 24 小时，已为您自动重设！');
+                    // 第一步，将时间戳转换为本地时间
+                    let localTime = new Date(currentTimestamp).toLocaleString('zh-CN', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                    }).replace(/\//g, '-');
+                    // 第二步，将当前时间加 24 小时
+                    let twoHoursLocalTime = new Date(currentTimestamp + 24 * 60 * 60 * 1000).toLocaleString('zh-CN', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                    }).replace(/\//g, '-');
+
+
+                    // 第三步，将当前时间赋值给 ruleForm.time[0]
+                    this.ruleForm.time[0] = localTime;
+                    this.ruleForm.time[1] = twoHoursLocalTime;
+                    this.ruleForm.startTime = localTime;
+                    this.ruleForm.endTime = twoHoursLocalTime;
+
+                    const time1 = new Date(this.ruleForm.endTime);
+                    const time2 = new Date(this.ruleForm.startTime);
+                    const diff = time1.getTime() - time2.getTime();
+                    this.ruleForm.days = diff / (1000 * 60 * 60 * 24);
+
+                } else {
+                    // 第三种情况，用户时间选择正确，无需操作
+                    this.ruleForm.startTime = val[0];
+                    this.ruleForm.endTime = val[1];
+
+                    const time1 = new Date(this.ruleForm.endTime);
+                    const time2 = new Date(this.ruleForm.startTime);
+                    const diff = time1.getTime() - time2.getTime();
+                    this.ruleForm.days = diff / (1000 * 60 * 60 * 24);
+
+                }
+            }
 
+            // 第四种情况，使广告立即生效，请注释上面的 if 直接使用下面这一段
+            // this.ruleForm.startTime = val[0];
+            // this.ruleForm.endTime = val[1];
+            // // 获取广告尺寸
+            // this.getAdSize();
+            // // 创建购物车
+            // axios.post("/order/addShoppingCart").then(response => {
+            //   // console.log("创建购物车", response.data);
+            //   this.shopCode = response.data;
+            //   console.log('shopCode', this.shopCode);
+            // });
+        },
+        getAdSize() {
+            getSize().then(res => {
+                console.log("广告尺寸", res.data);
+                this.adSizeList = res.data; 
+                for(let item of this.adSizeList){
+                    ad_size=item.width+'x'+item.height
+                }
+            })
+        }
     },
     mounted() {
+        this.getAdSize()
         this.getData()
     },
 }
 </script>
 
 <style scoped lang="less">
+.redTips {
+    color: red;
+    display: inline-block;
+    margin-left: 20px;
+    font-size: 14px;
+}
+
 // 提示信息
 .tips {
     margin: 30px;
@@ -617,7 +803,7 @@ export default {
             position: relative;
             font-size: 14px;
             display: inline-block;
-            width: 73%;
+            width: 90%;
         }
 
         .searchTitle {
@@ -738,24 +924,28 @@ export default {
     padding-bottom: 1px;
     padding: 0px 60px 1px 20px;
 
+    .zhi {
+        text-align: center;
+    }
+
     .adImage {
         width: 140px;
         height: 140px;
-        line-height: 210px;
+        // line-height: 210px;
         border-radius: 12px;
         border: 1px solid rgba(85, 112, 241, 0.11);
 
         img {
             width: 140px;
-            height: 80px;
+            // height: 80px;
         }
     }
 
-    .price {
-        ::v-deep .el-input {
-            width: 29%;
-        }
-    }
+    // .price {
+    //     ::v-deep .el-input {
+    //         width: 29%;
+    //     }
+    // }
 
     .example {
         font-family: Microsoft YaHei;
@@ -769,12 +959,16 @@ export default {
 
     //日期时间选择器的宽
     ::v-deep .el-date-editor.el-input {
-        width: 48%;
+        width: 100%;
     }
 
     ::v-deep .el-button+.el-button {
         margin-left: 0px;
     }
+
+    ::v-deep .el-range-editor.el-input__inner {
+        width: 100%;
+    }
 }
 
 // 弹出层按钮
@@ -816,17 +1010,38 @@ export default {
 }
 
 .graph {
-    background-color: #f5f7fb;
-    padding: 60px 100px;
+    width: 100%;
+    margin: 0 auto;
     overflow: hidden;
 
-    li {
-        float: left;
+    .shilitu {
+        width: 100%;
+        height: 600px;
+        z-index: 100000;
     }
 
-    >li:first-child {
-        margin-right: 100px;
-    }
+}
+
+
+::v-deep .el-carousel__container {
+    position: relative;
+    height: 600px;
+}
+
+/* 自定义指示器样式 */
+::v-deep .el-carousel__indicators .el-carousel__indicator button {
+    width: 12px;
+    /* 宽度 */
+    height: 12px;
+    /* 高度 */
+    border-radius: 50%;
+    /* 圆形 */
+}
+
+/* 可选：更改当前项指示器的颜色 */
+::v-deep .el-carousel__indicators .el-carousel__indicator.is-active button {
+    background-color: #33b023;
+    /* 当前项颜色 */
 }
 
 .dialog-footer {

src/views/profile/index.vue

@@ -2,103 +2,142 @@
   <div>
     <div class="userInfoBox">
       <tableTitle :name="tableDivTitle"/>
-      <div class="infoBox">
-        <div class="infoTitle">当前头像：</div>
-        <div>
-          <img :src="user.avatar" class="avatar">
-        </div>
-      </div>
-      <div class="infoBox">
-        <div class="infoTitle">昵称：</div>
-        <div class="infoInput"><el-input v-model="user.real_name" placeholder="" disabled/></div>
-      </div> 
-    </div>
-    <div class="userInfoBox">
-      <tableTitle :name="tableTitle"/>
-      <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-        <!--现有密码 start------------------------------------------>
-        <el-tooltip v-model="capsTooltip1" content="大小写已开启！" placement="right" manual>
-          <div class="PasswordBox">
-            <div class="PasswordTitle">现有密码：</div>
-            <el-form-item prop="password">
-              <div class="PasswordBody">
-                <el-input
-                  :key="passwordType1"
-                  ref="password1"
-                  v-model="form.password"
-                  :type="passwordType1"
-                  placeholder="请输入密码"
-                  name="password"
-                  tabindex="2"
-                  autocomplete="off"
-                  @blur="capsTooltip1 = false"
-                />
-                <span class="show-pwd" @click="showPwd(1)">
-                  <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
-                </span>
+      <div class="userInfoTabs">
+        <el-tabs :tab-position="tabPosition" style="height:350px" class="demo-tabs">
+          <el-tab-pane label="用户信息">
+            <el-form :model="infoform" ref="infoform" :rules="infoFormRules" autocomplete="off" label-position="left">
+              <div class="infoBox">
+                <div>
+                  <!-- <img :src="user.avatar" class="avatar"> -->
+                  <el-form-item label="头像：" prop="avatar" :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="avatarUrl" :src="avatarUrl" class="avatar">
+                          <!-- 上传图标 -->
+                          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                          <div v-else class="chooseImgDiv">
+                            <div>
+                              <img src="@/assets/public/upload/noImage.png">
+                              <div>选择图片</div>
+                            </div>
+                          </div>
+                          <input type="hidden" v-model="infoform.avatar">
+                        </el-upload>
+                        <!-- 删除按钮，当鼠标悬浮时显示 -->
+                        <div v-if="hovering && avatarUrl" class="delete-button" @click="handleDelete">
+                          <i class="el-icon-delete"></i>
+                        </div>
+                      </div>
+                      <!--图片上传组件 end ------------------------------------------------------------>
+                    </div>
+                  </el-form-item>
+                  <el-form-item label="昵称：" :label-width="formLabelWidth" prop="nickname" class="custom-align-right">
+                    <el-input v-model="infoform.nickname" autocomplete="off" placeholder="请输入用户昵称.."></el-input>
+                  </el-form-item>
+                </div>
               </div>
-            </el-form-item>
-          </div>
-        </el-tooltip>
-        <!--现有密码 end------------------------------------------>
-        <!--新密码 start------------------------------------------>
-        <el-tooltip v-model="capsTooltip2" content="大小写已开启！" placement="right" manual>
-          <div class="PasswordBox">
-            <div class="PasswordTitle">新密码</div>
-            <el-form-item prop="new_password">
-              <div class="PasswordBody">
-                <el-input
-                  :key="passwordType2"
-                  ref="password2"
-                  v-model="form.new_password"
-                  :type="passwordType2"
-                  placeholder="请输入密码"
-                  name="password"
-                  tabindex="2"
-                  autocomplete="off"
-                  @blur="capsTooltip2 = false"
-                />
-                <span class="show-pwd" @click="showPwd(2)">
-                  <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
-                </span>
-              </div>
-            </el-form-item>
-          </div>
-        </el-tooltip>
-        <!--新密码 end------------------------------------------>
-        <!--新密码 start------------------------------------------>
-        <el-tooltip v-model="capsTooltip3" content="大小写已开启！" placement="right" manual>
-          <div class="PasswordBox">
-            <div class="PasswordTitle">确认新密码：</div>
-            <el-form-item prop="new_password1">
-              <div class="PasswordBody">
-                <el-input
-                  :key="passwordType3"
-                  ref="password3"
-                  v-model="form.new_password1"
-                  :type="passwordType3"
-                  placeholder="请输入密码"
-                  name="password"
-                  tabindex="2"
-                  autocomplete="off"
-                  @blur="capsTooltip3 = false"
-                />
-                <span class="show-pwd" @click="showPwd(3)">
-                  <svg-icon :icon-class="passwordType3 === 'password' ? 'eye' : 'eye-open'" />
-                </span>
-              </div>
-            </el-form-item>
-          </div>
-        </el-tooltip>
-        <!--新密码 end------------------------------------------>
-      </el-form>
-    </div>
+            </el-form>
+            <div class="infoBtnBox">
+              <el-button type="primary" @click="changeInfo">保存</el-button>
+            </div>
+          </el-tab-pane>
 
-    <div class="infoBtnBox">
-      <el-button type="info" @click="clearInput">重置</el-button>
-      <el-button type="primary" @click="changePassword">保存</el-button>
+          <el-tab-pane label="修改密码">
+            <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
+              <!--现有密码 start------------------------------------------>
+              <el-tooltip v-model="capsTooltip1" content="大小写已开启！" placement="right" manual>
+                <div class="PasswordBox">
+                  <div class="PasswordTitle">现有密码：</div>
+                  <el-form-item prop="password">
+                    <div class="PasswordBody">
+                      <el-input
+                        :key="passwordType1"
+                        ref="password1"
+                        v-model="form.password"
+                        :type="passwordType1"
+                        placeholder="请输入密码"
+                        name="password"
+                        tabindex="2"
+                        autocomplete="off"
+                        @blur="capsTooltip1 = false"
+                      />
+                      <span class="show-pwd" @click="showPwd(1)">
+                        <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
+                      </span>
+                    </div>
+                  </el-form-item>
+                </div>
+              </el-tooltip>
+              <!--现有密码 end------------------------------------------>
+              <!--新密码 start------------------------------------------>
+              <el-tooltip v-model="capsTooltip2" content="大小写已开启！" placement="right" manual>
+                <div class="PasswordBox">
+                  <div class="PasswordTitle">新密码：</div>
+                  <el-form-item prop="new_password">
+                    <div class="PasswordBody">
+                      <el-input
+                        :key="passwordType2"
+                        ref="password2"
+                        v-model="form.new_password"
+                        :type="passwordType2"
+                        placeholder="请输入密码"
+                        name="password"
+                        tabindex="2"
+                        autocomplete="off"
+                        @blur="capsTooltip2 = false"
+                      />
+                      <span class="show-pwd" @click="showPwd(2)">
+                        <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
+                      </span>
+                    </div>
+                  </el-form-item>
+                </div>
+              </el-tooltip>
+              <!--新密码 end------------------------------------------>
+              <!--新密码 start------------------------------------------>
+              <el-tooltip v-model="capsTooltip3" content="大小写已开启！" placement="right" manual>
+                <div class="PasswordBox">
+                  <div class="PasswordTitle">确认新密码：</div>
+                  <el-form-item prop="new_password1">
+                    <div class="PasswordBody">
+                      <el-input
+                        :key="passwordType3"
+                        ref="password3"
+                        v-model="form.new_password1"
+                        :type="passwordType3"
+                        placeholder="请输入密码"
+                        name="password"
+                        tabindex="2"
+                        autocomplete="off"
+                        @blur="capsTooltip3 = false"
+                      />
+                      <span class="show-pwd" @click="showPwd(3)">
+                        <svg-icon :icon-class="passwordType3 === 'password' ? 'eye' : 'eye-open'" />
+                      </span>
+                    </div>
+                  </el-form-item>
+                </div>
+              </el-tooltip>
+              <!--新密码 end------------------------------------------>
+            </el-form>
+            <div class="infoBtnBox">
+              <!-- <el-button type="info" @click="clearInput">重置</el-button> -->
+              <el-button type="primary" @click="changePassword">保存</el-button>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
-  </div>  
+  </div>
 </template>
 
 <script>
@@ -120,13 +159,29 @@ export default {
         callback()
       }
     }
+    const validateEmpty = (rule,value,callback) => {
+      if (!value || value.trim() === "") {
+        callback(new Error('该项不能为空！'));
+      } else {
+        callback();
+      }
+    }
     return {
-      tableDivTitle:"用户信息",
-      tableTitle:"修改密码",
-      user: {
+      tableDivTitle:"修改个人信息",
+      tabPosition:"left",
+      formLabelWidth:"120px",
+      //修改用户信息
+      infoform:{
         avatar:"",
-        real_name:""
+        nickname:""
+      },
+      avatarUrl:"",//头像缩略图
+      hovering:false,//鼠标悬浮状态
+      infoFormRules:{
+        avatar: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        nickname: [{ required: true, trigger: 'blur', validator: validateEmpty }]
       },
+      //修改密码
       form:{
         password:"",
         new_password:"",
@@ -149,13 +204,14 @@ export default {
     this.getUserInfo();
   },
   methods: {
+    //0.全局操作 start ---------------------------------------->
     //获取用户身份信息
     getUserInfo(){
       this.$store.dispatch('public/getInfo').then(res=> {
         console.log(res)
-        this.user.avatar = res.data.avatar;
-        this.user.real_name = res.data.real_name;
-
+        this.avatarUrl = res.data.avatar;
+        this.infoform.avatar = res.data.avatar;
+        this.infoform.nickname = res.data.nickname;
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -163,27 +219,35 @@ export default {
         });
       })
     },
-    //修改用户密码
+    //0.全局操作 end ---------------------------------------->
+    //1.修改密码 start ---------------------------------------->
+    //1.1 修改用户密码
     changePassword(){
-      this.$store.dispatch('public/changePassword',this.form).then(res=> {
-        //console.log(res)
-        if(res.code == 200){
-          this.$message({
-            type: 'success',
-            message: "密码修改成功！"
-          });
-          this.clearInput();
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('public/changePassword',this.form).then(res=> {
+            //console.log(res)
+            if(res.code == 200){
+              this.$message({
+                type: 'success',
+                message: "密码修改成功！"
+              });
+              this.clearInput();
+            }else{
+              this.$message({
+                type: 'warning',
+                message: res.message
+              });
+            } 
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
         }else{
-          this.$message({
-            type: 'warning',
-            message: res.message
-          });
-        } 
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
+          this.$message.error('请填写完整信息！');
+        }
       })
     },
     // 切换密码框的显示与隐藏
@@ -210,7 +274,68 @@ export default {
         new_password:"",
         new_password1:""
       }
+    },
+    //1.修改密码 end ---------------------------------------->
+    //2.修改头像和昵称 start ---------------------------------------->
+    //2.1上传图片操作
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.avatarUrl = res.data.imgUrl;//显示缩略图
+        this.infoform.avatar = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+        console.log(this.infoform.avatar)
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    //2.2 删除图片
+    handleDelete() {
+      // 删除图片
+      this.avatarUrl = ''; // 清空图片 URL
+    },
+    //2.3 修改用户信息
+    changeInfo(){
+      console.log(this.infoform)
+      this.$refs.infoform.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('user/updateUserAvatarNickname',this.infoform).then(res=> {
+            if(res.code == 200){
+              this.$message.success("修改成功！");
+              //更新store中的头像和昵称
+              this.$store.commit('user/SET_AVATAR', this.infoform.avatar);
+              this.$store.commit('user/SET_NAME', this.infoform.nickname);
+            }
+          }).catch(() => {  
+            this.$message.error('网络错误，请重试！');
+          })
+        }else{
+          this.$message.error('请填写完整信息！');
+        }
+      })
     }
+    //2.修改头像和昵称 end ---------------------------------------->
   }
 }
 </script>
@@ -228,10 +353,14 @@ export default {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding-bottom: @spacingPx;
+    .userInfoTabs {
+      padding: 20px 40px 20px 0;
+      background: #F5F7FB
+    }
     .avatar {
       border-radius: 50%;
-      width: 100px;
-      height: 100px;
+      width: 140px;
+      height: 140px;
       border: 1px solid @avatarBorderColor;
       border-radius: 12px;
       padding:15px;
@@ -240,15 +369,9 @@ export default {
       margin-left: @spacingPx;
     }
     .infoBox {
-      display: flex;
-      align-items: center;
       margin-top: @spacingPx;
     }
-    .infoTitle {
-      width:120px;
-      text-align: right;
-      margin-right: 10px;
-    }
+    
     .infoInput {
       flex: 1;
     }
@@ -282,6 +405,9 @@ export default {
       text-align: right;
       margin-right: 10px;
       margin-bottom:22px;
+      font-size: 14px;
+      color: #666;
+      font-weight: bold;
     }
     .PasswordBody {
       flex: 1;
@@ -294,4 +420,16 @@ export default {
     padding-bottom: @spacingPx;
     text-align: center;
   }
+
+  //执行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穿透scope选择器 end------------------------------------------------------------>*/
 </style>

src/views/role/creatUser.vue

@@ -47,7 +47,7 @@ export default {
       tableDivTitle: "选择用户类型",
       userType: "10000", // 用户类型
       radioOptions: [
-        // { label: '管理员', value: '10000' },
+        { label: '管理员', value: '10000' },
         { label: '调研员', value: '4' },
         { label: '个人会员', value: '1' },
         { label: '企业会员', value: '3' },

src/views/tabbar/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/tabbar/tabbar.vue

@@ -0,0 +1,822 @@
+<template>
+    <!-- 单页 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">网站名称</div>
+                        <el-input v-model="webSiteName_name" class="input" placeholder="请输入网站名称"></el-input>
+                        <!-- <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
+                            reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
+                            :loading="webSiteLoading" @change="selectWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select> -->
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">单页名称</div>
+                        <el-input v-model="tabbarName" class="input" placeholder="请输入单页名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加单页</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="website_name" label="网站" width="">
+                        </el-table-column>
+                        <el-table-column prop="name" label="单页名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="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="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联网站名称:" prop="webName">
+                        <el-select v-model="ruleForm.webName" :multiple="false" :multiple-limit="1" filterable remote
+                            reserve-keyword placeholder="请输入关联网站名称" :remote-method="getWebNavList"
+                            :loading="webSiteLoading" @change="detectionWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="单页名称:" prop="tabbarName">
+                        <el-input v-model="ruleForm.tabbarName" placeholder="请输入单页名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="页面类型:" prop="pageType">
+                        <el-radio v-model="ruleForm.pageType" label="1" :disabled="this.disabled">特殊列表页</el-radio>
+                        <el-radio v-model="ruleForm.pageType" label="0" :disabled="this.disabled">特殊详情页</el-radio>
+                    </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 { getFooterCategory, getTemplateClass, upFooterCategory, delFooterCategory } from '@/api/tabbar'
+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: [],//表格数据
+
+            // 可以输入的搜索框相关
+            webSiteList: [],//获取关联网站列表
+            webSiteLoading: false,
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+
+            activeid: "",  //活动id 
+            type: "",  //查看时需要传递的类型
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            // 搜索框相关
+            webSiteName_name: '', //网站名称
+            webSiteName_id: '', //网站名称id
+            tabbarName: '', //单页名称
+            website_id: "", //网站id
+
+
+            ruleForm: {
+                webName: '', //网站名称
+                tabbarName: '', //单页名称
+                pageType: '', //页面类型
+            },
+            rules: {
+                webName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                tabbarName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                pageType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if (this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (this.webSiteName_name && !this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    // name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (!this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    // website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            }
+
+
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delFooterCategory({
+                    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 查看示例图
+        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() {
+            if (this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (this.webSiteName_name && !this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    // name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (!this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    // website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            }
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.webSiteName_name = ""
+            this.tabbarName = ""
+            this.getData()
+        },
+        //列表和分页相关 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);
+
+            //数据回显
+            this.website_id = val.website_id
+            this.ruleForm.webName = val.website_name //网站名称
+            this.ruleForm.tabbarName = val.name //单页名称
+            if (val.type == 0) {
+                this.ruleForm.pageType = '0' //页面类型
+            } else if (val.type == 1) {
+                this.ruleForm.pageType = '1' //页面类型
+            }
+        },
+
+        //2.0 查看
+        goLook(id, val) {
+            this.activeid = id
+            this.type = val.type
+            this.$router.push({
+                path: '/tabbarDetail',
+                query: {
+                    id: this.activeid,
+                    type: this.type
+                }
+            })
+        },
+
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+            this.disabled = false
+
+            //添加时清空回显回来的数据
+            this.ruleForm.webName = '' //关联网站名称
+            this.ruleForm.tabbarName = '' //单页名称
+            this.ruleForm.pageType = '' //页面类型
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                getTemplateClass({
+                    website_id: this.website_id,
+                    name: this.ruleForm.tabbarName,
+                    type: this.ruleForm.pageType,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+            if (this.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                upFooterCategory({
+                    website_id: this.website_id,
+                    name: this.ruleForm.tabbarName,
+                    id: this.activeid
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.adPhoto = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+        //
+        getWebNavList(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    console.log(res.data)
+                    for (let item of res.data) {
+                        let data = {};
+                        data.key = item.id;
+                        data.value = item.id;
+                        data.label = item.website_name;
+                        dataArr.push(data)
+                    }
+                    this.webSiteList = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</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,
+    .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>

src/views/tabbar/tabbarDetail.vue

@@ -0,0 +1,651 @@
+<template>
+    <!-- 广告位管理 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title" v-if="this.tabbarType == 1">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">列表标题</div>
+                        <el-input v-model="listTitle" class="input" placeholder="请输入列表标题"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">内容标题</div>
+                        <el-input v-model="contentTitle" class="input" placeholder="请输入内容标题"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加详情</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="list_title" label="列表标题" width="" v-if="this.tabbarType == 1">
+                        </el-table-column>
+                        <el-table-column prop="con_title" label="内容标题" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="列表标题:" prop="listTitle" v-if="this.tabbarType == 1">
+                        <el-input v-model="ruleForm.listTitle" placeholder="请输入列表标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="内容标题:" prop="contentTitle">
+                        <el-input v-model="ruleForm.contentTitle" placeholder="请输入内容标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="内容详情:" prop="contentDetail">
+                        <el-input v-model="ruleForm.contentDetail" type="textarea" :rows="10" placeholder="请输入内容详情"
+                            resize="none">
+                        </el-input>
+                    </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'
+export default {
+    components: {
+        tableTitle,//表格标题
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: "单页详情",  //列表标题
+            dialogTableVisible: false,  //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+
+            tableData: [],//表格数据
+            tabbarId: '',//底部导航传递的id
+            tabbarType: 1,//底部导航传递的类型
+
+            //活动id
+            activeid: "",
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            // 搜索框相关
+            listTitle: '', //网站名称id
+            contentTitle: '', //广告位名称
+
+            //弹框相关
+            ruleForm: {
+                listTitle: '', //列表标题
+                contentTitle: '', //内容标题
+                contentDetail: '', //内容详情
+            },
+            rules: {
+                listTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            getFooterContent({
+                fcat_id: this.tabbarId,
+                page: this.page,
+                pageSize: this.pageSize
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delFooterContent({
+                    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() {
+            getFooterContent({
+                fcat_id: this.tabbarId,
+                page: this.page,
+                pageSize: this.pageSize,
+                list_title:this.listTitle,
+                con_title:this.contentTitle,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.listTitle = ""
+            this.contentTitle = ""
+            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.listTitle = val.list_title //列表标题
+            this.ruleForm.contentTitle = val.con_title //内容标题
+            this.ruleForm.contentDetail = val.content //内容详情
+        },
+
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.contentTitle = '' //内容标题
+            this.ruleForm.contentDetail = '' //内容详情
+        },
+
+        // 弹出层相关方法
+        // 1.9 提交表单
+        submitForm(formName) {
+            // 判断用户是否输入数据
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                if (this.tabbarType == 0) { //详情页类型
+                    addFooterContent({
+                        fcat_id: this.tabbarId,
+                        type: this.tabbarType,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(data);
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '添加成功',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        } else {
+                            this.$message({
+                                message: data.message,
+                                type: 'error'
+                            })
+                        }
+                    })
+                } else if (this.tabbarType == 1) { //列表页类型
+                    addFooterContent({
+                        fcat_id: this.tabbarId,
+                        type: this.tabbarType,
+                        list_title: this.ruleForm.listTitle,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(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 == "编辑") {
+                if (this.tabbarType == 0) { //详情页类型
+                    upFooterContent({
+                        id: this.activeid, //内容id
+                        type: this.tabbarType,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(data);
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '修改成功!',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        } else {
+                            this.$message({
+                                message: data.message,
+                                type: 'error'
+                            })
+                        }
+                    })
+                } else if (this.tabbarType == 1) { //列表页类型
+                    upFooterContent({
+                        id: this.activeid, //内容id
+                        type: this.tabbarType,
+                        list_title: this.ruleForm.listTitle,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(data);
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '修改成功!',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        } else {
+                            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.getData() //获取数据
+    },
+}
+</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>