admin/qingcheng-xiaochengxu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化了样式

Browse Source
This commit is contained in:
chen-xin-zhi
2025-08-15 00:36:04 +08:00
parent 5fc1378051
commit 1b4d3e310b
63 changed files with 2735 additions and 2411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
pages/course/homepage/homepage.wxml
View File

@ -1,50 +1,64 @@
<view class="flex-col page">
<view class="flex-col self-stretch group">
<view class="flex-row justify-center items-center section" bind:tap="gotoSearch">
<image class="image" src="./image/sousuo.png" />
<text class="text ml-3">搜索更多好课</text>
</view>
<swiper class="swiper" autoplay="true" circular="true" interval="3000" circular="true">
<block wx:for="{{banners}}" wx:for-item="img" wx:key="index">
<swiper-item>
<image src="{{img}}" class="swiper-image" mode="aspectFill" />
</swiper-item>
</block>
</swiper>
<view class="page">
<!-- 顶部内容：搜索 + 轮播 -->
<view class="top">
<view class="search-bar" bindtap="gotoSearch" hover-class="hover">
<image class="search-icon" src="./image/sousuo.png" mode="aspectFit"/>
<text class="search-text">搜索更多好课</text>
</view>
<view class="flex-row equal-division">
<view class="flex-col items-center group_2 group_1" bind:tap="gotoCourseList" data-type="{{ '考编' }}">
<image class="image_3" src="./image/kgky.png" />
<text class="font text_1 mt-12">考编</text>
</view>
<view class="flex-col items-center group_2 group_3" bind:tap="gotoCourseList" data-type="{{ '考公' }}">
<image class="image_3" src="./image/zmt.png" />
<text class="font text_3 mt-12">考公</text>
</view>
<view class="flex-col items-center group_2 group_4" bind:tap="gotoCourseList" data-type="{{ '考证' }}">
<image class="image_3" src="./image/cj.png" />
<text class="font text_4 mt-12">考证</text>
</view>
<swiper class="swiper" autoplay="true" interval="3000" circular="true" indicator-dots="true" indicator-active-color="#ff6a00">
<block wx:for="{{banners}}" wx:for-item="img" wx:key="index">
<swiper-item>
<image src="{{img}}" class="swiper-image" mode="aspectFill" lazy-load="true"/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 三分类 -->
<view class="category-row">
<view class="category-card" bindtap="gotoCourseList" data-type="考编" hover-class="hover">
<image class="category-icon" src="./image/考编.png" mode="aspectFit" lazy-load="true"/>
<text class="category-text">考编</text>
</view>
<text class="self-start text_2">热门课程</text>
<view class="flex-col self-stretch list">
<!-- items 数组循环 -->
<view class="flex-row relative group_5" wx:for="{{courseList}}" wx:for-item="item" wx:for-index="index" wx:key="item.id">
<view bind:tap="gotoCourseDetail" data-id="{{item.id}}">
<view class="list-divider pos_3"></view>
<!-- 绑定课程封面图 -->
<image class="image_4 pos" src="{{ globalImgUrl + item.image}}" />
<view class="flex-col group_6 pos_2">
<!-- 绑定课程名称 -->
<text class="font_2">{{item.name}}</text>
<view class="flex-row justify-between items-baseline mt-17">
<!-- 绑定卷后价格 -->
<text class="font_3">券后{{item.discountPrice}}元起</text>
<!-- 绑定下单/学习人数 -->
<text class="font_4">{{item.orderCount}}人学习</text>
<view class="category-card" bindtap="gotoCourseList" data-type="考公" hover-class="hover">
<image class="category-icon" src="./image/考公.png" mode="aspectFit" lazy-load="true"/>
<text class="category-text">考公</text>
</view>
<view class="category-card" bindtap="gotoCourseList" data-type="考证" hover-class="hover">
<image class="category-icon" src="./image/考证.png" mode="aspectFit" lazy-load="true"/>
<text class="category-text">考证</text>
</view>
</view>
<!-- 热门课程标题 -->
<view class="section-head">
<text class="section-title">热门课程</text>
</view>
<!-- 热门课程两列宫格 -->
<scroll-view scroll-y class="list no-scrollbar">
<view class="grid">
<block wx:for="{{courseList}}" wx:key="item.id" wx:for-item="item">
<view class="grid-item" bindtap="gotoCourseDetail" data-id="{{item.id}}" hover-class="hover">
<image class="grid-cover" src="{{ globalImgUrl + item.image }}" mode="aspectFill" lazy-load="true"/>
<view class="grid-info">
<text class="grid-title">{{item.name}}</text>
<view class="grid-meta">
<text class="grid-price">¥{{item.discountPrice}}</text>
<text class="grid-people">{{item.orderCount}}人学习</text>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
<!-- 空状态 -->
<view wx:if="{{!courseList || courseList.length === 0}}" class="empty">
<image class="empty-icon" src="./image/empty.png" mode="aspectFit"/>
<text class="empty-text">暂无课程，去看看其他分类吧～</text>
</view>
</scroll-view>
</view>