Forráskód Böngészése

课程页面样式优化

tanxue 4 hónapja
szülő
commit
d9c1a8e89c

+ 15 - 7
common/styles/global/pages.scss

@@ -708,10 +708,10 @@
 .ezy-course-page{
 	width: 100%;height: 100vh;background-color: #0ab2f0;position: relative;
 	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
-	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/exam/exam-shiti-bj.png");
+	@include ezy-no-repeat-cover(top);
 	.course-video-box{width: 720rpx;height: 466rpx;padding: 28rpx 30rpx 36rpx;margin: 0 auto 6rpx;}
 	.course-content-border{
-		display: flex;flex: 1;position: relative;margin: 0 30rpx;
+		display: flex;flex: 1;position: relative;margin: 0 30rpx;border-radius: 10rpx 10rpx 0 0;
 		background-color: rgba(255, 255, 255, 0.3);overflow-y: auto;
 	}
 	.course-content-box{
@@ -719,13 +719,21 @@
 		box-sizing: border-box;padding: 42rpx 24rpx;
 	}
 	.course-content-item{
-		width: 100%;background-color: #f7f8fa;border-radius: 8rpx;color: #666;display: block;
+		width: 100%;background-color: rgba(255, 255, 255, 0.8);border-radius: 8rpx;color: #666;display: block;
 		box-sizing: border-box;padding: 20rpx;margin-bottom: 30rpx;font-size: 32rpx;@include ezy-rich-text;
 	}
-	.title-play-box{display: flex;justify-content: space-between;margin:0 6rpx 12rpx;}
-	.course-title{color: #088aea;font-size: 36rpx;margin-right: 16rpx;}
-	.course-play-btn{width: 144rpx;height: 44rpx;flex-shrink: 0;
-	@include ezy-no-repeat-cover;background-image: url("@/static/images/course/video-play.png");}
+	.title-play-box{
+		width: 100%;height: 85rpx;border-radius: 8rpx;box-sizing: border-box;padding: 0 10rpx;
+		display: flex;justify-content: space-between;align-items: center;margin:0 0 12rpx;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/course/video-title-bj.png");
+		}
+		.course-icon{
+			width: 60rpx;height: 75rpx;@include ezy-no-repeat-cover;
+		}
+	.course-title{color: #fff;font-size: 36rpx;margin-right: auto;margin-left: 10rpx;}
+	.course-play-btn{
+		width: 142rpx;height: 52rpx;flex-shrink: 0;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/course/video-play1.png");}
 }	
 
 // 课程得分页面

+ 19 - 5
pages/study/lookShipin.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ezy-course-page" :style="{backgroundImage: 'url(' + productTipFun() + ')'}">
+	<view class="ezy-course-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
 		<view class="icon-title-navBar-box">
 			<view @click="goUpPage" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">{{shipinTitle}}</text>
@@ -17,7 +17,8 @@
 				<!-- <view class="course-title">{{jieName}}</view> -->
 				<view v-for="(item,index) in progressMarkers" :key="index" @click="markersClick(item)">
 					<view class="title-play-box">
-						<text class="course-title">{{item.title}}</text>
+						<icon class="course-icon" :style="{backgroundImage: 'url(' + courseIconFun() + ')'}"></icon>
+						<view class="course-title">{{item.title}}</view>
 						<view class="course-play-btn" @click="markersClick(item)"></view>
 					</view>
 					<rich-text :nodes="item.describe" class="course-content-item"></rich-text>
@@ -104,6 +105,7 @@
 				this.init(options)
 			}
 		},
+
 		onHide() {
 			console.log('onHideonHideonHideonHide');
 			this.hideFlag = 'hide'
@@ -113,13 +115,25 @@
 			this.hideFlag = 'hide'
 		},
 		methods: {
-			productTipFun() {
+			courseBjFun() {
+				switch (Number(cacheManager.get('auth').cardId)) {
+					case 1:
+						return 'static/images/course/couse-shuxue-bj.png'
+						break;
+					case 2:
+						return 'static/images/course/course-yingyu-bj.png'
+						break;
+					default:
+						break;
+				}
+			},
+			courseIconFun() {
 				switch (Number(cacheManager.get('auth').cardId)) {
 					case 1:
-						return 'static/images/study/shuxue/study-wrap-bj.png'
+						return 'static/images/course/shuxue-icon.png'
 						break;
 					case 2:
-						return 'static/images/study/yingyu/test-item-active.png'
+						return 'static/images/course/yingyu-icon.png'
 						break;
 					default:
 						break;

BIN
static/images/course/course-yingyu-bj.png


BIN
static/images/course/couse-shuxue-bj.png


BIN
static/images/course/shuxue-icon.png


BIN
static/images/course/video-play.png


BIN
static/images/course/video-title-bj.png


BIN
static/images/course/yingyu-icon.png


BIN
static/images/study/shuxue/study-wrap-bj.gif