替换建筑和地图，添加剧情对话框 修改任务界面

components/dialogs/ShopDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <custom-dialog :visible.sync="dialogVisible" title="商城" @close="onClose">
     <view class="shop-content">
-      <!-- <view class="shop-tabs">
+      <view class="shop-tabs">
         <view 
           v-for="(tab, index) in tabs" 
           :key="index"
@@ -11,7 +11,7 @@
         >
           {{tab}}
         </view>
-      </view> -->
+      </view>
       <view class="shop-items">
         <view class="shop-item" v-for="(item, index) in currentItems" :key="index" @click="onItemClick(item)">
           <view class="item-card">

pages/isLand/TaskDialog.scss

@@ -48,10 +48,18 @@
   .task-card {
     background-color: rgba(255, 246, 235, 0.95);
     border-radius: 20rpx;
-    padding: 24rpx;
+    padding: 20rpx;
     margin: 10rpx 43rpx 15rpx 43rpx  ;
     position: relative;
     
+    // width: 630rpx;
+    // height: 390rpx;
+    background: #FFF1E4;
+    box-shadow: inset 0rpx 6rpx 0rpx 0rpx rgba(255,255,255,0.3), inset 0rpx -6rpx 0rpx 0rpx #F6E0CB, 0rpx 4rpx 4rpx 0rpx #F3D2B2;
+    border-radius: 28rpx 28rpx 28rpx 28rpx;
+    border: 2rpx solid #DEB691;
+
+
     .task-header,
     .task-desc {
       margin-bottom: 16rpx;
@@ -142,17 +150,20 @@
           rgba(179, 137, 74, 0.3) 80%, 
           transparent
         );
+        // border: 1rpx solid #DEB691;
       }
 
       .task-date {
         color: #CCAB8F;
         font-size: 24rpx;
         margin-right: auto;
+        padding-left:  16rpx;
       }
       
       .task-button {
         min-width: 170rpx;
         height: 62rpx;
+        line-height: 62rpx;
         text-align: center;
         font-size: 24rpx;
         border: none;

pages/isLand/TaskDialog.vue

@@ -29,12 +29,12 @@
           </view>
           <view class="task-footer">
             <text class="task-date">{{task.date}}</text>
-            <button 
+            <view 
               :class="['task-button', task.status === 'completed' ? 'completed' : 'uncompleted']"
               @click="handleTaskAction(task)"
             >
               {{task.status === 'completed' ? '完成任务' : '未完成'}}
-            </button>
+            </view>
           </view>
           <view class="card-divider"></view>
         </view>

pages/isLand/homeLand.scss

@@ -19,7 +19,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(to bottom, #87CEEB, #4682B4); /* 渐变背景 */
+    background: linear-gradient(to bottom, #265f9f, #4682B4); /* 渐变背景 */
     z-index: 1; /* 最底层 */
     user-select: none; /* 禁止选中 */
     pointer-events: none; /* 禁止交互 */
@@ -41,18 +41,82 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 3; /* 最上层 */
-    pointer-events: none; /* 允许穿透点击，但内部元素可交互 */
-  }
-  
-  /* UI层内部元素需要启用交互 */
-  .ui-content {
-    pointer-events: none; /* 重新启用交互 */
-    bottom: 150px;
-    padding-top: 50px;
-    height: 120px;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 100;
+    
+    /* UI层内部元素需要启用交互 */
+    .ui-content {
+      position: absolute;
+      top: 120rpx;
+      right: 20rpx;
+      pointer-events: none; /* 默认不接收事件 */
+      z-index: 101;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+    
+    .currency-display {
+      display: flex;
+      flex-direction: row;
+      gap: 20rpx;
+      margin-bottom: 20rpx;
+      padding: 10rpx;
+      pointer-events: auto; /* 货币计数器接收事件 */
+      
+      .currency-item {
+        display: flex;
+        align-items: center;
+        background: url('/static/island/UI/money_kuang.png') no-repeat center center;
+        background-size: 100% 100%;
+        padding: 12rpx 24rpx;
+        border-radius: 50rpx;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+        
+        .currency-icon {
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 12rpx;
+          margin-left: -8rpx;
+        }
+        
+        .currency-value {
+          font-size: 28rpx;
+          color: #FFFFFF;
+          font-weight: bold;
+          text-shadow: 
+            -1px -1px 0 #316624,  
+             1px -1px 0 #316624,
+            -1px  1px 0 #316624,
+             1px  1px 0 #316624;
+        }
+      }
+    }
+
+    .ui-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 20rpx;
+      pointer-events: auto; /* 按钮接收事件 */
+      
+      .ui-button {
+        background: rgba(255, 255, 255, 0.9);
+        border: none;
+        padding: 16rpx 32rpx;
+        border-radius: 8rpx;
+        font-size: 28rpx;
+        color: #333;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+        min-width: 120rpx;
+        
+        &:active {
+          opacity: 0.8;
+          transform: scale(0.95);
+        }
+      }
+    }
   }
 
   /* 示例按钮样式 */

pages/isLand/homeLand.vue

@@ -6,12 +6,16 @@
     <!-- 第二层：地图 -->
     <view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup">
       <image class="island-image" src="/static/island/island.png" mode="widthFix" style="width:1536rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
-      <view style="position: absolute;width: 670rpx;left: 680rpx; bottom:430rpx;align-items: center;">
-        <image class="house-image" src="/static/island/building/4.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">	</image>
+      <view style="position: absolute;width: 670rpx;left: 340rpx; bottom:320rpx;align-items: center;">
+        <image class="house-image" src="/static/island/building/home1.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">	</image>
       </view>
 
-      <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 style="position: absolute;width: 300rpx;left:280rpx; bottom:200rpx;align-items: center;">
+        <image class="table-image" src="/static/island/building/workTable.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHallClick" :animation="hallAnimationData">	</image>
+      </view>
+
+      <view style="position: absolute;width:200rpx;left:660rpx; bottom:260rpx;align-items: center;">
+        <image class="mailBox-image" src="/static/island/building/mailBox.png" mode="widthFix" style="width:670rpx; position: static;" >	</image>
       </view>
 
       <!-- 主岛箭头 -->
@@ -24,6 +28,17 @@
     <!-- 第一层：UI -->
     <view class="ui-layer">
       <view class="ui-content">
+        <!-- 添加货币计数器 -->
+        <view class="currency-display" >
+          <view class="currency-item">
+            <image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon"></image>
+            <text class="currency-value">9999</text>
+          </view>
+          <view class="currency-item">
+            <image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon"></image>
+            <text class="currency-value">9999</text>
+          </view>
+        </view>
         <view class="ui-buttons">
           <button class="ui-button" @click="showInventory">背包</button>
           <button class="ui-button" @click="showCharacter">角色</button>
@@ -38,6 +53,13 @@
     <character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
     <shop-dialog :visible.sync="shopVisible" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
     <task-dialog class="task-dialog" :visible.sync="taskVisible" @close="onTaskClose"></task-dialog>
+    
+    <!-- 引导对话组件 -->
+    <talk-guide 
+      :guide-data="guideData"
+      :player-name="playerName"
+      @guide-complete="onGuideComplete"
+    ></talk-guide>
   </view> 
 </template>
 
@@ -47,13 +69,15 @@ import InventoryDialog from '@/components/dialogs/InventoryDialog.vue'
 import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
 import ShopDialog from '@/components/dialogs/ShopDialog.vue'
 import TaskDialog from './TaskDialog.vue'
+import TalkGuide from './talkGuide.vue'
 
 export default {
 	components: {
 		InventoryDialog,
 		CharacterDialog,
 		ShopDialog,
-		TaskDialog
+		TaskDialog,
+		TalkGuide
 	},
 	data() {
 		return {
@@ -79,6 +103,37 @@ export default {
 			mainArrowAnimating: false,
 			mainArrowVisible: false,
 			taskVisible: false,
+			playerName: '梦幻',
+			guideData: [
+				{
+					characterImage: '/static/island/npc.png',
+					characterName: '罗宾',
+					text: '这位大人，这里太大了吧....',
+					position: 'left',
+					isMirror: true
+				},
+				{
+					characterImage: '/static/island/building/1.png',
+					characterName: '我',
+					text: '好的，我马上上会教付清',
+					position: 'right',
+					isMirror: false
+				},
+				{
+					characterImage: '/static/island/building/1.png',
+					characterName: '我',
+					text: '很奇怪不是吗？',
+					position: 'right',
+					isMirror: false
+				},
+				{
+					characterImage: '/static/island/npc.png',
+					characterName: '罗宾',
+					text: '怎么回事',
+					position: 'left',
+					isMirror: true
+				}
+			]
 		}
 	},
 	onLoad() {
@@ -336,6 +391,11 @@ export default {
 			uni.navigateTo({
 				url: '/pages/isLand/mainLand'
 			});
+		},
+		onGuideComplete() {
+			console.log('引导完成')
+			// 这里可以添加引导完成后的逻辑
+			uni.setStorageSync('isGuideCompleted', true)
 		}
 	},
 	beforeDestroy() {

pages/isLand/mainLand.scss

@@ -43,17 +43,82 @@
       position: fixed;
       top: 0;
       left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 3; /* 最上层 */
-      pointer-events: none; /* 允许穿透点击，但内部元素可交互 */
-    }
-    /* UI层内部元素需要启用交互 */
-    .ui-content {
-      pointer-events: none; /* 重新启用交互 */
-	    bottom: 150px;
-      padding-top: 50px;
-      height: 120px;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      z-index: 100;
+      
+      /* UI层内部元素需要启用交互 */
+      .ui-content {
+        position: absolute;
+        top: 120rpx;
+        right: 20rpx;
+        pointer-events: none; /* 默认不接收事件 */
+        z-index: 101;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+      
+      .currency-display {
+        display: flex;
+        flex-direction: row;
+        gap: 20rpx;
+        margin-bottom: 20rpx;
+        padding: 10rpx;
+        pointer-events: auto; /* 货币计数器接收事件 */
+        
+        .currency-item {
+          display: flex;
+          align-items: center;
+          background: url('/static/island/UI/money_kuang.png') no-repeat center center;
+          background-size: 100% 100%;
+          padding: 12rpx 24rpx;
+          border-radius: 50rpx;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+          
+          .currency-icon {
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 12rpx;
+            margin-left: -8rpx; /* 添加左边距，使图标往左移动 */
+          }
+          
+          .currency-value {
+            font-size: 28rpx;
+            color: #FFFFFF; /* 文字颜色改为白色 */
+            font-weight: bold;
+            text-shadow: 
+              -1px -1px 0 #316624,  
+               1px -1px 0 #316624,
+              -1px  1px 0 #316624,
+               1px  1px 0 #316624; /* 添加描边效果 */
+          }
+        }
+      }
+
+      .ui-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 20rpx;
+        pointer-events: auto; /* 按钮接收事件 */
+        
+        .ui-button {
+          background: rgba(255, 255, 255, 0.9);
+          border: none;
+          padding: 16rpx 32rpx;
+          border-radius: 8rpx;
+          font-size: 28rpx;
+          color: #333;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+          min-width: 120rpx;
+          
+          &:active {
+            opacity: 0.8;
+            transform: scale(0.95);
+          }
+        }
+      }
     }
 
     /* 示例按钮样式 */

pages/isLand/mainLand.vue

@@ -57,6 +57,17 @@
     <!-- 第一层：UI -->
     <view class="ui-layer">
       <view class="ui-content">
+        <!-- 添加货币计数器 -->
+        <view class="currency-display" >
+          <view class="currency-item">
+            <image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon"></image>
+            <text class="currency-value">9999</text>
+          </view>
+          <view class="currency-item">
+            <image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon"></image>
+            <text class="currency-value">9999</text>
+          </view>
+        </view>
         <view class="ui-buttons">
           <button class="ui-button" @click="showInventory">背包</button>
           <button class="ui-button" @click="showCharacter">角色</button>

pages/isLand/talkGuide.vue

@@ -0,0 +1,165 @@
+<template>
+  <view class="talk-guide" v-if="isShow" @click="handleClick">
+    <view class="guide-content" :class="{ 'right-aligned': currentStep.position === 'right' }">
+      <view class="character-container" :class="{ 'right-aligned': currentStep.position === 'right' }">
+        <image 
+          class="character-image" 
+          :class="{ 'mirror': currentStep.isMirror }"
+          :src="currentStep.characterImage" 
+          mode="aspectFit" 
+        />
+      </view>
+      <view class="dialog-box" :class="{ 'right-aligned': currentStep.position === 'right' }">
+        <view class="character-name" :class="{ 'right-aligned': currentStep.position === 'right' }" v-if="currentStep.characterName">
+          {{ currentStep.characterName === '我' ? playerName : currentStep.characterName }}
+        </view>
+        <view class="dialog-text">{{ currentStep.text }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'TalkGuide',
+  props: {
+    guideData: {
+      type: Array,
+      default: () => []
+    },
+    playerName: {
+      type: String,
+      default: '主角'
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      isShow: true
+    }
+  },
+  computed: {
+    currentStep() {
+      return this.guideData[this.currentIndex] || {}
+    },
+    isLastStep() {
+      return this.currentIndex === this.guideData.length - 1
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.isLastStep) {
+        this.isShow = false
+        this.$emit('guide-complete')
+      } else {
+        this.nextStep()
+      }
+    },
+    nextStep() {
+      if (this.currentIndex < this.guideData.length - 1) {
+        this.currentIndex++
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.talk-guide {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .guide-content {
+    position: absolute;
+    bottom: 40rpx;
+    left: 0;
+    width: 100%;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    &.right-aligned {
+      align-items: flex-end;
+    }
+  }
+
+  .character-container {
+    width: 300rpx;
+    height: 358rpx;
+    margin-bottom: -60rpx;
+    margin-left: -40rpx;
+    position: relative;
+    z-index: 1;
+
+    &.right-aligned {
+      margin-left: 0;
+      margin-right: -40rpx;
+    }
+
+    .character-image {
+      height: 100%;
+      transition: transform 0.3s ease;
+
+      &.mirror {
+        transform: scaleX(-1);
+      }
+    }
+  }
+
+  .dialog-box {
+    background: rgba(255,241,228,0.95);
+    border-radius: 28rpx 28rpx 28rpx 28rpx;
+    border: 4rpx solid #E3985A;    
+    padding: 20rpx;
+    min-height: 120rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    position: relative;
+    z-index: 2;
+    padding-top: 30rpx;
+    width: 100%;
+    box-sizing: border-box;
+
+    &.right-aligned {
+      border-radius: 28rpx 28rpx 28rpx 28rpx;
+    }
+
+    .character-name {
+      font-size: 20rpx;
+      font-weight: bold;
+      color: #987453;
+      margin-bottom: 10rpx;
+      display: inline-block;
+      background-color: #F8F3E9;
+      padding: 4rpx 16rpx;
+      border-radius: 20rpx;
+      border: 2rpx solid #DEB691;
+      position: absolute;
+      top: -25rpx;
+      left: 5%;
+      z-index: 3;
+      width: 156rpx;
+      height: 48rpx;
+      text-align: center;
+
+      &.right-aligned {
+        left: auto;
+        right: 5%;
+      }
+    }
+
+    .dialog-text {
+      font-size: 20rpx;
+      font-weight: bold;
+      color: #A95F3C;
+      line-height: 1.5;
+      padding: 0 20rpx;
+    }
+  }
+}
+</style>