You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.4 KiB
50 lines
1.4 KiB
<script setup lang="ts"> |
|
import { pcHomeRecommendedApi } from '~/server/homeApi' |
|
|
|
const { data: recommendedList, pending: listLoading } = await useAsyncData(async () => pcHomeRecommendedApi()) |
|
</script> |
|
|
|
<template> |
|
<div v-for="item in recommendedList" :key="item.id" class="wrapper_1200 merchantIndex mb-50px"> |
|
<div v-if="item.productList.length"> |
|
<div class="mb-30px text-28px text-#333 ml-20px title font-700 alimama">{{ item.name }}</div> |
|
<div class="grid-container"> |
|
<a v-if="item.linkUrl" :href="item.linkUrl" target="_blank"> |
|
<el-image :src="item.imageUrl" class="w-471px h-340px b-rd-16px item"></el-image> |
|
</a> |
|
<el-image v-else :src="item.imageUrl" class="w-471px h-340px b-rd-16px item"></el-image> |
|
<div v-for="items in item.productList" :key="items.id" class="cursors"> |
|
<product :item="items"></product> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.grid-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: flex-start; |
|
margin: 0 -8px; |
|
:deep(.content) { |
|
height: 112px !important; |
|
} |
|
} |
|
.item { |
|
margin: 7.5px; |
|
} |
|
|
|
:deep(.productItem) { |
|
margin: 7.5px; |
|
} |
|
:deep(.products-name) { |
|
line-height: 16px !important; |
|
word-break: break-all; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 1 !important; |
|
-webkit-box-orient: vertical; |
|
overflow: hidden; |
|
height: 17px !important; |
|
} |
|
</style>
|
|
|