|
|
|
|
@ -1,21 +1,17 @@
@@ -1,21 +1,17 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="bg-video"> |
|
|
|
|
<!-- <video :src="video.videoUrl" poster="../assets/img/icon/components/video/loading.gif" ref="video" muted :autoplay="play" loop>--> |
|
|
|
|
<!-- poster="../assets/img/poster/1.jpg"--> |
|
|
|
|
<div class="video-wrapper" ref="videoWrapper" :class="name"> |
|
|
|
|
<video :src="video.video" |
|
|
|
|
:poster="video.origin_cover" |
|
|
|
|
ref="video" |
|
|
|
|
muted |
|
|
|
|
preload |
|
|
|
|
:autoplay="play" loop> |
|
|
|
|
:autoplay="isPlay" loop> |
|
|
|
|
<p> 您的浏览器不支持 video 标签。</p> |
|
|
|
|
</video> |
|
|
|
|
<div class="float-container" v-if="true" @click.stop="togglePlayVideo"> |
|
|
|
|
<transition name="pause"> |
|
|
|
|
<img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"> |
|
|
|
|
</transition> |
|
|
|
|
<div class="float"> |
|
|
|
|
<div :style="{opacity:isMove?0:1}" class="normal"> |
|
|
|
|
<img src="../assets/img/icon/play.svg" class="pause" v-if="!isPlaying"> |
|
|
|
|
<div class="float" @click.stop="checkDbClick"> |
|
|
|
|
<!-- @click.stop="togglePlayVideo" --> |
|
|
|
|
<div :style="{opacity:isMove ? 0:1}" class="normal"> |
|
|
|
|
<div class="toolbar mb1r"> |
|
|
|
|
<div class="avatar-ctn mb2r"> |
|
|
|
|
<img class="avatar" :src="lVideo.author.avatar" alt="" |
|
|
|
|
@ -51,14 +47,13 @@
@@ -51,14 +47,13 @@
|
|
|
|
|
<div v-else class="share mb4r" @click.stop="$emit('showShare')"> |
|
|
|
|
<img src="../assets/img/icon/share.svg" alt="" class="share-image"> |
|
|
|
|
</div> |
|
|
|
|
<div class="music-ctn"> |
|
|
|
|
<img class="music1" src="../assets/img/icon/home/music1.png" alt=""> |
|
|
|
|
<img class="music2" src="../assets/img/icon/home/music2.png" alt=""> |
|
|
|
|
<div class="music-bg"> |
|
|
|
|
<img class="music" :src="lVideo.music.cover" alt="" |
|
|
|
|
@click.stop="globalMethods.$nav('/music')"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<BaseMusic |
|
|
|
|
:cover="lVideo.music.cover" |
|
|
|
|
:key="name" |
|
|
|
|
:name="name" |
|
|
|
|
:isPlay="isPlay" |
|
|
|
|
@click.stop="$emit('goMusic')" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div class="content ml1r mb1r" v-if="!isMy"> |
|
|
|
|
<div class="name mb1r">{{ lVideo.author.name }}</div> |
|
|
|
|
@ -67,13 +62,7 @@
@@ -67,13 +62,7 @@
|
|
|
|
|
</div> |
|
|
|
|
<div class="music" @click.stop="$nav('/music')"> |
|
|
|
|
<img src="../assets/img/icon/music.svg" alt="" class="music-image"> |
|
|
|
|
<!-- <marquee behavior=scroll direction=left align=middle scrollamount=4>{{ lVideo.music.title }}</marquee>--> |
|
|
|
|
<!-- <div class="marquee" behavior=scroll direction=left align=middle scrollamount=4>--> |
|
|
|
|
<!-- {{ lVideo.music.title }}--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
<div class="marquee"> |
|
|
|
|
<p> {{ lVideo.music.title }}{{ lVideo.music.title }}</p> |
|
|
|
|
</div> |
|
|
|
|
<BaseMarquee :key="name" :name="name" :isPlay="isPlay" :text="lVideo.music.title"/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-else class="comment-status"> |
|
|
|
|
@ -99,7 +88,7 @@
@@ -99,7 +88,7 @@
|
|
|
|
|
</div> |
|
|
|
|
<div class="process" |
|
|
|
|
v-if="duration > 60" |
|
|
|
|
:class="isMove ? '' : isPlaying && 'stop'" |
|
|
|
|
:class="processClass" |
|
|
|
|
@touchmove="move" |
|
|
|
|
@touchend="end" |
|
|
|
|
> |
|
|
|
|
@ -112,14 +101,20 @@
@@ -112,14 +101,20 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import globalMethods from '../utils/global-methods' |
|
|
|
|
import BaseMarquee from "./BaseMarquee"; |
|
|
|
|
import Dom from "../utils/dom"; |
|
|
|
|
import BaseMusic from "./BaseMusic"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "Video", |
|
|
|
|
components: { |
|
|
|
|
BaseMarquee, |
|
|
|
|
BaseMusic |
|
|
|
|
}, |
|
|
|
|
props: { |
|
|
|
|
video: { |
|
|
|
|
type: Object, |
|
|
|
|
@ -133,7 +128,8 @@ export default {
@@ -133,7 +128,8 @@ export default {
|
|
|
|
|
return -1 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
play: { |
|
|
|
|
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟 |
|
|
|
|
isPlay: { |
|
|
|
|
type: Boolean, |
|
|
|
|
default: () => { |
|
|
|
|
return true |
|
|
|
|
@ -149,25 +145,36 @@ export default {
@@ -149,25 +145,36 @@ export default {
|
|
|
|
|
computed: { |
|
|
|
|
durationStyle() { |
|
|
|
|
return {left: this.pageX + 'px'} |
|
|
|
|
}, |
|
|
|
|
processClass() { |
|
|
|
|
if (this.isMove) { |
|
|
|
|
return 'stop' |
|
|
|
|
} else { |
|
|
|
|
return this.isPlaying ? '' : 'stop' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
name: `v-${this.index}-video`, |
|
|
|
|
globalMethods: globalMethods, |
|
|
|
|
duration: 0, |
|
|
|
|
step: 0, |
|
|
|
|
currentTime: 0, |
|
|
|
|
currentTime: -1, |
|
|
|
|
pageX: 0, |
|
|
|
|
height: 0, |
|
|
|
|
width: 0, |
|
|
|
|
isPlaying: !this.play, |
|
|
|
|
isPlaying: this.isPlay, |
|
|
|
|
isAttention: false, |
|
|
|
|
line: null, |
|
|
|
|
point: null, |
|
|
|
|
isMove: false, |
|
|
|
|
currentVideoId: 'a' + Date.now(), |
|
|
|
|
test: [1, 2], |
|
|
|
|
lVideo: this.video |
|
|
|
|
lVideo: this.video, |
|
|
|
|
lastClickTime: -1, |
|
|
|
|
clickTimer: null, |
|
|
|
|
dbClickTimer: null, |
|
|
|
|
isDbClick: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
@ -184,18 +191,99 @@ export default {
@@ -184,18 +191,99 @@ export default {
|
|
|
|
|
video.addEventListener('loadedmetadata', e => { |
|
|
|
|
this.duration = video.duration |
|
|
|
|
if (this.duration > 60) { |
|
|
|
|
// if (this.duration > 6) { |
|
|
|
|
this.step = this.width / Math.floor(this.duration) |
|
|
|
|
video.addEventListener('timeupdate', fun) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
video.addEventListener('play', e => { |
|
|
|
|
this.isPlaying = true |
|
|
|
|
|
|
|
|
|
let videoWrapper = new Dom(this.$refs.videoWrapper) |
|
|
|
|
videoWrapper.on('play', this.play) |
|
|
|
|
videoWrapper.on('stop', this.stop) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
dbClick(e) { |
|
|
|
|
console.log('dbclick') |
|
|
|
|
setTimeout(() => { |
|
|
|
|
let id = 'a' + Date.now() |
|
|
|
|
let elWidth = 80 |
|
|
|
|
let rotate = this.randomNum(0, 1) |
|
|
|
|
// let rotate = 1 |
|
|
|
|
let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">` |
|
|
|
|
let el = new Dom().create(template) |
|
|
|
|
el.css({top: e.y - elWidth, left: e.x - elWidth / 2,}) |
|
|
|
|
// new Dom().find('#home-index').append(el) |
|
|
|
|
document.querySelector('#home-index').appendChild(el.els[0]) |
|
|
|
|
// |
|
|
|
|
setTimeout(() => { |
|
|
|
|
new Dom().find(`#${id}`).remove() |
|
|
|
|
}, 1000) |
|
|
|
|
}) |
|
|
|
|
video.addEventListener('pause', e => { |
|
|
|
|
}, |
|
|
|
|
randomNum(minNum, maxNum) { |
|
|
|
|
switch (arguments.length) { |
|
|
|
|
case 1: |
|
|
|
|
return parseInt(Math.random() * minNum + 1, 10); |
|
|
|
|
case 2: |
|
|
|
|
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); |
|
|
|
|
default: |
|
|
|
|
return 0; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
checkDbClick(e) { |
|
|
|
|
let checkTime = 400 |
|
|
|
|
if (this.isDbClick) { |
|
|
|
|
this.dbClick(e) |
|
|
|
|
console.log('checkDbClick-dbclick1') |
|
|
|
|
clearTimeout(this.dbClickTimer); |
|
|
|
|
this.dbClickTimer = setTimeout(() => { |
|
|
|
|
this.isDbClick = false |
|
|
|
|
}, 400); |
|
|
|
|
} |
|
|
|
|
let nowTime = new Date().getTime(); |
|
|
|
|
if (nowTime - this.lastClickTime < checkTime) { |
|
|
|
|
this.dbClick(e) |
|
|
|
|
console.log('checkDbClick-dbclick2') |
|
|
|
|
|
|
|
|
|
this.lastClickTime = 0; |
|
|
|
|
this.clickTimer && clearTimeout(this.clickTimer); |
|
|
|
|
this.isDbClick = true |
|
|
|
|
this.dbClickTimer = setTimeout(() => { |
|
|
|
|
this.isDbClick = false |
|
|
|
|
}, checkTime); |
|
|
|
|
} else { |
|
|
|
|
this.lastClickTime = nowTime; |
|
|
|
|
this.clickTimer = setTimeout(() => { |
|
|
|
|
console.log('单击') |
|
|
|
|
this.togglePlayVideo() |
|
|
|
|
}, checkTime); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
play() { |
|
|
|
|
new Dom(`.${this.name}-marquee`).trigger('start') |
|
|
|
|
new Dom(`.${this.name}-music`).trigger('start') |
|
|
|
|
// console.log('trigger-play') |
|
|
|
|
this.isPlaying = true |
|
|
|
|
if (this.currentTime !== -1) { |
|
|
|
|
this.$refs.video.currentTime = this.currentTime |
|
|
|
|
} |
|
|
|
|
this.$refs.video.play() |
|
|
|
|
}, |
|
|
|
|
stop() { |
|
|
|
|
new Dom(`.${this.name}-marquee`).trigger('stop') |
|
|
|
|
new Dom(`.${this.name}-music`).trigger('stop') |
|
|
|
|
// console.log('trigger-stop') |
|
|
|
|
this.$refs.video.pause() |
|
|
|
|
this.isPlaying = false |
|
|
|
|
this.$refs.video.currentTime = 0 |
|
|
|
|
}, |
|
|
|
|
pause() { |
|
|
|
|
new Dom(`.${this.name}-marquee`).trigger('pause') |
|
|
|
|
new Dom(`.${this.name}-music`).trigger('pause') |
|
|
|
|
// console.log('trigger-pause') |
|
|
|
|
this.$refs.video.pause() |
|
|
|
|
this.isPlaying = false |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
$likeNum(v) { |
|
|
|
|
return globalMethods.$likeNum(v) |
|
|
|
|
}, |
|
|
|
|
@ -229,47 +317,15 @@ export default {
@@ -229,47 +317,15 @@ export default {
|
|
|
|
|
this.isAttention = true |
|
|
|
|
}, 1000) |
|
|
|
|
}, |
|
|
|
|
//划动到下一个视频 |
|
|
|
|
swipingVideo() { |
|
|
|
|
let videos = this.$refs.video |
|
|
|
|
if (this.currentIndex) { |
|
|
|
|
videos[this.currentIndex - 1].pause() |
|
|
|
|
} |
|
|
|
|
videos[this.currentIndex].play() |
|
|
|
|
videos[this.currentIndex].muted = false |
|
|
|
|
videos[this.currentIndex + 1].pause() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.isCommenting = false |
|
|
|
|
this.isSharing = false |
|
|
|
|
this.isPlaying = true |
|
|
|
|
}, |
|
|
|
|
//切换视频状态 |
|
|
|
|
togglePlayVideo(e) { |
|
|
|
|
if (this.isSharing) { |
|
|
|
|
this.isSharing = false |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
if (this.isCommenting) { |
|
|
|
|
this.isCommenting = false |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
let el = e.target |
|
|
|
|
let video = '' |
|
|
|
|
if (el.nodeName == 'IMG') { |
|
|
|
|
video = el.parentNode.previousSibling |
|
|
|
|
// console.log('togglePlayVideo') |
|
|
|
|
if (this.isPlaying) { |
|
|
|
|
this.pause() |
|
|
|
|
} else { |
|
|
|
|
video = el.previousSibling |
|
|
|
|
this.play() |
|
|
|
|
} |
|
|
|
|
video = this.$refs.video |
|
|
|
|
if (video.paused) { |
|
|
|
|
video.play() |
|
|
|
|
} else { |
|
|
|
|
video.pause() |
|
|
|
|
} |
|
|
|
|
this.isPlaying = !video.paused |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
loved(e, index) { |
|
|
|
|
this.lVideo.isLoved = !this.lVideo.isLoved |
|
|
|
|
this.$emit('update:video', this.lVideo) |
|
|
|
|
@ -280,8 +336,7 @@ export default {
@@ -280,8 +336,7 @@ export default {
|
|
|
|
|
move(e) { |
|
|
|
|
if (this.isPlaying) return |
|
|
|
|
this.isMove = true |
|
|
|
|
let video = this.$refs.video |
|
|
|
|
video.pause() |
|
|
|
|
this.pause() |
|
|
|
|
this.pageX = e.touches[0].pageX |
|
|
|
|
// console.log(this.step) |
|
|
|
|
this.currentTime = Math.ceil(Math.ceil(e.touches[0].pageX) / this.step) |
|
|
|
|
@ -293,9 +348,8 @@ export default {
@@ -293,9 +348,8 @@ export default {
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.isMove = false |
|
|
|
|
}, 1000) |
|
|
|
|
let video = this.$refs.video |
|
|
|
|
video.currentTime = this.currentTime = Math.ceil(Math.ceil(e.changedTouches[0].pageX) / this.step) |
|
|
|
|
video.play() |
|
|
|
|
this.currentTime = this.currentTime = Math.ceil(Math.ceil(e.changedTouches[0].pageX) / this.step) |
|
|
|
|
this.play() |
|
|
|
|
globalMethods.$stopPropagation(e) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -329,7 +383,7 @@ export default {
@@ -329,7 +383,7 @@ export default {
|
|
|
|
|
transform: scale(0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.bg-video { |
|
|
|
|
.video-wrapper { |
|
|
|
|
position: relative; |
|
|
|
|
background: black; |
|
|
|
|
font-size: 1.4rem; |
|
|
|
|
@ -342,18 +396,9 @@ export default {
@@ -342,18 +396,9 @@ export default {
|
|
|
|
|
/*position: absolute;*/ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.float-container { |
|
|
|
|
z-index: 1; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
height: calc(100vh - 60px); |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.pause { |
|
|
|
|
width: 60px; |
|
|
|
|
height: 60px; |
|
|
|
|
width: 4.5rem; |
|
|
|
|
height: 4.5rem; |
|
|
|
|
opacity: 0.5; |
|
|
|
|
position: absolute; |
|
|
|
|
margin: auto; |
|
|
|
|
@ -361,19 +406,38 @@ export default {
@@ -361,19 +406,38 @@ export default {
|
|
|
|
|
top: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
right: 0; |
|
|
|
|
animation: pause-animation 1.1s linear; |
|
|
|
|
|
|
|
|
|
@scale: scale(1.2); |
|
|
|
|
|
|
|
|
|
@keyframes pause-animation { |
|
|
|
|
0% { |
|
|
|
|
opacity: 0; |
|
|
|
|
transform: scale(2); |
|
|
|
|
} |
|
|
|
|
10% { |
|
|
|
|
opacity: 0.5; |
|
|
|
|
transform: @scale; |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
transform: @scale; |
|
|
|
|
opacity: 0.5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.float { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 0; |
|
|
|
|
top: 0; |
|
|
|
|
height: 100%; |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
.normal { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 1rem; |
|
|
|
|
width: 100%; |
|
|
|
|
transition: all .3s; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.toolbar { |
|
|
|
|
//width: 40px; |
|
|
|
|
@ -455,82 +519,6 @@ export default {
@@ -455,82 +519,6 @@ export default {
|
|
|
|
|
background: red; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.music-ctn { |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.music-bg { |
|
|
|
|
background-image: linear-gradient(black, #424242, black); |
|
|
|
|
border-radius: 50%; |
|
|
|
|
width: 50px; |
|
|
|
|
height: 50px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
animation: animations 5s linear forwards infinite; |
|
|
|
|
//display: none; |
|
|
|
|
|
|
|
|
|
.music { |
|
|
|
|
//display: none; |
|
|
|
|
width: 25px; |
|
|
|
|
height: 25px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.music1, .music2 { |
|
|
|
|
//display: none; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 18px; |
|
|
|
|
height: 18px; |
|
|
|
|
top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.music1 { |
|
|
|
|
animation: anim-music1 2s linear forwards infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.music2 { |
|
|
|
|
animation: anim-music1 2s linear forwards infinite; |
|
|
|
|
animation-delay: 1s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes animations { |
|
|
|
|
0% { |
|
|
|
|
transform: rotate(0deg);; |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
transform: rotate(360deg); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@keyframes anim-music1 { |
|
|
|
|
0% { |
|
|
|
|
transform: translate3d(0, 0, 0); |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
20% { |
|
|
|
|
transform: translate3d(-8px, 0px, 0) rotate(30deg); |
|
|
|
|
opacity: .3; |
|
|
|
|
} |
|
|
|
|
40% { |
|
|
|
|
transform: translate3d(-16px, -5px, 0) rotate(15deg); |
|
|
|
|
opacity: .5; |
|
|
|
|
} |
|
|
|
|
60% { |
|
|
|
|
transform: translate3d(-24px, -15px, 0) rotate(0deg); |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
80% { |
|
|
|
|
transform: translate3d(-32px, -30px, 0) rotate(-15deg); |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
transform: translate3d(-32px, -50px, 0) rotate(-30deg); |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
@ -550,37 +538,6 @@ export default {
@@ -550,37 +538,6 @@ export default {
|
|
|
|
|
height: 20px; |
|
|
|
|
margin-top: 3px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
marquee { |
|
|
|
|
margin-left: 1rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.marquee { |
|
|
|
|
color: white; |
|
|
|
|
width: 100%; |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.marquee p { |
|
|
|
|
margin: 0; |
|
|
|
|
padding-left: 100%; |
|
|
|
|
display: inline-block; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
animation-name: marquee; |
|
|
|
|
animation-timing-function: linear; |
|
|
|
|
animation-duration: 5s; |
|
|
|
|
animation-iteration-count: infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes marquee { |
|
|
|
|
from { |
|
|
|
|
transform: translate(0%); |
|
|
|
|
} |
|
|
|
|
to { |
|
|
|
|
transform: translate(-100%); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -665,14 +622,11 @@ export default {
@@ -665,14 +622,11 @@ export default {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.process { |
|
|
|
|
//display: none; |
|
|
|
|
//height: 20vh; |
|
|
|
|
//width: 100vw; |
|
|
|
|
height: 3px; |
|
|
|
|
bottom: -1px; |
|
|
|
|
position: absolute; |
|
|
|
|
height: 7px; |
|
|
|
|
width: 100vw; |
|
|
|
|
background: black; |
|
|
|
|
position: relative; |
|
|
|
|
//bottom: 60px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.time { |
|
|
|
|
@ -693,68 +647,51 @@ export default {
@@ -693,68 +647,51 @@ export default {
|
|
|
|
|
&:before { |
|
|
|
|
z-index: 9; |
|
|
|
|
content: ' '; |
|
|
|
|
height: 3.5px; |
|
|
|
|
height: 1.5px; |
|
|
|
|
width: 100vw; |
|
|
|
|
background: gray; |
|
|
|
|
position: absolute; |
|
|
|
|
top: -3px; |
|
|
|
|
top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
z-index: 999; |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
top: -3px; |
|
|
|
|
height: 3px; |
|
|
|
|
top: 0; |
|
|
|
|
height: 1px; |
|
|
|
|
width: 200vw; |
|
|
|
|
transform: translate3d(-200vw, 0, 0); |
|
|
|
|
background: white; |
|
|
|
|
background: gray; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.point { |
|
|
|
|
z-index: 10; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 10vw; |
|
|
|
|
top: -5px; |
|
|
|
|
height: 8px; |
|
|
|
|
width: 8px; |
|
|
|
|
top: -1px; |
|
|
|
|
height: 4px; |
|
|
|
|
width: 4px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background: white; |
|
|
|
|
background: gray; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
& .stop { |
|
|
|
|
&:before { |
|
|
|
|
z-index: 9; |
|
|
|
|
content: ' '; |
|
|
|
|
height: 1.5px; |
|
|
|
|
width: 100vw; |
|
|
|
|
background: #333333; |
|
|
|
|
position: absolute; |
|
|
|
|
top: -3px; |
|
|
|
|
height: 3.5px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
z-index: 999; |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
top: -3px; |
|
|
|
|
height: 1px; |
|
|
|
|
width: 200vw; |
|
|
|
|
transform: translate3d(-200vw, 0, 0); |
|
|
|
|
background: gray; |
|
|
|
|
height: 3px; |
|
|
|
|
background: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.point { |
|
|
|
|
z-index: 10; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 10vw; |
|
|
|
|
top: -4px; |
|
|
|
|
height: 4px; |
|
|
|
|
width: 4px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background: gray; |
|
|
|
|
} |
|
|
|
|
top: -2px; |
|
|
|
|
height: 8px; |
|
|
|
|
width: 8px; |
|
|
|
|
background: white; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
zyronon
4 years ago