common.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. html,
  2. body,
  3. :root {
  4. --padding-left: 24px;
  5. --padding-right: 24px;
  6. --main-color: rgb(2, 238, 255);
  7. --header-height: 66px;
  8. --s: 6; // 轮播的个数
  9. --h: 36; // 单个 li 容器的高度
  10. --speed: 1.5s; // 单次动画的时长
  11. }
  12. html,
  13. body {
  14. margin: 0;
  15. padding: 0;
  16. }
  17. .u-m-t {
  18. margin-top: 2vh;
  19. }
  20. .u-p-t {
  21. padding-top: 1vh;
  22. }
  23. .page-padding-left {
  24. padding-left: var(--padding-left);
  25. }
  26. @mixin mbg($o) {
  27. background-color: rgba(0, 166, 208, $o);
  28. }
  29. .blur-wrap {
  30. // backdrop-filter: blur(6px);
  31. @include mbg(0.3);
  32. }
  33. .left-wrap {
  34. position: absolute;
  35. left: calc(1vw + 1em + 48px + 20px);
  36. // height: calc(100vh - var(--header-height) - 24px);
  37. top: calc(var(--header-height) + 24px);
  38. width: 23vw;
  39. // padding: 15px;
  40. box-sizing: border-box;
  41. }
  42. .right-wrap {
  43. pointer-events: none;
  44. & > * {
  45. pointer-events: auto;
  46. }
  47. position: absolute;
  48. top: calc(var(--header-height) + 24px);
  49. // height: calc( 100vh - var(--header-height) - 24px );
  50. right: 10px;
  51. .scroll-board-wrap {
  52. margin-left: auto;
  53. width: 20vw;
  54. border-radius: 8px;
  55. overflow: hidden;
  56. .dv-scroll-board .header{
  57. color: var(--main-color);
  58. }
  59. }
  60. }
  61. .xiaoban{
  62. margin: 20px 0;
  63. width: 20vw;
  64. margin-left: auto;
  65. color: var(--main-color);
  66. .el-input .el-input__inner{
  67. border-color: var(--main-color);
  68. color: var(--main-color);
  69. background: transparent;
  70. }
  71. .el-input__icon{
  72. color: var(--main-color);
  73. }
  74. .title{
  75. white-space: nowrap;
  76. }
  77. }
  78. .nav-wrap {
  79. position: fixed;
  80. left: 1vw;
  81. top: calc(var(--header-height) + 24px);
  82. .nav-item {
  83. color: var(--main-color);
  84. &:not(:first-of-type) {
  85. margin-top: 1vh;
  86. }
  87. width: 1em;
  88. background: url(../img/nav-item.png);
  89. background-size: 100% 100%;
  90. padding: 24px;
  91. cursor: pointer;
  92. &.active {
  93. background-image: url(../img/nav-item-s.png);
  94. color: #5ee574;
  95. }
  96. }
  97. }