mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-08-28 03:27:54 +08:00
feat: 优化 ScrollToTopBtn 组件样式和布局,调整按钮位置和尺寸
This commit is contained in:
@@ -47,41 +47,39 @@ onUnmounted(() => {
|
|||||||
/* Global Action Button Styles (FAB) */
|
/* Global Action Button Styles (FAB) */
|
||||||
.global-action-buttons {
|
.global-action-buttons {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
inset-block-end: 30px;
|
||||||
|
inset-inline-end: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.global-action-button {
|
.global-action-button {
|
||||||
width: 44px;
|
display: flex;
|
||||||
height: 44px;
|
align-items: center;
|
||||||
background-color: rgba(var(--v-theme-background), 0.8);
|
justify-content: center;
|
||||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
|
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
-webkit-backdrop-filter: blur(10px);
|
background-color: rgba(var(--v-theme-background), 0.8);
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
|
block-size: 44px;
|
||||||
display: flex;
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 8%);
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
cursor: pointer;
|
||||||
|
inline-size: 44px;
|
||||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(var(--v-theme-background), 0.95);
|
background-color: rgba(var(--v-theme-background), 0.95);
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
|
|
||||||
color: rgb(var(--v-theme-primary));
|
color: rgb(var(--v-theme-primary));
|
||||||
|
transform: translateY(-4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
block-size: 20px;
|
||||||
|
inline-size: 20px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -202,9 +202,16 @@ onMounted(() => {
|
|||||||
</VCard>
|
</VCard>
|
||||||
</VMenu>
|
</VMenu>
|
||||||
<!-- 名称测试弹窗 -->
|
<!-- 名称测试弹窗 -->
|
||||||
<VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable>
|
<VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="35rem" scrollable>
|
||||||
<VCard title="名称识别测试">
|
<VCard>
|
||||||
<DialogCloseBtn @click="nameTestDialog = false" />
|
<VCardItem>
|
||||||
|
<VCardTitle>
|
||||||
|
<VIcon icon="mdi-text-recognition" class="me-2" />
|
||||||
|
名称识别测试
|
||||||
|
</VCardTitle>
|
||||||
|
<DialogCloseBtn @click="nameTestDialog = false" />
|
||||||
|
</VCardItem>
|
||||||
|
<VDivider />
|
||||||
<VCardText>
|
<VCardText>
|
||||||
<NameTestView />
|
<NameTestView />
|
||||||
</VCardText>
|
</VCardText>
|
||||||
@@ -212,8 +219,14 @@ onMounted(() => {
|
|||||||
</VDialog>
|
</VDialog>
|
||||||
<!-- 网络测试弹窗 -->
|
<!-- 网络测试弹窗 -->
|
||||||
<VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
|
<VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
|
||||||
<VCard title="网络测试">
|
<VCard>
|
||||||
<DialogCloseBtn @click="netTestDialog = false" />
|
<VCardItem>
|
||||||
|
<VCardTitle>
|
||||||
|
<VIcon icon="mdi-network" class="me-2" />
|
||||||
|
网速连通性测试
|
||||||
|
</VCardTitle>
|
||||||
|
<DialogCloseBtn @click="netTestDialog = false" />
|
||||||
|
</VCardItem>
|
||||||
<VDivider />
|
<VDivider />
|
||||||
<VCardText>
|
<VCardText>
|
||||||
<NetTestView />
|
<NetTestView />
|
||||||
@@ -232,6 +245,7 @@ onMounted(() => {
|
|||||||
<DialogCloseBtn @click="loggingDialog = false" />
|
<DialogCloseBtn @click="loggingDialog = false" />
|
||||||
<VCardItem>
|
<VCardItem>
|
||||||
<VCardTitle class="inline-flex">
|
<VCardTitle class="inline-flex">
|
||||||
|
<VIcon icon="mdi-file-document" class="me-2" />
|
||||||
实时日志
|
实时日志
|
||||||
<a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
|
<a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
|
||||||
<div
|
<div
|
||||||
@@ -250,9 +264,16 @@ onMounted(() => {
|
|||||||
</VCard>
|
</VCard>
|
||||||
</VDialog>
|
</VDialog>
|
||||||
<!-- 规则测试弹窗 -->
|
<!-- 规则测试弹窗 -->
|
||||||
<VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable>
|
<VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="40rem" scrollable>
|
||||||
<VCard title="规则测试">
|
<VCard>
|
||||||
<DialogCloseBtn @click="ruleTestDialog = false" />
|
<VCardItem>
|
||||||
|
<VCardTitle>
|
||||||
|
<VIcon icon="mdi-filter-cog" class="me-2" />
|
||||||
|
规则测试
|
||||||
|
</VCardTitle>
|
||||||
|
<DialogCloseBtn @click="ruleTestDialog = false" />
|
||||||
|
</VCardItem>
|
||||||
|
<VDivider />
|
||||||
<VCardText>
|
<VCardText>
|
||||||
<RuleTestView />
|
<RuleTestView />
|
||||||
</VCardText>
|
</VCardText>
|
||||||
@@ -260,8 +281,14 @@ onMounted(() => {
|
|||||||
</VDialog>
|
</VDialog>
|
||||||
<!-- 系统健康检查弹窗 -->
|
<!-- 系统健康检查弹窗 -->
|
||||||
<VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
|
<VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
|
||||||
<VCard title="系统健康检查">
|
<VCard>
|
||||||
<DialogCloseBtn @click="systemTestDialog = false" />
|
<VCardItem>
|
||||||
|
<VCardTitle>
|
||||||
|
<VIcon icon="mdi-cog" class="me-2" />
|
||||||
|
系统健康检查
|
||||||
|
</VCardTitle>
|
||||||
|
<DialogCloseBtn @click="systemTestDialog = false" />
|
||||||
|
</VCardItem>
|
||||||
<VDivider />
|
<VDivider />
|
||||||
<VCardText>
|
<VCardText>
|
||||||
<ModuleTestView />
|
<ModuleTestView />
|
||||||
@@ -276,8 +303,14 @@ onMounted(() => {
|
|||||||
scrollable
|
scrollable
|
||||||
:fullscreen="!display.mdAndUp.value"
|
:fullscreen="!display.mdAndUp.value"
|
||||||
>
|
>
|
||||||
<VCard title="消息中心">
|
<VCard>
|
||||||
<DialogCloseBtn @click="messageDialog = false" />
|
<VCardItem>
|
||||||
|
<VCardTitle>
|
||||||
|
<VIcon icon="mdi-message" class="me-2" />
|
||||||
|
消息中心
|
||||||
|
</VCardTitle>
|
||||||
|
<DialogCloseBtn @click="messageDialog = false" />
|
||||||
|
</VCardItem>
|
||||||
<VDivider />
|
<VDivider />
|
||||||
<VCardText ref="chatContainer">
|
<VCardText ref="chatContainer">
|
||||||
<MessageView @scroll="scrollMessageToEnd" />
|
<MessageView @scroll="scrollMessageToEnd" />
|
||||||
|
|||||||
Reference in New Issue
Block a user