2024-7-8

pages/index/happly.vue

@@ -1,8 +1,161 @@
 <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;
+		}
+	}
 
-<style>
+	.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>