首页样式开发

common/styles/global/pages.scss

@@ -27,6 +27,100 @@
 	.login-btn{margin:48rpx 56rpx;}
 }
 
+/*** 首页 ***/
+.client-shouye-page{
+	overflow: auto;height: 100vh;padding-bottom: 150rpx;
+	.shouye-card-box{
+		margin: 20rpx;border: 1rpx solid;border-radius: 6rpx;
+	}
+	// head
+	.card-head-box{
+		height: 70rpx;display: flex;align-items: center;padding: 0 6rpx 0 20rpx;
+		.card-line-title {display: block;color: #fff;font-size: 30rpx;line-height: 1;}
+		.card-line-title:before{content: ' ';width: 6rpx;height: 28rpx;background-color:#fff;
+		margin-right: 12rpx;display: inline-block;vertical-align: middle;}
+		.card-more{
+			font-size: 24rpx;color: #fff;margin-left: auto;
+			.more-num{border: 1rpx solid;border-radius: 50%;box-sizing:border-box;
+			min-width: 26rpx;display: inline-flex;justify-content: center;margin-left:6rpx;
+			span{font-size: 18rpx;}
+			}
+			.more-jt{
+				width: 0;height: 0;display: inline-block;vertical-align: middle;
+				border-right: 5px solid transparent;border-bottom: 5px solid transparent;border-left: 6px solid #fff;
+				margin-left: 8rpx;border-top: 5px solid transparent; 
+			}
+		}
+	}
+	
+	// name
+	.card-name-box{
+		border-bottom: 1rpx dashed #ccc;margin: 0 10rpx 0 16rpx;padding: 16rpx 0;
+		display: flex;justify-content: space-between;align-items: center;
+		.card-name{
+			font-size: 28rpx;display: flex;align-items: center;
+			icon{width: 10rpx;height: 10rpx;border-radius: 10rpx;margin-right: 10rpx;}
+		}
+		.card-level{font-size: 26rpx;border: 1rpx solid;border-radius: 6rpx;padding: 2rpx 20rpx;}
+	}
+	// content
+	.card-content-box{
+		display: flex;display: flex;flex-wrap: wrap;padding: 20rpx 0;
+		.card-content-item{
+			display: flex;flex-direction: row;justify-content: center;align-items: center;margin: 10rpx 0;
+			icon{width: 70rpx;height: 70rpx;@include ezy-no-repeat-cover;margin-right: 10rpx;}
+			.card-time-icon{background-image: url("@/static/images/index/index-content-icon1.png");}
+			.card-sum-icon{background-image: url("@/static/images/index/index-content-icon3.png");}
+			.card-num-icon{background-image: url("@/static/images/index/index-content-icon4.png");}
+			.card-pass-icon{background-image: url("@/static/images/index/index-content-icon2.png");}
+			.content-text-box{
+				min-width: 140rpx;
+				text{font-size: 26rpx;color: #666;}
+				view{font-size: 32rpx;color: #333;}
+			}
+		}
+	}
+	
+	// bottom
+	.card-bottom-box{
+		border-top: 1rpx dashed #ccc;margin: 0 10rpx;
+		.index-card-btn{width: 360rpx;height: 70rpx;line-height: 70rpx;margin:16rpx auto;font-size: 30rpx;}
+	}
+	
+	// kaoshi
+	.kaoshi-card-box{
+		border-color:#3fd2a1;
+		.card-head-box{background-color:#4fe1b0;}
+		.card-level{color:#00a573;}
+		.card-name{color:#1e9472;}
+		.card-name icon{background-color:#1e9472;}
+		.kaoshi-content-box .card-content-item{width: 50%;}
+		.index-card-btn[type='default']{background-color: #4fe1b0;color: #fff;}
+	}
+	
+	// lianxi
+	.lianxi-card-box{
+		border-color:#6186fb;
+		.card-head-box{background-color:#6186fb;}
+		.card-level{color:#4794ff;}
+		.card-name{color:#4794ff;}
+		.kaoshi-content-box{
+			padding: 42rpx 0;
+			.card-content-item{width: 33.33%;}
+		} 
+		.index-card-btn[type='default']{background-color: #6186fb;color: #fff;}
+	}
+	
+	// kecheng
+	.kecheng-card-box{
+		border-color:#febb6a;
+		.card-head-box{background-color:#febb6a;}
+		.card-level{color:#ffba03;}
+		.card-name{color:#ffba03;}
+		.index-card-btn[type='default']{background-color: #febb6a;color: #fff;}
+	}
+}
+
 /*** 考试页面***/
 .admin-kaoshi-page,.client-kaoshi-page {
 	box-sizing: border-box;

components/listCard/kaoshiCard.vue

@@ -1,51 +1,54 @@
 <template>
-	<view class="kaoshi-card">
+	<view class="shouye-card-box kaoshi-card-box">
 		<!-- card title -->
-		<view><text>|</text><text>考试</text></view>
+		<view class="card-head-box">
+			<view class="card-line-title">考试</view>
+			<view class="card-more">更多<text class="more-num">{{data.count}}</text><icon class="more-jt"></icon></view>
+		</view>
+		
 		<!-- kaoshi title -->
-		<view> 	
-			<text v-if="data.name">·{{data.name}}</text>
-			<text>{{data.zyLevelName}}</text>
+		<view class="card-name-box"> 	
+			<view class="card-name" v-if="data.name"><icon></icon>{{data.name}}</view>
+			<text class="card-level">{{data.zyLevelName}}</text>
+			<!-- <view class="card-name"><icon></icon>考试名称</view>
+			<text class="card-level">初级</text> -->
 		</view>
 		<!-- 内容区域 -->
-		<view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>时间</view>
+		<view class="card-content-box kaoshi-content-box">
+			<view class="card-content-item">
+				<icon class="card-time-icon"></icon>
+				<view class="content-text-box">
+					<text>时间</text>
 					<view>{{data.totalTm}}分钟</view>
 				</view>
 			</view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>次数</view>
+			<view class="card-content-item">
+				<icon class="card-num-icon"></icon>
+				<view class="content-text-box">
+					<text>次数</text>
 					<view>{{data.joinCount}}次</view>
 				</view>
 			</view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>总分</view>
+			<view class="card-content-item">
+				<icon class="card-sum-icon"></icon>
+				<view class="content-text-box">
+					<text>总分</text>
 					<view>{{data.ksScore}}分</view>
 				</view>
 			</view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>及格分</view>
+			<view class="card-content-item">
+				<icon class="card-pass-icon"></icon>
+				<view class="content-text-box">
+					<text>及格分</text>
 					<view>{{data.okScore}}分</view>
 				</view>
 			</view>
-			<view>更多<text>{{data.count}}</text>
-				<icon>→</icon>
-			</view>
 		</view>
 		<!-- 底部 -->
-		<view>
-			<button v-if="data.status == 1">进行考试</button>
-			<button v-if="data.status == 2">进行考试</button>
-			<button v-if="data.status == 3">考试中</button>
+		<view class="card-bottom-box">
+			<button type="default" class="index-card-btn" v-if="data.status == 1">进行考试</button>
+			<button type="default" class="index-card-btn" v-if="data.status == 2">进行考试</button>
+			<button type="default" class="index-card-btn" v-if="data.status == 3">考试中</button>
 		</view>
 	</view>
 </template>

components/listCard/kechengCard.vue

@@ -1,30 +1,30 @@
 <template>
-	<view class="kecheng-card">
+	<view class="shouye-card-box kecheng-card-box">
 		<!-- card title -->
-		<view><text>|</text><text>课程</text></view>
+		<view class="card-head-box">
+			<view class="card-line-title">课程</view>
+			<view class="card-more">更多<text class="more-num">{{data.count}}</text><icon class="more-jt"></icon></view>
+		</view>
 		<!-- kaoshi title -->
-		<view>
-			<text v-if="data.name">·{{data.name}}</text>
-			<text>{{data.zyLevelName}}</text>
+		<view class="card-name-box">
+			<view class="card-name" v-if="data.name"><icon></icon>{{data.name}}</view>
+			<text class="card-level">{{data.zyLevelName}}</text>
 		</view>
 		<!-- 内容区域 -->
-		<view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>时间</view>
+		<view class="card-content-box kaoshi-content-box">
+			<view class="card-content-item">
+				<icon class="card-time-icon"></icon>
+				<view class="content-text-box">
+					<text>时间</text>
 					<view>{{data.totalTm}}分钟</view>
 				</view>
 			</view>
-			<view>更多<text>{{data.count}}</text>
-				<icon>→</icon>
-			</view>
 		</view>
 		<!-- 底部 -->
-		<view>
-			<button v-if="data.status == 1">课程学习</button>
-			<button v-if="data.status == 2">学习中</button>
-			<button v-if="data.status == 3">已完成</button>
+		<view class="card-bottom-box">
+			<button type="default" class="index-card-btn" v-if="data.status == 1">课程学习</button>
+			<button type="default" class="index-card-btn" v-if="data.status == 2">学习中</button>
+			<button type="default" class="index-card-btn" v-if="data.status == 3">已完成</button>
 		</view>
 	</view>
 </template>

components/listCard/lianxiCard.vue

@@ -1,44 +1,44 @@
 <template>
-	<view class="lianxi-card">
+	<view class="shouye-card-box lianxi-card-box">
 		<!-- card title -->
-		<view><text>|</text><text>练习</text></view>
+		<view class="card-head-box">
+			<view class="card-line-title">练习</view>
+			<view class="card-more">更多<text class="more-num">{{data.count}}</text><icon class="more-jt"></icon></view>
+		</view>
 		<!-- kaoshi title -->
-		<view>
-			<text v-if="data.name">·{{data.name}}</text>
-			<text>{{data.zyLevelName}}</text>
+		<view class="card-name-box">
+			<view class="card-name" v-if="data.name"><icon></icon>{{data.name}}</view>
+			<text class="card-level">{{data.zyLevelName}}</text>
 		</view>
 		<!-- 内容区域 -->
-		<view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>时间</view>
+		<view class="card-content-box kaoshi-content-box">
+			<view class="card-content-item">
+				<icon class="card-time-icon"></icon>
+				<view class="content-text-box">
+					<text>时间</text>
 					<view>{{data.totalTm}}分钟</view>
 				</view>
 			</view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>总分</view>
+			<view class="card-content-item">
+				<icon class="card-sum-icon"></icon>
+				<view class="content-text-box">
+					<text>总分</text>
 					<view>{{data.ksScore}}分</view>
 				</view>
 			</view>
-			<view>
-				<view>icon</view>
-				<view>
-					<view>及格分</view>
+			<view class="card-content-item">
+				<icon class="card-pass-icon"></icon>
+				<view class="content-text-box">
+					<text>及格分</text>
 					<view>{{data.okScore}}分</view>
 				</view>
 			</view>
-			<view>更多<text>{{data.count}}</text>
-				<icon>→</icon>
-			</view>
 		</view>
 		<!-- 底部 -->
-		<view>
-			<button v-if="data.status == 1">进行考试</button>
-			<button v-if="data.status == 2">进行考试</button>
-			<button v-if="data.status == 3">考试中</button>
+		<view class="card-bottom-box">
+			<button type="default" class="index-card-btn" v-if="data.status == 1">进行考试</button>
+			<button type="default" class="index-card-btn" v-if="data.status == 2">进行考试</button>
+			<button type="default" class="index-card-btn" v-if="data.status == 3">考试中</button>
 		</view>
 	</view>
 </template>

pages.json

@@ -15,7 +15,7 @@
 		{
 			"path": "pages/client/ShouYe/shouye",
 			"style": {
-				"navigationBarTitleText": "家政/考试人员首页"
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/admin/Jiazheng/index",

pages/client/ShouYe/shouye.vue

@@ -1,5 +1,8 @@
 <template>
-  <view className="client-shouye">
+  <view className="client-shouye-page">
+	<view class="icon-title-bjcolor-navBar-box">
+		<text class="nav-bar-title">用户名</text>
+	</view>
     <!-- 考试 -->
     <kaoshiCardVue></kaoshiCardVue>
     <!-- 练习 -->