html, body, :root { --padding-left: 24px; --padding-right: 24px; --main-color: rgb(2, 238, 255); --header-height: 66px; --s: 6; // 轮播的个数 --h: 36; // 单个 li 容器的高度 --speed: 1.5s; // 单次动画的时长 } html, body { margin: 0; padding: 0; } .u-m-t { margin-top: 2vh; } .u-p-t { padding-top: 1vh; } .page-padding-left { padding-left: var(--padding-left); } @mixin mbg($o) { background-color: rgba(0, 166, 208, $o); } .blur-wrap { // backdrop-filter: blur(6px); @include mbg(0.3); } .left-wrap { position: absolute; left: calc(1vw + 1em + 48px + 20px); // height: calc(100vh - var(--header-height) - 24px); top: calc(var(--header-height) + 24px); width: 23vw; // padding: 15px; box-sizing: border-box; } .right-wrap { pointer-events: none; & > * { pointer-events: auto; } position: absolute; top: calc(var(--header-height) + 24px); // height: calc( 100vh - var(--header-height) - 24px ); right: 10px; .scroll-board-wrap { margin-left: auto; width: 20vw; border-radius: 8px; overflow: hidden; .dv-scroll-board .header{ color: var(--main-color); } } } .xiaoban{ margin: 20px 0; width: 20vw; margin-left: auto; color: var(--main-color); .el-input .el-input__inner{ border-color: var(--main-color); color: var(--main-color); background: transparent; } .el-input__icon{ color: var(--main-color); } .title{ white-space: nowrap; } } .nav-wrap { position: fixed; left: 1vw; top: calc(var(--header-height) + 24px); .nav-item { color: var(--main-color); &:not(:first-of-type) { margin-top: 1vh; } width: 1em; background: url(../img/nav-item.png); background-size: 100% 100%; padding: 24px; cursor: pointer; &.active { background-image: url(../img/nav-item-s.png); color: #5ee574; } } }