zc_saas_h5/pages/index/index.vue

<template>
	<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>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		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) {},
	onShow() {
		/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
	},
	onShareAppMessage(res) {
		var self = this;
		return {
			title: '中正',
			path: `/pages/index/index?inviteCode=` + userInfo == null ? '' : userInfo.userAccount
		};
	},
	methods: {
		tab(e) {
			this.tabCurrent = e;
		},
		updateHomePlan() {
			this.$refs.home.init();
		},
		beforeSwitch(index) {
			let that = this;
			if (index == 1) {
				this.isClick1 = true;
			}
			if (index == this.current) {
				return false;
			}
			if (!this.$method.isLogin()) {
				if (index == 0 || index == 1) {
					return true;
				} else {
					this.$navTo.togo('/pages/login/login');
					return false;
				}
			} else {
				if (index == 2) {
					this.$refs.refMy.init();
				}
				return true;
			}
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>

<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>