MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加音乐那个跑马灯效果

Browse Source
This commit is contained in:
zyronon 2021-09-11 18:02:51 +08:00
parent 343cf59e1d
commit bb04c8ca26
10 changed files with 936 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -113,12 +113,12 @@ export default {
}
</script>
<style lang="less">
.base-slide-item {
min-width: 100vw;
min-height: 100vh;
position: relative;
}
//
//.base-slide-item {
// min-width: 100vw;
// min-height: 100vh;
// position: relative;
//}
#app {
height: 100%;

1
src/assets/img/icon/loved - 副本.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#e73a57"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 786 B

BIN
src/assets/video/1.mp4
View File

Binary file not shown.

53
src/components/Video.vue
View File

@ -1,13 +1,7 @@
<!--<template>-->
<!-- <video style="height: 100vh;width: 100vw;" :src="video.videoUrl" :poster="video.poster" refs="video" muted :autoplay="!disabled" loop>-->
<!-- <p> 您的浏览器不支持 video 标签。</p>-->
<!-- </video>-->
<!--</template>-->
<template>
<div class="bg-video" v-bind:style="{'height':height+'px'}">
<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"-->
<video :src="video.video"
:poster="video.origin_cover"
ref="video"
@ -24,7 +18,7 @@
<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=""
<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">
@ -71,10 +65,15 @@
<div class="description mb1r">
{{ lVideo.desc }}
</div>
<div class="music " @click.stop="$nav('/music')">
<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> 吴三二 - 光年之外</marquee>-->
<div behavior=scroll direction=left align=middle scrollamount=4> {{ lVideo.music.title }}</div>
<!-- <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>
</div>
</div>
<div v-else class="comment-status">
@ -99,8 +98,8 @@
</div>
</div>
<div class="process"
:class="isMove ? '' : isPlaying && 'stop'"
v-if="duration > 60"
:class="isMove ? '' : isPlaying && 'stop'"
@touchmove="move"
@touchend="end"
>
@ -334,6 +333,8 @@ export default {
position: relative;
background: black;
font-size: 1.4rem;
width: 100%;
height: 100%;
video {
width: 100%;
@ -551,9 +552,35 @@ export default {
}
marquee {
margin-left: 10px;
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%);
}
}
}
}

5
src/components/slide/SlideItem.vue
View File

@ -10,10 +10,11 @@ export default {
}
</script>
<style scoped lang="less">
<style lang="less">
.base-slide-item {
min-width: 100vw;
//min-width: 100vw;
//min-height: 100vh;
min-width: 100%;
min-height: 100%;
position: relative;
}

2
src/pages/Test2.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import mp40 from "../assets/video/0.mp4";
import mp40 from "../assets/video/1.mp4";
export default {
name: "Test",

37
src/pages/Test3.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="test" @click="click">
<img class="left" src="../assets/img/icon/loved.svg" alt="">
<div class="test" v-top-love>
</div>
</template>
<script>
@ -10,6 +9,36 @@ export default {
name: "Test",
props: {},
components: {},
directives: {
topLove: {
beforeMount(el, binding, vNode) {
let click = function (e) {
let id = 'a' + Date.now()
let elWidth = 80
let rotate = randomNum(0, 1)
let template = `<img class="${rotate ? 'left' : 'right'}" 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('.test').append(el)
setTimeout(() => {
new Dom().find(`#${id}`).remove()
}, 1000)
}
let randomNum = function (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;
}
}
el.addEventListener('click', click)
}
}
},
data() {
return {
showShareDialog: true,
@ -93,7 +122,7 @@ export default {
transform: @scale rotate(0-@rotate);
}
100% {
transform: translateY(-10rem) scale(2) rotate(0-@rotate);
transform: translateY(-12rem) scale(2) rotate(0-@rotate);
opacity: 0;
}
}
@ -115,7 +144,7 @@ export default {
transform: @scale rotate(0+@rotate);
}
100% {
transform: translateY(-10rem) scale(2) rotate(0+@rotate);
transform: translateY(-12rem) scale(2) rotate(0+@rotate);
opacity: 0;
}
}

