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="bg">
				
			<view class="bgBox " v-for="item in 23">
				<view class="line1 flex">
					<view class="minImg" v-for="item in 30">

					</view>
				</view>
				<view class="line2 flex">
					<view class="minImg" v-for="item in 30">

					</view>
				</view>
			</view>
			<view class="bgO">
				
			</view>
			</view>
			<view class="navModelContent">
				<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>

	</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-repeat: no-repeat;
		background-size: 100% auto;
		background-color: rgb(16, 16, 16);
	}

	.conetntNumBox {
		color: rgb(72, 72, 72);
		padding: 570rpx 0 110rpx 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(16, 16, 16);
		padding: 30rpx 10rpx 50rpx 25rpx;
		position: relative;
		.bg{
			position: relative;
			.bgO{
				position: relative;
				margin-top: -630rpx;
				height: 610rpx;
				width: 700rpx;
				border-radius: 100%;
				background-color:rgb(20, 20, 20) ;
			}
			.bgBox {
				padding-right: 20rpx;
			
				.line1 {
					padding-right: 12rpx;
					padding-bottom: 6rpx;
				}
			
				.line2 {
					padding-left: 12rpx;
					padding-bottom: 6rpx;
				}
			
				.minImg {
					width: 4px;
					height: 4px;
					transform: rotate(45deg);
					background-color: rgba(36, 36, 36, 1);
				}
			}
		}

		

		.navModelContent {
			position: absolute;
			top: 50rpx;
			left: 25rpx;
			right: 10rpx;
			bottom: 50rpx;

			.conetntText {
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #5A5A5A;
				padding-bottom: 50rpx;
				padding-top: 15rpx;
			}

			.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>