Merge remote-tracking branch 'origin/vue3-vite' into vue3-vite
This commit is contained in:
zyronon
commit
d1612e8aac
@ -74,66 +74,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
color: white;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
border-radius: .3rem;
|
||||
//width: 100%;
|
||||
font-size: 1.4rem;
|
||||
|
||||
&.primary {
|
||||
background: @primary-btn-color;
|
||||
|
||||
&:active {
|
||||
background: @disable-primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-active {
|
||||
&:active {
|
||||
&.primary {
|
||||
background: @primary-btn-color;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: @second-btn-color;
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&.primary {
|
||||
background: gainsboro;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.primary {
|
||||
background: gainsboro;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: @second-btn-color;
|
||||
|
||||
&:active {
|
||||
background: @second-btn-color-tran;
|
||||
}
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
}
|
||||
|
||||
.not-read {
|
||||
@width: .7rem;
|
||||
|
||||
@ -222,7 +222,7 @@ export default {
|
||||
// eventTester("durationchange", '资源长度改变'); //资源长度改变
|
||||
// eventTester("volumechange", '音量改变'); //音量改变
|
||||
|
||||
console.log('mounted')
|
||||
// console.log('mounted')
|
||||
// bus.off('singleClickBroadcast')
|
||||
bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, this.click)
|
||||
bus.on(EVENT_KEY.DIALOG_MOVE, this.onDialogMove)
|
||||
@ -233,13 +233,14 @@ export default {
|
||||
bus.on(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
|
||||
},
|
||||
unmounted() {
|
||||
console.log('unmounted')
|
||||
// console.log('unmounted')
|
||||
bus.off(EVENT_KEY.SINGLE_CLICK_BROADCAST, this.click)
|
||||
bus.off(EVENT_KEY.DIALOG_MOVE, this.onDialogMove)
|
||||
bus.off(EVENT_KEY.DIALOG_END, this.onDialogEnd)
|
||||
bus.off(EVENT_KEY.OPEN_COMMENTS, this.onOpenComments)
|
||||
bus.off(EVENT_KEY.CLOSE_COMMENTS, this.onCloseComments)
|
||||
bus.off(EVENT_KEY.OPEN_SUB_TYPE, this.onCloseSubType)
|
||||
bus.off(EVENT_KEY.OPEN_SUB_TYPE, this.onOpenSubType)
|
||||
bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
|
||||
},
|
||||
methods: {
|
||||
onOpenSubType({index, height}) {
|
||||
|
||||
@ -6,21 +6,20 @@
|
||||
@touchstart.passive="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd">
|
||||
<div class="img-slide-item" v-for="img in props.modelValue.imgs">
|
||||
<div class="img-slide-item" v-for="img in props.item.imgs">
|
||||
<img :ref="e=>setItemRef(e,'itemRefs')"
|
||||
:src="img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if=" state.operationStatus === SlideAlbumOperationStatus.Normal">
|
||||
<ItemToolbar :item="props.modelValue"
|
||||
:index="0"
|
||||
prefix="sadfa"
|
||||
<ItemToolbar v-model:item="state.localItem"
|
||||
:position="position"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
<ItemDesc
|
||||
:item="props.modelValue"
|
||||
:index="0"
|
||||
prefix="sadfa"
|
||||
v-model:item="state.localItem"
|
||||
:position="position"
|
||||
/>
|
||||
</template>
|
||||
<!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了 -->
|
||||
@ -31,7 +30,7 @@
|
||||
@touchmove="progressBarTouchMove"
|
||||
@touchend="progressBarTouchMEnd"
|
||||
>
|
||||
<div class="bar" v-for="(img,index) in modelValue.imgs">
|
||||
<div class="bar" v-for="(img,index) in item.imgs">
|
||||
<div class="progress"
|
||||
:style="getProgressWidth(index)"></div>
|
||||
</div>
|
||||
@ -41,12 +40,12 @@
|
||||
<div class="preview-wrapper">
|
||||
<img :src="img"
|
||||
:class="{'preview-img':index === state.localIndex}"
|
||||
v-for="(img,index) in props.modelValue.imgs"
|
||||
v-for="(img,index) in props.item.imgs"
|
||||
:ref="e=>setItemRef(e,'previewImgs')"
|
||||
>
|
||||
</div>
|
||||
<div class="indicator">
|
||||
<span class="index">{{ state.localIndex + 1 }}</span> / {{ props.modelValue.imgs.length }}
|
||||
<span class="index">{{ state.localIndex + 1 }}</span> / {{ props.item.imgs.length }}
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
@ -67,7 +66,7 @@
|
||||
import enums from "../../utils/enums";
|
||||
import Utils from '../../utils'
|
||||
import {mat4} from 'gl-matrix'
|
||||
import {onMounted, onBeforeUpdate, reactive, ref, watch, computed} from "vue";
|
||||
import {onMounted, onBeforeUpdate, reactive, ref, watch, computed, provide} from "vue";
|
||||
import {
|
||||
getSlideDistance,
|
||||
slideInit,
|
||||
@ -97,8 +96,11 @@ let ov = new Float32Array([
|
||||
]);
|
||||
let origin = cloneDeep(ov)
|
||||
const rectMap = new Map()
|
||||
|
||||
// provide('isPlaying', computed(() => this.isPlaying))
|
||||
provide('isPlaying', false)
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
item: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
@ -197,7 +199,13 @@ const props = defineProps({
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
})
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
@ -228,6 +236,7 @@ const state = reactive({
|
||||
status: 'play',//stop,custom
|
||||
progress: 0,
|
||||
cycleFn: null,
|
||||
localItem: props.item,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@ -236,7 +245,7 @@ onMounted(() => {
|
||||
state.cycleFn = () => {
|
||||
return
|
||||
if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
|
||||
if (state.progress < props.modelValue.imgs.length * 100) {
|
||||
if (state.progress < props.item.imgs.length * 100) {
|
||||
state.progress += .4
|
||||
state.localIndex = parseInt(state.progress / 100)
|
||||
if (wrapperEl.value) {
|
||||
@ -455,7 +464,7 @@ function setItemRef(el, key) {
|
||||
}
|
||||
|
||||
function canNext(isNext, e) {
|
||||
let res = !((state.localIndex === 0 && !isNext) || (state.localIndex === props.modelValue.imgs.length - 1 && isNext));
|
||||
let res = !((state.localIndex === 0 && !isNext) || (state.localIndex === props.item.imgs.length - 1 && isNext));
|
||||
if (!res && state.operationStatus === SlideAlbumOperationStatus.Detail && e) {
|
||||
Utils.$stopPropagation(e)
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
.fade1-enter-from,
|
||||
.fade1-leave-to {
|
||||
transform: translateY(10px);
|
||||
transform: translateY(10rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
background: @main-bg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.preview-img {
|
||||
position: fixed;
|
||||
@ -35,11 +35,11 @@
|
||||
|
||||
.download {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
padding: .3rem;
|
||||
bottom: 20rem;
|
||||
right: 20rem;
|
||||
padding: 3rem;
|
||||
background: @second-btn-color-tran;
|
||||
width: 2rem;
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,33 +56,33 @@
|
||||
.scroll {
|
||||
|
||||
.notice {
|
||||
font-size: 1.2rem;
|
||||
height: 4rem;
|
||||
font-size: 12rem;
|
||||
height: 40rem;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 1.2rem;
|
||||
margin-right: .5rem;
|
||||
height: 12rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collect {
|
||||
padding: .7rem;
|
||||
padding: 7rem;
|
||||
|
||||
.video {
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: .7rem;
|
||||
border-radius: 5rem;
|
||||
padding: 10rem;
|
||||
margin-bottom: 7rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
@ -90,20 +90,20 @@
|
||||
color: gainsboro;
|
||||
|
||||
img {
|
||||
height: 2rem;
|
||||
margin-right: .5rem;
|
||||
height: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
height: 15rem;
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -114,13 +114,13 @@
|
||||
|
||||
.item {
|
||||
height: calc(33.33vw * 1.3);
|
||||
padding: .2rem;
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
object-fit: cover;
|
||||
border-radius: .4rem;
|
||||
border-radius: 4rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
@ -129,16 +129,16 @@
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
left: .5rem;
|
||||
bottom: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.love {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: .5rem;
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -147,14 +147,14 @@
|
||||
|
||||
.music {
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 5rem;
|
||||
padding: 10rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
@ -162,8 +162,8 @@
|
||||
color: gainsboro;
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
margin-right: .5rem;
|
||||
height: 15rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -173,8 +173,8 @@
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
height: 15rem;
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -184,19 +184,19 @@
|
||||
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||
|
||||
.item {
|
||||
padding: .2rem;
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
border-radius: .4rem;
|
||||
border-radius: 4rem;
|
||||
width: 100%;
|
||||
height: calc((100vw - 3.4rem) / 3);
|
||||
height: calc((100vw - 34rem) / 3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: .5rem;
|
||||
margin-top: 5rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
@ -214,8 +214,8 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 4.6rem;
|
||||
padding: 0 1.5rem;
|
||||
height: 46rem;
|
||||
padding: 0 15rem;
|
||||
background: transparent;
|
||||
transition: all .2s;
|
||||
|
||||
@ -232,28 +232,28 @@
|
||||
}
|
||||
|
||||
.left {
|
||||
font-size: 1.2rem;
|
||||
height: 2.6rem;
|
||||
font-size: 12rem;
|
||||
height: 26rem;
|
||||
display: flex;
|
||||
padding-right: 1.3rem;
|
||||
padding-left: .5rem;
|
||||
padding-right: 13rem;
|
||||
padding-left: 5rem;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
border-radius: 20rem;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
|
||||
img {
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
padding: 6rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
img {
|
||||
margin-left: 2rem;
|
||||
margin-left: 20rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
padding: 6rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -261,7 +261,7 @@
|
||||
.desc {
|
||||
header {
|
||||
color: white;
|
||||
height: 12rem;
|
||||
height: 120rem;
|
||||
background-image: url('../../assets/img/header-bg.png');
|
||||
//background-image: url('data:image/jpeg;base64,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');
|
||||
background-size: cover;
|
||||
@ -272,10 +272,10 @@
|
||||
}
|
||||
|
||||
.detail {
|
||||
transform: translateY(-1rem);
|
||||
transform: translateY(-10rem);
|
||||
background: @main-bg;
|
||||
padding: 0 2rem 0 2rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
padding: 0 20rem 0 20rem;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
@ -283,34 +283,34 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
transform: translateY(-2rem);
|
||||
transform: translateY(-20rem);
|
||||
|
||||
.head-image {
|
||||
background: black;
|
||||
padding: 2px;
|
||||
border-radius: 50%;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
width: 80rem;
|
||||
height: 80rem;
|
||||
}
|
||||
|
||||
.heat {
|
||||
margin-top: 1rem;
|
||||
width: calc(100% - 12rem);
|
||||
margin-top: 10rem;
|
||||
width: calc(100% - 120rem);
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.num {
|
||||
margin-top: .5rem;
|
||||
margin-top: 5rem;
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
font-weight: bold;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -322,20 +322,20 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
transform: translateY(-2rem);
|
||||
transform: translateY(-20rem);
|
||||
|
||||
.number {
|
||||
color: @second-text-color;
|
||||
padding-bottom: 1rem;
|
||||
padding-bottom: 10rem;
|
||||
border-bottom: 1px solid @line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 1.4rem;
|
||||
margin-left: .5rem;
|
||||
width: 14rem;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -345,11 +345,11 @@
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 5rem;
|
||||
|
||||
img {
|
||||
height: 1.2rem;
|
||||
margin-left: .6rem;
|
||||
height: 12rem;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
@ -362,17 +362,17 @@
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
padding: .2rem .5rem;
|
||||
border-radius: .2rem;
|
||||
padding: 2rem 5rem;
|
||||
border-radius: 2rem;
|
||||
background: @second-btn-color-tran;
|
||||
font-size: 1rem;
|
||||
font-size: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .5rem;
|
||||
margin-right: 5rem;
|
||||
|
||||
img {
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -384,17 +384,17 @@
|
||||
.button {
|
||||
position: relative;
|
||||
width: 49%;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: .2rem;
|
||||
border-radius: 2rem;
|
||||
background: @second-btn-color;
|
||||
height: 3rem;
|
||||
height: 30rem;
|
||||
color: white;
|
||||
|
||||
.not-read {
|
||||
right: 4.5rem;
|
||||
right: 45rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
@ -403,18 +403,18 @@
|
||||
|
||||
.other {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 20rem;
|
||||
|
||||
.item {
|
||||
margin-right: 2.5rem;
|
||||
margin-right: 25rem;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
margin-right: .8rem;
|
||||
border-radius: .4rem;
|
||||
margin-right: 8rem;
|
||||
border-radius: 4rem;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .8rem;
|
||||
height: 2.2rem;
|
||||
padding: 8rem;
|
||||
height: 22rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
@ -424,12 +424,12 @@
|
||||
|
||||
.top {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -439,7 +439,7 @@
|
||||
|
||||
|
||||
.ul {
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@ -461,11 +461,11 @@
|
||||
box-sizing: border-box;
|
||||
background: @main-bg;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
padding: 10rem 20rem;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 4rem;
|
||||
line-height: 40rem;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 90px;
|
||||
@ -485,13 +485,13 @@
|
||||
|
||||
.more-function {
|
||||
box-sizing: border-box;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: @main-bg;
|
||||
|
||||
.title {
|
||||
padding: 2rem 0 1rem 2rem;
|
||||
padding: 20rem 0 10rem 20rem;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
@ -511,8 +511,8 @@
|
||||
img {
|
||||
border-radius: 50%;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .6rem;
|
||||
height: 1.6rem;
|
||||
padding: 6rem;
|
||||
height: 16rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
@ -520,7 +520,7 @@
|
||||
}
|
||||
|
||||
.button-ctn {
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
z-index: 99999;
|
||||
width: 70vw;
|
||||
position: absolute;
|
||||
@ -529,10 +529,10 @@
|
||||
|
||||
.button {
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 4rem);
|
||||
width: calc(100% - 40rem);
|
||||
background: @second-btn-color;
|
||||
margin: 2rem;
|
||||
height: 4.5rem;
|
||||
margin: 20rem;
|
||||
height: 45rem;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -540,9 +540,9 @@
|
||||
color: white;
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin-right: 15px;
|
||||
height: 25rem;
|
||||
width: 25rem;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -420,7 +420,7 @@ export default {
|
||||
return this.$store.state.bodyWidth
|
||||
},
|
||||
videoSlideRowListStyle() {
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)'}
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 146rem)'}
|
||||
},
|
||||
SlideItemStyle() {
|
||||
if (this.tempScroll || this.isScroll) return {overflow: 'auto'}
|
||||
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
@ -113,16 +113,16 @@ export default {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.5rem;
|
||||
height: 6rem;
|
||||
padding: 0 15rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.share {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-left: 1.5rem;
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
margin-left: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,15 +153,15 @@ export default {
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.6rem;
|
||||
margin-top: 20rem;
|
||||
font-size: 16rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 14rem;
|
||||
margin-top: 20rem;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@ -170,7 +170,7 @@ export default {
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
bottom: 30rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
@ -180,20 +180,20 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
|
||||
.wrapper {
|
||||
background: rgba(252, 250, 250, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
padding: 1.8rem;
|
||||
padding: 18rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 2.6rem;
|
||||
width: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -211,14 +211,14 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.header {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
height: 5rem;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -236,17 +236,17 @@ export default {
|
||||
}
|
||||
|
||||
.my-collect {
|
||||
margin-top: 5rem;
|
||||
margin-top: 50rem;
|
||||
color: rgba(88, 88, 96);
|
||||
position: relative;
|
||||
|
||||
.wrapper {
|
||||
padding: @padding-page;
|
||||
padding-bottom: 8rem;
|
||||
padding-bottom: 80rem;
|
||||
}
|
||||
|
||||
.play-all {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -257,19 +257,19 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 3rem;
|
||||
margin-right: 1rem;
|
||||
width: 30rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 1.3rem;
|
||||
font-size: 13rem;
|
||||
color: gray;
|
||||
margin-left: .5rem;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 2rem;
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -278,21 +278,21 @@ export default {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 15rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.cover-wrapper {
|
||||
margin-right: 1rem;
|
||||
margin-right: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.cover {
|
||||
border-radius: .2rem;
|
||||
@width: 6rem;
|
||||
border-radius: 2rem;
|
||||
@width: 60rem;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
height: @width;
|
||||
@ -312,7 +312,7 @@ export default {
|
||||
}
|
||||
|
||||
.author, .desc-bottom {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
@ -321,14 +321,14 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
font-size: 1rem;
|
||||
font-size: 10rem;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .2rem .5rem;
|
||||
margin-right: .5rem;
|
||||
padding: 2rem 5rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
.duration {
|
||||
margin-right: 1.4rem;
|
||||
margin-right: 14rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@ -340,14 +340,14 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.playing-icon {
|
||||
width: 2.4rem;
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
.collect-icon {
|
||||
margin-left: 3rem;
|
||||
margin-left: 30rem;
|
||||
|
||||
img {
|
||||
width: 2.4rem;
|
||||
width: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -357,7 +357,7 @@ export default {
|
||||
|
||||
.recommend {
|
||||
color: white;
|
||||
margin: 3rem 0;
|
||||
margin: 30rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -368,9 +368,9 @@ export default {
|
||||
justify-content: space-between;
|
||||
|
||||
.auto-play {
|
||||
font-size: 1.3rem;
|
||||
font-size: 13rem;
|
||||
color: @second-text-color;
|
||||
margin-right: 1rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
}
|
||||
@ -386,7 +386,7 @@ export default {
|
||||
background: rgba(56, 59, 68);
|
||||
|
||||
.playing-wrapper {
|
||||
transform: translateY(-1rem);
|
||||
transform: translateY(-10rem);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -394,13 +394,13 @@ export default {
|
||||
|
||||
.cover-wrapper {
|
||||
background: rgba(56, 59, 68);
|
||||
padding: .7rem;
|
||||
padding: 7rem;
|
||||
border-radius: 50%;
|
||||
|
||||
.cover {
|
||||
background: rgba(97, 98, 103);
|
||||
padding: .3rem;
|
||||
@width: 5rem;
|
||||
padding: 3rem;
|
||||
@width: 50rem;
|
||||
height: @width;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
@ -409,20 +409,20 @@ export default {
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 0 1rem;
|
||||
margin: 0 10rem;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 3.8rem;
|
||||
height: 3.8rem;
|
||||
margin-right: 2rem;
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
margin-right: 20rem;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
width: 28rem;
|
||||
height: 28rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -437,13 +437,13 @@ export default {
|
||||
|
||||
.dialog-header {
|
||||
z-index: 9;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
padding: @padding-page;
|
||||
box-sizing: border-box;
|
||||
height: 5rem;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -50,17 +50,17 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding: 6rem 1.5rem 6rem 1.5rem;
|
||||
padding: 60rem 15rem 60rem 15rem;
|
||||
|
||||
|
||||
.request {
|
||||
.list {
|
||||
|
||||
.item {
|
||||
padding: 1rem 0;
|
||||
padding: 10rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -69,18 +69,18 @@ export default {
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@width: 4.2rem;
|
||||
@width: 42rem;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.time{
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<div>
|
||||
<img src="../../assets/img/icon/menu-gray.png" style="width: 2rem;" @click="isShowOption = true">
|
||||
<img src="../../assets/img/icon/menu-gray.png" style="width: 20rem;" @click="isShowOption = true">
|
||||
</div>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
<from-bottom-dialog
|
||||
page-id="RequestUpdate"
|
||||
height="16rem"
|
||||
height="160rem"
|
||||
:show-heng-gang="false"
|
||||
mode="white"
|
||||
v-model="isShowOption">
|
||||
@ -107,10 +107,10 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding: 6rem 1.5rem 6rem 1.5rem;
|
||||
padding: 60rem 15rem 60rem 15rem;
|
||||
|
||||
.none {
|
||||
display: flex;
|
||||
@ -118,8 +118,8 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-top: 10rem;
|
||||
height: 12rem;
|
||||
margin-top: 100rem;
|
||||
height: 120rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -128,7 +128,7 @@ export default {
|
||||
margin-top: @padding-page;
|
||||
|
||||
.item {
|
||||
padding: 1rem 0;
|
||||
padding: 10rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -137,18 +137,18 @@ export default {
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@width: 4.2rem;
|
||||
@width: 42rem;
|
||||
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
@ -156,19 +156,19 @@ export default {
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.6rem;
|
||||
margin-top: 10rem;
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10rem;
|
||||
font-size: 14rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.l-row {
|
||||
padding: 1.5rem;
|
||||
padding: 15rem;
|
||||
color: black;
|
||||
text-align: center;
|
||||
|
||||
@ -178,13 +178,13 @@ export default {
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 1rem;
|
||||
height: 10rem;
|
||||
background: whitesmoke;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: fixed;
|
||||
padding: 0 1.5rem 1.5rem 1.5rem;
|
||||
padding: 0 15rem 15rem 15rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -196,11 +196,11 @@ export default {
|
||||
flex: 1;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: 0.5rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 0.5rem;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
background: @main-bg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.preview-img {
|
||||
z-index: 3;
|
||||
@ -40,11 +40,11 @@
|
||||
|
||||
.download {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
padding: .3rem;
|
||||
bottom: 20rem;
|
||||
right: 20rem;
|
||||
padding: 3rem;
|
||||
background: @second-btn-color-tran;
|
||||
width: 2rem;
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,33 +60,33 @@
|
||||
|
||||
.scroll {
|
||||
.notice {
|
||||
font-size: 1.2rem;
|
||||
height: 4rem;
|
||||
font-size: 12rem;
|
||||
height: 40rem;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 1.2rem;
|
||||
margin-right: .5rem;
|
||||
height: 12rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collect {
|
||||
padding: .7rem;
|
||||
padding: 7rem;
|
||||
|
||||
.video {
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: .7rem;
|
||||
border-radius: 5rem;
|
||||
padding: 10rem;
|
||||
margin-bottom: 7rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
@ -94,8 +94,8 @@
|
||||
color: gainsboro;
|
||||
|
||||
img {
|
||||
height: 2rem;
|
||||
margin-right: .5rem;
|
||||
height: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,12 +112,12 @@
|
||||
|
||||
.item {
|
||||
height: calc(33.33vw * 1.3);
|
||||
padding: .2rem;
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
border-radius: .4rem;
|
||||
border-radius: 4rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
@ -126,16 +126,16 @@
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
left: .5rem;
|
||||
bottom: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.love {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: .5rem;
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -144,14 +144,14 @@
|
||||
|
||||
.audio {
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 5rem;
|
||||
padding: 10rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
@ -159,8 +159,8 @@
|
||||
color: gainsboro;
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
margin-right: .5rem;
|
||||
height: 15rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -176,19 +176,19 @@
|
||||
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||
|
||||
.item {
|
||||
padding: .2rem;
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
border-radius: .4rem;
|
||||
border-radius: 4rem;
|
||||
width: 100%;
|
||||
height: calc((100vw - 3.4rem) / 3);
|
||||
height: calc((100vw - 34rem) / 3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: .5rem;
|
||||
margin-top: 5rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
@ -205,8 +205,8 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 4.6rem;
|
||||
padding: 0 1.5rem;
|
||||
height: 46rem;
|
||||
padding: 0 15rem;
|
||||
background: transparent;
|
||||
transition: all .2s;
|
||||
|
||||
@ -230,18 +230,18 @@
|
||||
transform: rotate(180deg);
|
||||
border-radius: 50%;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
padding: 6rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
color: white;
|
||||
position: absolute;
|
||||
font-size: 1.2rem;
|
||||
padding: .3rem 1.2rem;
|
||||
border-radius: .2rem;
|
||||
right: 6rem;
|
||||
font-size: 12rem;
|
||||
padding: 3rem 12rem;
|
||||
border-radius: 2rem;
|
||||
right: 60rem;
|
||||
background: @primary-btn-color;
|
||||
|
||||
&.followed {
|
||||
@ -257,27 +257,27 @@
|
||||
position: relative;
|
||||
|
||||
.request {
|
||||
font-size: 1.2rem;
|
||||
height: 2.6rem;
|
||||
font-size: 12rem;
|
||||
height: 26rem;
|
||||
display: flex;
|
||||
padding-right: 1.3rem;
|
||||
padding-left: .5rem;
|
||||
padding-right: 13rem;
|
||||
padding-left: 5rem;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
border-radius: 20rem;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
|
||||
img {
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
padding: 6rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-left: 1.5rem;
|
||||
margin-left: 15rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
padding: 6rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -285,7 +285,7 @@
|
||||
.desc {
|
||||
header {
|
||||
color: white;
|
||||
height: 12rem;
|
||||
height: 120rem;
|
||||
background-image: url('../../assets/img/header-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@ -294,12 +294,12 @@
|
||||
}
|
||||
|
||||
.detail {
|
||||
transform: translateY(-1rem);
|
||||
transform: translateY(-10rem);
|
||||
background: @main-bg;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-radius: 10rem 10rem 0 0;
|
||||
|
||||
.detail-wrapper {
|
||||
padding: 0 2rem 1.5rem 2rem;
|
||||
padding: 0 20rem 15rem 20rem;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
@ -307,34 +307,34 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
transform: translateY(-2rem);
|
||||
transform: translateY(-20rem);
|
||||
|
||||
.head-image {
|
||||
background: black;
|
||||
padding: 2px;
|
||||
border-radius: 50%;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
width: 80rem;
|
||||
height: 80rem;
|
||||
}
|
||||
|
||||
.heat {
|
||||
margin-top: 1rem;
|
||||
width: calc(100% - 12rem);
|
||||
margin-top: 10rem;
|
||||
width: calc(100% - 120rem);
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.num {
|
||||
margin-top: .5rem;
|
||||
margin-top: 5rem;
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
font-weight: bold;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -345,20 +345,20 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
transform: translateY(-2rem);
|
||||
transform: translateY(-20rem);
|
||||
|
||||
.number, .certification {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 10rem;
|
||||
padding-bottom: 10rem;
|
||||
border-bottom: 1px solid @line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 1.4rem;
|
||||
margin-left: .5rem;
|
||||
width: 14rem;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -366,14 +366,14 @@
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: .5rem;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.certification {
|
||||
img {
|
||||
width: 1.4rem;
|
||||
margin-right: .5rem;
|
||||
width: 14rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -382,11 +382,11 @@
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 5rem;
|
||||
|
||||
img {
|
||||
height: 1.2rem;
|
||||
margin-left: .6rem;
|
||||
height: 12rem;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
@ -399,35 +399,35 @@
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
padding: .2rem .5rem;
|
||||
border-radius: .2rem;
|
||||
padding: 2rem 5rem;
|
||||
border-radius: 2rem;
|
||||
background: @second-btn-color-tran;
|
||||
font-size: 1rem;
|
||||
font-size: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .5rem;
|
||||
margin-right: 5rem;
|
||||
|
||||
img {
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 20rem;
|
||||
|
||||
.item {
|
||||
margin-right: 2.5rem;
|
||||
margin-right: 25rem;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
margin-right: .8rem;
|
||||
border-radius: .4rem;
|
||||
margin-right: 8rem;
|
||||
border-radius: 4rem;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .8rem;
|
||||
height: 2.2rem;
|
||||
padding: 8rem;
|
||||
height: 22rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
@ -437,24 +437,24 @@
|
||||
|
||||
.top {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-buttons {
|
||||
margin-top: 2rem;
|
||||
margin-top: 20rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
@width: 3.6rem;
|
||||
@width: 36rem;
|
||||
|
||||
.follow-display {
|
||||
flex: 1;
|
||||
@ -471,19 +471,19 @@
|
||||
}
|
||||
|
||||
.no-follow {
|
||||
width: calc(100% - 0.5rem);
|
||||
width: calc(100% - 5rem);
|
||||
color: white;
|
||||
border-radius: .2rem;
|
||||
border-radius: 2rem;
|
||||
background: @primary-btn-color;
|
||||
height: @width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: .5rem;
|
||||
margin-right: 5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
margin-left: .2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -495,18 +495,18 @@
|
||||
|
||||
.l-button {
|
||||
color: white;
|
||||
border-radius: .2rem;
|
||||
border-radius: 2rem;
|
||||
background: @second-btn-color;
|
||||
height: @width;
|
||||
width: 50%;
|
||||
margin-right: .5rem;
|
||||
margin-right: 5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
margin-left: .2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -517,7 +517,7 @@
|
||||
}
|
||||
|
||||
img {
|
||||
@width: 1.4rem;
|
||||
@width: 14rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
@ -528,11 +528,11 @@
|
||||
position: relative;
|
||||
width: @width;
|
||||
height: @width;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: .2rem;
|
||||
border-radius: 2rem;
|
||||
background: @second-btn-color;
|
||||
color: white;
|
||||
|
||||
@ -544,7 +544,7 @@
|
||||
}
|
||||
|
||||
.loading {
|
||||
@width: 1.2rem;
|
||||
@width: 12rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
animation: rotate .6s linear infinite;
|
||||
@ -562,7 +562,7 @@
|
||||
.arrow {
|
||||
transition: transform .3s ease;
|
||||
transform: rotate(180deg);
|
||||
@width: 1.6rem;
|
||||
@width: 16rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
@ -573,7 +573,7 @@
|
||||
|
||||
.recommend {
|
||||
transition: all .3s ease;
|
||||
height: 22rem;
|
||||
height: 220rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.hidden {
|
||||
@ -581,8 +581,8 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 2rem 0 2rem;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 20rem 0 20rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -593,9 +593,9 @@
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: .3rem;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
margin-left: 3rem;
|
||||
width: 13rem;
|
||||
height: 13rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
@ -605,56 +605,56 @@
|
||||
}
|
||||
|
||||
.friends {
|
||||
padding-left: 2rem;
|
||||
margin-top: 1rem;
|
||||
padding-left: 20rem;
|
||||
margin-top: 10rem;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
|
||||
.friend {
|
||||
position: relative;
|
||||
background: @second-btn-color-tran;
|
||||
margin-right: 1rem;
|
||||
padding: 1rem;
|
||||
margin-right: 10rem;
|
||||
padding: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
@width: 10rem;
|
||||
@width: 100rem;
|
||||
border-radius: 50%;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 10rem;
|
||||
font-size: 12rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: .5rem;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 5rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 1rem;
|
||||
width: 15rem;
|
||||
height: 2.6rem;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 10rem;
|
||||
width: 150rem;
|
||||
height: 26rem;
|
||||
font-size: 12rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: .2rem;
|
||||
right: .2rem;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
.notice {
|
||||
width: 10rem;
|
||||
width: 100rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -324,7 +324,7 @@ export default {
|
||||
return this.$store.state.bodyWidth
|
||||
},
|
||||
videoSlideRowListStyle() {
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 9.6rem)'}
|
||||
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 96rem)'}
|
||||
},
|
||||
SlideItemStyle() {
|
||||
if (this.tempScroll || this.isScroll) return {overflow: 'auto'}
|
||||
|
||||
@ -389,16 +389,16 @@ export default {
|
||||
.search-wrapper {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1.5rem;
|
||||
right: 1.5rem;
|
||||
top: 10rem;
|
||||
left: 15rem;
|
||||
right: 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.back {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 1rem;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.search-ctn {
|
||||
@ -444,7 +444,7 @@ export default {
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
img {
|
||||
margin-right: 10px;
|
||||
@ -465,12 +465,12 @@ export default {
|
||||
.share-dialog {
|
||||
.collection {
|
||||
background: white;
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 10rem 10rem 10rem;
|
||||
width: calc(100% - 20rem);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
@ -485,8 +485,8 @@ export default {
|
||||
}
|
||||
|
||||
.friends {
|
||||
margin: 1rem 1rem 0 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 10rem 10rem 0 10rem;
|
||||
width: calc(100% - 20rem);
|
||||
background: white;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
@ -507,14 +507,14 @@ export default {
|
||||
|
||||
.right {
|
||||
margin: 0 5px 0 15px;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.share-btn {
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding: 5px 20px;
|
||||
background: @primary-btn-color;
|
||||
@ -528,14 +528,14 @@ export default {
|
||||
|
||||
.permission-dialog {
|
||||
.space {
|
||||
height: 1rem;
|
||||
height: 10rem;
|
||||
background: whitesmoke;
|
||||
}
|
||||
|
||||
.setting {
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 2rem;
|
||||
padding: 10rem 20rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -544,24 +544,24 @@ export default {
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin: 0 .5rem 0 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
margin: 0 5rem 0 15rem;
|
||||
font-size: 14rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.share-btn {
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding: .5rem 2rem;
|
||||
padding: 5rem 20rem;
|
||||
background: @primary-btn-color;
|
||||
border-radius: .2rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,14 +143,14 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
.list {
|
||||
.item {
|
||||
padding: 2rem 1.5rem;
|
||||
padding: 20rem 15rem;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -160,21 +160,21 @@ export default {
|
||||
display: flex;
|
||||
|
||||
.cover-wrapper {
|
||||
margin-right: 1rem;
|
||||
margin-right: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.play {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cover {
|
||||
border-radius: .2rem;
|
||||
@width: 6rem;
|
||||
border-radius: 2rem;
|
||||
@width: 60rem;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
height: @width;
|
||||
@ -194,7 +194,7 @@ export default {
|
||||
}
|
||||
|
||||
.author, .desc-bottom {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
@ -202,7 +202,7 @@ export default {
|
||||
display: flex;
|
||||
|
||||
.duration {
|
||||
margin-right: 1.4rem;
|
||||
margin-right: 14rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@ -211,9 +211,9 @@ export default {
|
||||
|
||||
.option {
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left: 2rem;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-left: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -242,7 +242,7 @@ export default {
|
||||
.music-wrapper {
|
||||
width: 100vw;
|
||||
border-top: 1px solid #414141;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 10rem 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -251,22 +251,22 @@ export default {
|
||||
display: flex;
|
||||
|
||||
.cover-wrapper {
|
||||
margin-right: 1rem;
|
||||
margin-right: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.play {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cover {
|
||||
border-radius: .2rem;
|
||||
border-radius: 2rem;
|
||||
object-fit: cover;
|
||||
@width: 5rem;
|
||||
@width: 50rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
}
|
||||
@ -285,7 +285,7 @@ export default {
|
||||
}
|
||||
|
||||
.author, .desc-bottom {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
@ -293,7 +293,7 @@ export default {
|
||||
display: flex;
|
||||
|
||||
.duration {
|
||||
margin-right: 1.4rem;
|
||||
margin-right: 14rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: @header-height;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<from-bottom-dialog
|
||||
mask-mode="lightgray"
|
||||
page-id="CollectMusic"
|
||||
border-radius="1.5rem 1.5rem 0 0"
|
||||
border-radius="15rem 15rem 0 0"
|
||||
:show-heng-gang="false"
|
||||
height="70vh"
|
||||
v-model="isShowList">
|
||||
@ -169,7 +169,7 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
@ -186,34 +186,34 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
height: 50rem;
|
||||
padding: 0 @padding-page;
|
||||
border-radius: 1.5rem 1.5rem 0 0;
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 9;
|
||||
|
||||
.left {
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
margin-right: .5rem;
|
||||
width: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 5rem;
|
||||
padding-top: 50rem;
|
||||
}
|
||||
|
||||
.l-row {
|
||||
background: @bg-color;
|
||||
height: 5rem;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -228,38 +228,38 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.author {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
margin-left: 2rem;
|
||||
margin-left: 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: .6rem;
|
||||
width: 6rem;
|
||||
height: .5px;
|
||||
background: @second-text-color;
|
||||
position: absolute;
|
||||
left: -1.2rem;
|
||||
left: -12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
width: 15rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 1.5rem;
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: @bg-color;
|
||||
border-top: 1px solid #2a2828;
|
||||
height: 6rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<from-bottom-dialog
|
||||
mask-mode="lightgray"
|
||||
page-id="GuessMusic"
|
||||
border-radius="1.5rem 1.5rem 0 0"
|
||||
border-radius="15rem 15rem 0 0"
|
||||
:show-heng-gang="false"
|
||||
height="70vh"
|
||||
v-model="isShowList">
|
||||
@ -151,7 +151,7 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.music-list-dialog {
|
||||
@ -168,34 +168,34 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
height: 50rem;
|
||||
padding: 0 @padding-page;
|
||||
border-radius: 1.5rem 1.5rem 0 0;
|
||||
border-radius: 15rem 15rem 0 0;
|
||||
z-index: 9;
|
||||
|
||||
.left {
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
margin-right: .5rem;
|
||||
width: 20rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 5rem;
|
||||
padding-top: 50rem;
|
||||
}
|
||||
|
||||
.l-row {
|
||||
background: @bg-color;
|
||||
height: 5rem;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -210,38 +210,38 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.author {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
margin-left: 2rem;
|
||||
margin-left: 20rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: .6rem;
|
||||
width: 6rem;
|
||||
height: .5px;
|
||||
background: @second-text-color;
|
||||
position: absolute;
|
||||
left: -1.2rem;
|
||||
left: -12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
width: 15rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 1.5rem;
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: @bg-color;
|
||||
border-top: 1px solid #2a2828;
|
||||
height: 6rem;
|
||||
height: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -286,7 +286,7 @@ export default {
|
||||
|
||||
.SlideItemMusic {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
min-width: 100vw;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
@ -297,34 +297,34 @@ export default {
|
||||
|
||||
|
||||
.cover {
|
||||
margin-top: 8rem;
|
||||
margin-top: 80rem;
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
|
||||
img {
|
||||
border-radius: 2.5rem;
|
||||
border-radius: 25rem;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 1.5rem .5rem #514f4f;
|
||||
box-shadow: 0 0 15rem 5rem #514f4f;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lyrics-wrapper {
|
||||
margin-top: 3rem;
|
||||
margin-top: 30rem;
|
||||
overflow: auto;
|
||||
height: 8rem;
|
||||
height: 80rem;
|
||||
|
||||
.container {
|
||||
min-height: 8rem;
|
||||
min-height: 80rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
height: 4rem;
|
||||
height: 40rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -332,14 +332,14 @@ export default {
|
||||
}
|
||||
|
||||
.lyrics-mask {
|
||||
top: calc(80vw + 7rem);
|
||||
height: 8rem;
|
||||
top: calc(80vw + 70rem);
|
||||
height: 80rem;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lyrics-full {
|
||||
margin-top: 8rem;
|
||||
margin-top: 80rem;
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
@ -351,7 +351,7 @@ export default {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 4rem;
|
||||
height: 40rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -371,17 +371,17 @@ export default {
|
||||
align-items: flex-end;
|
||||
|
||||
img {
|
||||
width: 3.5rem;
|
||||
width: 35rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
.name {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: .4rem;
|
||||
font-size: 18rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -390,15 +390,15 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 20rem;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 100vw;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
padding: 0 @padding-page;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
@ -407,15 +407,15 @@ export default {
|
||||
color: gainsboro;
|
||||
|
||||
.bar {
|
||||
margin: 0 .6rem;
|
||||
margin: 0 6rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.slide-bar {
|
||||
position: absolute;
|
||||
height: 2rem;
|
||||
height: 20rem;
|
||||
width: 100%;
|
||||
top: -1rem;
|
||||
top: -10rem;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
@ -444,8 +444,8 @@ export default {
|
||||
position: absolute;
|
||||
left: 50vw;
|
||||
top: -3px;
|
||||
height: .8rem;
|
||||
width: .8rem;
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
@ -461,8 +461,8 @@ export default {
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 3.8rem;
|
||||
height: 3.8rem;
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
@ -470,12 +470,12 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin: 0 1rem;
|
||||
margin: 0 10rem;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
width: 55rem;
|
||||
height: 55rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,10 +141,10 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
.SlideRowList, .Scroll {
|
||||
height: calc(100vh - @indicator-height - @header-height) !important;
|
||||
@ -158,12 +158,12 @@ export default {
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
height: 12rem;
|
||||
height: 120rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 13rem;
|
||||
margin-top: 10rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: @header-height;
|
||||
@ -104,29 +104,29 @@ export default {
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: 15rem;
|
||||
left: 10rem;
|
||||
right: 10rem;
|
||||
|
||||
.notice {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 13rem;
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.type1 {
|
||||
.notice {
|
||||
margin: 6rem 0;
|
||||
margin: 60rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
width: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
width: 15rem;
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
|
||||
}
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
|
||||
.type2 {
|
||||
.desc {
|
||||
margin-top: 4rem;
|
||||
margin-top: 40rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,10 +54,10 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
color: white;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -208,27 +208,27 @@ export default {
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
.title {
|
||||
color: @second-text-color;
|
||||
font-size: 1.3rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
font-size: 13rem;
|
||||
margin: 20rem 0 0 20rem;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: @second-text-color;
|
||||
font-size: 1.3rem;
|
||||
margin: 4rem;
|
||||
font-size: 13rem;
|
||||
margin: 40rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: calc(100% - 3rem);
|
||||
margin-left: 1.5rem;
|
||||
width: calc(100% - 30rem);
|
||||
margin-left: 15rem;
|
||||
background: @line-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -173,7 +173,7 @@ export default {
|
||||
color: white;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,29 +79,29 @@ export default {
|
||||
overflow: auto;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
.nearby {
|
||||
|
||||
.title {
|
||||
padding: 1rem 2rem;
|
||||
padding: 10rem 20rem;
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
height: 50rem;
|
||||
font-size: 14rem;
|
||||
transition: all .1s;
|
||||
background: @main-bg;
|
||||
|
||||
@ -112,7 +112,7 @@ export default {
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: 1rem;
|
||||
margin-left: 10rem;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,12 +65,12 @@ export default {
|
||||
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
.item {
|
||||
padding: 0 2rem;
|
||||
font-size: 1.4rem;
|
||||
height: 5rem;
|
||||
padding: 0 20rem;
|
||||
font-size: 14rem;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@ -1218,20 +1218,20 @@ export default {
|
||||
overflow: auto;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
.nearby {
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 12rem;
|
||||
padding: 10rem 15rem;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,17 +48,17 @@ export default {
|
||||
overflow: auto;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
|
||||
.nearby {
|
||||
|
||||
.title {
|
||||
padding: 1rem 2rem;
|
||||
padding: 10rem 20rem;
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div v-else class="item">无法获取</div>
|
||||
</div>
|
||||
<div class="line" style="width: calc(100% - 4rem);margin-left: 2rem;"></div>
|
||||
<div class="line" style="width: calc(100% - 40rem);margin-left: 20rem;"></div>
|
||||
<div class="schools" v-if="!isSearch">
|
||||
<div class="item" v-for="item in schools"
|
||||
@click="setSchool(item)"
|
||||
@ -110,26 +110,26 @@ export default {
|
||||
|
||||
|
||||
.content {
|
||||
padding-top: 12rem;
|
||||
padding-top: 120rem;
|
||||
|
||||
.nearby {
|
||||
|
||||
.title {
|
||||
padding: 1rem 2rem;
|
||||
padding: 10rem 20rem;
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 2rem;
|
||||
font-size: 1.4rem;
|
||||
height: 5rem;
|
||||
padding: 0 20rem;
|
||||
font-size: 14rem;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -146,27 +146,27 @@ export default {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
margin-top: 6rem;
|
||||
font-size: 1.8rem;
|
||||
margin-top: 60rem;
|
||||
font-size: 18rem;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: @second-text-color;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 20rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 6rem;
|
||||
height: 10rem;
|
||||
margin-top: 60rem;
|
||||
height: 100rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 15rem;
|
||||
margin-top: 150rem;
|
||||
display: inline-block;
|
||||
background: @second-btn-color;
|
||||
padding: 1.5rem 4rem;
|
||||
padding: 15rem 40rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
|
||||
|
||||
.content {
|
||||
padding: 7rem 2rem 0 2rem;
|
||||
padding: 70rem 20rem 0 20rem;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
@ -77,13 +77,13 @@ export default {
|
||||
|
||||
.label {
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 3rem;
|
||||
font-size: 16rem;
|
||||
margin-right: 30rem;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 4rem;
|
||||
height: 40rem;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
border-top: none;
|
||||
@ -101,19 +101,19 @@ export default {
|
||||
|
||||
.label {
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 3rem;
|
||||
font-size: 16rem;
|
||||
margin-right: 30rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 1.2rem 0;
|
||||
padding: 12rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: 5px;
|
||||
width: 1.2rem;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,20 +121,20 @@ export default {
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin-top: 2rem;
|
||||
margin-top: 20rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
right: 2rem;
|
||||
bottom: 20rem;
|
||||
left: 20rem;
|
||||
right: 20rem;
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
background: @primary-btn-color;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
padding: 10rem 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
color: white;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -169,7 +169,7 @@ export default {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -201,16 +201,16 @@ export default {
|
||||
|
||||
.download {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
padding: .3rem;
|
||||
bottom: 20rem;
|
||||
right: 20rem;
|
||||
padding: 3rem;
|
||||
background: @second-btn-color-tran;
|
||||
width: 2rem;
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
padding-top: 6rem;
|
||||
padding-top: 60rem;
|
||||
color: white;
|
||||
|
||||
.change-avatar {
|
||||
@ -218,15 +218,15 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 3rem 0;
|
||||
@avatar-width: 8rem;
|
||||
margin: 30rem 0;
|
||||
@avatar-width: 80rem;
|
||||
|
||||
.avatar-ctn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 10rem;
|
||||
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
@ -240,7 +240,7 @@ export default {
|
||||
}
|
||||
|
||||
.change {
|
||||
width: 2.8rem;
|
||||
width: 28rem;
|
||||
z-index: 9;
|
||||
position: relative;
|
||||
}
|
||||
@ -265,13 +265,13 @@ export default {
|
||||
.content {
|
||||
background: white;
|
||||
width: 80%;
|
||||
padding: .5rem 0;
|
||||
padding: 5rem 0;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
font-size: 1.5rem;
|
||||
padding: 1.5rem 2rem;
|
||||
font-size: 15rem;
|
||||
padding: 15rem 20rem;
|
||||
transition: all .2s;
|
||||
|
||||
&:active {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div class="l-row" v-if="type === 2">
|
||||
<div class="notice">我的抖音号</div>
|
||||
<div class="input-ctn" style="margin-bottom: 1rem;">
|
||||
<div class="input-ctn" style="margin-bottom: 10rem;">
|
||||
<input type="text" v-model="localUserinfo.unique_id">
|
||||
<img
|
||||
v-if="localUserinfo.unique_id" style="transform: scale(2)"
|
||||
@ -122,11 +122,11 @@ export default {
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2rem;
|
||||
padding-top: 7rem;
|
||||
padding: 20rem;
|
||||
padding-top: 70rem;
|
||||
|
||||
.notice, .num {
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
@ -137,9 +137,9 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
margin: .5rem 0;
|
||||
margin: 5rem 0;
|
||||
color: white;
|
||||
height: 3rem;
|
||||
height: 30rem;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -153,17 +153,17 @@ export default {
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1.5rem;
|
||||
width: 1rem;
|
||||
top: 15rem;
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-ctn {
|
||||
width: 100%;
|
||||
background: @active-main-bg;
|
||||
padding: 1.5rem;
|
||||
padding: 15rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
margin-top: 10rem;
|
||||
border-radius: 2px;
|
||||
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ export default {
|
||||
color: #b8b9c1;
|
||||
|
||||
header {
|
||||
font-size: 1.5rem;
|
||||
font-size: 15rem;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -131,6 +131,11 @@ export default {
|
||||
})
|
||||
bus.on(this.name + '-end', this.end)
|
||||
},
|
||||
unmounted() {
|
||||
bus.off(this.name + '-moveX', this.move)
|
||||
bus.off(this.name + '-moveY',)
|
||||
bus.off(this.name + '-end', this.end)
|
||||
},
|
||||
methods: {
|
||||
toggleType(type) {
|
||||
if (type !== this.type) {
|
||||
@ -158,14 +163,14 @@ export default {
|
||||
this.lefts.push(
|
||||
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (tabWidth * 0.5 - indicatorWidth / 2))
|
||||
}
|
||||
this.indicatorSpace = this.lefts[1] - this.lefts[this.index]
|
||||
this.indicatorSpace = this.lefts[1] - this.lefts[0]
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
|
||||
},
|
||||
move(e) {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(this.indicatorRef, 'left',
|
||||
this.lefts[this.index] +
|
||||
this.lefts[this.index] -
|
||||
e / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
|
||||
},
|
||||
end(index) {
|
||||
|
||||
@ -6,6 +6,7 @@ import {SlideType} from "../../utils/const_var";
|
||||
import SlideItem from './SlideItem'
|
||||
import bus from "../../utils/bus";
|
||||
import {useStore} from 'vuex'
|
||||
import Utils from "../../utils";
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
@ -41,10 +42,10 @@ const props = defineProps({
|
||||
default: () => ''
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
const emit = defineEmits(['update:index', 'loadMore'])
|
||||
|
||||
const appInsMap = new Map()
|
||||
const slideItemClassName = 'slide-item2'
|
||||
const itemClassName = 'slide-item2'
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: props.name,
|
||||
@ -60,14 +61,33 @@ const homeRefresh = computed(() => store.state.homeRefresh)
|
||||
const judgeValue = computed(() => store.state.judgeValue)
|
||||
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
state.localIndex = newVal
|
||||
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`)
|
||||
() => props.list,
|
||||
(newVal, oldVal) => {
|
||||
// console.log('watch', newVal.length, oldVal.length, props.list)
|
||||
//新数据比老数据小或等于，是刷新
|
||||
if (newVal.length <= oldVal.length) {
|
||||
insertContent()
|
||||
} else {
|
||||
if (oldVal.length === 0) {
|
||||
insertContent()
|
||||
} else {
|
||||
let end = oldVal.length + 3
|
||||
if (end >= newVal) end = newVal
|
||||
let top = $(wrapperEl.value).find(`.${itemClassName}:last`).css('top')
|
||||
|
||||
newVal.slice(oldVal.length, end).map((item, index) => {
|
||||
let el = getInsEl(item, oldVal.length + index)
|
||||
//这里必须要设置个top值，不然会把前面的条目给覆盖掉
|
||||
//2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
|
||||
//因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还
|
||||
// 计算top值的，会和前面的对不上
|
||||
$(el).css('top', top)
|
||||
wrapperEl.value.appendChild(el)
|
||||
state.wrapper.childrenLength++
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
@ -77,15 +97,16 @@ onMounted(() => {
|
||||
|
||||
//默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新
|
||||
function insertContent(list = props.list) {
|
||||
$(wrapperEl.value).empty()
|
||||
let half = (props.virtualTotal - 1) / 2
|
||||
let start = 0
|
||||
|
||||
if (state.localIndex >= (props.virtualTotal - 1) / 2) {
|
||||
start = state.localIndex - (props.virtualTotal - 1) / 2
|
||||
if (state.localIndex >= half) {
|
||||
start = state.localIndex - half
|
||||
}
|
||||
let end = start + 5
|
||||
let end = start + props.virtualTotal
|
||||
if (end >= list.length) {
|
||||
end = list.length
|
||||
start = end - 5
|
||||
start = end - props.virtualTotal
|
||||
}
|
||||
if (start < 0) start = 0
|
||||
list.slice(start, end).map(
|
||||
@ -95,11 +116,10 @@ function insertContent(list = props.list) {
|
||||
wrapperEl.value.appendChild(el)
|
||||
}
|
||||
)
|
||||
GM.$setCss(wrapperEl.value, 'transform', `translate3d(0px,
|
||||
${-state.localIndex * state.wrapper.height}px, 0px)`)
|
||||
GM.$setCss(wrapperEl.value, 'transform', `translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`)
|
||||
|
||||
if (state.localIndex > 2 && list.length > 5) {
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
$(wrapperEl.value).find(`.${itemClassName}`).each(function () {
|
||||
if ((list.length - state.localIndex) > 2) {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
} else {
|
||||
@ -111,7 +131,8 @@ function insertContent(list = props.list) {
|
||||
}
|
||||
|
||||
function getInsEl(item, index, play = false) {
|
||||
// console.log('index',index,play)
|
||||
debugger
|
||||
console.log('index',index,play)
|
||||
let slideVNode = props.render(item, index, play, props.position)
|
||||
const app = createApp({
|
||||
render() {
|
||||
@ -125,7 +146,6 @@ function getInsEl(item, index, play = false) {
|
||||
return ins.$el
|
||||
}
|
||||
|
||||
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
@ -137,13 +157,16 @@ function touchMove(e) {
|
||||
function touchEnd(e) {
|
||||
let isNext = state.move.y < 0
|
||||
if (state.localIndex === 0 && !isNext && state.move.y > (homeRefresh.value + judgeValue.value)) {
|
||||
console.log('loading')
|
||||
// bus.emit(props.prefix + '-loading')
|
||||
emit('refresh')
|
||||
}
|
||||
slideTouchEnd(e, state, canNext, (isNext) => {
|
||||
if (isNext) {
|
||||
let half = (props.virtualTotal + 1) / 2
|
||||
if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex >= half) {
|
||||
emit('loadMore')
|
||||
}
|
||||
let addItemIndex = state.localIndex + 2
|
||||
let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`)
|
||||
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
|
||||
if (state.wrapper.childrenLength < props.virtualTotal) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
@ -155,15 +178,15 @@ function touchEnd(e) {
|
||||
) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:first`).data('index')).unmount()
|
||||
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index')).unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:first").remove()
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
$(wrapperEl.value).find(`.${itemClassName}`).each(function () {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
}
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
$(wrapperEl.value).find(`.${itemClassName}`).each(function () {
|
||||
let index = $(this).data('index')
|
||||
if (index < (state.localIndex - 2)) {
|
||||
appInsMap.get(index).unmount()
|
||||
@ -173,21 +196,21 @@ function touchEnd(e) {
|
||||
}
|
||||
} else {
|
||||
let addItemIndex = state.localIndex - 2
|
||||
let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`)
|
||||
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
|
||||
|
||||
if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:last`).data('index')).unmount()
|
||||
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:last").remove()
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
$(wrapperEl.value).find(`.${itemClassName}`).each(function () {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:last`).data('index')).unmount()
|
||||
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
|
||||
}
|
||||
}
|
||||
|
||||
@ -198,7 +221,7 @@ function touchEnd(e) {
|
||||
|
||||
|
||||
function canNext(isNext) {
|
||||
return !((state.localIndex === 0 && !isNext) || (state.localIndex === state.wrapper.childrenLength - 1 && isNext));
|
||||
return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.list.length - 1 && isNext));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,116 +1,121 @@
|
||||
<template>
|
||||
<div class="test-slide-wrapper" id="slideHook"
|
||||
@click="pageClick"
|
||||
v-love="'slideHook'">
|
||||
<H v-model:index="state.baseIndex">
|
||||
<SlideItem>
|
||||
<IndicatorHome
|
||||
v-if="!state.fullScreen"
|
||||
v-hide="state.isUp"
|
||||
:loading="state.loading"
|
||||
name="main"
|
||||
v-model:index="state.navIndex"
|
||||
/>
|
||||
<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 class="test-slide-wrapper">
|
||||
<IndicatorHome
|
||||
v-if="!state.fullScreen"
|
||||
v-hide="state.isUp"
|
||||
:loading="state.loading"
|
||||
name="main"
|
||||
v-model:index="state.navIndex"
|
||||
/>
|
||||
<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 class="sub-type-notice"
|
||||
v-if="state.subType===-1"
|
||||
@click="showSubType">附近吃喝玩乐
|
||||
</div>
|
||||
<H class="h"
|
||||
name="main"
|
||||
v-model:index="state.navIndex">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">热点</div>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">社区</div>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">关注</div>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">商城</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<VInfinite
|
||||
name="main"
|
||||
v-model:index="state.itemIndex"
|
||||
:render="render"
|
||||
:list="state.recommendVideos"
|
||||
:position="{
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-type-notice"
|
||||
v-if="state.subType===-1"
|
||||
@click="showSubType">附近吃喝玩乐
|
||||
</div>
|
||||
<div class="slide-content" id="slideHook"
|
||||
@touchstart="pageClick"
|
||||
v-love="'slideHook'">
|
||||
<H v-model:index="state.baseIndex">
|
||||
<SlideItem>
|
||||
<H class="h"
|
||||
name="main"
|
||||
v-model:index="state.navIndex">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">热点</div>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">社区</div>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">关注</div>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">商城</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<VInfinite
|
||||
name="main"
|
||||
v-model:index="state.itemIndex"
|
||||
:render="render"
|
||||
:list="state.recommendVideos"
|
||||
:position="{
|
||||
baseIndex:0,
|
||||
navIndex:5,
|
||||
}"
|
||||
>
|
||||
</VInfinite>
|
||||
</SlideItem>
|
||||
</H>
|
||||
<div>
|
||||
<span>{{ state.baseIndex }}</span>
|
||||
<button @click="state.baseIndex++">加</button>
|
||||
<button @click="state.baseIndex--">减</button>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ state.navIndex }}</span>
|
||||
<button @click="state.navIndex++">加</button>
|
||||
<button @click="state.navIndex--">减</button>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big" v-for="i in 100">主页</div>
|
||||
</SlideItem>
|
||||
</H>
|
||||
@loadMore="loadMore"
|
||||
@refresh="refresh"
|
||||
>
|
||||
</VInfinite>
|
||||
</SlideItem>
|
||||
</H>
|
||||
<div>
|
||||
<span>{{ state.baseIndex }}</span>
|
||||
<button @click="state.baseIndex++">加</button>
|
||||
<button @click="state.baseIndex--">减</button>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ state.navIndex }}</span>
|
||||
<button @click="state.navIndex++">加</button>
|
||||
<button @click="state.navIndex--">减</button>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
</SlideItem>
|
||||
<SlideItem class=" gray">
|
||||
<div class="big" v-for="i in 100">主页</div>
|
||||
</SlideItem>
|
||||
</H>
|
||||
</div>
|
||||
<Comment page-id="slideHook" v-model="state.commentVisible"
|
||||
@close="closeComments"
|
||||
/>
|
||||
</div>
|
||||
<Comment page-id="slideHook" v-model="state.commentVisible"
|
||||
@close="closeComments"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import H from './H'
|
||||
import VInfinite from './VInfinite.vue'
|
||||
import SlideItem from './SlideItem'
|
||||
import SlideImgs from "../../components/slide/SlideAlbum";
|
||||
import SlideAlbum from "../../components/slide/SlideAlbum";
|
||||
import SlideUser from "../../components/slide/SlideUser";
|
||||
import BVideo from "../../components/slide/BVideo";
|
||||
import Comment from "../../components/Comment";
|
||||
import IndicatorHome from "../slide/IndicatorHome";
|
||||
@ -120,10 +125,11 @@ import {onMounted, onUnmounted, provide, reactive, ref} from "vue";
|
||||
import bus, {EVENT_KEY} from "../../utils/bus";
|
||||
import {useNav} from "../../utils/hooks/useNav";
|
||||
import Utils from "@/utils";
|
||||
import {shuffle} from "lodash";
|
||||
|
||||
const nav = useNav()
|
||||
|
||||
const videos = resource.videos.slice(0, 16).map(v => {
|
||||
const videos = resource.videos.slice().map(v => {
|
||||
v.type = 'recommend-video'
|
||||
return v
|
||||
})
|
||||
@ -132,7 +138,6 @@ function stop(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
|
||||
const subTypeRef = ref(null)
|
||||
const state = reactive({
|
||||
baseIndex: 0,
|
||||
@ -143,11 +148,15 @@ const state = reactive({
|
||||
// type: 'img',
|
||||
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
// },
|
||||
// {
|
||||
// type: 'imgs',
|
||||
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
// },
|
||||
...videos
|
||||
{
|
||||
type: '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}`
|
||||
},
|
||||
// ...videos
|
||||
],
|
||||
|
||||
isSharing: false,
|
||||
@ -175,6 +184,32 @@ const state = reactive({
|
||||
subTypeIsTop: false,
|
||||
})
|
||||
|
||||
function loadMore() {
|
||||
if (state.loading) return
|
||||
state.loading = true
|
||||
console.log('loadMore')
|
||||
setTimeout(() => {
|
||||
state.recommendVideos = state.recommendVideos.concat(shuffle(resource.videos).slice(0, 10).map(v => {
|
||||
v.type = 'recommend-video'
|
||||
return v
|
||||
}))
|
||||
state.loading = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
if (state.loading) return
|
||||
state.loading = true
|
||||
console.log('refresh')
|
||||
setTimeout(() => {
|
||||
state.recommendVideos = shuffle(resource.videos).slice(0, 5).map(v => {
|
||||
v.type = 'recommend-video'
|
||||
return v
|
||||
})
|
||||
state.loading = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function showSubType(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
console.log('subTypeRef',)
|
||||
@ -189,6 +224,7 @@ function showSubType(e) {
|
||||
}
|
||||
|
||||
function pageClick(e) {
|
||||
// console.log('pageClick')
|
||||
if (state.subType !== -1) {
|
||||
state.subType = -1
|
||||
state.subTypeIsTop = false
|
||||
@ -233,12 +269,16 @@ function closeComments() {
|
||||
}
|
||||
|
||||
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 = <SlideImgs/>
|
||||
node = <SlideAlbum/>
|
||||
}
|
||||
if (item.type === 'user') {
|
||||
node = <SlideUser/>
|
||||
}
|
||||
if (item.type === 'recommend-video') {
|
||||
node = <BVideo
|
||||
@ -252,26 +292,7 @@ function render(item, itemIndex, play, position) {
|
||||
return node
|
||||
}
|
||||
|
||||
// function render1(item, itemIndex, play) {
|
||||
// let node
|
||||
// if (item.type === 'recommend-video') {
|
||||
// node = <SlideVideo
|
||||
// isPlay={play}
|
||||
// video={item}
|
||||
// index={itemIndex}
|
||||
// onShowComments={e => this.isCommenting = true}
|
||||
// onShowShare={e => this.isSharing = true}
|
||||
// onGoUserInfo={e => this.baseActiveIndex = 1}
|
||||
// onGoMusic={e => this.$nav('/home/music')}
|
||||
// v-model={[this.videos[itemIndex], 'video']}
|
||||
// />
|
||||
// }
|
||||
// if (item.type === 'img') {
|
||||
// node = <img src={item.src} style="height:100%;"/>
|
||||
// }
|
||||
// if (item.type === 'imgs') {
|
||||
// node = <SlideImgs/>
|
||||
// }
|
||||
|
||||
// if (item.type === 'send-video') {
|
||||
// node = <video src={item.src} style="height:100%;"/>
|
||||
// }
|
||||
@ -358,6 +379,12 @@ function render(item, itemIndex, play, position) {
|
||||
font-weight: bold;
|
||||
font-size: 100rem;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.h {
|
||||
|
||||
@ -8,10 +8,13 @@ export default {
|
||||
cbs = [cb]
|
||||
}
|
||||
if (cbs.length > 10) {
|
||||
console.error('eventMap', this.eventMap)
|
||||
// console.error('eventMap', this.eventMap)
|
||||
}
|
||||
this.eventMap.set(eventType, cbs)
|
||||
},
|
||||
once(eventType, cb) {
|
||||
this.eventMap.set(eventType, [cb])
|
||||
},
|
||||
off(eventType, fn) {
|
||||
let cbs = this.eventMap.has(eventType);
|
||||
if (cbs) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user