113
src/pages/Test4.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div class="Test">
<div class="content1">
<div style="width: 50%;">
<div class="marquee">
<span class="content">{{ text }}<span class="content-space"></span></span>
</div>
</div>
<base-button @click="pause">stop</base-button>
<base-button @click="start">start</base-button>
</div>
</div>
</template>
<script>
import BaseButton from "../components/BaseButton";
export default {
name: "Test4",
components: {BaseButton},
props: {
text: {
type: String,
default: '跑马灯测试。跑马灯测试。跑马灯测试。'
}
},
data() {
return {
timer: null,
contentWidth: 0,
transformX: 0,
$marqueeContent: null,
}
},
methods: {
pause() {
cancelAnimationFrame(this.timer)
},
start() {
if (this.contentWidth <= 0) { // 没有内容搞什么动画
return;
}
let fn = () => {
if (this.transformX > (-this.contentWidth / 3)) {
this.transformX -= 2
this.$marqueeContent.style.transform = `translate3d(${this.transformX}px,0,0)`
} else {
this.transformX = 0
}
this.timer = requestAnimationFrame(fn)
}
// this.timer = requestAnimationFrame(fn);
fn()
}
},
mounted() {
let speed = 150; // 速度 -- px每秒
let $marquee = document.querySelector('.marquee');
let $marqueeContent = this.$marqueeContent = $marquee.querySelector('.content');
// 内容复制3份好有连续性
$marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
this.contentWidth = $marqueeContent.getBoundingClientRect().width;
this.start()
}
}
</script>
<style scoped lang="less">
@import "../assets/scss/index";
.Test {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
font-size: 1.4rem;
color: white;
.content1 {
padding-top: 6rem;
.marquee {
width: 100%;
height: 4rem;
line-height: 4rem;
display: block;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
position: relative;
}
.marquee .content {
color: white;
display: inline-block;
position: relative;
white-space: nowrap;
}
.marquee .content-space {
display: inline-block;
width: 3rem;
}
}
}
</style>

754
src/pages/home/Index2.vue
View File

