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

长视频

Browse Source
This commit is contained in:
zyronon 2024-03-20 02:35:15 +08:00
parent 01dacb692b
commit 43507e9138
12 changed files with 1992 additions and 13414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13310
src/assets/data/resource.js
View File

File diff suppressed because it is too large Load Diff

1824
src/assets/data/user.json Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/components/Posters.vue
View File

@ -21,7 +21,7 @@
</template> </template>
<script> <script>
import {$checkImgUrl, $no} from "@/utils"; import {_checkImgUrl, $no} from "@/utils";
export default { export default {
/*@click="$nav('/video-detail')"*/ /*@click="$nav('/video-detail')"*/
@ -40,7 +40,7 @@ export default {
}, },
methods: { methods: {
$no, $no,
$checkImgUrl, $checkImgUrl: _checkImgUrl,
getDay(time) { getDay(time) {
let date = new Date(time * 1000) let date = new Date(time * 1000)
return date.getDate() return date.getDate()

71
src/components/UserPanel.vue
View File

@ -3,8 +3,8 @@
@scroll="scroll" @scroll="scroll"
ref="page"> ref="page">
<div ref="float" class="float" :class="state.floatFixed?'fixed':''"> <div ref="float" class="float" :class="state.floatFixed?'fixed':''">
<div class="left" @click="$emit('back')"> <div class="left">
<Icon class="icon" icon="eva:arrow-ios-back-fill"/> <Icon @click="$emit('back')" class="icon" icon="eva:arrow-ios-back-fill"/>
<transition name="fade"> <transition name="fade">
<div class="float-user" v-if="state.floatFixed"> <div class="float-user" v-if="state.floatFixed">
<img v-lazy="Utils.$imgPreview(props.currentItem.author.avatar_168x168.url_list[0])" class="avatar"/> <img v-lazy="Utils.$imgPreview(props.currentItem.author.avatar_168x168.url_list[0])" class="avatar"/>
@ -21,7 +21,7 @@
<span>求更新</span> <span>求更新</span>
</div> </div>
</transition> </transition>
<Icon class="icon" icon="ion:search"/> <Icon class="icon" icon="ion:search" @click.stop="$no()"/>
<Icon class="icon" icon="ri:more-line" @click.stop="$emit('showFollowSetting')"/> <Icon class="icon" icon="ri:more-line" @click.stop="$emit('showFollowSetting')"/>
</div> </div>
</div> </div>
@ -35,21 +35,21 @@
<img <img
:style="{opacity:props.currentItem.author.cover_url[0].url_list.length?1:0}" :style="{opacity:props.currentItem.author.cover_url[0].url_list.length?1:0}"
ref="cover" ref="cover"
:src="$checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])" :src="_checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])"
@click="state.previewImg = $checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])" @click="state.previewImg = _checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])"
alt="" alt=""
class="cover"> class="cover">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img v-lazy="$checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])" class="avatar" <img v-lazy="_checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])" class="avatar"
@click="state.previewImg = $checkImgUrl(props.currentItem.author.avatar_300x300.url_list[0])"> @click="state.previewImg = _checkImgUrl(props.currentItem.author.avatar_300x300.url_list[0])">
<div class="description"> <div class="description">
<div class="name f22 mb1r">{{ props.currentItem.author.nickname }}</div> <div class="name f22">{{ props.currentItem.author.nickname }}</div>
<div class="certification" v-if="props.currentItem.author.certification "> <div class="certification" v-if="props.currentItem.author.certification ">
<img src="@/assets/img/icon/me/certification.webp"> <img src="@/assets/img/icon/me/certification.webp">
{{ props.currentItem.author.certification }} {{ props.currentItem.author.certification }}
</div> </div>
<div class="number" v-else> <div class="number" v-else>
<span>抖音号：{{ props.currentItem.author.unique_id || props.currentItem.author.short_id }}</span> <span>抖音号：{{ _getUserDouyinId(props.currentItem) }}</span>
<img src="@/assets/img/icon/me/copy.png" alt="" <img src="@/assets/img/icon/me/copy.png" alt=""
@click.stop="Utils.copy(props.currentItem.author.unique_id || props.currentItem.author.short_id)"> @click.stop="Utils.copy(props.currentItem.author.unique_id || props.currentItem.author.short_id)">
</div> </div>
@ -120,7 +120,7 @@
<div class="followed"> <div class="followed">
<div class="l-button" @click="$emit('showFollowSetting2')"> <div class="l-button" @click="$emit('showFollowSetting2')">
<span>已关注</span> <span>已关注</span>
<img src="@/assets/img/icon/arrow-up-white.png" alt=""> <Icon icon="bxs:down-arrow" class="arrow"/>
</div> </div>
<div class="l-button" @click="$nav('/message/chat')"> <div class="l-button" @click="$nav('/message/chat')">
<span>私信</span> <span>私信</span>
@ -133,7 +133,7 @@
@click="state.isShowRecommend = !state.isShowRecommend"> @click="state.isShowRecommend = !state.isShowRecommend">
<img v-if="state.loadings.showRecommend" class="loading" src="@/assets/img/icon/loading-gray.png" <img v-if="state.loadings.showRecommend" class="loading" src="@/assets/img/icon/loading-gray.png"
alt=""> alt="">
<img v-else class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt=""> <Icon icon="bxs:down-arrow" v-else class="arrow"/>
</div> </div>
</div> </div>
@ -145,7 +145,7 @@
<div class="friends" <div class="friends"
@touchmove="stop"> @touchmove="stop">
<div class="friend" v-for="item in friends.all"> <div class="friend" v-for="item in friends.all">
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$checkImgUrl(item.avatar)" alt=""> <img :style="item.select?'opacity: .5;':''" class="avatar" :src="_checkImgUrl(item.avatar)" alt="">
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<span class="tips">可能感兴趣的人</span> <span class="tips">可能感兴趣的人</span>
<dy-button type="primary">关注</dy-button> <dy-button type="primary">关注</dy-button>
@ -176,7 +176,7 @@
<script setup> <script setup>
import {computed, onMounted, reactive, ref, watch} from "vue"; import {computed, onMounted, reactive, ref, watch} from "vue";
import Utils, {$checkImgUrl} from "@/utils"; import Utils, {_checkImgUrl, $no, _getUserDouyinId} from "@/utils";
import {useNav} from "@/utils/hooks/useNav"; import {useNav} from "@/utils/hooks/useNav";
import {useStore} from "vuex"; import {useStore} from "vuex";
import resource from "@/assets/data/resource"; import resource from "@/assets/data/resource";
@ -232,7 +232,7 @@ const state = reactive({
lastMoveYDistance: 0, lastMoveYDistance: 0,
canTransformY: 0, canTransformY: 0,
startTime: 0, startTime: 0,
floatHeight: 46, floatHeight: 52,
videos: { videos: {
my: { my: {
list: [], list: [],
@ -274,7 +274,7 @@ const state = reactive({
start: {x: 0, y: 0, time: 0}, start: {x: 0, y: 0, time: 0},
move: {x: 0, y: 0}, move: {x: 0, y: 0},
isTop: false, isTop: false,
coverHeight: 240, coverHeight: 220,
//能移动的高度 //能移动的高度
canMoveMaxHeight: document.body.clientHeight / 4, canMoveMaxHeight: document.body.clientHeight / 4,
//是否自动放大Cover //是否自动放大Cover
@ -320,7 +320,7 @@ function scroll(e) {
// console.log('scroll', page.value.scrollTop) // console.log('scroll', page.value.scrollTop)
let scrollTop = page.value.scrollTop let scrollTop = page.value.scrollTop
let totalY = total.value.getBoundingClientRect().y let totalY = total.value.getBoundingClientRect().y
state.floatFixed = totalY <= 46 state.floatFixed = totalY <= state.floatHeight
let isTop = scrollTop === 0 let isTop = scrollTop === 0
if (isTop && state.isAutoScaleCover) { if (isTop && state.isAutoScaleCover) {
cover.value.style.transition = 'all .1s' cover.value.style.transition = 'all .1s'
@ -576,7 +576,7 @@ function touchEnd(e) {
color: white; color: white;
.cover { .cover {
height: 240rem; height: 220rem;
object-fit: cover; object-fit: cover;
width: 100vw; width: 100vw;
//transition: height .3s; //transition: height .3s;
@ -594,10 +594,11 @@ function touchEnd(e) {
.avatar { .avatar {
background: white; background: white;
padding: 2px; padding: 2.5px;
border-radius: 50%; border-radius: 50%;
width: 80rem; @w: 100rem;
height: 80rem; width: @w;
height: @w;
} }
.description { .description {
@ -750,6 +751,8 @@ function touchEnd(e) {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
@width: 36rem; @width: 36rem;
@gap: 6rem;
gap: @gap;
.follow-display { .follow-display {
flex: 1; flex: 1;
@ -774,7 +777,6 @@ function touchEnd(e) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 5rem;
box-sizing: border-box; box-sizing: border-box;
span { span {
@ -787,26 +789,19 @@ function touchEnd(e) {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
gap: @gap;
.l-button { .l-button {
color: white; color: white;
border-radius: 4rem; border-radius: 5rem;
background: @second-btn-color; background: @second-btn-color;
height: @width; height: @width;
width: 50%; width: 50%;
margin-right: 5rem;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: @gap;
span {
margin-left: 2rem;
}
img {
transform: rotate(180deg);
}
} }
} }
} }
@ -832,7 +827,7 @@ function touchEnd(e) {
&.option-recommend { &.option-recommend {
.arrow { .arrow {
transform: rotate(0deg); transform: rotate(180deg);
} }
} }
} }
@ -855,10 +850,7 @@ function touchEnd(e) {
.arrow { .arrow {
transition: transform .3s ease; transition: transform .3s ease;
transform: rotate(180deg); font-size: 13rem;
@width: 16rem;
width: @width;
height: @width;
} }
} }
@ -900,6 +892,7 @@ function touchEnd(e) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-radius: 10rem;
.avatar { .avatar {
@width: 100rem; @width: 100rem;
@ -956,7 +949,7 @@ function touchEnd(e) {
padding: 15rem 20rem; padding: 15rem 20rem;
padding-top: 0rem; padding-top: 0rem;
position: sticky; position: sticky;
top: 46rem; top: 52rem;
z-index: 2; z-index: 2;
img { img {
@ -980,7 +973,7 @@ function touchEnd(e) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 46rem; height: 52rem;
padding: 0 15rem; padding: 0 15rem;
background: transparent; background: transparent;
transition: all .2s; transition: all .2s;
@ -999,7 +992,7 @@ function touchEnd(e) {
border-radius: 50%; border-radius: 50%;
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
padding: 6rem; padding: 6rem;
font-size: 16rem; font-size: 18rem;
} }
.left { .left {

23
src/components/slide/BVideo.vue
View File

@ -4,7 +4,7 @@
<!-- <video :src="item.video + '?v=123'"--> <!-- <video :src="item.video + '?v=123'"-->
<video <video
:src="item.video.play_addr.url_list[0]" :src="item.video.play_addr.url_list[0]"
:poster="$checkImgUrl(item.video.cover.url_list[0])" :poster="_checkImgUrl(item.video.cover.url_list[0])"
ref="video" ref="video"
muted muted
preload preload
@ -58,16 +58,18 @@
<span class="currentTime">{{ LUtils.$duration(currentTime) }}</span> <span class="currentTime">{{ LUtils.$duration(currentTime) }}</span>
<span class="duration"> / {{ LUtils.$duration(duration) }}</span> <span class="duration"> / {{ LUtils.$duration(duration) }}</span>
</div> </div>
<div class="bg"></div> <template v-if="duration > 15 || isMove">
<div class="progress-line" :style="durationStyle"></div> <div class="bg"></div>
<div class="point" v-if="duration > 15 || isMove"></div> <div class="progress-line" :style="durationStyle"></div>
<div class="point"></div>
</template>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Utils, {$checkImgUrl} from '../../utils' import Utils, {_checkImgUrl} from '../../utils'
import Loading from "../Loading"; import Loading from "../Loading";
import ItemToolbar from "./ItemToolbar"; import ItemToolbar from "./ItemToolbar";
import ItemDesc from "./ItemDesc"; import ItemDesc from "./ItemDesc";
@ -241,7 +243,7 @@ export default {
bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType) bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
}, },
methods: { methods: {
$checkImgUrl, _checkImgUrl,
onOpenSubType() { onOpenSubType() {
this.commentVisible = true this.commentVisible = true
}, },
@ -629,7 +631,7 @@ export default {
@radius: 10rem; @radius: 10rem;
@h: 1rem; @h: 2rem;
@tr: height .3s;; @tr: height .3s;;
.bg { .bg {
@ -637,7 +639,7 @@ export default {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: @h; height: @h;
background: rgba(#000, .3); background: #4f4f4f;
border-radius: @radius; border-radius: @radius;
} }
@ -645,10 +647,10 @@ export default {
.progress-line { .progress-line {
transition: @tr; transition: @tr;
height: @h; height: calc(@h + 0.5rem);
width: @p; width: @p;
border-radius: @radius 0 0 @radius; border-radius: @radius 0 0 @radius;
background: rgba(#000, .8); background: #777777;
z-index: 1; z-index: 1;
} }
@ -688,7 +690,6 @@ export default {
.bg { .bg {
height: @h; height: @h;
background: rgba(#000, .8);
} }
.progress-line { .progress-line {

6
src/pages/home/components/FollowSetting.vue
View File

@ -11,8 +11,8 @@
<div class="follow-setting-dialog"> <div class="follow-setting-dialog">
<div class="dialog-header"> <div class="dialog-header">
<div class="title-wrapper"> <div class="title-wrapper">
<span class="title">{{ currentItem.user.nickname }}</span> <span class="title">{{ currentItem.author.nickname }}</span>
<span class="subtitle">抖音号：{{ currentItem.user.short_id }}</span> <span class="subtitle">抖音号：{{ _getUserDouyinId(currentItem) }}</span>
</div> </div>
<dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back> <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
</div> </div>
@ -79,6 +79,7 @@
import FromBottomDialog from "../../../components/dialog/FromBottomDialog"; import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import Switches from "../../message/components/swtich/switches"; import Switches from "../../message/components/swtich/switches";
import {DefaultUser} from "@/utils/const_var"; import {DefaultUser} from "@/utils/const_var";
import {_getUserDouyinId} from "@/utils";
export default { export default {
name: "FollowSetting", name: "FollowSetting",
@ -107,6 +108,7 @@ export default {
created() { created() {
}, },
methods: { methods: {
_getUserDouyinId,
cancel(cb) { cancel(cb) {
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
cb && cb() cb && cb()

15
src/pages/home/components/FollowSetting2.vue
View File

@ -11,8 +11,8 @@
<div class="follow-setting-dialog"> <div class="follow-setting-dialog">
<div class="dialog-header"> <div class="dialog-header">
<div class="title-wrapper"> <div class="title-wrapper">
<span class="title">成都验证码</span> <span class="title">{{ currentItem.author.nickname }}</span>
<span class="subtitle">私信给朋友</span> <span class="subtitle">抖音号：{{ _getUserDouyinId(currentItem) }}</span>
</div> </div>
<dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back> <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
</div> </div>
@ -44,6 +44,8 @@
import FromBottomDialog from "../../../components/dialog/FromBottomDialog"; import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import Switches from "../../message/components/swtich/switches"; import Switches from "../../message/components/swtich/switches";
import {DefaultUser} from "@/utils/const_var";
import {_getUserDouyinId} from "@/utils";
export default { export default {
name: "FollowSetting", name: "FollowSetting",
@ -52,6 +54,14 @@ export default {
Switches Switches
}, },
props: { props: {
currentItem: {
type: Object,
default: {
user: DefaultUser,
isRequest: false,
post: [],
}
},
modelValue: false modelValue: false
}, },
data() { data() {
@ -64,6 +74,7 @@ export default {
created() { created() {
}, },
methods: { methods: {
_getUserDouyinId,
cancel(cb) { cancel(cb) {
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
cb && cb() cb && cb()

2
src/pages/home/components/IndicatorHome.vue
View File

@ -23,7 +23,7 @@
<span>关注</span> <span>关注</span>
<img src="../../../assets/img/icon/live.webp" class="tab2-img"> <img src="../../../assets/img/icon/live.webp" class="tab2-img">
</div> </div>
<div class="tab" :class="{active:index === 3}" @click.stop="change(3)"><span>商城</span> <div class="tab" :class="{active:index === 3}" @click.stop="change(3)"><span>长视频</span>
</div> </div>
<div class="tab" :class="{active:index === 4}" @click.stop="change(4)"><span>推荐</span> <div class="tab" :class="{active:index === 4}" @click.stop="change(4)"><span>推荐</span>
</div> </div>

28
src/pages/home/index.vue
View File

@ -174,6 +174,7 @@
v-model="state.showFollowSetting"/> v-model="state.showFollowSetting"/>
<FollowSetting2 <FollowSetting2
v-model:currentItem="state.currentItem"
@cancelFollow="$refs.uploader.cancelFollow()" @cancelFollow="$refs.uploader.cancelFollow()"
v-model="state.showFollowSetting2"/> v-model="state.showFollowSetting2"/>
@ -212,12 +213,11 @@ import FollowSetting2 from "@/pages/home/components/FollowSetting2.vue";
import ShareToFriend from "@/pages/home/components/ShareToFriend.vue"; import ShareToFriend from "@/pages/home/components/ShareToFriend.vue";
import UserPanel from "@/components/UserPanel.vue"; import UserPanel from "@/components/UserPanel.vue";
import Community from "@/pages/home/slide/Community.vue"; import Community from "@/pages/home/slide/Community.vue";
import Shop from "@/pages/shop/Shop.vue";
import Slide0 from "@/pages/home/slide/Slide0.vue"; import Slide0 from "@/pages/home/slide/Slide0.vue";
import Slide2 from "@/pages/home/slide/Slide2.vue"; import Slide2 from "@/pages/home/slide/Slide2.vue";
import Slide4 from "@/pages/home/slide/Slide4.vue"; import Slide4 from "@/pages/home/slide/Slide4.vue";
import {DefaultUser} from "@/utils/const_var"; import {DefaultUser} from "@/utils/const_var";
import {$no} from "@/utils"; import {$no, _getUserDouyinId} from "@/utils";
import LongVideo from "@/pages/home/slide/LongVideo.vue"; import LongVideo from "@/pages/home/slide/LongVideo.vue";
const nav = useNav() const nav = useNav()
@ -231,20 +231,7 @@ const state = reactive({
baseIndex: 1, baseIndex: 1,
navIndex: 4, navIndex: 4,
test: '', test: '',
recommendList: [ recommendList: [],
// {
// type: 'img',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// },
// {
// type: 'user-imgs',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// },
// {
// type: 'user',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// },
],
isSharing: false, isSharing: false,
canMove: true, canMove: true,
shareType: -1, shareType: -1,
@ -269,14 +256,12 @@ const state = reactive({
}) })
function delayShowDialog(cb) { function delayShowDialog(cb) {
setTimeout(() => { setTimeout(cb, 400)
cb()
}, 400)
} }
function setCurrentItem(item) { function setCurrentItem(item) {
if (state.currentItem.author.uid !== item.author.uid) { if (state.currentItem.author.uid !== item.author.uid) {
let id = item.author.unique_id || item.author.short_id let id = _getUserDouyinId(item)
console.log('item', id) console.log('item', id)
state.currentItem = { state.currentItem = {
...item, ...item,
@ -312,8 +297,9 @@ onMounted(() => {
bus.on(EVENT_KEY.GO_USERINFO, () => { bus.on(EVENT_KEY.GO_USERINFO, () => {
state.baseIndex = 2 state.baseIndex = 2
}) })
bus.once(EVENT_KEY.CURRENT_ITEM, setCurrentItem) bus.on(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
}) })
onUnmounted(() => { onUnmounted(() => {
bus.offAll() bus.offAll()
}) })

86
src/pages/home/slide/LongVideo.vue
View File

@ -1,7 +1,62 @@
<script setup> <script setup>
import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
import {uniqueId} from "lodash";
import api from "@/api";
import {useStore} from "vuex";
import {_checkImgUrl, _duration, _formatNumber} from "@/utils";
const store = useStore()
const loading = computed(() => store.state.loading)
const p = {
onShowComments() {
console.log('onShowComments')
}
}
const listRef = ref(null)
const state = reactive({
index: 0,
list: [],
uniqueId: uniqueId('uniqueId_'),
totalSize: 0,
pageSize: 10,
pageNo: 0,
})
function loadMore() {
if (!loading.value) {
state.pageNo++
getData()
}
}
async function getData(refresh = false) {
if (loading.value) return
store.commit('setLoading', true)
let res = await api.videos.recommended({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize})
// console.log('getSlide4Data-', 'refresh', refresh, res)
store.commit('setLoading', false)
if (res.code === 200) {
state.totalSize = res.data.total
if (refresh) {
state.list = []
}
state.list = state.list.concat(res.data.list)
} else {
state.pageNo--
}
}
onMounted(() => {
getData()
})
onUnmounted(() => {
})
</script> </script>
<template> <template>
<div class="page"> <div class="page">
<div class="item" <div class="item"
@ -10,22 +65,25 @@
i % 5 === 0 ? '' : (i % 2 === 1 && 'l'), i % 5 === 0 ? '' : (i % 2 === 1 && 'l'),
i % 5 === 0 ? '' : (i % 2 === 0 && 'r'), i % 5 === 0 ? '' : (i % 2 === 0 && 'r'),
]" ]"
v-for="(item,i) in 100"> v-for="(item,i) in state.list">
<video <video
controls controls
src="@/assets/video/0.mp4"></video> :poster="_checkImgUrl(item.video.cover.url_list[0])"
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="poster"> :src="item.video.play_addr.url_list[0]"
></video>
<img v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster">
<div class="duration">{{ _duration(item.duration / 1000) }}</div>
<div class="title"> <div class="title">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 {{ item.desc }}
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="l"> <div class="l">
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="avatar"> <img v-lazy="item.author.avatar_168x168.url_list[0]" alt="" class="avatar">
<div class="name">哈哈哈哈</div> <div class="name">{{ item.author.nickname }}</div>
</div> </div>
<div class="r"> <div class="r">
<Icon icon="icon-park-outline:like"/> <Icon icon="icon-park-outline:like"/>
<div class="num">9.2万</div> <div class="num">{{ _formatNumber(item.statistics.digg_count) }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -49,6 +107,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8rem; gap: 8rem;
position: relative;
.poster { .poster {
border-radius: 12rem; border-radius: 12rem;
@ -81,12 +140,21 @@
gap: 5rem; gap: 5rem;
} }
.duration {
color: white;
position: absolute;
bottom: 80rem;
right: 10rem;
font-size: 13rem;
}
.bottom { .bottom {
color: gray; color: gray;
.f; .f;
font-size: 13rem; font-size: 13rem;
.l { .l {
.f; .f;
.avatar { .avatar {
@ -113,6 +181,10 @@
grid-column-end: 3; grid-column-end: 3;
margin: 0; margin: 0;
.duration {
display: none;
}
.poster { .poster {
display: none; display: none;
} }

24
src/pages/home/slide/SlideList.vue
View File

@ -54,29 +54,7 @@ const render = useSlideListItemRender({...props.cbs, ...p})
const listRef = ref(null) const listRef = ref(null)
const state = reactive({ const state = reactive({
index: 0, index: 0,
list: [ list: [],
// {
// type: 'img',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
// author: {
// unique_id: uniqueId('list_')
// }
// },
// {
// type: 'user-imgs',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
// author: {
// unique_id: uniqueId('list_')
// }
// },
// {
// type: 'user',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
// author: {
// unique_id: uniqueId('list_')
// }
// },
],
uniqueId: uniqueId('uniqueId_'), uniqueId: uniqueId('uniqueId_'),
totalSize: 0, totalSize: 0,
pageSize: 10, pageSize: 10,

13
src/utils/index.jsx
View File

@ -435,7 +435,7 @@ export function $notice(val) {
Utils.$notice(val) Utils.$notice(val)
} }
export function $checkImgUrl(url) { export function _checkImgUrl(url) {
// console.log(url) // console.log(url)
if (!url) return if (!url) return
//本地图片 //本地图片
@ -448,4 +448,15 @@ export function $checkImgUrl(url) {
} else { } else {
return '/imgs/' + url return '/imgs/' + url
} }
}
export function _duration(num){
return Utils.$duration(num)
}
export function _formatNumber(num) {
return Utils.formatNumber(num)
}
export function _getUserDouyinId(item) {
return item.author.unique_id || item.author.short_id
} }