liruiqiang
2 months ago
5 changed files with 917 additions and 6 deletions
-
237src/pages/category/category.vue
-
510src/pages/category/components/PageSkeleton.vue
-
138src/pages/category/styles/category.scss
-
11src/services/category.ts
-
27src/types/category.d.ts
@ -1,11 +1,236 @@ |
|||
<script setup lang="ts"> |
|||
// |
|||
</script> |
|||
|
|||
<template> |
|||
<view class="category">category</view> |
|||
<view class="viewport" v-if="isFinish"> |
|||
<!-- 搜索框 --> |
|||
<view class="search"> |
|||
<view class="input"> |
|||
<text class="icon-search">女靴</text> |
|||
</view> |
|||
</view> |
|||
<!-- 分类 --> |
|||
<view class="categories"> |
|||
<!-- 左侧：一级分类 --> |
|||
<scroll-view class="primary" scroll-y> |
|||
<view |
|||
class="item" |
|||
v-for="(item, index) in categoryList" |
|||
:key="item.id" |
|||
:class="{ active: index === activeIndex }" |
|||
@tap="activeIndex = index" |
|||
> |
|||
<text class="name"> {{ item.name }} </text> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 右侧：二级分类 --> |
|||
<scroll-view class="secondary" scroll-y> |
|||
<!-- 焦点图 --> |
|||
<XtxSwiper class="banner" :list="bannerList" /> |
|||
<!-- 内容区域 --> |
|||
<view class="panel" v-for="item in subCategoryList" :key="item.id"> |
|||
<view class="title"> |
|||
<text class="name">{{ item.name }}</text> |
|||
<navigator class="more" hover-class="none">全部</navigator> |
|||
</view> |
|||
<view class="section"> |
|||
<navigator |
|||
v-for="goods in item.goods" |
|||
:key="goods.id" |
|||
class="goods" |
|||
hover-class="none" |
|||
:url="`/pages/goods/goods?id=${goods.id}`" |
|||
> |
|||
<image class="image" :src="goods.picture"></image> |
|||
<view class="name ellipsis">{{ goods.name }}</view> |
|||
<view class="price"> |
|||
<text class="symbol">¥</text> |
|||
<text class="number">{{ goods.price }}</text> |
|||
</view> |
|||
</navigator> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
<PageSkeleton v-else /> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, ref } from 'vue' |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import type { BannerItem } from '@/types/home' |
|||
import type { CategoryTopItem } from '@/types/category' |
|||
import { getHomeBannerAPI } from '@/services/home' |
|||
import { getCategoryTopAPI } from '@/services/category' |
|||
import PageSkeleton from './components/PageSkeleton.vue' |
|||
|
|||
// 获取轮播图数据 |
|||
const bannerList = ref<BannerItem[]>([]) |
|||
const getBannerData = async () => { |
|||
const res = await getHomeBannerAPI(2) |
|||
bannerList.value = res.result |
|||
} |
|||
|
|||
// 获取分类列表数据 |
|||
const categoryList = ref<CategoryTopItem[]>([]) |
|||
const getCategoryTopData = async () => { |
|||
const res = await getCategoryTopAPI() |
|||
categoryList.value = res.result |
|||
} |
|||
|
|||
// 高亮下标 |
|||
const activeIndex = ref(0) |
|||
|
|||
// 提取当前二级分类数据 |
|||
const subCategoryList = computed(() => { |
|||
return categoryList.value[activeIndex.value]?.children || [] |
|||
}) |
|||
|
|||
// 是否数据加载完毕 |
|||
const isFinish = ref(false) |
|||
|
|||
// 页面加载 |
|||
onLoad(async () => { |
|||
await Promise.all([getBannerData(), getCategoryTopData()]) |
|||
isFinish.value = true |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
// |
|||
page { |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
.viewport { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.search { |
|||
padding: 0 30rpx 20rpx; |
|||
background-color: #fff; |
|||
.input { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 64rpx; |
|||
padding-left: 26rpx; |
|||
color: #8b8b8b; |
|||
font-size: 28rpx; |
|||
border-radius: 32rpx; |
|||
background-color: #f3f4f4; |
|||
} |
|||
} |
|||
.icon-search { |
|||
&::before { |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
/* 分类 */ |
|||
.categories { |
|||
flex: 1; |
|||
min-height: 400rpx; |
|||
display: flex; |
|||
} |
|||
/* 一级分类 */ |
|||
.primary { |
|||
overflow: hidden; |
|||
width: 180rpx; |
|||
flex: none; |
|||
background-color: #f6f6f6; |
|||
.item { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 96rpx; |
|||
font-size: 26rpx; |
|||
color: #595c63; |
|||
position: relative; |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 42rpx; |
|||
bottom: 0; |
|||
width: 96rpx; |
|||
border-top: 1rpx solid #e3e4e7; |
|||
} |
|||
} |
|||
.active { |
|||
background-color: #fff; |
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 8rpx; |
|||
height: 100%; |
|||
background-color: #27ba9b; |
|||
} |
|||
} |
|||
} |
|||
.primary .item:last-child::after, |
|||
.primary .active::after { |
|||
display: none; |
|||
} |
|||
/* 二级分类 */ |
|||
.secondary { |
|||
background-color: #fff; |
|||
.carousel { |
|||
height: 200rpx; |
|||
margin: 0 30rpx 20rpx; |
|||
border-radius: 4rpx; |
|||
overflow: hidden; |
|||
} |
|||
.panel { |
|||
margin: 0 30rpx 0rpx; |
|||
} |
|||
.title { |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
border-bottom: 1rpx solid #f7f7f8; |
|||
.more { |
|||
float: right; |
|||
padding-left: 20rpx; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
.more { |
|||
&::after { |
|||
font-family: 'erabbit' !important; |
|||
content: '\e6c2'; |
|||
} |
|||
} |
|||
.section { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 20rpx 0; |
|||
.goods { |
|||
width: 150rpx; |
|||
margin: 0rpx 30rpx 20rpx 0; |
|||
&:nth-child(3n) { |
|||
margin-right: 0; |
|||
} |
|||
image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
.name { |
|||
padding: 5rpx; |
|||
font-size: 22rpx; |
|||
color: #333; |
|||
} |
|||
.price { |
|||
padding: 5rpx; |
|||
font-size: 18rpx; |
|||
color: #cf4444; |
|||
} |
|||
.number { |
|||
font-size: 24rpx; |
|||
margin-left: 2rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,510 @@ |
|||
<template name="skeleton"> |
|||
<view class="sk-container"> |
|||
<view class="viewport"> |
|||
<view class="search"> |
|||
<view class="input"> |
|||
<text |
|||
class="icon-search sk-transparent sk-text-14-2857-225 sk-text sk-pseudo sk-pseudo-circle" |
|||
>女靴</text |
|||
> |
|||
</view> |
|||
</view> |
|||
<view class="categories"> |
|||
<scroll-view :scroll-y="true" class="primary"> |
|||
<view class="item active sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-218 sk-text">居家</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-495 sk-text">美食</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-628 sk-text">服饰</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-163 sk-text">母婴</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-690 sk-text">个护</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-302 sk-text">严选</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-730 sk-text">数码</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-584 sk-text">运动</text> |
|||
</view> |
|||
<view class="item sk-pseudo sk-pseudo-circle"> |
|||
<text class="name sk-transparent sk-text-14-2857-895 sk-text">杂项</text> |
|||
</view> |
|||
</scroll-view> |
|||
<scroll-view :scroll-y="true" class="secondary"> |
|||
<view is="components/XtxSwiper" class="banner"> |
|||
<view class="carousel XtxSwiper--carousel"> |
|||
<view class="indicator XtxSwiper--indicator"> |
|||
<text class="dot XtxSwiper--dot active XtxSwiper--active"></text> |
|||
<text class="dot XtxSwiper--dot"></text> |
|||
<text class="dot XtxSwiper--dot"></text> |
|||
<text class="dot XtxSwiper--dot"></text> |
|||
<text class="dot XtxSwiper--dot"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="panel"> |
|||
<view class="title"> |
|||
<text class="name sk-transparent sk-text-26-6667-885 sk-text">居家生活用品</text> |
|||
<navigator |
|||
class="more sk-transparent sk-text-30-0000-892 sk-text sk-pseudo sk-pseudo-circle" |
|||
hover-class="none" |
|||
>全部</navigator |
|||
> |
|||
</view> |
|||
<view class="section"> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-648 sk-text" |
|||
>极光限定 珠光蓝珐琅锅</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-708 sk-text">199.00</text> |
|||
</view> |
|||
</navigator> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-832 sk-text" |
|||
>钻石陶瓷涂层多用锅18cm 小奶锅</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-349 sk-text">149.00</text> |
|||
</view> |
|||
</navigator> |
|||
</view> |
|||
</view> |
|||
<view class="panel"> |
|||
<view class="title"> |
|||
<text class="name sk-transparent sk-text-26-6667-486 sk-text">收纳</text> |
|||
<navigator |
|||
class="more sk-transparent sk-text-30-0000-520 sk-text sk-pseudo sk-pseudo-circle" |
|||
hover-class="none" |
|||
>全部</navigator |
|||
> |
|||
</view> |
|||
<view class="section"> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-582 sk-text" |
|||
>开发员自留款，带滚轮双层脏衣篓</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-938 sk-text">125.00</text> |
|||
</view> |
|||
</navigator> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-108 sk-text" |
|||
>换季好帮手，大容量防尘衣物收纳袋</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-564 sk-text">69.00</text> |
|||
</view> |
|||
</navigator> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-507 sk-text" |
|||
>可水洗的布艺收纳盒</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-503 sk-text">29.90</text> |
|||
</view> |
|||
</navigator> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-75 sk-text" |
|||
>爆款明星好物，抽屉式透明储物柜</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-965 sk-text">129.00</text> |
|||
</view> |
|||
</navigator> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-71 sk-text" |
|||
>给衣柜减减肥，真空防潮压缩袋</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-530 sk-text">79.00</text> |
|||
</view> |
|||
</navigator> |
|||
<navigator class="goods" hover-class="none"> |
|||
<image class="image sk-image"></image> |
|||
<view class="name ellipsis sk-transparent sk-text-14-2857-151 sk-text" |
|||
>拉开抽屉不凌乱，磨砂抽屉整理盒套装</view |
|||
> |
|||
<view class="price"> |
|||
<text class="symbol sk-transparent sk-opacity">¥</text> |
|||
<text class="number sk-transparent sk-text-14-2857-641 sk-text">49.00</text> |
|||
</view> |
|||
</navigator> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style lang="scss"> |
|||
/* #ifdef H5 || APP-PLUS */ |
|||
/* 修复 H5 端骨架屏样式异常 */ |
|||
@import '@/components/styles/XtxSwiper.scss'; |
|||
@import '../styles/category.scss'; |
|||
/* #endif */ |
|||
.sk-transparent { |
|||
color: transparent !important; |
|||
} |
|||
.sk-text-14-2857-225 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 39.2rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text { |
|||
background-origin: content-box !important; |
|||
background-clip: content-box !important; |
|||
background-color: transparent !important; |
|||
color: transparent !important; |
|||
background-repeat: repeat-y !important; |
|||
} |
|||
.sk-text-14-2857-218 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-495 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-628 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-163 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-690 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-302 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-730 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-584 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-895 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 36.4rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-26-6667-885 { |
|||
background-image: linear-gradient( |
|||
transparent 26.6667%, |
|||
#eeeeee 0%, |
|||
#eeeeee 73.3333%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 60rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-30-0000-892 { |
|||
background-image: linear-gradient( |
|||
transparent 30%, |
|||
#eeeeee 0%, |
|||
#eeeeee 70%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 60rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-648 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-opacity { |
|||
opacity: 0 !important; |
|||
} |
|||
.sk-text-14-2857-708 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-832 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-349 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-26-6667-486 { |
|||
background-image: linear-gradient( |
|||
transparent 26.6667%, |
|||
#eeeeee 0%, |
|||
#eeeeee 73.3333%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 60rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-30-0000-520 { |
|||
background-image: linear-gradient( |
|||
transparent 30%, |
|||
#eeeeee 0%, |
|||
#eeeeee 70%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 60rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-582 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-938 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-108 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-564 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-507 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-503 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-75 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-965 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-71 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-530 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-151 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 30.8rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-text-14-2857-641 { |
|||
background-image: linear-gradient( |
|||
transparent 14.2857%, |
|||
#eeeeee 0%, |
|||
#eeeeee 85.7143%, |
|||
transparent 0% |
|||
) !important; |
|||
background-size: 100% 33.6rpx; |
|||
position: relative !important; |
|||
} |
|||
.sk-image { |
|||
background: #efefef !important; |
|||
} |
|||
.sk-pseudo::before, |
|||
.sk-pseudo::after { |
|||
background: #efefef !important; |
|||
background-image: none !important; |
|||
color: transparent !important; |
|||
border-color: transparent !important; |
|||
} |
|||
.sk-pseudo-rect::before, |
|||
.sk-pseudo-rect::after { |
|||
border-radius: 0 !important; |
|||
} |
|||
.sk-pseudo-circle::before, |
|||
.sk-pseudo-circle::after { |
|||
border-radius: 50% !important; |
|||
} |
|||
.sk-container { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: transparent; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,138 @@ |
|||
page { |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
.viewport { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.search { |
|||
padding: 20rpx 30rpx; |
|||
background-color: #fff; |
|||
.input { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 64rpx; |
|||
padding-left: 26rpx; |
|||
color: #8b8b8b; |
|||
font-size: 28rpx; |
|||
border-radius: 32rpx; |
|||
background-color: #f3f4f4; |
|||
} |
|||
} |
|||
.icon-search { |
|||
&::before { |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
/* 分类 */ |
|||
.categories { |
|||
flex: 1; |
|||
min-height: 400rpx; |
|||
display: flex; |
|||
} |
|||
/* 一级分类 */ |
|||
.primary { |
|||
overflow: hidden; |
|||
width: 180rpx; |
|||
flex: none; |
|||
background-color: #f6f6f6; |
|||
.item { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 96rpx; |
|||
font-size: 26rpx; |
|||
color: #595c63; |
|||
position: relative; |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 42rpx; |
|||
bottom: 0; |
|||
width: 96rpx; |
|||
border-top: 1rpx solid #e3e4e7; |
|||
} |
|||
} |
|||
.active { |
|||
background-color: #fff; |
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 8rpx; |
|||
height: 100%; |
|||
background-color: #27ba9b; |
|||
} |
|||
} |
|||
} |
|||
.primary .item:last-child::after, |
|||
.primary .active::after { |
|||
display: none; |
|||
} |
|||
/* 二级分类 */ |
|||
.secondary { |
|||
background-color: #fff; |
|||
.carousel { |
|||
height: 200rpx; |
|||
margin: 0 30rpx 20rpx; |
|||
border-radius: 4rpx; |
|||
overflow: hidden; |
|||
} |
|||
.panel { |
|||
margin: 0 30rpx 0rpx; |
|||
} |
|||
.title { |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
border-bottom: 1rpx solid #f7f7f8; |
|||
.more { |
|||
float: right; |
|||
padding-left: 20rpx; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
.more { |
|||
&::after { |
|||
font-family: 'erabbit' !important; |
|||
content: '\e6c2'; |
|||
} |
|||
} |
|||
.section { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 20rpx 0; |
|||
.goods { |
|||
width: 150rpx; |
|||
margin: 0rpx 20rpx 20rpx 0; |
|||
&:nth-child(3n) { |
|||
margin-right: 0; |
|||
} |
|||
.image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
.name { |
|||
padding: 5rpx; |
|||
font-size: 22rpx; |
|||
color: #333; |
|||
} |
|||
.price { |
|||
padding: 5rpx; |
|||
font-size: 18rpx; |
|||
color: #cf4444; |
|||
} |
|||
.number { |
|||
font-size: 24rpx; |
|||
margin-left: 2rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
import { http } from '@/utils/http' |
|||
import type { CategoryTopItem } from '@/types/category' |
|||
/** |
|||
* 分类列表-小程序 |
|||
*/ |
|||
export const getCategoryTopAPI = () => { |
|||
return http<CategoryTopItem[]>({ |
|||
method: 'GET', |
|||
url: '/category/top', |
|||
}) |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
import type { GoodsItem } from './global' |
|||
|
|||
/** 一级分类项 */ |
|||
export type CategoryTopItem = { |
|||
/** 二级分类集合[ 二级分类项 ] */ |
|||
children: CategoryChildItem[] |
|||
/** 一级分类id */ |
|||
id: string |
|||
/** 一级分类图片集[ 一级分类图片项 ] */ |
|||
imageBanners: string[] |
|||
/** 一级分类名称 */ |
|||
name: string |
|||
/** 一级分类图片 */ |
|||
picture: string |
|||
} |
|||
|
|||
/** 二级分类项 */ |
|||
export type CategoryChildItem = { |
|||
/** 商品集合[ 商品项 ] */ |
|||
goods: GoodsItem[] |
|||
/** 二级分类id */ |
|||
id: string |
|||
/** 二级分类名称 */ |
|||
name: string |
|||
/** 二级分类图片 */ |
|||
picture: string |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue