选课页面样式修改

common/styles/global/pages.scss

@@ -30,24 +30,20 @@
 	}
 
 	.agreement-checkbox-box {
-		  display: flex;justify-content: center;margin-top: 32rpx;line-height: 1;
+		  display: flex;justify-content: center;margin-top: 32rpx;line-height: 1;margin-left: -42rpx;
 		  uni-checkbox-group{font-size: 0;}
-		  .agreement-checkbox-input{
-			  width: 80rpx;height: 80rpx;
-			  border: 0;margin-right: 4rpx;font-size: 0;}
+		  .agreement-checkbox-input{width: 80rpx;height: 80rpx;border: 0;font-size: 0;}
 		  .uni-checkbox-input{
 			  width: 80rpx;height: 80rpx;border: 0;background-color: unset;position: relative;
-			  display: flex;align-items: center;justify-content: flex-end;
-			 /* @include ezy-no-repeat-cover;
-			  background-image: url("@/static/images/login/login-checked-bj.png"); */
 		  	svg {
-				width: 27rpx;height: 27rpx;top: 39rpx;left: 60rpx;background-color: #379af8;border-radius: 50%;
+				width: 19rpx;height: 19rpx;top: 32rpx;left: 48rpx;display: block;
+				background-color: #379af8;border-radius: 999rpx;transform: unset;position: absolute;
 				path{display: none;}
 				}
 		  }
 		  .uni-checkbox-input::before{
-			   content: '';width: 30rpx;height: 30rpx;border: 1rpx solid #379af8;display: block;
-			   border-radius: 50%;box-sizing: border-box;margin:0 5rpx;
+			content: '';width: 31rpx;height: 31rpx;border: 1rpx solid #379af8;border-radius: 999rpx;
+			box-sizing: border-box;position: absolute;top: 26rpx;left: 42rpx;
 		  }
 		  .agreement-text-box {
 		  		color: #333;font-size: 28rpx;flex-direction: row;display: flex;align-items: center;
@@ -76,10 +72,6 @@
 
 	/***** 输入验证码页面*****/
 	.yzm-nav-bar-icon{z-index: 99;}
-	.login-title-img{
-		width: 317rpx;height: 77rpx;@include ezy-no-repeat-cover;margin-right: auto;
-		background-image: url("@/static/images/login/login-yzm.png");
-	}
 	.yzm-show{width: 662rpx;font-size: 30rpx;color: #666;margin: 0 0 24rpx 12rpx;}
 	.yzm-btn{margin-top: 42rpx;}
 	.cxfs-btn{font-size: 30rpx;color: #3257b9;display: inline-block;margin: 60rpx auto 160rpx;}
@@ -1815,4 +1807,55 @@
 		margin: 30rpx auto 0;font-size: 30rpx;color: #fff;text-align: center;}
 	.xc-btn{background-image: url("@/static/images/common/confirm-btn.png");}
 	.qx-btn{background-image: url("@/static/images/common/cancel-btn.png");}
+}
+
+
+//  选课
+.ezy-xuanke-page{
+	width: 100%;height: 100vh;display: flex;flex-direction: column;padding-bottom: 100rpx;overflow: hidden; 
+	.xuanke-body{
+		display: flex;flex-direction: column;flex: 1;
+		position: relative;background-color: #fff;z-index: 1;
+		border-radius: 20rpx 20rpx 0 0;padding: 42rpx 0;overflow: hidden;
+		.xuanke-tab-box{display: flex;justify-content: center;margin-bottom: 24rpx;}
+		.tab-item{
+			width: 242rpx;height: 90rpx;line-height: 90rpx;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/xuanke/tab-item-bj.png");
+			text-align: center;color: #a6a6a6;    
+		}
+		.tab-item.active{
+			color: #fff;background-image: url("@/static/images/xuanke/tab-item-a.png");
+		}
+		
+		.sx-card-list{overflow-y: auto;flex: 1;padding: 24rpx 0 0;}
+		.sx-card-box{
+			border-radius: 16rpx;margin: 0 24rpx 32rpx;padding: 32rpx;
+			box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);
+			.card-head-box{
+				display: flex;
+				.head-img{width: 200rpx;height: 280rpx;flex-shrink: 0;}
+				.head-right-box{
+					margin-left: 24rpx;
+					.head-title{font-size: 34rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;}
+					.head-content{font-size: 26rpx;color: #666;text-align: justify;margin-bottom: 24rpx;}
+				}
+			}
+			.card-body-box{
+				border-top: 3rpx dashed #eee;margin-top: 42rpx;
+				.body-title{color: #7db0f4;margin: 24rpx 0 16rpx;font-size: 30rpx;}
+				.dj-item-row{
+					display: flex;flex-wrap: wrap;
+				}
+				.dj-item{
+					width: 202rpx;height: 77rpx;line-height: 77rpx;color: #fff;
+					text-align: center;@include ezy-no-repeat-cover;margin: 12rpx 16rpx 12rpx 0;
+					background-image: url("@/static/images/xuanke/dj-item.png");
+				}
+				.dj-item.active{background-image: url("@/static/images/xuanke/dj-item-a.png");}
+				.dj-item:nth-child(3n) {
+					margin-right: 0;
+				}
+			}
+		}
+	}
 }

pages/chanpinXuanze/components/shuxueList.vue

@@ -1,17 +1,23 @@
 <template>
-	<view>
-		<view v-for="item in list" :key="item.chanpinId">
-			<!-- 封面 -->
-			<image :src="item.cover"></image>
-			<!-- 名称 -->
-			<view>{{item.name}}</view>
-			<!-- 简介 -->
-			<view>{{item.intro}}</view>
-			<!-- 共计 -->
-			<view>共计{{item.gongji}}节课程</view>
-			<view>
-				<view>请选择学习等级</view>
-				<view v-for="cItem in item.levelList" @click="handleSelect(cItem)" :class="{active: item.active}">{{cItem.levelName}}</view>
+	<view class="sx-card-list">
+		<view v-for="item in list" :key="item.chanpinId" class="sx-card-box">
+			<view class="card-head-box">
+				<!-- 封面 -->
+				<image :src="item.cover" class="head-img"></image>
+				<view class="head-right-box">
+					<!-- 名称 -->
+					<view class="head-title">{{item.name}}</view>
+					<!-- 简介 -->
+					<view class="head-content">{{item.intro}}</view>
+					<!-- 共计 -->
+					<view class="head-content">共计{{item.gongji}}节课程</view>
+				</view>
+			</view>
+			<view class="card-body-box">
+				<view class="body-title">请选择学习等级</view>
+				<view class="dj-item-row">
+					<view class="dj-item" v-for="cItem in item.levelList" @click="handleSelect(cItem)" :class="{active: item.active}">{{cItem.levelName}}</view>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -32,10 +38,4 @@
 			url: `/pages/chanpinXuanze/banben?dengjiId=${item.dengjiId}`
 		})
 	}
-</script>
-
-<style scoped lang="scss">
-.active {
-	color: red
-}
-</style>
+</script>

pages/chanpinXuanze/index.vue

@@ -1,26 +1,26 @@
 <template>
-	<!-- 返回区域 -->
+	<view class="ezy-xuanke-page">
+		<!-- 返回区域 -->
 		<view class="icon-title-navBar-box">
 			<!-- <view @click="handleBack" class="nav-bar-icon"></view> -->
 			<text class="nav-bar-title">选课</text>
 		</view>
-		<view style="position: relative;background-color: #fff;z-index: 1;">
+		<view class="xuanke-body">
 			<!-- 头部区域 -->
-			<view >
-				<view v-for="item in data.list" :key="item.value" :class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin">{{item.name}}</view>
+			<view class="xuanke-tab-box">
+				<view v-for="item in data.list" :key="item.value" class="tab-item"
+				:class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin">{{item.name}}</view>
 			</view>
 			<!-- 英语列表 -->
-			<view class="list yingyu" v-if="data.chanpinActiveSelect == 1">
-				
-			</view>
+			<view v-if="data.chanpinActiveSelect == 1"> </view>
 			<!-- 数学列表 -->
-			<shuxueListVue class="list shuxue" v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
+			<shuxueListVue v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
 			<!-- 语文列表 -->
 			<view class="list yuwen" v-if="data.chanpinActiveSelect == 3">
 				
 			</view>
 		</view>
-		
+	</view>
 		<CustomTabBar :currentTabNumber="0"></CustomTabBar>
 </template>
 
@@ -68,8 +68,3 @@
 	})
 </script>
 
-<style scoped lang="scss">
-.active {
-	color: red
-}
-</style>