mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
feat: 优化OBS布局和样式
- 在 App.vue 中移除 NGlobalStyle 组件 - 在 OBSLayout.vue 中更新容器样式,确保高度为100vh并添加overflow隐藏 - 在 FreshRequestOBS.vue 中增加最大高度限制,确保不超出视口高度,并强制隐藏溢出
This commit is contained in:
@@ -95,7 +95,6 @@
|
|||||||
<Suspense>
|
<Suspense>
|
||||||
<TempComponent>
|
<TempComponent>
|
||||||
<NLayoutContent>
|
<NLayoutContent>
|
||||||
<NGlobalStyle />
|
|
||||||
<NElement style="height: 100vh;">
|
<NElement style="height: 100vh;">
|
||||||
<ViewerLayout v-if="layout == 'viewer'" />
|
<ViewerLayout v-if="layout == 'viewer'" />
|
||||||
<ManageLayout v-else-if="layout == 'manage'" />
|
<ManageLayout v-else-if="layout == 'manage'" />
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="height: 100vh;">
|
<div class="obs-container">
|
||||||
<RouterView v-slot="{ Component }">
|
<RouterView v-slot="{ Component }">
|
||||||
<KeepAlive>
|
<KeepAlive>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
@@ -60,3 +60,18 @@ onUnmounted(() => {
|
|||||||
</RouterView>
|
</RouterView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.obs-container {
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保OBS中不出现滚动条 */
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -259,6 +259,7 @@ onUnmounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 150px; /* 增加最小高度 */
|
min-height: 150px; /* 增加最小高度 */
|
||||||
min-width: 250px; /* 增加最小宽度 */
|
min-width: 250px; /* 增加最小宽度 */
|
||||||
|
max-height: 100vh; /* 确保在OBS中不超出视口高度 */
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 245, 250, 0.85) 100%);
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 245, 250, 0.85) 100%);
|
||||||
border-radius: 16px; /* 更大的圆角 */
|
border-radius: 16px; /* 更大的圆角 */
|
||||||
color: #333;
|
color: #333;
|
||||||
@@ -406,7 +407,7 @@ onUnmounted(() => {
|
|||||||
/* 歌曲列表 */
|
/* 歌曲列表 */
|
||||||
.fresh-request-list-container {
|
.fresh-request-list-container {
|
||||||
flex: 1; /* 占据剩余空间 */
|
flex: 1; /* 占据剩余空间 */
|
||||||
overflow: hidden;
|
overflow: hidden !important; /* 强制隐藏溢出 */
|
||||||
padding: 0 12px; /* 调整左右内边距 */
|
padding: 0 12px; /* 调整左右内边距 */
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
position: relative; /* 为空状态居中 */
|
position: relative; /* 为空状态居中 */
|
||||||
|
|||||||
Reference in New Issue
Block a user