zyronon
4 years ago
9 changed files with 1520 additions and 391 deletions
@ -0,0 +1,700 @@
@@ -0,0 +1,700 @@
|
||||
<template> |
||||
<div class="video-wrapper" ref="videoWrapper" :class="name"> |
||||
<Loading v-if="loading" style="position: absolute"/> |
||||
<video :src="video.video + '?v=123'" |
||||
:poster="video.video + videoPoster" |
||||
ref="video" |
||||
muted |
||||
preload |
||||
:autoplay="isPlay" loop> |
||||
<p> 您的浏览器不支持 video 标签。</p> |
||||
</video> |
||||
<img src="../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying"> |
||||
<div class="float" @click="togglePlayVideo"> |
||||
<!-- @click.stop="togglePlayVideo" --> |
||||
<div :style="{opacity:isMove ? 0:1}" class="normal"> |
||||
<div class="toolbar mb1r"> |
||||
<div class="avatar-ctn mb4r"> |
||||
<img class="avatar" :src="lVideo.author.avatar" alt="" |
||||
@click.stop="$emit('goUserInfo')"> |
||||
<transition name="fade"> |
||||
<div v-if="!isAttention" @click.stop="attention" class="options" ref="attention-option"> |
||||
<img class="no" src="../assets/img/icon/add-light.png" alt=""> |
||||
<img class="yes" src="../assets/img/icon/ok-red.png" alt=""> |
||||
</div> |
||||
</transition> |
||||
|
||||
</div> |
||||
<div class="love mb2r" @click.stop="loved($event)"> |
||||
<div> |
||||
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved"> |
||||
<img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved"> |
||||
</div> |
||||
<span>{{ $likeNum(lVideo.digg_count) }}</span> |
||||
</div> |
||||
<div class="message mb2r" @click.stop="$emit('showComments')"> |
||||
<!-- <div class="message mb15p" @click.stop="showComment">--> |
||||
<img src="../assets/img/icon/message.svg" alt="" class="message-image"> |
||||
<span>{{ $likeNum(lVideo.comment_count) }}</span> |
||||
</div> |
||||
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')"> |
||||
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image"> |
||||
<span>{{ $likeNum(lVideo.share_count) }}</span> |
||||
</div> |
||||
<div v-else class="share mb4r" @click.stop="$emit('showShare')"> |
||||
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image"> |
||||
</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="location-wrapper" v-if=" lVideo.city || lVideo.address"> |
||||
<div class="location"> |
||||
<img src="../assets/img/icon/location.webp" alt=""> |
||||
<span>{{ lVideo.city }}</span> |
||||
<template v-if="lVideo.address && lVideo.address"> |
||||
<div class="gang"></div> |
||||
</template> |
||||
<span>{{ lVideo.address }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ lVideo.author.nickname }}</div> |
||||
<div class="description mb1r"> |
||||
{{ lVideo.desc }} |
||||
</div> |
||||
<div class="music" @click.stop="$nav('/music')"> |
||||
<img src="../assets/img/icon/music.svg" alt="" class="music-image"> |
||||
<BaseMarquee :key="name" |
||||
:name="name" |
||||
:isPlay="isPlay" |
||||
:text="lVideo.music.title" |
||||
@click.stop="$emit('goMusic')"/> |
||||
</div> |
||||
</div> |
||||
<div v-else class="comment-status"> |
||||
<div class="comment"> |
||||
<div class="type-comment"> |
||||
<img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar"> |
||||
<div class="right"> |
||||
<p> |
||||
<span class="name">zzzzz</span> |
||||
<span class="time">2020-01-20</span> |
||||
</p> |
||||
<p class="text">北京</p> |
||||
</div> |
||||
</div> |
||||
<transition-group name="comment-status" tag="div" class="loveds"> |
||||
<div class="type-loved" :key="i" v-for="i in test"> |
||||
<img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar"> |
||||
<img src="../assets/img/icon/love.svg" alt="" class="loved"> |
||||
</div> |
||||
</transition-group> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="progress" |
||||
v-if="duration > 60" |
||||
:class="progressClass" |
||||
@touchmove="move" |
||||
@touchend="end" |
||||
> |
||||
<div class="time" v-if="isMove"> |
||||
<span class="currentTime">{{ $duration(currentTime) }}</span> |
||||
<span class="duration"> / {{ $duration(duration) }}</span> |
||||
</div> |
||||
<div class="line" :style="durationStyle" ref="line"></div> |
||||
<div class="point" :style="durationStyle" ref="point"></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"; |
||||
import {mapState} from "vuex"; |
||||
import Loading from "./Loading"; |
||||
|
||||
export default { |
||||
name: "Video", |
||||
components: { |
||||
BaseMarquee, |
||||
BaseMusic, |
||||
Loading |
||||
}, |
||||
props: { |
||||
video: { |
||||
type: Object, |
||||
default: () => { |
||||
return {} |
||||
} |
||||
}, |
||||
index: { |
||||
type: Number, |
||||
default: () => { |
||||
return -1 |
||||
} |
||||
}, |
||||
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟 |
||||
isPlay: { |
||||
type: Boolean, |
||||
default: () => { |
||||
return true |
||||
} |
||||
}, |
||||
isMy: { |
||||
type: Boolean, |
||||
default: () => { |
||||
return false |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
durationStyle() { |
||||
return {left: this.pageX + 'px'} |
||||
}, |
||||
progressClass() { |
||||
if (this.isMove) { |
||||
return 'stop' |
||||
} else { |
||||
return this.isPlaying ? '' : 'stop' |
||||
} |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
name: `v-${this.index}-video`, |
||||
globalMethods: globalMethods, |
||||
duration: 0, |
||||
step: 0, |
||||
currentTime: -1, |
||||
pageX: 0, |
||||
height: 0, |
||||
width: 0, |
||||
isPlaying: this.isPlay, |
||||
isAttention: false, |
||||
line: null, |
||||
point: null, |
||||
isMove: false, |
||||
test: [1, 2], |
||||
lVideo: this.video, |
||||
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`, |
||||
timer: null, |
||||
lastClickTime: 0 |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.height = document.body.clientHeight |
||||
this.width = document.body.clientWidth |
||||
this.line = this.$refs.line |
||||
this.point = this.$refs.point |
||||
let video = this.$refs.video |
||||
video.currentTime = 0 |
||||
let fun = e => { |
||||
this.currentTime = Math.ceil(e.target.currentTime) |
||||
this.pageX = this.currentTime * this.step |
||||
} |
||||
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) |
||||
} |
||||
}) |
||||
|
||||
let eventTester = (e, t) => { |
||||
video.addEventListener(e, () => { |
||||
if (e === 'playing') this.loading = false |
||||
if (e === 'progress') this.loading = true |
||||
if (e === 'waiting') this.loading = true |
||||
// |
||||
}, false); |
||||
} |
||||
|
||||
|
||||
// eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 |
||||
// eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起） |
||||
// eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 |
||||
eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据 |
||||
// // eventTester("suspend", '延迟下载'); //延迟下载 |
||||
// eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起）， |
||||
// eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误 |
||||
// eventTester("stalled", '网速失速'); //网速失速 |
||||
// eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发 |
||||
// eventTester("pause", 'pause()触发'); //pause()触发 |
||||
// eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度 |
||||
// eventTester("loadeddata"); // |
||||
eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误 |
||||
eventTester("playing", '开始回放'); //开始回放 |
||||
// eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停 |
||||
// eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕 |
||||
// eventTester("seeking", '寻找中'); //寻找中 |
||||
// eventTester("seeked", '寻找完毕'); //寻找完毕 |
||||
// // eventTester("timeupdate",'播放时间改变'); //播放时间改变 |
||||
// eventTester("ended", '播放结束'); //播放结束 |
||||
// eventTester("ratechange", '播放速率改变'); //播放速率改变 |
||||
// eventTester("durationchange", '资源长度改变'); //资源长度改变 |
||||
// eventTester("volumechange", '音量改变'); //音量改变 |
||||
|
||||
this.$refs.videoWrapper.addEventListener('play', this.play) |
||||
this.$refs.videoWrapper.addEventListener('stop', this.stop) |
||||
}, |
||||
methods: { |
||||
//切换视频状态 |
||||
togglePlayVideo(e) { |
||||
let checkTime = 200 |
||||
let nowTime = new Date().getTime(); |
||||
if (nowTime - this.lastClickTime < checkTime) { |
||||
clearTimeout(this.timer); |
||||
} else { |
||||
this.timer = setTimeout(() => { |
||||
if (this.isPlaying) { |
||||
this.pause() |
||||
} else { |
||||
this.play() |
||||
} |
||||
}, checkTime); |
||||
} |
||||
this.lastClickTime = nowTime |
||||
}, |
||||
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.volume = 1 |
||||
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 |
||||
}, |
||||
$likeNum(v) { |
||||
return globalMethods.$likeNum(v) |
||||
}, |
||||
$duration(v) { |
||||
return globalMethods.$duration(v) |
||||
}, |
||||
attention() { |
||||
let option = this.$refs['attention-option'] |
||||
option.classList.add('attention') |
||||
setTimeout(() => { |
||||
this.isAttention = true |
||||
}, 1000) |
||||
}, |
||||
|
||||
loved(e, index) { |
||||
this.lVideo.isLoved = !this.lVideo.isLoved |
||||
this.$emit('update:video', this.lVideo) |
||||
}, |
||||
start(e) { |
||||
this.pageX = e.touches[0].pageX |
||||
}, |
||||
move(e) { |
||||
if (this.isPlaying) return |
||||
this.isMove = true |
||||
this.pause() |
||||
this.pageX = e.touches[0].pageX |
||||
// console.log(this.step) |
||||
this.currentTime = Math.ceil(Math.ceil(e.touches[0].pageX) / this.step) |
||||
globalMethods.$stopPropagation(e) |
||||
}, |
||||
end(e) { |
||||
if (this.isPlaying) return |
||||
console.log('end', e) |
||||
setTimeout(() => { |
||||
this.isMove = false |
||||
}, 1000) |
||||
this.currentTime = Math.ceil(Math.ceil(e.changedTouches[0].pageX) / this.step) |
||||
this.play() |
||||
globalMethods.$stopPropagation(e) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "../assets/less/color"; |
||||
|
||||
.fade-enter-active, |
||||
.fade-leave-active { |
||||
transition: transform 0.5s linear; |
||||
} |
||||
|
||||
.fade-enter-from, |
||||
.fade-leave-to { |
||||
transform: scale(0); |
||||
} |
||||
|
||||
|
||||
.video-wrapper { |
||||
position: relative; |
||||
background: black; |
||||
font-size: 1.4rem; |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
video { |
||||
width: 100%; |
||||
height: 100%; |
||||
/*position: absolute;*/ |
||||
} |
||||
|
||||
.pause { |
||||
width: 10rem; |
||||
height: 10rem; |
||||
opacity: 0.5; |
||||
position: absolute; |
||||
margin: auto; |
||||
left: 0; |
||||
top: 0; |
||||
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; |
||||
left: 0; |
||||
top: 0; |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
.normal { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
transition: all .3s; |
||||
|
||||
.toolbar { |
||||
//width: 40px; |
||||
position: absolute; |
||||
bottom: 0; |
||||
right: 5px; |
||||
color: #fff; |
||||
|
||||
.avatar-ctn { |
||||
position: relative; |
||||
|
||||
.avatar { |
||||
width: 55px; |
||||
height: 55px; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.options { |
||||
position: absolute; |
||||
border-radius: 50%; |
||||
margin: auto; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: -5px; |
||||
background: red; |
||||
//background: black; |
||||
width: 18px; |
||||
height: 18px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
transition: all 1s; |
||||
|
||||
img { |
||||
position: absolute; |
||||
width: 12px; |
||||
height: 12px; |
||||
transition: all 1s; |
||||
} |
||||
|
||||
.yes { |
||||
opacity: 0; |
||||
transform: rotate(-180deg); |
||||
} |
||||
|
||||
&.attention { |
||||
background: white; |
||||
|
||||
.no { |
||||
opacity: 0; |
||||
transform: rotate(180deg); |
||||
} |
||||
|
||||
.yes { |
||||
opacity: 1; |
||||
transform: rotate(0deg); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.love, .message, .share { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
@width: 3.5rem; |
||||
|
||||
img { |
||||
width: @width; |
||||
height: @width; |
||||
} |
||||
|
||||
span { |
||||
font-size: 1.2rem; |
||||
} |
||||
} |
||||
|
||||
.loved { |
||||
background: red; |
||||
} |
||||
|
||||
} |
||||
|
||||
.content { |
||||
color: #fff; |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 75%; |
||||
//display: flex; |
||||
//flex-direction: column; |
||||
|
||||
.location-wrapper { |
||||
display: flex; |
||||
|
||||
.location { |
||||
margin-bottom: 1rem; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 1.2rem; |
||||
padding: .4rem; |
||||
border-radius: .3rem; |
||||
background: @second-btn-color-tran; |
||||
|
||||
.gang { |
||||
height: .8rem; |
||||
width: 1.5px; |
||||
margin: 0 .5rem; |
||||
background: gray; |
||||
} |
||||
|
||||
img { |
||||
margin-right: .7rem; |
||||
width: 1.8rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.music { |
||||
position: relative; |
||||
width: 60%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.music-image { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-top: 3px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.comment-status { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.comment { |
||||
|
||||
.type-comment { |
||||
display: flex; |
||||
background: rgb(130, 21, 44); |
||||
border-radius: 50px; |
||||
padding: 3px; |
||||
margin-bottom: 20px; |
||||
|
||||
.avatar { |
||||
width: 36px; |
||||
height: 36px; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.right { |
||||
margin: 0 10px; |
||||
color: @second-text-color; |
||||
|
||||
.name { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.text { |
||||
color: white; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
.loveds { |
||||
} |
||||
|
||||
.type-loved { |
||||
width: 40px; |
||||
height: 40px; |
||||
position: relative; |
||||
margin-bottom: 20px; |
||||
animation: test 1s; |
||||
animation-delay: .5s; |
||||
|
||||
.avatar { |
||||
width: 36px; |
||||
height: 36px; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.loved { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 20px; |
||||
width: 10px; |
||||
height: 10px; |
||||
background: red; |
||||
padding: 3px; |
||||
border-radius: 50%; |
||||
border: 2px solid white; |
||||
} |
||||
} |
||||
|
||||
@keyframes test { |
||||
from { |
||||
display: block; |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
display: none; |
||||
transform: translate3d(0, -60px, 0); |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.progress { |
||||
bottom: -1px; |
||||
position: absolute; |
||||
height: 7px; |
||||
width: 100vw; |
||||
background: black; |
||||
|
||||
|
||||
.time { |
||||
position: absolute; |
||||
z-index: 9; |
||||
font-size: 24px; |
||||
bottom: 50px; |
||||
left: 0; |
||||
right: 0; |
||||
color: white; |
||||
text-align: center; |
||||
|
||||
.duration { |
||||
color: darkgray; |
||||
} |
||||
} |
||||
|
||||
&:before { |
||||
z-index: 9; |
||||
content: ' '; |
||||
height: 1.5px; |
||||
width: 100vw; |
||||
background: gray; |
||||
position: absolute; |
||||
top: 0; |
||||
} |
||||
|
||||
.line { |
||||
z-index: 999; |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
height: 1px; |
||||
width: 200vw; |
||||
transform: translate3d(-200vw, 0, 0); |
||||
background: gray; |
||||
} |
||||
|
||||
.point { |
||||
z-index: 10; |
||||
position: absolute; |
||||
left: 10vw; |
||||
top: -1px; |
||||
height: 4px; |
||||
width: 4px; |
||||
border-radius: 50%; |
||||
background: gray; |
||||
} |
||||
} |
||||
|
||||
& .stop { |
||||
&:before { |
||||
height: 3.5px; |
||||
} |
||||
|
||||
.line { |
||||
height: 3px; |
||||
background: white; |
||||
} |
||||
|
||||
.point { |
||||
top: -2px; |
||||
height: 8px; |
||||
width: 8px; |
||||
background: white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,362 @@
@@ -0,0 +1,362 @@
|
||||
<template> |
||||
<div id="SlideUser"> |
||||
<div class="content"> |
||||
<img class="close" src="../assets/img/icon/components/gray-close-full2.png" alt=""> |
||||
<img class="avatar" :src="modelValue.avatar"> |
||||
<div class="name">{{ modelValue.name }}</div> |
||||
<div class="age">{{ modelValue.age }}岁</div> |
||||
<div class="realName">通讯录朋友{{ modelValue.realName }}</div> |
||||
<div class="poster-wrapper"> |
||||
<div class="poster-item" v-for="(i,index) in modelValue.videos.slice(0,3)" @click="globalMethods.$no"> |
||||
<img class="poster" :src="globalMethods.$imgPreview(i.cover)"/> |
||||
<div class="num"> |
||||
<img class="love" src="../assets/img/icon/love.svg" alt=""> |
||||
<span>{{ globalMethods.$likeNum(i.digg_count) }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="options"> |
||||
<base-button type="white">换一个</base-button> |
||||
<base-button type="primary">关注</base-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Posters from "./Posters"; |
||||
import globalMethods from "../utils/global-methods"; |
||||
import BaseButton from "./BaseButton"; |
||||
|
||||
export default { |
||||
name: "SlideUser", |
||||
components: { |
||||
Posters, |
||||
BaseButton |
||||
}, |
||||
props: { |
||||
modelValue: { |
||||
type: Object, |
||||
default() { |
||||
return { |
||||
type: 'user', |
||||
"id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5", |
||||
"avatar": new URL('../assets/img/icon/avatar/1.png', import.meta.url).href, |
||||
"name": "何以为家", |
||||
"realName": "王小二", |
||||
"sex": "", |
||||
"age": 25, |
||||
"idCard": null, |
||||
"phone": "", |
||||
"address": null, |
||||
"wechat": "", |
||||
"password": null, |
||||
"lastLoginTime": "1629993515", |
||||
"createTime": "1630035089", |
||||
"isDelete": 0, |
||||
"account": "234", |
||||
"pinyin": "H", |
||||
"select": false, |
||||
videos: [ |
||||
{ |
||||
"id": "c99d325c-741e-4722-9f39-82bb423a5989", |
||||
"cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large", |
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large", |
||||
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover", |
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH", |
||||
"video_data_size": 10754240, |
||||
"duration": 151720, |
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影", |
||||
"allow_download": 0, |
||||
"allow_duet": 0, |
||||
"allow_react": 0, |
||||
"allow_music": 1, |
||||
"allow_douplus": 1, |
||||
"allow_share": 1, |
||||
"digg_count": 156, |
||||
"comment_count": 7, |
||||
"download_count": 0, |
||||
"play_count": 0, |
||||
"share_count": 0, |
||||
"forward_count": 0, |
||||
"collect_count": 0, |
||||
"sort": 9, |
||||
"is_top": 0, |
||||
"city": "350100", |
||||
"musicId": "0da2663b-6bff-425f-a93e-9106b4889c99", |
||||
"create_time": "1630391758", |
||||
"creator_id": "54884802577", |
||||
"status": 1, |
||||
"topics": [ |
||||
{ |
||||
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1", |
||||
"name": "抖音电影", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
}, |
||||
{ |
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc", |
||||
"name": "我的观影报告", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
} |
||||
], |
||||
"music": { |
||||
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21", |
||||
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172", |
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3", |
||||
"title": "@喵嗷污说电影创作的原声", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
} |
||||
}, |
||||
{ |
||||
"id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb", |
||||
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large", |
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large", |
||||
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover", |
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH", |
||||
"video_data_size": 16850048, |
||||
"duration": 216320, |
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ", |
||||
"allow_download": 0, |
||||
"allow_duet": 0, |
||||
"allow_react": 0, |
||||
"allow_music": 1, |
||||
"allow_douplus": 1, |
||||
"allow_share": 1, |
||||
"digg_count": 72, |
||||
"comment_count": 4, |
||||
"download_count": 0, |
||||
"play_count": 0, |
||||
"share_count": 1, |
||||
"forward_count": 0, |
||||
"collect_count": 0, |
||||
"sort": 10, |
||||
"is_top": 0, |
||||
"city": "350100", |
||||
"musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826", |
||||
"create_time": "1630391758", |
||||
"creator_id": "54884802577", |
||||
"status": 1, |
||||
"topics": [ |
||||
{ |
||||
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1", |
||||
"name": "抖音电影", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
}, |
||||
{ |
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc", |
||||
"name": "我的观影报告", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
} |
||||
], |
||||
"music": { |
||||
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21", |
||||
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172", |
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3", |
||||
"title": "@喵嗷污说电影创作的原声", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
} |
||||
}, |
||||
{ |
||||
"id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982", |
||||
"cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large", |
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large", |
||||
"origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover", |
||||
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH", |
||||
"video_data_size": 23547094, |
||||
"duration": 230880, |
||||
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ", |
||||
"allow_download": 0, |
||||
"allow_duet": 0, |
||||
"allow_react": 0, |
||||
"allow_music": 1, |
||||
"allow_douplus": 1, |
||||
"allow_share": 1, |
||||
"digg_count": 93, |
||||
"comment_count": 3, |
||||
"download_count": 0, |
||||
"play_count": 0, |
||||
"share_count": 0, |
||||
"forward_count": 0, |
||||
"collect_count": 1, |
||||
"sort": 11, |
||||
"is_top": 0, |
||||
"city": "350100", |
||||
"musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a", |
||||
"create_time": "1630391758", |
||||
"creator_id": "54884802577", |
||||
"status": 1, |
||||
"topics": [ |
||||
{ |
||||
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1", |
||||
"name": "抖音电影", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
}, |
||||
{ |
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc", |
||||
"name": "我的观影报告", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
} |
||||
], |
||||
"music": { |
||||
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21", |
||||
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172", |
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3", |
||||
"title": "@喵嗷污说电影创作的原声", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
} |
||||
}, |
||||
] |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
globalMethods |
||||
} |
||||
}, |
||||
computed: {}, |
||||
watch: {}, |
||||
created() { |
||||
console.log('modelValue', this.modelValue) |
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
#SlideUser { |
||||
width: 100%; |
||||
height: 100%; |
||||
//background: #e1e1e1; |
||||
background: linear-gradient(to bottom, rgb(69, 63, 73), rgb(25, 20, 42)); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
position: relative; |
||||
|
||||
.content { |
||||
width: 85%; |
||||
background: white; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 1.5rem; |
||||
//box-shadow: 0 0 2rem 0 #b3b3b3; |
||||
padding: 1.5rem; |
||||
color: black; |
||||
position: relative; |
||||
|
||||
.close { |
||||
top: 1.5rem; |
||||
right: 1.5rem; |
||||
width: 2.5rem; |
||||
height: 2.5rem; |
||||
position: absolute; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 12rem; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.name { |
||||
margin-top: 2rem; |
||||
margin-bottom: 2rem; |
||||
font-weight: bold; |
||||
font-size: 1.6rem; |
||||
} |
||||
|
||||
.age { |
||||
font-size: 1rem; |
||||
background: #f1f1f1; |
||||
padding: 3px; |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.realName { |
||||
text-align: center; |
||||
color: black; |
||||
border-top: 1px solid #f1f1f1; |
||||
border-bottom: 1px solid #f1f1f1; |
||||
padding: 1rem 0; |
||||
margin: 1.5rem 0; |
||||
font-size: 1.2rem; |
||||
width: 90%; |
||||
} |
||||
|
||||
|
||||
.poster-wrapper { |
||||
display: grid; |
||||
grid-template-columns: repeat(3, 31%); |
||||
|
||||
grid-column-gap: 3.5%; |
||||
grid-row-gap: 2%; |
||||
} |
||||
|
||||
.poster-item { |
||||
border-radius: .8rem; |
||||
overflow: hidden; |
||||
position: relative; |
||||
|
||||
.poster { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: block; |
||||
} |
||||
|
||||
.num { |
||||
color: white; |
||||
position: absolute; |
||||
bottom: .5rem; |
||||
left: .5rem; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 1.2rem; |
||||
|
||||
|
||||
.love { |
||||
width: 1.2rem; |
||||
height: 1.2rem; |
||||
margin-right: .5rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.options { |
||||
position: absolute; |
||||
bottom: 2rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
left: 1.5rem; |
||||
right: 1.5rem; |
||||
|
||||
.button { |
||||
width: 49%; |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,118 +0,0 @@
@@ -1,118 +0,0 @@
|
||||
<template> |
||||
<div id="SlideUser"> |
||||
<div class="content"> |
||||
<img class="close" src="../assets/img/icon/components/gray-close-full2.png" alt=""> |
||||
<img class="avatar" :src="user.avatar"> |
||||
<div class="name">{{ user.name }}</div> |
||||
<div class="age">{{ user.age }}岁</div> |
||||
<div class="realName">通讯录朋友{{ user.realName }}</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "SlideUser", |
||||
components: {}, |
||||
props: { |
||||
modelValue: { |
||||
type: Object, |
||||
default() { |
||||
return {} |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
user: { |
||||
type: 'user', |
||||
"id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5", |
||||
"avatar": new URL('../assets/img/icon/avatar/1.png', import.meta.url).href, |
||||
"name": "何以为家", |
||||
"realName": "王小二", |
||||
"sex": "", |
||||
"age": 25, |
||||
"idCard": null, |
||||
"phone": "", |
||||
"address": null, |
||||
"wechat": "", |
||||
"password": null, |
||||
"lastLoginTime": "1629993515", |
||||
"createTime": "1630035089", |
||||
"isDelete": 0, |
||||
"account": "234", |
||||
"pinyin": "H", |
||||
"select": false, |
||||
} |
||||
} |
||||
}, |
||||
computed: {}, |
||||
watch: {}, |
||||
created() { |
||||
|
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
#SlideUser { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #e1e1e1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.content { |
||||
width: 85%; |
||||
background: white; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 1.5rem; |
||||
box-shadow: 0 0 2rem 0 #b3b3b3; |
||||
padding: 1rem; |
||||
color: black; |
||||
position: relative; |
||||
|
||||
.close { |
||||
top: 1.5rem; |
||||
right: 1.5rem; |
||||
width: 2.5rem; |
||||
height: 2.5rem; |
||||
position: absolute; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 12rem; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.name { |
||||
margin-top: 2rem; |
||||
margin-bottom: 2rem; |
||||
font-weight: bold; |
||||
font-size: 1.6rem; |
||||
} |
||||
|
||||
.age { |
||||
font-size: 1rem; |
||||
background: #f1f1f1; |
||||
padding: 3px; |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.realName { |
||||
text-align: center; |
||||
color: gray; |
||||
border-top: 1px solid #f1f1f1; |
||||
border-bottom: 1px solid #f1f1f1; |
||||
padding: 1rem 0; |
||||
margin: 1.5rem 0; |
||||
width: 90%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue