<template>
	<view class="study">
		<view class="banner">
			<u-swiper :list="list"></u-swiper>
		</view>
		<!-- <u-tabs :list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
		<view>
					<u-tabs-swiper ref="uTabs" :list="tabs" :current="current" @change="tabsChange" :is-scroll="false"
					 swiperWidth="750"></u-tabs-swiper>
				</view>
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 800rpx;width:100%;" @scrolltolower="onreachBottom">
							<view class="standard">
								<text>充电桩交付规范</text>
								<text>></text>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 666rpx;width:100%;" @scrolltolower="onreachBottom">
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view><view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="notice" @click="bbb">
								<view class="n-head">
									《关于充电桩xxxx》
								</view>
								<view class="">
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
									xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height:500rpx;width:100%;" @scrolltolower="onreachBottom">
							<view class="lean">
								<view class="top">
									<view class="currency-class">
										<text class="title">通用课程</text>
										<view class="class1">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													服务规范
												</view>
												<view class="">
													为用户提供更好服务,自己赚更多钱
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<u-line-progress  active-color="#2979ff" :percent="30" style="width:54%;"></u-line-progress>
													<text>继续</text>
												</view>
											</view>
										</view>
										<view class="class1">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													接单操作
												</view>
												<view class="">
													快速学习,使用APP接单、抢单
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<u-line-progress  active-color="#2979ff" :percent="0" style="width:54%;"></u-line-progress>
													<text>未观看</text>
												</view>
											</view>
										</view>
									</view>
									<view class="currency-class">
										<text class="title">技能课程</text>
										<view class="class1">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													从0-1学习充电桩安装服务
												</view>
												<view class="">
													让你全面了解充电桩市场及服务规范
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<u-line-progress  active-color="#2979ff" :percent="100" style="width:54%;"></u-line-progress>
													<text>完成</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y style="height:800rpx;width:100%;" @scrolltolower="onreachBottom">
							<view class="lean">
								<view class="top">
									<view class="currency-class">
										<text class="title">通用认证</text>
										<view class="class1" @click="aaa">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													服务规范
												</view>
												<view class="">
													通过本认证,是接单的前提条件
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<text>随机20题,及格20题</text>
													<text>通过</text>
												</view>
											</view>
										</view>
										<view class="class1" @click="aaa">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													接单操作
												</view>
												<view class="">
													快速认证,是否具备接单操作能力
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<text>随机20题,及格16题</text>
													<text>未通过</text>
												</view>
											</view>
										</view>
									</view>
									<view class="currency-class">
										<text class="title">技能认证</text>
										<view class="class1" @click="aaa">
											<image class="img" src="../../static/logo.png" mode=""></image>
											<view class="right">
												<view class="">
													从0-1学习充电桩安装服务
												</view>
												<view class="">
													通过本认证后,可接充电桩业务单
												</view>
												<view class="" style="display:flex;justify-content: space-between;">
													<text>随机30题,及格25题</text>
													<text>未通过</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
		</view>
	</view>
	
	
</template>

<script>
	export default{
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tabs:[
					{
						name:'交付规范'
					},{
						name:'培训通知'
					},{
						name:'在线学习',
					},{
						name:'考核认证'
					}
				],
				current:0,
				swiperCurrent:0,
			}
		},
		methods: {
			//tabs通知swiper切换
			tabsChange(index){
				this.swiperCurrent = index;
			},
			//swiper-item左右移动,通知tabs的滑块跟随移动
			transition(e){
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			aaa(){
				
				wx.navigateTo({
					
					url:'./assessment'
				})
			},
			bbb(){
				wx.navigateTo({
					
					url:'./news-details'
				})
			},
			//scroll-view到底部加载更多
			onreachBottom() {
							
			}
		}
	}
</script>

<style>
	.study{
		background: #f9f9f9;
		padding: 15rpx;
		height: 100%;
	}
	.banner{
		padding:2rpx;
	}
	//交付规范
	.standard{
		width: 656rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #82848A;
		padding: 0 34rpx;
		margin:72rpx auto;
	}
	//培训通知
	.notice{
		border: #808080 solid 2rpx;
		width: 100%;
		height: 400rpx;
		margin-top: 36rpx;
	}
	.n-head{
		text-align: center;
		margin: 32rpx 0 ;
	}
	//在线学习
	.currency-class{
		width: 100%;
		height: 455rpx;
		background: #FFFFFF;
		padding: 18rpx;
		margin-bottom: 11px;
	}
	.class1{
		display: flex;
		justify-content: space-between;
		padding-top: 22rpx;
		margin-top: 28rpx;
		border-top:1rpx solid #808080;	
	}
	.img{
		width: 200rpx;
		height: 126rpx;
		display: block;
		margin-right: 0rpx;
		
	}
	.right{
		width: 428rpx;
		height: 147rpx;
	}
	.tab{
		background: #fff;
		height: 82rpx;
		margin: 0 0;
	}
	.text{
		margin: 0 40rpx;
		line-height: 82rpx;
		color: #667eb5;
	}
	.content{
		margin: 5px 0;
		height: 485rpx;
		background: #fff;
	}
	swiper{
		height:691rpx;
	}
</style>