mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-05-11 05:07:28 +08:00
feat: login overlay ui fix
This commit is contained in:
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user