66 lines
2.5 KiB
Plaintext
66 lines
2.5 KiB
Plaintext
<view class="page-container">
|
|
<!-- Header -->
|
|
<view class="header">
|
|
<view class="header-content">
|
|
<view>
|
|
<view class="greeting">你好，学员</view>
|
|
<view class="title">今天想学点什么？</view>
|
|
</view>
|
|
<view class="bell-btn">🔔</view>
|
|
</view>
|
|
|
|
<!-- Search Bar -->
|
|
<view class="search-bar">
|
|
<icon type="search" size="16" color="#9ca3af"></icon>
|
|
<input type="text" placeholder="搜索项目名称..." placeholder-class="search-placeholder"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-body">
|
|
<!-- Banner -->
|
|
<view class="banner">
|
|
<view>
|
|
<view class="banner-title">热门实训项目</view>
|
|
<view class="banner-desc">参与项目实战，提升就业能力</view>
|
|
<view class="banner-btn">立即查看</view>
|
|
</view>
|
|
<view class="banner-circle"></view>
|
|
</view>
|
|
|
|
<!-- Categories -->
|
|
<view class="section">
|
|
<view class="section-header">
|
|
<text class="section-title">热门分类</text>
|
|
<text class="see-all">查看全部</text>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="categories-scroll" enable-flex="true">
|
|
<view class="categories-list">
|
|
<block wx:for="{{categories}}" wx:key="name">
|
|
<view class="category-item" style="background-color: {{index == 0 ? '#dbeafe' : (index == 1 ? '#ffedd5' : (index == 2 ? '#f3e8ff' : '#dcfce7'))}}; color: {{index == 0 ? '#2563eb' : (index == 1 ? '#ea580c' : (index == 2 ? '#9333ea' : '#16a34a'))}}">
|
|
{{item.name}}
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- Projects -->
|
|
<view class="projects-list">
|
|
<block wx:for="{{projects}}" wx:key="id">
|
|
<view class="project-card" bindtap="goToDetail" data-id="{{item.id}}">
|
|
<image class="project-image" src="{{item.image}}" mode="aspectFill"></image>
|
|
<view class="project-info">
|
|
<view class="project-category-tag">{{item.category}}</view>
|
|
<view class="project-title">{{item.title}}</view>
|
|
<view class="project-meta">
|
|
<view class="meta-item"><text class="icon">👥</text> {{item.students}}</view>
|
|
<view class="meta-item"><text class="icon">⭐</text> {{item.rating}}</view>
|
|
<view class="meta-item"><text class="icon">🕒</text> {{item.duration}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|