feat(project): 添加 AppSign 组件
- 实现了一个新的登录页面组件,包含左侧背景和右侧登录表单 - 集成了 logo、系统名称、描述等动态内容 - 添加了微信扫码登录功能 - 优化了响应式布局,适配不同屏幕尺寸
This commit is contained in:
		
							
								
								
									
										155
									
								
								project/xumu/sign/AppSign.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										155
									
								
								project/xumu/sign/AppSign.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,155 @@ | ||||
| <template> | ||||
|   <section class="AppSign"> | ||||
|     <div class="left signLeftBg"> | ||||
|       <el-row type="flex" align="middle"> | ||||
|         <img class="AiIcon" v-if="/[\\\/]/.test(logo.icon)" :src="logo.icon" alt="" /> | ||||
|         <ai-icon v-else type="logo" :icon="logo.icon" /> | ||||
|         <div v-if="logo.text" class="logoText mar-l8" v-text="logo.text" /> | ||||
|       </el-row> | ||||
|       <div class="signLeftContent"> | ||||
|         <div class="titlePane"> | ||||
|           <b v-text="system.name" /> | ||||
|           <div v-text="system.title" /> | ||||
|         </div> | ||||
|         <div class="subTitle" v-for="(t, i) in subTitles" :key="i" v-html="t" /> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="right"> | ||||
|       <div class="projectName mar-b48" :title="system.fullTitle">{{ system.fullTitle }}</div> | ||||
|       <ai-sign isSignIn @login="login" :instance="instance" visible | ||||
|         :showScanLogin="system.edition == 'standard' || !system.edition" /> | ||||
|       <el-row type="flex" align="middle" class="bottomRecord"> | ||||
|         <div v-if="system.recordDesc" v-text="system.recordDesc" /> | ||||
|         <el-link v-if="system.recordNo" v-text="system.recordNo" :href="system.recordURL" /> | ||||
|         <div v-if="system.ssl" v-html="system.ssl" /> | ||||
|       </el-row> | ||||
|     </div> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { mapMutations, mapState } from 'vuex' | ||||
|  | ||||
| export default { | ||||
|   name: "AppSign", | ||||
|   computed: { | ||||
|     ...mapState(['user', 'sys']), | ||||
|     instance: v => v.$request, | ||||
|     system: v => v.sys?.info || { | ||||
|       fullTitle: '武汉中卫慧通科技有限公司' | ||||
|     }, | ||||
|     subTitles() { | ||||
|       let list = [ | ||||
|         "构建全域数字大脑,助力政府科学决策", | ||||
|         "全域统一应用入口,移动办公高效协同", | ||||
|         "直接触达居民微信,政民互动“零距离”" | ||||
|       ] | ||||
|       return (typeof this.system.desc == "object" ? this.system.desc : JSON.parse(this.system.desc || null)) || list | ||||
|     }, | ||||
|     logo: v => !!v.system.loginLogo ? { icon: v.system.loginLogo, text: v.system.loginLogoText } : { icon: v.system.logo, text: v.system.logoText }, | ||||
|     isDev: () => process.env.NODE_ENV == "development", | ||||
|     isAdmin: v => v.$route.hash == "#sinoecare" //用来判断是否是管理员登录 | ||||
|   }, | ||||
|   created() { | ||||
|     if (this.user.token) { | ||||
|       this.handleGotoHome() | ||||
|     } else { | ||||
|       const { code } = this.$route.query | ||||
|       if (code) { | ||||
|         this.toLogin(code) | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     ...mapMutations(['setToken']), | ||||
|     login(data) { | ||||
|       if (data?.access_token) { | ||||
|         this.setToken([data.token_type, data.access_token].join(" ")) | ||||
|         this.handleGotoHome() | ||||
|       } | ||||
|     }, | ||||
|     handleGotoHome() { | ||||
|       this.$message.success("登录成功!") | ||||
|       if (this.$route.hash == "#dv") { | ||||
|         this.$router.push({ name: "数据大屏入口", hash: "#dv" }) | ||||
|       } else { | ||||
|         this.$router.push({ name: "Home" }) | ||||
|       } | ||||
|     }, | ||||
|     toLogin(code) { | ||||
|       this.instance.post(`/auth/wechatcp-qr/token`, { | ||||
|         code: code, | ||||
|         type: 'cpuser' | ||||
|       }, { | ||||
|         auth: { | ||||
|           username: 'villcloud', | ||||
|           password: "villcloud" | ||||
|         }, | ||||
|         params: { | ||||
|           grant_type: 'password', | ||||
|           scope: 'server' | ||||
|         } | ||||
|       }).then(this.login) | ||||
|     }, | ||||
|   }, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AppSign { | ||||
|   display: flex; | ||||
|   box-sizing: border-box; | ||||
|   height: 100%; | ||||
|  | ||||
|   .AiIcon { | ||||
|     font-size: 40px; | ||||
|     height: 40px; | ||||
|   } | ||||
|  | ||||
|   .logoText { | ||||
|     font-size: 20px; | ||||
|   } | ||||
|  | ||||
|   :deep(.left) { | ||||
|     width: 480px; | ||||
|     flex-shrink: 0; | ||||
|     background-size: 100% 100%; | ||||
|     background-repeat: no-repeat; | ||||
|     padding-left: 64px; | ||||
|     padding-top: 40px; | ||||
|     box-sizing: border-box; | ||||
|     color: #fff; | ||||
|     font-size: 16px; | ||||
|  | ||||
|     .iconcunwei1 { | ||||
|       font-size: 36px; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   :deep(.right) { | ||||
|     flex: 1; | ||||
|     min-width: 0; | ||||
|     background-color: #F6F8FB; | ||||
|     background-image: url("../assets/loginRightTop.png"), url("../assets/loginRightBottom.png"); | ||||
|     background-repeat: no-repeat; | ||||
|     background-position: calc(100% - 80px) 0, calc(100% - 40px) 100%; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     align-items: center; | ||||
|     justify-content: center; | ||||
|  | ||||
|     .bottomRecord { | ||||
|       font-size: 12px; | ||||
|       color: #999; | ||||
|       gap: 16px; | ||||
|       position: fixed; | ||||
|       bottom: 20px; | ||||
|  | ||||
|       .el-link { | ||||
|         font-size: inherit; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user