题库ui界面更改

pages/questionBank/index.scss

@@ -5,97 +5,60 @@
 }
 .had_courses{
 	width: 100%;
-	padding: 0rpx 24rpx 31rpx;
+	padding: 24rpx 26rpx 40rpx;
 }
 
 .my_courses {
 	.titles {
 		font-size: 32rpx;
-		color: #333333;
-		margin: 44rpx 0rpx 24rpx 43rpx;
-		font-weight: bold;
+		color: #222;
+		margin: 56rpx 0rpx 32rpx;
+		font-weight: 500;
 		display: block;
 	}
 	.course_item {
 		width: 100%;
-		// height: 278rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
+		background: #F8F8FA;
 		border-radius: 24rpx;
-		padding: 29rpx 29rpx 20rpx 24rpx;
-		margin-bottom: 20rpx;
-		.titlews {
-			padding-bottom: 24rpx;
-		}
+		margin-bottom: 26rpx;
 		.cou_titles {
-			margin-bottom: 12rpx;
-			color: #333333;
-			font-size: 32rpx;
-			font-weight: bold;
-			width: 100%;
+			font-size: 36rpx;
+			font-weight: 500;
+			color: #222222;
+			line-height: 42rpx;
+			padding: 32rpx 26rpx 16rpx 26rpx;
+			// margin-bottom: 16rpx;
 			@include threeDot();
 		}
 		.learn_ranges {
-			color: #666;
-			font-size: 24rpx;
-			.l_range {
-				width: 20rpx;
-				height: 24rpx;
-				margin-right: 9rpx;
-			}
-			.l_time {
-				color: #333;
-			}
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #888691;
+			padding: 0rpx 26rpx;
+			// .l_range {
+			// 	width: 20rpx;
+			// 	height: 24rpx;
+			// 	margin-right: 9rpx;
+			// }
+			// .l_time {
+			// 	color: #333;
+			// }
 		}
 		.c_downs {
 			display: flex;
 			align-items: center;
-			// justify-content: flex-start;
 			justify-content: space-between;
 			padding-top: 24rpx;
 		}
-		// 状态
-		.all_status {
-			width: 654rpx;
-			background: #F8F8F8;
-			border-radius: 16rpx;
-		}
-		.class-warm {
-			padding: 20rpx 24rpx;
-			display: flex;
-			align-items: flex-start;
-
-			&__icon {
-				margin-right: 10rpx;
-			}
-
-			&__text {
-
-				.date {
-					color: #FF3B30;
-					font-size: 22rpx;
-					font-weight: 400;
-					// color: #969696;
-					margin-bottom: 8rpx;
-				}
-			}
-		}
-		.box_progress {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			margin-top: 20rpx;
-			// .disabled {
-			// 	opacity: 0.6;
-			// }
-		}
 		.study_btns {
 			width: 100%;
 			margin-top: 40rpx;
+			padding: 40rpx 26rpx 0rpx;
+			border-radius: 0rpx 0rpx 24rpx 24rpx;
 			display: flex;
 			align-items: center;
-			// justify-content: flex-end;
 			flex-wrap: wrap;
+			background: #F3F4F6;
 		}
 		.box_appoint {
 			display: flex;
@@ -109,164 +72,193 @@
 			
 		}
 		.exam_word {
-			font-size: 24rpx;
-			font-weight: 500;
-			// width: 144rpx;
-			padding: 0rpx 20rpx;
-			height: 56rpx;
-			line-height: 51rpx;
-			text-align: center;
-			background: #FFFFFF;
-			border-radius: 66rpx;
-			margin-right: 18rpx;
-			margin-bottom: 24rpx;
-		}
-		.ones {
-			color: #484848;
-			border: 2rpx solid #B9B9B9;
-		}
-		.intos {
-			color: #498AFE;
-			border: 2rpx solid #498AFE;
-		}
-	}
-	.lefts {
-		width: 204rpx;
-		height: 120rpx;
-		border-radius: 12rpx;
-		margin-right: 48rpx;
-		position: relative;
-		top: 0;
-		left: 0;
-		.lefet_img {
-			width: 100%;
-			height: 100%;
-			display: block;
-			border-radius: 16rpx;
-		}
-		.live_icon {
-			width: 65rpx;
-			height: 35rpx;
-			line-height: 35rpx;
-			border-radius: 12rpx 0rpx 12rpx 0rpx;
-			background-color: #FFB102;
-			color: #fff;
-			font-size: 20rpx;
-			text-align: center;
-			position: absolute;
-			top: 0;
-			left: 0;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			margin-bottom: 40rpx;
+			margin-right: 40rpx;
+			.btns_icon {
+				width: 44rpx;
+				height: 44rpx;
+			}
+			.paper_name {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #222222;
+				margin-top: 20rpx;
+			}
 		}
 	}
-	.rights {
-		width: 380rpx;
-		height: 120rpx;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;;
+	// .lefts {
+	// 	width: 204rpx;
+	// 	height: 120rpx;
+	// 	border-radius: 12rpx;
+	// 	margin-right: 48rpx;
+	// 	position: relative;
+	// 	top: 0;
+	// 	left: 0;
+	// 	.lefet_img {
+	// 		width: 100%;
+	// 		height: 100%;
+	// 		display: block;
+	// 		border-radius: 16rpx;
+	// 	}
+	// 	.live_icon {
+	// 		width: 65rpx;
+	// 		height: 35rpx;
+	// 		line-height: 35rpx;
+	// 		border-radius: 12rpx 0rpx 12rpx 0rpx;
+	// 		background-color: #FFB102;
+	// 		color: #fff;
+	// 		font-size: 20rpx;
+	// 		text-align: center;
+	// 		position: absolute;
+	// 		top: 0;
+	// 		left: 0;
+	// 	}
+	// }
+	// .rights {
+	// 	width: 380rpx;
+	// 	height: 120rpx;
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	justify-content: space-between;;
 		
-		.learn_progress {
-			width: 100%;
-			height: 100%;
+	// 	.learn_progress {
+	// 		width: 100%;
+	// 		height: 100%;
+	// 		display: flex;
+	// 		align-items: center;
+	// 		justify-content: space-between;
+	// 	}
+	// 	.progress_up {
+	// 		font-size: 24rpx;
+	// 		color: #999999;
+	// 		width: 100%;
+	// 		.progress_bar {
+	// 			margin-top: 16rpx;
+	// 		}
+	// 	}
+	// 	.progress_down {
+	// 		// width: 100%;
+	// 		display: flex;
+	// 		justify-content: space-between;
+	// 		align-items: center;
+	// 	}
+	// 	.enter_into {
+	// 		width: 144rpx;
+	// 		height: 52rpx;
+	// 		line-height: 52rpx;
+	// 		background: #FFB102;
+	// 		border-radius: 16rpx;
+	// 		font-size: 26rpx;
+	// 		font-weight: 500;
+	// 		color: #FFFFFF;
+	// 		text-align: center;
+	// 	}
+	// }
+	// 收藏集，做题记录
+	.bottons {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.items {
+			width: 216rpx;
+			height: 104rpx;
+			border-radius: 24rpx;
+			padding: 0rpx 24rpx 0rpx 28rpx;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-		}
-		.progress_up {
-			font-size: 24rpx;
-			color: #999999;
-			width: 100%;
-			.progress_bar {
-				margin-top: 16rpx;
+			.record_icon {
+				width: 40rpx;
+				height: 40rpx;
 			}
 		}
-		.progress_down {
-			// width: 100%;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-		.enter_into {
-			width: 144rpx;
-			height: 52rpx;
-			line-height: 52rpx;
-			background: #FFB102;
-			border-radius: 16rpx;
-			font-size: 26rpx;
+		.words {
+			font-size: 28rpx;
 			font-weight: 500;
-			color: #FFFFFF;
-			text-align: center;
+			color: #222222;
+		}
+		.one {
+			background: #E8F6FF;
+		}
+		.two {
+			background: #FFF6DE;
+		}
+		.three {
+			background: #E9FAF0;
 		}
 	}
-	// 收藏集，做题记录
-	.bottoms {
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 32rpx;
-		.item {
-			width: 335rpx;
-			&.collect {
-				position: relative;
-				font-size: 32rpx;
-				color: #FFFFFF;
-				height: 240rpx;
-				border-radius: 24rpx;
-				padding:32rpx;
+	// .bottoms {
+	// 	display: flex;
+	// 	justify-content: space-between;
+	// 	margin-bottom: 32rpx;
+	// 	.item {
+	// 		width: 335rpx;
+	// 		&.collect {
+	// 			position: relative;
+	// 			font-size: 32rpx;
+	// 			color: #FFFFFF;
+	// 			height: 240rpx;
+	// 			border-radius: 24rpx;
+	// 			padding:32rpx;
 				
-				.text {
-					position:relative;
-					z-index: 10;
-					font-size: 32rpx;
-					font-weight: bold;
-					color: #FFFFFF;
-				}
+	// 			.text {
+	// 				position:relative;
+	// 				z-index: 10;
+	// 				font-size: 32rpx;
+	// 				font-weight: bold;
+	// 				color: #FFFFFF;
+	// 			}
 				
-				.img {
-					position:absolute;
-					left:0;
-					top:0;
-					width:100%;
-					height:100%;
+	// 			.img {
+	// 				position:absolute;
+	// 				left:0;
+	// 				top:0;
+	// 				width:100%;
+	// 				height:100%;
 					
-				}
-			}
+	// 			}
+	// 		}
 			
-			&.list {
-				.list-in {
-					position:relative;
-					width: 335rpx;
-					height: 112rpx;
-					background: #007AFF;
-					border-radius: 24rpx;
-					display: flex;
-					align-items: center;
-					font-size: 32rpx;
-					color: #fff;
+	// 		&.list {
+	// 			.list-in {
+	// 				position:relative;
+	// 				width: 335rpx;
+	// 				height: 112rpx;
+	// 				background: #007AFF;
+	// 				border-radius: 24rpx;
+	// 				display: flex;
+	// 				align-items: center;
+	// 				font-size: 32rpx;
+	// 				color: #fff;
 					
-					&:first-of-type {
-						margin-bottom:16rpx;
-					}
+	// 				&:first-of-type {
+	// 					margin-bottom:16rpx;
+	// 				}
 					
-					.text {
-						padding-left:91rpx;
-						position:relative;
-						z-index: 10;
-						font-size: 32rpx;
-						font-weight: bold;
-						color: #FFFFFF;
-					}
+	// 				.text {
+	// 					padding-left:91rpx;
+	// 					position:relative;
+	// 					z-index: 10;
+	// 					font-size: 32rpx;
+	// 					font-weight: bold;
+	// 					color: #FFFFFF;
+	// 				}
 					
-					.img {
-						position:absolute;
-						left:0;
-						top:0;
-						width:100%;
-						height:100%;
-					}
-				}
-			}
-		}
-	}
+	// 				.img {
+	// 					position:absolute;
+	// 					left:0;
+	// 					top:0;
+	// 					width:100%;
+	// 					height:100%;
+	// 				}
+	// 			}
+	// 		}
+	// 	}
+	// }
 }
 .no_datas {
 	margin-top: 70rpx;

pages/questionBank/index.vue

@@ -8,9 +8,31 @@
 		<!-- 有学习的课程 -->
 		<view v-if="questionLists.length" class="had_courses">
 			<!-- 我的题库 -->
+
 			<view class="my_courses">
+				
+				<view class="bottons">
+					<navigator hover-class="none" url="/pages2/bank/question_record">
+						<view class="items one">
+							<view class="words">做题记录</view>
+							<image src="/static/bank/record.png" class="record_icon"></image>
+						</view>
+					</navigator>
+					<navigator hover-class="none" url="/pages2/subject/collect">
+						<view class="items two">
+							<view class="words">收藏集</view>
+							<image src="/static/bank/collect.png" class="record_icon"></image>
+						</view>
+					</navigator>
+					<navigator hover-class="none" url="/pages2/subject/wrong">
+						<view class="items three">
+							<view class="words">错题集</view>
+							<image src="/static/bank/wrong.png" class="record_icon"></image>
+						</view>
+					</navigator>
+				</view>
 				<text class="titles">我的题库</text>
-				<view class="bottoms">
+				<!-- <view class="bottoms">
 					<navigator hover-class="none" url="/pages2/subject/collect">
 						<view class="item collect">
 							<view class="text">收藏集<u-icon name="arrow-right"></u-icon></view>
@@ -37,12 +59,27 @@
 							</view>
 						</navigator>
 					</view>
-				</view>
+				</view> -->
 
 				<template v-if="questionLists.length">
 					<!-- @click="studyques(item)" -->
 					<view v-for="(item, index) in questionLists" :key="index" class="course_item">
-						<view>
+						<view class="cou_titles">{{ item.goodsName }}</view>
+						<view v-if="item.serviceStartTime && item.serviceEndTime" class="learn_ranges">
+							有效期至：{{ item.serviceEndTime | formate('yyyy.mm.dd') }}
+						</view>
+						<view class="study_btns">
+							<view v-for="(child, c_index) in item.paperVos" :key="c_index" class="exam_word"
+							 @click.stop="toDailyPractice(item, child)">
+							 	<image v-if="child.paperName == '每日一练'" class="btns_icon" src="/static/bank/daily.png"></image>
+								<image v-else-if="child.paperName == '随机练习'"  class="btns_icon" src="/static/bank/random.png"></image>
+								<image v-else-if="child.paperName.indexOf('考试') != -1"  class="btns_icon" src="/static/bank/examen.png"></image>
+								<image v-else-if="child.paperName.indexOf('真题') != -1"  class="btns_icon" src="/static/bank/zhenTi.png"></image>
+								<image v-else class="btns_icon" src="/static/bank/chapter.png"></image>
+							 	<text class="paper_name">{{ child.paperName }}</text>
+							</view>
+						</view>
+						<!-- <view>
 							<view class="cou_titles">{{ item.goodsName }}</view>
 							<view v-if="item.serviceStartTime && item.serviceEndTime" class="learn_ranges">
 								<image class="l_range" src="/static/learn/learn_range.png"></image>
@@ -67,12 +104,10 @@
 								</view>
 							</view>
 						</view>
-						<!-- 按钮 -->
 						<view class="study_btns">
 							<view v-for="(child, c_index) in item.paperVos" :key="c_index" class="exam_word intos"
 							 @click.stop="toDailyPractice(item, child)">{{ child.paperName }}</view>
-							<!-- <view class="exam_word intos" @click="studyques(item)">章节练习</view> -->
-						</view>
+						</view> -->
 					</view>
 				</template>
 				
@@ -80,8 +115,6 @@
 		</view>
 		<!-- 没有学习的课程 -->
 		<view v-if="!allLoading && !questionLists.length" class="no_datas">
-			<!-- <image class="courses" src="/static/learn/no_course.png" mode=""></image>
-			<view class="no_learns">您目前没有可学习的题库</view> -->
 			<image src="/static/learn/empty_status.png" class="empty_status"></image>
 			<text class="word_tip">暂无题库</text>
 			<view class="choose" @click="toChoose()">立即去选购</view>
@@ -194,7 +227,7 @@ export default {
 
 <style>
 page {
-	background: #eaeef1;
+	background: #FFFFFF;
 }
 </style>
 <style lang="scss" scoped>