1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <template>
- <div class="collections">
- <PageBanner title="Collections" :img="bannerUrl || BannerImg" />
- <ul class="collections-main">
- <li
- v-for="item in NAV_LIST"
- :key="item.type"
- class="collections-card"
- @click="
- $router.push({
- name: 'CollectionsList',
- params: {
- name: item.type,
- },
- })
- "
- >
- <VanImage
- :src="
- baseUrl +
- collectionStore.thumbList.find((i) => i.type === item.name)?.thumb
- "
- width="100%"
- :height="100"
- style="display: block"
- />
- <p>{{ item.name }}</p>
- </li>
- </ul>
- </div>
- </template>
- <script lang="ts" setup>
- import PageBanner from "@/components/PageBanner.vue";
- import { getBaseURL } from "@dage/service";
- import { useCollectionStore } from "@/stores/collection";
- import BannerImg from "./images/bannerC.png";
- import { useBaseStore } from "@/stores/base";
- import { computed } from "vue";
- import { NAV_LIST } from "./constants";
- const baseUrl = getBaseURL();
- const baseStore = useBaseStore();
- const bannerUrl = computed(() => {
- return (
- baseUrl +
- baseStore.bannerList.find((i) => i.name === "Collections")?.thumbApp
- );
- });
- const collectionStore = useCollectionStore();
- </script>
- <style lang="scss" scoped>
- @import "./index.scss";
- </style>
|