Initial commit

This commit is contained in:
admin
2025-12-09 02:45:30 +08:00
commit 0bbb3d0a47
303 changed files with 22764 additions and 0 deletions

View File

@@ -0,0 +1,78 @@
const app = getApp()
Page({
data: {
projects: [],
categories: [],
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
this.fetchData();
},
fetchData() {
const { request } = require('../../utils/request')
request({ url: '/projects' })
.then((data) => {
const list = Array.isArray(data) ? data : (data && data.results) || []
this.setData({ projects: list })
})
.catch((err) => {
console.error(err)
this.setData({
projects: [
{
id: 1,
title: 'Python 数据分析实战',
category: '编程开发',
image:
'https://images.unsplash.com/photo-1526379095098-d400fd0bf935?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
students: 1205,
rating: 4.8,
duration: '12 周'
},
{
id: 2,
title: '零基础英语口语速成',
category: '语言学习',
image:
'https://images.unsplash.com/photo-1543269865-cbf427effbad?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
students: 850,
rating: 4.9,
duration: '8 周'
}
]
})
})
request({ url: '/categories' })
.then((data) => {
const list = Array.isArray(data) ? data : data
this.setData({ categories: list })
})
.catch(() => {
this.setData({
categories: [
{ name: '全部', color: 'bg-blue-100 text-blue-600' },
{ name: '编程', color: 'bg-orange-100 text-orange-600' },
{ name: '设计', color: 'bg-purple-100 text-purple-600' }
]
})
})
},
goToDetail(e) {
const id = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/detail/detail?id=${id}`,
})
}
})

View File

@@ -0,0 +1,6 @@
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#2563eb",
"navigationBarTextStyle": "white",
"usingComponents": {}
}

View File

@@ -0,0 +1,65 @@
<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>

View File

@@ -0,0 +1,224 @@
.page-container {
padding-bottom: 50rpx;
background-color: #f9fafb;
min-height: 100vh;
}
.header {
background-color: #2563eb;
padding: 40rpx 30rpx 80rpx 30rpx;
border-bottom-left-radius: 40rpx;
border-bottom-right-radius: 40rpx;
position: relative;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.greeting {
color: rgba(255, 255, 255, 0.9);
font-size: 28rpx;
}
.title {
color: white;
font-size: 40rpx;
font-weight: bold;
}
.bell-btn {
background-color: rgba(255, 255, 255, 0.2);
padding: 15rpx;
border-radius: 50%;
color: white;
font-size: 30rpx;
}
.search-bar {
position: absolute;
bottom: -40rpx;
left: 30rpx;
right: 30rpx;
background-color: white;
border-radius: 30rpx;
padding: 20rpx 30rpx;
display: flex;
align-items: center;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.search-bar input {
margin-left: 20rpx;
flex: 1;
font-size: 28rpx;
color: #374151;
}
.search-placeholder {
color: #9ca3af;
}
.content-body {
padding: 60rpx 30rpx 0 30rpx;
}
.banner {
background: linear-gradient(to right, #fb923c, #ef4444);
border-radius: 30rpx;
padding: 30rpx;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 8rpx 16rpx rgba(239, 68, 68, 0.2);
margin-bottom: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-circle {
width: 100rpx;
height: 100rpx;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
position: absolute;
right: -20rpx;
bottom: -20rpx;
filter: blur(20rpx);
}
.banner-title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.banner-desc {
font-size: 24rpx;
opacity: 0.9;
margin-bottom: 20rpx;
}
.banner-btn {
background-color: white;
color: #f97316;
font-size: 24rpx;
padding: 10rpx 24rpx;
border-radius: 30rpx;
display: inline-block;
font-weight: bold;
}
.section {
margin-bottom: 40rpx;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #1f2937;
}
.see-all {
font-size: 24rpx;
color: #9ca3af;
}
.categories-scroll {
white-space: nowrap;
width: 100%;
}
.categories-list {
display: flex;
}
.category-item {
padding: 16rpx 40rpx;
border-radius: 40rpx;
font-size: 28rpx;
margin-right: 20rpx;
font-weight: 500;
}
.projects-list {
display: flex;
flex-direction: column;
gap: 30rpx;
}
.project-card {
background-color: white;
padding: 24rpx;
border-radius: 30rpx;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: row;
gap: 24rpx;
}
.project-image {
width: 192rpx;
height: 192rpx;
border-radius: 20rpx;
flex-shrink: 0;
background-color: #eee;
}
.project-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.project-category-tag {
font-size: 20rpx;
color: #3b82f6;
background-color: #eff6ff;
padding: 4rpx 12rpx;
border-radius: 8rpx;
display: inline-block;
align-self: flex-start;
margin-bottom: 8rpx;
}
.project-title {
font-size: 28rpx;
font-weight: bold;
color: #1f2937;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-bottom: 8rpx;
}
.project-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.meta-item {
font-size: 20rpx;
color: #9ca3af;
display: flex;
align-items: center;
}
.icon {
margin-right: 4rpx;
}