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

save

Browse Source
This commit is contained in:
zyronon 2024-03-05 03:03:43 +08:00
parent 71ff88a52e
commit 420e3f7ba8
14 changed files with 132 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
NOTE.md
View File

@ -8,3 +8,4 @@
# TODO # TODO
- 双指缩放 - 双指缩放
- AutoInput组件，在真机上无法输入

2
index.html
View File

@ -42,6 +42,8 @@
<script crossorigin="anonymous" <script crossorigin="anonymous"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script> src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

2
src/assets/less/custom.less
View File

@ -7,7 +7,7 @@
.global-notice { .global-notice {
position: fixed; position: fixed;
z-index: 999; z-index: 9999;
color: white; color: white;
background: black; background: black;
left: 50%; left: 50%;

2
src/components/AutoInput.vue
View File

@ -36,7 +36,7 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
.auto-input { .auto-input {
font-size: 12rem; font-size: 14rem;
width: 100%; width: 100%;
max-height: 70rem; max-height: 70rem;
overflow-y: scroll; overflow-y: scroll;

52
src/components/Comment.vue
View File

@ -32,13 +32,17 @@
<div class="time">{{ $time(item.time) }} · 上海</div> <div class="time">{{ $time(item.time) }} · 上海</div>
<div class="reply-text">回复</div> <div class="reply-text">回复</div>
</div> </div>
<div class="love" @click="loved(item)"> <div class="right d-flex" style="gap: 10rem">
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt="" <div class="love" :class="item.isLoved && 'loved'" @click="loved(item)">
class="love-image"> <Icon icon="icon-park-solid:like" v-show="item.isLoved" class="love-image"/>
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt="" <Icon icon="icon-park-outline:like" v-show="!item.isLoved" class="love-image"/>
class="love-image">
<span>{{ formatNumber(item.loveNum) }}</span> <span>{{ formatNumber(item.loveNum) }}</span>
</div> </div>
<div class="love" @click="$no(item)">
<Icon icon="icon-park-outline:dislike" class="love-image"/>
<span>{{ formatNumber(item.loveNum) }}</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -60,11 +64,9 @@
<div class="time">{{ $time(item.time) }} · 上海</div> <div class="time">{{ $time(item.time) }} · 上海</div>
<div class="reply-text">回复</div> <div class="reply-text">回复</div>
</div> </div>
<div class="love" @click="loved(item)"> <div class="love" :class="item.isLoved && 'loved'" @click="loved(item)">
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt="" <Icon icon="icon-park-solid:like" v-show="item.isLoved" class="love-image"/>
class="love-image"> <Icon icon="icon-park-outline:like" v-show="!item.isLoved" class="love-image"/>
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
class="love-image">
<span>{{ formatNumber(item.loveNum) }}</span> <span>{{ formatNumber(item.loveNum) }}</span>
</div> </div>
</div> </div>
@ -74,7 +76,7 @@
<div class="more"> <div class="more">
<div class="gang"></div> <div class="gang"></div>
<span>展开更多回复</span> <span>展开更多回复</span>
<div class="arrow"></div> <Icon icon="ep:arrow-down-bold"/>
</div> </div>
</div> </div>
</div> </div>
@ -100,10 +102,10 @@
<div class="toolbar"> <div class="toolbar">
<div class="input-wrapper"> <div class="input-wrapper">
<AutoInput v-model="comment"></AutoInput> <AutoInput v-model="comment" placeholder="善语结善缘，恶言伤人心"></AutoInput>
<div class="right"> <div class="right">
<img src="../assets/img/icon/message/call.png" @click="isCall = !isCall"> <img src="../assets/img/icon/message/call.png" @click="isCall = !isCall">
<img src="../assets/img/icon/message/emoji-black.png"> <img src="../assets/img/icon/message/emoji-black.png" @click="$no">
</div> </div>
</div> </div>
<img v-if="comment" src="../assets/img/icon/message/up.png" @click="send"> <img v-if="comment" src="../assets/img/icon/message/up.png" @click="send">
@ -127,6 +129,7 @@ import {mapState} from "vuex";
import FromBottomDialog from "./dialog/FromBottomDialog"; import FromBottomDialog from "./dialog/FromBottomDialog";
import Loading from "./Loading"; import Loading from "./Loading";
import Search from "./Search"; import Search from "./Search";
import {$no} from "@/utils";
export default { export default {
name: "Comment", name: "Comment",
@ -185,6 +188,7 @@ export default {
this.getData() this.getData()
}, },
methods: { methods: {
$no,
send() { send() {
this.comments.push({ this.comments.push({
id: '2', id: '2',
@ -411,7 +415,7 @@ export default {
} }
.more { .more {
font-size: 12rem; font-size: 13rem;
margin: 5rem; margin: 5rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -424,13 +428,8 @@ export default {
height: 1px; height: 1px;
} }
.arrow { span {
margin-left: 5rem; margin-right: 5rem;
margin-top: 8rem;
width: 0;
height: 0;
border: 5rem solid transparent;
border-top: 6rem solid @second-text-color;
} }
} }
} }
@ -469,7 +468,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 12rem; font-size: 13rem;
.left { .left {
display: flex; display: flex;
@ -489,13 +488,16 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
&.loved {
color: rgb(231, 58, 87);
}
.love-image { .love-image {
width: 18rem; font-size: 17rem;
border-radius: 50%; margin-right: 4rem;
} }
span { span {
font-size: 10rem;
word-break: keep-all; word-break: keep-all;
} }
} }

4
src/components/Footer.vue
View File

@ -151,8 +151,8 @@ export default {
} }
.badge { .badge {
right: 12rem; right: 10rem;
top: 9rem; top: 6rem;
position: absolute; position: absolute;
} }
} }

68
src/components/slide/SlideAlbum.vue
View File

@ -6,13 +6,14 @@
@touchstart.passive="touchStart" @touchstart.passive="touchStart"
@touchmove="touchMove" @touchmove="touchMove"
@touchend="touchEnd"> @touchend="touchEnd">
<div class="img-slide-item" v-for="img in item.imgs"> <div class="img-slide-item" v-for="(img,index) in item.imgs">
<img :ref="e=>setItemRef(e,'itemRefs')" <img :ref="e=>setItemRef(e,'itemRefs')"
:src="img"> :src="img+'&d='+index">
</div> </div>
</div> </div>
</div> </div>
<Icon icon="fluent:play-28-filled" class="pause-icon" v-if="state.status === SlideItemPlayStatus.Pause"/> <Icon icon="fluent:play-28-filled" class="pause-icon"
v-if="state.status === SlideItemPlayStatus.Pause && state.operationStatus === SlideAlbumOperationStatus.Normal"/>
<template v-if="state.operationStatus === SlideAlbumOperationStatus.Normal"> <template v-if="state.operationStatus === SlideAlbumOperationStatus.Normal">
<ItemToolbar <ItemToolbar
@ -43,7 +44,8 @@
<Teleport to="#home-index" v-if="state.isPreview"> <Teleport to="#home-index" v-if="state.isPreview">
<div class="preview"> <div class="preview">
<div class="preview-wrapper"> <div class="preview-wrapper">
<img :src="img" <img
:src="img+'&d='+index"
:class="{'preview-img':index === state.localIndex}" :class="{'preview-img':index === state.localIndex}"
v-for="(img,index) in props.item.imgs" v-for="(img,index) in props.item.imgs"
:ref="e=>setItemRef(e,'previewImgs')" :ref="e=>setItemRef(e,'previewImgs')"
@ -69,7 +71,7 @@
v-else v-else
class="pause" class="pause"
@click="stopPlay"/> @click="stopPlay"/>
<Icon icon="system-uicons:push-down" @click="Utils.$no"/> <Icon icon="system-uicons:push-down" @click="$notice('已保存到系统相册')"/>
</div> </div>
</div> </div>
</Teleport> </Teleport>
@ -78,7 +80,7 @@
<script setup lang="jsx"> <script setup lang="jsx">
import enums from "../../utils/enums"; import enums from "../../utils/enums";
import Utils from '../../utils' import Utils, {$no, $notice} from '../../utils'
import {mat4} from 'gl-matrix' import {mat4} from 'gl-matrix'
import {Icon} from "@iconify/vue"; import {Icon} from "@iconify/vue";
import {onMounted, onBeforeUpdate, reactive, ref, watch, computed, provide, nextTick, onUnmounted} from "vue"; import {onMounted, onBeforeUpdate, reactive, ref, watch, computed, provide, nextTick, onUnmounted} from "vue";
@ -281,12 +283,13 @@ function startLoop() {
if (state.cycleFn !== -1) return if (state.cycleFn !== -1) return
if (!state.isAutoPlay) return if (!state.isAutoPlay) return
state.cycleFn = setInterval(() => { state.cycleFn = setInterval(() => {
state.status = SlideItemPlayStatus.Play
if (state.localIndex < props.item.imgs.length - 1) { if (state.localIndex < props.item.imgs.length - 1) {
state.localIndex++ state.localIndex++
} else { } else {
state.localIndex = 0 state.localIndex = 0
} }
}, 1500) }, 2000)
} }
onMounted(async () => { onMounted(async () => {
@ -296,7 +299,6 @@ onMounted(async () => {
// setTimeout(() => { // setTimeout(() => {
// state.operationStatus = SlideAlbumOperationStatus.Zooming // state.operationStatus = SlideAlbumOperationStatus.Zooming
// }, 1000) // }, 1000)
bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, click) bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, click)
}) })
@ -319,13 +321,13 @@ function click({uniqueId, index, type}) {
stopPlay() stopPlay()
setTimeout(() => { setTimeout(() => {
state.localIndex = 0 state.localIndex = 0
state.status = SlideItemPlayStatus.Play
state.operationStatus = SlideAlbumOperationStatus.Normal
}, 500) }, 500)
} }
if (type === EVENT_KEY.ITEM_PLAY) { if (type === EVENT_KEY.ITEM_PLAY) {
state.localIndex = 0 state.localIndex = 0
state.isAutoPlay = true startPlay()
state.status = SlideItemPlayStatus.Play
startLoop()
} }
} }
} }
@ -395,22 +397,21 @@ function touchStart(e) {
if (e.touches.length === 1) { if (e.touches.length === 1) {
slideTouchStart(e, wrapperEl.value, state) slideTouchStart(e, wrapperEl.value, state)
} else { } else {
state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
if (state.operationStatus === SlideAlbumOperationStatus.Zooming) { if (state.operationStatus === SlideAlbumOperationStatus.Zooming) {
state.start.center = Utils.getCenter(state.start.point1, state.start.point2) // state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
return return
} }
state.operationStatus = SlideAlbumOperationStatus.Zooming state.operationStatus = SlideAlbumOperationStatus.Zooming
state.itemRefs[state.localIndex].style['transition-duration'] = '0ms'; state.itemRefs[state.localIndex].style['transition-duration'] = '0ms';
state.last.point1 = state.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}; state.last.point1 = state.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
// state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}; state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
state.start.center = Utils.getCenter(state.start.point1, state.start.point2) state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
} }
} }
function touchMove(e) { function touchMove(e) {
// Utils.$showNoticeDialog('move'+e.touches.length) // Utils.$showNoticeDialog('move'+e.touches.length)
console.log('move', e.touches.length,state.operationStatus ) // console.log('move', e.touches.length, state.operationStatus)
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY} let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
stopLoop() stopLoop()
@ -433,12 +434,22 @@ function touchMove(e) {
state.isAutoPlay = false state.isAutoPlay = false
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,
() => { () => {
// console.log('move-nextcb')
}, SlideType.HORIZONTAL, }, SlideType.HORIZONTAL,
() => { () => {
if (state.operationStatus === SlideAlbumOperationStatus.Detail) { if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
Utils.$stopPropagation(e) Utils.$stopPropagation(e)
} }
}) // console.log('move-notNextcb')
// state.operationStatus = SlideAlbumOperationStatus.Normal
},
() => {
if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
Utils.$stopPropagation(e)
}
}
)
} }
} else { } else {
// console.log('m3') // console.log('m3')
@ -503,8 +514,10 @@ function touchMove(e) {
} }
function touchEnd(e) { function touchEnd(e) {
console.log('Date.now() - lockDatetime', Date.now() - lockDatetime,) // console.log('Date.now() - lockDatetime', Date.now() - lockDatetime,)
if (Date.now() - lockDatetime < 300 && state.move.x === 0 && state.move.y === 0) { if (Date.now() - lockDatetime < 300
&& state.move.x === 0 && state.move.y === 0
&& state.operationStatus !== SlideAlbumOperationStatus.Zooming) {
if (state.status === SlideItemPlayStatus.Play) { if (state.status === SlideItemPlayStatus.Play) {
stopPlay() stopPlay()
} else { } else {
@ -516,7 +529,7 @@ function touchEnd(e) {
state.isPreview = false state.isPreview = false
//这里，如果是双指触控的话，会触发两次事件，第一次touches长度为1，第二次为0 //这里，如果是双指触控的话，会触发两次事件，第一次touches长度为1，第二次为0
//如果是单指触控的话，触发一次事件，touches长度为0 //如果是单指触控的话，触发一次事件，touches长度为0
console.log('end', e.touches.length) console.log('end', e.touches.length, state.operationStatus)
// e.touches.length === 1 说明，松开了第一只手指 // e.touches.length === 1 说明，松开了第一只手指
if (e.touches.length === 1) { if (e.touches.length === 1) {
@ -540,6 +553,9 @@ function touchEnd(e) {
console.log('nextCb') console.log('nextCb')
}, },
() => { () => {
if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
state.operationStatus = SlideAlbumOperationStatus.Normal
}
console.log('doNotNextCb') console.log('doNotNextCb')
startLoop() startLoop()
} }
@ -559,9 +575,6 @@ function setItemRef(el, key) {
function canNext(isNext, e) { function canNext(isNext, e) {
let res = !((state.localIndex === 0 && !isNext) || (state.localIndex === props.item.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)
}
return res return res
} }
@ -626,7 +639,7 @@ function canNext(isNext, e) {
flex: 1; flex: 1;
margin: 0 2rem; margin: 0 2rem;
height: @h; height: @h;
background: rgba(#000, .5); background: #75757580;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -635,7 +648,7 @@ function canNext(isNext, e) {
position: absolute; position: absolute;
left: 0; left: 0;
height: @h; height: @h;
background: white; background: #e5e5e587;
} }
} }
} }
@ -657,16 +670,17 @@ function canNext(isNext, e) {
.preview-wrapper { .preview-wrapper {
img { img {
transition: width .3s; transition: all .3s;
margin: 0 5rem; margin: 0 5rem;
width: 30rem; width: 30rem;
height: 50rem; height: 45rem;
background-color: black; background-color: black;
border-radius: 3rem; border-radius: 3rem;
overflow: hidden; overflow: hidden;
object-fit: cover; object-fit: cover;
&.preview-img { &.preview-img {
margin: 0 15rem;
width: 40rem; width: 40rem;
} }
} }

2
src/components/slide/SlideHorizontal.vue
View File

@ -50,7 +50,7 @@ watch(
if (props.changeActiveIndexUseAnim) { if (props.changeActiveIndexUseAnim) {
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`) GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
} }
GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`) GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL,wrapperEl.value)}px, 0, 0)`)
} }
} }
) )

2
src/components/slide/SlideVerticalInfinite.vue
View File

@ -208,7 +208,7 @@ function getInsEl(item, index, play = false) {
} }
}) })
const ins = app.mount(parent) const ins = app.mount(parent)
appInsMap.set(index, ins) appInsMap.set(index, app)
return ins.$el return ins.$el
} }

13
src/components/slide/common.js
View File

@ -23,12 +23,13 @@ export function slideTouchStart(e, el, state) {
state.start.time = Date.now() state.start.time = Date.now()
} }
//检测能否滑动
export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) { export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
if (state.needCheck) { if (state.needCheck) {
if (Math.abs(state.move.x) > judgeValue || Math.abs(state.move.y) > judgeValue) { if (Math.abs(state.move.x) > judgeValue || Math.abs(state.move.y) > judgeValue) {
let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10) let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10)
state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1; state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1;
// console.log(angle) console.log('angle', angle, state.next)
state.needCheck = false state.needCheck = false
} else { } else {
return false return false
@ -37,7 +38,10 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
return state.next return state.next
} }
export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL, notNextCb) { /**
* @param slideOtherDirectionCb 滑动其他方向时的回调，目前用于图集进于放大模式后，上下滑动推出放大模式
* */
export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL, notNextCb, slideOtherDirectionCb = null) {
state.move.x = e.touches[0].pageX - state.start.x state.move.x = e.touches[0].pageX - state.start.x
state.move.y = e.touches[0].pageY - state.start.y state.move.y = e.touches[0].pageY - state.start.y
@ -48,9 +52,9 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) { if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) {
bus.emit(state.name + '-moveY', state.move.y) bus.emit(state.name + '-moveY', state.move.y)
} }
if (!canNextCb?.(isNext, e)) return
if (canSlideRes) { if (canSlideRes) {
if (canNextCb?.(isNext, e)) {
nextCb?.() nextCb?.()
if (type === SlideType.HORIZONTAL) { if (type === SlideType.HORIZONTAL) {
bus.emit(state.name + '-moveX', state.move.x) bus.emit(state.name + '-moveX', state.move.x)
@ -69,6 +73,9 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
} else { } else {
notNextCb?.() notNextCb?.()
} }
} else {
slideOtherDirectionCb?.(e)
}
} }
export function slideTouchEnd(e, state, canNextCb, nextCb, doNotNextCb, type = SlideType.HORIZONTAL) { export function slideTouchEnd(e, state, canNextCb, nextCb, doNotNextCb, type = SlideType.HORIZONTAL) {

2
src/mock/index.js
View File

@ -50,7 +50,7 @@ let t = [
} }
}, },
] ]
allRecommendVideos.unshift(...t) // allRecommendVideos.unshift(...t)
// { // {
// type: 'imgs', // type: 'imgs',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`, // src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,

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

@ -8,7 +8,7 @@
<Icon <Icon
icon="tabler:menu-deep" icon="tabler:menu-deep"
class="search" class="search"
@click="$nav('/home/live')" @click="$emit('showSlidebar')"
style="transform: rotateY(180deg)"/> style="transform: rotateY(180deg)"/>
<div class="tab-ctn"> <div class="tab-ctn">
<div class="tabs" ref="tabs"> <div class="tabs" ref="tabs">

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

@ -2,7 +2,7 @@
<div class="test-slide-wrapper" id="home-index"> <div class="test-slide-wrapper" id="home-index">
<SlideHorizontal v-model:index="state.baseIndex"> <SlideHorizontal v-model:index="state.baseIndex">
<SlideItem class="sidebar"> <SlideItem class="sidebar">
<div class="sidebar1"> <div class="card">
</div> </div>
</SlideItem> </SlideItem>
@ -11,6 +11,7 @@
v-if="!state.fullScreen" v-if="!state.fullScreen"
:loading="loading" :loading="loading"
name="main" name="main"
@showSlidebar="state.baseIndex = 0"
v-model:index="state.navIndex" v-model:index="state.navIndex"
/> />
<div class="slide-content"> <div class="slide-content">
@ -30,6 +31,9 @@
</SlideHorizontal> </SlideHorizontal>
</div> </div>
<Footer v-bind:init-tab="1"/> <Footer v-bind:init-tab="1"/>
<Mask v-if="state.baseIndex === 0"
@click="state.baseIndex = 1"
mode="white" style="position: absolute"/>
</SlideItem> </SlideItem>
<SlideItem> <SlideItem>
<UserPanel <UserPanel
@ -135,7 +139,7 @@ const bodyHeight = computed(() => store.state.bodyHeight)
const bodyWidth = computed(() => store.state.bodyWidth) const bodyWidth = computed(() => store.state.bodyWidth)
const state = reactive({ const state = reactive({
baseIndex: 1, baseIndex: 0,
navIndex: 4, navIndex: 4,
test: '', test: '',
recommendList: [ recommendList: [
@ -245,7 +249,7 @@ function dislike() {
overflow: hidden; overflow: hidden;
.sidebar { .sidebar {
width: 70vw; width: 75vw;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
background: red; background: red;

11
src/utils/index.jsx
View File

@ -10,7 +10,7 @@ import bus from "./bus";
import {cloneDeep} from "lodash"; import {cloneDeep} from "lodash";
import {EVENT_KEY} from "./bus"; import {EVENT_KEY} from "./bus";
export default { const Utils = {
require2(url) { require2(url) {
return new URL(url, import.meta.url).href return new URL(url, import.meta.url).href
}, },
@ -424,3 +424,12 @@ export default {
document.body.removeChild(input); document.body.removeChild(input);
} }
} }
export default Utils
export function $no() {
Utils.$no(arguments)
}
export function $notice(val) {
Utils.$notice(val)
}