添加通知功能接口

package-lock.json

@@ -8337,8 +8337,7 @@
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz",
       "integrity": "sha1-IfMz6ba46v8CRo9RRupAbTRfTa0=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pify": {
       "version": "4.0.1",

src/App.vue

@@ -80,11 +80,15 @@ export default {
           } else {
             let message = res.data.message;
             alert(message);
+            sessionStorage.clear();
+            localStorage.clear();
             this.goHomePage();
           }
         })
         .catch(() => {
           alert("无法校验的字符串");
+          sessionStorage.clear();
+          localStorage.clear();
           this.goHomePage();
         });
     },
@@ -127,46 +131,37 @@ export default {
         }
       }
     },
+    //localTest
+    localTest(){
+      // 本地调试打开
+      this.loadingFlag = false;
+      this.isManufacturer = "distributor"; //  distributor
+      if (this.isManufacturer === "manufacturer") {
+        if (this.$route.path === "/loading")
+          this.$router.replace({ path: "/uploadInfor" });
+        localStorage.setItem("userId", 3084);
+        sessionStorage.setItem("userNameAccount", "L0M14_MM");
+        this.userAccount = "L0M14_MM";
+      } else {
+        if (this.$route.path !== "/loading")
+          this.$router.replace({ path: "/inforList" });
+        localStorage.setItem("userId", 2002);
+        sessionStorage.setItem("userNameAccount", "L0210_MM");
+        this.userAccount = "L0210_MM";
+      }
+    }
   },
   mounted() {},
   /*  created() {
     this.loadingFlag = true;
     this.getData(); // 线上打开
     // 本地调试打开
-    // this.loadingFlag = false;
-    // this.isManufacturer = "manufacturer";
-    // // this.isManufacturer = "distributor"
-    // if (this.isManufacturer === 'manufacturer') {
-    //   if(this.$route.path === '/loading') this.$router.replace({ path: "/uploadInfor" });
-    //   localStorage.setItem("userId", 3084);
-    //   sessionStorage.setItem("userNameAccount", "L0M14_MM");
-    //   this.userAccount = "L0M14_MM";
-    // } else {
-    //   if(this.$route.path === '/loading') this.$router.replace({ path: "/inforList" });
-    //   localStorage.setItem("userId", 2002);
-    //   sessionStorage.setItem("userNameAccount", "L0210_MM");
-    //   this.userAccount = "L0210_MM";
-    // }
+    this.localTest();// 本地调试打开
   }, */
   created() {
-    this.loadingFlag = true;
-    this.getData(); // 线上打开
-    // 本地调试打开
-   /*  this.loadingFlag = false;
-    this.isManufacturer = "manufacturer"; //  distributor
-    if (this.isManufacturer === "manufacturer") {
-      if (this.$route.path === "/loading")
-        this.$router.replace({ path: "/uploadInfor" });
-      localStorage.setItem("userId", 3084);
-      sessionStorage.setItem("userNameAccount", "L0M14_MM");
-      this.userAccount = "L0M14_MM";
-    } else {
-      if (this.$route.path !== "/loading")
-        this.$router.replace({ path: "/inforList" });
-      localStorage.setItem("userId", 2002);
-      sessionStorage.setItem("userNameAccount", "L0210_MM");
-      this.userAccount = "L0210_MM";
-    } */
+     this.loadingFlag = true;
+     this.getData(); // 线上打开
+    //this.localTest();// 本地调试打开
   },
 };
 </script>

src/config/router.js

