|
|
@@ -90,6 +90,20 @@
|
|
|
<image src="/static/images/new/back.png" ></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="nav-row">
|
|
|
+ <scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
|
|
|
+ <view class="nav-inner">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in navList"
|
|
|
+ :key="item.id"
|
|
|
+ :class="['nav-item', { active: item.id == activeId }]"
|
|
|
+ @click="onSelectByIndex(item.id)"
|
|
|
+ >
|
|
|
+ <text>{{ item.categoryName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
<view class="course-list">
|
|
|
<view
|
|
|
v-for="(course, idx) in courses"
|
|
|
@@ -127,7 +141,17 @@ export default {
|
|
|
return {
|
|
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
|
videoTagIndex: 0,
|
|
|
+ activeId:0,
|
|
|
videoTags: ['恩施', '长白山', '吉林', '武当山', '张家界', '更多'],
|
|
|
+ navList:[
|
|
|
+ {id: 31,categoryName: "精选"},
|
|
|
+ {id: 37,categoryName: "健康食品"},
|
|
|
+ {id: 35,categoryName: "绿色有机"},
|
|
|
+ {id: 34,categoryName: "健康食品"},
|
|
|
+ {id: 33,categoryName: "绿色有机"},
|
|
|
+ {id: 32,categoryName: "健康食品"},
|
|
|
+ {id: 38,categoryName: "绿色有机"}
|
|
|
+ ],
|
|
|
courses: [
|
|
|
{
|
|
|
name: '歌唱家刘金的《0基础金曲演唱速练课》',
|
|
|
@@ -161,6 +185,9 @@ export default {
|
|
|
this.getMenuButtonInfo(); // 初始化获取胶囊信息
|
|
|
},
|
|
|
methods: {
|
|
|
+ onSelectByIndex(index) {
|
|
|
+ this.activeId=index
|
|
|
+ },
|
|
|
// 获取胶囊按钮布局参数
|
|
|
getMenuButtonInfo() {
|
|
|
// 微信小程序API（Uniapp可直接用uni.getMenuButtonBoundingClientRect）
|
|
|
@@ -342,7 +369,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
.section-title {
|
|
|
width: 226rpx;
|
|
|
@@ -499,6 +526,50 @@ export default {
|
|
|
font-size: 32rpx;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+.course-section{
|
|
|
+ .nav-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom:24rpx;
|
|
|
+ // gap: 20rpx;
|
|
|
+ }
|
|
|
+ .nav-all {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+ .nav-all.active {
|
|
|
+ color: #FF233C;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .nav-scroll {
|
|
|
+ flex: 1;
|
|
|
+ white-space: nowrap; /* 必须加！横向滚动核心 */
|
|
|
+ }
|
|
|
+ .nav-inner {
|
|
|
+ display: inline-flex;
|
|
|
+ padding:0;
|
|
|
+ gap: 20rpx;
|
|
|
+ }
|
|
|
+ .nav-item {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+ .nav-item.active {
|
|
|
+ background: #FF233C;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
/* 课程列表 */
|
|
|
.course-list {
|
|
|
display: flex;
|
