jingcai/pages/index/information.vue

<template>
	<view class="content">
		<view class="list flex" @click="nav('/pages/introduce/introduce')">
			<image class="img" src="../../static/img/zixun1.png" mode="scaleToFill"></image>
			<view class="text">
				{{$t('homeinformation.m1')}}
			</view>
		</view>
		<view class="list flex" @click="nav('/pages/introduce/promotion')">
			<image class="img" src="../../static/img/zixun2.png" mode="scaleToFill"></image>
			<view class="text">
				{{$t('homeinformation.m0')}}
			</view>
		</view>
		<view class="list flex" @click="nav('/pages/introduce/game')">
			<image class="img" src="../../static/img/zixun3.png" mode="scaleToFill"></image>
			<view class="text">
				{{$t('homeinformation.m2')}}
			</view>
		</view>
		<view class="list flex" @click="navigatorH">
			<image class="img" src="../../static/img/zixun4.png" mode="scaleToFill"></image>
			<view class="text">
				{{$t('login.a0')}}
			</view>
		</view>
		<view class="tit padding-t-30 margin-t-20">
			{{$t('homeinformation.m4')}}
		</view>

		<view class="pro flex">
			<view class="im">
				<image class="image" src="../../static/img/zixun7.png" mode="heightFix"></image>
				<view class="wen flex">{{$t('homeinformation.m5')}}</view>
			</view>
			<view class="im">
				<image class="image" src="../../static/img/zixun8.png" mode="heightFix"></image>
				<view class="wen flex">{{$t('homeinformation.m6')}}</view>
			</view>
		</view>

		<view class="infor flex">
			<view class="im">
				<image class="image" src="../../static/img/zixun10.png" mode="heightFix"></image>
				<view class="wen flex">{{$t('homeinformation.m7')}}</view>
			</view>
			<view class="im">
				<image class="image" src="../../static/img/zixun6.png" mode="heightFix"></image>
				<view class="wen flex">{{$t('homeinformation.m8')}}</view>
			</view>
			<view class="im">
				<image class="image" src="../../static/img/zixun9.png" mode="heightFix"></image>
				<view class="wen flex">{{$t('homeinformation.m9')}}</view>
			</view>
		</view>
		<taber tab='information'></taber>
	</view>
</template>

<script>
	import taber from "@/components/footer/footer.vue";
	export default {
		components: {
			taber
		},
		data() {
			return {};
		},
		methods: {
			nav(url) {
				uni.navigateTo({
					url
				})
			},
			navigatorH() {
				uni.switchTab({
					url: '/pages/index/entertainment'
				})
			},
		}
	};
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		background-color: $page-color-base;
		padding-top: var(--status-bar-height);
		padding-bottom: 30rpx;
	}

	.list {
		margin: 0 30rpx;
		align-items: flex-start;
		padding: 30rpx 0;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		.img {
			width: 200rpx;
			height: 160rpx;
		}

		.text {
			padding: 10rpx 0;
			padding-left: 20rpx;
			
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			flex-grow: 1;
		}
	}

	.infor {
		margin-top: 30rpx;
		justify-content: space-around;
		padding: 0 20rpx;
	}
	.pro {
		padding: 0 155rpx;
		padding-top: 50rpx;
		
	}
	.im {
		width: 200rpx;
		background-color: #191a1f;
		text-align: center;
		padding: 0 10rpx;
		padding-top: 30rpx;
		font-weight: bold;
		border-radius: 20rpx;
		.image {
			height: 100rpx;
		}
		.wen {
			justify-content: center;
			height: 100rpx;
			color: #FFFFFF;
			font-size: 20rpx;
			text-align: center;
		}
	}
	.tit {
		text-align: center;
		font-size: 49rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>