@@ -122,4 +122,4 @@ const TAG = [{
 module.exports = {
     ROUTER,
     TAG
-}
+}

src/request/api.js

@@ -25,6 +25,12 @@ axios.interceptors.request.use((config) => {
     if(config.url === php_url + "/lexus_php/api/report_import.php") {
         config.data = baseData
     }
+    if(config.url === php_url + "/lexus_php/api/notice_add.php") {
+        config.data = baseData
+    }
+    if(config.url === php_url + "/lexus_php/api/notice_update.php") {
+        config.data = baseData
+    }
     return config;
 }, (err) => {
     console.log('请求拦截', err);

src/router/index.js

@@ -200,7 +200,12 @@ const routes = [{
         children: [{
             path: '/changShang/editPage',
             component: editPage,
-        }]
+        },
+            {
+                path: '/changShang/itemDetail',
+                component: itemDetail,
+            }
+        ]
     },
     {
         path: '/jingXiaoshang',
@@ -372,4 +377,4 @@ const router = new VueRouter({
     routes
 })
 
-export default router
+export default router

src/views/data/UploadRecord.vue

@@ -75,7 +75,7 @@ export default {
     },
     isShowDetail() {
       let flag = this.$route.query && this.$route.query.tag;
-      return flag ? true : false;
+      return !!flag;
     },
   },
   methods: {
@@ -92,7 +92,7 @@ export default {
       this.getFirmsUploadList(data);
     },
     sort: function () {
-      this.asc = this.order === "DESC" ? true : false;
+      this.asc = this.order === "DESC";
       let data = {
         informationName: this.inputValue,
         asc: this.asc,

src/views/notification/changShang.vue

@@ -1,243 +1,299 @@
-<template>
-  <div class="notice_changShang">
-    <div v-if="isFather()">
-      <div style="color: #80808059; border: 1px solid"></div>
-      <button @click="announce()">发布公告</button>
-      <div class="tableD">
-        <div class="table_template">
-          <table class="table">
-            <thead>
-              <tr :style="tableHeadStyle">
-                <td
-                  v-for="(item, index) in tableHeaderD"
-                  :key="index"
-                  :style="tableHeadStyle"
-                >
-                  {{ item }}
-                </td>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(obj, index) in tableData"
-                :key="index"
-                :class="{ table_gray: !discolor && index % 2 === 0 }"
-              >
-                <td class="titleStyle">{{ obj.informationName || "标题" }}</td>
-                <td>{{ obj.accountScope || "重要通知" }}</td>
-                <td>
-                  {{
-                    (obj.fileUploadDate || "")
-                      .replace("T", " ")
-                      .slice(0, -4)
-                      .replace(RegExp("-", "g"), "/")
-                  }}
-                </td>
-
-                <td v-if="operation" :style="trStyle" class="operationStyle">
-                  <div class="operationBox">
-                    <span
-                      style="cursor: pointer"
-                      v-for="(operationObj, i) in operation"
-                      :key="i"
-                      @click="operationObj.function(obj, index)"
-                      >{{ operationObj.name }}
-                    </span>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div class="pageD">
-        <TablePage
-          :totalPage="totalPage"
-          :currentPage="currentPage"
-          @change_page="changePage"
-          @jump_page="jumpPage"
-        />
-        <p>共{{ totalPage }}页，共{{ sum }}条数据</p>
-      </div>
-    </div>
-    <router-view></router-view>
-  </div>
-</template>
-
-<script>
-import TablePage from "../../components/TablePage";
-import { env_url } from "../../config/env";
-export default {
-  components: {
-    TablePage,
-  },
-  data() {
-    return {
-      tableHeaderD: ["标题", "信息类型", "创建时间", "操作"],
-      operation: [
-        {
-          name: "编辑",
-          function: (obj) => {
-            this.edit(obj);
-          },
-        },
-        {
-          name: "删除",
-          function: (obj) => {
-            console.log(obj);
-          },
-        },
-      ],
-      // 表格配置
-      sum: 0, // 一共有多少条数据
-      pageSize: 20, // 每页展示的数据
-      discolor: false, // flase是隔行变色
-      currentPage: 1,
-      tableData: [
-        { title: "title" },
-        { title: "title" },
-        { title: "title" },
-        { title: "title" },
-        { title: "title" },
-        { title: "title" },
-      ],
-      tableFileData: [],
-      tableHeadStyle: {
-        background: "#848484",
-        height: "36px",
-        color: "white",
-      },
-      trStyle: {
-        minwidth: "150px",
-        overflow: "hidden",
-      },
-      onlineUrl: env_url, //'http://8.140.188.129:8080'线上 //http://8.136.230.133:8080 //测试
-      userId: localStorage.getItem("userId") || "",
-    };
-  },
-  computed: {
-    // 表格总页数
-    totalPage() {
-      return Math.ceil(this.sum / this.pageSize);
-    },
-  },
-  methods: {
-    // 获取某一页面的数据，展示在表格
-    changePage: function (page) {
-      this.currentPage = page;
-    },
-    // 点击上一页，下一页，首页，尾页
-    jumpPage: function (item) {
-      switch (item) {
-        case 1:
-          this.currentPage = 1;
-          break;
-        case 2:
-          this.currentPage = this.currentPage - 1;
-          break;
-        case 3:
-          this.currentPage = this.currentPage + 1;
-          break;
-        case 4:
-          this.currentPage = this.totalPage;
-          break;
-      }
-    },
-    //编辑
-    edit: function (config) {
-      console.log(config);
-      this.$router.push({
-        path: "/changShang/editPage",
-        query: {},
-      });
-    },
-    isFather: function () {
-      return this.$route.path == '/changShang' ? true : false;
-    },
-    /* 发布公告 */
-    announce: function () {
-      console.log(' 发布公告')
-      this.$router.push({
-        path: "/changShang/editPage",
-        query: {},
-      });
-    },
-  },
-  created() {},
-};
-</script>
-
-<style scoped lang="less">
-.titleStyle {
-    color: #0000ff;
-}
-/* 查看详情样式 */
-.table_template {
-  text-align: center;
-  .table {
-    background-color: #fff;
-    border-collapse: collapse;
-    border: none;
-    width: 100%;
-    td {
-      border: 1px solid #ccc;
-      height: 36px;
-      width: 25%;
-    }
-    span {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}
-.table_gray {
-  background-color: #eeeeee;
-}
-.operationStyle span {
-  color: #0000ff;
-}
-.operationBox {
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-}
-
-.HeadLeft {
-  border: 1px solid #ccc;
-}
-.pageD {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-top: 10px;
-}
-.pageD p {
-  margin-left: 16px;
-}
-.reportStyle {
-  text-decoration: underline;
-  cursor: pointer;
-}
-.showItemOperationStyle {
-  display: none;
-}
-.noJump {
-  color: rgb(173, 162, 162);
-  cursor: text !important;
-  text-decoration: underline;
-}
-.canJump {
-  text-decoration: underline;
-}
-.notice_changShang button:nth-of-type(1) {
-  position: relative;
-  float: right;
-  margin: 8px 8px;
-  padding: 8px 16px;
-  width: 100px;
-  height: 35px;
-  border-radius: 5px;
-}
-</style>
-
+<template>
+  <div class="notice_changShang">
+    <div v-if="isFather()">
+      <div style="color: #80808059; border: 1px solid"></div>
+      <button @click="announce()">发布公告</button>
+      <div class="tableD">
+        <div class="table_template">
+          <table class="table">
+            <thead>
+              <tr :style="tableHeadStyle">
+                <td
+                  v-for="(item, index) in tableHeaderD"
+                  :key="index"
+                  :style="tableHeadStyle"
+                >
+                  {{ item }}
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(obj, index) in tableData"
+                :key="index"
+                :class="{ table_gray: !discolor && index % 2 === 0 }"
+              >
+                <td class="titleStyle" @click="goDetailPage(obj)">{{ obj.title || "-" }}</td>
+                <td>重要通知</td>
+                <td>
+                  <!--{{-->
+                    <!--(obj.addtime || "")-->
+                      <!--.replace("T", " ")-->
+                      <!--.slice(0, -4)-->
+                      <!--.replace(RegExp("-", "g"), "/")-->
+                  <!--}}-->
+                  {{obj.addtime}}
+                </td>
+
+                <td v-if="operation" :style="trStyle" class="operationStyle">
+                  <div class="operationBox">
+                    <span
+                      style="cursor: pointer"
+                      v-for="(operationObj, i) in operation"
+                      :key="i"
+                      @click="operationObj.function(obj, index)"
+                      >{{ operationObj.name }}
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="pageD">
+        <TablePage
+          :totalPage="totalPage"
+          :currentPage="currentPage"
+          @change_page="changePage"
+          @jump_page="jumpPage"
+        />
+        <p>共{{ totalPage }}页，共{{ sum }}条数据</p>
+      </div>
+    </div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import TablePage from "../../components/TablePage";
+import { env_url , php_url } from "../../config/env";
+import axiosPhp from "axios";
+export default {
+  components: {
+    TablePage,
+  },
+  data() {
+    return {
+      unifiedUrl:'/lexus_php/api/',
+      tableHeaderD: ["标题", "信息类型", "创建时间", "操作"],
+      operation: [
+        {
+          name: "编辑",
+          function: (obj) => {
+            this.edit(obj);
+          },
+        },
+        {
+          name: "删除",
+          function: (obj) => {
+            console.log(obj.id);
+            this.delNotice(obj.id)
+          },
+        },
+      ],
+      // 表格配置
+      sum: 0, // 一共有多少条数据
+      pageSize: 20, // 每页展示的数据
+      discolor: false, // flase是隔行变色
+      currentPage: 1,
+      tableData: [],
+      tableFileData: [],
+      tableHeadStyle: {
+        background: "#848484",
+        height: "36px",
+        color: "white",
+      },
+      trStyle: {
+        minwidth: "150px",
+        overflow: "hidden",
+      },
+      onlineUrl: env_url, //'http://8.140.188.129:8080'线上 //http://8.136.230.133:8080 //测试
+      userId: localStorage.getItem("userId") || "",
+    };
+  },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+  },
+  methods: {
+    goDetailPage(param){
+      this.$router.push({
+        path: "/changShang/itemDetail",
+        query: {
+          id:param.id,
+          agentId:0
+        },
+      });
+    },
+    // 获取某一页面的数据，展示在表格
+    changePage: function (page) {
+      this.currentPage = page;
+    },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function (item) {
+      switch (item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+    },
+    //编辑
+    edit: function (config) {
+      console.log(config);
+      config.area = ['北区'];
+      config.content = `<div>TEST</div>`;
+      this.$router.push({
+        path: "/changShang/editPage",
+        query: config,
+      });
+    },
+    isFather: function () {
+      return this.$route.path === '/changShang';
+    },
+    getDataList: function () {
+      axiosPhp({
+        method: "post",
+        url: php_url + this.unifiedUrl + "notice_list.php",
+        data: {
+          Page: this.currentPage,
+          Rows: this.pageSize,
+        },
+        })
+          .then((res) => {
+            if (res.data.code === 200) {
+             this.sum = res.data.count;
+             this.tableData = res.data.data;
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+    },
+    delNotice: function (id) {
+      axiosPhp({
+        method: "post",
+        url: php_url + this.unifiedUrl + "notice_del.php",
+        data: {
+          ids:id
+        },
+      })
+        .then((res) => {
+          if (res.data.code === 200 || res.data.code === 401) {
+            alert(res.data.msg);
+            this.getDataList();
+          }
+        })
+        .catch((err) => {
+          alert(err)
+        });
+    },
+    /* 发布公告 */
+    announce: function () {
+      console.log(' 发布公告')
+      this.$router.push({
+        path: "/changShang/editPage",
+        query: {
+          title:'',
+          content:``,
+          id:'',
+          files:[],
+          area:["全区"]
+        },
+      });
+    },
+  },
+  created() {
+  },
+  mounted() {
+    this.getDataList()
+  }
+};
+</script>
+
+<style scoped lang="less">
+.titleStyle {
+    color: #0000ff;
+    cursor: pointer;
+}
+/* 查看详情样式 */
+.table_template {
+  text-align: center;
+  .table {
+    background-color: #fff;
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
+    td {
+      border: 1px solid #ccc;
+      height: 36px;
+      width: 25%;
+    }
+    span {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+.table_gray {
+  background-color: #eeeeee;
+}
+.operationStyle span {
+  color: #0000ff;
+}
+.operationBox {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+
+.HeadLeft {
+  border: 1px solid #ccc;
+}
+.pageD {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10px;
+}
+.pageD p {
+  margin-left: 16px;
+}
+.reportStyle {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.showItemOperationStyle {
+  display: none;
+}
+.noJump {
+  color: rgb(173, 162, 162);
+  cursor: text !important;
+  text-decoration: underline;
+}
+.canJump {
+  text-decoration: underline;
+}
+.notice_changShang button:nth-of-type(1) {
+  position: relative;
+  float: right;
+  margin: 8px 8px;
+  padding: 8px 16px;
+  width: 100px;
+  height: 35px;
+  border-radius: 5px;
+}
+</style>
+

src/views/notification/custom_extensions/CodeView/index.js

@@ -1,24 +1,24 @@
-import { Bold as OriginalBold } from "element-tiptap";
-import CustomBoldMenuButton from "./MenuButton";
-
-export default class Bold extends OriginalBold {
-    // here you can extend the extension like tiptap, 
-    //such as schema, plugins ...
-
-    menuBtnView({ isActive, commands, focus, editor }) {
-        console.log(focus, editor)
-        return {
-            component: CustomBoldMenuButton,
-            componentProps: {
-                isActive: isActive.bold()
-            },
-            componentEvents: {
-                click: () => {
-                    console.log("button clicked");
-                    // you can do somethings when button clicked
-                    commands.bold();
-                }
-            }
-        };
-    }
-}
+import { Bold as OriginalBold } from "element-tiptap";
+import CustomBoldMenuButton from "./MenuButton";
+
+export default class Bold extends OriginalBold {
+    // here you can extend the extension like tiptap,
+    //such as schema, plugins ...
+
+    menuBtnView({ isActive, commands}) {
+        // console.log(focus, editor)
+        return {
+            component: CustomBoldMenuButton,
+            componentProps: {
+                isActive: isActive.bold()
+            },
+            componentEvents: {
+                click: () => {
+                    // console.log("button clicked");
+                    // you can do somethings when button clicked
+                    commands.bold();
+                }
+            }
+        };
+    }
+}

src/views/notification/custom_extensions/helpButton/index.js

@@ -1,24 +1,24 @@
-import { Bold as OriginalBold } from "element-tiptap";
-import CustomBoldMenuButton from "./MenuButton";
-
-export default class Bold extends OriginalBold {
-    // here you can extend the extension like tiptap, 
-    //such as schema, plugins ...
-
-    menuBtnView({ isActive, commands, focus, editor }) {
-        console.log(focus, editor)
-        return {
-            component: CustomBoldMenuButton,
-            componentProps: {
-                isActive: isActive.bold()
-            },
-            componentEvents: {
-                click: () => {
-                    console.log("button clicked");
-                    // you can do somethings when button clicked
-                    commands.bold();
-                }
-            }
-        };
-    }
-}
+import { Bold as OriginalBold } from "element-tiptap";
+import CustomBoldMenuButton from "./MenuButton";
+
+export default class Bold extends OriginalBold {
+    // here you can extend the extension like tiptap,
+    //such as schema, plugins ...
+
+    menuBtnView({ isActive, commands}) {
+        // console.log(focus, editor)
+        return {
+            component: CustomBoldMenuButton,
+            componentProps: {
+                isActive: isActive.bold()
+            },
+            componentEvents: {
+                click: () => {
+                    // console.log("button clicked");
+                    // you can do somethings when button clicked
+                    commands.bold();
+                }
+            }
+        };
+    }
+}

src/views/notification/detail/itemDetail.vue

@@ -1,64 +1,120 @@
-<template>
-  <div class="notice_jingXiaoshang_detail">
-    <div class="titleBox">
-        <div class="titleStyle">【{{contentData[0].info}}】{{contentData[0].time}}</div>
-        <span @click="backToPre()">返回上一级</span>
-    </div>
-    <div style="color: rgb(128 128 128 / 10%); border: 1px solid"></div>
-    <div class="content">{{contentData[0].content}}</div>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-  data() {
-    return {
-      contentData: [
-        {
-          info: "通知",
-          title: "title",
-          time: "2021/05/01",
-          content: '各位经销商同仁非常感谢一直以来对经销商市场支援项目的支持与帮助。\n题记事宜, 2020年12月线索相关数据明细已经上传系统,烦请参看。再次感谢'
-        },
-      ],
-    };
-  },
-  computed: {},
-  methods: {
-    backToPre() {
-      this.$router.push({
-        path: "/jingXiaoshang",
-        query: {},
-      });
-    },
-  },
-  created() {},
-};
-</script>
-
-
-<style scoped lang="less">
-.titleBox{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.titleBox span{
-    color: #0000ff;
-    text-align: right;
-}
-.notice_jingXiaoshang_detail {
-    margin-left: 32px;
-}
-.titleStyle {
-    font-weight:bold;
-    font-size: 16px;
-    height: 50px;
-    line-height: 50px;
-}
-.content {
-    margin-top: 16px;
-}
-</style>
-
+<template>
+  <div class="notice_jingXiaoshang_detail">
+    <div class="titleBox">
+        <div class="titleStyle">【{{contentData.title}}】{{contentData.addtime}}</div>
+        <span @click="backToPre()">返回上一级</span>
+    </div>
+    <div style=" border: 1px solid  #ccc"></div>
+    <div class="content">
+        <!--{{contentData.content || '-'}}-->
+        <p v-html="contentData.content"></p>
+    </div>
+      <div class="files">
+          <p style="width: 65px">附件：</p>
+          <div class="filesName">
+              <p v-for="(item, index) in contentData.files"
+              :key="index"
+              @click="downloadFile(item)">
+                  {{ item.file_name || '-'}}
+              </p>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import { php_url } from "../../../config/env";
+import axiosPhp from "axios";
+export default {
+  components: {},
+  data() {
+    return {
+        contentData:{},
+        unifiedUrl:'/lexus_php/api/',
+    };
+  },
+  computed: {},
+  methods: {
+    backToPre() {
+     this.$router.back(-1)
+    },
+    // 下载附件
+    downloadFile: function (item) {
+      console.log(item);
+      let url = php_url + item.file_url;
+      window.open(url);
+    },
+     getDetailInfo:function (info) {
+         axiosPhp({
+             method: "post",
+             url: php_url + this.unifiedUrl + "notice_content.php",
+             data: {
+                 id:info.id,
+                 agentId:info.agentId
+             },
+         })
+         .then((res) => {
+             console.log(res)
+             if (res.data.code === 200) {
+                console.log(res)
+                this.contentData = {
+                    addtime:res.data.addtime,
+                    content:res.data.content,
+                    title:res.data.title,
+                    files:res.data.files
+                }
+             }
+         })
+         .catch((err) => {
+             alert(err)
+         });
+     }
+
+  },
+    created() {},
+    mounted() {
+        this.contentData = this.$route.query;
+        console.log(this.contentData)
+        this.getDetailInfo(this.contentData)
+    }
+};
+</script>
+
+
+<style scoped lang="less">
+.titleBox{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.titleBox span{
+    color: #0000ff;
+    text-align: right;
+    cursor: pointer;
+}
+.notice_jingXiaoshang_detail {
+    margin-left: 32px;
+}
+.titleStyle {
+    font-weight:bold;
+    font-size: 16px;
+    height: 50px;
+    line-height: 50px;
+}
+.content {
+    margin-top: 16px;
+}
+.files {
+    display: flex;
+    margin-top: 20px;
+    .filesName {
+        p {
+            color: #0056a0;
+            &:hover{
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>
+

src/views/notification/editPage/editPage.vue

@@ -1,271 +1,440 @@
-<template>
-  <div class="notice_changShang_edit">
-    <form>
-      <div class="Line Line1">
-        <span>标题:</span>
-        <input type="text" />
-      </div>
-      <div class="Line Line2">
-        <span>类型:</span>
-        <select>
-          <option>重要通知</option>
-        </select>
-      </div>
-      <div class="Line Line3">
-        <span>区域:</span>
-        <div class="areaBox">
-          <div v-for="(item, index) in areaList" :key="index">
-            <input
-              type="checkbox"
-              :value="item"
-              v-model="checkedBoxList"
-              @click="clickCheckbox(index)"
-            /><span>{{ item }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="Line Line4">
-        <span>信息配置:</span>
-        <div class="fuWenBen">
-          <el-tiptap
-            v-model="content"
-            :extensions="extensions"
-            :charCounterCount="false"
-            placeholder="Write something ..."
-          >
-            <!--charCounterCount 是否显示字数统计 -->
-          </el-tiptap>
-        </div>
-        <div style="clear: both; display: block"></div>
-      </div>
-
-      
-      <div class="Line Line5">
-        <span>附件:</span>
-        <button>添加附件</button>
-      </div>
-    </form>
-    <div class="operationStyle">
-      <button>保存</button>
-      <button @click="backToPre()">返回</button>
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  // necessary extensions
-  Doc,
-  Paragraph,
-  Text,
-  Heading,
-  History,
-  Code,
-  CodeBlock,
-  Blockquote,
-  BulletList,
-  OrderedList,
-  ListItem,
-  TodoList,
-  TodoItem,
-  //Iframe,
-  Table,
-  TableHeader,
-  TableRow,
-  TableCell,
-  TextAlign,
-  LineHeight,
-  Indent,
-  HorizontalRule,
-  HardBreak,
-  TrailingNode,
-  TextColor,
-  TextHighlight,
-  FormatClear,
-  FontType,
-  FontSize,
-  // Preview,
-  //Print,
-  // SelectAll,
-  Bold,
-  //Underline,
-  Italic,
-  Strike,
-  Link,
-  Image,
-  Fullscreen,
-  // CodeView,
-} from "element-tiptap";
-
-import helpButton from "../custom_extensions/helpButton/index";
-import CodeView from "../custom_extensions/CodeView/index";
-
-export default {
-  components: {},
-  data() {
-    return {
-      InfoType: "",
-      areaList: ["全区", "北区", "南区", "东区"], // 按区域添加
-      checkedBoxList: [], // 多选框选中的值
-      extensions: [
-        // new Preview(),
-        // new Print(),
-        // new SelectAll(),
-        new Bold({ bubble: false }), // render command-button in bubble menu.
-        new Italic(),
-        new Strike(),
-        new Link(),
-        new Image(),
-        new Fullscreen(),
-        new CodeView(), //源码
-        new Doc(),
-        new Text(),
-        new Paragraph(),
-        new Doc(),
-        new Text(),
-        new Paragraph(),
-        new Heading({ level: 5 }),
-        new Code(),
-        new Blockquote(),
-        new BulletList(),
-        new OrderedList(),
-        new ListItem(),
-        new CodeBlock(),
-        new TodoList(),
-        new TodoItem(),
-        new Table(),
-        new TableHeader(),
-        new TableRow(),
-        new TableCell(),
-        new TextAlign(),
-        new LineHeight(),
-        new Indent(),
-        new HorizontalRule(),
-        new HardBreak(),
-        new TrailingNode(),
-        new TextColor(),
-        new TextHighlight(),
-        new FormatClear(),
-        new FontType(),
-        new FontSize(),
-        new History(),
-        new helpButton({ bubble: false }),
-      ],
-      // editor's content
-      /* <h1>Heading</h1>
-        <p>This Editor is awesome!</p> */
-      content: ``,
-    };
-  },
-  computed: {},
-  methods: {
-    // 保证多选框东区和其他的多选框互斥
-    clickCheckbox(i) {
-      let list = this.checkedBoxList;
-      let include = list.indexOf("全区");
-      if (i === 0) {
-        this.checkedBoxList = [];
-        return;
-      }
-      if (include >= 0) {
-        this.checkedBoxList.splice(0, 1);
-      }
-    },
-    backToPre() {
-      this.$router.push({
-        path: "/changShang",
-        query: {},
-      });
-    },
-  },
-  created() {},
-};
-</script>
-
-
-<style scoped lang="less">
-.fuWenBen {
-  position: relative;
-  left: 80px;
-  top: -40px;
-  width: 950px;
-}
-.operationStyle {
-  display: flex;
-  justify-content: center;
-}
-.operationStyle button:nth-child(1) {
-  margin-right: 36px;
-}
-.operationStyle button {
-  border-radius: 5px;
-  width: 100px;
-  height: 36px;
-}
-.Line5 button {
-  border-radius: 5px;
-  width: 100px;
-  height: 23px;
-  vertical-align: middle;
-}
-/* .operationStyle button:nth-child(2){
-  display: flex;
-  justify-content: center;
-} */
-.focusStyle {
-  border: 1px solid #ccc;
-  line-height: 20px;
-  color: #555555;
-  outline: none;
-  position: absolute;
-}
-.focusStyle:focus {
-  animation: shadowAni 200ms linear forwards;
-}
-.Line {
-  height: 50px;
-}
-.Line span {
-  width: 80px;
-  height: 36px;
-  display: inline-flex;
-  vertical-align: middle;
-  line-height: 36px;
-  justify-content: flex-end;
-  margin-right: 8px;
-}
-.areaBox {
-  display: flex;
-}
-.areaBox span {
-  width: 30px;
-}
-.areaBox input {
-  vertical-align: middle;
-}
-.Line3 {
-  display: flex;
-}
-.Line4 span {
-  line-height: 10px;
-}
-.Line4 {
-  margin-top: 9px;
-  height: auto;
-}
-
-.Line5 span {
-  position: relative;
-}
-.Line5 button {
-  margin-left: 64px;
-}
-.Line1 input {
-  height: 24px;
-}
-.Line2 select {
-  vertical-align: middle;
-  width: 120px;
-}
-</style>
-
+<template>
+  <div class="notice_changShang_edit">
+    <form>
+      <div class="Line Line1">
+        <span>标题:</span>
+        <input type="text"  v-model="contentParam.title"/>
+      </div>
+      <div class="Line Line2">
+        <span>类型:</span>
+        <select>
+          <option>重要通知</option>
+        </select>
+      </div>
+      <div class="Line Line3">
+        <span>区域:</span>
+        <div class="areaBox">
+          <div v-for="(item, index) in areaList" :key="index">
+            <input
+              type="checkbox"
+              :value="item"
+              v-model="contentParam.area"
+              @click="clickCheckbox(index)"
+            /><span>{{ item }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Line Line4">
+        <span>信息配置:</span>
+        <div class="fuWenBen">
+          <el-tiptap
+            v-model="contentParam.content"
+            :extensions="extensions"
+            :charCounterCount="false"
+            placeholder="Write something ..."
+          >
+            <!--charCounterCount 是否显示字数统计 -->
+          </el-tiptap>
+        </div>
+        <div style="clear: both; display: block"></div>
+      </div>
+
+
+      <div class="uploadFile">
+        <p class="title">附件:</p>
+        <label for="fileInput" @change="getFileInfo($event)">添加附件
+          <input type="file" name="fileName" id="fileInput" multiple/>
+        </label>
+        <div class="fileDes">
+          <p v-for="(item, index) in contentParam.files" :key="index"
+          >{{ item.file_name || item.name}}
+            <span class="deleteFile" @click="deleteFile(index,item)">×</span>
+          </p>
+        </div>
+      </div>
+    </form>
+    <div class="operationStyle">
+      <button @click="addNotice(contentParam.id)">保存</button>
+      <button @click="backToPre()">返回</button>
+    </div>
+    <TipModal
+            :tipFlag="tipModalFlag"
+            :tipText="tipModalText"
+            @close_tip_modal="closeTipModal"
+    />
+    <Loading v-if="uploading"></Loading>
+  </div>
+</template>
+
+<script>
+import {
+  // necessary extensions
+  Doc,
+  Paragraph,
+  Text,
+  Heading,
+  History,
+  Code,
+  CodeBlock,
+  Blockquote,
+  BulletList,
+  OrderedList,
+  ListItem,
+  TodoList,
+  TodoItem,
+  //Iframe,
+  Table,
+  TableHeader,
+  TableRow,
+  TableCell,
+  TextAlign,
+  LineHeight,
+  Indent,
+  HorizontalRule,
+  HardBreak,
+  TrailingNode,
+  TextColor,
+  TextHighlight,
+  FormatClear,
+  FontType,
+  FontSize,
+  // Preview,
+  //Print,
+  // SelectAll,
+  Bold,
+  //Underline,
+  Italic,
+  Strike,
+  Link,
+  Image,
+  Fullscreen,
+  // CodeView,
+} from "element-tiptap";
+import TipModal from "../../../components/TipModal";
+import Loading from "../../data/components/UploadLoading"
+import helpButton from "../custom_extensions/helpButton/index";
+import CodeView from "../custom_extensions/CodeView/index";
+import { php_url } from "../../../config/env";
+import axiosPhp from "axios";
+export default {
+  components: {TipModal,Loading},
+  data() {
+    return {
+      noticeTitle:'',
+      InfoType: "",
+      areaList: ["全区", "北区", "南区", "东区"], // 按区域添加
+      extensions: [
+        // new Preview(),
+        // new Print(),
+        // new SelectAll(),
+        new Bold({ bubble: false }), // render command-button in bubble menu.
+        new Italic(),
+        new Strike(),
+        new Link(),
+        new Image(),
+        new Fullscreen(),
+        new CodeView(), //源码
+        new Doc(),
+        new Text(),
+        new Paragraph(),
+        new Doc(),
+        new Text(),
+        new Paragraph(),
+        new Heading({ level: 5 }),
+        new Code(),
+        new Blockquote(),
+        new BulletList(),
+        new OrderedList(),
+        new ListItem(),
+        new CodeBlock(),
+        new TodoList(),
+        new TodoItem(),
+        new Table(),
+        new TableHeader(),
+        new TableRow(),
+        new TableCell(),
+        new TextAlign(),
+        new LineHeight(),
+        new Indent(),
+        new HorizontalRule(),
+        new HardBreak(),
+        new TrailingNode(),
+        new TextColor(),
+        new TextHighlight(),
+        new FormatClear(),
+        new FontType(),
+        new FontSize(),
+        new History(),
+        new helpButton({ bubble: false }),
+      ],
+      content:'',
+      unifiedUrl:'/lexus_php/api/',
+      fileDes: [], // 上传的文件名,
+      file:[],
+      tipModalFlag: false,
+      tipModalText: "",
+      uploading: false,
+      contentParam:{
+      },
+      noticeId:'',
+      delFileIds:[],
+      editFileLength:''
+    };
+  },
+  computed: {},
+  methods: {
+    addNotice(id){
+      let requestURL,paramData;
+      if(id){ //编辑
+        requestURL = 'notice_update.php';
+        paramData = new FormData();
+        paramData.append("title", this.contentParam.title);
+        paramData.append("area", this.contentParam.area);
+        paramData.append("content", this.contentParam.content);
+        paramData.append("id", id);
+        console.log(this.delFileIds.length);
+        if(this.delFileIds.length){
+          let delFileStr = this.delFileIds.join(',');
+          paramData.append("del_file_ids", delFileStr);
+        }
+        if(this.contentParam.files.length === 0){
+          paramData.append("file_num", '0');
+        }else {
+          let count = 0;
+          let len = this.file.length;
+          this.file.forEach((item) => {
+            count++;
+            paramData.append("file" + count, item);
+          });
+          paramData.append("file_num", len);
+        }
+      }
+      else { //新增
+        requestURL = 'notice_add.php';
+        paramData = new FormData();
+        paramData.append("title", this.contentParam.title);
+        paramData.append("area", this.contentParam.area);
+        paramData.append("content", this.contentParam.content);
+        if(this.file.length === 0){
+          paramData.append("file_num", '0');
+        }else {
+          let count = 0;
+          let len = this.file.length;
+          this.file.forEach((item) => {
+            count++;
+            paramData.append("file" + count, item);
+          });
+          paramData.append("file_num", len);
+        }
+      }
+       this.uploading = true;
+        axiosPhp({
+          url: php_url + this.unifiedUrl + requestURL,
+          method: "post",
+          data: paramData,
+          dataType: "json", //声明成功使用json数据类型回调
+          cache: false,
+          processData: false,
+          contentType: false,
+        })
+          .then((res) => {
+            this.uploading = false;
+            if (res.data.code === 200) {
+                this.tipModalFlag = true;
+              if(id){
+                this.tipModalText = "更新成功!";
+              }else {
+                this.tipModalText = "新增成功!";
+              }
+            }else {
+              alert(res.data.message);
+            }
+          })
+          .catch((err) => {
+            alert(err);
+          });
+
+    },
+    // 关闭提示框
+    closeTipModal: function () {
+      this.tipModalFlag = false;
+      this.$router.push({ path: "/changShang" });
+    },
+    // 获取文件，文件名
+    getFileInfo: function (event) {
+      let file = event.target.files;
+      file.forEach((item) => {
+        this.file.push(item);
+        this.contentParam.files.push(item);
+      });
+    },
+    // 删除文件
+    deleteFile: function(i,item) {
+      if(this.noticeId && (this.editFileLength > this.delFileIds.length)){
+        this.delFileIds.push(item.file_id);
+      }
+      this.file.splice(i, 1);
+      this.contentParam.files.splice(i, 1);
+      console.log(this.delFileIds.length,this.contentParam.files.length,this.editFileLength)
+    },
+    // 保证多选框东区和其他的多选框互斥
+    clickCheckbox(i) {
+      let list = this.contentParam.area;
+      let include = list.indexOf("全区");
+      if (i === 0) {
+        this.contentParam.area = [];
+        return;
+      }
+      if (include >= 0) {
+        this.contentParam.area.splice(0, 1);
+      }
+    },
+    backToPre() {
+      this.$router.push({
+        path: "/changShang",
+        query: {},
+      });
+    },
+  },
+  mounted() {
+    this.contentParam = this.$route.query;
+    this.noticeId = this.contentParam.id;
+    this.editFileLength = this.contentParam.files.length;
+    console.log(this.contentParam)
+  },
+  created() {},
+};
+</script>
+
+
+<style scoped lang="less">
+.fuWenBen {
+  position: relative;
+  left: 85px;
+  top: -40px;
+  width: 950px;
+}
+.operationStyle {
+  display: flex;
+  justify-content: center;
+}
+.operationStyle button:nth-child(1) {
+  margin-right: 36px;
+}
+.operationStyle button {
+  border-radius: 5px;
+  width: 100px;
+  height: 36px;
+}
+.Line5 button {
+  border-radius: 5px;
+  width: 100px;
+  height: 23px;
+  vertical-align: middle;
+}
+/* .operationStyle button:nth-child(2){
+  display: flex;
+  justify-content: center;
+} */
+.focusStyle {
+  border: 1px solid #ccc;
+  line-height: 20px;
+  color: #555555;
+  outline: none;
+  position: absolute;
+}
+.focusStyle:focus {
+  animation: shadowAni 200ms linear forwards;
+}
+.Line {
+  height: 50px;
+}
+.Line span {
+  width: 80px;
+  height: 36px;
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 36px;
+  justify-content: flex-end;
+  margin-right: 8px;
+}
+.areaBox {
+  display: flex;
+}
+.areaBox span {
+  width: 30px;
+}
+.areaBox input {
+  vertical-align: middle;
+}
+.Line3 {
+  display: flex;
+}
+.Line4 span {
+  line-height: 10px;
+}
+.Line4 {
+  margin-top: 9px;
+  height: auto;
+}
+
+.Line5 span {
+  position: relative;
+}
+.Line5 button {
+  margin-left: 64px;
+}
+.Line1 input {
+  height: 24px;
+}
+.Line2 select {
+  vertical-align: middle;
+  width: 120px;
+}
+.uploadFile {
+  display: flex;
+  margin-top: 35px;
+  min-height: 100px;
+  .title{
+    margin-right: 8px;
+    height: 20px;
+    line-height: 20px;
+    margin-left: 5%;
+  }
+  .fileDes {
+    margin-left: 20px;
+    width: 500px;
+    overflow: hidden; /* 超出一行文字自动隐藏 */
+    text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
+    white-space: nowrap; /* 强制不换行 */
+    p {
+      height: 30px;
+      line-height: 30px;
+      .deleteFile {
+        font-size: 20px;
+        margin-left: 20px;
+        height: 30px;
+        line-height: 30px;
+        // color: #0056a0;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  label {
+    height: 30px;
+    line-height: 30px;
+    width: 72px;
+    background-color: #0056a0;
+    color: #fff;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 5px;
+    input {
+      display: none;
+    }
+  }
+}
+</style>
+

src/views/notification/jingXiaoshang.vue

@@ -1,142 +1,164 @@
-<template>
-  <div class="notice_jingXiaoShang">
-    <div v-if="isFather()">
-      <div class="topTab">
-        <span>通知公告</span>
-      </div>
-      <div
-        style="
-          color: #80808059;
-          border: 1px solid;
-          position: relative;
-          top: 30px;
-        "
-      ></div>
-      <div class="noticeContent">
-        <div
-          v-for="(obj, index) in contentData"
-          :key="index"
-          class="itemBox"
-          @click="toDetail"
-        >
-          <div class="lineItem1">
-            <span class="dotStyle"></span>
-            <div :class="{ unread_message: obj.unread === 1 }">
-              [{{ obj.info }}]
-            </div>
-          </div>
-          <div :class="{ unread_message: obj.unread === 1 }">
-            【{{ obj.title || "" }}】
-          </div>
-          <div :class="{ unread_message: obj.unread === 1 }">
-            {{ obj.title }}
-          </div>
-          <div :class="{ unread_message: obj.unread === 1 }">
-            {{ obj.time }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <router-view></router-view>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-  data() {
-    return {
-      contentData: [
-        {
-          unread: 1,
-          info: "通知",
-          title: "title",
-          time: "2021/05/01",
-        },
-        {
-          unread: 0,
-          info: "通知",
-          title: "title",
-          time: "2021/05/01",
-        },
-        {
-          unread: 0,
-          info: "通知",
-          title: "title",
-          time: "2021/05/01",
-        },
-        {
-          unread: 0,
-          info: "通知",
-          title: "title",
-          time: "2021/05/01",
-        },
-        {
-          unread: 0,
-          info: "通知",
-          title: "title",
-          time: "2021/05/01",
-        },
-      ],
-    };
-  },
-  computed: {},
-  methods: {
-    /* 跳转通知详情 */
-    /* F:\Lexus\Lexus-media\src\views\notification\detail\itemDetail.vue */
-    toDetail: function (config) {
-      console.log(config, this.$route);
-      this.$router.push({
-        path: "/jingXiaoshang/itemDetail",
-        query: {},
-      });
-    },
-    isFather: function () {
-      console.log(this.$route.path, this.$route.path.length)
-      return this.$route.path == '/jingXiaoshang' ? true : false;
-    },
-  },
-  created() {},
-};
-</script>
-
-<style scoped lang="less">
-.unread_message {
-  color: red;
-}
-.lineItem1 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.dotStyle {
-  width: 2px;
-  height: 2px;
-  border: 1px solid black;
-  border-radius: 2px;
-  background-color: black;
-}
-.noticeContent {
-  position: relative;
-  top: 30px;
-  left: 16px;
-}
-.itemBox {
-  display: flex;
-}
-.itemBox div {
-  margin: 8px 16px 8px 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.topTab {
-  height: 30px;
-  background-color: rgba(102, 102, 102, 1);
-  line-height: 30px;
-}
-.topTab span {
-  margin-left: 16px;
-  color: white;
-}
-</style>
+<template>
+  <div class="notice_jingXiaoShang">
+    <div v-if="isFather()">
+      <div class="topTab">
+        <span>通知公告</span>
+      </div>
+      <div
+        style="
+          color: #80808059;
+          border: 1px solid;
+          position: relative;
+          top: 30px;
+        "
+      ></div>
+      <div class="noticeContent">
+        <div
+          v-for="(obj, index) in contentData"
+          :key="index"
+          class="itemBox"
+          @click="toDetail(obj)"
+        >
+          <div class="lineItem1">
+            <span class="dotStyle"></span>
+            <div :class="{ unread_message: obj.unread === 1 }">
+              [{{ obj.info }}]
+            </div>
+          </div>
+          <div :class="{ unread_message: obj.unread === 1 }">
+            【{{ obj.title || "" }}】
+          </div>
+          <div :class="{ unread_message: obj.unread === 1 }">
+            {{ obj.content }}
+          </div>
+          <div :class="{ unread_message: obj.unread === 1 }">
+            {{ obj.time }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  import { php_url } from "../../config/env";
+  import axiosPhp from "axios";
+export default {
+  components: {},
+  data() {
+    return {
+      unifiedUrl:'/lexus_php/api/',
+      contentData: [
+        {
+          unread: 0,
+          info: "重要通知",
+          title: "经销商分享",
+          content:'2020年12月线索相关数据明细已上线',
+          time: "2021/05/01",
+        },
+        {
+          unread: 1,
+          info: "重要通知",
+          title: "经销商分享",
+          content:'2020年12月线索相关数据明细已上线',
+          time: "2021/05/01",
+        },
+        {
+          unread: 0,
+          info: "重要通知",
+          title: "经销商分享",
+          content:'2020年12月线索相关数据明细已上线',
+          time: "2021/05/01",
+        },
+      ],
+      agentId:localStorage.getItem('userId')
+    };
+  },
+  computed: {},
+  methods: {
+    /* 跳转通知详情 */
+    /* F:\Lexus\Lexus-media\src\views\notification\detail\itemDetail.vue */
+    toDetail: function () {
+      this.$router.push({
+        path: "/changShang/itemDetail",
+        query: {
+          id:'7',
+          agentId:this.agentId
+        },
+      });
+    },
+    isFather: function () {
+      console.log(this.$route.path, this.$route.path.length)
+      return this.$route.path === '/jingXiaoshang';
+    },
+    getDataList: function () {
+      axiosPhp({
+        method: "post",
+        url: php_url + this.unifiedUrl + "notice_list_agent.php",
+        data: {
+          Page: this.currentPage,
+          Rows: this.pageSize,
+          agentId:this.agentId
+        },
+      })
+        .then((res) => {
+          console.log(res)
+          if (res.data.code === 200) {
+            this.sum = res.data.count;
+            // this.tableData = res.data.data;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  },
+  created() {},
+  mounted() {
+    this.getDataList()
+  }
+};
+</script>
+
+<style scoped lang="less">
+.unread_message {
+  color: red;
+}
+.lineItem1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dotStyle {
+  width: 2px;
+  height: 2px;
+  border: 1px solid black;
+  border-radius: 2px;
+  background-color: black;
+}
+.noticeContent {
+  position: relative;
+  top: 30px;
+  left: 16px;
+}
+.itemBox {
+  display: flex;
+  cursor: pointer;
+}
+.itemBox div {
+  margin: 8px 6px 4px 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.topTab {
+  height: 30px;
+  background-color: rgba(102, 102, 102, 1);
+  line-height: 30px;
+}
+.topTab span {
+  margin-left: 16px;
+  color: white;
+}
+</style>