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