You've already forked rollingDraw
优化:修复滚动条显示问题,优化管理端布局
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* 快捷键指南样式 */
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user