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,7 +390,7 @@ export default {
390 this.$forceUpdate(); 390 this.$forceUpdate();
391 }, 391 },
392 handleSystemTypeChange(val) { 392 handleSystemTypeChange(val) {
393 - this.query.systemClass = ""; 393 + this.infoForm.systemClass = "";
394 this.initSystemClassList(val); 394 this.initSystemClassList(val);
395 }, 395 },
396 async confirm() { 396 async confirm() {
src/store/modules/user.js
  View file @4f6550f
@@ -216,6 +216,16 @@ const user = { @@ -216,6 +216,16 @@ const user = {
216 resolve() 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 // JAVA Boot版本对应后端接口地址 2 // JAVA Boot版本对应后端接口地址
3 // JAVA Cloud对应网关地址 3 // JAVA Cloud对应网关地址
4 -const APIURl = 'http://localhost:8061' 4 +const APIURl = 'http://8.130.38.56:8043'
5 5
6 module.exports = { 6 module.exports = {
7 APIURl: APIURl, 7 APIURl: APIURl,
src/views/homePage/HomePage.vue
  View file @4f6550f
@@ -3,43 +3,7 @@ @@ -3,43 +3,7 @@
3 <Header /> 3 <Header />
4 <div class="content"> 4 <div class="content">
5 <div class="navs"> 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 </div> 7 </div>
44 <div class="table-box"> 8 <div class="table-box">
45 <div class="search"> 9 <div class="search">
@@ -48,7 +12,12 @@ @@ -48,7 +12,12 @@
48 placeholder="请输入应用名称，企业名称进行查询" 12 placeholder="请输入应用名称，企业名称进行查询"
49 v-model="searchKeyword" 13 v-model="searchKeyword"
50 ></el-input> 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 </div> 21 </div>
53 <infoForm type="add"> 22 <infoForm type="add">
54 <el-button type="success">新增</el-button> 23 <el-button type="success">新增</el-button>
@@ -62,19 +31,7 @@ @@ -62,19 +31,7 @@
62 </div> 31 </div>
63 </div> 32 </div>
64 <div class="news"> 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 </div> 35 </div>
79 </div> 36 </div>
80 </div> 37 </div>
@@ -82,23 +39,22 @@ @@ -82,23 +39,22 @@
82 39
83 <script> 40 <script>
84 import Header from "./components/Header"; 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 export default { 44 export default {
87 name: "HomePage", 45 name: "HomePage",
88 components: { 46 components: {
89 Header, 47 Header,
  48 + News,
  49 + Menu,
90 }, 50 },
91 data() { 51 data() {
92 return { 52 return {
93 - navList: '',  
94 searchKeyword: "", 53 searchKeyword: "",
95 }; 54 };
96 }, 55 },
97 created() {}, 56 created() {},
98 - mounted() {  
99 - console.log(this.$store.state.user.menuList);  
100 - this.navList = this.$store.state.user.menuList  
101 - }, 57 + mounted() {},
102 watch: { 58 watch: {
103 // $route: { 59 // $route: {
104 // handler: function (route) { 60 // handler: function (route) {
@@ -107,13 +63,7 @@ export default { @@ -107,13 +63,7 @@ export default {
107 // immediate: true, 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 methods: { 67 methods: {
118 toSearchInfoList() { 68 toSearchInfoList() {
119 this.$router.push({ 69 this.$router.push({
src/views/homePage/components/Header.vue
  View file @4f6550f
@@ -25,7 +25,6 @@ @@ -25,7 +25,6 @@
25 </template> 25 </template>
26 26
27 <script> 27 <script>
28 -import ReconnectingWebSocket from 'reconnecting-websocket'  
29 export default { 28 export default {
30 name: "Header", 29 name: "Header",
31 data() { 30 data() {
@@ -36,100 +35,6 @@ export default { @@ -36,100 +35,6 @@ export default {
36 }, 35 },
37 mounted() {}, 36 mounted() {},
38 methods: { 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 async logout() { 38 async logout() {
134 await this.$store.dispatch("LogOut"); 39 await this.$store.dispatch("LogOut");
135 this.$router.push({ path: "/login" }); 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,55 +20,6 @@
20 padding: 25px 0; 20 padding: 25px 0;
21 text-align: center; 21 text-align: center;
22 border-right: unset; 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 .table-box { 24 .table-box {
74 position: absolute; 25 position: absolute;
@@ -116,32 +67,6 @@ @@ -116,32 +67,6 @@
116 height: 200px; 67 height: 200px;
117 background-color: rgba(228, 231, 237, 0.23); 68 background-color: rgba(228, 231, 237, 0.23);
118 border-radius: 10px 0px 0px 10px; 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 \ No newline at end of file 73 \ No newline at end of file