Skip to content

Y
ydl-group-course
Commit 615421ac by zhengxiao
Options

feat(custom): 课程首页

parent 55fd03cc
Showing with 248 additions and 194 deletions
src/components/course-block.vue
......@@ -10,9 +10,9 @@
<view class="course-list">
<view
class="course-item"
v-for="(item, index) in showCourseList"
:key="index"
class="course-item"
>
<image
class="course-img"
......@@ -20,18 +20,22 @@
mode="aspectFill"
/>
<view class="course-info">
<view class="course-title">{{item.title}}</view>
<view class="course-desc">{{item.desc}}</view>
<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>
<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>
<view
v-if="courseList.length > 2"
class="show-more"
@tap="toggleShowMore"
>
<text>{{ isExpanded ? '收起' : '展开更多' }}</text>
<text :class="['arrow', isExpanded ? 'up' : '']">∨</text>
</view>
</view>
......@@ -43,141 +47,153 @@ export default {
props: {
title: {
type: String,
required: true
required: true,
},
subtitle: {
type: String,
required: true
required: true,
},
studyCount: {
type: Number,
required: true
required: true,
},
courseList: {
type: Array,
default: () => []
}
default: () => [],
},
},
data() {
return {
isExpanded: false
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;
margin: 12px;
padding: 12px 10px;
background: #fff;
border-radius: 16rpx;
border-radius: 16px;
.block-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24rpx;
align-items: center;
margin-bottom: 16px;
.left {
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 8rpx;
color: #242424;
font-weight: 600;
font-size: 16px;
margin-bottom: 1px;
display: block;
line-height: 22px;
}
.desc {
font-size: 24rpx;
color: #999;
color: #999999;
font-weight: 400;
font-size: 12px;
line-height: 17px;
}
}
.study-count {
font-size: 24rpx;
color: #999;
background: #F5F6F8;
padding: 8rpx 16rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
border-radius: 13px;
background: linear-gradient(270deg, rgba(255, 244, 221, 1) 0%, rgba(255, 255, 255, 0) 100%);
color: #B5985F;
font-weight: 400;
font-size: 12px;
padding: 5px 10px;
}
}
.course-list {
.course-item {
display: flex;
padding: 24rpx 0;
border-bottom: 1rpx solid #EBEDF0;
margin-bottom: 18px;
&:last-child {
border-bottom: none;
margin-bottom: 0;
}
.course-img {
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
margin-right: 20rpx;
background: #F5F6F8;
width: 64px;
height: 79px;
margin-right: 8px;
border-radius: 4px;
background-color: #d8d8d8;
}
.course-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.course-title {
font-size: 28rpx;
color: #000000;
font-weight: 500;
color: #333;
margin-bottom: 8rpx;
font-size: 14px;
line-height: 20px;
// 单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.course-desc {
font-size: 24rpx;
color: #999;
margin-bottom: 20rpx;
color: #000000;
font-weight: 400;
font-size: 12px;
line-height: 12px;
margin-top: 6px;
// 单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.course-meta {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-end;
.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;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 25px;
border-radius: 12.5px;
background-color: rgba(0, 146, 255, 0.1);
color: #0092FF;
font-weight: 500;
font-size: 12px;
padding: 0;
}
}
}
......
src/pages/home/home.vue
......@@ -2,12 +2,10 @@
<view class="container">
<!-- 顶部搜索区域 - 添加安全区域 -->
<view class="search-area">
<!-- 使用微信小程序的胶囊高度适配 -->
<!-- 使用计算后的总导航栏高度 -->
<view
class="status-bar"
:style="{
height: statusBarHeight + 'px',
}"
:style="{ height: totalNavHeight + 'px' }"
></view>
<view class="search-tags">
<text class="tag">体系化专业课程</text>
......@@ -46,7 +44,11 @@
<view class="vip-tips">
<view class="left-content">
<view class="tag-wrapper">
<image class="tag-bg" src="/static/images/tag-bg.png" mode="aspectFit" />
<image
class="tag-bg"
src="/static/images/tag-bg.png"
mode="aspectFit"
/>
<text class="tag-text">免费资料</text>
</view>
<view class="text-content">
......@@ -63,10 +65,8 @@
<view class="career-section">
<view class="section-header">
<view class="title-wrapper">
<view class="title-bar"></view>
<text class="title">执业入驻</text>
</view>
<text class="subtitle">心理咨询执业培养计划</text>
</view>
<!-- 切换按钮组 -->
......@@ -77,39 +77,60 @@
:key="index"
:class="['tab-item', currentTab === index ? 'active' : '']"
@tap="switchTab(index)"
>{{ tab }}</view>
>
{{ tab }}
</view>
<view class="slider" :style="{ transform: `translateX(${currentTab * 100}%)` }"></view>
</view>
<view
class="slider"
:style="{ transform: `translateX(${currentTab * 100}%)` }"
></view>
</view>
<!-- 内容区域 -->
<swiper
class="content-swiper"
:current="currentTab"
:autoplay="true"
@change="handleSwiperChange"
>
<swiper-item v-for="(tab, index) in tabs" :key="index">
<swiper-item
v-for="(tab, index) in tabs"
:key="index"
>
<view class="consultant-card">
<view class="card-title">心理咨询师一对一从业规划</view>
<!-- <view class="card-title">心理咨询师一对一从业规划</view>
<view class="card-subtitle">专业老师1v1教你入行</view>
<view class="card-features">
<view class="feature-item">
<image src="/static/icons/doc.png" mode="aspectFit" />
<image
src="/static/icons/doc.png"
mode="aspectFit"
/>
<text>入行资料</text>
</view>
<view class="feature-item">
<image src="/static/icons/group.png" mode="aspectFit" />
<image
src="/static/icons/group.png"
mode="aspectFit"
/>
<text>社群加餐</text>
</view>
<view class="feature-item">
<image src="/static/icons/guide.png" mode="aspectFit" />
<image
src="/static/icons/guide.png"
mode="aspectFit"
/>
<text>学习指导</text>
</view>
<view class="feature-item">
<image src="/static/icons/plan.png" mode="aspectFit" />
<image
src="/static/icons/plan.png"
mode="aspectFit"
/>
<text>职业规划</text>
</view>
</view>
</view> -->
<view class="card-footer">
<text class="footer-text">壹点灵成长规划师，1V1教你入行</text>
<button class="consult-btn">立即咨询</button>
......@@ -125,24 +146,24 @@
<course-block
title="权威证书"
subtitle="收获成功道路的通行证"
:studyCount="2.1"
:courseList="certificateList"
:study-count="2.1"
:course-list="certificateList"
></course-block>
<!-- 咨询伦理系列 -->
<course-block
title="咨询伦理系列"
subtitle="专业伦理规范指导"
:studyCount="1.8"
:courseList="ethicsList"
:study-count="1.8"
:course-list="ethicsList"
></course-block>
<!-- 认知行为系列 -->
<course-block
title="认知行为系列"
subtitle="CBT理论与实操"
:studyCount="1.8"
:courseList="cbtList"
:study-count="1.8"
:course-list="cbtList"
></course-block>
</view>
</view>
......@@ -154,7 +175,7 @@ import courseBlock from '@/components/course-block.vue'
export default {
name: 'HomePage',
components: {
courseBlock // 直接使用对象形式注册组件
courseBlock, // 直接使用对象形式注册组件
},
data() {
return {
......@@ -163,26 +184,28 @@ export default {
courseList: [],
bannerList: [],
statusBarHeight: 0,
currentTab: 1, // 默认选中"成为咨询师"
navBarHeight: 0,
totalNavHeight: 0,
currentTab: 0,
tabs: ['入行分析', '成为咨询师', '咨询师进阶'],
certificateList: [
{
title: '社会心理服务中级·人社部能建中心',
desc: '解开关系中的结，告别恨、消耗...',
enrollCount: 3240,
image: '/static/images/course-placeholder.png'
image: '/static/images/course-placeholder.png',
},
{
title: '社会心理服务中级·人社部能建中心',
desc: '解开关系中的结，告别恨、消耗...',
enrollCount: 3240,
image: '/static/images/course-placeholder.png'
image: '/static/images/course-placeholder.png',
},
{
title: '社会心理服务中级·人社部能建中心',
desc: '解开关系中的结，告别恨、消耗...',
enrollCount: 3240,
image: '/static/images/course-placeholder.png'
image: '/static/images/course-placeholder.png',
},
// ... 其他证书课程
],
......@@ -191,7 +214,7 @@ export default {
title: '咨询伦理基础课程',
desc: '建立专业伦理意识，提升职业素养...',
enrollCount: 2156,
image: '/static/images/course-placeholder.png'
image: '/static/images/course-placeholder.png',
},
// ... 其他伦理课程
],
......@@ -200,17 +223,26 @@ export default {
title: 'CBT理论基础与应用',
desc: '认知行为疗法的核心理论与技术...',
enrollCount: 1892,
image: '/static/images/course-placeholder.png'
image: '/static/images/course-placeholder.png',
},
// ... 其他CBT课程
]
],
}
},
onLoad() {
this.getCourseList()
// 获取系统信息设置状态栏高度
const systemInfo = wx.getSystemInfoSync()
// 获取系统信息和胶囊按钮位置信息
const systemInfo = uni.getSystemInfoSync()
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// 状态栏高度
this.statusBarHeight = systemInfo.statusBarHeight
// 胶囊高度（包含上下边距）
this.navBarHeight =
(menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height
// 总高度 = 状态栏高度 + 胶囊高度
this.totalNavHeight = this.statusBarHeight + this.navBarHeight
},
methods: {
getCourseList() {
......@@ -224,15 +256,15 @@ export default {
},
handleSwiperChange(e) {
this.currentTab = e.detail.current
}
},
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.container {
min-height: 100vh;
background: #f5f5f5;
background: #f0f2f4;
}
.search-area {
......@@ -279,7 +311,7 @@ export default {
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
&.dark {
background: #4A5B67;
background: #4a5b67;
}
}
......@@ -344,7 +376,7 @@ export default {
.action-text {
font-size: 26rpx;
color: #666;
background: #F5F6F8;
background: #f5f6f8;
padding: 12rpx 24rpx;
border-radius: 30rpx;
}
......@@ -352,63 +384,57 @@ export default {
}
.career-section {
margin: 20rpx;
margin: 12px;
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
border-radius: 12px;
padding: 12px;
.section-header {
margin-bottom: 24rpx;
margin-bottom: 12px;
.title-wrapper {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 8rpx;
.title-bar {
width: 6rpx;
height: 32rpx;
background: #333;
border-radius: 3rpx;
}
margin-bottom: 9px;
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
font-size: 16px;
font-weight: 600;
color: #242424;
}
}
.subtitle {
font-size: 24rpx;
color: #999;
}
}
.career-tabs {
position: relative;
background: #F7F8FA;
border-radius: 12rpx;
padding: 8rpx;
margin-bottom: 24rpx;
border-radius: 18px;
// padding: 4px;
margin-bottom: 10px;
height: 36px;
background: #f2f2f8;
box-sizing: border-box;
.tab-items {
display: flex;
position: relative;
z-index: 1;
align-items: center;
height: 36px;
box-sizing: border-box;
}
.tab-item {
flex: 1;
text-align: center;
padding: 16rpx 0;
font-size: 28rpx;
color: #666;
color: #212123;
font-weight: 400;
font-size: 13px;
position: relative;
z-index: 2;
transition: color 0.3s;
display: flex;
align-items: center;
justify-content: center;
&.active {
color: #333;
font-weight: 500;
......@@ -417,14 +443,14 @@ export default {
.slider {
position: absolute;
left: 8rpx;
top: 8rpx;
width: calc(33.33% - 6rpx);
height: calc(100% - 16rpx);
left: 4px;
top: 4px;
width: calc(33.33% - 3px);
height: calc(100% - 8px);
background: #fff;
border-radius: 8rpx;
border-radius: 16px;
transition: transform 0.3s ease;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
}
......@@ -433,71 +459,83 @@ export default {
.consultant-card {
height: 100%;
background: #F7F8FA;
background: #f7f8fa;
border-radius: 12rpx;
padding: 30rpx;
.card-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 8rpx;
}
.card-subtitle {
font-size: 26rpx;
color: #666;
margin-bottom: 40rpx;
}
.card-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20rpx;
margin-bottom: 40rpx;
.feature-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
image {
width: 64rpx;
height: 64rpx;
background: #fff;
border-radius: 16rpx;
padding: 12rpx;
}
text {
font-size: 24rpx;
color: #666;
}
}
}
// padding: 30rpx;
// .card-title {
// font-size: 36rpx;
// font-weight: bold;
// color: #333;
// margin-bottom: 8rpx;
// }
// .card-subtitle {
// font-size: 26rpx;
// color: #666;
// margin-bottom: 40rpx;
// }
// .card-features {
// display: grid;
// grid-template-columns: repeat(4, 1fr);
// gap: 20rpx;
// margin-bottom: 40rpx;
// .feature-item {
// display: flex;
// flex-direction: column;
// align-items: center;
// gap: 8rpx;
// image {
// width: 64rpx;
// height: 64rpx;
// background: #fff;
// border-radius: 16rpx;
// padding: 12rpx;
// }
// text {
// font-size: 24rpx;
// color: #666;
// }
// }
// }
.card-footer {
position: absolute;
height: 51px;
width: calc(100% - 25px);
bottom: 18px;
left: 13px;
border-radius: 8px;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 24rpx;
border-radius: 8rpx;
justify-content: space-between;
padding: 0 10px;
.footer-text {
font-size: 28rpx;
color: #333;
color: #1e2842;
font-weight: 500;
font-size: 14px;
// 单行溢出隐藏
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.consult-btn {
background: #333;
color: #fff;
font-size: 26rpx;
padding: 12rpx 32rpx;
border-radius: 30rpx;
border: none;
height: 29px;
line-height: 29px;
border-radius: 8px;
background-color: #212123;
min-width: 87px;
text-align: center;
padding: 0 10px;
color: #ffffff;
font-weight: 600;
font-size: 12px;
margin: 0;
}
}
}
......@@ -536,7 +574,7 @@ export default {
.study-count {
font-size: 24rpx;
color: #999;
background: #F5F6F8;
background: #f5f6f8;
padding: 8rpx 16rpx;
border-radius: 20rpx;
}
......@@ -546,7 +584,7 @@ export default {
.course-item {
display: flex;
padding: 24rpx 0;
border-bottom: 1rpx solid #EBEDF0;
border-bottom: 1rpx solid #ebedf0;
&:last-child {
border-bottom: none;
......@@ -557,7 +595,7 @@ export default {
height: 160rpx;
border-radius: 12rpx;
margin-right: 20rpx;
background: #F5F6F8;
background: #f5f6f8;
}
.course-info {
......@@ -603,7 +641,7 @@ export default {
.study-btn {
font-size: 26rpx;
color: #666;
background: #F5F6F8;
background: #f5f6f8;
padding: 8rpx 24rpx;
border-radius: 24rpx;
border: none;
......
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