xc/pages/index/happly.vue

<template>
	<view class="page">
		<view class="topBannerBox">
			<view class="titlename">
				战舰已航行
			</view>
			<view class="time">
				208天21:22:32
			</view>
			<view class="titleTip">
				目的地 未来世界
			</view>
		</view>
		<view class="conetntNumBox">
			<view class="conentP">
				123123123位居民已登陆飞船
			</view>
			<view class="conentP">
				在浩瀚宇宙中寻找新世界
			</view>
		</view>
		<view class="navModel">
			<view class="bgBox ">
				<view class="line1 flex">
					<view class="minImg">
						
					</view>
				</view>
				<view class="line2 flex">
					<view class="minImg">
						
					</view>
				</view>
			</view>
			<view class="conetntText">
				航行中发现星球
			</view>
			<view class="modelBox flex">
				<view class="model">
					<image class="modelImg1" src="../../static/index/happly/model1.png" mode="scaleToFill"></image>
				</view>
				<view class="model">
					<image class="modelImg2" src="../../static/index/happly/model2.png" mode="scaleToFill"></image>
				</view>
				<view class="model">
					<image class="modelImg3" src="../../static/index/happly/model3.png" mode="scaleToFill"></image>
				</view>
				<view class="model">
					<image class="modelImg4" src="../../static/index/happly/model4.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onLoad(options) {

		},
		onShow() {},
		methods: {

		}
	};
</script>
<style lang="scss">
	.page {
		min-height: calc(100vh - var(--window-bottom));
		background-image: url("../../static/index/happly/happlyTop.png");
		background-size: 100% auto;
		background-color: #090705;
	}

	.conetntNumBox {
		color: rgb(72, 72, 72);
		padding: 570rpx 0 130rpx 110rpx;
		font-weight: bold;
	}

	.topBannerBox {
		padding-top: 140rpx;
		color: rgb(109, 99, 149);
		text-align: center;
		font-weight: bold;
		line-height: 1;

		.titlename {
			font-size: 40rpx;
			letter-spacing: .5em;
		}

		.time {
			padding: 20rpx;
			font-size: 60rpx;
			letter-spacing: .1em;
		}

		.titleTip {
			font-size: 32rpx;
			letter-spacing: .1em;
		}
	}

	.navModel {
		background-color: rgb(20, 20, 20);
		padding: 30rpx 10rpx 50rpx 25rpx;
		position: relative;
		.conetntText{
			text-align: center;
			font-weight: 800;
			font-size: 33rpx;
			color: #5A5A5A;
			padding-bottom: 50rpx;
		}
		.bgBox{
			.minImg{
				width: 4px;
				height: 4px;
				transform:rotate(0.5turn);
				background-color: rgba(36, 36, 36, 1);
			}
		}
		.modelBox{
			flex-wrap: wrap;
			align-items: flex-end;
			.model {
				&:nth-child(2) {
					padding-right: 10rpx;
				}
			
				.modelImg1 {
					width: 337rpx;
					height: 229rpx;
				}
			
				.modelImg2 {
					width: 351rpx;
					height: 205rpx;
				}
			
				.modelImg3 {
					width: 358rpx;
					height: 202rpx;
				}
			
				.modelImg4 {
					width: 356rpx;
					height: 201rpx;
				}
			}
		}
		
	}
</style>