fission-star-applet-250304/pages/index/index.vue

<template>
	<view class="page">

		<image src="../../static/image/home/bg.png" class="bg" mode="scaleToFill"></image>

		<view class="content">
			<navbar title="首页" bgColor="#001137" color="#FFFFFF" />
			
			<view class="btns">
				<button 
					v-for="item in list"
					:key="item.title"
					class="btn"
					plain
					@click="$utils.navigateTo(item.path)"
				>
					{{ item.title }}
				</button>
			</view>
		</view>
		
		<tabber select="home"/>

	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'

	export default {
		components : {
			tabber,
		},
		data() {
			return {
				list: [
					{
						title: '个人分享',
						path: '/pages_order/record/personalSharing'
					},
					{
						title: '视频分享',
						path: '/pages_order/record/videoSharing'
					},
					{
						title: '群分享',
						path: '/pages_order/record/groupSharing'
					},
					{
						title: '文章分享',
						path: '/pages_order/record/articleSharing'
					},
				]
			}
		},
	}
</script>

<style scoped lang="scss">

	.page{
		& /deep/ .uv-icon__icon{
			font-size: 30rpx !important;
		}

		position: relative;
		height: 100vh;
    overflow: hidden;

		.btns {
			display: grid;
			grid-column-gap: 34rpx;
			grid-row-gap: 34rpx;
			grid-template-columns: repeat(2, 1fr);
			position: absolute;
			bottom: 466rpx;
			width: 100%;
			padding: 0 58rpx;
			box-sizing: border-box;
		}

		.btn {
			color: $uni-text-color-highlight;
			border-color: #04D6A3;
			width: 100%;
			padding: 55rpx 0;
		}
	}

	.bg {
		width: 100vw;
		height: 100vh;
	}

	.content {
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
	}
	
</style>