Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
4279e5fc by renchao@pashanhoo.com
Options

style:数据上报

1 parent 8a640b55
Inline Side-by-side
Showing 3 changed files with 244 additions and 256 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-27 14:09:57 4 * @LastEditTime: 2023-05-11 16:38:29
5 --> 5 -->
6 <template> 6 <template>
7 <div> 7 <div>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" 9 <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
10 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical"> 10 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
11 <!-- 权限菜单 --> 11 <!-- 权限菜单 -->
12 <sidebar-item v-for="route in permission_routes.slice(5)" :key="route.path" :item="route" 12 <sidebar-item v-for="route in permission_routes.slice(4)" :key="route.path" :item="route"
13 :base-path="route.path" /> 13 :base-path="route.path" />
14 <!-- 菜单全部展示 --> 14 <!-- 菜单全部展示 -->
15 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> 15 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-11 16:25:43 4 * @LastEditTime: 2023-05-11 16:33:18
5 */ 5 */
6 import Vue from 'vue' 6 export default function getTheme () {
7 export default function getTheme (theme = Vue.prototype.BASE_API.THEME) { 7 import("@/styles/sbPublic.scss");
8 const resultMap = {
9 'sb': function () {
10 return import("@/styles/sbPublic.scss");
11 },
12 'default': function () {
13 throw new Error(`Unsupported theme: ${theme}`);
14 },
15 };
16 const result = resultMap[theme]();
17 if (result instanceof Promise) {
18 return result;
19 } else {
20 return resultMap.default();
21 }
22 } 8 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -37,283 +37,285 @@ ...@@ -37,283 +37,285 @@
37 </template> 37 </template>
38 38
39 <script> 39 <script>
40 import { getMenuInfo } from "@/api/user"; 40 import { getMenuInfo } from "@/api/user";
41 import { loginIn } from "@/api/login.js"; 41 import { loginIn } from "@/api/login.js";
42 export default { 42 export default {
43 name: "sbLogin", 43 name: "sbLogin",
44 data () { 44 data () {
45 return { 45 return {
46 user: { 46 user: {
47 account: "", 47 account: "",
48 password: "", 48 password: "",
49 yz: "", 49 yz: "",
50 checkStatus: false, 50 checkStatus: false,
51 },
52 productName: "",
53 rules: {
54 account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
55 password: [{ required: true, message: "请填写密码", trigger: "blur" }],
56 },
57 };
58 },
59 methods: {
60 verification () {
61 let str = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ', code = '', i = 0;
62 for (; i++ < 4;) code += str[Math.floor(Math.random() * (str.length - 0) + 0)];
63 setTimeout(() => {
64 let canvas = document.getElementById("s-canvas"), ctx = canvas.getContext("2d");
65 canvas.width = 80;
66 canvas.height = 28;
67 ctx.fillStyle = '#ffffff';
68 ctx.fillRect(0, 0, 80, 28);
69 for (i = 0; i < code.length; i++) { this.drawText(ctx, code[i], i); }
70 }, 0);
51 }, 71 },
52 productName: "", 72 drawText (ctx, txt, i) {
53 rules: { 73 ctx.fillStyle = this.randomColor(50, 160);
54 account: [{ required: true, message: "请填写帐号", trigger: "blur" }], 74 ctx.font = "18px SimHei";
55 password: [{ required: true, message: "请填写密码", trigger: "blur" }], 75 let x = (i + 1) * (80 / (4 + 1)), y = this.randomNum(18, 28 - 5);
76 ctx.translate(x, y);
77 ctx.fillText(txt, 0, 0);
78 ctx.rotate((-0 * Math.PI) / 180);
79 ctx.translate(-x, -y);
56 }, 80 },
57 }; 81 randomColor (min, max) {
58 }, 82 let r = this.randomNum(min, max);
59 methods: { 83 let g = this.randomNum(min, max);
60 verification () { 84 let b = this.randomNum(min, max);
61 let str = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ', code = '', i = 0; 85 return "rgb(" + r + "," + g + "," + b + ")";
62 for (; i++ < 4;) code += str[Math.floor(Math.random() * (str.length - 0) + 0)]; 86 },
63 setTimeout(() => { 87 randomNum (min, max) {
64 let canvas = document.getElementById("s-canvas"), ctx = canvas.getContext("2d"); 88 return Math.floor(Math.random() * (max - min) + min);
65 canvas.width = 80; 89 },
66 canvas.height = 28; 90 //记住用户名
67 ctx.fillStyle = '#ffffff'; 91 checkUserName: function (flag) {
68 ctx.fillRect(0, 0, 80, 28); 92 this.user.checkStatus = flag;
69 for (i = 0; i < code.length; i++) { this.drawText(ctx, code[i], i); } 93 if (this.user.checkStatus) {
70 }, 0); 94 localStorage.setItem("accountId", this.user.account);
71 }, 95 let name = localStorage.getItem("accountId");
72 drawText (ctx, txt, i) { 96 if (name === "") {
73 ctx.fillStyle = this.randomColor(50, 160); 97 return;
74 ctx.font = "18px SimHei";
75 let x = (i + 1) * (80 / (4 + 1)), y = this.randomNum(18, 28 - 5);
76 ctx.translate(x, y);
77 ctx.fillText(txt, 0, 0);
78 ctx.rotate((-0 * Math.PI) / 180);
79 ctx.translate(-x, -y);
80 },
81 randomColor (min, max) {
82 let r = this.randomNum(min, max);
83 let g = this.randomNum(min, max);
84 let b = this.randomNum(min, max);
85 return "rgb(" + r + "," + g + "," + b + ")";
86 },
87 randomNum (min, max) {
88 return Math.floor(Math.random() * (max - min) + min);
89 },
90 //记住用户名
91 checkUserName: function (flag) {
92 this.user.checkStatus = flag;
93 if (this.user.checkStatus) {
94 localStorage.setItem("accountId", this.user.account);
95 let name = localStorage.getItem("accountId");
96 if (name === "") {
97 return;
98 } else {
99 this.user.account = name;
100 }
101 } else {
102 this.user.account = localStorage.getItem("accountId");
103 }
104 },
105 login (user) {
106 var self = this
107 this.$refs[user].validate(async (valid) => {
108 if (valid) {
109 let res = await loginIn(self.user.account, self.user.password)
110 if (res.status == 1) {
111 let code = this.BASE_API.CODE;
112 localStorage.setItem("token", `Bearer ${res.content}`);
113 const { result: getMenuData } = (await getMenuInfo(code)) || [];
114 let path1 = JSON.parse(getMenuData[0].metadata)?.path + '/' + JSON.parse(getMenuData[0].children[0].metadata)?.path
115 //登录成功后需判断有无重定向，没有重定向则跳转首页
116 const accessRoutes = await this.$store.dispatch(
117 "permission/generateRoutes",
118 getMenuData
119 );
120 this.$router.addRoutes([
121 ...accessRoutes,
122 { path: "*", redirect: "/404", hidden: true },
123 ]);
124 this.$router.replace(this.$route.query.redirect || path1);
125 } else { 98 } else {
126 this.$message.error(res.message); 99 this.user.account = name;
127 } 100 }
101 } else {
102 this.user.account = localStorage.getItem("accountId");
128 } 103 }
129 }) 104 },
105 login (user) {
106 var self = this
107 this.$refs[user].validate(async (valid) => {
108 if (valid) {
109 let res = await loginIn(self.user.account, self.user.password)
110 if (res.status == 1) {
111 let code = this.BASE_API.CODE;
112 localStorage.setItem("token", `Bearer ${res.content}`);
113 const { result: getMenuData } = (await getMenuInfo(code)) || [];
114 let path1 = JSON.parse(getMenuData[0].metadata)?.path + '/' + JSON.parse(getMenuData[0].children[0].metadata)?.path
115
116 console.log(getMenuData, path1, 'path1path1path1path1path1');
117 //登录成功后需判断有无重定向，没有重定向则跳转首页
118 const accessRoutes = await this.$store.dispatch(
119 "permission/generateRoutes",
120 getMenuData
121 );
122 this.$router.addRoutes([
123 ...accessRoutes,
124 { path: "*", redirect: "/404", hidden: true },
125 ]);
126 this.$router.replace(this.$route.query.redirect || path1);
127 } else {
128 this.$message.error(res.message);
129 }
130 }
131 })
132 }
130 } 133 }
131 } 134 }
132 }
133 </script> 135 </script>
134 <style scoped lang="scss"> 136 <style scoped lang="scss">
135 .username, 137 .username,
136 .password, 138 .password,
137 .yz { 139 .yz {
138 position: relative; 140 position: relative;
139 141
140 &:before { 142 &:before {
141 content: ""; 143 content: "";
142 display: block; 144 display: block;
143 width: 16px; 145 width: 16px;
144 height: 16px; 146 height: 16px;
145 position: absolute; 147 position: absolute;
146 left: 10px; 148 left: 10px;
147 top: 7px; 149 top: 7px;
148 background-size: 100% 100%; 150 background-size: 100% 100%;
151 }
152
153 /deep/ .el-input__inner {
154 color: #000 !important;
155 text-indent: 24px;
156 }
149 } 157 }
150 158
151 /deep/ .el-input__inner { 159 .flex-container {
152 color: #000 !important; 160 position: relative;
153 text-indent: 24px; 161 display: -webkit-flex;
162 display: flex;
154 } 163 }
155 }
156 164
157 .flex-container { 165 .flex-input {
158 position: relative; 166 width: 100%;
159 display: -webkit-flex; 167 }
160 display: flex;
161 }
162 168
163 .flex-input { 169 .flex-line {
164 width: 100%; 170 position: absolute;
165 } 171 width: 1px;
172 height: 64%;
173 margin: 5px;
174 right: 36%;
175 background-color: #cccccc;
176 }
166 177
167 .flex-line { 178 .flex-img {
168 position: absolute; 179 position: absolute;
169 width: 1px; 180 margin: 2px;
170 height: 64%; 181 right: 16%;
171 margin: 5px; 182 }
172 right: 36%;
173 background-color: #CCCCCC;
174 }
175 183
176 .flex-img { 184 .flex-renovate {
177 position: absolute; 185 position: absolute;
178 margin: 2px; 186 margin: 1px;
179 right: 16%; 187 right: 3%;
180 } 188 }
181 189
182 .flex-renovate { 190 #renovate {
183 position: absolute; 191 color: #3f8fea;
184 margin: 1px; 192 font-size: 16px;
185 right: 3%; 193 font-weight: 700;
186 } 194 cursor: pointer;
195 }
187 196
188 #renovate { 197 .username::before {
189 color: #3F8FEA; 198 background-image: url(../../image/userlogo.png);
190 font-size: 16px; 199 }
191 font-weight: 700;
192 cursor: pointer;
193 }
194 200
195 .username::before { 201 .password::before {
196 background-image: url(../../image/userlogo.png); 202 background-image: url(../../image/passlogo.png);
197 } 203 }
198 204
199 .password::before { 205 .yz::before {
200 background-image: url(../../image/passlogo.png); 206 background-image: url(../../image/yzlogo.png);
201 } 207 }
202 208
203 .yz::before { 209 .bg {
204 background-image: url(../../image/yzlogo.png); 210 width: 100%;
205 } 211 height: 100%;
212 min-width: 1440px;
213 min-height: 560px;
214 background: url(../../image/loginBoxsb.png) no-repeat;
215 background-size: 100% 100%;
216 overflow: hidden;
217 position: relative;
218 }
206 219
207 .bg { 220 .title {
208 width: 100%; 221 width: 24%;
209 height: 100%; 222 height: 6%;
210 min-width: 1440px; 223 top: 20%;
211 min-height: 560px; 224 right: 38%;
212 background: url(../../image/loginBoxsb.png) no-repeat; 225 position: absolute;
213 background-size: 100% 100%;
214 overflow: hidden;
215 position: relative;
216 }
217 226
218 .title { 227 img {
219 width: 24%; 228 width: 60px;
220 height: 6%; 229 height: 60px;
221 top: 20%; 230 top: 0%;
222 right: 38%; 231 left: 2%;
223 position: absolute; 232 position: absolute;
233 }
224 234
225 img { 235 h2 {
226 width: 60px; 236 top: 25%;
227 height: 60px; 237 left: 22%;
228 top: 0%; 238 position: absolute;
229 left: 2%; 239 width: 383px;
230 position: absolute; 240 height: 42px;
241 font-size: 28px;
242 font-weight: 600;
243 color: #ffffff;
244 text-shadow: 0px 4px 4px #002c95;
245 }
231 } 246 }
232 247
233 h2 { 248 .login-inner-bg {
234 top: 25%; 249 background: white;
235 left: 22%; 250 width: 24.6%;
251 min-width: 360px;
252 top: 30%;
253 right: 38%;
236 position: absolute; 254 position: absolute;
237 width: 383px; 255 background-size: 100% 100%;
238 height: 42px; 256 box-sizing: border-box;
239 font-size: 28px; 257 padding: 56px;
240 font-weight: 600;
241 color: #ffffff;
242 text-shadow: 0px 4px 4px #002c95;
243 } 258 }
244 }
245 259
246 .login-inner-bg { 260 .login {
247 background: white; 261 .user_style {
248 width: 24.6%; 262 h3 {
249 min-width: 360px; 263 font-weight: normal;
250 top: 30%; 264 text-align: center;
251 right: 38%; 265 margin: -10px auto 28px;
252 position: absolute; 266 font-weight: 400;
253 background-size: 100% 100%; 267 width: 125px;
254 box-sizing: border-box; 268 height: 29px;
255 padding: 56px; 269 font-size: 20px;
256 } 270 font-family: Source Han Sans CN;
271 font-weight: 400;
272 color: #333333;
273 }
274 }
257 275
258 .login { 276 .btn {
259 .user_style { 277 width: 100%;
260 h3 { 278 height: 6vh;
261 font-weight: normal; 279 background-color: #00c2de;
262 text-align: center; 280 border-radius: 5px;
263 margin: -10px auto 28px; 281 font-size: 1.4vw;
264 font-weight: 400; 282 color: #000;
265 width: 125px;
266 height: 29px;
267 font-size: 20px;
268 font-family: Source Han Sans CN;
269 font-weight: 400;
270 color: #333333;
271 } 283 }
272 }
273 284
274 .btn { 285 .btn:hover {
275 width: 100%; 286 cursor: pointer;
276 height: 6vh; 287 background-color: #2d8cf0;
277 background-color: #00c2de; 288 }
278 border-radius: 5px;
279 font-size: 1.4vw;
280 color: #000;
281 } 289 }
282 290
283 .btn:hover { 291 .login #loginform {
284 cursor: pointer; 292 .el-form-item {
285 background-color: #2d8cf0; 293 margin-bottom: 24px !important;
286 } 294 }
287 }
288 295
289 .login #loginform { 296 .login-btn {
290 .el-form-item { 297 margin-top: 30px !important;
291 margin-bottom: 24px !important; 298 }
292 }
293 299
294 .login-btn { 300 .el-button {
295 margin-top: 30px !important; 301 font-size: 18px;
296 } 302 border-radius: 0;
303 background: #4162d8 !important;
304 color: #ffffff !important;
305 cursor: pointer !important;
306 }
297 307
298 .el-button { 308 .el-input__inner {
299 font-size: 18px; 309 width: 100% !important;
300 border-radius: 0; 310 }
301 background: #4162d8 !important;
302 color: #ffffff !important;
303 cursor: pointer !important;
304 }
305 311
306 .el-input__inner { 312 .el-checkbox__label {
307 width: 100% !important; 313 color: #fff;
314 }
308 } 315 }
309 316
310 .el-checkbox__label { 317 .inputUser .ivu-input {
311 color: #fff; 318 padding: 6px 24px !important;
319 border: 1px solid #9f9f9f !important;
312 } 320 }
313 }
314
315 .inputUser .ivu-input {
316 padding: 6px 24px !important;
317 border: 1px solid #9f9f9f !important;
318 }
319 </style> 321 </style>
......