学习页面改版

common/styles/global/pages.scss

@@ -1992,4 +1992,58 @@
 		background-image: url("@/static/images/xuexi/dagang-img.png");
 		position: absolute;top: -138rpx;left: 0;z-index: 1;
 	}
+}
+
+// 学习
+.ezy-xuexi-page{
+	width: 100%;height: 100vh;background-color: #fff;display: flex;flex-direction: column;
+	// 切换单元
+	.change-dy-box{
+		.arrow-icon{}
+		.left-icon{}
+		.right-icon{}
+		.change-dy-content{}
+	}
+	
+	// 滚动
+	.xx-scroll-body{overflow-y: auto;}
+	
+	// 学习进度
+	.xx-jd-box{
+		.xx-progress-btn-box{
+			
+		}
+		.xx-progress-box{
+			
+		}
+		.jxxx-btn{
+			
+		}
+		
+		//学习进度按钮
+		.jd-item-box{
+			icon{}
+			.dydg-icon{}
+			.dyml-icon{}
+		}
+		
+	}
+	
+	// 学习目录
+	.xx-item-list{
+		padding: 56rpx 0 32rpx;
+		.xx-item-box{width: 690rpx;display: flex;align-items: center;border-radius: 12rpx;color: #4b4b4b;;
+			margin: 0 auto 24rpx;box-sizing: border-box;padding: 20rpx;background-color: #fff;
+			line-height: 1.5;font-size: 32rpx;
+			img{width: 120rpx;height: 120rpx;border-radius: 12rpx;margin-right: 24rpx;}
+			.xx-item-status{}
+			.xx-text-box{}
+			.xx-item-btn{}
+			.xx-lock-btn{}
+		}
+		.xx-disabled-item-box{
+			
+		}
+	}
+	
 }

pages/chanpinneirong/index.vue

@@ -1,53 +1,54 @@
 <template>
-	<view class="container">
-		<view class="sticky-title">
-			学习
+	<view class="ezy-xuexi-page">
+		<view class="icon-title-navBar-box">
+			<!-- <view @click="handleBack" class="nav-bar-icon"></view> -->
+			<text class="nav-bar-title">学习</text>
 		</view>
-		<view>
-			<view class="arrow-nav">
-				<view class="arrow" :class="{ 'disabled': currentIndex == 0 }" @click="prev">
-					左箭头
+		<view class="ezy-page-body">
+			<view class="change-dy-box">
+				<view class="arrow-icon left-icon" :class="{ 'disabled': currentIndex == 0 }" @click="prev"> </view>
+				<!-- 显示内容 -->
+				<view class="change-dy-content">
+					<text>{{ danyuanInfo.danyuanName }}</text>
+					<text>{{ danyuanInfo.danyuanIntro }}</text>
 				</view>
-
-				<view class="arrow" :class="{ 'disabled': currentIndex == list.length - 1 }" @click="next">
-					右箭头
-				</view>
-			</view>
-			<!-- 显示内容 -->
-			<view class="current-content">
-				<text>{{ danyuanInfo.danyuanName }}</text>
-				<text>{{ danyuanInfo.danyuanIntro }}</text>
-			
+				<view class="arrow-icon right-icon" :class="{ 'disabled': currentIndex == list.length - 1 }" @click="next"> </view>
 			</view>
-		</view>
-	
-		<scroll-view scroll-y class="scroll-view" :scroll-top="scrollTop" @scroll="onScroll">
-			<view>
-				<progress :percent="20" class="exam-progress-box" stroke-width="10" backgroundColor="#3c7dfd"
-					activeColor="#ffd11c" />
-				<text class="course-name" @click="handlePlay(subjectDetail,'jixu')">继续学习</text>
-				<view>单元大纲</view>
-				<view>单元目录</view>
-			</view>
-			<view v-for="section in dagangList" :key="section.jieId" class="section-item">
-				<view class="status" :class="section.wanchengFlag === 1 ? 'completed' : 'uncompleted'">
-					{{ section.wanchengFlag === 1 ? '已完成' : '未开始' }}
-				</view>
-				<view class="section-left">
-					<image class="section-cover" :src="section.cover" mode="aspectFill"></image>
-					<view class="section-info">
-						<text class="section-name">{{ section.jieName }}</text>
-						<text class="section-desc">{{ section.jieIntro }}</text>
+			<view class="xx-scroll-body">
+				<view class="xx-jd-box">
+					<view class="xx-progress-btn-box">
+						<view class="xx-progress-box">
+							<view>当前学习进度</view>
+							<progress :percent="20" class="xx-progress" stroke-width="10" backgroundColor="#3c7dfd"
+								activeColor="#ffd11c" />
+						</view>
+						<view class="jxxx-btn" @click="handlePlay(subjectDetail,'jixu')"></view>
 					</view>
