menduner/src/views/mall/components/details/prizeDrawContent.vue

<!--  -->
<template>
  <div class="px-5">
    <div class="d-flex justify-space-between color-666">
      <div class="pt-2" style="font-size: 25px;">房券列表</div>
      <div class="d-flex">
        <!-- <span class="cursor-pointer active" >当前账户积分</span>
        <span class="septal-line"></span>
        <span class="cursor-pointer active" >兑换记录</span> -->
        <div style="width: 200px;" class="mt-2">
          <v-text-field
            v-model="content"
            variant="outlined" 
            label="关键字查找"
            hide-details
            color="primary"
            density="compact"
            append-inner-icon="mdi-magnify"
            @click:append-inner="handleSearch"
            @keyup.enter="handleSearch"
          >
          </v-text-field>
        </div>
      </div>
    </div>
    <div class="goods-box mt-5">
      <v-card v-for="val in dataList" :key="val.id" class="goods-box-item" elevation="2" style="background-color: #00ad9b;" @click="null">
        <div style="width: 100%; height: 200px;">
          <v-img :src="val.url" :aspect-ratio="1" style="border-radius: 8px;"></v-img>
        </div>
        <div class="text-center pa-3 pb-2 mt-5" style=" border-top: 2px dashed #b7b7b7; color: #fff;">
          <div class="ellipsis-2">{{ val.name }}</div>
          <div class="font-size-12 mt-2">{{ val.time }}</div>
        </div>
      </v-card>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'GoodsItem-prizeDrawContent'})
import { ref } from 'vue'
const emit = defineEmits(['login'])

const content = ref('')
const handleSearch = () => {}

// 数据
const dataList = ref([
  { name: '凯悦酒店1866/2晚的房券-大床带双早', point: 8000, url: 'https://img1.baidu.com/it/u=2383065711,2021783868&fm=253&fmt=auto&app=138&f=JPEG?w=719&h=500', time: '2025.02.01-2025.02.30' },
  { name: '房券-高端酒店房券', point: 12000, url: 'https://img1.baidu.com/it/u=1781363061,1773318172&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', time: '2025.01.01-2025.12.30' },
  { name: '金茂万丽免房券', point: 5000, url: 'https://img1.baidu.com/it/u=1791205046,4251623717&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375', time: '2025.01.01-2025.12.30' },
  { name: '苏州昆山阳澄喜柯大酒店1晚套餐通兑券（住园景/全湖景尊享房+双人份豪华早餐+可自选蟹宴/价值198元正餐+免费使用泳池健身房）', point: 2000, url: 'https://img2.baidu.com/it/u=4056160349,3161141178&fm=253&fmt=auto&app=138&f=JPEG?w=668&h=500', time: '2025.01.01-2025.12.30' },
  { name: '上海万怡酒店房券+迪士尼门票', point: 500, url: 'https://picx.zhimg.com/v2-d21746f72d02ee821e35c6db11c0935f_r.jpg?source=1940ef5c', time: '2025.01.01-2025.12.30' }
])

</script>

<style scoped lang="scss">
.active:hover {
  color: var(--v-primary-base) !important;
}
.goods-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  &-item {
    // height: 330px;
    padding: 12px;
    width: calc((100% - 48px) / 4);
    margin: 0 12px 12px 0;
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>