From 4f6550f12f507b5772232c3a20a698471c9fb6ac Mon Sep 17 00:00:00 2001
From: monkeyhouyi <m19382021374@163.com>
Date: Mon, 22 Jul 2024 10:01:18 +0800
Subject: [PATCH] 消息提醒弹框页面样式

---
 src/assets/images/Group.png                       | Bin 0 -> 1011 bytes
 src/components/InfoForm/index.vue                 |   2 +-
 src/store/modules/user.js                         |  10 ++++++++++
 src/utils/define.js                               |   2 +-
 src/views/homePage/HomePage.vue                   |  78 ++++++++++++++----------------------------------------------------------------
 src/views/homePage/components/Header.vue          |  95 -----------------------------------------------------------------------------------------------
 src/views/homePage/components/Menu.vue            | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/homePage/components/news/NewsDialog.vue | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/homePage/components/news/index.vue      | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/homePage/homePage.scss                  |  77 +----------------------------------------------------------------------------
 10 files changed, 469 insertions(+), 237 deletions(-)
 create mode 100644 src/assets/images/Group.png
 create mode 100644 src/views/homePage/components/Menu.vue
 create mode 100644 src/views/homePage/components/news/NewsDialog.vue
 create mode 100644 src/views/homePage/components/news/index.vue

diff --git a/src/assets/images/Group.png b/src/assets/images/Group.png
new file mode 100644
index 0000000..7e3a797
Binary files /dev/null and b/src/assets/images/Group.png differ
diff --git a/src/components/InfoForm/index.vue b/src/components/InfoForm/index.vue
index 783fd56..b0a4239 100644
--- a/src/components/InfoForm/index.vue
+++ b/src/components/InfoForm/index.vue
@@ -390,7 +390,7 @@ export default {
       this.$forceUpdate();
     },
     handleSystemTypeChange(val) {
-      this.query.systemClass = "";
+      this.infoForm.systemClass = "";
       this.initSystemClassList(val);
     },
     async confirm() {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 09b6dc7..d17f412 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -216,6 +216,16 @@ const user = {
                 resolve()
             })
         },
+        resetToken({ commit }) {
+            return new Promise(resolve => {
+                commit('SET_TOKEN', '')
+                commit('SET_MENULIST', [])
+                commit('SET_USERINFO', {})
+                commit('SET_LOGIN_LOADING', false)
+                removeToken()
+                resolve()
+            })
+        }
     }
 }
 
diff --git a/src/utils/define.js b/src/utils/define.js
index 63c75ae..92295f6 100644
--- a/src/utils/define.js
+++ b/src/utils/define.js
@@ -1,7 +1,7 @@
 // 开发环境接口配置
 // JAVA Boot版本对应后端接口地址
 // JAVA Cloud对应网关地址
