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