首頁

pages/index/index.vue

@@ -1,6 +1,59 @@
 <template>
-	<view>
-		<view class="content"><u-button @click="jumpBank">前往题库</u-button></view>
+	<view class="index">
+		<u-navbar :is-back="false" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
+			<view class="slot-wrap">
+				<image  src="/static/logo2.png"></image>
+			</view>
+		</u-navbar>
+		<u-swiper :list="list" @change="e => current = e.current" :autoplay="false"></u-swiper>
+		<view class="content">
+			<view class="notice">
+				<image src="/static/icon/msg_icon1.png" class="icon"></image>
+				<view class="text">
+					您有2条新的通知
+				</view>
+				<view class="btn">立即查看</view>
+			</view>
+			<view class="date-list">
+				<view class="title">距离最近一次考试还剩 36 天</view>
+				<view class="list">
+					<view class="item" v-for="(item,index) in 7" :key="index">
+						<view class="top">{{text[index]}}</view>
+						<view class="bottom"  :class="{red:item==1,green:item==2,blue:item==3}">
+							{{item}}
+							
+							<view class="note" v-if="item==3">3</view>
+							<view class="point" v-if="item==4"></view>
+						</view>
+					</view>
+				</view>
+				<view class="btns">
+					<image class="left" src="/static/left.png"></image>
+					<view class="center">二级建造师市政公用工程</view>
+					<image class="right" src="/static/right.png"></image>
+				</view>
+			</view>
+			<u-tabs class="tabs" :current="tabCurrent" @change="tab" :list="list1" :activeStyle="{fontSize:'36rpx'}" :inactiveStyle="{color:'#EAEEF1',fontSize:'30rpx'}" sticky></u-tabs>
+			<view class="course-list">
+				<view class="item" v-for="item in 3">
+					<view class="img">
+						<image src="/static/wd_bg_login.jpg"></image>
+						<view class="time">2020</view>
+					</view>
+					<view class="text">
+						<view class="title">施工现场专业人员岗位培训基础班（设备安装质量员）</view>
+						<view class="desc">
+							<view class="left">
+								60
+								<text>学时</text>
+							</view>
+							<view class="right">¥ 999.00</view>
+						</view>
+					</view>
+					
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -9,7 +62,25 @@ import { mapGetters } from 'vuex';
 export default {
 	components: {},
 	data() {
-		return {};
+		return {
+			list:[
+				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+			],
+			tabCurrent:0,
+			text:['日','一','二','三','四','五','六'],
+			current:0,
+			indicatorDots: true,
+			autoplay: true,
+			interval: 2000,
+			duration: 500,
+			list1: [{
+					name: '推荐课程',
+				}, {
+					name: '推荐题库',
+				}]
+		};
 	},
 	onPullDownRefresh() {},
 	onLoad(option) {},
@@ -26,11 +97,8 @@ export default {
 		};
 	},
 	methods: {
-		jumpBank() {
-			this.$navTo.togo('/pages2/bank/question_report');
-		},
-		getDict() {
-		
+		tab(e) {
+			this.tabCurrent = e;
 		},
 		updateHomePlan() {
 			this.$refs.home.init();
@@ -59,15 +127,249 @@ export default {
 		}
 	},
 	onReachBottom() {},
-	// computed: { ...mapGetters(['userInfo']) }
+	computed: { ...mapGetters(['userInfo']) }
 };
 </script>
 
-<style scoped>
-.content {
-	height: 80vh;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+<style lang="scss" scoped>
+	
+.index {
+	.slot-wrap {
+		width:100%;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		
+		image {
+			margin-right:98rpx;
+			width: 178rpx;
+			height: 31rpx;
+		}
+	}
+	
+	.swiper {
+		width:100%;
+		image {
+			width:100%;
+		}
+		
+		.indicator__dot {
+			background: rgba(255, 255, 255, 1);
+			
+			&.indicator__dot--active {
+				background: rgba(0, 122, 255, 1);
+			}
+		}
+	}
+	
+	.content {
+		padding:16rpx;
+		background: rgba(234, 238, 241, 1);
+		
+		.notice {
+			padding:0 8rpx;
+			height: 56rpx;
+			background: linear-gradient(-90deg, rgba(255, 209, 0, 0.3), rgba(255, 255, 255, 0.3));
+			border-radius: 16rpx;
+			display: flex;
+			align-items: center;
+			
+			.icon {
+				width: 40rpx;
+				height: 40rpx;
+				margin-right: 8rpx;
+			}
+			
+			.text {
+				flex:1;
+				font-size: 24rpx;
+				color: #333333;
+			}
+			
+			.btn {
+				font-size: 24rpx;
+				color: #007AFF;
+			}
+		}
+		
+		.date-list {
+			margin-top:16rpx;
+			width: 718rpx;
+			height: 330rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding:18rpx 27rpx;
+			
+			.title {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #007AFF;
+			}
+			
+			.list {
+				margin-top:40rpx;
+				display: flex;
+				justify-content: space-around;
+				
+				.item {
+					.top {
+						text-align: center;
+						font-size: 26rpx;
+						color: rgba(102, 102, 102, 0.6);
+					}
+					
+					.bottom {
+						text-align: center;
+						line-height: 48rpx;
+						margin-top:30rpx;
+						width: 48rpx;
+						height: 48rpx;
+						border-radius: 50%;
+						color:rgba(51, 51, 51, 1);
+						font-size: 26rpx;
+						position:relative;
+						
+						&.red {
+							color:red;
+						}
+						
+						&.green {
+							color:green;
+						}
+						
+						&.blue {
+							background: #007AFF;
+							color:#fff;
+						}
+						
+						.note {
+							width: 30rpx;
+							height: 30rpx;
+							border: 2rpx solid #FF9500;
+							border-radius: 50%;
+							position:absolute;
+							top:-20rpx;
+							right:-20rpx;
+							line-height: 28rpx;
+							text-align: center;
+							color:#FF9500;
+							font-size: 26rpx;
+						}
+						
+						.point {
+							margin:0 auto;
+							width: 8rpx;
+							height: 8rpx;
+							background: #FF9500;
+							border-radius: 50%;
+						}
+					}
+				}
+			}
+			
+			.btns {
+				margin-top:50rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				
+				.left,.right {
+					width: 40rpx;
+					height: 40rpx;
+				}
+				
+				.center{
+					width: 440rpx;
+					height: 56rpx;
+					background: #FFFFFF;
+					box-shadow: 0px 0px 9rpx 1rpx rgba(47, 67, 121, 0.1);
+					border-radius: 28rpx;
+					color:rgba(255, 149, 0, 1);
+					line-height: 56rpx;
+					text-align: center;
+					font-size: 30rpx;
+					margin:0 30rpx;
+				}
+			}
+		}
+		
+		.tabs {
+			
+			/deep/  .u-tabs {
+				background:none!important;
+			}
+		}
+		
+		.course-list {
+			background:#fff;
+			padding:0 8rpx;
+			box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
+			border-radius: 16rpx ;
+			
+			.item {
+				padding:8rpx 0;
+				border-bottom:1rpx solid #eeeeee;
+				display: flex;
+				
+				.img {
+					position:relative;
+					margin-right:10rpx;
+					border-radius: 16rpx ;
+					overflow: hidden;
+					width: 320rpx;
+					height: 155rpx;
+					
+					image {
+						width:100%;
+						height:100%;
+					}
+					
+					.time {
+						position:absolute;
+						bottom:0;
+						right:0;
+						width: 80rpx;
+						height: 32rpx;
+						background: rgba(1, 25, 45, 0.4);
+						color:#fff;
+						text-align: center;
+						line-height: 32rpx;
+						font-size: 24rpx;
+						border-radius: 10rpx 0px 10rpx 0px;
+					}
+				}
+				
+				.text {
+					flex:1;
+					padding-right:10rpx;
+					.title {
+						font-size: 30rpx;
+						color: #333333;
+					}
+					
+					.desc {
+						margin-top:40rpx;
+						display: flex;
+						.left {
+							flex:1;
+							color:#333;
+							font-size: 26rpx;
+							
+							text {
+								font-size: 24rpx;
+								color:#999;
+							}
+						}
+						
+						.right {
+							font-size: 24rpx;
+							font-weight: bold;
+							color: #FF2D55;
+						}
+					}
+				}
+			}
+		}
+	}
 }
 </style>