From eaeadbc257d2218c6060a5a5e8cec86eddf8b04b Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Thu, 12 Aug 2021 16:40:39 +0800 Subject: [PATCH] optimize css --- src/assets/css/mixin.scss | 63 ++------------------ src/core/controller/index.scss | 70 ++++------------------ src/core/controller/index.tsx | 8 +-- src/core/controls/index.scss | 105 +++++++++------------------------ src/core/controls/index.tsx | 4 +- src/core/controls/multiple.tsx | 6 +- src/core/controls/set.tsx | 9 ++- src/core/controls/volume.tsx | 4 +- src/core/index.scss | 55 ++++------------- src/core/index.tsx | 2 +- src/core/progress/index.scss | 61 ++++++------------- src/core/progress/index.tsx | 2 +- 12 files changed, 93 insertions(+), 296 deletions(-) diff --git a/src/assets/css/mixin.scss b/src/assets/css/mixin.scss index 6936faa..81b4721 100644 --- a/src/assets/css/mixin.scss +++ b/src/assets/css/mixin.scss @@ -5,78 +5,27 @@ justify-content: $jc; align-items: center; } - -@mixin flexItem($n) { - box-sizing: border-box; - flex-grow: $n; -} - @mixin style($size, $color, $bold: normal) { font-size: $size; color: $color; font-weight: $bold; } - @mixin wh($w, $h) { width: $w; height: $h; } - -@mixin center() { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -@mixin textOverflow($n) { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - /* autoprefixer: off */ //针对打包不显示的问题 - -webkit-box-orient: vertical; - /* autoprefixer: on */ - -webkit-line-clamp: $n; -} - -@mixin cicle($size: 8px) { - border-radius: $size; +@mixin position($type, $top, $right, $bottom, $left) { + position: $type; + left: $left; + top: $top; + right: $right; + bottom: $bottom; } - -@mixin lh($h) { - line-height: $h; -} - @mixin fixed($t, $l) { position: fixed; top: $t; left: $l; } - -@mixin textAlign($h) { - height: $h; - line-height: $h; - text-align: center; - vertical-align: middle; -} - -@mixin auto($l, $r) { - margin: $l auto $r auto; -} -@mixin scroll($w, $h) { - &::-webkit-scrollbar { - /*滚动条整体样式*/ - @include wh($w, $h); /*高宽分别对应横竖滚动条的尺寸*/ - } - &::-webkit-scrollbar-thumb { - /*滚动条里面小方块*/ - border-radius: 5px; - background: rgba(0, 0, 0, 0.15); - } - &::-webkit-scrollbar-track { - /*滚动条里面轨道*/ - -webkit-box-shadow: inset 0 0 5px #fff; - } -} @keyframes show { 0% { opacity: 0; diff --git a/src/core/controller/index.scss b/src/core/controller/index.scss index c2c7d59..73d272d 100644 --- a/src/core/controller/index.scss +++ b/src/core/controller/index.scss @@ -1,77 +1,31 @@ -.controller-container { - // width: 740px; - // height: 420px; - width: 100%; - height: 100%; - position: absolute; - bottom: 0; - left: 50%; +@import 'src/assets/css/mixin.scss'; +.JoL-controller-container { + @include wh(100%, 100%); + @include position(absolute, auto, auto, 0, 50%); transform: translateX(-50%); z-index: 3; cursor: pointer; - .click-to-play-or-pause { - width: 100%; - height: calc(100% - 47px); - position: absolute; + .JoL-click-to-play-or-pause { + @include wh(100%, calc(100% - 47px)); + @include position(absolute, 0, auto, auto, 0); z-index: 101; - top: 0; - left: 0; outline: none; } .play-icon { display: inline-block; - font-size: 24px; - position: absolute; + @include style(24px, #fff); + @include wh(40px, 40px); + @include position(absolute, auto, 30px, 60px, auto); z-index: 100; - bottom: 60px; - right: 30px; - width: 40px; - height: 40px; line-height: 40px; text-align: center; border-radius: 30%; - color: #fff; opacity: 0.7; } - .progress-and-controls-wrap { + .JoL-progress-and-controls-wrap { width: calc(100% - 26px); - position: absolute; + @include position(absolute, auto, auto, 0, 50%); z-index: 102; - bottom: 0; - left: 50%; transform: translateX(-50%); } - .volume-show-box { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - margin: auto; - width: 80px; - height: 40px; - text-align: center; - line-height: 40px; - background-color: rgba(255, 255, 255, 0.5); - border-radius: 4px; - opacity: 0; - .volume-percent { - padding-left: 10px; - } - } - .show-animation { - animation: show-volume-box 1s ease; - } -} - -@keyframes show-volume-box { - 0% { - opacity: 1; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } } diff --git a/src/core/controller/index.tsx b/src/core/controller/index.tsx index 343383f..fddb5a6 100644 --- a/src/core/controller/index.tsx +++ b/src/core/controller/index.tsx @@ -76,14 +76,14 @@ const Index = memo(function Index(props) { return (
showControl(e, 'enter')} onMouseLeave={(e) => showControl(e, 'leave')} ref={controllerRef} >
)} -
+
diff --git a/src/core/controls/index.scss b/src/core/controls/index.scss index eef79c7..cdf6f86 100644 --- a/src/core/controls/index.scss +++ b/src/core/controls/index.scss @@ -1,20 +1,14 @@ @import 'src/assets/css/mixin.scss'; .clientFullScreen { - position: fixed !important; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: auto !important; - height: auto !important; + @include wh(auto !important, auto !important); + @include position(fixed !important, 0, 0, 0, 0); z-index: 100000; } -.controls-container { +.JoL-controls-container { padding: 0 5px; box-sizing: border-box; transition: all 0.5s; - width: 100%; - height: 42px; + @include wh(100%, 42px); color: rgb(238, 238, 238); position: relative; // z-index: 10020; @@ -25,11 +19,8 @@ } &:after { content: ''; - width: calc(100% + 26px); - height: 100%; - position: absolute; - bottom: 0; - left: 50%; + @include wh(calc(100% + 26px), 100%); + @include position(absolute, auto, auto, 0, 50%); z-index: -1; transform: translateX(-50%); background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); @@ -43,26 +34,19 @@ padding: 0 10px; } } - .multifunction { - width: 100%; - height: 100%; - display: flex; - justify-content: flex-end; - align-items: center; + .JoL-multifunction { + @include wh(100%, 100%); + @include flexContainer(flex-end); text-align: center; line-height: 42px; &-multiple { padding: 0 10px; position: relative; &-container { - position: absolute; transition: all 0.5s; - top: -12px; - left: 50%; + @include position(absolute, -12px, auto, auto, 50%); transform: translateX(-50%); - // display: none; - height: 70px; - width: 100%; + @include wh(100%, 70px); &:hover { .multifunction-multiple-layer { animation: show 0.3s ease; @@ -71,10 +55,8 @@ } &-layer { list-style: none; - position: absolute; line-height: normal; - bottom: 65px; - left: 50%; + @include position(absolute, auto, auto, 65px, 50%); transform: translateX(-50%); border-radius: 3px; background-color: rgba(0, 0, 0, 0.7); @@ -103,14 +85,9 @@ } } &-container { - position: absolute; - transition: all 0.5s; - left: 50%; + @include wh(100%, 70px); + @include position(absolute, -12px, auto, 0, 50%); transform: translateX(-50%); - top: -12px; - // display: none; - height: 70px; - width: 100%; &:hover { .volume-box { animation: show 0.3s ease; @@ -121,17 +98,12 @@ line-height: normal; position: absolute; bottom: 65px; - // left: 50%; - // transform: translateX(-50%); - // margin-left: -16px; - width: 40px; - height: 120px; + @include wh(40px, 120px); padding-bottom: 8px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.7); .current-volume { - width: 100%; - height: 24px; + @include wh(100%, 24px); margin: 0; line-height: 24px; text-align: center; @@ -144,44 +116,29 @@ } } .volume-slider { - width: 100%; - height: 96px; - display: flex; - justify-content: center; - align-items: center; + @include wh(100%, 96px); + @include flexContainer(center); .volume-slider-bg { - width: 2px; - height: 86px; + @include wh(2px, 86px); border-radius: 1px; background-color: #fff; position: relative; .volume-slider-op { - position: absolute; + @include wh(100%, 100%); + @include position(absolute, auto, auto, 0, 0); z-index: 1; - bottom: 0; - left: 0; - width: 100%; - height: 100%; border-radius: 1px; - // background-color: #fbc100; .volume-slider-op-circle { - position: absolute; - top: -(10px/2); - left: 50%; + @include wh(10px, 10px); + @include position(absolute, -(10px/2), auto, auto, 50%); margin-left: -(10px/2); - width: 10px; - height: 10px; border-radius: 50%; - // background-color: #fbc100; } } .volume-slider-mirror { - position: absolute; + @include wh(32px, calc(100% + 5px)); + @include position(absolute, auto, auto, 0, -15px); z-index: 2; - bottom: 0; - left: -15px; - width: 32px; - height: calc(100% + 5px); } } } @@ -191,14 +148,10 @@ padding: 0 10px; position: relative; &-container { - position: absolute; + @include wh(100%, 70px); + @include position(absolute, -12px, auto, 0, 50%); transition: all 0.5s; - left: 50%; transform: translateX(-50%); - top: -12px; - // display: none; - height: 70px; - width: 100%; } &:hover { z-index: 1000000000; @@ -209,9 +162,7 @@ &-layer { line-height: normal; list-style: none; - position: absolute; - bottom: 65px; - left: 50%; + @include position(absolute, auto, auto, 65px, 50%); transform: translateX(-50%); border-radius: 3px; background-color: rgba(0, 0, 0, 0.7); diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx index dd84e20..464575c 100644 --- a/src/core/controls/index.tsx +++ b/src/core/controls/index.tsx @@ -203,7 +203,7 @@ const Index = memo(function Index(props) { }; return (
-
+
= memo(function Multiple({ return (
[setIsShow(true), e.stopPropagation()]} onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]} >

{multipleText}

-
    +
      {multipleList.map((item, index) => (
    • [selectPlayRate(item.id), setIsShow(false)]} diff --git a/src/core/controls/set.tsx b/src/core/controls/set.tsx index 0d928de..95338b6 100644 --- a/src/core/controls/set.tsx +++ b/src/core/controls/set.tsx @@ -17,13 +17,16 @@ const Set: FC = memo(function Set({ switchChange }) { const [isShow, setIsShow] = useState(false); return (
      [setIsShow(true), e.stopPropagation()]} onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]} > -
      -
        +
        +
        • [setIsShow(true), e.stopPropagation()]} onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]} >
          diff --git a/src/core/index.scss b/src/core/index.scss index 696b973..fc5bb5e 100644 --- a/src/core/index.scss +++ b/src/core/index.scss @@ -1,73 +1,38 @@ +@import 'src/assets/css/mixin.scss'; .JoL-player-container { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; - // width: 740px; - // height: 420px; margin: 0; box-sizing: border-box; position: relative; .JoL-player { - width: 100%; - height: 100%; + @include wh(100%, 100%); background-color: #000; - position: absolute; - top: 0; - left: 0; + @include position(absolute, 0, auto, auto, 0); z-index: 1; } - .light-off-mask { - position: fixed; - left: 0; - top: 0; + .JoL-light-off-mask { + @include wh(100vw, 100vh); + @include position(fixed, 0, auto, auto, 0); z-index: 0; - width: 100vw; - height: 100vh; background-color: rgba(0, 0, 0, 0.9); display: none; } .video-no-useful-tip, .buffering-animation { - position: absolute; - left: 0; - top: 50%; + @include wh(100%, 100px); + @include position(fixed, 50%, auto, auto, 0); + @include style(16px, #fff); margin-top: -50px; - width: 100%; - height: 100px; - font-size: 16px; text-align: center; line-height: 100px; - color: #fff; z-index: 99; } - .buffering-animation { - .bufferring-dot { - display: inline-block; - vertical-align: middle; - width: 100px; - line-height: 100px; - animation: dot-ami 1s infinite; - overflow: hidden; - } - } .player-loading { - position: absolute; - top: 50%; - left: 50%; + @include position(absolute, 50%, auto, auto, 50%); z-index: 30; transform: translate(-50%, -50%); } } - -@keyframes dot-ami { - 0% { - width: 4px; - } - 50% { - width: 8px; - } - 100% { - width: 12px; - } -} diff --git a/src/core/index.tsx b/src/core/index.tsx index c39ac12..c8c7103 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -152,7 +152,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref -
          +
          diff --git a/src/core/progress/index.scss b/src/core/progress/index.scss index f3f8370..3774ce1 100644 --- a/src/core/progress/index.scss +++ b/src/core/progress/index.scss @@ -1,3 +1,4 @@ +@import 'src/assets/css/mixin.scss'; @keyframes example { from { opacity: 0; @@ -18,66 +19,48 @@ transform: scale(1.5); } } -.progress-container { +.JoL-progress-container { transition: all 0.5s; width: 100%; .progress-bg { transition: all 0.3s; - width: 100%; - height: 5px; + @include wh(100%, 5px); background: rgba(255, 255, 255, 0.2); border-radius: 2px; position: relative; .progress-buffered { - position: absolute; + @include wh(0%, 100%); + @include position(absolute, 0, auto, auto, 0); z-index: 1; - top: 0; - left: 0; - width: 0%; - height: 100%; border-radius: 2px; background: rgba(255, 255, 255, 0.5); } .progress-played { - position: absolute; + @include wh(0%, 100%); + @include position(absolute, 0, auto, auto, 0); z-index: 2; - top: 0; - left: 0; - width: 0%; - height: 100%; border-radius: 2px; - // background: #fbc100; .progress-scrubber { transition: all 0.3s; - position: absolute; - right: -5px; - top: -50%; + @include wh(12px, 12px); + @include position(absolute, -50%, -5px, auto, auto); margin-top: -1px; - width: 12px; - height: 12px; border-radius: 50%; - // background-color: #fbc100; } } .progress-seek-mask { - position: absolute; + @include wh(100%, calc(100% + 6px)); + @include position(absolute, -3px, auto, auto, 0); z-index: 100; - top: -3px; - left: 0; - width: 100%; - height: calc(100% + 6px); &:hover { cursor: pointer; } } .pointer { - position: absolute; - left: 714px; - top: 0; + @include position(absolute, 0, auto, auto, 714px); .top-triangle, .bottom-triangle { - width: 0; - height: 0; + @include wh(0, 0); position: absolute; border-right: 4px solid transparent; border-left: 4px solid transparent; @@ -94,26 +77,18 @@ } } .video-img-box { - position: absolute; - top: -120px; - left: 0px; - width: 169px; - height: 96px; + @include wh(169px, 96px); + @include position(absolute, -120px, auto, auto, 0); margin-left: calc(-169px / 2); - // background-color: aliceblue; .video-current-img { - width: 100%; - height: 100%; + @include wh(100%, 100%); } .current-time { - position: absolute; - bottom: 0; - left: 50%; + @include position(absolute, auto, auto, 0, 50%); + @include style(12px, #fff); transform: translateX(-50%); background-color: #222222; - color: #fff; padding: 0 5px; - font-size: 12px; } } } diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx index fc6c181..a57ec75 100644 --- a/src/core/progress/index.tsx +++ b/src/core/progress/index.tsx @@ -171,7 +171,7 @@ const Index = memo(function Index(props) { return (