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

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

definePageMeta({
  layout: "default",
});
const params = ref({
  name: null,
  order: null,
  type: null
})
// const hotNameList = ref([
// '哪吒',
// '电商',
// '产品',
// '海报',
// '国潮',
// '写真',
// '推文',
// 'XL',
// ])
const listRef = ref(null);
// function handleSearch() {
//   onSearch()
// }
const modelCategoryList = ref([]);
async function getDictType() {
  try {
    const res = await commonApi.dictType({ type: "model_child_category" });
    if (res.code === 200) {
      modelCategoryList.value = res.data;
    }
  } catch (error) {
    console.log(error);
  }
}
getDictType();

//执行搜索的时候
function onSearch() {
  if (listRef.value) {
    listRef.value?.initPageNUm();
  }
}
// 切换类型
function changeCategory(item:any){
  params.value.type = item.dictValue
  onSearch()
}

// function onHot(name:string){
//   params.value.name = name
//   onSearch()
// }
</script>
<template>
  <div class="p-6">
    <div class="header flex h-[150px] border-b border-b-[#ebebeb]">
      <div class="flex-1 py-2">
        <div class="max-w-4xl mx-auto">
          <div class="relative flex items-center w-full">
            <!-- 搜索输入框 -->
            <input
              type="text"
              class="w-full py-3 px-6 text-lg text-gray-600 placeholder-gray-400 bg-white border-2 border-blue-500 rounded-full focus:outline-none focus:border-blue-600"
              placeholder="搜索模型/图片/创作者寻找灵感"
              @keyup.enter="onSearch"
              v-model="params.name"
            />

            <!-- 相机图标 -->
            <button class="absolute right-24 p-2 mr-2 text-gray-400 hover:text-gray-600">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
            </button>

            <!-- 搜索按钮 -->
            <button
              class="absolute right-0 px-8 py-3 mr-2 text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
              @click="onSearch"
            >
              搜索
            </button>
          </div>
        </div>
        <!-- <div class="flex p-3">
          <div v-for="(item, index) in hotNameList" @click="onHot(item)" :key="index" class="mr-3 mb-2 cursor-pointer">
            {{ item }}
          </div>
        </div> -->
      </div>
      <div class="w-[500px] ml-4">
        <!-- <img
          class="h-[130px] w-full rounded-lg"
          src="https://img.zcool.cn/tubelocation/e41767ac6706cd0109100099e04b.jpg?imageMogr2/format/webp"
          alt=""
        /> -->
        <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>
    <div class="flex flex-wrap">
      <div class="flex flex-wrap">
        <div
          v-for="(item, index) in modelCategoryList"
          :key="index"
          :style="{color: item.dictValue === params.type ? '#000' : '#6f6f6f'}"
          @click="changeCategory(item)"
          class="pt-4 mr-4 cursor-pointer"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>
    <div class="flex flex-wrap">
      <ModelList ref="listRef" :params="params"></ModelList>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.grid > div {
  transition: transform 0.2s;
}
.grid > div:hover {
  transform: translateY(-2px);
}
.carousel-img {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  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>