|
|
@@ -7,30 +7,65 @@
|
|
|
}
|
|
|
</route>
|
|
|
<template>
|
|
|
- <view style="border-top: 2rpx solid #f2f2f2" class="flex justify-between flex-wrap">
|
|
|
- <view class="w-183rpx">
|
|
|
+ <view
|
|
|
+ style="height: 100vh; border-top: 2rpx solid #f2f2f2"
|
|
|
+ class="flex justify-between box-border"
|
|
|
+ >
|
|
|
+ <view class="w-183rpx box-border h-full overflow-auto bg-[#F2F2F2] pb-144rpx">
|
|
|
<view
|
|
|
- v-for="(i, idx) in 10"
|
|
|
+ v-for="(i, idx) in 30"
|
|
|
:key="i"
|
|
|
- :class="`${idx === categoryIndex ? ' after:w-28rpx after:h-6rpx text-[#FF4C1B] bg-white' : 'bg-[#F2F2F2]'} w-full truncate box-border p-32rpx text-28rpx`"
|
|
|
+ @click="handleSelectItem(idx, [])"
|
|
|
+ :class="`relative w-full box-border p-32rpx h-[108rpx] text-28rpx ${idx === categoryIndex ? ' text-[#FF4C1B] bg-white font-600' : 'bg-[#F2F2F2] font-400'}`"
|
|
|
>
|
|
|
- Luggage {{ i }}
|
|
|
+ <view class="truncate">7{{ i }}Luggage</view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ v-if="idx === categoryIndex"
|
|
|
+ class="absolute top-1/2 left-0 -translate-y-1/2 w-6rpx h-28rpx bg-[#FF4C1B] rounded-full"
|
|
|
+ ></view>
|
|
|
+ <image
|
|
|
+ v-if="idx === categoryIndex && categoryIndex != 0"
|
|
|
+ class="absolute right-0 -top-18rpx w-18rpx z-20 h-18rpx object-cover"
|
|
|
+ src="@/static/images/category/suffix.svg"
|
|
|
+ mode="widthFix"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ v-if="idx === categoryIndex"
|
|
|
+ class="absolute right-0 -bottom-18rpx z-20 w-18rpx h-18rpx object-cover"
|
|
|
+ src="@/static/images/category/prefix.svg"
|
|
|
+ mode="widthFix"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view style="width: calc(100vw - 183rpx)" class="box-border px-16rpx pt-24rpx">
|
|
|
+ <view style="width: calc(100vw - 183rpx)" class="box-border px-32rpx pt-24rpx overflow-auto">
|
|
|
<view
|
|
|
- class="flex justify-start items-center box-border px-24rpx py-20rpx rounded-full border-1rpx border-solid border-[#F2F2F2]"
|
|
|
+ class="flex justify-start h-72rpx items-center box-border px-24rpx rounded-full border-2rpx border-solid border2 mb-32rpx"
|
|
|
>
|
|
|
<image class="w-32rpx h-32rpx object-cover" :src="search" mode="widthFix" alt="" />
|
|
|
|
|
|
- <view class="ml-20rpx text-28rpx text-[#999]">{{ t('category.search') }}</view>
|
|
|
+ <text class="ml-20rpx text-28rpx text-[#999]">{{ t('category.search') }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ style="height: calc(100vh - 72rpx - 24rpx - 32rpx)"
|
|
|
+ class="category-list box-border w-full flex"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in 50"
|
|
|
+ :key="index"
|
|
|
+ @click="goToDlite('1')"
|
|
|
+ class="bg-white w-full"
|
|
|
+ >
|
|
|
+ <view class="w-110rpx h-110rpx mx-auto mb-16rpx">
|
|
|
+ <image class="w-full" :src="search" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="line-clamp-1 overflow-hidden">Women's sports shoes</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <wd-row :gutter="20">
|
|
|
- <wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
|
|
|
- <wd-col :span="8"><view class="bg-light">span: 8</view></wd-col>
|
|
|
- <wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
|
|
|
- </wd-row>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -39,10 +74,24 @@
|
|
|
import { t } from '@/locale'
|
|
|
import search from '@/static/images/category/search.svg'
|
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
-
|
|
|
+ type childrenObj = {
|
|
|
+ name: string
|
|
|
+ imageUrl: string
|
|
|
+ }
|
|
|
const categoryIndex = ref(0)
|
|
|
+ const categoryChildrenList = ref([])
|
|
|
+
|
|
|
+ function handleSelectItem(idx: number, children: Array<childrenObj>) {
|
|
|
+ categoryIndex.value = idx
|
|
|
+ categoryChildrenList.value = children
|
|
|
+ }
|
|
|
+
|
|
|
+ function goToDlite(uid: string) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index',
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
- function handleChange() {}
|
|
|
onLoad(() => {
|
|
|
console.log('分类')
|
|
|
console.log(safeAreaInsets, 'safeAreaInsets')
|
|
|
@@ -50,4 +99,22 @@
|
|
|
|
|
|
onMounted(() => {})
|
|
|
</script>
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .category-list {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: repeat(auto-fill, minmax(192rpx, 1fr)); /* 自动填充行，每行高度为 192rpx */
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ grid-auto-flow: row; /* 确保项目会填充所有的网格单元 */
|
|
|
+ grid-gap: 24rpx 32rpx;
|
|
|
+ }
|
|
|
+ /* 添加额外的空白行 */
|
|
|
+ .category-list::after {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ height: 144rpx; /* 额外的空行高度 */
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+
|
|
|
+ .border2 {
|
|
|
+ border-color: $shop-bg-line;
|
|
|
+ }
|
|
|
+</style>
|
