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