فهرست منبع

修改:1.修复课程列表页ios系统显示问题;2.课程详情报名按钮固定在底部

littleblue55 1 روز پیش
والد
کامیت
bd97cee146

+ 15 - 2
pages/goOnEdu/course/courseDetail/courseDetail.vue

@@ -30,10 +30,10 @@
 					<view class="text-tip" v-if="!isMember && courseDetail.viewMode === '2'">个人会员或单位会员免费,点击现在入会></view>
 					
 				</view>
-				<view class="section-bottom" @click="toVideo" v-show="videoShow">
+				<view class="section-bottom-fixed" @click="toVideo" v-show="videoShow">
 					<text>预约课程</text>
 				</view>
-				<view :class="['section-bottom', `${courseDetail.hasReg ? 'bg-blue' : ''}`]" v-show="regShow" @click="toReg">
+				<view :class="['section-bottom-fixed', `${courseDetail.hasReg ? 'bg-blue' : ''}`]" v-show="regShow" @click="toReg">
 					<text>{{ courseDetail?.hasReg ? '报名成功' : '点击报名' }}</text>
 				</view>
 			</view>
@@ -527,6 +527,19 @@
 		}
 	}
 
+	.section-bottom-fixed {
+		height: 90rpx;
+		color: #fff;
+		font-size: 34rpx;
+		text-align: center;
+		line-height: 80rpx;
+		background-color: #fe0000;
+		width: 100%;
+		position: fixed;
+		bottom: 0;
+		box-sizing: content-box;
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
 	.section-bottom {
 		height: 90rpx;
 		color: #fff;

+ 14 - 5
pages/goOnEdu/course/courseHome/courseHome.vue

@@ -4,10 +4,12 @@
 		<u-search @search="toSearch" :show-action="false" shape="round" placeholder="搜索您想要的内容"
 			v-model="searchForm.keyword"></u-search>
 		<!-- tabs -->
-		<view style="padding-top: 20rpx;display: flex;">
-			<u-tabs style="flex: 1;" :list="tabsList" :is-scroll="true" font-size="24" :bold="false"
-				inactive-color="#000000" active-color="#000000" :bar-style="{'background-color': '#2979ff'}"
-				:gutter="30" height="45" v-model="currentTab" @change="changeTab"></u-tabs>
+		<view class="tabs-container">
+			<scroll-view scroll-x="true" style="width:100%;" :scroll-with-animation="true" :show-scrollbar="true">
+				<u-tabs style="flex: 1;" :list="tabsList" :is-scroll="true" font-size="24" :bold="false"
+					inactive-color="#000000" active-color="#000000" :bar-style="{'background-color': '#2979ff'}"
+					:gutter="30" height="45" v-model="currentTab" @change="changeTab"></u-tabs>
+			</scroll-view>
 			<!-- <u-icon name="list" style="flex: 0 0 auto;padding-left: 20rpx;"></u-icon> -->
 		</view>
 		<!-- 列表 -->
@@ -346,7 +348,7 @@
 <style lang="scss" scoped>
 	.container {
 		// padding: 20px;
-		// width: 100vh;
+		// width: 100vw;
 		// overflow: hidden;
 	}
 
@@ -354,6 +356,13 @@
 		font-size: 48rpx;
 		margin-bottom: 30rpx;
 	}
+	.tabs-container {
+	  padding-top: 20rpx;
+	  display: flex;
+	  width: 100%; /* 确保宽度足够 */
+	  overflow-x: auto; /* 横向滚动 */
+	  -webkit-overflow-scrolling: touch; /* 在iOS上启用流畅滚动 */
+	}
 
 	.course-item {
 		margin: 20rpx 0;

+ 1 - 0
pages/goOnEdu/course/index.vue

@@ -47,6 +47,7 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
+		width: 100vw;
 	}
 
 	.content {