feat: login overlay ui fix

This commit is contained in:
tim
2025-07-14 18:33:33 +08:00
parent d3870e9efc
commit 42f2a0e057
2 changed files with 35 additions and 15 deletions

View File

@@ -2,11 +2,7 @@
<div class="comment-editor-container"> <div class="comment-editor-container">
<div :id="editorId" ref="vditorElement"></div> <div :id="editorId" ref="vditorElement"></div>
<div class="comment-bottom-container"> <div class="comment-bottom-container">
<div <div class="comment-submit" :class="{ disabled: isDisabled }" @click="submit">
class="comment-submit"
:class="{ disabled: isDisabled }"
@click="submit"
>
<template v-if="!loading"> <template v-if="!loading">
发布评论 发布评论
</template> </template>
@@ -83,13 +79,10 @@ export default {
'image' 'image'
], ],
toolbarConfig: { pin: true }, toolbarConfig: { pin: true },
input(value) { input(value) {
text.value = value text.value = value
} }
}) })
if (props.disabled || props.loading) {
vditorInstance.value.disabled()
}
}) })
watch( watch(
@@ -127,12 +120,14 @@ export default {
margin-bottom: 50px; margin-bottom: 50px;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
} }
.comment-bottom-container { .comment-bottom-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
padding: 10px; padding: 10px;
} }
.comment-submit { .comment-submit {
background-color: var(--primary-color); background-color: var(--primary-color);
color: #fff; color: #fff;
@@ -141,14 +136,17 @@ export default {
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.comment-submit.disabled { .comment-submit.disabled {
background-color: var(--primary-color-disabled); background-color: var(--primary-color-disabled);
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.comment-submit.disabled:hover { .comment-submit.disabled:hover {
background-color: var(--primary-color-disabled); background-color: var(--primary-color-disabled);
} }
.comment-submit:hover { .comment-submit:hover {
background-color: var(--primary-color-hover); background-color: var(--primary-color-hover);
} }

View File

@@ -1,8 +1,13 @@
<template> <template>
<div class="login-overlay" @click="goLogin"> <div class="login-overlay">
<i class="fa-solid fa-user login-overlay-icon"></i>
<div class="login-overlay-text"> <div class="login-overlay-text">
请先登录点击跳转到登录页面 请先登录点击跳转到登录页面
</div> </div>
<div class="login-overlay-button" @click="goLogin">
登录
</div>
</div> </div>
</template> </template>
@@ -28,12 +33,29 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(255, 255, 255, 0.7);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
cursor: pointer;
z-index: 15; z-index: 15;
} }
.login-overlay-icon {
margin-right: 10px;
}
.login-overlay-button {
padding: 4px 8px;
border-radius: 5px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
margin-left: 10px;
cursor: pointer;
}
.login-overlay-button:hover {
background-color: var(--primary-color-hover);
}
</style> </style>