mp-ui-user/pages/index/index.vue

<template>
	<view>
		<!-- 非H5撑高元素 -->
		<view class="status_bar"></view>
		<view class="box">
			<view class="box-top">
				<view class="box-top-action">
					<view class="box-top-action-item">
						<view class="flex box-top-action-item-cir">
							<u-icon name="scan" color="#fff" size="45"></u-icon>
						</view>
						<view class="box-top-action-item-txt">扫一扫</view>
					</view>
					<view class="box-top-action-item">
						<view class="flex box-top-action-item-cir">
							<u-icon name="gift" color="#fff" size="45"></u-icon>
						</view>
						<view class="box-top-action-item-txt">奖品库</view>
					</view>
				</view>
				<view class="box-top-tip">
					<view class="flex box-top-tip-txt">
						<u-icon name="file-text" color="#fff" size="20"></u-icon>
						<text>规则说明</text>
					</view>
				</view>
			</view>
			<view class="box-ticket">
				<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>
			</view>
			
		</view>
		<custom-tab-bar :activeValue="'index'" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	import carousel from '@/components/vear-carousel/vear-carousel'
	export default {
		components: {
			CustomTabBar,
			carousel
		},
		data() {
			return {
				imgList: [{
					url: 'https://z3.ax1x.com/2021/03/05/6ehghR.jpg',
					id: 1
				}, {
					url: 'https://z3.ax1x.com/2021/03/05/6ehnfI.jpg',
					id: 2
				}, {
					url: 'https://z3.ax1x.com/2021/03/05/6ehfc6.jpg',
					id: 3
				}, {
					url: 'https://z3.ax1x.com/2021/03/05/6efCqg.jpg',
					id: 4
				}, ]
			};
		},
		methods: {
			selectedBanner(item, index) {
				console.log('馃', item, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}

	/deep/ .u-tabbar__placeholder {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: calc(100vh - 50px);
		background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-a6f5c8b5b66fe87e4e79c1fc82a61a36_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649658373&t=f216ee4825d5b36e62aa3a490516bfb1) center center;

		&-top {
			display: flex;
			justify-content: space-between;
			padding: 80rpx 40rpx 0;

			&-action {
				display: flex;

				&-item {
					margin-right: 76rpx;

					&-cir {
						width: 104rpx;
						height: 104rpx;
						background-color: #FCB824;
						border-radius: 50%;
						margin-bottom: 14rpx;
					}

					&-txt {
						text-align: center;
						color: #FFFFFF;
					}
				}
			}
			&-tip{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-end;
				color: #FFFFFF;
			}
		}
		
		&-ticket{
			padding: 200rpx 0;
		}
	}
</style>