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;
}
}
}