箭头增加

pages/isLand/homeLand.vue

@@ -24,8 +24,10 @@
 
       <!-- 主岛箭头 -->
       <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>
+        <!-- <image src="/static/island/main_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
+		<view class="arrow" ></view>
+        <text class="main-text">主岛</text>
+
       </view>
     </view>
   
@@ -88,7 +90,7 @@ export default {
 	data() {
 		return {
 			// 背景位置控制
-			translateX: 0,
+			translateX: -141,
 			startX: 0,
 			currentX: 0,
 			isDragging : false,
@@ -185,7 +187,8 @@ export default {
 					this.maxTranslate = this.backgroundWidth - this.screenWidth;
 					
 					// 初始位置居中
-					this.translateX = -this.maxTranslate / 2;
+					// this.translateX = -this.maxTranslate / 2;
+					// this.translateX = 0;
 					
 					// 打印调试信息
 					// console.log('屏幕宽度:', this.screenWidth);
@@ -486,8 +489,9 @@ export default {
 .main-arrow {
 //   background: rgba(255, 255, 255, 0.9);
   position: absolute;
+  height: 190rpx;
   right: 50rpx;
-  bottom: 100rpx;  // 改为 bottom 定位
+  bottom: 20rpx;  // 改为 bottom 定位
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -495,6 +499,16 @@ export default {
   z-index: 10;
   transition: opacity 0.5s ease-in-out;
 
+  .arrow {
+    content: '';
+    display: block;
+    width: 60rpx;
+    height: 60rpx;
+    background: url('/static/island/arrow.png') no-repeat center center;
+    background-size: contain;
+    transform: rotate(270deg);
+  }
+
   .main-text {
     color: #ffffff;
     font-size: 32rpx;

pages/isLand/mainLand.vue

@@ -50,7 +50,8 @@
     <!-- 回家箭头 -->
     <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 class="arrow" ></view>
+      <text class="home-text">回家</text>
     </view>
 	</view>
   
@@ -104,7 +105,7 @@ export default {
 	data() {
 		return {
 			// // 背景位置控制
-			translateX: 0,
+			translateX: -200,
 			startX: 0,
 			currentX: 0,
 			isDragging : false,
@@ -177,16 +178,16 @@ export default {
 					this.maxTranslate = this.backgroundWidth - this.screenWidth;
 					
 					// 初始位置居中
-					this.translateX = -this.maxTranslate / 2;
+					// this.translateX = -this.maxTranslate / 2;
 					
 					// 打印调试信息
-					console.log('屏幕宽度:', this.screenWidth);
-					console.log('背景宽度:', this.backgroundWidth);
-					console.log('岛屿高度:', this.islandHeight);
-					console.log('屏幕宽度:',this.screenWidth);
-					console.log('最大可移动距离:',this.maxTranslate);
+					// console.log('屏幕宽度:', this.screenWidth);
+					// console.log('背景宽度:', this.backgroundWidth);
+					// console.log('岛屿高度:', this.islandHeight);
+					// console.log('屏幕宽度:',this.screenWidth);
+					// console.log('最大可移动距离:',this.maxTranslate);
 					
-					console.log('岛屿data:', data);
+					// console.log('岛屿data:', data);
 					
 				} else {
 					console.error('未能获取岛屿图片的尺寸');
@@ -507,6 +508,16 @@ export default {
   z-index: 10;
   transition: opacity 0.5s ease-in-out;  // 添加淡入效果
 
+  .arrow {
+    content: '';
+    display: block;
+    width: 60rpx;
+    height: 60rpx;
+    background: url('/static/island/arrow.png') no-repeat center center;
+    background-size: contain;
+    transform: rotate(90deg);
+  }
+
   .home-text {
     color: #ffffff;
     font-size: 32rpx;