From b68edf1ec5867dd2bd60ee64a205879093b5cf4f Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期二, 30 七月 2024 17:47:07 +0800
Subject: [PATCH] 1、调整登录页及首页样式（暂未使用响应式布局，背景图片需压缩，页面加载慢） 2、新增大模型对话页面 3、新增菜单管理使用自定义icon功能 4、调整全局项目名称和LOGO（除浏览器页签logo，暂无黑底logo的底图）
---
src/views/user/Login.vue | 232 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 135 insertions(+), 97 deletions(-)
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 3f6401a..57f6cff 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>
+ <a-form-model-item style="margin-bottom: 5px">
+ <!--<a-checkbox @change="handleRememberMeChange" default-checked>鑷姩鐧诲綍</a-checkbox>-->
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
蹇樿瀵嗙爜
</router-link>
- <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
+ <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px">
娉ㄥ唽璐︽埛
</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,86 @@
</script>
<style lang="less" scoped>
.user-layout-login {
- label {
- font-size: 14px;
- }
- .getCaptcha {
- display: block;
- width: 100%;
- height: 40px;
+
+ .logo {
+ text-align: center;
+ a {
+ text-decoration: none;
+ img {
+ height: 80px;
+ }
+ }
}
- .forge-password {
+ .forge-password {
font-size: 14px;
+ color: #fff;
+
}
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: 30px 0 40px;
+ }
+
+ /deep/ .ant-tabs-nav .ant-tabs-tab {
+ color: #fff;
+ font-size: 19px;
+ font-weight: bold;
+ }
+
+ /deep/ .ant-tabs-ink-bar {
+ background-color: #fff;
+ height: 3px;
+ }
+
+ /deep/ .login-input {
+ border-radius: 43px;
+ background-color: rgba(255, 255, 255, .3);
+ padding-left: 20px;
+ display: flex;
+ align-items: center
+ }
+
+ /deep/ .ant-input {
+ border: none;
+ height: 55px;
+ background-color: transparent !important;
+ color: #fff;
+ font-size: 17.9px;
+ letter-spacing: 1px;
+
+ /*鑾峰彇鐒︾偣*/
+ &:focus {
+ border: none;
+ box-shadow: none;
+ }
+
+ /*鑷姩濉厖*/
+ &:-webkit-autofill{
+ -webkit-text-fill-color: #fff !important;
+ color: #fff;
+ transition: background-color 5000s ease-in-out 0s;
+ }
+
+ /*鎻愮ず鏍�*/
+ &::placeholder {
+ color: #fff; /* 璁剧疆鍗犱綅绗︽枃鏈殑棰滆壊 */
+ font-size: 16px; /* 璁剧疆鍗犱綅绗︽枃鏈殑瀛椾綋澶у皬 */
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3