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

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 {
width: 100%;
height: 100%;
overflow: hidden;
overflow: auto;
}
body {
@@ -25,7 +25,6 @@ body {
#app {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.el-container {

View File

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

View File

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