课程详情部分布局

pages/shopping/shoppingCart.vue

@@ -688,7 +688,7 @@ page {
 		.rmb {
 			margin-right: 9rpx;
 			margin-left: 35rpx;
-			font-size: 18rpx;
+			font-size: 20rpx;
 			position: relative;
 			top: -14rpx;
 			left: 0rpx;

pages3/course/detail.vue

@@ -2,16 +2,16 @@
 	<view>
 		<nav-bar title="课程详情"></nav-bar>
 		<view class="videoBox" >
-			<view >
+			<!-- <view > -->
 				<view class="video_box" v-if="!startStatus">
-					<image :src="$method.splitImgHost(detail.coverUrl)" style="width: 100%;height: 421rpx;"></image>
+					<image :src="$method.splitImgHost(detail.coverUrl)" style="width: 100%;height: 450rpx;"></image>
 					<image v-if="false" class="video_play" src="/static/play.png" @click="startVideo"></image>
 				</view>
-				<view v-else class="video_box" style="width: 100%;height: 421rpx;">
+				<view v-else class="video_box" style="width: 100%;height: 450rpx;">
 					<polyv-player
 						id="playerVideo"
 						playerId="playerVideo"
-						height="421rpx"
+						height="450rpx"
 						:vid="vid"
 						:showSettingBtn="true"
 						:enablePlayGesture="true"
@@ -22,66 +22,83 @@
 						@statechange="onStateChange"
 					></polyv-player>
 				</view>
-				<view style="padding:20rpx;">
-					<view style="display: flex;">
-						<view class="yearTag" v-if="detail.year">{{detail.year}}</view>
-						<view class="titleTag">{{detail.goodsName}}</view>
+				
+			<!-- </view> -->
+			
+			
+		</view>
+		<view class="contents">
+			<view class="cou_title">
+				<view class="title_name">
+					<!-- <view class="yearTag" v-if="detail.year">{{detail.year}}</view> -->
+					<view class="titleTag">{{detail.goodsName}}</view>
+				</view>
+				<view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
+					<view class="noteTag">
+						<!-- <image src="/static/icon/wk_icon1.png" class="wk_icon"></image> -->
+						共 <text class="blackFont">{{courseList.length}} 课程 {{detail.classHours || '-'}}</text> 学时
 					</view>
-					<view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
-						<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
-						共 <text class="blackFont">{{courseList.length}} 课程 {{detail.classHours || '-'}}</text> 学时</view>
-						
+					<view class="prices">
+						<text class="price_sym">¥</text>
+						<text class="price_word">599</text>
 					</view>
 				</view>
+				<view><u-line color="#D6D6DB" /></view>
 			</view>
-			<u-line color="#D6D6DB" />
-			<view style="height: 80rpx;">
+			<!-- <u-line color="#D6D6DB" /> -->
+			<!-- <view style="height: 80rpx;">
 				<view><u-tabs :list="list" :item-width="itemWidth()" font-size="30" bar-width="24"  :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
+			</view> -->
+			<view class="tabs">
+				<view v-for="(item, index) in list" :key="index" class="tab_item"
+					:class="[list.length == 2 ? 'twoBtn' : list.length == 3 ? 'threeBtn' : '',{nactive: current == index}]" @click="change(index)">{{ item.name }}</view>
 			</view>
-			
-		</view>
-		<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current==0">
-			<view class="content">
-				<view v-html="detail.mobileDetailHtml" style="width: 100%;overflow: hidden;"></view>
+
+			<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current==0">
+				<view class="content">
+					<view v-html="detail.mobileDetailHtml" style="width: 100%;overflow: hidden;"></view>
+				</view>
 			</view>
-		</view>
-		<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current==1">
-			<view >
-				<view v-for="(item,index) in courseList" :key="index" >
-					<view class="courseItemBox" >
-						<view class="courseItem" @click="openCourse(item)">
-							<view class="courseName">{{item.courseName}}</view>
-							<view>
-								<image src="/static/icon/up.png" class="icon_up" v-if="item.down"></image>
-								<image src="/static/icon/down.png" class="icon_up" v-if="!item.down"></image>
+			<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current==1">
+				<view >
+					<view v-for="(item,index) in courseList" :key="index" >
+						<view class="courseItemBox" >
+							<view class="courseItem" @click="openCourse(item)">
+								<view class="courseName">{{item.courseName}}</view>
+								<view>
+									<image src="/static/icon/up.png" class="icon_up" v-if="item.down"></image>
+									<image src="/static/icon/down.png" class="icon_up" v-if="!item.down"></image>
+								</view>
 							</view>
-						</view>
-						<view v-show="!item.down">
-							<view v-for="(itemM,indexM) in item.menuList"  :key="indexM">
-								<courseModule :courseId="itemM.courseId" :needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false" v-if="itemM.type==1" :menuItem="itemM"></courseModule>
-								<courseChapter :courseId="itemM.courseId" :needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false" v-if="itemM.type==2" :isBuy="false" :menuItem="itemM"></courseChapter>
-								<courseSection :courseId="itemM.courseId" v-if="itemM.type==3" :isBuy="false" :menuItem="itemM"></courseSection>
-								<u-line></u-line>
-								
+							<view v-show="!item.down">
+								<view v-for="(itemM,indexM) in item.menuList"  :key="indexM">
+									<courseModule :courseId="itemM.courseId" :needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false" v-if="itemM.type==1" :menuItem="itemM"></courseModule>
+									<courseChapter :courseId="itemM.courseId" :needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false" v-if="itemM.type==2" :isBuy="false" :menuItem="itemM"></courseChapter>
+									<courseSection :courseId="itemM.courseId" v-if="itemM.type==3" :isBuy="false" :menuItem="itemM"></courseSection>
+									<u-line></u-line>
+									
+								</view>
 							</view>
 						</view>
+						
 					</view>
-					
 				</view>
 			</view>
-		</view>
-		<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current==2">
-			<view >
-				<view v-for="(item,index) in freeMenuList" :key="index" >
-					<view class="courseItemBox" >
-						<view class="courseItem">
-							<view class="courseName">{{item.freeExamName}}</view>
+			<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current==2">
+				<view >
+					<view v-for="(item,index) in freeMenuList" :key="index" >
+						<view class="courseItemBox" >
+							<view class="courseItem">
+								<view class="courseName">{{item.freeExamName}}</view>
+							</view>
 						</view>
+						
 					</view>
-					
 				</view>
 			</view>
 		</view>
+
+		
 		<view class="bottomBox" v-if="!hideBuyState">
 			<!-- <view class="priceTag">¥ {{toFixed(detail.standPrice)}}</view> -->
             <view class="priceTag">分享</view>
@@ -399,7 +416,7 @@ export default {
 		background-color: #EAEEF1;
 	}
 </style>
-<style scope>
+<style lang="scss" scope>
 	.video_t2 {
 		font-size: 24rpx;
 		font-family: PingFang SC;
@@ -440,6 +457,73 @@ export default {
 	.video_box {
 		position: relative;
 	}
+	.contents {
+		width: 100%;
+		height: 100%;
+		background-color: #ffffff;
+		border-radius: 24rpx 24rpx 0rpx 0rpx;
+		position: relative;
+		top: -27rpx;
+		left: 0;
+	}
+	.cou_title {
+		height: 210rpx;
+		padding: 27rpx 56rpx 0rpx 56rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		border: 1rpx solid;
+	}
+	.prices {
+		.price_sym {
+			font-size: 20rpx;
+			color: #333333;
+			position: relative;
+			top: -23rpx;
+			left: 0;
+			margin-right: 10rpx;
+		}
+		.price_word {
+			font-size: 42rpx;
+			font-weight: bold;
+			color: #FC3F3F;
+		}
+	}
+	// tab
+	.tabs {
+		// width: 100%;
+		height: 78rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #E0E1E2;
+		border-radius: 38rpx;
+		margin: 34rpx 24rpx 24rpx;
+		padding: 0rpx 5rpx;
+		.tab_item {
+			width: 345rpx;
+			height: 65rpx;
+			line-height: 65rpx;
+			font-size: 28rpx;
+			font-weight: bold;
+			border-radius: 32rpx;
+			text-align: center;
+			color: #333;
+			&.nactive {
+				color: #fff;
+				background-color: #3577E8;
+			}
+			&.twoBtn {
+				width: 50%;
+			}
+			&.threeBtn {
+				width: 33%;
+			}
+		}
+		// /deep/  .u-tabs {
+		// 	background:none!important;
+		// }
+	}
 	.courseName{
 		white-space:nowrap;
 		overflow:hidden;
@@ -509,7 +593,6 @@ export default {
 		padding: 0 30rpx;
 	}
 	.blackFont{
-		color: #333333;
 		margin: 0 4rpx;
 	}
 	.wk_icon{
@@ -517,11 +600,11 @@ export default {
 		height: 24rpx;
 		margin-right: 12rpx;
 	}
-	.noteTag{
-		font-size: 24rpx;
+	.noteTag, .blackFont {
+		font-size: 30rpx;
 		font-family: PingFang SC;
-		font-weight: 500;
-		color: #999999;
+		font-weight: 400;
+		color: #666;
 		align-items: center;
 	}
 	.priceTag{
@@ -539,7 +622,7 @@ export default {
 		font-size: 32rpx;
 		font-weight: bold;
 		color: #333333;
-		margin-left: 8rpx;
+		// margin-left: 8rpx;
 	}
 	.yearTag{
 		width: 80rpx;