86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<common current-name="agricultural">
|
||
|
|
<template #main>
|
||
|
|
<banner :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: '农具' },
|
||
|
|
{ pId: '01', id: '0102', title: '农机' },
|
||
|
|
{ pId: '01', id: '0103', title: '灌溉设备' },
|
||
|
|
{ pId: '01', id: '0104', title: '防护用品' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '02',
|
||
|
|
title: '肥料',
|
||
|
|
children: [
|
||
|
|
{ pId: '02', id: '0101', title: '有机肥' },
|
||
|
|
{ pId: '02', id: '0102', title: '水溶肥' },
|
||
|
|
{ pId: '02', id: '0103', title: '天然肥料' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '03',
|
||
|
|
title: '农药',
|
||
|
|
children: [
|
||
|
|
{ pId: '03', id: '0101', title: '杀虫剂' },
|
||
|
|
{ pId: '03', id: '0102', title: '杀菌剂' },
|
||
|
|
{ pId: '03', id: '0103', title: '除草剂' },
|
||
|
|
{ pId: '03', id: '0104', title: '杀螨剂' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.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>
|