165 lines
4.7 KiB
Vue
165 lines
4.7 KiB
Vue
<template>
|
|
<div>
|
|
<common current-name="supplier">
|
|
<template #main>
|
|
<banner name="supplier" :imglist="bannerList"></banner>
|
|
<filtertop :list="treeList"></filtertop>
|
|
<div class="goods-list-warp">
|
|
<div class="goods-list">
|
|
<template v-for="(n, index) in 16" :key="index">
|
|
<div class="goods-item">
|
|
<goodsItem></goodsItem>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</common>
|
|
</div>
|
|
</template>
|
|
<script setup name="ecommerce">
|
|
import common from './components/common.vue';
|
|
import banner from './components/banner.vue';
|
|
import filtertop from './components/filtertop.vue';
|
|
import goodsItem from './components/goodsItem.vue';
|
|
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
|
let treeList = reactive([
|
|
{
|
|
id: '01',
|
|
title: '农产品',
|
|
children: [
|
|
{
|
|
pId: '01',
|
|
id: '0101',
|
|
title: '植物性农产品',
|
|
children: [
|
|
{ pId: '0101', id: '010101', title: '谷物' },
|
|
{ pId: '0101', id: '010102', title: '蔬菜' },
|
|
{ pId: '0101', id: '010103', title: '水果' },
|
|
{ pId: '0101', id: '010104', title: '坚果与油料作物' },
|
|
{ pId: '0101', id: '010105', title: '糖料作物' },
|
|
{ pId: '0101', id: '010106', title: '纤维作物' },
|
|
{ pId: '0101', id: '010107', title: '茶叶' },
|
|
{ pId: '0101', id: '010108', title: '咖啡' },
|
|
{ pId: '0101', id: '010109', title: '香料' },
|
|
],
|
|
},
|
|
{
|
|
pId: '01',
|
|
id: '0102',
|
|
title: '动物性农产品',
|
|
children: [
|
|
{ pId: '0102', id: '010201', title: '肉类' },
|
|
{ pId: '0102', id: '010202', title: '奶制品' },
|
|
{ pId: '0102', id: '010203', title: '蛋类' },
|
|
{ pId: '0102', id: '010204', title: '蜂蜜' },
|
|
{ pId: '0102', id: '010205', title: '水产品' },
|
|
],
|
|
},
|
|
{
|
|
pId: '01',
|
|
id: '0103',
|
|
title: '特殊农产品',
|
|
children: [
|
|
{ pId: '0103', id: '010301', title: '花卉与苗木' },
|
|
{ pId: '0103', id: '010302', title: '药材' },
|
|
{ pId: '0103', id: '010303', title: '菌类' },
|
|
],
|
|
},
|
|
{
|
|
pId: '01',
|
|
id: '0104',
|
|
title: '其他',
|
|
children: [{ pId: '0104', id: '010401', title: '饲料' }],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: '02',
|
|
title: '种子种苗',
|
|
children: [
|
|
{
|
|
pId: '02',
|
|
id: '0101',
|
|
title: '花卉种子种苗',
|
|
children: [
|
|
{ pId: '0101', id: '010101', title: '草本花卉' },
|
|
{ pId: '0101', id: '010102', title: '木本花卉' },
|
|
{ pId: '0101', id: '010103', title: '野生花卉' },
|
|
],
|
|
},
|
|
{
|
|
pId: '02',
|
|
id: '0102',
|
|
title: '蔬菜种子种苗',
|
|
children: [
|
|
{ pId: '0102', id: '010201', title: '叶菜类' },
|
|
{ pId: '0102', id: '010202', title: '根茎类' },
|
|
{ pId: '0102', id: '010203', title: '果实类' },
|
|
{ pId: '0102', id: '010204', title: '豆类' },
|
|
{ pId: '0102', id: '010205', title: '瓜类' },
|
|
],
|
|
},
|
|
{
|
|
pId: '02',
|
|
id: '0103',
|
|
title: '果树种苗',
|
|
children: [
|
|
{ pId: '0103', id: '010301', title: '柑橘类' },
|
|
{ pId: '0103', id: '010302', title: '仁果类' },
|
|
{ pId: '0103', id: '010303', title: '核果类' },
|
|
{ pId: '0103', id: '010304', title: '浆果类' },
|
|
],
|
|
},
|
|
{
|
|
pId: '02',
|
|
id: '0104',
|
|
title: '药材种子与种苗',
|
|
children: [
|
|
{ pId: '0104', id: '010401', title: '寒地龙药' },
|
|
{ pId: '0104', id: '010402', title: '常见中药材' },
|
|
],
|
|
},
|
|
{
|
|
pId: '02',
|
|
id: '0105',
|
|
title: '其他作物',
|
|
children: [
|
|
{ pId: '0105', id: '010501', title: '牧草' },
|
|
{ pId: '0105', id: '010502', title: '经济作物' },
|
|
{ pId: '0105', id: '010503', title: '观赏树木' },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
|
|
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.goods-list-warp {
|
|
width: 100%;
|
|
margin-top: 16px;
|
|
.goods-list {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
gap: 10px;
|
|
.goods-item {
|
|
display: inline-block;
|
|
width: calc((100% - 50px) / 5);
|
|
background: $color-fff;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
/* 添加伪元素占位 */
|
|
.goods-list::after {
|
|
content: '';
|
|
flex: auto;
|
|
}
|
|
}
|
|
</style>
|