|
@@ -1,133 +1,142 @@
|
|
|
.videoWrap {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
-.content{
|
|
|
- height: 100%;
|
|
|
- padding: 8% 20px;
|
|
|
+
|
|
|
+.content {
|
|
|
+ height: 100%;
|
|
|
+ padding: 8% 20px;
|
|
|
}
|
|
|
-.contentWrap{
|
|
|
+
|
|
|
+.contentWrap {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ canvas {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- canvas{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.controls {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- height: 80px;
|
|
|
- background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 80px;
|
|
|
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ transition: all 0.5s;
|
|
|
+
|
|
|
+ &.hide {
|
|
|
+ transform: translateY(100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- transition: all 0.5s;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 4px 20px;
|
|
|
+ }
|
|
|
|
|
|
- &.hide{
|
|
|
- transform: translateY(100%);
|
|
|
- }
|
|
|
+ .slider {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
|
|
|
- .time {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ :global {
|
|
|
+ .n-slider {
|
|
|
+ --n-handle-size: 13px !important;
|
|
|
+ --n-fill-color: var(--van-primary-color) !important;
|
|
|
+ --n-fill-color-hover: var(--van-primary-color) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-loading {
|
|
|
width: 100%;
|
|
|
- color: #fff;
|
|
|
- font-size: 10px;
|
|
|
- padding: 4px 20px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .slider {
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px;
|
|
|
- :global {
|
|
|
- .n-slider{
|
|
|
- --n-handle-size: 13px !important;
|
|
|
- --n-fill-color: var(--van-primary-color) !important;
|
|
|
- --n-fill-color-hover: var(--van-primary-color) !important;
|
|
|
- }
|
|
|
- .van-loading {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .actions {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 20px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .actionWrap {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actionBtn {
|
|
|
+ display: flex;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ padding: 4px 0;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actionBtn>img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
- .actions {
|
|
|
- display: flex;
|
|
|
+ :global {
|
|
|
+ .van-loading__circular {
|
|
|
width: 100%;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- padding: 0 20px;
|
|
|
- align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .actionWrap {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
+ .playIcon {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- .actionBtn {
|
|
|
- display: flex;
|
|
|
- width: 38px;
|
|
|
- height: 38px;
|
|
|
- padding: 4px 0;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
+ .btnPlay img:nth-child(2) {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
|
|
|
- .actionBtn>img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .btnPause img:nth-child(3) {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
|
|
|
- :global {
|
|
|
- .van-loading__circular {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .btnPlay,
|
|
|
+ .btnPause {
|
|
|
+ :global {
|
|
|
+ .van-loading {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .playIcon {
|
|
|
- display: none;
|
|
|
+ .loopBtn {
|
|
|
+ :global {
|
|
|
+ .loop {
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
- .btnPlay img:nth-child(2) {
|
|
|
- display: block;
|
|
|
+ .loopActive {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .btnPause img:nth-child(3) {
|
|
|
- display: block;
|
|
|
+ .loopBtn.active {
|
|
|
+ :global {
|
|
|
+ .loop {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
- .btnPlay,
|
|
|
- .btnPause {
|
|
|
- :global {
|
|
|
- .van-loading {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .loopBtn{
|
|
|
- :global{
|
|
|
- .loop{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .loopActive{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .loopBtn.active{
|
|
|
- :global{
|
|
|
- .loop{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .loopActive{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
+ .loopActive {
|
|
|
+ display: block;
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
}
|