feat: 页面风格优化
This commit is contained in:
old burden
parent
21dfc72068
commit
162e57e80d
|
|
@ -14,57 +14,64 @@
|
||||||
value="icon-close"
|
value="icon-close"
|
||||||
@click="cancel" />
|
@click="cancel" />
|
||||||
</div>
|
</div>
|
||||||
<div class="login-title">
|
<div class="login-card">
|
||||||
{{ $t('common.loginAccount') }}
|
<header class="login-header">
|
||||||
<!-- <div class="login-title-lang">
|
<h2 class="login-title">
|
||||||
<div
|
{{ $t('common.loginAccount') }}
|
||||||
:class="`login-title-lang-item ${
|
</h2>
|
||||||
lang == 'zh_HK' ? 'active' : ''
|
<p class="login-desc">
|
||||||
}`"
|
{{ $t('common.loginSubtitle') }}
|
||||||
@click="changeLang('zh_HK')">
|
</p>
|
||||||
繁中
|
</header>
|
||||||
</div>
|
|
||||||
<div class="login-title-lang-divider"></div>
|
|
||||||
<div
|
|
||||||
:class="`login-title-lang-item ${
|
|
||||||
lang == 'en_US' ? 'active' : ''
|
|
||||||
}`"
|
|
||||||
@click="changeLang('en_US')">
|
|
||||||
English
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<mf-input
|
|
||||||
v-model="username"
|
|
||||||
class="login-input"
|
|
||||||
:placeholder="`${$t('common.userEmailPlaceholder')}`" />
|
|
||||||
<mf-input
|
|
||||||
v-model="password"
|
|
||||||
class="login-input"
|
|
||||||
inputType="password"
|
|
||||||
:placeholder="`${$t('common.passwordPlaceholder')}`" />
|
|
||||||
|
|
||||||
<div class="login-link">
|
<div class="login-field">
|
||||||
<mf-button
|
<label class="login-label" for="login-field-username">
|
||||||
class="grey"
|
{{ $t('common.loginLabelAccount') }}
|
||||||
type="text"
|
</label>
|
||||||
@click="showForgot">
|
<mf-input
|
||||||
{{ $t('common.forgotPassword') }}？
|
id="login-field-username"
|
||||||
</mf-button>
|
v-model="username"
|
||||||
</div>
|
class="login-input"
|
||||||
<div class="login-submit">
|
:placeholder="$t('common.userEmailPlaceholder')" />
|
||||||
<mf-button
|
</div>
|
||||||
size="large"
|
<div class="login-field">
|
||||||
@click="showRegister">
|
<label class="login-label" for="login-field-password">
|
||||||
{{ $t('common.register') }}
|
{{ $t('common.loginLabelPassword') }}
|
||||||
</mf-button>
|
</label>
|
||||||
<mf-button
|
<mf-input
|
||||||
size="large"
|
id="login-field-password"
|
||||||
type="primary"
|
v-model="password"
|
||||||
@click="login"
|
class="login-input"
|
||||||
:loading="loading">
|
inputType="password"
|
||||||
{{ $t('common.login') }}
|
:placeholder="$t('common.passwordPlaceholder')" />
|
||||||
</mf-button>
|
</div>
|
||||||
|
|
||||||
|
<div class="login-link">
|
||||||
|
<mf-button
|
||||||
|
class="login-link-btn"
|
||||||
|
type="text"
|
||||||
|
@click="showForgot">
|
||||||
|
{{ $t('common.forgotPassword') }}？
|
||||||
|
</mf-button>
|
||||||
|
</div>
|
||||||
|
<div class="login-submit">
|
||||||
|
<mf-button
|
||||||
|
class="login-btn-primary"
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
@click="login"
|
||||||
|
:loading="loading">
|
||||||
|
{{ $t('common.login') }}
|
||||||
|
</mf-button>
|
||||||
|
</div>
|
||||||
|
<div class="login-register">
|
||||||
|
<mf-button
|
||||||
|
class="login-register-btn"
|
||||||
|
type="text"
|
||||||
|
@click="showRegister">
|
||||||
|
{{ $t('common.register') }}
|
||||||
|
</mf-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mf-dialog>
|
</mf-dialog>
|
||||||
<Forgot
|
<Forgot
|
||||||
|
|
@ -86,8 +93,6 @@
|
||||||
<script>
|
<script>
|
||||||
import Forgot from './Forgot.vue'
|
import Forgot from './Forgot.vue'
|
||||||
import Register from './Register.vue'
|
import Register from './Register.vue'
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import i18n from '@/lang/i18n'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -109,9 +114,6 @@ export default {
|
||||||
Forgot,
|
Forgot,
|
||||||
Register
|
Register
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
...mapGetters(['lang'])
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
// let loginInfo = this.$auth.getLogin()
|
// let loginInfo = this.$auth.getLogin()
|
||||||
// if (loginInfo) {
|
// if (loginInfo) {
|
||||||
|
|
@ -136,12 +138,6 @@ export default {
|
||||||
this.registerVisible = true
|
this.registerVisible = true
|
||||||
this.$emit('cancel')
|
this.$emit('cancel')
|
||||||
},
|
},
|
||||||
changeLang(value) {
|
|
||||||
if (value != this.lang) {
|
|
||||||
this.$store.dispatch('main/setLanguage', value)
|
|
||||||
i18n.global.locale = value
|
|
||||||
}
|
|
||||||
},
|
|
||||||
back() {
|
back() {
|
||||||
this.forgotVisible = false
|
this.forgotVisible = false
|
||||||
this.$emit('open')
|
this.$emit('open')
|
||||||
|
|
@ -201,158 +197,262 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
/* 与 portal-ui 深色壳层一致；表单项带标签，输入区为内嵌深色非白底 */
|
||||||
.login-dialog {
|
.login-dialog {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
background: linear-gradient(
|
background: var(--portal-bg-deep);
|
||||||
0deg,
|
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||||
rgba(39, 20, 51, 0.7) 0%,
|
|
||||||
rgba(230, 33, 122, 0.7) 49%
|
|
||||||
);
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 2px solid #e6217a;
|
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 320px;
|
min-height: auto;
|
||||||
top: 45% !important;
|
top: 45% !important;
|
||||||
transform: translateY(-45%) !important;
|
transform: translateY(-45%) !important;
|
||||||
|
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
.arco-modal-mask {
|
.arco-modal-mask {
|
||||||
/* 背景高斯模糊关键属性 */
|
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
background-color: rgba(6, 8, 13, 0.72);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.arco-modal-body {
|
.arco-modal-body {
|
||||||
padding: 24px 30px 30px 30px;
|
padding: 20px 24px 28px;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-close {
|
.login-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 12px;
|
right: 14px;
|
||||||
top: 6px;
|
top: 10px;
|
||||||
|
z-index: 2;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff;
|
color: var(--portal-text-muted);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--portal-text-strong);
|
||||||
|
}
|
||||||
|
|
||||||
.mf-icon {
|
.mf-icon {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
background: linear-gradient(
|
||||||
|
165deg,
|
||||||
|
rgba(20, 27, 38, 0.97) 0%,
|
||||||
|
rgba(15, 20, 28, 0.99) 100%
|
||||||
|
);
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||||
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||||
|
padding: 36px 32px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-size: 20px;
|
margin: 0;
|
||||||
color: #ffffff;
|
font-size: 26px;
|
||||||
margin-bottom: 10px;
|
line-height: 1.3;
|
||||||
display: flex;
|
font-weight: 600;
|
||||||
align-items: center;
|
color: var(--portal-text-strong);
|
||||||
justify-content: space-between;
|
letter-spacing: -0.02em;
|
||||||
&-lang {
|
}
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 24px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
&-divider {
|
.login-desc {
|
||||||
height: 8px;
|
margin: 10px 0 0;
|
||||||
width: 1px;
|
font-size: 13px;
|
||||||
background-color: rgba(#fff, 0.2);
|
line-height: 1.5;
|
||||||
}
|
color: var(--portal-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
&-item {
|
.login-field {
|
||||||
display: flex;
|
& + .login-field {
|
||||||
align-items: center;
|
margin-top: 22px;
|
||||||
justify-content: center;
|
|
||||||
padding: 0 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(#ffffff, 0.3);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(226, 232, 240, 0.92);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
.login-input {
|
.login-input {
|
||||||
display: flex;
|
display: block;
|
||||||
align-items: center;
|
width: 100%;
|
||||||
border-radius: 10px;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(#ffffff, 0.3);
|
|
||||||
height: 40px;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 0 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: transparent !important;
|
|
||||||
cursor: text;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
::placeholder {
|
/* mf-input 根节点本身就是 arco-input-wrapper，需要直接覆盖 */
|
||||||
color: rgba(#fff, 0.5);
|
&.arco-input-wrapper {
|
||||||
|
height: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.2) !important;
|
||||||
|
background: rgba(51, 65, 85, 0.55) !important;
|
||||||
|
background-color: rgba(51, 65, 85, 0.55) !important;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||||
|
--color-fill-2: rgba(51, 65, 85, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.arco-input-wrapper:hover {
|
||||||
|
border-color: rgba(148, 163, 184, 0.3) !important;
|
||||||
|
background-color: rgba(51, 65, 85, 0.68) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.arco-input-wrapper:focus-within {
|
&.arco-input-wrapper:focus-within {
|
||||||
background-color: transparent;
|
border-color: rgba(148, 163, 184, 0.45) !important;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.28);
|
||||||
|
background-color: rgba(51, 65, 85, 0.75) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&.arco-input-wrapper :deep(.arco-input),
|
||||||
background-color: transparent;
|
&.arco-input-wrapper :deep(input.arco-input) {
|
||||||
border-color: #fff;
|
height: 46px;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 46px;
|
||||||
|
color: var(--portal-text-strong) !important;
|
||||||
|
background: transparent !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
-webkit-text-fill-color: var(--portal-text-strong);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arco-image {
|
&.arco-input-wrapper :deep(.arco-input::placeholder),
|
||||||
position: absolute;
|
&.arco-input-wrapper :deep(input.arco-input::placeholder) {
|
||||||
left: 16px;
|
color: rgba(203, 213, 225, 0.88) !important;
|
||||||
&-img {
|
-webkit-text-fill-color: rgba(203, 213, 225, 0.88);
|
||||||
width: 100%;
|
opacity: 1 !important;
|
||||||
height: 100%;
|
|
||||||
vertical-align: unset;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.login-submit {
|
/* 密码组件：按钮在右侧一行内，不要纵向堆叠 */
|
||||||
display: flex;
|
:deep(.arco-input-password) {
|
||||||
align-items: center;
|
display: block;
|
||||||
justify-content: center;
|
width: 100%;
|
||||||
margin-top: 30px;
|
}
|
||||||
.mf-button {
|
|
||||||
width: 160px;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 0 14px;
|
|
||||||
|
|
||||||
&:first-child {
|
:deep(.arco-input-password .arco-input-wrapper) {
|
||||||
color: #ffffff;
|
display: inline-flex;
|
||||||
background-color: #1a1a1a;
|
align-items: center;
|
||||||
&:hover {
|
width: 100%;
|
||||||
background-color: #262626;
|
}
|
||||||
}
|
|
||||||
&:active {
|
:deep(.arco-input-wrapper) {
|
||||||
background-color: #0d0d0d;
|
height: 48px;
|
||||||
}
|
min-height: 48px;
|
||||||
}
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.2) !important;
|
||||||
|
background-color: rgba(51, 65, 85, 0.55) !important;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||||||
|
/* 盖住 Arco 默认浅色填充，避免白底 */
|
||||||
|
--color-fill-2: rgba(51, 65, 85, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-input-wrapper:hover) {
|
||||||
|
border-color: rgba(148, 163, 184, 0.3) !important;
|
||||||
|
background-color: rgba(51, 65, 85, 0.68) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-input-wrapper:focus-within) {
|
||||||
|
border-color: rgba(148, 163, 184, 0.45) !important;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.28);
|
||||||
|
background-color: rgba(51, 65, 85, 0.75) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-input) {
|
||||||
|
height: 46px;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 46px;
|
||||||
|
color: var(--portal-text-strong) !important;
|
||||||
|
background: transparent !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
-webkit-text-fill-color: var(--portal-text-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 占位符提亮，保证在深色底上可读 */
|
||||||
|
:deep(.arco-input::placeholder),
|
||||||
|
:deep(input.arco-input::placeholder) {
|
||||||
|
color: rgba(203, 213, 225, 0.88) !important;
|
||||||
|
-webkit-text-fill-color: rgba(203, 213, 225, 0.88);
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-icon-hover) {
|
||||||
|
color: rgba(203, 213, 225, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-input-clear-btn) {
|
||||||
|
color: rgba(203, 213, 225, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 明文切换在 suffix 最右侧 */
|
||||||
|
:deep(.arco-input-suffix) {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-input-suffix .arco-icon),
|
||||||
|
:deep(.arco-input-suffix svg) {
|
||||||
|
color: rgba(203, 213, 225, 0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-link {
|
.login-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
color: #999;
|
margin-top: 12px;
|
||||||
margin-top: 10px;
|
|
||||||
.mf-button {
|
.login-link-btn,
|
||||||
|
.login-link-btn.arco-btn {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 12px;
|
background: transparent !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: transparent;
|
color: #fff;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-submit {
|
||||||
|
margin-top: 24px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.login-btn-primary {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 40px !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-register {
|
||||||
|
margin-top: 16px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.login-register-btn,
|
||||||
|
.login-register-btn.arco-btn {
|
||||||
|
padding: 4px 12px;
|
||||||
|
height: auto;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #fff;
|
||||||
|
background: transparent !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -361,6 +461,18 @@ export default {
|
||||||
@media (max-width: 576px) {
|
@media (max-width: 576px) {
|
||||||
.login-dialog {
|
.login-dialog {
|
||||||
width: calc(100% - 16px) !important;
|
width: calc(100% - 16px) !important;
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
padding: 28px 20px 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue