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