fanxing-ylzx-app/pages/index/index.vue

<template>
	<view class="main">
		<view class="main_wrapper">
			<view class="top">
				<image class="banner" src="@/static/img_top@3x.png" mode="widthFix"></image>
				<view class="title">
					<view>欢迎来到<br/>渔易通<text>{娱乐中心}</text></view>
				</view>
			</view>
			<view class="content">
				<view class="item yyt">
					<view class="left">
						<image class="logo_img" src="@/static/ic_yyt@2x.png"></image>
						<view class="texts">
							<view>联网中心</view>
							<view>点击进入可立即联网</view>
						</view>
					</view>
					<image class="more" src="@/static/ic_jiantou.png"></image>
				</view>
				<view class="item yule" @click="toYule">
					<view class="left">
						<image class="logo_img" src="@/static/ic_yule@2x.png"></image>
						<view class="texts">
							<view>娱乐中心</view>
							<view>畅享短视频小说游戏等</view>
						</view>
					</view>
					<image class="more" src="@/static/ic_jiantou.png"></image>
				</view>
			</view>
		</view>
		<view class="nametip">渔易通娱乐中心 V2.0</view>
		<!-- <web-view :src="src"></web-view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// src: 'http://teststar.mstardance.com/app/starmini/index.html'
			}
		},
		onLoad() {
			
		},
		onShow(){
			// uni.navigateTo({
			// 	url: "/pages/amuse/index"
			// })
			// if(window.plus) {
			//     this.plusReady();
			// } else {
			//     document.addEventListener('plusready', plusReady, false);
			// }
			// let accessToken = this.$getSS('accessToken')
			// let phone = this.$getSS('phone')
			// this.src = 'http://debugstar.mstardance.com/starmini/index.html'
		},
		methods: {
			toYule(){
				uni.navigateTo({
					url: '/pages/amuse/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">

	.main {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
	}
	.main_wrapper{
		flex: 1;

	}
	.top{
		position: relative;
		.banner{
			width: 100%;
			height: auto;
		}
		.title{
			top: 216rpx;
			left: 60rpx;
			position: absolute;
			font-size: 64rpx;
			color: #092397;
			font-weight: bold;
			text{
				color: #BC2AF4;
			}
		}
	}
	
	.content{
		flex: 1;
		padding: 40rpx 32rpx;
		.item{
			border-radius: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 32rpx 40rpx 40rpx;
			.left{
				display: flex;

				.logo_img{
					width: 144rpx;
					height: 144rpx;
				}
				.texts{
					letter-spacing: 4rpx;
					margin-left: 32rpx;
					color: #FFF;
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 32rpx;
					view:nth-child(1){
						font-weight: bold;
						font-size: 44rpx;
						margin-bottom: 16rpx;
					}
				}
			}
			.more{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.nametip{
		flex-shrink: 0;
		font-weight: 400;
		font-size: 24rpx;
		color: #959CAB;
		text-align: center;
		/* 兼容 iOS < 11.2 */
		padding-bottom: calc(constant(safe-area-inset-bottom)+40rpx);
        /* 兼容 iOS >= 11.2 */
        padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}
	.yyt{
		background: linear-gradient( 312deg, #2B63DE 0%, #3E92F6 100%);
		margin-bottom: 32rpx;
	}
	.yule{
		background: linear-gradient( 229deg, #56D8FF 0%, #CD66FF 100%);
	}
	
</style>