GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-02 06:10:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
jxxghp
2024-06-15 21:06:56 +08:00
parent 73c54992e2
commit c66d7cafa6
7 changed files with 72 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/slide/SlideView.vue
View File

@@ -27,12 +27,10 @@ function slideNext(next: boolean) {
if (run_to_left_px >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth)
run_to_left_px = slideview_content.value.scrollWidth - slideview_content.value.clientWidth
// console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
}
else {
} else {
const card_index = card_current - card_max
run_to_left_px = card_index * card_width
if (run_to_left_px <= 0)
run_to_left_px = 0
if (run_to_left_px <= 0) run_to_left_px = 0
// console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
}
slideview_content.value.scrollTo({
@@ -46,7 +44,7 @@ function slideNext(next: boolean) {
function countMaxNumber() {
slide_card_length = slideview_content.value.children.length
card_width = slideview_content.value.firstElementChild.getBoundingClientRect().width
slide_gap_px = (slideview_content.value.scrollWidth / slide_card_length) - card_width
slide_gap_px = slideview_content.value.scrollWidth / slide_card_length - card_width
card_width += slide_gap_px
card_max = Math.trunc(slideview_content.value.clientWidth / card_width)
countDisabled()
@@ -55,16 +53,18 @@ function countMaxNumber() {
// 修改分页切换按钮状态
function countDisabled() {
slideview_scrollLeft.value = slideview_content.value.scrollLeft
card_current = slideview_content.value.scrollLeft === 0 ? 0 : Math.trunc((slideview_content.value.scrollLeft + card_width / 2) / card_width)
if (slide_card_length * card_width <= slideview_content.value.clientWidth)
disabled.value = 3
else if (slideview_content.value.scrollLeft === 0)
disabled.value = 0
else if (slideview_content.value.scrollLeft >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth - 2)
card_current =
slideview_content.value.scrollLeft === 0
? 0
: Math.trunc((slideview_content.value.scrollLeft + card_width / 2) / card_width)
if (slide_card_length * card_width <= slideview_content.value.clientWidth) disabled.value = 3
else if (slideview_content.value.scrollLeft === 0) disabled.value = 0
else if (
slideview_content.value.scrollLeft >=
slideview_content.value.scrollWidth - slideview_content.value.clientWidth - 2
)
disabled.value = 2
else
disabled.value = 1
else disabled.value = 1
}
// 组件加载完成
@@ -123,8 +123,7 @@ onActivated(() => {
<style lang="scss" scoped>
.slideview_content {
-ms-overflow-style: none !important;
overflow-x: scroll !important;
overflow-y: hidden !important;
overflow: scroll hidden !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
}

19
src/components/slide/SlideViewTitle.vue
View File

@@ -1,22 +1,13 @@
<script lang="ts" setup>
// 输入参数
const props = inject('rankingPropsKey')
const props: any = inject('rankingPropsKey')
</script>
<template>
<div
class="ms-1"
>
<RouterLink
:to="props.linkurl ? props.linkurl : ''"
class="slider-title"
>
<span>{{ props.title }}</span>
<VIcon
icon="mdi-arrow-right-circle-outline"
class="ms-1"
/>
<div class="ms-1">
<RouterLink :to="props?.linkurl ? props?.linkurl : ''" class="slider-title">
<span>{{ props?.title }}</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>