sailun-tbr-web/pages/home/index.vue

<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="u-page">
			<view class="u-margin-top-10">
				<u-swiper :list="tabbarList" :height="310" bg-color="#F4F4F4"></u-swiper>
			</view>
			<view class="u-flex u-m-l-20 u-m-r-20">
				<view class="u-flex u-row-center" style="width: 450rpx; height: 70rpx;border-radius: 50rpx;background: rgba(52,140,245,0.1);font-size: 20rpx;color: #348CF5; font-size: 500;">
					<u-image width="45rpx" height="35rpx" src="../../static/sailun/speaker.png" style="margin:10rpx;"></u-image>公告
				</view>
				<u-notice-bar mode="horizontal" :list="noticebarList" :volume-icon="false" bg-color="#F4F4F4" color="#2B2B2B"></u-notice-bar>
			</view>
			<view class="u-flex u-row-around u-m-15">
				<u-image width="330rpx" height="128rpx" src="../../static/sailun/scan_in.png"></u-image>
				<u-image width="330rpx" height="128rpx" src="../../static/sailun/scan_out.png"></u-image>
			</view>
			<view>
				<view class="u-m-l-30">
					快捷服务
				</view>
				<view class="u-flex u-flex-wrap u-row-center">
					<u-image width="340rpx" height="200rpx" src="../../static/sailun/1.png" style="margin: 10rpx;box-shadow:0rpx 0rpx 20rpx rgba(0,0,0,0.2);border-radius: 25rpx;"></u-image>
					<u-image width="340rpx" height="200rpx" src="../../static/sailun/2.png" style="margin: 10rpx;box-shadow:0rpx 0rpx 20rpx rgba(0,0,0,0.2);border-radius: 25rpx;"></u-image>
					<u-image width="340rpx" height="200rpx" src="../../static/sailun/3.png" style="margin: 10rpx;box-shadow:0rpx 0rpx 20rpx rgba(0,0,0,0.2);border-radius: 25rpx;"></u-image>
					<u-image width="340rpx" height="200rpx" src="../../static/sailun/4.png" style="margin: 10rpx;box-shadow:0rpx 0rpx 20rpx rgba(0,0,0,0.2);border-radius: 25rpx;"></u-image>
				</view>
			</view>
			<view class="u-flex u-row-center u-m-t-30">
				<u-image width="670rpx" src="../../static/sailun/88reward.png" mode="widthFix"></u-image>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/home/index'
					},
					{
						iconPath: "chat",
						selectedIconPath: "chat-fill",
						text: '消息',
						count: 2,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/msg/index'
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						customIcon: false,
						pagePath: '/pages/me/index'
					},
				],
				tabbarList: [{
						image: '../../static/sailun/swiper1.png'
					},
					{
						image: '../../static/sailun/swiper1.png'
					},
					{
						image: '../../static/sailun/swiper1.png'
					}
				],
				noticebarList: ['恭喜您获得10000000元积分红包', '恭喜您获得10000000元积分红包', '恭喜您获得10000000元积分红包'],
				current: 0
			};
		},
		methods: {
			submit() {
				this.$u.route({
					url: 'pages/login/index',
					type: 'redirectTo'
				})
			},
		}
	}
</script>

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