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

<template>
	<view class="page">
		
		<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>
		
		<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;
		background-color: $uni-bg-color-highlight;

		.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;
		}
	}
	
</style>