xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 商品分类：second-one 样式接入完成

Browse Source
This commit is contained in:
YunaiV
2023-12-10 20:46:11 +08:00
parent 3d4f7e9a09
commit e971e09593
3 changed files with 23 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/components/second-one.vue
+13 -11
View File
@@ -1,23 +1,25 @@
<!-- 页面 -->
<!-- 分类展示：second-one 风格 -->
<template>
<view>
<!-- 一级分类的名字 -->
<view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
<view class="title-line-left"></view>
<view class="title-line-left" />
<view class="title-text ss-p-x-20">{{ props.data.children[activeMenu].name }}</view>
<view class="title-line-right"></view>
<view class="title-line-right" />
</view>
<!-- 二级分类的名字 -->
<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
<view
class="goods-item"
v-for="item in props.data.children[activeMenu].children"
:key="item.id"
@tap="
sheep.$router.go('/pages/goods/list', {
categoryId: item.id,
})
"
@tap="
sheep.$router.go('/pages/goods/list', {
categoryId: item.id,
})
"
>
<image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFill"></image>
<image class="goods-img" :src="item.picUrl" mode="aspectFill" />
<view class="ss-p-10">
<view class="goods-title ss-line-1">{{ item.name }}</view>
</view>
@@ -28,13 +30,13 @@
<script setup>
import sheep from '@/sheep';
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
activeMenu: [Number, String],
pagination: Object,
activeMenu: [Number, String]
});
</script>
pages/index/components/third-one.vue
-92
View File
@@ -1,92 +0,0 @@
<!-- 页面 -->
<template>
<view>
<view v-for="item in props.data.children[activeMenu].children" :key="item.id">
<view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
<view class="title-text">{{ item.name }}</view>
<button
class="ss-reset-button more-btn"
@tap="
sheep.$router.go('/pages/goods/list', {
categoryId: item.id,
})
"
>
查看更多
<text class="cicon-forward"></text>
</button>
</view>
<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
<view class="goods-item" v-for="i in item.children" :key="i">
<view
@tap="
sheep.$router.go('/pages/goods/list', {
categoryId: i.id,
})
"
>
<image class="goods-img" :src="sheep.$url.cdn(i.image)" mode="aspectFill"></image>
<view class="ss-p-10">
<view class="goods-title ss-line-1">{{ i.name }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
activeMenu: [Number, String],
pagination: Object,
});
</script>
<style lang="scss" scoped>
.title-box {
.title-text {
font-size: 28rpx;
font-weight: bold;
color: #333333;
}
.more-btn {
font-size: 26rpx;
font-weight: 400;
color: #999999;
}
}
.goods-item {
width: calc((100% - 20px) / 3);
margin-right: 10px;
margin-bottom: 10px;
&:nth-of-type(3n) {
margin-right: 0;
}
.goods-img {
width: calc((100vw - 140px) / 3);
height: calc((100vw - 140px) / 3);
}
.goods-title {
font-size: 24rpx;
font-weight: 500;
color: #333333;
text-align: center;
}
.goods-price {
color: $red;
line-height: 40rpx;
}
}
</style>