-const APIURl = 'http://localhost:8061'
+const APIURl = 'http://8.130.38.56:8043'
 
 module.exports = {
   APIURl: APIURl,
diff --git a/src/views/homePage/HomePage.vue b/src/views/homePage/HomePage.vue
index 792add1..5e8419e 100644
--- a/src/views/homePage/HomePage.vue
+++ b/src/views/homePage/HomePage.vue
@@ -3,43 +3,7 @@
     <Header />
     <div class="content">
       <div class="navs">
-        <el-menu
-          :default-active="activeMenu"
-          class="el-menu-vertical-demo"
-          :collapse="true"
-          router
-        >
-          <el-menu-item index="/homePage">
-            <i class="el-icon-menu"></i>
-            <span>首页</span>
-            <!-- <span slot="title">首页</span> -->
-          </el-menu-item>
-          <div v-for="v in navList" :key="v.id">
-            <template v-if="v.children && v.children.length">
-              <el-submenu :index="v.path">
-                <template slot="title">
-                  <i class="el-icon-location"></i>
-                  <span slot="title">{{ v.fullName }}</span>
-                </template>
-                <el-menu-item-group>
-                  <span slot="title">分组一</span>
-                  <el-menu-item
-                    :index="item.path"
-                    v-for="item in v.children"
-                    :key="item.id"
-                    >{{ item.fullName }}</el-menu-item
-                  >
-                </el-menu-item-group>
-              </el-submenu>
-            </template>
-            <template v-else>
-              <el-menu-item :index="v.path">
-                <i class="el-icon-menu"></i>
-                <span>{{ v.fullName }}</span>
-              </el-menu-item>
-            </template>
-          </div>
-        </el-menu>
+        <Menu />
       </div>
       <div class="table-box">
         <div class="search">
@@ -48,7 +12,12 @@
               placeholder="请输入应用名称，企业名称进行查询"
               v-model="searchKeyword"
             ></el-input>
-            <el-button type="primary" @click="toSearchInfoList" style="height: 32px;">搜索</el-button>
+            <el-button
+              type="primary"
+              @click="toSearchInfoList"
+              style="height: 32px"
+              >搜索</el-button
+            >
           </div>
           <infoForm type="add">
             <el-button type="success">新增</el-button>
@@ -62,19 +31,7 @@
         </div>
       </div>
       <div class="news">
-        <div class="news-item">
-          <div class="icon-item">
-            <i class="el-icon-s-order"></i>
-          </div>
-          <div class="nav-title">我的待办</div>
-        </div>
-        <div class="news-item">
-          <div class="icon-item">
-            <i class="el-icon-message-solid"></i>
-            <div class="red-spot"></div>
-          </div>
-          <div class="nav-title">我的消息</div>
-        </div>
+        <News />
       </div>
     </div>
   </div>
@@ -82,23 +39,22 @@
 
 <script>
 import Header from "./components/Header";
-import { navArr } from "@/assets/mockdata/demodata.json";
+import News from "./components/news/index.vue";
+import Menu from "./components/Menu.vue";
 export default {
   name: "HomePage",
   components: {
     Header,
+    News,
+    Menu,
   },
   data() {
     return {
-      navList: '',
       searchKeyword: "",
     };
   },
   created() {},
-  mounted() {
-    console.log(this.$store.state.user.menuList);
-    this.navList = this.$store.state.user.menuList
-  },
+  mounted() {},
   watch: {
     // $route: {
     //   handler: function (route) {
@@ -107,13 +63,7 @@ export default {
     //   immediate: true,
     // },
   },
-  computed: {
-    // 默认激活的菜单
-    activeMenu() {
-      console.log("activeMenu", this.$route.path);
-      return this.$route.path;
-    },
-  },
+  computed: {},
   methods: {
     toSearchInfoList() {
       this.$router.push({
diff --git a/src/views/homePage/components/Header.vue b/src/views/homePage/components/Header.vue
index 42c7615..e3eecbb 100644
--- a/src/views/homePage/components/Header.vue
+++ b/src/views/homePage/components/Header.vue
@@ -25,7 +25,6 @@
 </template>
 
 <script>
-import ReconnectingWebSocket from 'reconnecting-websocket'
 export default {
   name: "Header",
   data() {
@@ -36,100 +35,6 @@ export default {
   },
   mounted() {},
   methods: {
-    initWebSocket() {
-      this.socket = this.$store.getters.socket || null
-      if ('WebSocket' in window) {
-        if (!this.socket) {
-          this.socket = new ReconnectingWebSocket(this.define.WebSocketUrl)
-          this.$store.commit('SET_SOCKET', this.socket)
-        }
-        //添加事件监听
-        let socket = this.socket
-        socket.onopen = () => {
-          var onConnection = {
-            "method": "OnConnection", "token": this.$store.getters.token, "mobileDevice": false
-          }
-          socket.send(JSON.stringify(onConnection))
-        }
-        socket.onmessage = (event) => {
-          let data = JSON.parse(event.data)
-          if (data.method == 'initMessage') {
-            this.messageCount = data.unreadMessageCount + data.unreadNoticeCount
-            this.isTwinkle = !!data.unreadNums.length
-          }
-          //用户在线
-          if (data.method == 'Online') {
-          }
-          //用户离线
-          if (data.method == 'Offline') {
-          }
-          //消息推送（消息公告用的）
-          if (data.method == 'messagePush') {
-            this.messageCount += data.unreadNoticeCount
-            if (this.$refs.MessageList.visible) this.$refs.MessageList.init()
-          }
-          //用户过期
-          if (data.method == 'logout') {
-            this.$message({
-              message: data.msg || '登录过期,请重新登录',
-              type: 'error',
-              duration: 1000,
-              onClose: () => {
-                this.$store.dispatch('user/resetToken').then(() => {
-                  location.reload()
-                })
-              }
-            })
-          }
-          //接收对方发送的消息
-          if (data.method == 'receiveMessage') {
-            //判断是否打开窗口
-            if (this.$refs.UserList && this.$refs.UserList.$refs.NCCIm && this.$refs.UserList.$refs.NCCIm.visible) {
-              if (this.$refs.UserList.$refs.NCCIm.info.id === data.formUserId) {
-                let messIitem = {
-                  userId: data.formUserId,
-                  messageType: data.messageType,
-                  message: data.formMessage,
-                  dateTime: this.ncc.toDate(data.dateTime)
-                }
-                this.$refs.UserList.$refs.NCCIm.addItem(messIitem)
-                //更新已读
-                let updateReadMessage = {
-                  method: "UpdateReadMessage",
-                  formUserId: data.formUserId,
-                  token: this.$store.getters.token
-                }
-                socket.send(JSON.stringify(updateReadMessage))
-                this.$refs.UserList.updateReply(data)
-              } else {
-                this.$refs.UserList.updateReply(data, 1)
-                this.isTwinkle = true
-              }
-            } else {
-              this.$refs.UserList.updateReply(data, 1)
-              this.isTwinkle = true
-            }
-          }
-          //显示自己发送的消息
-          if (data.method == 'sendMessage') {
-            if (this.$refs.UserList.$refs.NCCIm.info.id !== data.toUserId) return
-            //添加到客户端
-            let messIitem = {
-              userId: data.UserId,
-              messageType: data.messageType,
-              message: data.toMessage,
-              dateTime: this.ncc.toDate(data.dateTime)
-            }
-            this.$refs.UserList.updateLatestMessage(data)
-            this.$refs.UserList.$refs.NCCIm.addItem(messIitem)
-          }
-          //消息列表
-          if (data.method == 'messageList') {
-            this.$refs.UserList.$refs.NCCIm.getList(data)
-          }
-        }
-      }
-    },
     async logout() {
       await this.$store.dispatch("LogOut");
       this.$router.push({ path: "/login" });
diff --git a/src/views/homePage/components/Menu.vue b/src/views/homePage/components/Menu.vue
new file mode 100644
index 0000000..fa18b1e
--- /dev/null
+++ b/src/views/homePage/components/Menu.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="Navs">
+    <el-menu
+      :default-active="activeMenu"
+      class="el-menu-vertical-demo"
+      :collapse="true"
+      router
+    >
+      <el-menu-item index="/homePage">
+        <i class="el-icon-menu"></i>
+        <span>首页</span>
+        <!-- <span slot="title">首页</span> -->
+      </el-menu-item>
+      <div v-for="v in navList" :key="v.id">
+        <template v-if="v.children && v.children.length">
+          <el-submenu :index="v.path">
+            <template slot="title">
+              <i class="el-icon-location"></i>
+              <span slot="title">{{ v.fullName }}</span>
+            </template>
+            <el-menu-item-group>
+              <span slot="title">分组一</span>
+              <el-menu-item
+                :index="item.path"
+                v-for="item in v.children"
+                :key="item.id"
+                >{{ item.fullName }}</el-menu-item
+              >
+            </el-menu-item-group>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="v.path">
+            <i class="el-icon-menu"></i>
+            <span>{{ v.fullName }}</span>
+          </el-menu-item>
+        </template>
+      </div>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Navs",
+
+  data() {
+    return {
+      navList: "",
+    };
+  },
+  mounted() {
+    this.navList = this.$store.state.user.menuList;
+  },
+  computed: {
+    // 默认激活的菜单
+    activeMenu() {
+      console.log("activeMenu", this.$route.path);
+      return this.$route.path;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.Navs {
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
+  :deep(.el-menu--collapse) {
+    width: 100%;
+  }
+  .el-menu-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    line-height: 30px;
+    color: #fff;
+    &.is-active {
+      color: #1890ff;
+      background-color: #dfdada34;
+    }
+    span {
+      height: 30px;
+      width: 100%;
+      overflow: unset;
+      visibility: unset;
+    }
+    &:hover {
+      background-color: #dfdada56;
+    }
+  }
+  :deep(.el-menu) {
+    background-color: transparent;
+    border-right: unset;
+    .el-submenu__title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      line-height: 30px;
+      justify-content: center;
+      color: #fff;
+      &:hover {
+        background-color: #dfdada56;
+      }
+    }
+    i {
+      color: #fff;
+    }
+    .el-submenu__icon-arrow.el-icon-arrow-right {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/homePage/components/news/NewsDialog.vue b/src/views/homePage/components/news/NewsDialog.vue
new file mode 100644
index 0000000..6789180
--- /dev/null
+++ b/src/views/homePage/components/news/NewsDialog.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="NewsDialog">
+    <div class="news-title">
+      <div class="left">我的消息</div>
+      <div class="right">
+        <el-button type="primary" size="small">标记全部已读</el-button>
+      </div>
+    </div>
+    <div class="infinite-list-wrapper" style="overflow: auto">
+      <ul
+        class="list"
+        v-infinite-scroll="load"
+        infinite-scroll-disabled="disabled"
+      >
+        <li class="list-item" v-for="i in count" :key="i">
+          <div class="item-title">
+            【沈青青】标题不在金牛区标题不在金牛区
+          </div>
+          <p>这个应用应该归属到青羊区，不在金牛区的管辖范围内。</p>
+          <div class="item-info">
+            <div class="left">发送人：王五</div>
+            <div class="left">时间：2023-10-03</div>
+          </div>
+        </li>
+      </ul>
+      <p v-if="loading">加载中...</p>
+      <p v-if="noMore">没有更多了</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NewsDialog",
+  data() {
+    return {
+      count: 10,
+      loading: false,
+    };
+  },
+  computed: {
+    noMore() {
+      return this.count >= 20;
+    },
+    disabled() {
+      return this.loading || this.noMore;
+    },
+  },
+  mounted() {},
+  methods: {
+    load() {
+      console.log(11);
+      this.loading = true;
+      setTimeout(() => {
+        this.count += 2;
+        this.loading = false;
+      }, 2000);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.NewsDialog {
+  margin: -14px;
+  .news-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 0 12px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background-color: rgba(59, 130, 246, 1);
+    color: #fff;
+  }
+  .infinite-list-wrapper {
+    height: 40vh;
+    text-align: center;
+    // .list {
+    //   margin-right: -8px;
+    // }
+    .list-item {
+      text-align: left;
+      margin: 5px 10px;
+      padding: 8px;
+      border-radius: 5px;
+      background-color: rgb(243, 244, 246);
+      .item-title {
+        color: #000;
+        font-weight: 600;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        &::after {
+          content: "";
+          display: inline-block;
+          width: 15px;
+          text-align: center;
+          height: 15px;
+          background-image: url("@/assets/images/Group.png");
+          background-size: 100% 100%; /* 确保图片覆盖整个元素 */
+          background-position: center; /* 将图片居中显示 */
+          margin-left: 8px;
+        }
+      }
+      p {
+        margin: 5px 0;
+        font-size: 12px;
+        color: #898989;
+      }
+      .item-info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        color: #ccc;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/homePage/components/news/index.vue b/src/views/homePage/components/news/index.vue
new file mode 100644
index 0000000..ebb7a90
--- /dev/null
+++ b/src/views/homePage/components/news/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="News">
+    <el-popover
+      placement="left"
+      width="300"
+      trigger="click"
+      v-for="(item, index) in itemList"
+      :key="index"
+    >
+      <NewsDialog />
+      <div slot="reference" class="news-item" @click="activeItem = index">
+        <div class="icon-item">
+          <div class="red-spot" v-show="item.hasInfo"></div>
+          <i :class="item.icon"></i>
+        </div>
+        <div class="nav-title">{{ item.title }}</div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import ReconnectingWebSocket from "reconnecting-websocket";
+import NewsDialog from "./NewsDialog";
+export default {
+  name: "News",
+  components: { NewsDialog },
+  data() {
+    return {
+      itemList: [
+        // { icon: "el-icon-s-order", title: "我的待办", hasInfo: false },
+        { icon: "el-icon-message-solid", title: "我的消息", hasInfo: true },
+      ],
+    };
+  },
+  created() {
+    this.initWebSocket()
+  },
+  computed: {},
+  mounted() {},
+  destroyed() {
+    if (this.socket) {
+      //离开路由之后断开websocket连接
+      this.socket.close()
+      this.socket = null
+      this.$store.commit('SET_SOCKET', this.socket)
+    }
+  },
+  methods: {
+    initWebSocket() {
+      this.socket = this.$store.getters.socket || null;
+      if ("WebSocket" in window) {
+        if (!this.socket) {
+          this.socket = new ReconnectingWebSocket(this.define.WebSocketUrl);
+          this.$store.commit("SET_SOCKET", this.socket);
+        }
+        //添加事件监听
+        let socket = this.socket;
+        socket.onopen = () => {
+          var onConnection = {
+            method: "OnConnection",
+            token: this.$store.getters.token,
+            mobileDevice: false,
+          };
+          socket.send(JSON.stringify(onConnection));
+        };
+        socket.onmessage = (event) => {
+          let data = JSON.parse(event.data);
+          if (data.method == "initMessage") {
+            this.messageCount =
+              data.unreadMessageCount + data.unreadNoticeCount;
+            this.isTwinkle = !!data.unreadNums.length;
+          }
+          //用户在线
+          if (data.method == "Online") {
+          }
+          //用户离线
+          if (data.method == "Offline") {
+          }
+          //消息推送（消息公告用的）
+          if (data.method == "messagePush") {
+            console.log('messagePush', '消息推送（消息公告用的）', data);
+            this.messageCount += data.unreadNoticeCount;
+            if (this.$refs.MessageList.visible) this.$refs.MessageList.init();
+          }
+          //用户过期
+          if (data.method == "logout") {
+            this.$message({
+              message: data.msg || "登录过期,请重新登录",
+              type: "error",
+              duration: 1000,
+              onClose: () => {
+                this.$store.dispatch("resetToken").then(() => {
+                  location.reload();
+                });
+              },
+            });
+          }
+          //接收对方发送的消息
+          if (data.method == "receiveMessage") {
+            console.log('receiveMessage', '接收对方发送的消息', data);
+            //判断是否打开窗口
+            if (
+              this.$refs.UserList &&
+              this.$refs.UserList.$refs.NCCIm &&
+              this.$refs.UserList.$refs.NCCIm.visible
+            ) {
+              if (this.$refs.UserList.$refs.NCCIm.info.id === data.formUserId) {
+                let messIitem = {
+                  userId: data.formUserId,
+                  messageType: data.messageType,
+                  message: data.formMessage,
+                  dateTime: this.ncc.toDate(data.dateTime),
+                };
+                this.$refs.UserList.$refs.NCCIm.addItem(messIitem);
+                //更新已读
+                let updateReadMessage = {
+                  method: "UpdateReadMessage",
+                  formUserId: data.formUserId,
+                  token: this.$store.getters.token,
+                };
+                socket.send(JSON.stringify(updateReadMessage));
+                this.$refs.UserList.updateReply(data);
+              } else {
+                this.$refs.UserList.updateReply(data, 1);
+                this.isTwinkle = true;
+              }
+            } else {
+              this.$refs.UserList.updateReply(data, 1);
+              this.isTwinkle = true;
+            }
+          }
+          //显示自己发送的消息
+          if (data.method == "sendMessage") {
+            console.log('sendMessage', '显示自己发送的消息', data);
+            if (this.$refs.UserList.$refs.NCCIm.info.id !== data.toUserId)
+              return;
+            //添加到客户端
+            let messIitem = {
+              userId: data.UserId,
+              messageType: data.messageType,
+              message: data.toMessage,
+              dateTime: this.ncc.toDate(data.dateTime),
+            };
+            this.$refs.UserList.updateLatestMessage(data);
+            this.$refs.UserList.$refs.NCCIm.addItem(messIitem);
+          }
+          //消息列表
+          if (data.method == "messageList") {
+            console.log('messageList', '消息列表', data);
+            this.$refs.UserList.$refs.NCCIm.getList(data);
+          }
+        };
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.News {
+  .news-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #fff;
+    cursor: pointer;
+    margin-bottom: 15px;
+    font-size: 14px;
+    width: 100%;
+    &:hover {
+      background-color: rgba(228, 231, 237, 0.23);
+    }
+    &:active {
+      background-color: #dfdada34;
+      .nav-title {
+        color: #1890ff;
+      }
+    }
+    .icon-item {
+      position: relative;
+      width: 24px;
+      height: 18px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 18px;
+      margin: 8px;
+      .red-spot {
+        position: absolute;
+        right: -6px;
+        top: -6px;
+        width: 8px;
+        height: 8px;
+        background-color: red;
+        border-radius: 50%;
+      }
+    }
+    .nav-title {
+      line-height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/homePage/homePage.scss b/src/views/homePage/homePage.scss
index 061da5e..507af9d 100644
--- a/src/views/homePage/homePage.scss
+++ b/src/views/homePage/homePage.scss
@@ -20,55 +20,6 @@
       padding: 25px 0;
       text-align: center;
       border-right: unset;
-      .el-menu-vertical-demo:not(.el-menu--collapse) {
-        width: 200px;
-        min-height: 400px;
-      }
-      :deep(.el-menu--collapse) {
-        width: 100%;
-      }
-      .el-menu-item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        line-height: 30px;
-        color: #fff;
-        &.is-active {
-          color: #1890ff;;
-          background-color: #dfdada34;
-        }
-        span {
-          height: 30px;
-          width: 100%;
-          overflow: unset;
-          visibility: unset;
-        }
-        &:hover {
-          background-color: #dfdada56;
-        }
-      }
-      :deep(.el-menu) {
-        background-color: transparent;
-        border-right: unset;
-        .el-submenu__title {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          line-height: 30px;
-          justify-content: center;
-          color: #fff;
-          &:hover {
-            background-color: #dfdada56;
-          }
-        }
-        i {
-          color: #fff;
-        }
-        .el-submenu__icon-arrow.el-icon-arrow-right {
-          display: none;
-        }
-      }
     }
     .table-box {
       position: absolute;
@@ -116,32 +67,6 @@
       height: 200px;
       background-color: rgba(228, 231, 237, 0.23);
       border-radius: 10px 0px 0px 10px;
-      padding: 20px;
-      .news-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        color: #fff;
-        cursor: pointer;
-        margin-bottom: 8px;
-        .icon-item {
-          position: relative;
-          width: 40px;
-          height: 40px;
-          text-align: center;
-          line-height: 40px;
-          font-size: 40px;
-          margin: 8px;
-          .red-spot {
-            position: absolute;
-            right: -6px;
-            top: -6px;
-            width: 12px;
-            height: 12px;
-            background-color: red;
-            border-radius: 50%;
-          }
-        }
-      }
+      padding: 20px 0;
     }
   }
\ No newline at end of file
--
libgit2 0.21.4