选课页面布局优化

pages/course/index.vue

@@ -6,17 +6,24 @@
 			</view>
 		</u-navbar>
 		<view v-show="!show">
-			<view style="position: fixed;width: 100%;z-index: 999;background-color: #FFFFFF;">
-				<u-line color="#D6D6DB" />
-				<view style="display: flex;justify-content: space-between;height: 78rpx;line-height: 78rpx;padding: 0 30rpx;font-size: 28rpx;">
-					<view style="color: #666666;white-space: nowrap;width: 80%;overflow-x: hidden;">{{selObj.eName}}：{{selObj.pName}}-{{selObj.bName}}</view>
-					<view style="color: #007AFF;width: 20%;font-size: 32rpx;" @click="openLeft()">重新选择</view>
-				</view>
-				<u-line color="#D6D6DB" />
-				<view style="display: flex;align-items:center;">
-					<view style="margin: 0 auto;"><u-tabs :list="list"  :current="current" @change="change" :scrollable="false"></u-tabs></view>
+			<view style="position: fixed;width: 100%;z-index: 999;">
+				<view class="bg_color"></view>
+				<view class="check_ck">
+					<view class="checked">
+						<view style="color: #666666;white-space: nowrap;width: 75%;overflow-x: hidden;">{{selObj.eName}}：{{selObj.pName}}-{{selObj.bName}}</view>
+						<view class="again_ck" @click="openLeft()">
+							<view style="color: #007AFF;font-size: 32rpx;">重新选择</view>
+							<u-icon name="list" color="#007AFF" size="40"></u-icon>
+						</view>
+					</view>
+					<view style="display: flex;align-items:center;">
+						<view style="margin: 0 auto;">
+							<u-tabs :list="courseLists" height='97'  :current="current" @change="change" :scrollable="false"></u-tabs>
+						</view>
+					</view>
 				</view>
-				<u-line color="#D6D6DB" />
+				
+				<!-- <u-line color="#D6D6DB" /> -->
 				<view class="menuSel" v-show="current==0">
 					<scroll-view class="r_sliper" scroll-x="true" >
 						<view v-for="(item,index) in sList" :key="index" style="margin-right: 20rpx;display:inline-block">
@@ -45,7 +52,7 @@
 					</scroll-view>
 				</view>
 			</view>
-			<view v-show="current==0">
+			<view v-show="current==0" class="contents">
 				<view class="listBox">
 					<navigator  hover-class="none" :url="'/pages3/course/detail?id='+item.goodsId" v-for="(item,index) in list1" :key="index" >
 						<view class="itemBox">
@@ -54,7 +61,7 @@
 								<view class="yearTag" v-if="item.year">{{item.year}}</view>
 								<view class="titleTag">{{item.goodsName}}</view>
 							</view>
-							<view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
+							<view style="display: flex;justify-content: space-between;margin-top: 15rpx;">
 								<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
 								共 <text class="blackFont">{{item.courseNum}}</text> 
 								<text class="margin30">课程</text>
@@ -66,7 +73,7 @@
 					<view class="emptyTip" v-if="list1.length==0">暂未上架相关网课~</view>
 				</view>
 			</view>
-			<view v-show="current==1">
+			<view v-show="current==1" class="contents">
 				<view class="listBox">
 					<navigator  hover-class="none" :url="'/pages2/bank/detail?id='+item.goodsId" v-for="(item,index) in list2" :key="index" >
 						<view class="itemBox">
@@ -79,7 +86,7 @@
 									<view class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
 								</view>
 							</view>
-							<view style="display: flex;justify-content: space-between;margin-top: 13rpx;" v-if="false">
+							<view style="display: flex;justify-content: space-between;margin-top: 15rpx;" v-if="false">
 								<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
 								共 <text class="blackFont">6</text> 
 								<view class="margin30">张卷</view>
@@ -92,7 +99,7 @@
 				</view>
 			</view>
 			
