花田

pages.json

@@ -3,7 +3,7 @@
 
 		{
 			"path": "pages/index/index",
-			"onReachBottomDistance":"50",
+			"onReachBottomDistance": "50",
 			"style": {
 				"navigationBarTitleText": "首页",
 				"navigationStyle": "custom",
@@ -25,7 +25,7 @@
 			}
 		}, {
 			"path": "pages/index/Search",
-			"onReachBottomDistance":"50",
+			"onReachBottomDistance": "50",
 			"style": {
 				"navigationBarTitleText": "搜索",
 				"navigationStyle": "custom"
@@ -147,7 +147,7 @@
 					"bounce": "none"
 				}
 			}
-		},{
+		}, {
 			"path": "pages/my/userHomepage",
 			"style": {
 				"navigationBarTitleText": "我的",
@@ -348,28 +348,30 @@
 			"style": {
 				"navigationBarTitleText": "主岛"
 			}
+		}, {
+			"path": "pages/isLand/HuaTian",
+			"style": {
+				"navigationBarTitleText": "花田"
+			}
 		},
 		{
-			"path" : "pages/my/adolescent",
-			"style" : 
-			{
-				"navigationBarTitleText" : "青少年设置",
+			"path": "pages/my/adolescent",
+			"style": {
+				"navigationBarTitleText": "青少年设置",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/my/teenagePassword",
-			"style" : 
-			{
-				"navigationBarTitleText" : "" ,
+			"path": "pages/my/teenagePassword",
+			"style": {
+				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/my/feedback",
-			"style" : 
-			{
-				"navigationBarTitleText" : "意见与反馈"
+			"path": "pages/my/feedback",
+			"style": {
+				"navigationBarTitleText": "意见与反馈"
 			}
 		}
 	],

pages/isLand/HuaTian.scss

@@ -0,0 +1,94 @@
+.page {
+	width:750rpx;height:100vh;
+	background-color: rgba(0, 0, 0, 0.6);
+	position: fixed;left:0;top:0;
+	display: flex;flex-direction: column;justify-content: center;align-items: center;
+}
+.task-board {
+  padding: 30rpx;
+  background: transparent;
+  width: 700rpx;height:952rpx;
+  background: url('../../static/island/huatian/bg_huatian.png');
+  background-size: 700rpx 952rpx;
+  position: relative;
+  
+  .board-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30rpx;
+    height:70rpx;
+  }
+
+	.bodyContent {
+		width:640rpx;height:780rpx;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		padding: 10rpx;padding-top: 20rpx;
+		
+		.item {
+			width:150rpx;height:120rpx;padding:10rpx;
+			display: flex;flex-direction: row;justify-content: center;align-items: center;
+			position: relative;
+			.tian {
+				width:126rpx;height:70rpx;
+				position: absolute;z-index: 2;top:40rpx;
+			}
+			.suo {
+				width:32rpx;height:32rpx;
+				position: absolute;z-index: 99;
+			}
+			.flower {
+				width:100rpx;height:100rpx;
+				position: absolute;z-index: 99;top:0rpx;
+			}
+		}
+		.blank {
+			width:70rpx;height:30rpx;
+		}
+		
+	}
+} 
+.close {
+	width:68rpx;height:68rpx;
+	position: absolute;right:-10rpx;top:-10rpx;
+}
+.guild {
+	position: absolute;bottom:20rpx;
+	width:750rpx;
+	.content {
+		width: 710rpx;
+		height: 192rpx;
+		background: rgba(255,241,228,0.95);
+		border-radius: 28rpx 28rpx 28rpx 28rpx;
+		border: 4rpx solid #E3985A;
+		padding:30rpx;
+		
+		font-weight: 700;
+		font-size: 28rpx;
+		color: #A95F3C;
+		line-height: 40rpx;
+		text-align: justify;
+		font-style: normal;
+		text-transform: none;
+		position:absolute;z-index: 210;bottom:0rpx;right:0rpx;
+	}
+	.title {
+		width: 156rpx;
+		height: 48rpx;
+		background: #FDDEC1;
+		border-radius: 236rpx 236rpx 236rpx 236rpx;
+		border: 2rpx solid #E3985A;
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+		font-weight: 700;
+		font-size: 24rpx;
+		color: #987453;
+		line-height: 28rpx;
+		position:absolute;z-index: 220;bottom:166rpx;right:30rpx;
+	}
+	.npc {
+		width:174rpx;height:308rpx;
+		position: absolute;bottom:220rpx;right:0rpx;z-index: 200;
+	}
+}

pages/isLand/HuaTian.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="page">
+		<view class="task-board">
+			<view class="board-title">
+			</view>
+			<view class="bodyContent">
+
+				<block v-for="(reward, index) in 20" :key="index">
+					<view class="blank" v-if="index == 0 || index == 7 || index == 10"></view>
+					<view class="item">
+						<image src="../../static/island/huatian/suo.png" class="suo"></image>
+						<image src="../../static/island/huatian/flower3.png" class="flower"></image>
+						<image src="../../static/island/huatian/tian_suo.png" class="tian"></image>
+					</view>
+					<view class="blank" v-if="index == 2 || index == 9 || index == 12"></view>
+				</block>
+
+			</view>
+			<view class="close">
+				<image src="../../static/island/close.png" class="close"></image>
+			</view>
+		</view>
+
+		<view class="guild">
+			<view class="content">
+				"欢迎来到花田!在这里,你将成为农场的主人,体验种植和经营农场的乐趣。首先,让我们来开垦一块土地吧。只需支付100金币即可解锁!"
+			</view>
+			<view class="title">
+				罗奇
+			</view>
+			<view class="npc">
+				<image src="../../static/island/npc.png"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'TaskDialog',
+		components: {
+
+		},
+		props: {
+			visible: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				tasks: [{
+						title: '负债累累的冒险家',
+						description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
+						rewards: [{
+								icon: '/static/icons/coin.png',
+								text: '金币×3000'
+							},
+							{
+								icon: '/static/icons/exp.png',
+								text: '经验×3000'
+							},
+							{
+								icon: '/static/icons/blueprint.png',
+								text: '升级房屋图纸×1'
+							}
+						],
+						date: '2024/04/08',
+						status: 'completed'
+					},
+					{
+						title: '负债累累的冒险家',
+						description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
+						rewards: [{
+								icon: '/static/icons/coin.png',
+								text: '金币×3000'
+							},
+							{
+								icon: '/static/icons/exp.png',
+								text: '经验×3000'
+							},
+							{
+								icon: '/static/icons/blueprint.png',
+								text: '升级房屋图纸×1'
+							}
+						],
+						date: '2024/04/08',
+						status: 'available'
+					}
+				]
+			}
+		},
+		methods: {
+			onClose() {
+				this.$emit('close')
+			},
+			handleTaskAction(task) {
+				if (task.status === 'completed') {
+					// 处理完成任务的逻辑
+					uni.showToast({
+						title: '任务已完成！',
+						icon: 'success'
+					})
+				} else {
+					// 处理领取任务的逻辑
+					uni.showToast({
+						title: '已领取任务',
+						icon: 'success'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+
+
+<style lang="scss">
+	@import './HuaTian.scss';
+</style>