hgrrx-h5/pages/index/index.vue

<template>
	<view class="content">
		<view class="top_bg">
			<view class="hflex acenter jbetween top">
				<image src="/static/image/index1/logo.png" class="logo"></image>
				<view class="vflex">
					<view class="top_title">線上課程,直播,活動,求職,補習,一應俱全</view>
					<view class="top_title2">「Day Day U」APP開啟更多功能</view>
				</view>
				<view class="top_btn hflex acenter jcenter" @click="detail">下載</view>
			</view>
			<view class="hflex acenter jcenter logo_box">
				<image src="/static/image/index1/logo.png" class="logo"></image>
			</view>
			<view class="banner">
				<u-swiper :list="bannerList" keyName="logo" height="250" @change="changeBanner" @click="clickBanner">
					<view slot="indicator" class="indicator">
						<view class="indicator_dot" v-for="(item,index) in bannerList" :key="index" :class="index === current ? 'indicator_dot--active': ''"> </view>
					</view>
				</u-swiper>
			</view>
		</view>
		<view class="tabs hflex acenter jcenter">
			<block v-for="(item,index) in tabs" :key="index">
				<view class="tab_item vflex acenter jcenter" @click="toDetail(index)">
					<image :src="item.img" class="tab_img"></image>
					<view class="tab_text">{{item.name}}</view>
				</view>
			</block>
		</view>
		<view class="video">
			<video :src="video"></video>
		</view>
		<view class="btn_group hflex acenter jcenter">
			<view class="btn1 hflex acenter jcenter">成為導師</view>
			<view class="btn2 hflex acenter jcenter">用戶註冊</view>
		</view>
		<view class="box">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="box_item vflex acenter jcenter" :id="'box' + index">
					<view class="title">{{item.name}}</view>
					<image class="box_img" :src="item.img"></image>
					<view class="box_list">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<view class="vflex">
								<view class="item_title">{{item2.title}}</view>
								<view class="item_name">{{item2.name}}</view>
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>
		<view class="bottom vflex acenter jcenter">
			<image :src="bottom.img1" class="bottom_img"></image>
			<view class="hflex acenter jcenter">
				<image :src="bottom.img2" class="bottom_left"></image>
				<image :src="bottom.img3" class="bottom_right"></image>
			</view>
		</view>
		<view class="footer">
			<view class="hflex acenter jcenter foot_btn1">聯絡我們</view>
			<view class="hflex acenter jcenter foot_btn1">進入桌面版</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				bannerList: [
				],
				current: 0,
				tabs: [
					{
						img: '/static/image/index1/tab1.png',
						name: '線上課程'
					},
					{
						img: '/static/image/index1/tab2.png',
						name: '直播/活動'
					},
					{
						img: '/static/image/index1/tab3.png',
						name: '上網問功課'
					},
					{
						img: '/static/image/index1/tab4.png',
						name: '招聘信息'
					},
				],
				video: '',
				pageList: [
					{
						img: '/static/image/index1/img1.png',
						name: '線上課程',
						list: [
							{
								title: '直接回復',
								name: '想問多少？直接回復你想在討論的訊息，之後重溫問答對話一目了然',
							},
							{
								title: '有梳理教學指導',
								name: '導師都續遵守教學指引，以確保同學在獲得解答的同時會成功掌握相關的概念及解題技巧',
							}
						]
					},
					{
						img: '/static/image/index1/img2.png',
						name: '直播/活動',
						list: [
							{
								title: '隨時隨地，任問熱門科目',
								name: '',
							},
							{
								title: '檢查答案  vs  詳細解答',
								name: '按你的需求選擇導師的回答模式“快速檢查、細心解答，任君選擇',
							},
							{
								title: '智能系統為您找導師',
								name: '',
							}
						]
					},
					{
						img: '/static/image/index1/img3.png',
						name: '上網問功課',
						list: [
							{
								title: '直接回復',
								name: '想問多少？直接回復你想在討論的訊息，之後重溫問答對話一目了然',
							},
							{
								title: '有梳理教學指導',
								name: '導師都續遵守教學指引，以確保同學在獲得解答的同時會成功掌握相關的概念及解題技巧',
							}
						]
					},
					{
						img: '/static/image/index1/img4.png',
						name: '招聘信息',
						list: [
							{
								title: '直接回復',
								name: '想問多少？直接回復你想在討論的訊息，之後重溫問答對話一目了然',
							},
							{
								title: '有梳理教學指導',
								name: '導師都續遵守教學指引，以確保同學在獲得解答的同時會成功掌握相關的概念及解題技巧',
							}
						]
					},
				],
				bottom: {
					img1: '/static/image/index1/bottom_img1.png',
					img2: '/static/image/index1/bottom_img2.png',
					img3: '/static/image/index1/bottom_img3.png',
				},
				video_id: ''
			}
		},
		onLoad() {
			that = this
			that.getBanner()
			that.getVideo()
		},
		methods: {
			getBanner() {
				$api.req({
					url: '/api/Index/banner',
				}, function(res) {
					if(res.code == 1) {
						that.bannerList = res.data
					}
				})
			},
			getVideo() {
				$api.req({
					url: '/api/Index/recommend_course',
					
				},function(res) {
					if(res.code == 1) {
						that.video = res.data[0].video
						that.video_id = res.data[0].id
					}
				})
			},
			changeBanner(e) {
				that.current = e.current
			},
			clickBanner() {
				
			},
			toDetail(index) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#box'+index).boundingClientRect(data => {
				  var top = data.top
				  uni.pageScrollTo({
				  	scrollTop: top,
				  	duration: 100
				  });
				}).exec();
			},
			detail() {
				$api.jump('/pages/detail/detail?id=' + that.video_id)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		.top_bg {
			width: 100%;
			height: 822rpx;
			background: url('../../static/image/index1/top_bg.png') no-repeat;
			background-size: 100%;
			.logo_box {
				width: 100%;
				padding: 50rpx 0;
				.logo {
					width: 153rpx;
					height: 107rpx;
				}
			}
			.top {
				width: 100%;
				height: 120rpx;
				background: #FFFFFF;
				box-shadow: 0px 6rpx 12rpx 0px rgba(0,0,0,0.16);
				box-sizing: border-box;
				padding: 20rpx;
				.logo {
					width: 112rpx;
					height: 77rpx;
				}
				.top_title {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					line-height: 30rpx;
				}
				.top_title2 {
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;
					padding-top: 4rpx;
				}
				.top_btn {
					width: 114rpx;
					height: 46rpx;
					background: #231E7F;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.banner {
				position: relative;
				.u-swiper {
					overflow: unset !important;
				}
				.u-swiper__indicator {
					position: absolute;
					// left: 296rpx;
					bottom: -29rpx;
				}
				.indicator {
					width: 100%;
					@include flex(row);
					justify-content: center;
			
					&_dot {
						 height: 16rpx;
						 width: 16rpx;
						 border-radius: 100px;
						 background: linear-gradient(180deg, #4AC1FD 0%, #B259FA 100%);
						 margin: 0 5px;
						 transition: background-color 0.3s;
						 opacity: 0.35;
				
						&--active {
							 background: linear-gradient(180deg, #4AC1FD 0%, #B259FA 100%);
							 opacity: 1;
						 }
					}
				}
				 .indicator-num {
					padding: 2px 0;
					background-color: rgba(0, 0, 0, 0.35);
					border-radius: 100px;
					width: 35px;
					@include flex;
					justify-content: center;
			
					&__text {
						 color: #FFFFFF;
						 font-size: 12px;
					 }
				}

			}

		}
		.tabs {
			width: 100%;
			box-sizing: border-box;
			padding: 60rpx 0 48rpx;
			.tab_item {
				width: 25%;
				.tab_img {
					width: 68rpx;
					height: 68rpx;
				}
				.tab_text {
					padding-top: 5rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 33rpx;
				}
			}
		}
		.video {
			width: 100%;
			height: 422rpx;
			uni-video {
				width: 100%;
				height: 422rpx;
			}
		}
		.btn_group {
			width: 100%;
			padding: 36rpx 0 0;
			.btn1 {
				width: 246rpx;
				height: 68rpx;
				background: #231E7F;
				border-radius: 40rpx;
				margin-right: 64rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
				letter-spacing: 1rpx;
			}
			.btn2 {
				width: 246rpx;
				height: 68rpx;
				background: #5581FB;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
				letter-spacing: 1rpx;
			}
		}
		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 52rpx;
			.box_item {
				width: 100%;
				padding: 48rpx 0 0;
				.title {
					font-size: 36rpx;
					font-weight: 600;
					color: #59CCC2;
					line-height: 36rpx;
					background: linear-gradient(180deg, #4AC1FD 0%, #B259FA 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.box_img {
					width: 646rpx;
					height: 330rpx;
					margin: 24rpx 0;
				}
				.box_list {
					width: 100%;
					.item_title {
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 28rpx;
						padding: 26rpx 0 0 24rpx;
						position: relative;
					}
					.item_title::before {
						content: "";
						width: 12rpx;
						height: 12rpx;
						border: 2rpx solid #9E6DFB;
						position: absolute;
						top: 32rpx;
						left: -12rpx;
						border-radius: 50%;
					}
					.item_name {
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 34rpx;
						padding: 20rpx 0 0 24rpx;
					}
				}
			}
		}
		.bottom {
			width: 100%;
			padding: 40rpx 0 20rpx;
			.bottom_img {
				width: 316rpx;
				height: 368rpx;
				margin-bottom: 48rpx;
			}
			.bottom_left {
				width: 216rpx;
				height: 64rpx;
				margin-right: 56rpx;
			}
			.bottom_right {
				width: 216rpx;
				height: 64rpx;
			}
		}
		.footer {
			width: 100%;
			height: 262rpx;
			background: url('/static/image/index1/footer_bg.png') no-repeat;
			background-size: 100%;
			.foot_btn1 {
				width: 490rpx;
				height: 68rpx;
				background: linear-gradient(180deg, #4AC1FD 0%, #B259FA 100%);
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
				margin: 8rpx auto 20rpx;
			}
		}
	}
</style>