feat(project): 添加 AppSign 组件
- 实现了一个新的登录页面组件，包含左侧背景和右侧登录表单 - 集成了 logo、系统名称、描述等动态内容 - 添加了微信扫码登录功能 - 优化了响应式布局，适配不同屏幕尺寸
This commit is contained in:
aixianling
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