joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成首页修改

Browse Source
This commit is contained in:
R524809
2026-04-30 18:02:11 +08:00
parent 44182d011d
commit 50394154f7
3 changed files with 89 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/home/home.less
+27 -12
View File
@@ -45,29 +45,44 @@
}
.home-tabs-wrap {
margin-top: @section-gap;
margin-top: 48rpx;
}
.home-hero-placeholder {
margin: @section-gap @page-padding-x 0;
height: 480rpx;
height: 450rpx;
border-radius: 40rpx;
background: rgba(50, 46, 37, 0.04);
}
/** 首页顶部「精选」横滑行（与下方模块 track 列表的 .home-track-row 区分） */
.home-hero-row {
display: inline-flex;
flex-direction: row;
gap: @section-gap-sm;
padding: 24rpx @page-padding-x;
/** 首页顶部「精选」swiper 轮播 */
.home-hero-swiper {
margin-top: 16rpx;
width: 100%;
height: 450rpx;
}
.home-hero-swiper-item {
box-sizing: border-box;
}
.home-hero-card-wrap {
padding: 24rpx;
box-sizing: border-box;
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: scale(0.9);
opacity: 0.5;
}
.home-hero-card-wrap--active {
transform: scale(1);
opacity: 1;
}
.home-hero-card {
width: 560rpx;
flex-shrink: 0;
width: 100%;
border-radius: 32rpx;
/* 让阴影不被自身 overflow: hidden 裁切 */
overflow: visible;
background: #ffffff;
box-shadow: 0 10rpx 28rpx rgba(50, 46, 37, 0.08);
@@ -118,7 +133,7 @@
.home-hero-card__title-row {
display: flex;
flex-direction: row;
align-items: baseline;
align-items: center;
justify-content: space-between;
gap: 16rpx;
/* 允许 flex 子项在文本过长时正确截断 */
miniprogram/pages/home/home.ts
+5
View File
@@ -145,6 +145,7 @@ Page({
activeTab: 'all',
ageBands: [] as HomeAgeBandView[],
activeAgeBand: '3-4' as AgeBandKey,
heroSwiperCurrent: 0,
featuredItems: SKELETON_FEATURED,
hotRecommends: SKELETON_HOT,
sections: [] as HomeDisplaySectionView[],
@@ -197,6 +198,10 @@ Page({
// ── Tab & Navigation ──
onHeroSwiperChange(e: WechatMiniprogram.SwiperChange) {
this.setData({ heroSwiperCurrent: e.detail.current });
},
onTabChange(e: WechatMiniprogram.CustomEvent) {
const id = e.detail.id as string | undefined;
if (!id) return;
miniprogram/pages/home/home.wxml
+57 -42
View File
@@ -2,7 +2,7 @@
<nav-bar title="" />
<view class="home-body">
<view class="home-search-wrap">
<!-- <view class="home-search-wrap">
<view class="home-search">
<van-icon
name="search"
@@ -13,7 +13,7 @@
>{{searchPlaceholder}}</text
>
</view>
</view>
</view> -->
<view class="home-tabs-wrap">
<category-tabs
@@ -22,50 +22,63 @@
bind:change="onTabChange" />
</view>
<scroll-view class="home-track-scroll" scroll-x enable-flex>
<view class="home-hero-row">
<swiper
class="home-hero-swiper"
previous-margin="100rpx"
next-margin="100rpx"
circular="{{featuredItems.length > 1 && !loading}}"
autoplay="{{!loading}}"
interval="{{4000}}"
duration="{{600}}"
easing-function="easeInOutCubic"
bindchange="onHeroSwiperChange">
<swiper-item
wx:for="{{featuredItems}}"
wx:key="id"
class="home-hero-swiper-item">
<view
wx:for="{{featuredItems}}"
wx:key="id"
class="home-hero-card {{item.skeleton ? 'home-hero-card--skeleton' : ''}}"
data-title="{{item.title}}"
data-path="{{item.path}}"
bindtap="{{item.skeleton ? '' : 'onTapFeatured'}}">
<view class="home-hero-card__top">
<image
wx:if="{{!item.skeleton && item.previewImg}}"
class="home-hero-card__cover"
src="{{item.previewImg}}"
mode="aspectFill" />
<text
wx:if="{{!item.skeleton && !item.previewImg}}"
class="home-hero-card__icon"
>{{item.icon}}</text
>
<text
wx:if="{{item.badge}}"
class="home-hero-card__badge"
>{{item.badge}}</text
>
</view>
<view class="home-hero-card__body">
<view class="home-hero-card__title-row">
<text class="home-hero-card__title"
>{{item.title}}</text
class="home-hero-card-wrap {{heroSwiperCurrent === index ? 'home-hero-card-wrap--active' : ''}}">
<view
class="home-hero-card {{item.skeleton ? 'home-hero-card--skeleton' : ''}}"
data-title="{{item.title}}"
data-path="{{item.path}}"
bindtap="{{item.skeleton ? '' : 'onTapFeatured'}}">
<view class="home-hero-card__top">
<image
wx:if="{{!item.skeleton && item.previewImg}}"
class="home-hero-card__cover"
src="{{item.previewImg}}"
mode="aspectFill" />
<text
wx:if="{{!item.skeleton && !item.previewImg}}"
class="home-hero-card__icon"
>{{item.icon}}</text
>
<text
wx:if="{{!item.skeleton}}"
class="home-hero-card__meta"
>{{item.ageBand}} · {{item.difficulty}}</text
wx:if="{{item.badge}}"
class="home-hero-card__badge"
>{{item.badge}}</text
>
</view>
<view class="home-hero-card__body">
<view class="home-hero-card__title-row">
<text class="home-hero-card__title"
>{{item.title}}</text
>
<text
wx:if="{{!item.skeleton}}"
class="home-hero-card__meta"
>{{item.ageBand}}·{{item.difficulty}}</text
>
</view>
<text class="home-hero-card__sub"
>{{item.subtitle}}</text
>
</view>
<text class="home-hero-card__sub"
>{{item.subtitle}}</text
>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<view class="home-section-panel">
<view class="home-section-head">
@@ -141,9 +154,11 @@
</view>
<view
wx:if="{{!item.skeleton}}"
class="home-hot-card__action"
>
<toy-icon name="arrow-right" size="36rpx" color="#2b2b2b" />
class="home-hot-card__action">
<toy-icon
name="arrow-right"
size="36rpx"
color="#2b2b2b" />
</view>
</view>
</view>