antissoft / NetworkInformation

Commit 4f6550f12f507b5772232c3a20a698471c9fb6ac

Authored by monkeyhouyi
1 parent 7af40104

消息提醒弹框页面样式

Inline Side-by-side
Showing 10 changed files with 469 additions and 237 deletions
src/assets/images/Group.png 0 → 100644
View file @4f6550f

1011 Bytes
src/components/InfoForm/index.vue
  View file @4f6550f
... ... @@ -390,7 +390,7 @@ export default {
390 390 this.$forceUpdate();
391 391 },
392 392 handleSystemTypeChange(val) {
393   - this.query.systemClass = "";
  393 + this.infoForm.systemClass = "";
394 394 this.initSystemClassList(val);
395 395 },
396 396 async confirm() {
... ...
src/store/modules/user.js
  View file @4f6550f
... ... @@ -216,6 +216,16 @@ const user = {
216 216 resolve()
217 217 })
218 218 },
  219 + resetToken({ commit }) {
  220 + return new Promise(resolve => {
  221 + commit('SET_TOKEN', '')
  222 + commit('SET_MENULIST', [])
  223 + commit('SET_USERINFO', {})
  224 + commit('SET_LOGIN_LOADING', false)
  225 + removeToken()
  226 + resolve()
  227 + })
  228 + }
219 229 }
220 230 }
221 231  
... ...
src/utils/define.js
  View file @4f6550f
1 1 // 开发环境接口配置
2 2 // JAVA Boot版本对应后端接口地址
3 3 // JAVA Cloud对应网关地址
4   -const APIURl = 'http://localhost:8061'
  4 +const APIURl = 'http://8.130.38.56:8043'
5 5  
6 6 module.exports = {
7 7 APIURl: APIURl,
... ...
src/views/homePage/HomePage.vue
  View file @4f6550f
... ... @@ -3,43 +3,7 @@
3 3 <Header />
4 4 <div class="content">
5 5 <div class="navs">
6   - <el-menu
7   - :default-active="activeMenu"
8   - class="el-menu-vertical-demo"
9   - :collapse="true"
10   - router
11   - >
12   - <el-menu-item index="/homePage">
13   - <i class="el-icon-menu"></i>
14   - <span>首页</span>
15   - <!-- <span slot="title">首页</span> -->
16   - </el-menu-item>
17   - <div v-for="v in navList" :key="v.id">
18   - <template v-if="v.children && v.children.length">
19   - <el-submenu :index="v.path">
20   - <template slot="title">
21   - <i class="el-icon-location"></i>
22   - <span slot="title">{{ v.fullName }}</span>
23   - </template>
24   - <el-menu-item-group>
25   - <span slot="title">分组一</span>
26   - <el-menu-item
27   - :index="item.path"
28   - v-for="item in v.children"
29   - :key="item.id"
30   - >{{ item.fullName }}</el-menu-item
31   - >
32   - </el-menu-item-group>
33   - </el-submenu>
34   - </template>
35   - <template v-else>
36   - <el-menu-item :index="v.path">
37   - <i class="el-icon-menu"></i>
38   - <span>{{ v.fullName }}</span>
39   - </el-menu-item>
40   - </template>
41   - </div>
42   - </el-menu>
  6 + <Menu />
43 7 </div>
44 8 <div class="table-box">
45 9 <div class="search">
... ... @@ -48,7 +12,12 @@
48 12 placeholder="请输入应用名称，企业名称进行查询"
49 13 v-model="searchKeyword"
50 14 ></el-input>
51   - <el-button type="primary" @click="toSearchInfoList" style="height: 32px;">搜索</el-button>
  15 + <el-button
  16 + type="primary"
  17 + @click="toSearchInfoList"
  18 + style="height: 32px"
  19 + >搜索</el-button
  20 + >
52 21 </div>
53 22 <infoForm type="add">
54 23 <el-button type="success">新增</el-button>
... ... @@ -62,19 +31,7 @@
62 31 </div>
63 32 </div>
64 33 <div class="news">
65   - <div class="news-item">
66   - <div class="icon-item">
67   - <i class="el-icon-s-order"></i>
68   - </div>
69   - <div class="nav-title">我的待办</div>
70   - </div>
71   - <div class="news-item">
72   - <div class="icon-item">
73   - <i class="el-icon-message-solid"></i>
74   - <div class="red-spot"></div>
75   - </div>
76   - <div class="nav-title">我的消息</div>
77   - </div>
  34 + <News />
78 35 </div>
79 36 </div>
80 37 </div>
... ... @@ -82,23 +39,22 @@
82 39  
83 40 <script>
84 41 import Header from "./components/Header";
85   -import { navArr } from "@/assets/mockdata/demodata.json";
  42 +import News from "./components/news/index.vue";
  43 +import Menu from "./components/Menu.vue";
86 44 export default {
87 45 name: "HomePage",
88 46 components: {
89 47 Header,
  48 + News,
  49 + Menu,
90 50 },
91 51 data() {
92 52 return {
93   - navList: '',
94 53 searchKeyword: "",
95 54 };
96 55 },
97 56 created() {},
98   - mounted() {
99   - console.log(this.$store.state.user.menuList);
100   - this.navList = this.$store.state.user.menuList
101   - },
  57 + mounted() {},
102 58 watch: {
103 59 // $route: {
104 60 // handler: function (route) {
... ... @@ -107,13 +63,7 @@ export default {
107 63 // immediate: true,
108 64 // },
109 65 },
110   - computed: {
111   - // 默认激活的菜单
112   - activeMenu() {
113   - console.log("activeMenu", this.$route.path);
114   - return this.$route.path;
115   - },
116   - },
  66 + computed: {},
117 67 methods: {
118 68 toSearchInfoList() {
119 69 this.$router.push({
... ...
src/views/homePage/components/Header.vue
  View file @4f6550f
... ... @@ -25,7 +25,6 @@
25 25 </template>
26 26  
27 27 <script>
28   -import ReconnectingWebSocket from 'reconnecting-websocket'
29 28 export default {
30 29 name: "Header",
31 30 data() {
... ... @@ -36,100 +35,6 @@ export default {
36 35 },
37 36 mounted() {},
38 37 methods: {
39   - initWebSocket() {
40   - this.socket = this.$store.getters.socket || null
41   - if ('WebSocket' in window) {
42   - if (!this.socket) {
43   - this.socket = new ReconnectingWebSocket(this.define.WebSocketUrl)
44   - this.$store.commit('SET_SOCKET', this.socket)
45   - }
46   - //添加事件监听
47   - let socket = this.socket
48   - socket.onopen = () => {
49   - var onConnection = {
50   - "method": "OnConnection", "token": this.$store.getters.token, "mobileDevice": false
51   - }
52   - socket.send(JSON.stringify(onConnection))
53   - }
54   - socket.onmessage = (event) => {
55   - let data = JSON.parse(event.data)
56   - if (data.method == 'initMessage') {
57   - this.messageCount = data.unreadMessageCount + data.unreadNoticeCount
58   - this.isTwinkle = !!data.unreadNums.length
59   - }
60   - //用户在线
61   - if (data.method == 'Online') {
62   - }
63   - //用户离线
64   - if (data.method == 'Offline') {
65   - }
66   - //消息推送（消息公告用的）
67   - if (data.method == 'messagePush') {
68   - this.messageCount += data.unreadNoticeCount
69   - if (this.$refs.MessageList.visible) this.$refs.MessageList.init()
70   - }
71   - //用户过期
72   - if (data.method == 'logout') {
73   - this.$message({
74   - message: data.msg || '登录过期,请重新登录',
75   - type: 'error',
76   - duration: 1000,
77   - onClose: () => {
78   - this.$store.dispatch('user/resetToken').then(() => {
79   - location.reload()
80   - })
81   - }
82   - })
83   - }
84   - //接收对方发送的消息
85   - if (data.method == 'receiveMessage') {
86   - //判断是否打开窗口
87   - if (this.$refs.UserList && this.$refs.UserList.$refs.NCCIm && this.$refs.UserList.$refs.NCCIm.visible) {
88   - if (this.$refs.UserList.$refs.NCCIm.info.id === data.formUserId) {
89   - let messIitem = {
90   - userId: data.formUserId,
91   - messageType: data.messageType,
92   - message: data.formMessage,
93   - dateTime: this.ncc.toDate(data.dateTime)
94   - }
95   - this.$refs.UserList.$refs.NCCIm.addItem(messIitem)
96   - //更新已读
97   - let updateReadMessage = {
98   - method: "UpdateReadMessage",
99   - formUserId: data.formUserId,
100   - token: this.$store.getters.token
101   - }
102   - socket.send(JSON.stringify(updateReadMessage))
103   - this.$refs.UserList.updateReply(data)
104   - } else {
105   - this.$refs.UserList.updateReply(data, 1)
106   - this.isTwinkle = true
107   - }
108   - } else {
109   - this.$refs.UserList.updateReply(data, 1)
110   - this.isTwinkle = true
111   - }
112   - }
113   - //显示自己发送的消息
114   - if (data.method == 'sendMessage') {
115   - if (this.$refs.UserList.$refs.NCCIm.info.id !== data.toUserId) return
116   - //添加到客户端
117   - let messIitem = {
118   - userId: data.UserId,
119   - messageType: data.messageType,
120   - message: data.toMessage,
121   - dateTime: this.ncc.toDate(data.dateTime)
122   - }
123   - this.$refs.UserList.updateLatestMessage(data)
124   - this.$refs.UserList.$refs.NCCIm.addItem(messIitem)
125   - }
126   - //消息列表
127   - if (data.method == 'messageList') {
128   - this.$refs.UserList.$refs.NCCIm.getList(data)
129   - }
130   - }
131   - }
132   - },
133 38 async logout() {
134 39 await this.$store.dispatch("LogOut");
135 40 this.$router.push({ path: "/login" });
... ...
src/views/homePage/components/Menu.vue 0 → 100644
  View file @4f6550f
  1 +<template>
  2 + <div class="Navs">
  3 + <el-menu
  4 + :default-active="activeMenu"
  5 + class="el-menu-vertical-demo"
  6 + :collapse="true"
  7 + router
  8 + >
  9 + <el-menu-item index="/homePage">
  10 + <i class="el-icon-menu"></i>
  11 + <span>首页</span>
  12 + <!-- <span slot="title">首页</span> -->
  13 + </el-menu-item>
  14 + <div v-for="v in navList" :key="v.id">
  15 + <template v-if="v.children && v.children.length">
  16 + <el-submenu :index="v.path">
  17 + <template slot="title">
  18 + <i class="el-icon-location"></i>
  19 + <span slot="title">{{ v.fullName }}</span>
  20 + </template>
  21 + <el-menu-item-group>
  22 + <span slot="title">分组一</span>
  23 + <el-menu-item
  24 + :index="item.path"
  25 + v-for="item in v.children"
  26 + :key="item.id"
  27 + >{{ item.fullName }}</el-menu-item
  28 + >
  29 + </el-menu-item-group>
  30 + </el-submenu>
  31 + </template>
  32 + <template v-else>
  33 + <el-menu-item :index="v.path">
  34 + <i class="el-icon-menu"></i>
  35 + <span>{{ v.fullName }}</span>
  36 + </el-menu-item>
  37 + </template>
  38 + </div>
  39 + </el-menu>
  40 + </div>
  41 +</template>
  42 +
  43 +<script>
  44 +export default {
  45 + name: "Navs",
  46 +
  47 + data() {
  48 + return {
  49 + navList: "",
  50 + };
  51 + },
  52 + mounted() {
  53 + this.navList = this.$store.state.user.menuList;
  54 + },
  55 + computed: {
  56 + // 默认激活的菜单
  57 + activeMenu() {
  58 + console.log("activeMenu", this.$route.path);
  59 + return this.$route.path;
  60 + },
  61 + },
  62 +};
  63 +</script>
  64 +<style scoped lang="scss">
  65 +.Navs {
  66 + .el-menu-vertical-demo:not(.el-menu--collapse) {
  67 + width: 200px;
  68 + min-height: 400px;
  69 + }
  70 + :deep(.el-menu--collapse) {
  71 + width: 100%;
  72 + }
  73 + .el-menu-item {
  74 + display: flex;
  75 + flex-direction: column;
  76 + justify-content: center;
  77 + align-items: center;
  78 + line-height: 30px;
  79 + color: #fff;
  80 + &.is-active {
  81 + color: #1890ff;
  82 + background-color: #dfdada34;
  83 + }
  84 + span {
  85 + height: 30px;
  86 + width: 100%;
  87 + overflow: unset;
  88 + visibility: unset;
  89 + }
  90 + &:hover {
  91 + background-color: #dfdada56;
  92 + }
  93 + }
  94 + :deep(.el-menu) {
  95 + background-color: transparent;
  96 + border-right: unset;
  97 + .el-submenu__title {
  98 + display: flex;
  99 + flex-direction: column;
  100 + align-items: center;
  101 + line-height: 30px;
  102 + justify-content: center;
  103 + color: #fff;
  104 + &:hover {
  105 + background-color: #dfdada56;
  106 + }
  107 + }
  108 + i {
  109 + color: #fff;
  110 + }
  111 + .el-submenu__icon-arrow.el-icon-arrow-right {
  112 + display: none;
  113 + }
  114 + }
  115 +}
  116 +</style>
... ...
src/views/homePage/components/news/NewsDialog.vue 0 → 100644
  View file @4f6550f
  1 +<template>
  2 + <div class="NewsDialog">
  3 + <div class="news-title">
  4 + <div class="left">我的消息</div>
  5 + <div class="right">
  6 + <el-button type="primary" size="small">标记全部已读</el-button>
  7 + </div>
  8 + </div>
  9 + <div class="infinite-list-wrapper" style="overflow: auto">
  10 + <ul
  11 + class="list"
  12 + v-infinite-scroll="load"
  13 + infinite-scroll-disabled="disabled"
  14 + >
  15 + <li class="list-item" v-for="i in count" :key="i">
  16 + <div class="item-title">
  17 + 【沈青青】标题不在金牛区标题不在金牛区
  18 + </div>
  19 + <p>这个应用应该归属到青羊区，不在金牛区的管辖范围内。</p>
  20 + <div class="item-info">
  21 + <div class="left">发送人：王五</div>
  22 + <div class="left">时间：2023-10-03</div>
  23 + </div>
  24 + </li>
  25 + </ul>
  26 + <p v-if="loading">加载中...</p>
  27 + <p v-if="noMore">没有更多了</p>
  28 + </div>
  29 + </div>
  30 +</template>
  31 +
  32 +<script>
  33 +export default {
  34 + name: "NewsDialog",
  35 + data() {
  36 + return {
  37 + count: 10,
  38 + loading: false,
  39 + };
  40 + },
  41 + computed: {
  42 + noMore() {
  43 + return this.count >= 20;
  44 + },
  45 + disabled() {
  46 + return this.loading || this.noMore;
  47 + },
  48 + },
  49 + mounted() {},
  50 + methods: {
  51 + load() {
  52 + console.log(11);
  53 + this.loading = true;
  54 + setTimeout(() => {
  55 + this.count += 2;
  56 + this.loading = false;
  57 + }, 2000);
  58 + },
  59 + },
  60 +};
  61 +</script>
  62 +<style scoped lang="scss">
  63 +.NewsDialog {
  64 + margin: -14px;
  65 + .news-title {
  66 + display: flex;
  67 + justify-content: space-between;
  68 + align-items: center;
  69 + flex-direction: row;
  70 + padding: 0 12px;
  71 + width: 100%;
  72 + height: 40px;
  73 + line-height: 40px;
  74 + background-color: rgba(59, 130, 246, 1);
  75 + color: #fff;
  76 + }
  77 + .infinite-list-wrapper {
  78 + height: 40vh;
  79 + text-align: center;
  80 + // .list {
  81 + // margin-right: -8px;
  82 + // }
  83 + .list-item {
  84 + text-align: left;
  85 + margin: 5px 10px;
  86 + padding: 8px;
  87 + border-radius: 5px;
  88 + background-color: rgb(243, 244, 246);
  89 + .item-title {
  90 + color: #000;
  91 + font-weight: 600;
  92 + display: flex;
  93 + flex-direction: row;
  94 + align-items: center;
  95 + justify-content: space-between;
  96 + &::after {
  97 + content: "";
  98 + display: inline-block;
  99 + width: 15px;
  100 + text-align: center;
  101 + height: 15px;
  102 + background-image: url("@/assets/images/Group.png");
  103 + background-size: 100% 100%; /* 确保图片覆盖整个元素 */
  104 + background-position: center; /* 将图片居中显示 */
  105 + margin-left: 8px;
  106 + }
  107 + }
  108 + p {
  109 + margin: 5px 0;
  110 + font-size: 12px;
  111 + color: #898989;
  112 + }
  113 + .item-info {
  114 + display: flex;
  115 + flex-direction: row;
  116 + justify-content: space-between;
  117 + align-items: center;
  118 + color: #ccc;
  119 + font-size: 12px;
  120 + }
  121 + }
  122 + }
  123 +}
  124 +</style>
... ...
src/views/homePage/components/news/index.vue 0 → 100644
  View file @4f6550f
  1 +<template>
  2 + <div class="News">
  3 + <el-popover
  4 + placement="left"
  5 + width="300"
  6 + trigger="click"
  7 + v-for="(item, index) in itemList"
  8 + :key="index"
  9 + >
  10 + <NewsDialog />
  11 + <div slot="reference" class="news-item" @click="activeItem = index">
  12 + <div class="icon-item">
  13 + <div class="red-spot" v-show="item.hasInfo"></div>
  14 + <i :class="item.icon"></i>
  15 + </div>
  16 + <div class="nav-title">{{ item.title }}</div>
  17 + </div>
  18 + </el-popover>
  19 + </div>
  20 +</template>
  21 +
  22 +<script>
  23 +import ReconnectingWebSocket from "reconnecting-websocket";
  24 +import NewsDialog from "./NewsDialog";
  25 +export default {
  26 + name: "News",
  27 + components: { NewsDialog },
  28 + data() {
  29 + return {
  30 + itemList: [
  31 + // { icon: "el-icon-s-order", title: "我的待办", hasInfo: false },
  32 + { icon: "el-icon-message-solid", title: "我的消息", hasInfo: true },
  33 + ],
  34 + };
  35 + },
  36 + created() {
  37 + this.initWebSocket()
  38 + },
  39 + computed: {},
  40 + mounted() {},
  41 + destroyed() {
  42 + if (this.socket) {
  43 + //离开路由之后断开websocket连接
  44 + this.socket.close()
  45 + this.socket = null
  46 + this.$store.commit('SET_SOCKET', this.socket)
  47 + }
  48 + },
  49 + methods: {
  50 + initWebSocket() {
  51 + this.socket = this.$store.getters.socket || null;
  52 + if ("WebSocket" in window) {
  53 + if (!this.socket) {
  54 + this.socket = new ReconnectingWebSocket(this.define.WebSocketUrl);
  55 + this.$store.commit("SET_SOCKET", this.socket);
  56 + }
  57 + //添加事件监听
  58 + let socket = this.socket;
  59 + socket.onopen = () => {
  60 + var onConnection = {
  61 + method: "OnConnection",
  62 + token: this.$store.getters.token,
  63 + mobileDevice: false,
  64 + };
  65 + socket.send(JSON.stringify(onConnection));
  66 + };
  67 + socket.onmessage = (event) => {
  68 + let data = JSON.parse(event.data);
  69 + if (data.method == "initMessage") {
  70 + this.messageCount =
  71 + data.unreadMessageCount + data.unreadNoticeCount;
  72 + this.isTwinkle = !!data.unreadNums.length;
  73 + }
  74 + //用户在线
  75 + if (data.method == "Online") {
  76 + }
  77 + //用户离线
  78 + if (data.method == "Offline") {
  79 + }
  80 + //消息推送（消息公告用的）
  81 + if (data.method == "messagePush") {
  82 + console.log('messagePush', '消息推送（消息公告用的）', data);
  83 + this.messageCount += data.unreadNoticeCount;
  84 + if (this.$refs.MessageList.visible) this.$refs.MessageList.init();
  85 + }
  86 + //用户过期
  87 + if (data.method == "logout") {
  88 + this.$message({
  89 + message: data.msg || "登录过期,请重新登录",
  90 + type: "error",
  91 + duration: 1000,
  92 + onClose: () => {
  93 + this.$store.dispatch("resetToken").then(() => {
  94 + location.reload();
  95 + });
  96 + },
  97 + });
  98 + }
  99 + //接收对方发送的消息
  100 + if (data.method == "receiveMessage") {
  101 + console.log('receiveMessage', '接收对方发送的消息', data);
  102 + //判断是否打开窗口
  103 + if (
  104 + this.$refs.UserList &&
  105 + this.$refs.UserList.$refs.NCCIm &&
  106 + this.$refs.UserList.$refs.NCCIm.visible
  107 + ) {
  108 + if (this.$refs.UserList.$refs.NCCIm.info.id === data.formUserId) {
  109 + let messIitem = {
  110 + userId: data.formUserId,
  111 + messageType: data.messageType,
  112 + message: data.formMessage,
  113 + dateTime: this.ncc.toDate(data.dateTime),
  114 + };
  115 + this.$refs.UserList.$refs.NCCIm.addItem(messIitem);
  116 + //更新已读
  117 + let updateReadMessage = {
  118 + method: "UpdateReadMessage",
  119 + formUserId: data.formUserId,
  120 + token: this.$store.getters.token,
  121 + };
  122 + socket.send(JSON.stringify(updateReadMessage));
  123 + this.$refs.UserList.updateReply(data);
  124 + } else {
  125 + this.$refs.UserList.updateReply(data, 1);
  126 + this.isTwinkle = true;
  127 + }
  128 + } else {
  129 + this.$refs.UserList.updateReply(data, 1);
  130 + this.isTwinkle = true;
  131 + }
  132 + }
  133 + //显示自己发送的消息
  134 + if (data.method == "sendMessage") {
  135 + console.log('sendMessage', '显示自己发送的消息', data);
  136 + if (this.$refs.UserList.$refs.NCCIm.info.id !== data.toUserId)
  137 + return;
  138 + //添加到客户端
  139 + let messIitem = {
  140 + userId: data.UserId,
  141 + messageType: data.messageType,
  142 + message: data.toMessage,
  143 + dateTime: this.ncc.toDate(data.dateTime),
  144 + };
  145 + this.$refs.UserList.updateLatestMessage(data);
  146 + this.$refs.UserList.$refs.NCCIm.addItem(messIitem);
  147 + }
  148 + //消息列表
  149 + if (data.method == "messageList") {
  150 + console.log('messageList', '消息列表', data);
  151 + this.$refs.UserList.$refs.NCCIm.getList(data);
  152 + }
  153 + };
  154 + }
  155 + },
  156 + },
  157 +};
  158 +</script>
  159 +<style scoped lang="scss">
  160 +.News {
  161 + .news-item {
  162 + display: flex;
  163 + flex-direction: column;
  164 + align-items: center;
  165 + color: #fff;
  166 + cursor: pointer;
  167 + margin-bottom: 15px;
  168 + font-size: 14px;
  169 + width: 100%;
  170 + &:hover {
  171 + background-color: rgba(228, 231, 237, 0.23);
  172 + }
  173 + &:active {
  174 + background-color: #dfdada34;
  175 + .nav-title {
  176 + color: #1890ff;
  177 + }
  178 + }
  179 + .icon-item {
  180 + position: relative;
  181 + width: 24px;
  182 + height: 18px;
  183 + text-align: center;
  184 + line-height: 30px;
  185 + font-size: 18px;
  186 + margin: 8px;
  187 + .red-spot {
  188 + position: absolute;
  189 + right: -6px;
  190 + top: -6px;
  191 + width: 8px;
  192 + height: 8px;
  193 + background-color: red;
  194 + border-radius: 50%;
  195 + }
  196 + }
  197 + .nav-title {
  198 + line-height: 30px;
  199 + }
  200 + }
  201 +}
  202 +</style>
... ...
src/views/homePage/homePage.scss
  View file @4f6550f
... ... @@ -20,55 +20,6 @@
20 20 padding: 25px 0;
21 21 text-align: center;
22 22 border-right: unset;
23   - .el-menu-vertical-demo:not(.el-menu--collapse) {
24   - width: 200px;
25   - min-height: 400px;
26   - }
27   - :deep(.el-menu--collapse) {
28   - width: 100%;
29   - }
30   - .el-menu-item {
31   - display: flex;
32   - flex-direction: column;
33   - justify-content: center;
34   - align-items: center;
35   - line-height: 30px;
36   - color: #fff;
37   - &.is-active {
38   - color: #1890ff;;
39   - background-color: #dfdada34;
40   - }
41   - span {
42   - height: 30px;
43   - width: 100%;
44   - overflow: unset;
45   - visibility: unset;
46   - }
47   - &:hover {
48   - background-color: #dfdada56;
49   - }
50   - }
51   - :deep(.el-menu) {
52   - background-color: transparent;
53   - border-right: unset;
54   - .el-submenu__title {
55   - display: flex;
56   - flex-direction: column;
57   - align-items: center;
58   - line-height: 30px;
59   - justify-content: center;
60   - color: #fff;
61   - &:hover {
62   - background-color: #dfdada56;
63   - }
64   - }
65   - i {
66   - color: #fff;
67   - }
68   - .el-submenu__icon-arrow.el-icon-arrow-right {
69   - display: none;
70   - }
71   - }
72 23 }
73 24 .table-box {
74 25 position: absolute;
... ... @@ -116,32 +67,6 @@
116 67 height: 200px;
117 68 background-color: rgba(228, 231, 237, 0.23);
118 69 border-radius: 10px 0px 0px 10px;
119   - padding: 20px;
120   - .news-item {
121   - display: flex;
122   - flex-direction: column;
123   - align-items: center;
124   - color: #fff;
125   - cursor: pointer;
126   - margin-bottom: 8px;
127   - .icon-item {
128   - position: relative;
129   - width: 40px;
130   - height: 40px;
131   - text-align: center;
132   - line-height: 40px;
133   - font-size: 40px;
134   - margin: 8px;
135   - .red-spot {
136   - position: absolute;
137   - right: -6px;
138   - top: -6px;
139   - width: 12px;
140   - height: 12px;
141   - background-color: red;
142   - border-radius: 50%;
143   - }
144   - }
145   - }
  70 + padding: 20px 0;
146 71 }
147 72 }
148 73 \ No newline at end of file
... ...