From 15792ad8baea4ab886dbfc58009847f26de45df8 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 02 八月 2024 17:55:19 +0800
Subject: [PATCH] 1、利用viewport完成PC端页面响应式布局，其他端还未适配 2、基本完成语言大模型页面布局及部分功能 3、实现对于侧边栏图标在首页与其他页面时不同的展示风格 4、使用压缩后的背景图与首页gif（效果不好，跳转路由后仍会出现短暂背景图片未加载出情况） 5、修改项目浏览器页签图标
---
src/views/user/Login.vue | 273 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 175 insertions(+), 98 deletions(-)
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 3f6401a..17813c4 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -1,86 +1,93 @@
<template>
<div class="main">
<a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
- <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick">
+ <div class="logo">
+ <a href="/">
+ <img src="~@/assets/logo.png" alt="logo">
+ </a>
+ </div>
+
+ <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
+ @change="handleTabClick">
<a-tab-pane key="tab1" tab="璐﹀彿瀵嗙爜鐧诲綍">
- <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
+ <login-account ref="alogin" @validateFail="validateFail" @success="loginSuccess"
+ @fail="requestFailed"></login-account>
</a-tab-pane>
<a-tab-pane key="tab2" tab="鎵嬫満鍙风櫥褰�">
- <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
+ <login-phone ref="plogin" @validateFail="validateFail" @success="loginSuccess"
+ @fail="requestFailed"></login-phone>
</a-tab-pane>
</a-tabs>
- <a-form-model-item>
- <a-checkbox @change="handleRememberMeChange" default-checked>鑷姩鐧诲綍</a-checkbox>
- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
+ <a-form-model-item class="forget-and-register">
+ <!--<a-checkbox @change="handleRememberMeChange" default-checked>鑷姩鐧诲綍</a-checkbox>-->
+ <router-link :to="{ name: 'alteration'}" class="forget-password">
蹇樿瀵嗙爜
</router-link>
- <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
+ <router-link :to="{ name: 'register'}" class="register">
娉ㄥ唽璐︽埛
</router-link>
</a-form-model-item>
- <a-form-item style="margin-top:24px">
- <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">纭畾
+ <a-form-model-item>
+ <a-button size="large" htmlType="submit" class="login-button" :loading="loginBtn"
+ @click.stop.prevent="handleSubmit" :disabled="loginBtn" >鐧� 褰�
</a-button>
- </a-form-item>
+ </a-form-model-item>
</a-form-model>
- <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
- <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
- <third-login ref="thirdLogin"></third-login>
+ <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess"
+ @cancel="stepCaptchaCancel"></two-step-captcha>
+ <!--<third-login ref="thirdLogin"></third-login>-->
</div>
</template>
<script>
-import Vue from 'vue'
-import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
-import ThirdLogin from './third/ThirdLogin'
-import LoginSelectTenant from './LoginSelectTenant'
-import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
-import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
-import { timeFix } from '@/utils/util'
+ import Vue from 'vue'
+ import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
+ import ThirdLogin from './third/ThirdLogin'
+ import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
+ import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
+ import { timeFix } from '@/utils/util'
+ import LoginAccount from './LoginAccount'
+ import LoginPhone from './LoginPhone'
-import LoginAccount from './LoginAccount'
-import LoginPhone from './LoginPhone'
-
-export default {
+ export default {
components: {
- LoginSelectTenant,
TwoStepCaptcha,
ThirdLogin,
LoginAccount,
LoginPhone
},
- data () {
+ data() {
return {
customActiveKey: 'tab1',
rememberMe: true,
loginBtn: false,
requiredTwoStepCaptcha: false,
stepCaptchaVisible: false,
- encryptedString:{
- key:"",
- iv:"",
- },
+ encryptedString: {
+ key: '',
+ iv: ''
+ }
}
},
created() {
Vue.ls.remove(ACCESS_TOKEN)
- this.getRouterData();
+ this.getRouterData()
this.rememberMe = true
},
- methods:{
- handleTabClick(key){
+ methods: {
+ handleTabClick(key) {
this.customActiveKey = key
},
- handleRememberMeChange(e){
+ handleRememberMeChange(e) {
this.rememberMe = e.target.checked
},
/**璺宠浆鍒扮櫥褰曢〉闈㈢殑鍙傛暟-璐﹀彿鑾峰彇*/
- getRouterData(){
+ getRouterData() {
this.$nextTick(() => {
let temp = this.$route.params.username || this.$route.query.username || ''
if (temp) {
@@ -90,8 +97,8 @@
},
//鐧诲綍
- handleSubmit () {
- this.loginBtn = true;
+ handleSubmit() {
+ this.loginBtn = true
if (this.customActiveKey === 'tab1') {
// 浣跨敤璐︽埛瀵嗙爜鐧诲綍
this.$refs.alogin.handleLogin(this.rememberMe)
@@ -101,59 +108,56 @@
}
},
// 鏍￠獙澶辫触
- validateFail(){
- this.loginBtn = false;
+ validateFail() {
+ this.loginBtn = false
},
// 鐧诲綍鍚庡彴鎴愬姛
- requestSuccess(loginResult){
+ requestSuccess(loginResult) {
this.$refs.loginSelect.show(loginResult)
},
//鐧诲綍鍚庡彴澶辫触
- requestFailed (err) {
- let description = ((err.response || {}).data || {}).message || err.message || "璇锋眰鍑虹幇閿欒锛岃绋嶅悗鍐嶈瘯"
- this.$notification[ 'error' ]({
+ requestFailed(err) {
+ let description = ((err.response || {}).data || {}).message || err.message || '璇锋眰鍑虹幇閿欒锛岃绋嶅悗鍐嶈瘯'
+ this.$notification['error']({
message: '鐧诲綍澶辫触',
description: description,
- duration: 4,
- });
+ duration: 4
+ })
//璐︽埛瀵嗙爜鐧诲綍閿欒鍚庢洿鏂伴獙璇佺爜
- if(this.customActiveKey === 'tab1' && description.indexOf('瀵嗙爜閿欒')>0){
+ if (this.customActiveKey === 'tab1' && description.indexOf('瀵嗙爜閿欒') > 0) {
this.$refs.alogin.handleChangeCheckCode()
}
- this.loginBtn = false;
- },
- loginSelectOk(){
- this.loginSuccess()
+ this.loginBtn = false
},
//鐧诲綍鎴愬姛
- loginSuccess () {
- this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
+ loginSuccess() {
+ this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
console.log('鐧诲綍璺宠浆棣栭〉鍑洪敊,杩欎釜閿欒浠庡摢閲屾潵鐨�')
})
this.$notification.success({
message: '娆㈣繋',
- description: `${timeFix()}锛屾杩庡洖鏉,
- });
+ description: `${timeFix()}锛屾杩庡洖鏉
+ })
},
- stepCaptchaSuccess () {
+ stepCaptchaSuccess() {
this.loginSuccess()
},
- stepCaptchaCancel () {
+ stepCaptchaCancel() {
this.Logout().then(() => {
this.loginBtn = false
this.stepCaptchaVisible = false
})
},
//鑾峰彇瀵嗙爜鍔犲瘑瑙勫垯
- getEncrypte(){
- var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
- if(encryptedString == null){
+ getEncrypte() {
+ var encryptedString = Vue.ls.get(ENCRYPTED_STRING)
+ if (encryptedString == null) {
getEncryptedString().then((data) => {
this.encryptedString = data
- });
- }else{
- this.encryptedString = encryptedString;
+ })
+ } else {
+ this.encryptedString = encryptedString
}
}
@@ -163,52 +167,125 @@
</script>
<style lang="less" scoped>
.user-layout-login {
- label {
- font-size: 14px;
- }
- .getCaptcha {
- display: block;
- width: 100%;
- height: 40px;
+ .logo {
+ text-align: center;
+ img {
+ height: 80px;
+ }
}
- .forge-password {
+ /deep/ .ant-form-explain {
font-size: 14px;
+ margin-bottom: -1px;
+ margin-top: -2px;
+ min-height: 22px;
+ }
+
+ .forget-and-register {
+ margin-bottom: 5px;
+ font-size: 14px;
+
+ .forget-password {
+ color: #fff;
+ float: right;
+ }
+
+ .register {
+ float: right;
+ color: #fff;
+ margin-right: 10px;
+ }
}
button.login-button {
- padding: 0 15px;
- font-size: 16px;
- height: 40px;
+ font-size: 24.7px;
+ color: #fff;
+ height: 55px;
width: 100%;
+ border-radius: 43px;
+ background-color: #80B9D7;
+ border: none;
+ font-weight: bold;
}
- .user-login-other {
- text-align: left;
- margin-top: 24px;
- line-height: 22px;
-
- .item-icon {
- font-size: 24px;
- color: rgba(0,0,0,.2);
- margin-left: 16px;
- vertical-align: middle;
- cursor: pointer;
- transition: color .3s;
-
- &:hover {
- color: #1890ff;
- }
- }
-
- .register {
- float: right;
- }
- }
}
</style>
-<style>
- .valid-error .ant-select-selection__placeholder{
- color: #f5222d;
+
+<style scoped lang="less">
+ /deep/ .ant-tabs-bar {
+ margin: 20px 0 20px;
+ }
+
+ /deep/ .ant-tabs-nav .ant-tabs-tab {
+ color: rgba(255, 255, 255, .5);
+ font-size: 19px;
+ font-weight: bold;
+ margin: 0 32px 0 0;
+ padding: 12px 16px;
+
+ &.ant-tabs-tab-active {
+ color: #fff;
+ }
+ }
+
+ /deep/ .ant-tabs-ink-bar {
+ width: 0 !important;
+ }
+
+ /deep/ .ant-form-item {
+ margin-bottom: 24px;
+
+ &.ant-form-item-with-help {
+ margin-bottom: 5px;
+ }
+ .ant-form-item-control {
+ line-height: 40px;
+ }
+ }
+
+ /deep/ .login-input {
+ border-radius: 43px;
+ background-color: rgba(255, 255, 255, .3);
+ padding-left: 20px;
+ display: flex;
+ align-items: center;
+
+ img {
+ margin-right: 10px;
+ height: 25px
+ }
+ }
+
+ /deep/ .ant-input,input {
+ border: none;
+ height: 55px;
+ background-color: transparent !important;
+ color: #fff;
+ font-size: 17.9px;
+ letter-spacing: 1px;
+ padding: 6px 11px;
+
+ /*鑾峰彇鐒︾偣*/
+ &:focus {
+ border: none;
+ box-shadow: none;
+ }
+
+ /*鑷姩濉厖*/
+ &:-webkit-autofill,
+ :-webkit-autofill:hover,
+ :-webkit-autofill:focus,
+ :-webkit-autofill:active{
+ -webkit-text-fill-color: #fff !important;
+ color: #fff;
+ transition: background-color 1000s ease-in-out 0.5s;
+ background-image: none;
+ }
+
+ /*鎻愮ず鏍�*/
+ &::placeholder {
+ color: #fff; /* 璁剧疆鍗犱綅绗︽枃鏈殑棰滆壊 */
+ font-size: 16px; /* 璁剧疆鍗犱綅绗︽枃鏈殑瀛椾綋澶у皬 */
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3