mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
@@ -51,6 +51,7 @@ body,
|
|||||||
& > div:first-child {
|
& > div:first-child {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -412,21 +412,12 @@ const getImgUrl: Ref<string> = computed(() => {
|
|||||||
v-bind="hover.props"
|
v-bind="hover.props"
|
||||||
:height="props.height"
|
:height="props.height"
|
||||||
:width="props.width"
|
:width="props.width"
|
||||||
:loading="!isImageLoaded"
|
|
||||||
class="outline-none shadow ring-gray-500"
|
class="outline-none shadow ring-gray-500"
|
||||||
:class="{
|
:class="{
|
||||||
'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
|
'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
|
||||||
'ring-1': isImageLoaded,
|
'ring-1': isImageLoaded,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #loader="{ isActive }">
|
|
||||||
<v-progress-linear
|
|
||||||
:active="isActive"
|
|
||||||
color="deep-purple"
|
|
||||||
height="4"
|
|
||||||
indeterminate
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<VImg
|
<VImg
|
||||||
aspect-ratio="2/3"
|
aspect-ratio="2/3"
|
||||||
:src="getImgUrl"
|
:src="getImgUrl"
|
||||||
|
|||||||
+49
-33
@@ -12,61 +12,77 @@ const activeTab = ref(route.params.tab)
|
|||||||
|
|
||||||
// tabs
|
// tabs
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{ title: '用户', icon: 'mdi-account', tab: 'account' },
|
{
|
||||||
{ title: '站点', icon: 'mdi-web', tab: 'site' },
|
title: '用户',
|
||||||
{ title: '规则', icon: 'mdi-filter-cog', tab: 'filter' },
|
icon: 'mdi-account',
|
||||||
{ title: '通知', icon: 'mdi-bell', tab: 'notification' },
|
tab: 'account',
|
||||||
{ title: '自定义词表', icon: 'mdi-file-word-box', tab: 'words' },
|
},
|
||||||
|
{
|
||||||
|
title: '站点',
|
||||||
|
icon: 'mdi-web',
|
||||||
|
tab: 'site',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '规则',
|
||||||
|
icon: 'mdi-filter-cog',
|
||||||
|
tab: 'filter',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通知',
|
||||||
|
icon: 'mdi-bell',
|
||||||
|
tab: 'notification',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '自定义词表',
|
||||||
|
icon: 'mdi-file-word-box',
|
||||||
|
tab: 'words',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<VTabs
|
<VTabs v-model="activeTab" show-arrows>
|
||||||
v-model="activeTab"
|
<VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
|
||||||
show-arrows
|
<VIcon size="20" start :icon="item.icon" />
|
||||||
>
|
|
||||||
<VTab
|
|
||||||
v-for="item in tabs"
|
|
||||||
:key="item.icon"
|
|
||||||
:value="item.tab"
|
|
||||||
>
|
|
||||||
<VIcon
|
|
||||||
size="20"
|
|
||||||
start
|
|
||||||
:icon="item.icon"
|
|
||||||
/>
|
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</VTab>
|
</VTab>
|
||||||
</VTabs>
|
</VTabs>
|
||||||
<VDivider />
|
<VDivider />
|
||||||
|
|
||||||
<VWindow
|
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition">
|
||||||
v-model="activeTab"
|
|
||||||
class="mt-5"
|
|
||||||
>
|
|
||||||
<!-- Account -->
|
<!-- Account -->
|
||||||
<VWindowItem value="account" transition="scale-transition">
|
<VWindowItem value="account">
|
||||||
<AccountSettingAccount />
|
<transition name="fade-slide" appear>
|
||||||
|
<AccountSettingAccount />
|
||||||
|
</transition>
|
||||||
</VWindowItem>
|
</VWindowItem>
|
||||||
|
|
||||||
<!-- System -->
|
<!-- System -->
|
||||||
<VWindowItem value="site" transition="scale-transition">
|
<VWindowItem value="site">
|
||||||
<AccountSettingSite />
|
<transition name="fade-slide" appear>
|
||||||
|
<AccountSettingSite />
|
||||||
|
</transition>
|
||||||
</VWindowItem>
|
</VWindowItem>
|
||||||
|
|
||||||
<!-- Notification -->
|
<!-- Notification -->
|
||||||
<VWindowItem value="filter" transition="scale-transition">
|
<VWindowItem value="filter">
|
||||||
<AccountSettingRule />
|
<transition name="fade-slide" appear>
|
||||||
|
<AccountSettingRule />
|
||||||
|
</transition>
|
||||||
</VWindowItem>
|
</VWindowItem>
|
||||||
|
|
||||||
<!-- Notification -->
|
<!-- Notification -->
|
||||||
<VWindowItem value="notification" transition="scale-transition">
|
<VWindowItem value="notification">
|
||||||
<AccountSettingNotification />
|
<transition name="fade-slide" appear>
|
||||||
|
<AccountSettingNotification />
|
||||||
|
</transition>
|
||||||
</VWindowItem>
|
</VWindowItem>
|
||||||
<!-- Words -->
|
<!-- Words -->
|
||||||
<VWindowItem value="words" transition="scale-transition">
|
<VWindowItem value="words">
|
||||||
<AccountSettingWords />
|
<transition name="fade-slide" appear>
|
||||||
|
<AccountSettingWords />
|
||||||
|
</transition>
|
||||||
</VWindowItem>
|
</VWindowItem>
|
||||||
</VWindow>
|
</VWindow>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -132,8 +132,9 @@ async function fetchData({ done }: { done: any }) {
|
|||||||
<VInfiniteScroll
|
<VInfiniteScroll
|
||||||
mode="intersect"
|
mode="intersect"
|
||||||
side="end"
|
side="end"
|
||||||
:on-load="fetchData"
|
:items="dataList"
|
||||||
class="overflow-hidden"
|
class="overflow-hidden"
|
||||||
|
@load="fetchData"
|
||||||
>
|
>
|
||||||
<template #loading />
|
<template #loading />
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ onBeforeMount(fetchData)
|
|||||||
icon="mdi-plus"
|
icon="mdi-plus"
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
size="x-large"
|
size="x-large"
|
||||||
class="fixed right-5"
|
class="absolute right-5 bottom-5"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user