63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<!--首页推荐版本-->
|
|
<script setup lang="ts">
|
|
import { pcHomeRecommendedApi } from '~/server/homeApi'
|
|
|
|
const { data: recommendedList } = await useAsyncData(async () => pcHomeRecommendedApi(), {
|
|
default: () => [],
|
|
})
|
|
</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="acea-row flex-between-center mb-30px">
|
|
<div class="text-28px text-#333 ml-20px title font-500 alimama">{{ item.name }}</div>
|
|
<nuxt-link
|
|
:to="{ path: `/product/product_recommended`, query: { id: item.id, name: item.name } }"
|
|
class="flex-y-center"
|
|
><div class="text-14px text-#999999 oppoSans-R cursors">
|
|
更多<span class="iconfont icon-gengduo ml-4px"></span></div
|
|
></nuxt-link>
|
|
</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-348px 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: 120px !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>
|