农场的部分修改

components/dialogs/ShopDialog.scss

@@ -0,0 +1,145 @@
+.shop-content {
+  background: #f8f3e9;
+  min-height: 200rpx;
+  padding: 20rpx;
+  height: 680rpx;
+  display: flex;
+  flex-direction: column;
+
+  .shop-tabs {
+    display: flex;
+    margin-bottom: 20rpx;
+    background: #8b5e3c;
+    border-radius: 8rpx;
+    padding: 10rpx;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      padding: 15rpx 0;
+      font-size: 28rpx;
+      color: #f8f3e9;
+      background: #6b4423;
+      margin: 0 5rpx;
+      border-radius: 6rpx;
+
+      &.active {
+        background: #f8f3e9;
+        color: #6b4423;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .shop-items {
+    flex: 1;
+    overflow-y: auto;
+
+    .shop-item {
+      width: 100%;
+      padding: 0 10rpx;
+      margin-bottom: 20rpx;
+      height: 220rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .item-card {
+      background: #fff;
+      border-radius: 12rpx;
+      padding: 20rpx;
+      position: relative;
+      border: 2rpx solid #ddd;
+      display: flex;
+      height: 100%;
+
+      .new-tag {
+        position: absolute;
+        top: -10rpx;
+        left: -10rpx;
+        background: #ff6b6b;
+        color: white;
+        padding: 4rpx 12rpx;
+        border-radius: 20rpx;
+        font-size: 20rpx;
+      }
+
+      .item-left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 20rpx;
+        width: 80rpx;
+
+        .item-icon {
+          width: 80rpx;
+          height: 80rpx;
+          margin-bottom: 8rpx;
+        }
+
+        .owned-text {
+          font-size: 22rpx;
+          color: #666;
+          white-space: nowrap;
+        }
+      }
+
+      .item-info {
+        flex: 1;
+
+        .item-name {
+          font-size: 28rpx;
+          color: #333;
+          font-weight: bold;
+          margin-bottom: 8rpx;
+        }
+
+        .item-details {
+          font-size: 20rpx;
+          color: #666;
+          padding-left: 6rpx;
+
+          .detail-text {
+            display: block;
+            line-height: 1.5;
+          }
+        }
+
+        .item-bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 10rpx;
+
+          .item-price {
+            display: flex;
+            align-items: center;
+            gap: 4rpx;
+
+            .currency-icon {
+              width: 24rpx;
+              height: 24rpx;
+            }
+
+            text {
+              font-size: 24rpx;
+              color: #ff9500;
+              font-weight: bold;
+            }
+          }
+
+          .buy-btn {
+            background: #8b5e3c;
+            color: white;
+            font-size: 24rpx;
+            padding: 4rpx 16rpx;
+            border-radius: 30rpx;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+} 

components/dialogs/ShopDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-dialog :visible.sync="dialogVisible" title="商店" @close="onClose">
+  <custom-dialog :visible.sync="dialogVisible" title="商城" @close="onClose">
     <view class="shop-content">
       <view class="shop-tabs">
         <view 
@@ -14,14 +14,27 @@
       </view>
       <view class="shop-items">
         <view class="shop-item" v-for="(item, index) in currentItems" :key="index" @click="onItemClick(item)">
-          <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
-          <view class="item-info">
-            <text class="item-name">{{item.name}}</text>
-            <text class="item-desc">{{item.description}}</text>
-          </view>
-          <view class="item-price">
-            <image class="currency-icon" src="/static/currency/coin.png" mode="aspectFit"></image>
-            <text>{{item.price}}</text>
+          <view class="item-card">
+            <view class="new-tag" v-if="item.isNew">新品</view>
+            <view class="item-left">
+              <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
+              <text class="owned-text">已持有: {{item.owned}}</text>
+            </view>
+            <view class="item-info">
+              <text class="item-name">{{item.name}}</text>
+              <view class="item-details">
+                <text class="detail-text">收获期: {{item.harvestTime}}</text>
+                <text class="detail-text">成长期: {{item.growthTime}}</text>
+                <text class="detail-text">产量: {{item.yield}}</text>
+              </view>
+              <view class="item-bottom">
+                <view class="item-price">
+                  <image class="currency-icon" src="/static/currency/coin.png" mode="aspectFit"></image>
+                  <text>{{item.price}}</text>
+                </view>
+                <button class="buy-btn">购买</button>
+              </view>
+            </view>
           </view>
         </view>
       </view>
@@ -31,6 +44,7 @@
 
 <script>
 import CustomDialog from '../CustomDialog/CustomDialog.vue'
+import './ShopDialog.scss'
 
 export default {
   name: 'ShopDialog',
@@ -47,21 +61,42 @@ export default {
     return {
       dialogVisible: false,
       currentTab: 0,
-      tabs: ['道具', '装备', '材料'],
+      tabs: ['种子', '道具', '钻石'],
       items: {
         0: [
-          { icon: '/static/items/potion1.png', name: '生命药水', description: '恢复100点生命值', price: 100 },
-          { icon: '/static/items/potion2.png', name: '魔法药水', description: '恢复50点魔法值', price: 150 },
-          { icon: '/static/items/potion3.png', name: '体力药水', description: '恢复50点体力值', price: 120 }
-        ],
-        1: [
-          { icon: '/static/items/weapon1.png', name: '铁剑', description: '攻击力+10', price: 500 },
-          { icon: '/static/items/armor1.png', name: '皮甲', description: '防御力+5', price: 300 }
+          { 
+            icon: '/static/items/seed1.png', 
+            name: '草莓种子', 
+            harvestTime: '160时', 
+            growthTime: '60时',
+            yield: '10',
+            price: 100,
+            owned: 3,
+            isNew: true
+          },
+          { 
+            icon: '/static/items/seed1.png', 
+            name: '草莓种子', 
+            harvestTime: '160时', 
+            growthTime: '60时',
+            yield: '10',
+            price: 100,
+            owned: 3,
+            isNew: true
+          },
+          { 
+            icon: '/static/items/seed1.png', 
+            name: '草莓种子', 
+            harvestTime: '160时', 
+            growthTime: '60时',
+            yield: '10',
+            price: 100,
+            owned: 3,
+            isNew: true
+          }
         ],
-        2: [
-          { icon: '/static/items/material1.png', name: '木材', description: '基础材料', price: 50 },
-          { icon: '/static/items/material2.png', name: '铁矿', description: '基础材料', price: 80 }
-        ]
+        1: [],
+        2: []
       }
     }
   },
@@ -83,7 +118,6 @@ export default {
       this.dialogVisible = false
     },
     onItemClick(item) {
-      // 处理购买逻辑
       this.$emit('buy', item)
     }
   }
@@ -91,84 +125,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.shop-content {
-  .shop-tabs {
-    display: flex;
-    border-bottom: 2rpx solid #eee;
-    margin-bottom: 20rpx;
-
-    .tab-item {
-      flex: 1;
-      text-align: center;
-      padding: 20rpx 0;
-      font-size: 28rpx;
-      color: #666;
-      position: relative;
-
-      &.active {
-        color: #007AFF;
-        font-weight: 500;
-
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 40rpx;
-          height: 4rpx;
-          background: #007AFF;
-          border-radius: 2rpx;
-        }
-      }
-    }
-  }
-
-  .shop-items {
-    .shop-item {
-      display: flex;
-      align-items: center;
-      padding: 20rpx;
-      border-bottom: 2rpx solid #f5f5f5;
-
-      .item-icon {
-        width: 80rpx;
-        height: 80rpx;
-        margin-right: 20rpx;
-      }
-
-      .item-info {
-        flex: 1;
-
-        .item-name {
-          font-size: 28rpx;
-          color: #333;
-          margin-bottom: 4rpx;
-        }
-
-        .item-desc {
-          font-size: 24rpx;
-          color: #999;
-        }
-      }
-
-      .item-price {
-        display: flex;
-        align-items: center;
-        gap: 8rpx;
-
-        .currency-icon {
-          width: 32rpx;
-          height: 32rpx;
-        }
-
-        text {
-          font-size: 28rpx;
-          color: #FF9500;
-          font-weight: 500;
-        }
-      }
-    }
-  }
-}
+@import './ShopDialog.scss';
 </style> 

pages/isLand/homeLand.vue

@@ -13,6 +13,12 @@
       <view style="position: absolute;width: 670rpx;left:180rpx; bottom:130rpx;align-items: center;">
         <image class="hall-image" src="/static/island/building/1.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHallClick" :animation="hallAnimationData">	</image>
       </view>
+
+      <!-- 主岛箭头 -->
+      <view class="main-arrow" @click="goToMainLand" :animation="mainArrowAnimation" :style="{ opacity: mainArrowVisible ? 1 : 0 }">
+        <image src="/static/island/main_arrow.png" mode="widthFix" style="width: 100rpx;"></image>
+        <text class="main-text">主岛</text>
+      </view>
     </view>
   
     <!-- 第一层：UI -->
@@ -65,6 +71,9 @@ export default {
 			inventoryVisible: false,
 			characterVisible: false,
 			shopVisible: false,
+			mainArrowAnimation: {},
+			mainArrowAnimating: false,
+			mainArrowVisible: false,
 		}
 	},
 	onLoad() {
@@ -84,6 +93,11 @@ export default {
 		// 在组件渲染完成后获取图片尺寸
 		setTimeout(() => {
 			this.getImageSize();
+			// 延迟1秒后显示箭头并开始动画
+			setTimeout(() => {
+				this.mainArrowVisible = true;
+				this.startMainArrowAnimation();
+			}, 1000);
 		}, 300);
 	},
 	methods: {
@@ -275,7 +289,44 @@ export default {
 		},
 		onShopBuy(item) {
 			console.log('Buying item:', item)
+		},
+		startMainArrowAnimation() {
+			if (this.mainArrowAnimating) return;
+			this.mainArrowAnimating = true;
+
+			const animation = uni.createAnimation({
+				duration: 1000,
+				timingFunction: 'ease-in-out',
+			});
+
+			const animate = () => {
+				if (!this.mainArrowAnimating) return;
+
+				animation.translateY(-20).step({ duration: 1000 });
+				this.mainArrowAnimation = animation.export();
+
+				setTimeout(() => {
+					animation.translateY(0).step({ duration: 1000 });
+					this.mainArrowAnimation = animation.export();
+
+					setTimeout(() => {
+						if (this.mainArrowAnimating) {
+							animate();
+						}
+					}, 1000);
+				}, 1000);
+			};
+
+			animate();
+		},
+		goToMainLand() {
+			uni.navigateTo({
+				url: '/pages/isLand/mainLand'
+			});
 		}
+	},
+	beforeDestroy() {
+		this.mainArrowAnimating = false;
 	}
 }
 </script>
@@ -332,4 +383,24 @@ export default {
     cursor: grabbing;
   }
 }
+
+.main-arrow {
+  position: absolute;
+  right: 100rpx;  // 调整到右边位置
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: opacity 0.5s ease-in-out;  // 添加淡入效果
+
+  .main-text {
+    color: #ffffff;
+    font-size: 28rpx;
+    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
+    margin-top: 10rpx;
+  }
+}
 </style> 

pages/isLand/mainLand.vue

@@ -22,6 +22,12 @@
 		<view style="position: absolute;width: 670rpx;left:180rpx; bottom:130rpx;align-items: center;">
 			<image class="farm-image" src="/static/island/building/2.png" mode="widthFix" style="width:670rpx; position: static;" @click="onFarmClick" :animation="farmAnimationData">	</image>
 		</view>
+
+    <!-- 回家箭头 -->
+    <view class="home-arrow" @click="goHome" :animation="homeArrowAnimation" :style="{ opacity: homeArrowVisible ? 1 : 0 }">
+      <image src="/static/island/home_arrow.png" mode="widthFix" style="width: 100rpx;"></image>
+      <text class="home-text">回家</text>
+    </view>
 	</view>
   
     <!-- 第一层：UI -->
@@ -79,6 +85,9 @@ export default {
 			characterVisible: false,
 			shopVisible: false,
 			farmVisible: false,
+			homeArrowAnimation: {},
+			homeArrowAnimating: false,
+			homeArrowVisible: false,
 		}
 	},
 	onLoad() {
@@ -98,6 +107,11 @@ export default {
 		// 在组件渲染完成后获取图片尺寸
 		setTimeout(() => {
 			this.getImageSize();
+			// 延迟1秒后显示箭头并开始动画
+			setTimeout(() => {
+				this.homeArrowVisible = true;
+				this.startHomeArrowAnimation();
+			}, 1000);
 		}, 300);
 	},
 	methods: {
@@ -303,6 +317,40 @@ export default {
 		onFarmClose() {
 			console.log('Closing farm dialog...')
 			this.farmVisible = false
+		},
+		startHomeArrowAnimation() {
+			if (this.homeArrowAnimating) return;
+			this.homeArrowAnimating = true;
+
+			const animation = uni.createAnimation({
+				duration: 1000,
+				timingFunction: 'ease-in-out',
+			});
+
+			const animate = () => {
+				if (!this.homeArrowAnimating) return;
+
+				animation.translateY(-20).step({ duration: 1000 });
+				this.homeArrowAnimation = animation.export();
+
+				setTimeout(() => {
+					animation.translateY(0).step({ duration: 1000 });
+					this.homeArrowAnimation = animation.export();
+
+					setTimeout(() => {
+						if (this.homeArrowAnimating) {
+							animate();
+						}
+					}, 1000);
+				}, 1000);
+			};
+
+			animate();
+		},
+		goHome() {
+			uni.navigateTo({
+				url: '/pages/isLand/homeLand'
+			});
 		}
 	}
 }
@@ -360,4 +408,24 @@ export default {
     cursor: grabbing;
   }
 }
+
+.home-arrow {
+  position: absolute;
+  left: 100rpx;  // 调整到左边位置
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: opacity 0.5s ease-in-out;  // 添加淡入效果
+
+  .home-text {
+    color: #ffffff;
+    font-size: 28rpx;
+    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
+    margin-top: 10rpx;
+  }
+}
 </style>