<template>
|
<div class="box">
|
<div class="loginBox">
|
<div class="LeftDiv">
|
<!-- <div class="titleGuoDiv"></div>-->
|
<div class="gifDiv1"></div>
|
<div class="gifDiv2"></div>
|
<!-- <div class="earthTitleDiv"></div>-->
|
<div class="earthlftLightDiv"></div>
|
<div class="LightTopDiv"></div>
|
<div class="LightBtmDiv"></div>
|
<div class="trackDiv"></div>
|
</div>
|
<div class="rightDiv">
|
<div class="login-card">
|
<div class="form-titleDiv">
|
<div>产业数字化资源能力平台</div>
|
<div>CHAN YE SHU ZI HUA ZI YUAN NENG LI PING TAI</div>
|
</div>
|
<el-form
|
class="login-form"
|
ref="loginForm"
|
:model="state.userInfo"
|
:rules="state.rules"
|
label-width="120px"
|
>
|
<el-form-item class="loginform-item" label="" prop="username">
|
<el-input
|
class="item-input"
|
v-model="state.userInfo.username"
|
:prefix-icon="User"
|
placeholder="请输入账户或手机号码"
|
clearable
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item class="loginform-item" label="" prop="password">
|
<el-input
|
class="item-input"
|
v-model="state.userInfo.password"
|
type="password"
|
:prefix-icon="Lock"
|
placeholder="请输入登录密码"
|
show-password
|
clearable
|
/>
|
</el-form-item>
|
<!-- <el-form-item class="form-item" label="用户名" prop="username">
|
<el-input v-model="state.userInfo.username" placeholder="请输入用户名" clearable />
|
</el-form-item>
|
<el-form-item class="form-item" label="密码" prop="password">
|
<el-input v-model="state.userInfo.password" type="password" show-password placeholder="请输入密码" clearable />
|
</el-form-item> -->
|
<!-- <el-form-item class="loginform-item">
|
<el-checkbox v-model="state.checked" label="记住我" size="large" />
|
</el-form-item> -->
|
<el-form-item class="loginform-item">
|
<el-button
|
class="submit-button"
|
round
|
type="primary"
|
@click="onSubmit(loginForm)"
|
>登录</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- <div class="sealTitDiv"></div>-->
|
</div>
|
</div>
|
|
<div class="fontDiv">中国交通建设集团有限公司 版权所有</div>
|
</div>
|
<!-- <div class="login">-->
|
<!-- <div class="login-left">-->
|
<!-- <div class="left-title">-->
|
<!-- <div class="left-title-logo">-->
|
<!-- <img class="logo-img" :src="logoUrl" />-->
|
<!-- <img class="left-img" :src="leftImgUrl" />-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="login-card">-->
|
<!-- <h3 class="form-title">金邹智能工厂</h3>-->
|
<!-- <el-form class="login-form" ref="loginForm" :model="state.userInfo" :rules="state.rules" label-width="120px">-->
|
<!-- <el-form-item class="loginform-item" label="" prop="username">-->
|
<!-- <el-input class="item-input" v-model="state.userInfo.username" :prefix-icon="User" placeholder="请输入账户或手机号码"-->
|
<!-- clearable>-->
|
<!-- </el-input>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item class="loginform-item" label="" prop="password">-->
|
<!-- <el-input class="item-input" v-model="state.userInfo.password" type="password" :prefix-icon="Lock"-->
|
<!-- placeholder="请输入登录密码" show-password clearable />-->
|
<!-- </el-form-item>-->
|
<!-- <!– <el-form-item class="form-item" label="用户名" prop="username">-->
|
<!-- <el-input v-model="state.userInfo.username" placeholder="请输入用户名" clearable />-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item class="form-item" label="密码" prop="password">-->
|
<!-- <el-input v-model="state.userInfo.password" type="password" show-password placeholder="请输入密码" clearable />-->
|
<!-- </el-form-item> –>-->
|
<!-- <!– <el-form-item class="loginform-item">-->
|
<!-- <el-checkbox v-model="state.checked" label="记住我" size="large" />-->
|
<!-- </el-form-item> –>-->
|
<!-- <el-form-item class="loginform-item">-->
|
<!-- <el-button class="submit-button" round type="primary" @click="onSubmit(loginForm)">登录</el-button>-->
|
<!-- </el-form-item>-->
|
<!-- </el-form>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</template>
|
<script lang="ts" setup>
|
import { reactive, ref, toRefs, onMounted } from 'vue'
|
import { login } from '@/api/login'
|
import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
import router from '@/router'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import { getAssetsImages } from '@/utils/common'
|
import { User, Lock } from '@element-plus/icons-vue'
|
|
// 自定义用户登录各个字段值类型
|
interface userInfoType {
|
username: string
|
password: string
|
}
|
|
interface State {
|
title: string
|
formSize: string
|
checked: boolean
|
userInfo: userInfoType
|
rules: FormRules
|
}
|
|
const logoUrl = getAssetsImages('login/login-logo.png') // logo地址
|
const leftImgUrl = getAssetsImages('login/login-ele01.png') // logo地址
|
|
// export default {
|
// name: 'Login',
|
// setup() {
|
const userStore = useUserInfo()
|
// 登录表单的ref
|
const loginForm = ref<FormInstance>()
|
// 页面中的用到的变量内容
|
const state = reactive<State>({
|
title: '产业数字化资源能力平台',
|
formSize: 'default',
|
checked: false,
|
userInfo: {
|
username: '',
|
password: '',
|
},
|
rules: {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
},
|
})
|
|
// 定义方法对象，所有的方法都写在此对象中，最后统一return出setup
|
// const methods = {
|
// 表单登录方法
|
const onSubmit = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate((valid) => {
|
if (valid) {
|
// 正常登录接口调用
|
login(state.userInfo).then((res: any) => {
|
if (res.code == 200) {
|
localStorage.setItem('lastRecordTime', new Date().getTime().toString())
|
// 将缓存进行缓存或者状态管理器中
|
userStore.removeMenuList()
|
userStore.updateUserInfo(res.data)
|
router.push({ path: '/' })
|
}
|
}).catch((error) => {
|
console.error('登录失败:', error)
|
ElMessage.error('登录失败，请检查用户名和密码')
|
})
|
} else {
|
console.log('表单提交失败')
|
}
|
})
|
}
|
onMounted(()=>{
|
})
|
</script>
|
<style scoped lang="scss">
|
.box {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.loginBox {
|
width: 100vw;
|
height: 97vh;
|
background-image: url('@/assets/images/login/login-bg2.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
display: flex;
|
flex-direction: row;
|
|
.LeftDiv {
|
//width: 68vw;
|
height: 97vh;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
position: relative;
|
left: 4vw;
|
|
.LightTopDiv2 {
|
width: 15vw;
|
height: 18vh;
|
background-image: url('@/assets/images/login/lighttop.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 0vh;
|
left: 30vw;
|
}
|
|
.titleGuoDiv {
|
width: 22.9vw;
|
height: 3.7vh;
|
background-image: url('@/assets/images/login/logoguozhuan.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 6.5vh;
|
left: 0vw;
|
}
|
|
.earthlftLightDiv {
|
width: 25vw;
|
height: 45vh;
|
background-image: url('@/assets/images/login/lightback.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
//opacity: 0.8;
|
position: absolute;
|
top: 7vh;
|
left: 4vw;
|
z-index: 100;
|
}
|
|
.LightTopDiv {
|
width: 35vw;
|
height: 32vh;
|
background-image: url('@/assets/images/login/lighttop.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
opacity: 0.5;
|
position: absolute;
|
top: -1vh;
|
left: 8vw;
|
//background-color: pink;
|
z-index: 90;
|
}
|
|
.LightBtmDiv {
|
width: 30vw;
|
height: 35vh;
|
background-image: url('@/assets/images/login/lightbtm.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
opacity: 0.5;
|
position: absolute;
|
bottom: 3vh;
|
left: 11vw;
|
//background-color: pink;
|
z-index: 90;
|
}
|
|
.trackDiv {
|
width: 82vw;
|
height: 99.8vh;
|
background-image: url('@/assets/images/login/trackback2.gif');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
left: 3.36vw;
|
top: 0.2vh;
|
z-index: 98;
|
}
|
|
.gifDiv1 {
|
width: 83.5vw;
|
height: 93.5vh;
|
background-image: url('@/assets/images/login/gifbacktop.gif');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 4.5vh;
|
left: 3vw;
|
z-index: 98;
|
}
|
|
.gifDiv2 {
|
width: 83vw;
|
height: 95vh;
|
background-image: url('@/assets/images/login/gifbackbtm.gif');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
opacity: 0.2;
|
position: absolute;
|
top: 4.9vh;
|
left: 3vw;
|
}
|
|
.earthTitleDiv {
|
width: 42.5vw;
|
height: 22vh;
|
background-image: url('@/assets/images/login/xingongli.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 42vh;
|
left: 4vw;
|
z-index: 100;
|
}
|
}
|
|
.rightDiv {
|
//width: 32vw;
|
height: 97vh;
|
position: relative;
|
left: 61.5vw;
|
z-index: 130;
|
|
.login-card {
|
width: 26vw;
|
//height: 65vh;
|
padding: 0px 0px 50px 0px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
text-align: left;
|
position: absolute;
|
top: 25vh;
|
|
.form-titleDiv {
|
width: 41vw;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-bottom: 3vh;
|
|
div:nth-child(1) {
|
font-size: 40px;
|
text-align: center;
|
color: #fff;
|
font-weight: 600;
|
letter-spacing: 10px;
|
}
|
|
div:nth-child(2) {
|
font-size: 21px;
|
text-align: center;
|
color: #bbbbd4;
|
font-weight: 350;
|
letter-spacing: 3px;
|
}
|
}
|
|
.form-title {
|
width: 17vw;
|
height: 8vh;
|
margin-bottom: 30px;
|
font-size: 42px;
|
text-align: center;
|
color: #fff;
|
font-weight: 500;
|
letter-spacing: 10px;
|
}
|
|
.login-form {
|
margin-bottom: 20px;
|
|
.loginform-item {
|
display: flex;
|
flex-direction: column;
|
margin-left: -100px;
|
margin-bottom: 40px;
|
}
|
|
.color-lump {
|
margin: auto 10px auto 0;
|
width: 11px;
|
height: 46px;
|
background: #5372e7;
|
border-radius: 6px;
|
}
|
|
.form-item-title {
|
width: 100%;
|
display: flex;
|
justify-content: flex-start;
|
margin-bottom: 12px;
|
font-size: 24px;
|
color: #d5d6de;
|
}
|
|
.title-img {
|
width: 30px;
|
height: 30px;
|
margin: auto 10px auto 0;
|
display: flex;
|
}
|
|
span {
|
margin: auto 0;
|
}
|
|
.item-input {
|
width: 475px;
|
height: 50px;
|
margin: auto 0;
|
//background: #121832;
|
border-bottom: 2px solid #00a0e9 !important;
|
//border-radius: 6px;
|
font-size: 20px;
|
}
|
|
:deep(.el-form-item__error) {
|
font-size: 18px;
|
padding-top: 10px;
|
}
|
|
:deep(.el-input__wrapper) {
|
background-color: rgba(18, 60, 149, 0);
|
border: none !important;
|
box-shadow: none;
|
}
|
|
:deep(.el-input__inner::placeholder) {
|
color: #bac0d6;
|
}
|
|
:deep(.el-input__inner) {
|
font-size: 16px;
|
font-weight: 500;
|
color: #fff;
|
}
|
}
|
|
.submit-button {
|
width: 10vw;
|
height: 5vh;
|
background: #006fff;
|
border-radius: 4px;
|
font-size: 24px;
|
color: #fff;
|
font-weight: 500;
|
letter-spacing: 18px;
|
padding-left: 1.8vw;
|
margin-top: 1vh;
|
margin-left: 150px;
|
border: none;
|
}
|
}
|
|
.sealTitDiv {
|
width: 21.25vw;
|
height: 10.6vh;
|
background-image: url('@/assets/images/login/loginjiyi.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 85vh;
|
left: 15.5vw;
|
}
|
}
|
}
|
|
.fontDiv {
|
width: 100vw;
|
height: 3vh;
|
background-color: #a8a8ab;
|
font-size: 0.7vw;
|
line-height: 3vh;
|
text-align: center;
|
}
|
</style>
|