@ -6,6 +6,7 @@
v-model:active-index="baseActiveIndex">
<SlideItem>
<SlideRowList
style="height: calc(100% - 5rem);"
v-model:active-index="activeIndex"
:showIndicator="true"
:useHomeLoading="true"
@ -153,7 +154,6 @@
@showShare="delayShowDialog( e => this.isSharing = true)"
v-model="showFollowSetting"/>
<FollowSetting2
@cancelFollow="$refs.uploader.cancelFollow()"
v-model="showFollowSetting2"/>
@ -222,19 +222,738 @@ export default {
return {
webVideos: [
{
"id": "d2f55373-80dd-4c14-93a7-7a40e9cbf049",
"posterUrl": "images/20210815/0.png",
"videoUrl": "http://qy9rc9xff.hn-bkt.clouddn.com/9.mp4",
"title": "",
"likeNum": null,
"commentNum": null,
"sharedNum": null,
"duration": null,
"musicId": "126f9654-450b-466c-8003-085199a7f9b9",
"browseCount": 0,
"createTime": "1629683008",
"createBy": "3e301843-e8bb-41c0-8240-9c4b42a17341",
"status": 1
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
"cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/48e513ae1df94a6cb0e23eabdacfdb64~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-p-0015/80e3288d63094603beaaf2f0e1568e19_1577426215?from=4257465056_large",
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/be6a2e67b69646778749e932c6d456b6_1577426215~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459040102120742003404DFC4&biz_tag=feed_cover",
video:mp40,
"video_data_size": 26829508,
"duration": 427780,
"desc": "几人到深山探险，发现里面一只动物昆虫都没有，知道原因后都怕了 #看电影",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 381,
"comment_count": 20,
"download_count": 6,
"play_count": 0,
"share_count": 2,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "",
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "看电影",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "93864497380",
"unique_id_modify_time": "1630393144",
"unique_id": "dyg141319",
"favoriting_count": 0,
"avatar": "https://p26.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_1080x1080.jpeg?from=116350172",
"city": "",
"province": null,
"country": "",
"location": "",
"birthday": "1990-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 0,
"follower_count": 0,
"aweme_count": 0,
"nickname": "穷电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": null,
"is_private": 0
}
},
{
"id": "0423ff88-ea37-40f6-ab88-0a90759b12ab",
"cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/9208072278a34d01b3836cce1e0fca9a~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p9.douyinpic.com/obj/tos-cn-p-0015/9208072278a34d01b3836cce1e0fca9a?from=4257465056_large",
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/9ecfae1dda2141d19f3e2396d18c4f52_1610439608~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440160102120461454502506A&biz_tag=feed_cover",
video:mp41,
"video_data_size": 6038796,
"duration": 90927,
"desc": "几分钟看科幻片《寄生异种》 #我的观影报告 #抖音电影",
"allow_download": 1,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 117,
"comment_count": 2,
"download_count": 0,
"play_count": 0,
"share_count": 2,
"forward_count": 1,
"collect_count": 0,
"sort": 48,
"is_top": 0,
"city": "350100",
"musicId": "f1e564f2-8461-48c1-824b-06bb4d3c5d82",
"create_time": "1630392647",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
"name": "我的观影报告",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
},
{
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
"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
},
"author": {
"id": "54884802577",
"unique_id_modify_time": "1630393144",
"unique_id": "mmaawu",
"favoriting_count": 0,
"avatar": "https://p6.douyinpic.com/aweme/1080x1080/85f000239e43c3c985b5.jpeg?from=116350172",
"city": "上海",
"province": "上海",
"country": "中国",
"location": "上海",
"birthday": "1988-01-01",
"cover": "https://p9.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 1111,
"follower_count": 2222,
"aweme_count": 3333,
"nickname": "喵嗷污说电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": "108线网红，福州人在上海，没有更新就是在吃土",
"is_private": 0
}
},
{
"id": "05042932-a921-4c7b-9f88-618bb3100e51",
"cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/3d6a0342b7f247ed999a13bd566b360e~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p26.douyinpic.com/obj/tos-cn-p-0015/3d6a0342b7f247ed999a13bd566b360e?from=4257465056_large",
"origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/48891e08b43e47e2a3af9f3945cf941f_1607739586~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440220102120691615D029CD1&biz_tag=feed_cover",
video:mp42,
"video_data_size": 8996120,
"duration": 118703,
"desc": "美女失去记忆，被囚禁在密室内，没想到逃出去后才是她噩梦的开始 #我的观影报告",
"allow_download": 1,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 4378,
"comment_count": 96,
"download_count": 25,
"play_count": 0,
"share_count": 34,
"forward_count": 1,
"collect_count": 22,
"sort": 64,
"is_top": 0,
"city": "350100",
"musicId": "a8c50095-998c-436c-883c-51b3b53fb504",
"create_time": "1630392882",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"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
},
"author": {
"id": "54884802577",
"unique_id_modify_time": "1630393144",
"unique_id": "mmaawu",
"favoriting_count": 0,
"avatar": "https://p6.douyinpic.com/aweme/1080x1080/85f000239e43c3c985b5.jpeg?from=116350172",
"city": "上海",
"province": "上海",
"country": "中国",
"location": "上海",
"birthday": "1988-01-01",
"cover": "https://p9.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 1111,
"follower_count": 2222,
"aweme_count": 3333,
"nickname": "喵嗷污说电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": "108线网红，福州人在上海，没有更新就是在吃土",
"is_private": 0
}
},
{
"id": "080a3b3d-0f76-4427-9ec9-661e1621cb1a",
"cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/c3bbe172b24844eb8e576a1897e04435~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/12fc583b6eaa49b4a0086664c8f54a5d?from=4257465056_large",
"origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/e7db9fba822c4d81b4ec4614f5c60cae~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459170102040221632C04B06F&biz_tag=feed_cover",
video:mp43,
"video_data_size": 37824020,
"duration": 312474,
"desc": "夫妇二人来到一个诡异小镇，看到一个孩子的手，被吓到了 #看电影 ",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 123907,
"comment_count": 2346,
"download_count": 431,
"play_count": 0,
"share_count": 267,
"forward_count": 22,
"collect_count": 1341,
"sort": 311,
"is_top": 0,
"city": "",
"musicId": "02792e4a-d4b3-4b30-8e1e-fa0bd0eabe1b",
"create_time": "1630423884",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "看电影",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "93864497380",
"unique_id_modify_time": "1630393144",
"unique_id": "dyg141319",
"favoriting_count": 0,
"avatar": "https://p26.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_1080x1080.jpeg?from=116350172",
"city": "",
"province": null,
"country": "",
"location": "",
"birthday": "1990-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 0,
"follower_count": 0,
"aweme_count": 0,
"nickname": "穷电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": null,
"is_private": 0
}
},
{
"id": "08a90c93-807b-4a7a-aad3-68f75d65a9c8",
"cover": "https://p29.douyinpic.com/img/tos-cn-p-0015/1ce2018b919d49cfbdc380e9b7bc17ce~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/1ce2018b919d49cfbdc380e9b7bc17ce?from=4257465056_large",
"origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/697621dc8ff247aba499fdaedcf172fb_1606272887~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114402801021219919632028316&biz_tag=feed_cover",
video:mp44,
"video_data_size": 12371092,
"duration": 139652,
"desc": "茂密森林中却没有一个动物或昆虫，专家进去研究，被吓得转身就跑 #我的观影报告",
"allow_download": 1,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 245,
"comment_count": 10,
"download_count": 0,
"play_count": 0,
"share_count": 0,
"forward_count": 0,
"collect_count": 2,
"sort": 74,
"is_top": 0,
"city": "350100",
"musicId": "6e1325da-1af4-4d5e-8a33-3a4a69ff50a3",
"create_time": "1630392893",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"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
},
"author": {
"id": "54884802577",
"unique_id_modify_time": "1630393144",
"unique_id": "mmaawu",
"favoriting_count": 0,
"avatar": "https://p6.douyinpic.com/aweme/1080x1080/85f000239e43c3c985b5.jpeg?from=116350172",
"city": "上海",
"province": "上海",
"country": "中国",
"location": "上海",
"birthday": "1988-01-01",
"cover": "https://p9.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 1111,
"follower_count": 2222,
"aweme_count": 3333,
"nickname": "喵嗷污说电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": "108线网红，福州人在上海，没有更新就是在吃土",
"is_private": 0
}
},
{
"id": "09c9b531-4381-4542-b7bc-ca6e59389ee1",
"cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/3099e1f9facb4f11a8d07221b39b9ffb_1575186937~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/f80ce3457bf34f66be9254df9544f9d8_1575186867?from=4257465056_large",
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/af2ef1dd2e864379a7a475b1db005b62_1575186867~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459070102112011425F04ED8F&biz_tag=feed_cover",
video:mp45,
"video_data_size": 16916839,
"duration": 384068,
"desc": "男子在沙漠无意中召唤出可怕怪物，怪物的能力让他很绝望 #看电影",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 550,
"comment_count": 37,
"download_count": 3,
"play_count": 0,
"share_count": 3,
"forward_count": 0,
"collect_count": 5,
"sort": 208,
"is_top": 0,
"city": "",
"musicId": "b71c6566-10d9-4db0-b231-8b3e818bb191",
"create_time": "1630423585",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "看电影",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "93864497380",
"unique_id_modify_time": "1630393144",
"unique_id": "dyg141319",
"favoriting_count": 0,
"avatar": "https://p26.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_1080x1080.jpeg?from=116350172",
"city": "",
"province": null,
"country": "",
"location": "",
"birthday": "1990-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 0,
"follower_count": 0,
"aweme_count": 0,
"nickname": "穷电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": null,
"is_private": 0
}
},
{
"id": "0aeeb9f4-5160-4d07-a468-a1fddd2a425c",
"cover": "https://p11.douyinpic.com/img/tos-cn-i-0004/b8d9811844d14f28a5d71b13ea30d89a~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p29.douyinpic.com/obj/tos-cn-i-0004/b8d9811844d14f28a5d71b13ea30d89a?from=4257465056_large",
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/ac6b1eb1b6994ee1a284401f422f4d93_1627866958~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
video:mp46,
"video_data_size": 26944285,
"duration": 276000,
"desc": "2100年人口锐减，文明疯狂倒退，现今科技成了神话般的存在 #抖音电影#我的观影报告 ",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 47,
"comment_count": 1,
"download_count": 0,
"play_count": 0,
"share_count": 1,
"forward_count": 0,
"collect_count": 1,
"sort": 8,
"is_top": 0,
"city": "350100",
"musicId": "9db983b3-b68c-465b-85f5-030f5646e01f",
"create_time": "1630391758",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"id": "d15b72d0-5b8c-489b-a921-0fc236eec705",
"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
},
"author": {
"id": "54884802577",
"unique_id_modify_time": "1630393144",
"unique_id": "mmaawu",
"favoriting_count": 0,
"avatar": "https://p6.douyinpic.com/aweme/1080x1080/85f000239e43c3c985b5.jpeg?from=116350172",
"city": "上海",
"province": "上海",
"country": "中国",
"location": "上海",
"birthday": "1988-01-01",
"cover": "https://p9.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 1111,
"follower_count": 2222,
"aweme_count": 3333,
"nickname": "喵嗷污说电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": "108线网红，福州人在上海，没有更新就是在吃土",
"is_private": 0
}
},
{
"id": "0b1fb9c4-9d5c-40f7-9a01-1310674cbfeb",
"cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/bffc96dac41548d99a23e555d2bd3d62~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/bffc96dac41548d99a23e555d2bd3d62?from=4257465056_large",
"origin_cover": "https://p1.douyinpic.com/tos-cn-p-0015/813c7bded67f4e3da0972f85be32eb3f_1608893061~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440220102120691615D029CD1&biz_tag=feed_cover",
video:mp47,
"video_data_size": 9321536,
"duration": 129583,
"desc": "几分钟看科幻片《登月先锋》 #我的观影报告 #抖音电影",
"allow_download": 1,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 175,
"comment_count": 4,
"download_count": 0,
"play_count": 0,
"share_count": 2,
"forward_count": 0,
"collect_count": 2,
"sort": 57,
"is_top": 0,
"city": "350100",
"musicId": "e1c8d672-1831-47b4-87c4-da7e5c4250b9",
"create_time": "1630392882",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
"name": "我的观影报告",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
},
{
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
"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
},
"author": {
"id": "54884802577",
"unique_id_modify_time": "1630393144",
"unique_id": "mmaawu",
"favoriting_count": 0,
"avatar": "https://p6.douyinpic.com/aweme/1080x1080/85f000239e43c3c985b5.jpeg?from=116350172",
"city": "上海",
"province": "上海",
"country": "中国",
"location": "上海",
"birthday": "1988-01-01",
"cover": "https://p9.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 1111,
"follower_count": 2222,
"aweme_count": 3333,
"nickname": "喵嗷污说电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": "108线网红，福州人在上海，没有更新就是在吃土",
"is_private": 0
}
},
{
"id": "0ba38940-a395-474a-a7f6-b45c123f9c4d",
"cover": "https://p9.douyinpic.com/img/tos-cn-p-0015/9f47c686c9224036b82f5c7b147e6119~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p26.douyinpic.com/obj/tos-cn-p-0015/fde5131f00e54106877d06f775cd21ca_1572239688?from=4257465056_large",
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/8a757ad4df69407f8d0d443eaa0b60a2_1572239690~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459110102112011425F04EF3F&biz_tag=feed_cover",
video:mp48,
"video_data_size": 25251313,
"duration": 449263,
"desc": "",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 192,
"comment_count": 17,
"download_count": 1,
"play_count": 0,
"share_count": 1,
"forward_count": 0,
"collect_count": 2,
"sort": 257,
"is_top": 0,
"city": "",
"musicId": "c2a75580-1c5e-47b2-b13e-63362a95aea7",
"create_time": "1630423745",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "f4209ab6-5117-4401-8070-919fd8ac2cd5",
"name": "电影",
"creator_id": "93864497380",
"create_time": "1630423745",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "93864497380",
"unique_id_modify_time": "1630393144",
"unique_id": "dyg141319",
"favoriting_count": 0,
"avatar": "https://p26.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_1080x1080.jpeg?from=116350172",
"city": "",
"province": null,
"country": "",
"location": "",
"birthday": "1990-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 0,
"follower_count": 0,
"aweme_count": 0,
"nickname": "穷电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": null,
"is_private": 0
}
},
{
"id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
"cover": "https://p5-ipv6.douyinpic.com/img/tos-cn-p-0015/1941731e18714268a52855ce869e3092_1572771120~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/55b40ca5368a49eca282fb868c8fb98b_1572771083?from=4257465056_large",
"origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/cd59468a8d0149aeb5291966004ae4e0_1572771088~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459110102112011425F04EF3F&biz_tag=feed_cover",
video:mp49,
"video_data_size": 17839401,
"duration": 262127,
"desc": "灰姑娘被前男友羞辱，霸道总裁看不下去充当男友，瞬间让渣男无地自容#西瓜放映厅",
"allow_download": 1,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 116899,
"comment_count": 2204,
"download_count": 704,
"play_count": 0,
"share_count": 946,
"forward_count": 36,
"collect_count": 856,
"sort": 252,
"is_top": 0,
"city": "",
"musicId": "11e5f2b6-3ecc-4f6c-ae95-609313b9e22a",
"create_time": "1630423745",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"id": "6e2d8f8b-a7f3-43ca-861c-882abd9eeaf6",
"name": "西瓜放映厅",
"creator_id": "93864497380",
"create_time": "1630423585",
"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
},
"author": {
"id": "54884802577",
"unique_id_modify_time": "1630393144",
"unique_id": "mmaawu",
"favoriting_count": 0,
"avatar": "https://p6.douyinpic.com/aweme/1080x1080/85f000239e43c3c985b5.jpeg?from=116350172",
"city": "上海",
"province": "上海",
"country": "中国",
"location": "上海",
"birthday": "1988-01-01",
"cover": "https://p9.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 1111,
"follower_count": 2222,
"aweme_count": 3333,
"nickname": "喵嗷污说电影",
"phone": "",
"sex": "0",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": "108线网红，福州人在上海，没有更新就是在吃土",
"is_private": 0
}
}
],
videos: [
@ -290,7 +1009,7 @@ export default {
{
"id": "21c4d0e6-4895-44cf-abae-1ad6d4e51cfe",
"posterUrl": "images/20210815/11.png",
"videoUrl": c,
"videoUrl": mp42,
"title": "",
"likeNum": "4312856",
"commentNum": "14431",
@ -511,9 +1230,10 @@ export default {
this.$notice('操作成功，将减少此类视频的推荐')
},
async getData() {
if (process.env.NODE_ENV !== 'development') {
if (process.env.NODE_ENV === 'development') {
this.totalSize = 11
return this.videos = this.$clone(this.localVideos)
// return this.videos = this.$clone(this.localVideos)
return this.videos = this.$clone(this.webVideos)
}
this.loading = true
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})

2
src/router/index.js
View File

@ -48,6 +48,7 @@ import JoinedGroupChat from "../pages/message/JoinedGroupChat";
import Report from "../pages/home/Report";
import SubmitReport from "../pages/home/SubmitReport";
import RequestUpdate from "../pages/me/RequestUpdate";
import Test4 from "../pages/Test4";
const routes = [
// {path: '', component: Music},
@ -56,6 +57,7 @@ const routes = [
{path: '/test', component: Test},
{path: '/test2', component: Test2},
{path: '/test3', component: Test3},
{path: '/test4', component: Test4},
{path: '/home', component: Index},
{path: '/home/report', component: Report},
{path: '/home/submit-report', component: SubmitReport},