优化:修复滚动条显示问题,优化管理端布局

This commit is contained in:
yuantao
2026-01-16 18:31:41 +08:00
parent e2f9871199
commit 6db0cafcee
3 changed files with 59 additions and 15 deletions

View File

@@ -9,7 +9,7 @@ html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: auto;
} }
body { body {
@@ -25,7 +25,6 @@ body {
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: scroll;
} }
.el-container { .el-container {

View File

@@ -328,9 +328,20 @@ const clearBackgroundImage = async () => {
<style scoped> <style scoped>
.admin-layout { .admin-layout {
min-height: 100vh; height: 100vh;
background: var(--color-background); background: var(--color-background);
font-family: var(--font-family-primary); font-family: var(--font-family-primary);
overflow: hidden;
}
.admin-layout > .el-container {
flex-direction: column;
height: 100%;
}
.admin-layout > .el-container > .el-container {
flex: 1;
overflow: hidden;
} }
.el-header { .el-header {
@@ -344,6 +355,7 @@ const clearBackgroundImage = async () => {
position: relative; position: relative;
z-index: 10; z-index: 10;
height: var(--header-height); height: var(--header-height);
flex-shrink: 0;
} }
.el-header::before { .el-header::before {
@@ -387,6 +399,8 @@ const clearBackgroundImage = async () => {
background: var(--color-sidebar-bg); background: var(--color-sidebar-bg);
border-right: 1px solid transparent; border-right: 1px solid transparent;
padding: var(--spacing-lg) 0; padding: var(--spacing-lg) 0;
overflow-y: auto;
flex-shrink: 0;
} }
.admin-menu { .admin-menu {
@@ -421,6 +435,8 @@ const clearBackgroundImage = async () => {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
overflow-y: auto;
overflow-x: hidden;
} }
/* 快捷键指南样式 */ /* 快捷键指南样式 */

View File

@@ -201,10 +201,15 @@ onMounted(async () => {
if (store.displayMode === 'scroll' && store.isRolling) { if (store.displayMode === 'scroll' && store.isRolling) {
startScroll() startScroll()
} }
// 隐藏滚动条
document.body.classList.add('display-page-no-scrollbar')
}) })
onUnmounted(() => { onUnmounted(() => {
stopScroll() stopScroll()
// 恢复滚动条
document.body.classList.remove('display-page-no-scrollbar')
}) })
</script> </script>
@@ -220,7 +225,7 @@ onUnmounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
position: relative; position: relative;
outline: none; outline: none;
font-family: var(--font-family-primary); font-family: var(--font-family-primary);
@@ -244,10 +249,21 @@ onUnmounted(() => {
z-index: 2; z-index: 2;
} }
/* 隐藏大屏端的滚动条 */
.display-container::-webkit-scrollbar {
display: none;
}
.display-container {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 当前轮次信息 */ /* 当前轮次信息 */
.current-round-info { .current-round-info {
text-align: center; text-align: center;
margin-bottom: 40px; margin: 20px 0 10px 0;
flex-shrink: 0;
} }
.current-round-info.centered { .current-round-info.centered {
@@ -255,7 +271,7 @@ onUnmounted(() => {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin-bottom: 0; margin: 0;
z-index: 10; z-index: 10;
} }
@@ -263,31 +279,32 @@ onUnmounted(() => {
font-size: v-bind('store.roundNameFontSize + "px"'); font-size: v-bind('store.roundNameFontSize + "px"');
font-weight: bold; font-weight: bold;
color: v-bind('store.displayFontColor'); color: v-bind('store.displayFontColor');
margin-bottom: 15px; margin-bottom: 10px;
} }
.prize-name { .prize-name {
font-size: v-bind('store.prizeNameFontSize + "px"'); font-size: v-bind('store.prizeNameFontSize + "px"');
font-weight: bold; font-weight: bold;
color: v-bind('store.prizeNameFontColor'); color: v-bind('store.prizeNameFontColor');
margin-bottom: 0;
} }
/* 滚动模式 */ /* 滚动模式 */
.scroll-mode { .scroll-mode {
flex: 1;
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
padding: 0; padding: 20px 0;
box-sizing: border-box; box-sizing: border-box;
} }
.scroll-list { .scroll-list {
display: grid; display: grid;
gap: 30px; gap: 20px;
width: calc(100% - 80px); width: calc(100% - 80px);
max-width: 1600px; max-width: 1600px;
padding: 0 40px; padding: 0 40px;
@@ -298,7 +315,7 @@ onUnmounted(() => {
font-size: v-bind('store.participantFontSize + "px"'); font-size: v-bind('store.participantFontSize + "px"');
font-weight: bold; font-weight: bold;
color: v-bind('store.displayFontColor'); color: v-bind('store.displayFontColor');
padding: 20px 30px; padding: 15px 20px;
text-align: center; text-align: center;
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
border-radius: 12px; border-radius: 12px;
@@ -317,20 +334,20 @@ onUnmounted(() => {
/* 结果模式 */ /* 结果模式 */
.result-mode { .result-mode {
flex: 1;
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 20px 0;
box-sizing: border-box; box-sizing: border-box;
} }
.winners-list { .winners-list {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 30px; gap: 20px;
width: calc(100% - 80px); width: calc(100% - 80px);
max-width: 1600px; max-width: 1600px;
padding: 0 40px; padding: 0 40px;
@@ -341,7 +358,7 @@ onUnmounted(() => {
font-size: v-bind('store.participantFontSize + "px"'); font-size: v-bind('store.participantFontSize + "px"');
font-weight: bold; font-weight: bold;
color: v-bind('store.displayFontColor'); color: v-bind('store.displayFontColor');
padding: 20px 30px; padding: 15px 20px;
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
@@ -358,3 +375,15 @@ onUnmounted(() => {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
</style> </style>
<style>
/* 全局样式:隐藏大屏页面的滚动条 */
.display-page-no-scrollbar::-webkit-scrollbar {
display: none;
}
.display-page-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>