优化
This commit is contained in:
zyronon
parent
cc725a994c
commit
69e7cacd3b
@ -163,7 +163,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('video', this.localItem.id)
|
||||
// console.log('video', this.localItem.id)
|
||||
// console.log(this.commentVisible)
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
|
||||
@ -12,7 +12,7 @@ const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
return -1
|
||||
}
|
||||
},
|
||||
render: {
|
||||
@ -48,7 +48,7 @@ const props = defineProps({
|
||||
default: () => false
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index', 'loadMore'])
|
||||
const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
|
||||
|
||||
const appInsMap = new Map()
|
||||
const itemClassName = 'slide-item'
|
||||
@ -116,13 +116,16 @@ watch(
|
||||
watch(
|
||||
() => props.active,
|
||||
(newVal, oldVal) => {
|
||||
console.log('newVal', newVal, 'oldVal', oldVal)
|
||||
// console.log('newVal', newVal, 'oldVal', oldVal)
|
||||
if (newVal && !props.list.length) {
|
||||
return emit('refresh')
|
||||
}
|
||||
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
|
||||
uniqueId: props.uniqueId,
|
||||
index: state.localIndex,
|
||||
type: newVal === false ? EVENT_KEY.ITEM_STOP : EVENT_KEY.ITEM_PLAY
|
||||
})
|
||||
})
|
||||
}, {immediate: true})
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.VERTICAL)
|
||||
|
||||
@ -17,9 +17,10 @@
|
||||
</div>
|
||||
<div class="tab" :class="{active:index === 1}" @click.stop="change(1)">
|
||||
<span>社区</span>
|
||||
<img src="../../../assets/img/icon/live.webp" class="tab2-img">
|
||||
</div>
|
||||
<div class="tab" :class="{active:index === 2}" @click.stop="change(2)"><span>关注</span>
|
||||
<div class="tab" :class="{active:index === 2}" @click.stop="change(2)">
|
||||
<span>关注</span>
|
||||
<img src="../../../assets/img/icon/live.webp" class="tab2-img">
|
||||
</div>
|
||||
<div class="tab" :class="{active:index === 3}" @click.stop="change(3)"><span>商城</span>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
<SlideHorizontal v-model:index="state.baseIndex">
|
||||
<SlideItem>
|
||||
<IndicatorHome
|
||||
:isLight="state.subTypeVisible"
|
||||
v-if="!state.fullScreen"
|
||||
:loading="loading"
|
||||
name="main"
|
||||
@ -15,34 +14,15 @@
|
||||
id="home-index"
|
||||
:change-active-index-use-anim="false"
|
||||
v-model:index="state.navIndex">
|
||||
<Slide1 :cbs="p" :active="state.navIndex === 0 && state.baseIndex === 0"/>
|
||||
<Slide0 :cbs="p" :active="state.navIndex === 0 && state.baseIndex === 0"/>
|
||||
<SlideItem>
|
||||
<Community/>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">关注</div>
|
||||
</SlideItem>
|
||||
<Slide2 :active="state.navIndex === 2 && state.baseIndex === 0"/>
|
||||
<SlideItem>
|
||||
<Shop/>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<Loading style="position: absolute" v-if="state.slide4.loading && state.slide4.list.length === 0"/>
|
||||
<SlideVerticalInfinite
|
||||
ref="recommendListRef"
|
||||
:style="{background: 'black'}"
|
||||
name="main"
|
||||
v-model:index="state.slide4.index"
|
||||
:render="render"
|
||||
:list="state.slide4.list"
|
||||
:position="{
|
||||
baseIndex:0,
|
||||
navIndex:4,
|
||||
}"
|
||||
@loadMore="loadSlide4More"
|
||||
@refresh="() => getSlide4Data(true)"
|
||||
>
|
||||
</SlideVerticalInfinite>
|
||||
</SlideItem>
|
||||
<Slide4 :active="state.navIndex === 4 && state.baseIndex === 0"/>
|
||||
</SlideHorizontal>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
@ -116,19 +96,13 @@
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideHorizontal from '../../components/slide/SlideHorizontal.vue'
|
||||
import SlideVerticalInfinite from '../../components/slide/SlideVerticalInfinite.vue'
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import SlideAlbum from "../../components/slide/SlideAlbum.vue";
|
||||
import SlideUser from "../../components/slide/SlideUser.vue";
|
||||
import BVideo from "../../components/slide/BVideo.vue";
|
||||
import Comment from "../../components/Comment.vue";
|
||||
import Share from "../../components/Share.vue";
|
||||
import IndicatorHome from "./components/IndicatorHome.vue";
|
||||
import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
|
||||
import {computed, onMounted, onUnmounted, reactive} from "vue";
|
||||
import bus, {EVENT_KEY} from "../../utils/bus";
|
||||
import {useNav} from "@/utils/hooks/useNav";
|
||||
import Utils from "@/utils";
|
||||
import api from "@/api";
|
||||
import {useStore} from "vuex";
|
||||
import PlayFeedback from "@/pages/home/components/PlayFeedback.vue";
|
||||
import ShareTo from "@/pages/home/components/ShareTo.vue";
|
||||
@ -142,66 +116,21 @@ import ShareToFriend from "@/pages/home/components/ShareToFriend.vue";
|
||||
import UserPanel from "@/components/UserPanel.vue";
|
||||
import Community from "@/pages/home/components/Community.vue";
|
||||
import Shop from "@/pages/home/components/Shop.vue";
|
||||
import Loading from "@/components/Loading.vue";
|
||||
import Slide1 from "@/pages/home/slide/Slide1.vue";
|
||||
import Slide0 from "@/pages/home/slide/Slide0.vue";
|
||||
import Slide2 from "@/pages/home/slide/Slide2.vue";
|
||||
import Slide4 from "@/pages/home/slide/Slide4.vue";
|
||||
|
||||
const nav = useNav()
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const p = {
|
||||
onGoUserInfo() {
|
||||
console.log('parent-goUserInfo')
|
||||
}
|
||||
}
|
||||
|
||||
const store = useStore()
|
||||
const loading = computed(() => store.state.loading)
|
||||
const friends = computed(() => store.state.friends)
|
||||
const bodyHeight = computed(() => store.state.bodyHeight)
|
||||
const bodyWidth = computed(() => store.state.bodyWidth)
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const recommendListRef = ref(null)
|
||||
const state = reactive({
|
||||
baseIndex: 0,
|
||||
navIndex: 0,
|
||||
navIndex: 4,
|
||||
test: '',
|
||||
slide1: {
|
||||
loading: false,
|
||||
index: 0,
|
||||
list: [],
|
||||
totalSize: 0,
|
||||
pageSize: 10,
|
||||
pageNo: 0,
|
||||
},
|
||||
slide2: {
|
||||
loading: false,
|
||||
index: 0,
|
||||
list: [],
|
||||
totalSize: 0,
|
||||
pageSize: 10,
|
||||
pageNo: 0,
|
||||
},
|
||||
slide3: {
|
||||
loading: false,
|
||||
index: 0,
|
||||
list: [],
|
||||
totalSize: 0,
|
||||
pageSize: 10,
|
||||
pageNo: 0,
|
||||
},
|
||||
slide4: {
|
||||
loading: false,
|
||||
index: 0,
|
||||
list: [],
|
||||
totalSize: 0,
|
||||
pageSize: 10,
|
||||
pageNo: 0,
|
||||
},
|
||||
slideOneList: [],
|
||||
recommendList: [
|
||||
// {
|
||||
// type: 'img',
|
||||
@ -232,41 +161,7 @@ const state = reactive({
|
||||
|
||||
commentVisible: false,
|
||||
fullScreen: false,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
//
|
||||
// const loading = computed(() => {
|
||||
// return state[`slide${state.navIndex}`].loading
|
||||
// })
|
||||
|
||||
|
||||
async function getSlide4Data(refresh = false) {
|
||||
if (state.slide4.loading) return
|
||||
state.slide4.loading = true
|
||||
let res = await api.videos.recommended({pageNo: refresh ? 0 : state.slide4.pageNo, pageSize: state.slide4.pageSize})
|
||||
console.log('getSlide4Data-', 'refresh', refresh, res)
|
||||
state.slide4.loading = false
|
||||
if (res.code === 200) {
|
||||
state.slide4.totalSize = res.data.total
|
||||
if (refresh) {
|
||||
state.slide4.list = []
|
||||
}
|
||||
state.slide4.list = state.slide4.list.concat(res.data.list)
|
||||
} else {
|
||||
state.slide4.pageNo--
|
||||
}
|
||||
}
|
||||
|
||||
function loadSlide4More() {
|
||||
if (!state.loading) {
|
||||
state.pageNo++
|
||||
getSlide4Data()
|
||||
}
|
||||
}
|
||||
|
||||
function delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
@ -274,25 +169,7 @@ function delayShowDialog(cb) {
|
||||
}, 400)
|
||||
}
|
||||
|
||||
function dislike() {
|
||||
recommendListRef.value.dislike(state.recommendList[1])
|
||||
state.recommendList[state.itemIndex] = state.recommendList[1]
|
||||
Utils.$notice('操作成功，将减少此类视频的推荐')
|
||||
}
|
||||
|
||||
function end() {
|
||||
// this.$notice('暂时没有更多了')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
bus.on('update:item', val => {
|
||||
const {baseIndex, navIndex, itemIndex} = val.position
|
||||
if (navIndex === 5) {
|
||||
state.recommendList[itemIndex] = val.item
|
||||
}
|
||||
})
|
||||
|
||||
bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => state.fullScreen = true)
|
||||
bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => state.fullScreen = false)
|
||||
bus.on(EVENT_KEY.OPEN_COMMENTS, (e) => {
|
||||
@ -319,32 +196,10 @@ function closeComments() {
|
||||
bus.emit(EVENT_KEY.CLOSE_COMMENTS)
|
||||
}
|
||||
|
||||
function render(item, itemIndex, play, position) {
|
||||
// console.log('item', item)
|
||||
let node
|
||||
if (item.type === 'img') {
|
||||
node = <img src={item.src} style="height:100%;"/>
|
||||
}
|
||||
if (item.type === 'imgs') {
|
||||
node = <SlideAlbum/>
|
||||
}
|
||||
if (item.type === 'user') {
|
||||
node = <SlideUser/>
|
||||
}
|
||||
if (item.type === 'send-video') {
|
||||
node = <video src={item.src} style="height:100%;"/>
|
||||
}
|
||||
if (item.type === 'recommend-video') {
|
||||
node = <BVideo
|
||||
isPlay={play}
|
||||
item={item}
|
||||
position={{...position, itemIndex}}
|
||||
onGoMusic={e => nav('/home/music')}
|
||||
onShowShare={e => state.isSharing = true}
|
||||
onGoUserInfo={e => state.baseIndex = 1}
|
||||
/>
|
||||
}
|
||||
return node
|
||||
function dislike() {
|
||||
// listRef.value.dislike(state.list[1])
|
||||
// state.list[state.index] = state.list[1]
|
||||
// Utils.$notice('操作成功，将减少此类视频的推荐')
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -358,11 +213,6 @@ function render(item, itemIndex, play, position) {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.big {
|
||||
font-weight: bold;
|
||||
font-size: 100rem;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
204
src/pages/home/slide/Slide0.vue
Normal file
204
src/pages/home/slide/Slide0.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<SlideItem class="slide-item-class">
|
||||
<div class="sub-type"
|
||||
:class="state.subTypeIsTop?'top':''"
|
||||
ref="subTypeRef">
|
||||
<div class="local">
|
||||
<div class="card" @touchmove.capture="stop">
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>美食</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>休闲娱乐</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>游玩</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>丽人/美发</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>住宿</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>游玩</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>丽人/美发</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>住宿</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-type-notice"
|
||||
v-if="state.subType===-1 && !state.subTypeVisible"
|
||||
@click="showSubType">附近吃喝玩乐
|
||||
</div>
|
||||
<SlideList
|
||||
:active="props.active"
|
||||
:style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
|
||||
:api="api.videos.recommended"
|
||||
@touchstart="pageClick"
|
||||
/>
|
||||
</SlideItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
|
||||
import bus, {EVENT_KEY} from "@/utils/bus";
|
||||
import Utils from "@/utils";
|
||||
import api from "@/api";
|
||||
import Loading from "@/components/Loading.vue";
|
||||
import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
|
||||
import SlideList from './SlideList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
cbs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:item',
|
||||
'goUserInfo',
|
||||
'showComments',
|
||||
'showShare',
|
||||
'goMusic',
|
||||
])
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
}
|
||||
}
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
|
||||
|
||||
function showSubType(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
console.log('subTypeRef',)
|
||||
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
|
||||
state.subTypeVisible = true
|
||||
setTimeout(() => state.subTypeIsTop = true, 300)
|
||||
bus.emit(EVENT_KEY.OPEN_SUB_TYPE,)
|
||||
}
|
||||
|
||||
function pageClick(e) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,)
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
|
||||
.sub-type {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&.top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.local {
|
||||
transition: all .3s;
|
||||
font-size: 14rem;
|
||||
color: gray;
|
||||
//background: #f9f9f9;
|
||||
background: linear-gradient(to right, rgb(36, 34, 84), rgb(7, 5, 16));
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.card {
|
||||
margin: 20rem;
|
||||
margin-top: @header-height;
|
||||
padding: 20rem;
|
||||
border-radius: 8rem;
|
||||
width: 100%;
|
||||
//background: white;
|
||||
background: linear-gradient(to right, rgb(53, 51, 110), rgb(29, 21, 66));
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@width: 35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 17vw;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-type-notice {
|
||||
position: absolute;
|
||||
background: rgba(black, .4);
|
||||
top: 100rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 10rem;
|
||||
z-index: 3;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
src/pages/home/slide/Slide2.vue
Normal file
149
src/pages/home/slide/Slide2.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<SlideItem class="slide-item-class">
|
||||
<div class="sub-type"
|
||||
:class="state.subTypeIsTop?'top':''"
|
||||
ref="subTypeRef">
|
||||
<div class="card" @touchmove.capture="stop">
|
||||
<div class="nav-item" v-for="i in 2">
|
||||
<img src="@/assets/img/icon/msg-icon9.webp" alt="">
|
||||
<span>美食美食美食美食美食美食美食</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-type-notice"
|
||||
v-if="state.subType===-1 && !state.subTypeVisible"
|
||||
@click="showSubType">1个直播
|
||||
</div>
|
||||
<SlideList
|
||||
:active="props.active"
|
||||
:style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
|
||||
:api="api.videos.recommended"
|
||||
@touchstart="pageClick"
|
||||
/>
|
||||
</SlideItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
|
||||
import bus, {EVENT_KEY} from "@/utils/bus";
|
||||
import Utils from "@/utils";
|
||||
import api from "@/api";
|
||||
import Loading from "@/components/Loading.vue";
|
||||
import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
|
||||
import SlideList from './SlideList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
subTypeVisible: false,
|
||||
subTypeHeight: '0',
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
|
||||
|
||||
function showSubType(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
console.log('subTypeRef',)
|
||||
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
|
||||
state.subTypeVisible = true
|
||||
setTimeout(() => state.subTypeIsTop = true, 300)
|
||||
bus.emit(EVENT_KEY.OPEN_SUB_TYPE,)
|
||||
}
|
||||
|
||||
function pageClick(e) {
|
||||
// console.log('pageClick')
|
||||
if (state.subTypeVisible) {
|
||||
state.subTypeIsTop = state.subTypeVisible = false
|
||||
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,)
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getData()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
.slide-item-class {
|
||||
position: relative;
|
||||
|
||||
.sub-type {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
|
||||
&.top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: @header-height;
|
||||
padding: 20rem 5rem;
|
||||
width: 100%;
|
||||
background: rgba(black, .4);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@width: 50rem;
|
||||
width: @width + 5rem;
|
||||
margin: 0 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-type-notice {
|
||||
position: absolute;
|
||||
background: rgba(black, .4);
|
||||
top: 100rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 10rem;
|
||||
z-index: 3;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -94,9 +94,7 @@ const p = {
|
||||
}
|
||||
}
|
||||
|
||||
const render = useSlideListItemRender({...props.cbs, ...p})
|
||||
const subTypeRef = ref(null)
|
||||
const listRef = ref(null)
|
||||
const state = reactive({
|
||||
index: 0,
|
||||
subType: -1,
|
||||
22
src/pages/home/slide/Slide4.vue
Normal file
22
src/pages/home/slide/Slide4.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<SlideItem>
|
||||
<SlideList
|
||||
style="background:#000;"
|
||||
:active="props.active"
|
||||
:api="api.videos.recommended"
|
||||
/>
|
||||
</SlideItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideItem from '@/components/slide/SlideItem.vue'
|
||||
import api from "@/api";
|
||||
import SlideList from './SlideList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -17,11 +17,10 @@
|
||||
|
||||
<script setup lang="jsx">
|
||||
import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue'
|
||||
import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
|
||||
import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
|
||||
import bus, {EVENT_KEY} from "@/utils/bus";
|
||||
import Utils from "@/utils";
|
||||
import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
|
||||
import Loading from "@/components/Loading.vue";
|
||||
import {useStore} from "vuex";
|
||||
import {uniqueId} from "lodash";
|
||||
|
||||
@ -52,10 +51,6 @@ const emit = defineEmits([
|
||||
const store = useStore()
|
||||
const loading = computed(() => store.state.loading)
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const p = {
|
||||
onShowComments() {
|
||||
console.log('onShowComments')
|
||||
@ -122,14 +117,12 @@ function click(uniqueId) {
|
||||
}
|
||||
|
||||
function updateItem({position, item}) {
|
||||
console.log('po', position)
|
||||
if (position.uniqueId === state.uniqueId) {
|
||||
state.list[position.index] = item
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
bus.on(EVENT_KEY.SINGLE_CLICK, click)
|
||||
bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user