删除测试页面，slide增加刷新功能
This commit is contained in:
zyronon
parent
b2daccf106
commit
a22e113bf7
@ -97,6 +97,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress"
|
||||
v-if="duration > 60"
|
||||
:class="progressClass"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
@ -218,7 +219,7 @@ export default {
|
||||
this.videoScreenHeight = video.videoHeight / (video.videoWidth / this.width)
|
||||
this.duration = video.duration
|
||||
if (this.duration > 60) {
|
||||
// if (this.duration > 6) {
|
||||
// if (this.duration > 6) {
|
||||
this.step = this.width / Math.floor(this.duration)
|
||||
video.addEventListener('timeupdate', fun)
|
||||
}
|
||||
@ -271,9 +272,9 @@ export default {
|
||||
this.play()
|
||||
//这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
|
||||
this.isSingleClick = true
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
this.isSingleClick = false
|
||||
},300)
|
||||
}, 300)
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
@ -52,7 +52,7 @@ export default {
|
||||
Loading,
|
||||
},
|
||||
props: {
|
||||
modelValue: false,
|
||||
loading: false,
|
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
|
||||
name: {
|
||||
type: String,
|
||||
@ -69,7 +69,6 @@ export default {
|
||||
lefts: [],
|
||||
indicatorSpace: 0,
|
||||
open: false,
|
||||
loading: false,
|
||||
type: 1,
|
||||
moveY: 0
|
||||
}
|
||||
@ -128,13 +127,6 @@ export default {
|
||||
this.moveY = e
|
||||
})
|
||||
bus.on(this.name + '-end', this.end)
|
||||
bus.on(this.name + '-loading', () => {
|
||||
console.log('loading')
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 3000)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toggleType(type) {
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<div class="slide-item">
|
||||
<IndicatorHome
|
||||
v-hide="isUp"
|
||||
:loading="loading"
|
||||
name="main"
|
||||
v-model:index="baseIndex"
|
||||
/>
|
||||
@ -54,8 +55,26 @@
|
||||
<p v-for="i in 100">2</p>
|
||||
</div>
|
||||
</SlideHorizontal>
|
||||
|
||||
<Comment v-model="isUp"/>
|
||||
|
||||
<Share v-model="isSharing"
|
||||
ref="share"
|
||||
page-id="home-index"
|
||||
@dislike="dislike"
|
||||
:videoId="videos[videoIndex]?.id"
|
||||
:canDownload="videos[videoIndex]?.canDownload"
|
||||
@play-feedback="showPlayFeedback = true"
|
||||
@showShareDuoshan="delayShowDialog(e => this.showShareDuoshan = true)"
|
||||
@shareToFriend="delayShowDialog(e => this.shareToFriend = true)"
|
||||
@showDouyinCode="showDouyinCode = true"
|
||||
@showShare2WeChatZone="shareType = 2"
|
||||
@share2WeChat="shareType = 3"
|
||||
@share2QQZone="shareType = 4"
|
||||
@share2QQ="shareType = 5"
|
||||
@share2Webo="shareType = 8"
|
||||
@download="shareType = 9"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -73,6 +92,22 @@ import SlideVerticalInfinite from "./SlideVerticalInfinite";
|
||||
import Comment from "../../components/Comment";
|
||||
import enums from "../../utils/enums";
|
||||
import bus from "../../utils/bus";
|
||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
|
||||
import SlideColumnList from "../../components/slide/SlideColumnList";
|
||||
import SlideRowList from "../../components/slide/SlideRowList";
|
||||
import Video1 from "../../components/Video";
|
||||
import Share from "../../components/Share";
|
||||
import Uploader from "../me/Uploader";
|
||||
import PlayFeedback from "../home/components/PlayFeedback";
|
||||
import Duoshan from "../home/components/Duoshan";
|
||||
import ShareTo from "../home/components/ShareTo";
|
||||
import DouyinCode from "../../components/DouyinCode";
|
||||
import FollowSetting from "../home/components/FollowSetting";
|
||||
import FollowSetting2 from "../home/components/FollowSetting2";
|
||||
import BlockDialog from "../message/components/BlockDialog";
|
||||
import Search from "../../components/Search";
|
||||
import ConfirmDialog from "../../components/dialog/ConfirmDialog";
|
||||
import ShareToFriend from "../home/components/ShareToFriend";
|
||||
|
||||
export default {
|
||||
name: "slide",
|
||||
@ -83,16 +118,32 @@ export default {
|
||||
BVideo,
|
||||
Footer,
|
||||
IndicatorHome,
|
||||
Comment
|
||||
FromBottomDialog,
|
||||
SlideColumnList,
|
||||
SlideRowList,
|
||||
Video1,
|
||||
Comment,
|
||||
Share,
|
||||
Uploader,
|
||||
PlayFeedback,
|
||||
Duoshan,
|
||||
ShareTo,
|
||||
DouyinCode,
|
||||
FollowSetting,
|
||||
FollowSetting2,
|
||||
BlockDialog,
|
||||
Search,
|
||||
ConfirmDialog,
|
||||
ShareToFriend
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
baseIndex: 0,
|
||||
videoIndex: 5,
|
||||
videoIndex: 0,
|
||||
closeOne: true,
|
||||
videoPrefix: ['one', 'two', 'three'],
|
||||
loading: false,
|
||||
videos: [
|
||||
videos1: [
|
||||
{
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
@ -1431,6 +1482,7 @@ export default {
|
||||
}
|
||||
},
|
||||
],
|
||||
videos: [],
|
||||
totalSize: 52,
|
||||
pageSize: 10,
|
||||
pageNo: 0,
|
||||
@ -1487,15 +1539,30 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
bus.on('singleClick', () => {
|
||||
new Dom(`.v-${this.videoPrefix[this.baseIndex]}-${this.videoIndex}-video`).trigger('singleClick')
|
||||
})
|
||||
bus.on(this.videoPrefix[this.baseIndex] + '-loading', () => {
|
||||
console.log('loading')
|
||||
this.getData(true)
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
delayShowDialog(cb) {
|
||||
setTimeout(() => {
|
||||
cb()
|
||||
}, 400)
|
||||
},
|
||||
dislike() {
|
||||
this.$refs.virtualList.dislike(this.videos[10])
|
||||
this.videos[this.videoIndex] = this.videos[10]
|
||||
this.$notice('操作成功，将减少此类视频的推荐')
|
||||
},
|
||||
loadMore() {
|
||||
return
|
||||
// return
|
||||
if (!this.loading) {
|
||||
this.pageNo++
|
||||
this.getData()
|
||||
@ -1507,14 +1574,21 @@ export default {
|
||||
changeIndex() {
|
||||
this.closeOne = !this.closeOne
|
||||
},
|
||||
async getData() {
|
||||
async getData(refresh = false) {
|
||||
if (this.loading) return
|
||||
this.loading = true
|
||||
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
|
||||
console.log(res)
|
||||
// console.log(res)
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.totalSize = res.data.total
|
||||
if (refresh) {
|
||||
this.videos = []
|
||||
}
|
||||
this.videos = this.videos.concat(res.data.list)
|
||||
if (refresh) {
|
||||
this.$refs.virtualList.refresh(this.videos)
|
||||
}
|
||||
} else {
|
||||
this.pageNo--
|
||||
}
|
||||
|
||||
@ -94,12 +94,23 @@ export default {
|
||||
this.insertContent()
|
||||
},
|
||||
methods: {
|
||||
refresh(list) {
|
||||
$(this.wrapper).empty()
|
||||
list && this.insertContent(list)
|
||||
},
|
||||
dislike(item) {
|
||||
let currentItem = $(this.wrapper).find(`.slide-item[data-index=${this.lIndex}]`)
|
||||
let replaceItem = this.getInsEl(item, this.lIndex, true)
|
||||
new Dom(replaceItem).css('top', currentItem.css('top'))
|
||||
currentItem.replaceWith(replaceItem)
|
||||
},
|
||||
checkChildren() {
|
||||
this.wrapper = this.$refs.wrapper
|
||||
this.wrapperWidth = this.$getCss(this.wrapper, 'width')
|
||||
this.wrapperHeight = this.$getCss(this.wrapper, 'height')
|
||||
},
|
||||
insertContent() {
|
||||
//默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新
|
||||
insertContent(list = this.list) {
|
||||
let start = 0
|
||||
let that = this
|
||||
|
||||
@ -107,14 +118,14 @@ export default {
|
||||
start = this.lIndex - (this.virtualTotal - 1) / 2
|
||||
}
|
||||
let end = start + 5
|
||||
if (end >= this.list.length) {
|
||||
end = this.list.length
|
||||
if (end >= list.length) {
|
||||
end = list.length
|
||||
start = end - 5
|
||||
}
|
||||
if (start < 0) start = 0
|
||||
// console.log('start', start)
|
||||
// console.log('end', end)
|
||||
this.list.slice(start, end).map(
|
||||
list.slice(start, end).map(
|
||||
(item, index) => {
|
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
|
||||
let el = this.getInsEl(item, start + index, start + index === this.lIndex)
|
||||
@ -124,9 +135,9 @@ export default {
|
||||
this.$setCss(this.wrapper, 'transform', `translate3d(0px,
|
||||
${-this.lIndex * this.wrapperHeight}px, 0px)`)
|
||||
|
||||
if (this.lIndex > 2 && this.list.length > 5) {
|
||||
if (this.lIndex > 2 && list.length > 5) {
|
||||
$(this.wrapper).find(".slide-item").each(function () {
|
||||
if ((that.list.length - that.lIndex) > 2) {
|
||||
if ((list.length - that.lIndex) > 2) {
|
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight)
|
||||
} else {
|
||||
$(this).css('top', start * that.wrapperHeight)
|
||||
@ -193,7 +204,7 @@ export default {
|
||||
touchEnd(e) {
|
||||
let isDown = this.moveY < 0
|
||||
if (this.lIndex === 0 && !isDown && this.moveY > (this.homeRefresh + this.judgeValue)) {
|
||||
bus.emit(this.name + '-loading')
|
||||
bus.emit(this.prefix + '-loading')
|
||||
}
|
||||
if ((this.lIndex === 0 && !isDown) || (this.lIndex === this.list.length - 1 && isDown)) this.next = false
|
||||
|
||||
|
||||
@ -1,57 +1,21 @@
|
||||
<template>
|
||||
<div class="Test">
|
||||
<!-- <Uploader/>-->
|
||||
<TestVideo class="vue"/>
|
||||
</div>
|
||||
<!-- <TestSlide></TestSlide>-->
|
||||
<!-- <SlideUser></SlideUser>-->
|
||||
<SlideImgs></SlideImgs>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import ConfirmDialog from "../../components/dialog/ConfirmDialog";
|
||||
import Search from "../../components/Search";
|
||||
import Uploader from "../me/Uploader";
|
||||
import TestVideo from "./TestVideo";
|
||||
|
||||
import TestSlide from "./TestSlide";
|
||||
import SlideUser from "../../components/slide/SlideUser";
|
||||
import SlideImgs from "../../components/slide/SlideImgs";
|
||||
|
||||
export default {
|
||||
name: "Test",
|
||||
components: {
|
||||
Uploader,
|
||||
TestVideo
|
||||
TestSlide,
|
||||
SlideUser,
|
||||
SlideImgs
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
showFollowSetting: true,
|
||||
switches1: true,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/less/index";
|
||||
|
||||
|
||||
.Test {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
|
||||
.private-chat {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,185 +0,0 @@
|
||||
<template>
|
||||
<div class="Test">
|
||||
<Video1
|
||||
:is-play="false"
|
||||
:video="item"
|
||||
:index="0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Test",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
comment: '12',
|
||||
item: {
|
||||
"id": "08a90c93-807b-4a7a-aad3-68f75d65a9c8",
|
||||
video: 'http://douyin.ttentau.top/3.mp4',
|
||||
"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": 167000,
|
||||
"comment_count": 8152,
|
||||
"download_count": 0,
|
||||
"play_count": 0,
|
||||
"share_count": 30000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 2,
|
||||
"sort": 74,
|
||||
city: '阿勒泰',
|
||||
address: '可可托海景区（5A）',
|
||||
"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
|
||||
},
|
||||
{
|
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
|
||||
"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
|
||||
},
|
||||
"author": {
|
||||
school: {
|
||||
name: '',
|
||||
department: '',
|
||||
joinTime: '',
|
||||
education: '',
|
||||
displayType: '',
|
||||
},
|
||||
"id": "3",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "travels520",
|
||||
"favoriting_count": 54,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/11.png', import.meta.url).href,
|
||||
"city": "",
|
||||
"province": '',
|
||||
"country": "",
|
||||
"birthday": "",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 15,
|
||||
"follower_count": 302000,
|
||||
"aweme_count": 4007000,
|
||||
"nickname": "旅行家 ~ 七哥",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": "谢谢关注\n浅谈&合作v：a1231231234\n旅行&报名v: 1231231891242\n新疆 西藏 四川摄影旅拍路线规划与设计",
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
changeText(e) {
|
||||
console.log(e)
|
||||
console.log(this.$el.innerText)
|
||||
|
||||
},
|
||||
get() {
|
||||
console.log(this.$refs.input)
|
||||
|
||||
},
|
||||
call() {
|
||||
let span = document.createElement('span')
|
||||
span.setAttribute('contenteditable', false)
|
||||
span.classList.add('link')
|
||||
span.innerText = Date.now() + ' '
|
||||
this.$refs.input.append(span)
|
||||
},
|
||||
emoji() {
|
||||
let span = document.createElement('img')
|
||||
span.setAttribute('src', new URL('../assets/img/icon/message/emoji/4.webp'))
|
||||
span.classList.add('emoji')
|
||||
this.$refs.input.append(span)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/less/index";
|
||||
|
||||
.Test {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
font-size: 2rem;
|
||||
@emoji-width: 4rem;
|
||||
|
||||
.emoji {
|
||||
width: @emoji-width;
|
||||
height: @emoji-width;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
|
||||
|
||||
.auto-input {
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
padding: 0 .5rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.auto-input::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.auto-input:empty::before {
|
||||
/*content: "留下你的精彩评论吧";*/
|
||||
content: attr(placeholder);
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.auto-input:focus::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div class="test" v-top-love>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Dom from "../../utils/dom";
|
||||
|
||||
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 love-dbclick' : 'right love-dbclick'}"
|
||||
id="${id}"
|
||||
src="${new URL('../../assets/img/icon/loved.svg', import.meta.url).href}" 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)
|
||||
// el.addEventListener('dblclick', click)
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showShareDialog: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(e) {
|
||||
let id = 'a' + Date.now()
|
||||
let elWidth = 80
|
||||
let rotate = this.randomNum(0, 1)
|
||||
let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${new URL('../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)
|
||||
},
|
||||
randomNum(minNum, maxNum) {
|
||||
switch (arguments.length) {
|
||||
case 1:
|
||||
return parseInt(Math.random() * minNum + 1, 10);
|
||||
case 2:
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../assets/less/index";
|
||||
|
||||
.test {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
@width: 8rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
|
||||
&.left {
|
||||
animation: loveLeft 1.1s linear;
|
||||
}
|
||||
|
||||
&.right {
|
||||
animation: loveRight 1.1s linear;
|
||||
}
|
||||
|
||||
@scale: scale(1.2);
|
||||
@rotate: 10deg;
|
||||
|
||||
@keyframes loveLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2) rotate(0-@rotate);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0-@rotate);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0-@rotate);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0-@rotate);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-12rem) scale(2) rotate(0-@rotate);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes loveRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2) rotate(0+@rotate);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0+@rotate);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0+@rotate);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0+@rotate);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-12rem) scale(2) rotate(0+@rotate);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,223 +0,0 @@
|
||||
<template>
|
||||
<div class="Test">
|
||||
<SlideRowList
|
||||
style="height: calc(100% - 5rem);"
|
||||
v-model:active-index="activeIndex"
|
||||
indicatorType="home"
|
||||
>
|
||||
<SlideItem>
|
||||
<SlideColumnList>
|
||||
<SlideItem style="background: tan">
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
</SlideItem>
|
||||
<SlideItem style="background: red;">
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
</SlideItem>
|
||||
<SlideItem style="background: yellow">
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
</SlideItem>
|
||||
</SlideColumnList>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<SlideColumnList>
|
||||
<SlideItem style="background: tan">
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
<p>111111111111</p>
|
||||
</SlideItem>
|
||||
<SlideItem style="background: red;">
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
<p>222222222222</p>
|
||||
</SlideItem>
|
||||
<SlideItem style="background: yellow">
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
<p>3333333333333</p>
|
||||
</SlideItem>
|
||||
</SlideColumnList>
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import BaseButton from "../../components/BaseButton";
|
||||
import BaseMarquee from "../../components/BaseMarquee";
|
||||
import Dom from "../../utils/dom";
|
||||
|
||||
export default {
|
||||
name: "Test4",
|
||||
components: {BaseButton, BaseMarquee},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: '@喵嗷污说电影创作的原声'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
showIndicator: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIndex() {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/less/index";
|
||||
|
||||
.Test {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content1 {
|
||||
padding-top: 6rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div id="Test">
|
||||
<ul>
|
||||
<li v-for="item in list" @click="go">{{ item }} -- Test1</li>
|
||||
</ul>
|
||||
<button @click="$router.push('TestKeepAlivePage1')">go2</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Test",
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: 0
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.list = 50
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
go(){
|
||||
// this.$router.push('TestKeepAlivePage1')
|
||||
this.$router.push('/message/all')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
#Test {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
overflow: auto;
|
||||
|
||||
li {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div id="Test2">
|
||||
<ul>
|
||||
<li v-for="item in list" >{{ item }} -- Test2</li>
|
||||
</ul>
|
||||
<button @click="$back()">返回</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Test2",
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: 0
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
setTimeout(()=>{
|
||||
this.list = 50
|
||||
},1000)
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#Test2 {
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
|
||||
li {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div id="TestOne">
|
||||
<!-- <SlideUser/>-->
|
||||
<SlideImgs/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SlideUser from "../../components/slide/SlideUser";
|
||||
import SlideImgs from "../../components/slide/SlideImgs";
|
||||
|
||||
export default {
|
||||
name: "TestOne",
|
||||
components: {
|
||||
SlideUser,
|
||||
SlideImgs
|
||||
},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
#TestOne {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div id="TestVideo">
|
||||
<video :src="url" ref="video" controls autoplay muted></video>
|
||||
<Loading v-if="loading"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "TestVideo",
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
url: 'http://ttentau.top/13.mp4?v=' + Date.now()
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
let video = this.$refs.video
|
||||
// video.addEventListener('progress', () => {
|
||||
// console.log('加载中')
|
||||
// })
|
||||
// console.log(video)
|
||||
|
||||
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
|
||||
console.log((new Date()).getTime(), e, t)
|
||||
}, 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", '音量改变'); //音量改变
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
#TestVideo {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<div id="Test6">
|
||||
<p>第{{year}}年</p>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {ref} from "vue";
|
||||
|
||||
export default {
|
||||
name: "Test6",
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
setup() {
|
||||
const year = ref(0)
|
||||
setInterval(() => {
|
||||
year.value++
|
||||
}, 1000)
|
||||
return {
|
||||
year
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
#Test6 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,6 @@
|
||||
import Index2 from "../pages/home/Index2";
|
||||
import Test from "../pages/test/Test";
|
||||
import Test2 from "../pages/test/Test2";
|
||||
import Test3 from "../pages/test/Test3";
|
||||
import Test4 from "../pages/test/Test4";
|
||||
import Test5 from "../pages/test/Test5";
|
||||
import TestVue3 from "../pages/test/TestVue3";
|
||||
import TestKeepAlive from "../pages/test/TestKeepAlive";
|
||||
import TestKeepAlivePage1 from "../pages/test/TestKeepAlivePage1";
|
||||
import SubmitReport from "../pages/home/SubmitReport";
|
||||
import Music from "../pages/home/Music";
|
||||
import MusicRankList from "../pages/home/MusicRankList";
|
||||
@ -70,8 +64,6 @@ import VerificationCode from "../pages/login/VerificationCode";
|
||||
import RetrievePassword from "../pages/login/RetrievePassword";
|
||||
import Help from "../pages/login/Help";
|
||||
import Uploader from "../pages/me/Uploader";
|
||||
import TestSlide from "../pages/test/TestSlide";
|
||||
import TestOne from "../pages/test/TestOne";
|
||||
import Slide from "../pages/slide/Slide";
|
||||
|
||||
const routes = [
|
||||
@ -81,15 +73,7 @@ const routes = [
|
||||
},
|
||||
{path: '/slide', component: Slide},
|
||||
{path: '/test', component: Test},
|
||||
{path: '/test2', component: Test2},
|
||||
{path: '/test3', component: Test3},
|
||||
{path: '/test4', component: Test4},
|
||||
{path: '/test5', component: Test5},
|
||||
{path: '/testone', component: TestOne},
|
||||
{path: '/TestSlide', component: TestSlide},
|
||||
{path: '/TestVue3', component: TestVue3},
|
||||
{path: '/TestKeepAlive', component: TestKeepAlive},
|
||||
{path: '/TestKeepAlivePage1', component: TestKeepAlivePage1},
|
||||
{path: '/home', component: Index2},
|
||||
{path: '/home/music', component: Music},
|
||||
{path: '/home/music-rank-list', component: MusicRankList},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user