-			<view v-show="current==2">
+			<view v-show="current==2" class="contents">
 				<view class="listBox">
 					<navigator  hover-class="none" :url="'/pages5/liveDetail/index?id='+item.goodsId" v-for="(item,index) in list3" :key="index" >
 						<view class="itemBox">
@@ -105,7 +112,7 @@
 									<view class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
 								</view>
 							</view>
-							<view style="display: flex;justify-content: space-between;margin-top: 13rpx;" v-if="false">
+							<view style="display: flex;justify-content: space-between;margin-top: 15rpx;" v-if="false">
 								<view class="noteTag">
 									<image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
 									<view class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
@@ -142,7 +149,7 @@ export default {
 	data() {
 		return {
 			show:false,
-			list:[
+			courseLists:[
 				{
 					name: '网课'
 				},
@@ -384,6 +391,38 @@ export default {
 	
 </style>
 <style scoped lang="scss">
+.bg_color {
+	width: 100%;
+	height: 16rpx;
+	background-color: #EAEEF1;
+}
+.check_ck {
+	height: 211rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx 5rpx 5rpx 1rpx rgba(1,99,235,0.0500);
+	border-radius: 24rpx 24rpx 0rpx 0rpx;
+	padding: 0 38rpx;
+	.again_ck {
+		width: 25%;
+		display: flex;
+		align-items: center;
+	    justify-content: space-between;
+	}
+}
+.checked {
+	display: flex;
+	justify-content: space-between;
+	height: 108rpx;
+	line-height: 108rpx;
+	border-bottom: 1rpx solid #EEEEEE;
+	font-size: 28rpx;
+	
+}
+.contents {
+	position: relative;
+    left: 0;
+    top: 320rpx;
+}
 	.emptyTip{
 		color: #999999;
 		font-size: 32rpx;
@@ -500,17 +539,17 @@ export default {
 		margin-right: 12rpx;
 	}
 	.noteTag{
-		ont-size: 24rpx;
+		font-size: 24rpx;
 		font-family: PingFang SC;
 		font-weight: 500;
 		color: #999999;
 		align-items: center;
 	}
 	.priceTag{
-		font-size: 30rpx;
+		font-size: 32rpx;
 		font-family: PingFang SC;
 		font-weight: bold;
-		color: #FF2D55;
+		color: #FC3F3F;
 	}
 	.titleTag{
 		font-size: 32rpx;
@@ -531,21 +570,22 @@ export default {
 	}
 	.itemBox{
 		background: #FFFFFF;
-		box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
 		border-radius: 24rpx;
 		width: 100%;
-		padding: 24rpx;
+		padding: 23rpx 22rpx 32rpx 22rpx;
 		margin-bottom: 24rpx;
+		box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
 	}
 	.listBox{
 		background-color: #EAEEF1;
 		padding: 24rpx;
 		position: relative;
-		top: 235rpx;
+		// top: 235rpx;
 	}
 	.menuSel{
 		width: 100%;
-		height: 70rpx;
+		// height: 70rpx;
+		padding: 30rpx 0rpx;
 		background: #EAEEF1;
 		white-space:nowrap;
 		overflow: hidden;
@@ -554,20 +594,20 @@ export default {
 		padding: 0 20rpx;
 	}
 	.r_t1{
-		height: 48rpx;
+		// height: 48rpx;
 		background: #007AFF;
-		border-radius: 16rpx;
-		padding: 3rpx 8rpx;
-		margin-top: 11rpx;
+		border-radius: 8rpx;
+		padding: 9rpx 21rpx;
+		// margin-top: 11rpx;
 		color: #FFFFFF;
 	}
 	.r_t2{
-		height: 48rpx;
+		// height: 48rpx;
 		background: #FFFFFF;
 		border: 2rpx solid #EEEEEE;
-		border-radius: 16rpx;
-		padding: 3rpx 8rpx;
-		margin-top: 11rpx;
+		border-radius: 8rpx;
+		padding: 9rpx 21rpx;
+		// margin-top: 11rpx;
 		color:#666666;
 		font-size: 30rpx;
 	}