tencent.jquery.pix.component 1.0.77 → 1.0.79

package/components/video/videocss.scss

@@ -1,506 +1,513 @@
-$jqpix-video-progress-bold-scale: 2 !default;
-$jqpix-video-primary-color: #ff6429 !default;
-
-.myplayer-shrink1 {
-  flex-shrink: 1;
-}
-
-.myplayer-grow1 {
-  flex-grow: 1;
-  flex-basis: 0;
-}
-
-.myplayer-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transform-origin: left center;
-  transform: scaleY(1);
-  background-color: #000;
-  overflow: hidden;
-}
-
-.myplayer-container.myplayer-full-screen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  // width: 71%;
-  // height: 68%;
-  width: 100%;
-  height: 100%;
-  z-index: 99999;
-  transform: translate3d(0, 0, 0);
-  // margin-left: 15%;
-  // margin-top: 22%;
-}
-
-.myplayer-container,
-.myplayer-container * {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  border: none;
-  border-radius: 0;
-  font-size: 100%;
-  font-weight: normal;
-  line-height: 1;
-  text-decoration: none;
-  vertical-align: middle;
-  user-select: none;
-  -webkit-user-select: none;
-  -webkit-text-size-adjust: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-
-.myplayer-container video,
-.temp-div {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  z-index: 1;
-}
-
-.myplayer-container .myplayer-video-mask {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.2);
-  justify-content: center;
-  align-items: center;
-}
-
-.myplayer-container .myplayer-video-mask.myplayer-transparent {
-  opacity: 0;
-}
-
-.myplayer-container .myplayer-btn-big-play {
-  width: 2rem;
-  height: 2rem;
-  background: url(resources/images/origin-play.png) no-repeat;
-  background-size: 100% 100%;
-}
-
-.myplayer-container.myplayer-full-screen .myplayer-btn-big-play {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.myplayer-container .myplayer-btn-big-play.myplayer-transparent {
-  opacity: 0;
-}
-
-.myplayer-container .myplayer-top {
-  position: absolute;
-  width: 100%;
-  height: 0.86rem;
-  top: 0;
-  left: 0;
-  z-index: 3;
-  padding: 0 0.34rem;
-  box-sizing: border-box;
-  justify-content: start;
-  align-items: center;
-  background: linear-gradient(
-    rgba(0, 0, 0, 0.6),
-    rgba(0, 0, 0, 0.4),
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0)
-  );
-  opacity: 1;
-  transform: translateY(0);
-  transition: transform 0.5s, opacity 0.5s;
-}
-
-.myplayer-container .myplayer-top.myplayer-transparent {
-  transform: translateY(-80%);
-  opacity: 0;
-}
-
-.myplayer-container .myplayer-type {
-  width: auto;
-  height: 0.25rem;
-  font-size: 0.18rem;
-  line-height: 0.25rem;
-  color: #e5fd0e;
-  padding: 0 0.14rem;
-  margin-right: 0.12rem;
-  box-sizing: border-box;
-  border: 0.01rem #e5fd0e solid;
-  border-radius: 0.04rem;
-  flex-shrink: 0;
-}
-
-.myplayer-container .myplayer-title {
-  width: 0;
-  flex-grow: 1;
-  font-size: 0.24rem;
-  color: #fff;
-  line-height: 0.25rem;
-  height: 0.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.myplayer-container .myplayer-bottom {
-  position: absolute;
-  width: 100%;
-  // height: 0.86rem;
-  bottom: 0;
-  left: 0;
-  z-index: 3;
-  box-sizing: border-box;
-  background: linear-gradient(
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0.4),
-    rgba(0, 0, 0, 0.6)
-  );
-  opacity: 1;
-  transform: translateY(0);
-  transition: transform 0.5s, opacity 0.5s;
-}
-
-.myplayer-container .myplayer-bottom.myplayer-transparent {
-  transform: translateY(80%);
-  opacity: 0;
-}
-
-.myplayer-container .myplayer-control {
-  position: relative;
-  width: 100%;
-  // height: 0.6rem;
-  flex-direction: column;
-}
-
-// .myplayer-contain .myplayer-control>* {
-//   margin: 0 0.1rem;
-// }
-.myplayer-container .myplayer-btn-play,.myplayer-container .myplayer-btn-pause {
-  background-position: center center;
-  background-size: 0.6rem 0.75rem;
-  box-sizing: border-box;
-  width: 1.75rem;
-  height: 0.75rem;
-}
-.myplayer-container .myplayer-btn-play {
-  background-image: url(resources/images/play.png);
-  background-repeat: no-repeat;
-}
-
-.myplayer-container .myplayer-btn-pause {
-  background-image: url(resources/images/pause.png);
-  background-repeat: no-repeat;
-}
-// 全屏时，尺寸进行变更
-.myplayer-container  .myplayer-bottom.myplayer-full-screen .myplayer-btn-play,.myplayer-container .myplayer-bottom.myplayer-full-screen .myplayer-btn-pause {
-  width: 1.95rem;
-}
-// 全屏时扩大缩小位置变更
-.myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-full-screen, .myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-exit-full-screen{
-  right:0rem;
-}
-// 缩小时的缩小图标样式
-.myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-exit-full-screen div{
-  width: 0.72rem;
-  height: 0.65rem;
-}
-
-.myplayer-container .myplayer-btn-replay {
-  width: 0.53rem;
-  height: 0.52rem;
-  background: url(resources/images/replay.png) no-repeat;
-  background-size: 100% 100%;
-}
-
-.myplayer-container .myplayer-playtime,
-.myplayer-container .myplayer-totaltime,
-.myplayer-container .myplayer-divide {
-  font-size: 0.36rem;
-  line-height: 0.36rem;
-  color: #fff;
-  vertical-align: middle;
-}
-
-.myplayer-container .myplayer-playtime {
-  margin-left: 0.2rem;
-}
-.myplayer-container .myplayer-divide {
-  margin: 0 0.1rem;
-}
-
-.myplayer-container .myplayer-progress {
-  position: relative;
-  width: 0;
-  height: 0.2rem;
-  flex-grow: 1;
-  border-radius: 0.06rem;
-  margin-top: 0.03rem;
-
-  &.myplayer-progress-bold {
-    transform: scaleY($jqpix-video-progress-bold-scale);
-  }
-}
-
-.myplayer-container .myplayer-progress-bg,
-.myplayer-container .myplayer-subprogress {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  height: 0.1rem;
-  // margin-top: -0.03rem;
-  // border-radius: 0.06rem;
-}
-
-.myplayer-container .myplayer-progress-bg {
-  width: 100%;
-  background-color: #8d8f91;
-}
-
-.myplayer-container .myplayer-subprogress {
-  width: 0;
-  background-color: $jqpix-video-primary-color;
-  /*transition: width 1s linear;*/
-  max-width: 100%;
-}
-
-.myplayer-container .myplayer-subprogress div {
-  content: "";
-  position: absolute;
-  width: 0.14rem;
-  height: 0.14rem;
-  top: 50%;
-  right: -0.07rem;
-  margin-top: -0.07rem;
-  transform: rotate(45deg);
-  background-color: #e5fd0e;
-}
-
-.myplayer-container .myplayer-resolution {
-  position: relative;
-  // height: 0.2rem;
-  width: auto;
-  margin: 0 0.3rem;
-}
-
-.myplayer-container .myplayer-resolution > text {
-  font-size: 0.36rem;
-  line-height: 0.36rem;
-  color: #fff;
-  vertical-align: middle;
-}
-
-.myplayer-container .myplayer-resolutionlist {
-  display: none;
-  position: absolute;
-  width: auto;
-  height: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 160%;
-  padding: 0.08rem;
-  border-radius: 0.1rem;
-  box-sizing: border-box;
-  background-color: #1c1c1c;
-  flex-direction: column;
-}
-
-.myplayer-container .myplayer-resolutionlist text {
-  font-size: 0.2rem;
-  color: #fff;
-  line-height: 0.38rem;
-  vertical-align: middle;
-  padding: 0 0.23rem;
-  box-sizing: border-box;
-  border-radius: 0.1rem;
-  padding: 0 0.32rem;
-  flex-grow: 1;
-}
-
-.myplayer-container .myplayer-resolutionlist text.on {
-  background-color: #323232;
-}
-
-.myplayer-container .myplayer-volume {
-  position: relative;
-  width: 2rem;
-  height: 1.2rem;
-  justify-content: center;
-  align-items: center;
-}
-
-.myplayer-container .myplayer-volume-icon,
-.myplayer-container .myplayer-volume-off-icon {
-  width: 0.62rem;
-  height: 0.57rem;
-}
-
-.myplayer-container .myplayer-volume-icon {
-  background: url("./resources/images/volume.png") no-repeat center / 100%;
-}
-
-.myplayer-container .myplayer-volume-off-icon {
-  background: url("./resources/images/mute.png") no-repeat center / 100%;
-}
-
-.myplayer-transparent .myplayer-volume-rate {
-  display: none;
-}
-
-.myplayer-container .myplayer-volume-rate {
-  position: absolute;
-  width: 1.4rem;
-  height: 5rem;
-  bottom: 160%;
-  left: 50%;
-  margin-left: -0.7rem;
-  padding: 0.08rem 0 0.1rem;
-  border-radius: 0.1rem;
-  box-sizing: border-box;
-  background-color: #1c1c1c;
-  flex-direction: column;
-  align-items: center;
-}
-
-.myplayer-container .myplayer-volume-rate text {
-  line-height: 0.28rem;
-  margin-top: 0.2rem;
-  margin-bottom: 0.1rem;
-  font-size: 0.36rem;
-  text-align: center;
-  vertical-align: middle;
-  color: #fff;
-}
-
-.myplayer-container .myplayer-volume-line {
-  position: relative;
-  width: 0.2rem;
-  height: 0;
-  flex-grow: 1;
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.myplayer-container .myplayer-volume-linebg,
-.myplayer-container .myplayer-volume-subline {
-  position: absolute;
-  width: 0.2rem;
-  height: 100%;
-  border-radius: 0.1rem;
-  bottom: 0;
-  left: 50%;
-  margin-left: -0.1rem;
-}
-
-.myplayer-container .myplayer-volume-linebg {
-  background-color: #c3c3c3;
-}
-
-.myplayer-container .myplayer-volume-subline {
-  background-color: $jqpix-video-primary-color;
-}
-
-.myplayer-container .myplayer-volume-subline div {
-  content: "";
-  position: absolute;
-  width: 0.5rem;
-  height: 0.5rem;
-  left: 50%;
-  top: -0.25rem;
-  margin-left: -0.25rem;
-  background-color: $jqpix-video-primary-color;
-  border-radius: 0.25rem;
-}
-
-.myplayer-control .myplayer-btn-full-screen,
-.myplayer-control .myplayer-btn-exit-full-screen {
-  background: none;
-  width: 2rem;
-  height: 1.2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.myplayer-control .myplayer-btn-full-screen div {
-  width: 0.62rem;
-  height: 0.57rem;
-  background: url(resources/images/full-screen.png) no-repeat;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.myplayer-control .myplayer-btn-exit-full-screen div {
-  width: 0.52rem;
-  height: 0.5rem;
-  background: url(resources/images/exit-full-screen.png) no-repeat;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.myplayer-top .myplay-back {
-  width: 0.8rem;
-  height: 100%;
-  margin-left: -0.34rem;
-  justify-content: center;
-  align-items: center;
-}
-.myplayer-top .myplay-back div {
-  width: 0.26rem;
-  height: 0.26rem;
-  margin-left: 0.15rem;
-  border: 0.02rem rgba(255, 255, 255, 0.6) solid;
-  transform: rotate(-45deg);
-  border-bottom-width: 0;
-  border-right-width: 0;
-}
-
-.full-screen-mask {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.myplayer-btns {
-  margin: 0.35rem 0.15rem 0.35rem 0.2rem;
-  justify-content: space-between;
-}
-
-.myplayer-btns-left {
-  align-items: center;
-}
-
-.myplayer-btns-right {
-  align-items: center;
-  position: relative;
-}
-
-.myplayer-video-cover {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.3);
-  background-image: url(resources/images/origin-play.png);
-  background-size: 2.16rem 2.16rem;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.myplayer-video-preview {
-  left:0;
-  top:0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 1;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-}
+$jqpix-video-progress-bold-scale: 2 !default;
+$jqpix-video-progress-handle-bold-scale: 0.5 !default;
+$jqpix-video-primary-color: #ff6429 !default;
+
+@use "sass:math";
+
+.myplayer-shrink1 {
+  flex-shrink: 1;
+}
+
+.myplayer-grow1 {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.myplayer-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-origin: left center;
+  transform: scaleY(1);
+  background-color: #000;
+  overflow: hidden;
+}
+
+.myplayer-container.myplayer-full-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  // width: 71%;
+  // height: 68%;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  transform: translate3d(0, 0, 0);
+  // margin-left: 15%;
+  // margin-top: 22%;
+}
+
+.myplayer-container,
+.myplayer-container * {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  font-size: 100%;
+  font-weight: normal;
+  line-height: 1;
+  text-decoration: none;
+  vertical-align: middle;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+.myplayer-container video,
+.temp-div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  z-index: 1;
+}
+
+.myplayer-container .myplayer-video-mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.2);
+  justify-content: center;
+  align-items: center;
+}
+
+.myplayer-container .myplayer-video-mask.myplayer-transparent {
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-btn-big-play {
+  width: 2rem;
+  height: 2rem;
+  background: url(resources/images/origin-play.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.myplayer-container.myplayer-full-screen .myplayer-btn-big-play {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.myplayer-container .myplayer-btn-big-play.myplayer-transparent {
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-top {
+  position: absolute;
+  width: 100%;
+  height: 0.86rem;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  padding: 0 0.34rem;
+  box-sizing: border-box;
+  justify-content: start;
+  align-items: center;
+  background: linear-gradient(
+    rgba(0, 0, 0, 0.6),
+    rgba(0, 0, 0, 0.4),
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0)
+  );
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.myplayer-container .myplayer-top.myplayer-transparent {
+  transform: translateY(-80%);
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-type {
+  width: auto;
+  height: 0.25rem;
+  font-size: 0.18rem;
+  line-height: 0.25rem;
+  color: #e5fd0e;
+  padding: 0 0.14rem;
+  margin-right: 0.12rem;
+  box-sizing: border-box;
+  border: 0.01rem #e5fd0e solid;
+  border-radius: 0.04rem;
+  flex-shrink: 0;
+}
+
+.myplayer-container .myplayer-title {
+  width: 0;
+  flex-grow: 1;
+  font-size: 0.24rem;
+  color: #fff;
+  line-height: 0.25rem;
+  height: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.myplayer-container .myplayer-bottom {
+  position: absolute;
+  width: 100%;
+  // height: 0.86rem;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  box-sizing: border-box;
+  background: linear-gradient(
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0.4),
+    rgba(0, 0, 0, 0.6)
+  );
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.myplayer-container .myplayer-bottom.myplayer-transparent {
+  transform: translateY(80%);
+  opacity: 0;
+}
+
+.myplayer-container .myplayer-control {
+  position: relative;
+  width: 100%;
+  // height: 0.6rem;
+  flex-direction: column;
+}
+
+// .myplayer-contain .myplayer-control>* {
+//   margin: 0 0.1rem;
+// }
+.myplayer-container .myplayer-btn-play,.myplayer-container .myplayer-btn-pause {
+  background-position: center center;
+  background-size: 0.6rem 0.75rem;
+  box-sizing: border-box;
+  width: 1.75rem;
+  height: 0.75rem;
+}
+.myplayer-container .myplayer-btn-play {
+  background-image: url(resources/images/play.png);
+  background-repeat: no-repeat;
+}
+
+.myplayer-container .myplayer-btn-pause {
+  background-image: url(resources/images/pause.png);
+  background-repeat: no-repeat;
+}
+// 全屏时，尺寸进行变更
+.myplayer-container  .myplayer-bottom.myplayer-full-screen .myplayer-btn-play,.myplayer-container .myplayer-bottom.myplayer-full-screen .myplayer-btn-pause {
+  width: 1.95rem;
+}
+// 全屏时扩大缩小位置变更
+.myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-full-screen, .myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-exit-full-screen{
+  right:0rem;
+}
+// 缩小时的缩小图标样式
+.myplayer-bottom.myplayer-full-screen .myplayer-control .myplayer-btn-exit-full-screen div{
+  width: 0.72rem;
+  height: 0.65rem;
+}
+
+.myplayer-container .myplayer-btn-replay {
+  width: 0.53rem;
+  height: 0.52rem;
+  background: url(resources/images/replay.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.myplayer-container .myplayer-playtime,
+.myplayer-container .myplayer-totaltime,
+.myplayer-container .myplayer-divide {
+  font-size: 0.36rem;
+  line-height: 0.36rem;
+  color: #fff;
+  vertical-align: middle;
+}
+
+.myplayer-container .myplayer-playtime {
+  margin-left: 0.2rem;
+}
+.myplayer-container .myplayer-divide {
+  margin: 0 0.1rem;
+}
+
+.myplayer-container .myplayer-progress {
+  position: relative;
+  width: 0;
+  height: 0.2rem;
+  flex-grow: 1;
+  border-radius: 0.06rem;
+  margin-top: 0.03rem;
+
+  &.myplayer-progress-bold {
+    transform: scaleY($jqpix-video-progress-bold-scale);
+  }
+}
+
+.myplayer-container .myplayer-progress-bg,
+.myplayer-container .myplayer-subprogress {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 0.1rem;
+  // margin-top: -0.03rem;
+  // border-radius: 0.06rem;
+}
+
+.myplayer-container .myplayer-progress-bg {
+  width: 100%;
+  background-color: #8d8f91;
+}
+
+.myplayer-container .myplayer-subprogress {
+  width: 0;
+  background-color: $jqpix-video-primary-color;
+  /*transition: width 1s linear;*/
+  max-width: 100%;
+}
+
+.myplayer-container .myplayer-subprogress .myplayer-progress-handle {
+  content: "";
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  top: 50%;
+  right: -0.25rem;
+  margin-top: -0.25rem;
+  border-radius: 0.25rem;
+  background-color: $jqpix-video-primary-color;
+}
+
+.myplayer-container .myplayer-progress-bold .myplayer-subprogress .myplayer-progress-handle {
+  transform: scaleY($jqpix-video-progress-handle-bold-scale);
+}
+
+.myplayer-container .myplayer-resolution {
+  position: relative;
+  // height: 0.2rem;
+  width: auto;
+  margin: 0 0.3rem;
+}
+
+.myplayer-container .myplayer-resolution > text {
+  font-size: 0.36rem;
+  line-height: 0.36rem;
+  color: #fff;
+  vertical-align: middle;
+}
+
+.myplayer-container .myplayer-resolutionlist {
+  display: none;
+  position: absolute;
+  width: auto;
+  height: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 160%;
+  padding: 0.08rem;
+  border-radius: 0.1rem;
+  box-sizing: border-box;
+  background-color: #1c1c1c;
+  flex-direction: column;
+}
+
+.myplayer-container .myplayer-resolutionlist text {
+  font-size: 0.2rem;
+  color: #fff;
+  line-height: 0.38rem;
+  vertical-align: middle;
+  padding: 0 0.23rem;
+  box-sizing: border-box;
+  border-radius: 0.1rem;
+  padding: 0 0.32rem;
+  flex-grow: 1;
+}
+
+.myplayer-container .myplayer-resolutionlist text.on {
+  background-color: #323232;
+}
+
+.myplayer-container .myplayer-volume {
+  position: relative;
+  width: 2rem;
+  height: 1.2rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.myplayer-container .myplayer-volume-icon,
+.myplayer-container .myplayer-volume-off-icon {
+  width: 0.62rem;
+  height: 0.57rem;
+}
+
+.myplayer-container .myplayer-volume-icon {
+  background: url("./resources/images/volume.png") no-repeat center / 100%;
+}
+
+.myplayer-container .myplayer-volume-off-icon {
+  background: url("./resources/images/mute.png") no-repeat center / 100%;
+}
+
+.myplayer-transparent .myplayer-volume-rate {
+  display: none;
+}
+
+.myplayer-container .myplayer-volume-rate {
+  position: absolute;
+  width: 1.4rem;
+  height: 5rem;
+  bottom: 160%;
+  left: 50%;
+  margin-left: -0.7rem;
+  padding: 0.08rem 0 0.1rem;
+  border-radius: 0.1rem;
+  box-sizing: border-box;
+  background-color: #1c1c1c;
+  flex-direction: column;
+  align-items: center;
+}
+
+.myplayer-container .myplayer-volume-rate text {
+  line-height: 0.28rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.1rem;
+  font-size: 0.36rem;
+  text-align: center;
+  vertical-align: middle;
+  color: #fff;
+}
+
+.myplayer-container .myplayer-volume-line {
+  position: relative;
+  width: 0.2rem;
+  height: 0;
+  flex-grow: 1;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.myplayer-container .myplayer-volume-linebg,
+.myplayer-container .myplayer-volume-subline {
+  position: absolute;
+  width: 0.2rem;
+  height: 100%;
+  border-radius: 0.1rem;
+  bottom: 0;
+  left: 50%;
+  margin-left: -0.1rem;
+}
+
+.myplayer-container .myplayer-volume-linebg {
+  background-color: #c3c3c3;
+}
+
+.myplayer-container .myplayer-volume-subline {
+  background-color: $jqpix-video-primary-color;
+}
+
+.myplayer-container .myplayer-volume-subline div {
+  content: "";
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  left: 50%;
+  top: -0.25rem;
+  margin-left: -0.25rem;
+  background-color: $jqpix-video-primary-color;
+  border-radius: 0.25rem;
+}
+
+.myplayer-control .myplayer-btn-full-screen,
+.myplayer-control .myplayer-btn-exit-full-screen {
+  background: none;
+  width: 2rem;
+  height: 1.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.myplayer-control .myplayer-btn-full-screen div {
+  width: 0.62rem;
+  height: 0.57rem;
+  background: url(resources/images/full-screen.png) no-repeat;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.myplayer-control .myplayer-btn-exit-full-screen div {
+  width: 0.52rem;
+  height: 0.5rem;
+  background: url(resources/images/exit-full-screen.png) no-repeat;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.myplayer-top .myplay-back {
+  width: 0.8rem;
+  height: 100%;
+  margin-left: -0.34rem;
+  justify-content: center;
+  align-items: center;
+}
+.myplayer-top .myplay-back div {
+  width: 0.26rem;
+  height: 0.26rem;
+  margin-left: 0.15rem;
+  border: 0.02rem rgba(255, 255, 255, 0.6) solid;
+  transform: rotate(-45deg);
+  border-bottom-width: 0;
+  border-right-width: 0;
+}
+
+.full-screen-mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.myplayer-btns {
+  margin: 0.35rem 0.15rem 0.35rem 0.2rem;
+  justify-content: space-between;
+}
+
+.myplayer-btns-left {
+  align-items: center;
+}
+
+.myplayer-btns-right {
+  align-items: center;
+  position: relative;
+}
+
+.myplayer-video-cover {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.3);
+  background-image: url(resources/images/origin-play.png);
+  background-size: 2.16rem 2.16rem;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.myplayer-video-preview {
+  left:0;
+  top:0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}