index.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <div class="collections">
  3. <PageBanner title="Collections" :img="bannerUrl || BannerImg" />
  4. <ul class="collections-main">
  5. <li
  6. v-for="item in NAV_LIST"
  7. :key="item.type"
  8. class="collections-card"
  9. @click="
  10. $router.push({
  11. name: 'CollectionsList',
  12. params: {
  13. name: item.type,
  14. },
  15. })
  16. "
  17. >
  18. <VanImage
  19. :src="
  20. baseUrl +
  21. collectionStore.thumbList.find((i) => i.type === item.name)?.thumb
  22. "
  23. width="100%"
  24. :height="100"
  25. style="display: block"
  26. />
  27. <p>{{ item.name }}</p>
  28. </li>
  29. </ul>
  30. </div>
  31. </template>
  32. <script lang="ts" setup>
  33. import PageBanner from "@/components/PageBanner.vue";
  34. import { getBaseURL } from "@dage/service";
  35. import { useCollectionStore } from "@/stores/collection";
  36. import BannerImg from "./images/bannerC.png";
  37. import { useBaseStore } from "@/stores/base";
  38. import { computed } from "vue";
  39. import { NAV_LIST } from "./constants";
  40. const baseUrl = getBaseURL();
  41. const baseStore = useBaseStore();
  42. const bannerUrl = computed(() => {
  43. return (
  44. baseUrl +
  45. baseStore.bannerList.find((i) => i.name === "Collections")?.thumbApp
  46. );
  47. });
  48. const collectionStore = useCollectionStore();
  49. </script>
  50. <style lang="scss" scoped>
  51. @import "./index.scss";
  52. </style>