Commit 55fd03cc by zhengxiao

feat(custom): 新增首页

parent 631af7bf
<template>
<view class="section-block">
<view class="block-header">
<view class="left">
<text class="title">{{ title }}</text>
<text class="desc">{{ subtitle }}</text>
</view>
<view class="study-count">{{ studyCount }}万人已学习</view>
</view>
<view class="course-list">
<view
class="course-item"
v-for="(item, index) in showCourseList"
:key="index"
>
<image
class="course-img"
:src="item.image || '/static/images/course-placeholder.png'"
mode="aspectFill"
/>
<view class="course-info">
<view class="course-title">{{item.title}}</view>
<view class="course-desc">{{item.desc}}</view>
<view class="course-meta">
<text class="enroll-count">{{item.enrollCount}}人已报名</text>
<button class="study-btn">去学习</button>
</view>
</view>
</view>
</view>
<view v-if="courseList.length > 2" class="show-more" @tap="toggleShowMore">
<text>{{isExpanded ? '收起合集' : '展开更多'}}</text>
<text :class="['arrow', isExpanded ? 'up' : '']"></text>
</view>
</view>
</template>
<script>
export default {
name: 'CourseBlock',
props: {
title: {
type: String,
required: true
},
subtitle: {
type: String,
required: true
},
studyCount: {
type: Number,
required: true
},
courseList: {
type: Array,
default: () => []
}
},
data() {
return {
isExpanded: false
}
},
computed: {
showCourseList() {
return this.isExpanded ? this.courseList : this.courseList.slice(0, 2)
}
},
methods: {
toggleShowMore() {
this.isExpanded = !this.isExpanded
}
}
}
</script>
<style lang="scss">
.section-block {
margin: 20rpx;
padding: 30rpx;
background: #fff;
border-radius: 16rpx;
.block-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24rpx;
.left {
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 8rpx;
display: block;
}
.desc {
font-size: 24rpx;
color: #999;
}
}
.study-count {
font-size: 24rpx;
color: #999;
background: #F5F6F8;
padding: 8rpx 16rpx;
border-radius: 20rpx;
}
}
.course-list {
.course-item {
display: flex;
padding: 24rpx 0;
border-bottom: 1rpx solid #EBEDF0;
&:last-child {
border-bottom: none;
}
.course-img {
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
margin-right: 20rpx;
background: #F5F6F8;
}
.course-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.course-title {
font-size: 28rpx;
font-weight: 500;
color: #333;
margin-bottom: 8rpx;
}
.course-desc {
font-size: 24rpx;
color: #999;
margin-bottom: 20rpx;
}
.course-meta {
display: flex;
justify-content: space-between;
align-items: center;
.enroll-count {
font-size: 24rpx;
color: #999;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
width: 24rpx;
height: 24rpx;
// background: url('/static/icons/user.png') no-repeat center/cover;
margin-right: 8rpx;
}
}
.study-btn {
font-size: 26rpx;
color: #666;
background: #F5F6F8;
padding: 8rpx 24rpx;
border-radius: 24rpx;
border: none;
}
}
}
}
}
.show-more {
text-align: center;
padding-top: 20rpx;
font-size: 26rpx;
color: #999;
.arrow {
margin-left: 8rpx;
font-size: 20rpx;
display: inline-block;
transition: transform 0.3s ease;
&.up {
transform: rotate(180deg);
}
}
}
}
</style>
\ No newline at end of file
...@@ -4,6 +4,14 @@ ...@@ -4,6 +4,14 @@
}, },
"pages": [ "pages": [
{ {
"path": "pages/home/home",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false
}
},
{
"path": "pages/my/my", "path": "pages/my/my",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
...@@ -45,6 +53,25 @@ ...@@ -45,6 +53,25 @@
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff",
"backgroundTextStyle": "dark" "backgroundTextStyle": "dark"
},
"tabBar": {
"color": "#76787C",
"selectedColor": "#55B5F3",
"iconWidth": "24px",
"spacing": "9px",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/static/tab_home.png",
"selectedIconPath": "/static/tab_home_selected.png"
},
{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "/static/tab_my.png",
"selectedIconPath": "/static/tab_my_selected.png"
}
]
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment