style:登录
Showing
3 changed files
with
194 additions
and
195 deletions
... | @@ -19,231 +19,231 @@ | ... | @@ -19,231 +19,231 @@ |
19 | </div> | 19 | </div> |
20 | </template> | 20 | </template> |
21 | <script> | 21 | <script> |
22 | import sidebarLeft from "./Sidebar/sidebarLeft"; | 22 | import sidebarLeft from "./Sidebar/sidebarLeft"; |
23 | import sidebarRight from "./Sidebar/sidebarRight"; | 23 | import sidebarRight from "./Sidebar/sidebarRight"; |
24 | import { logout } from "@/api/login.js"; | 24 | import { logout } from "@/api/login.js"; |
25 | import { mapGetters } from "vuex"; | 25 | import { mapGetters } from "vuex"; |
26 | export default { | 26 | export default { |
27 | components: { | 27 | components: { |
28 | sidebarLeft, | 28 | sidebarLeft, |
29 | sidebarRight, | 29 | sidebarRight, |
30 | }, | 30 | }, |
31 | computed: { | 31 | computed: { |
32 | ...mapGetters(["userInfo"]), | 32 | ...mapGetters(["userInfo"]), |
33 | userName () { | 33 | userName () { |
34 | return this.userInfo ? this.userInfo.name : "" | 34 | return this.userInfo ? this.userInfo.name : "" |
35 | } | 35 | } |
36 | }, | 36 | }, |
37 | methods: { | 37 | methods: { |
38 | onCancel () { | 38 | onCancel () { |
39 | logout() | 39 | logout() |
40 | .then((res) => { | 40 | .then((res) => { |
41 | sessionStorage.removeItem("token"); | 41 | sessionStorage.removeItem("token"); |
42 | this.$store.dispatch("user/resetState"); | 42 | this.$store.dispatch("user/resetState"); |
43 | this.$store.dispatch("permission/resetRoutes"); | 43 | this.$store.dispatch("permission/resetRoutes"); |
44 | this.$router.replace({ | 44 | this.$router.replace({ |
45 | path: "/jg" | 45 | path: "/login" |
46 | }) | ||
46 | }) | 47 | }) |
47 | }) | 48 | .catch((error) => { |
48 | .catch((error) => { | 49 | }) |
49 | }) | 50 | } |
50 | } | 51 | } |
51 | } | 52 | } |
52 | } | ||
53 | </script> | 53 | </script> |
54 | <style lang="scss" scoped> | 54 | <style lang="scss" scoped> |
55 | .menubg { | 55 | .menubg { |
56 | height: 34px; | 56 | height: 34px; |
57 | width: 130px !important; | 57 | width: 130px !important; |
58 | text-align: center; | 58 | text-align: center; |
59 | color: #ffffff; | ||
60 | background: url("~@/image/navbar.png") no-repeat; | ||
61 | background-size: 100% 100%; | ||
62 | } | ||
63 | |||
64 | /deep/.el-menu-item { | ||
65 | @extend .menubg; | ||
66 | } | ||
67 | |||
68 | /deep/.el-submenu { | ||
69 | @extend .menubg; | ||
70 | } | ||
71 | |||
72 | /deep/.el-submenu__title { | ||
73 | height: 34px; | ||
74 | color: #ffffff; | ||
75 | } | ||
76 | |||
77 | /deep/.el-submenu__title span { | ||
78 | font-size: 14px; | ||
79 | } | ||
80 | |||
81 | .sidebarLeft { | ||
82 | position: relative; | ||
83 | top: 13px; | ||
84 | width: 30%; | ||
85 | } | ||
86 | |||
87 | /deep/.el-menu { | ||
88 | display: flex; | ||
89 | justify-content: space-between; | ||
90 | width: 100%; | ||
91 | background: transparent !important; | ||
92 | } | ||
93 | |||
94 | /deep/.el-menu-item { | ||
95 | flex: 1; | ||
96 | width: 100%; | ||
97 | } | ||
98 | |||
99 | .sidebarRight { | ||
100 | position: relative; | ||
101 | top: 13px; | ||
102 | width: 30%; | ||
103 | } | ||
104 | |||
105 | // 导航选中背景色 | ||
106 | .xuanzhong { | ||
107 | background: url("~@/image/selNavbar.png") no-repeat; | ||
108 | background-size: 100% 100%; | ||
109 | color: #ffffff !important; | ||
110 | font-weight: 700; | ||
111 | } | ||
112 | |||
113 | /deep/.el-menu-item:hover { | ||
114 | @extend .xuanzhong; | ||
115 | } | ||
116 | |||
117 | /deep/.el-submenu__title:hover { | ||
118 | @extend .xuanzhong; | ||
119 | } | ||
120 | |||
121 | /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus { | ||
122 | @extend .xuanzhong; | ||
123 | } | ||
124 | |||
125 | /deep/.is-active { | ||
126 | @extend .xuanzhong; | ||
127 | } | ||
128 | |||
129 | .navbar { | ||
130 | height: $headerHeight; | ||
131 | overflow: hidden; | ||
132 | position: relative; | ||
133 | display: flex; | ||
134 | align-items: center; | ||
135 | padding: 0 20px; | ||
136 | justify-content: space-between; | ||
137 | background: url("~@/image/header.png") no-repeat; | ||
138 | background-size: 100% 100%; | ||
139 | |||
140 | .user { | ||
141 | font-size: 12px; | ||
142 | color: #ffffff; | 59 | color: #ffffff; |
143 | position: absolute; | 60 | background: url("~@/image/navbar.png") no-repeat; |
144 | right: 20px; | 61 | background-size: 100% 100%; |
145 | top: 0; | 62 | } |
146 | cursor: pointer; | ||
147 | 63 | ||
148 | .closeStyle { | 64 | /deep/.el-menu-item { |
149 | margin-right: 5px; | 65 | @extend .menubg; |
150 | } | ||
151 | } | 66 | } |
152 | 67 | ||
153 | .title { | 68 | /deep/.el-submenu { |
154 | position: absolute; | 69 | @extend .menubg; |
155 | left: 0; | 70 | } |
156 | top: 10px; | 71 | |
157 | bottom: 0; | 72 | /deep/.el-submenu__title { |
158 | right: 0; | 73 | height: 34px; |
159 | margin: 0 auto; | ||
160 | font-size: 32px; | ||
161 | color: #ffffff; | 74 | color: #ffffff; |
162 | font-weight: 700; | ||
163 | text-align: center; | ||
164 | } | 75 | } |
165 | 76 | ||
166 | .right-menu { | 77 | /deep/.el-submenu__title span { |
167 | float: right; | 78 | font-size: 14px; |
168 | height: 100%; | 79 | } |
169 | line-height: 50px; | 80 | |
81 | .sidebarLeft { | ||
82 | position: relative; | ||
83 | top: 13px; | ||
84 | width: 30%; | ||
85 | } | ||
86 | |||
87 | /deep/.el-menu { | ||
170 | display: flex; | 88 | display: flex; |
171 | align-items: center; | 89 | justify-content: space-between; |
90 | width: 100%; | ||
91 | background: transparent !important; | ||
92 | } | ||
172 | 93 | ||
173 | .shutdown { | 94 | /deep/.el-menu-item { |
174 | font-size: 20px; | 95 | flex: 1; |
175 | margin-left: 15px; | 96 | width: 100%; |
176 | cursor: pointer; | 97 | } |
177 | } | ||
178 | 98 | ||
179 | .organization-item { | 99 | .sidebarRight { |
180 | margin-right: 40px; | 100 | position: relative; |
181 | margin-top: -40px !important; | 101 | top: 13px; |
182 | } | 102 | width: 30%; |
103 | } | ||
104 | |||
105 | // 导航选中背景色 | ||
106 | .xuanzhong { | ||
107 | background: url("~@/image/selNavbar.png") no-repeat; | ||
108 | background-size: 100% 100%; | ||
109 | color: #ffffff !important; | ||
110 | font-weight: 700; | ||
111 | } | ||
112 | |||
113 | /deep/.el-menu-item:hover { | ||
114 | @extend .xuanzhong; | ||
115 | } | ||
116 | |||
117 | /deep/.el-submenu__title:hover { | ||
118 | @extend .xuanzhong; | ||
119 | } | ||
183 | 120 | ||
184 | .item { | 121 | /deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus { |
185 | margin-right: 40px; | 122 | @extend .xuanzhong; |
186 | margin-top: -20px; | 123 | } |
187 | line-height: 18.4px; | 124 | |
125 | /deep/.is-active { | ||
126 | @extend .xuanzhong; | ||
127 | } | ||
128 | |||
129 | .navbar { | ||
130 | height: $headerHeight; | ||
131 | overflow: hidden; | ||
132 | position: relative; | ||
133 | display: flex; | ||
134 | align-items: center; | ||
135 | padding: 0 20px; | ||
136 | justify-content: space-between; | ||
137 | background: url("~@/image/header.png") no-repeat; | ||
138 | background-size: 100% 100%; | ||
139 | |||
140 | .user { | ||
141 | font-size: 12px; | ||
142 | color: #ffffff; | ||
143 | position: absolute; | ||
144 | right: 20px; | ||
145 | top: 0; | ||
188 | cursor: pointer; | 146 | cursor: pointer; |
189 | position: relative; | 147 | |
190 | 148 | .closeStyle { | |
191 | .item-box { | 149 | margin-right: 5px; |
192 | position: absolute; | ||
193 | top: -5px; | ||
194 | left: 3px; | ||
195 | width: 100%; | ||
196 | min-width: 25px; | ||
197 | height: 25px; | ||
198 | cursor: pointer; | ||
199 | z-index: 100; | ||
200 | } | 150 | } |
201 | } | 151 | } |
202 | 152 | ||
203 | &:focus { | 153 | .title { |
204 | outline: none; | 154 | position: absolute; |
155 | left: 0; | ||
156 | top: 10px; | ||
157 | bottom: 0; | ||
158 | right: 0; | ||
159 | margin: 0 auto; | ||
160 | font-size: 32px; | ||
161 | color: #ffffff; | ||
162 | font-weight: 700; | ||
163 | text-align: center; | ||
205 | } | 164 | } |
206 | 165 | ||
207 | .right-menu-item { | 166 | .right-menu { |
208 | display: inline-block; | 167 | float: right; |
209 | height: 100%; | 168 | height: 100%; |
210 | font-size: 18px; | 169 | line-height: 50px; |
211 | color: #fff; | 170 | display: flex; |
212 | vertical-align: text-bottom; | 171 | align-items: center; |
213 | 172 | ||
214 | &.hover-effect { | 173 | .shutdown { |
174 | font-size: 20px; | ||
175 | margin-left: 15px; | ||
215 | cursor: pointer; | 176 | cursor: pointer; |
216 | transition: background 0.3s; | 177 | } |
217 | display: flex; | 178 | |
218 | align-items: center; | 179 | .organization-item { |
180 | margin-right: 40px; | ||
181 | margin-top: -40px !important; | ||
182 | } | ||
219 | 183 | ||
220 | &:hover { | 184 | .item { |
221 | background: rgba(0, 0, 0, 0.025); | 185 | margin-right: 40px; |
186 | margin-top: -20px; | ||
187 | line-height: 18.4px; | ||
188 | cursor: pointer; | ||
189 | position: relative; | ||
190 | |||
191 | .item-box { | ||
192 | position: absolute; | ||
193 | top: -5px; | ||
194 | left: 3px; | ||
195 | width: 100%; | ||
196 | min-width: 25px; | ||
197 | height: 25px; | ||
198 | cursor: pointer; | ||
199 | z-index: 100; | ||
222 | } | 200 | } |
223 | } | 201 | } |
224 | } | ||
225 | 202 | ||
226 | .avatar-wrapper { | 203 | &:focus { |
227 | position: relative; | 204 | outline: none; |
228 | display: flex; | 205 | } |
229 | height: 40px; | ||
230 | align-items: center; | ||
231 | 206 | ||
232 | .user-avatar { | 207 | .right-menu-item { |
233 | cursor: pointer; | 208 | display: inline-block; |
234 | width: 35px; | 209 | height: 100%; |
235 | height: 35px; | 210 | font-size: 18px; |
236 | border-radius: 50%; | 211 | color: #fff; |
212 | vertical-align: text-bottom; | ||
213 | |||
214 | &.hover-effect { | ||
215 | cursor: pointer; | ||
216 | transition: background 0.3s; | ||
217 | display: flex; | ||
218 | align-items: center; | ||
219 | |||
220 | &:hover { | ||
221 | background: rgba(0, 0, 0, 0.025); | ||
222 | } | ||
223 | } | ||
237 | } | 224 | } |
238 | 225 | ||
239 | .el-icon-caret-bottom { | 226 | .avatar-wrapper { |
240 | cursor: pointer; | 227 | position: relative; |
241 | position: absolute; | 228 | display: flex; |
242 | right: -15px; | 229 | height: 40px; |
243 | top: 17px; | 230 | align-items: center; |
244 | font-size: 12px; | 231 | |
232 | .user-avatar { | ||
233 | cursor: pointer; | ||
234 | width: 35px; | ||
235 | height: 35px; | ||
236 | border-radius: 50%; | ||
237 | } | ||
238 | |||
239 | .el-icon-caret-bottom { | ||
240 | cursor: pointer; | ||
241 | position: absolute; | ||
242 | right: -15px; | ||
243 | top: 17px; | ||
244 | font-size: 12px; | ||
245 | } | ||
245 | } | 246 | } |
246 | } | 247 | } |
247 | } | 248 | } |
248 | } | ||
249 | </style> | 249 | </style> | ... | ... |
1 | /* | 1 | /* |
2 | * @Description: 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器 | 2 | * @Description: 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器 |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-04-27 17:09:51 | 4 | * @LastEditTime: 2023-05-25 14:07:28 |
5 | */ | 5 | */ |
6 | import Vue from 'vue' | 6 | import Vue from 'vue' |
7 | import axios from "axios"; | 7 | import axios from "axios"; |
... | @@ -72,7 +72,7 @@ function handleErrorData (status) { | ... | @@ -72,7 +72,7 @@ function handleErrorData (status) { |
72 | let code = Vue.prototype.BASE_API.CODE | 72 | let code = Vue.prototype.BASE_API.CODE |
73 | if (code == 'BDCSBPT') { | 73 | if (code == 'BDCSBPT') { |
74 | router.replace({ | 74 | router.replace({ |
75 | path: "/sb", | 75 | path: "/login", |
76 | query: { | 76 | query: { |
77 | redirect: router.history.current.fullPath, | 77 | redirect: router.history.current.fullPath, |
78 | }, | 78 | }, | ... | ... |
... | @@ -234,7 +234,6 @@ | ... | @@ -234,7 +234,6 @@ |
234 | }, | 234 | }, |
235 | methods: { | 235 | methods: { |
236 | uploadRecord (file) { | 236 | uploadRecord (file) { |
237 | console.log(file, 'eee11111111111111'); | ||
238 | this.requested = true | 237 | this.requested = true |
239 | this.files = file; | 238 | this.files = file; |
240 | const extension = file.name.split('.')[1] === 'xml' | 239 | const extension = file.name.split('.')[1] === 'xml' | ... | ... |
-
Please register or sign in to post a comment