+					<view class="jd-item-box">
+						<view class="jd-item-btn"><icon class="dydg-icon"></icon>单元大纲</view>
+						<view class="jd-item-btn"><icon class="dyml-icon"></icon>单元目录</view>
+					</view>
+					
 				</view>
-				<view class="section-right">
-					<text class="section-number">第{{ section.number }}节</text>
-					<text @click="handlePlay(section,'play')">播放按钮</text>
+				<view class="xx-item-list">
+					<view class="xx-item-box" v-for="section in dagangList" :key="section.jieId" >
+						<view class="xx-item-status" :class="section.wanchengFlag === 1 ? 'completed-status' : 'uncompleted-status'"> </view>
+						<img :src="section.cover"/>
+						<view class="xx-text-box">
+							<view>{{ section.jieName }}</view>
+							<view>{{ section.jieIntro }}</view>
+						</view>
+						<view @click="handlePlay(section,'play')" class="xx-item-btn"></view>
+					</view>
 				</view>
 			</view>
-			<!-- 底部占位 -->
-			<view style="height: 100px; text-align: center;">学习下一单元</view>
-		</scroll-view>
+			
+		</view>
+		<!-- 底部占位 -->
+		<view class="xx-next-btn">学习下一单元</view>
+		<view class="xx-xw-text">课程已学完</view>
+		
+		<scroll-view scroll-y class="scroll-view" :scroll-top="scrollTop" @scroll="onScroll"> </scroll-view>
 
 		<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow= false"></danyuanInfoVue>
 
@@ -160,158 +161,3 @@
 		}
 	}
 </script>
-
-<style scoped>
-	.container {
-		height: 100vh;
-		background-color: #f5f5f5;
-	}
-
-	/* 吸顶标题 */
-	.sticky-title {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 100;
-		background-color: #1890ff;
-		color: white;
-		padding: 12px 16px;
-		font-size: 16px;
-		font-weight: bold;
-		text-align: center;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-	}
-
-	/* 返回顶部按钮 */
-	.back-top {
-		position: fixed;
-		right: 16px;
-		bottom: 100px;
-		z-index: 99;
-		width: 44px;
-		height: 44px;
-		background-color: #1890ff;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: white;
-		font-size: 20px;
-		box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
-	}
-
-	.back-top:active {
-		background-color: #096dd9;
-		transform: scale(0.95);
-	}
-
-	/* 滚动区域 */
-	.scroll-view {
-		height: 100%;
-		padding-top: 50px;
-		/* 给吸顶标题留出空间 */
-		box-sizing: border-box;
-	}
-
-	/* 单元样式 */
-	.unit-item {
-		margin: 12px;
-		background: white;
-		border-radius: 8px;
-		overflow: hidden;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	.unit-title {
-		padding: 16px;
-		background: linear-gradient(135deg, #1890ff, #36cfc9);
-		color: white;
-	}
-
-	.unit-name {
-		font-size: 18px;
-		font-weight: bold;
-		display: block;
-		margin-bottom: 4px;
-	}
-
-	.unit-intro {
-		font-size: 14px;
-		opacity: 0.9;
-	}
-
-	/* 节样式 */
-	.section-item {
-		padding: 12px 16px;
-		border-bottom: 1px solid #f0f0f0;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.section-item:last-child {
-		border-bottom: none;
-	}
-
-	.section-left {
-		display: flex;
-		align-items: center;
-		flex: 1;
-	}
-
-	.section-cover {
-		width: 60px;
-		height: 60px;
-		border-radius: 6px;
-		margin-right: 12px;
-	}
-
-	.section-info {
-		flex: 1;
-	}
-
-	.section-name {
-		font-size: 16px;
-		color: #333;
-		display: block;
-		margin-bottom: 4px;
-		font-weight: 500;
-	}
-
-	.section-desc {
-		font-size: 13px;
-		color: #666;
-	}
-
-	.section-right {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-end;
-		margin-left: 12px;
-	}
-
-	.section-number {
-		font-size: 12px;
-		color: #999;
-		margin-bottom: 4px;
-	}
-
-	.status {
-		font-size: 12px;
-		padding: 2px 8px;
-		border-radius: 10px;
-	}
-
-	.status.completed {
-		background-color: #f6ffed;
-		color: #52c41a;
-		border: 1px solid #b7eb8f;
-	}
-
-	.status.uncompleted {
-		background-color: #fff7e6;
-		color: #fa8c16;
-		border: 1px solid #ffd591;
-	}
-</style>