mcwl-pc/app/pages/picture-square.vue

<script setup lang="ts">
import { commonApi } from "@/api/common";
import { ArrowBack, ArrowForward } from "@vicons/ionicons5";
import { NConfigProvider, NMessageProvider } from "naive-ui";
import { ref } from "vue";

definePageMeta({
  layout: "default",
});
const params = ref({
  name: null,
  order: null,
  type: null,
});
const listRef = ref(null);
// function handleSearch() {
//   onSearch()
// }

const modelCategoryList = ref([]);
async function getDictType() {
  try {
    const res = await commonApi.dictType({ type: "image_label" });
    if (res.code === 200) {
      modelCategoryList.value = res.data;
      modelCategoryList.value.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    }
  } catch (error) {
    console.log(error);
  }
}
getDictType();

//执行搜索的时候
function onSearch() {
  if (listRef.value) {
    listRef.value?.initPageNUm();
  }
}
// 切换类型
function changeCategory(item: any) {
  params.value.type = item.dictValue;
  onSearch();
}
</script>
<template>
  <div class="p-6">
    <div class="w-full">
      <n-carousel show-arrow autoplay>
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
        />
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
        />
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
        />
        <img
          class="carousel-img"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
        />
        <template #arrow="{ prev, next }">
          <div class="custom-arrow">
            <button type="button" class="custom-arrow--left" @click="prev">
              <n-icon><ArrowBack /></n-icon>
            </button>
            <button type="button" class="custom-arrow--right" @click="next">
              <n-icon><ArrowForward /></n-icon>
            </button>
          </div>
        </template>
        <template #dots="{ total, currentIndex, to }">
          <ul class="custom-dots">
            <li
              v-for="index of total"
              :key="index"
              :class="{ ['is-active']: currentIndex === index - 1 }"
              @click="to(index - 1)"
            />
          </ul>
        </template>
      </n-carousel>
    </div>
    <div class="flex items-center mt-4">
      <div class="text-[20px] mr-4">作品灵感</div>
      <HeaderSearchInput v-model="params.name" @search="onSearch" />
    </div>
    <div class="flex flex-wrap mt-2">
      <div class="flex flex-wrap">
        <div
          v-for="(item, index) in modelCategoryList"
          :key="index"
          :style="{
            color: item.dictValue === params.type ? '#fff' : '#000',
            background: item.dictValue === params.type ? '#000' : '#fff',
          }"
          @click="changeCategory(item)"
          class="px-2 py-1 rounded-full mr-4 cursor-pointer"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>
    <div class="flex flex-wrap">
      <NConfigProvider>
        <NMessageProvider>
          <PictureList ref="listRef" :params="params" />
        </NMessageProvider>
      </NConfigProvider>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.grid > div {
  transition: transform 0.2s;
}
.grid > div:hover {
  transform: translateY(-2px);
}
.carousel-img {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  object-fit: cover;
}

.custom-arrow {
  display: flex;
  position: absolute;
  bottom: 25px;
  right: 10px;
}

.custom-arrow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 0;
  border-radius: 8px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-arrow button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.custom-arrow button:active {
  transform: scale(0.95);
  transform-origin: center;
}

.custom-dots {
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.custom-dots li {
  display: inline-block;
  width: 12px;
  height: 4px;
  margin: 0 3px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 40px;
  background: #fff;
}
</style>