- background
+
+const typeList = [
+ '热门',
+ 'COSPALY',
+ '二次元',
+ '风景',
+ '插画',
+ '热门',
+ 'COSPALY',
+ '二次元',
+ '风景',
+ '插画',
+ '热门',
+ 'COSPALY',
+ '二次元',
+ '风景',
+ '插画'
+]
+const wallpaperAttrList = [
+ '动态壁纸',
+ '静态壁纸',
+ '自定义壁纸'
+]
+export type BackgroundType = {
+ id: string
+ oridinal: number
+ type: string
+ attr: number
+}
+export type WallpaperItem = {
+ id: string
+ hotNum: number
+ time: number
+ typeId: string
+ url: string
+}
+export default defineComponent(() => {
+ const layout = useLayoutStore()
+ const router = useRouterStore()
+ const isGame = computed(() => layout.state.current === 0)
+ const selectType = ref('')
+ const addTo = ref(layout.state.currentPage)
+ const typeList = ref([])
+ const wallpaperList = ref([])
+ const selectAttr = ref(0)
+ const userStore = useUserStore()
+ const backgroundStore = useBackgroundStore()
+ const sortBy = ref<'hotNum' | 'time'>('hotNum')
+ onMounted(() => {
+ request("GET", "/api/backgroundTypes").then(res => {
+ console.log(res);
+ typeList.value = res
+ selectType.value = res[0].id
+ })
+ })
+ watch(() => [selectType.value, sortBy.value], (e) => {
+ wallpaperList.value = []
+ request("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => {
+ console.log(res);
+ wallpaperList.value = res
+ })
+ }, {
+ immediate: true
+ })
+ watch(selectAttr, (e) => {
+
+ selectType.value = typeList.value.filter(val => val.attr === e)[0].id || ''
+ })
+ return () => (
+ ,
+ required: true
+ },
+ selectType: {
+ type: String,
+ required: true,
+ },
+
+ },
+ slots: {} as SlotsType<{
+ select?: (text: string) => VNode[]
+ unSelect?: (text: string) => VNode[]
+ }>,
+ emits: ['update:type'],
+ setup(props, ctx) {
+ const tabRefs = ref<(Element | null)[]>([])
+ const parentRef = ref(null)
+ const number = ref(0)
+ const tweened = reactive({
+ number: 0
+ })
+
+
+ watch(number, (n) => {
+ gsap.to(tweened, {
+ number: n,
+ duration: .5,
+ onUpdate: () => {
+ if (parentRef.value)
+ parentRef.value.scrollLeft = tweened.number
+ },
+ });
+ })
+
+ watch(() => [props.selectType], () => {
+ const idx = props.list.findIndex((item) => item.id === props.selectType)
+ if (idx === -1) return
+ if (tabRefs.value[idx]) {
+ const childRef = tabRefs.value[idx]
+ if (!childRef) return
+ if (!childRef.parentElement) return
+ const parentRect = childRef.parentElement.getBoundingClientRect()
+ const childRect = childRef.getBoundingClientRect()
+ const distance = childRect.left - parentRect.left
+ if (!parentRef.value) return
+ if (idx > 3) {
+ number.value = distance - 350
+ } else {
+ number.value = 0
+
+ }
+ } else {
+ number.value = 0
+
+ }
+ }
+ )
+ return () => (
+
+
+ )
+ },
+})
\ No newline at end of file
+
+ )
+})
diff --git a/src/main.css b/src/main.css
index 8c3b320..869890c 100644
--- a/src/main.css
+++ b/src/main.css
@@ -157,3 +157,30 @@ body {
scrollbar-width: none;
-ms-overflow-style: none;
}
+@layer utilities {
+ .scrollbar-transparent::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+ .scrollbar-hide::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+
+ .scrollbar-hide {
+ -ms-overflow-style: none; /* Internet Explorer 10+ */
+ scrollbar-width: none; /* Firefox */
+ }
+ .scrollbar-transparent::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ }
+
+ .scrollbar-transparent::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+
+ .scrollbar-transparent {
+ scrollbar-width: thin;
+ scrollbar-color: transparent transparent;
+ }
+}
\ No newline at end of file
diff --git a/src/utils/CategoryTab.tsx b/src/utils/CategoryTab.tsx
new file mode 100644
index 0000000..9317599
--- /dev/null
+++ b/src/utils/CategoryTab.tsx
@@ -0,0 +1,94 @@
+import type { BackgroundType } from "@/layout/background/BackgroundSwtich";
+import clsx from "clsx";
+import gsap from "gsap";
+import { defineComponent, reactive, ref, watch, type SlotsType, type VNode } from "vue";
+
+export default defineComponent({
+ props: {
+ list: {
+ type: Array
+
- )
- }
-})
\ No newline at end of file
+
+
+
+
+
+
+
+
+ ,
+ unSelect: (text: string) =>
+ }} list={typeList.value.filter(val => val.attr === selectAttr.value)} selectType={selectType.value} onUpdate:type={(e) => {
+ selectType.value = e
+ }}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {wallpaperList.value.map(item =>
+
+ {
+ backgroundStore.setBackground(item.url)
+ }}
+ class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden">
+ 
+
+
)}
+
+
+ {
+ wallpaperAttrList.map((item, index) => (
+
+ {
+ if (index === 2) {
+
+ if (!userStore.isLogin) {
+ router.go('global-login')
+ }
+ return
+ }
+ selectAttr.value = index
+
+ }}
+ class={clsx("px-8 py-2 rounded-[8px]",
+ index === selectAttr.value ? "bg-white text-[#333]" : "cursor-pointer text-white hover:bg-white/[.4]")}>{item}
+ ))
+ }
+
+