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.
51 lines
1.4 KiB
51 lines
1.4 KiB
11 months ago
|
<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>
|