修改商店和工作台

components/dialogs/CraftingDialog.vue

@@ -0,0 +1,364 @@
+<template>
+  <view class="crafting-dialog" v-if="visible" @click.stop>
+    <view class="dialog-mask" @click="onClose"></view>
+    <view class="dialog-content" :class="{ 'slide-up': visible }">
+      <!-- 顶部标题栏 -->
+      <view class="dialog-header">
+        <text class="title">初级工具台</text>
+        <!-- <view class="close-btn" @click="onClose">×</view> -->
+      </view>
+      
+      <!-- 制造台内容 -->
+      <view class="dialog-body">
+        <view class="crafting-content">
+          <!-- 工具格子列表 -->
+          <scroll-view 
+            class="tools-scroll" 
+            scroll-x="true" 
+            :scroll-left="scrollLeft"
+            @scroll="onScroll"
+            @touchstart.native="onTouchStart"
+            @touchmove.native="onTouchMove"
+            @touchend.native="onTouchEnd"
+            :scroll-with-animation="true"
+            :enhanced="true"
+            :show-scrollbar="false"
+            :bounces="false"
+          >
+            <view class="tools-grid" @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove" @touchend.stop="onTouchEnd">
+              <view 
+                v-for="(tool, index) in tools" 
+                :key="index"
+                class="tool-item"
+                :class="{ 'selected': selectedToolIndex === index }"
+                @click="selectTool(index)"
+              >
+                <image :src="tool.image" mode="aspectFit" class="tool-image"></image>
+                <text class="tool-name">{{ tool.name }}</text>
+              </view>
+            </view>
+          </scroll-view>
+          
+          <!-- 选中工具的详情 -->
+          <view class="tool-details" v-if="selectedTool">
+            <text class="tool-description">{{ selectedTool.description }}</text>
+            <view class="materials-row">
+              <view class="materials">
+                <view v-for="(cost, index) in selectedTool.costs" :key="index" class="material-item">
+                  <image :src="index === 0 ? '/static/island/items/item_wood1.png' : index === 1 ? '/static/island/items/item_mine1.png' : '/static/island/UI/wd_icon_xingyuan.png'" mode="aspectFit" class="material-icon"></image>
+                  <text class="material-count">{{ cost }}</text>
+                </view>
+              </view>
+              <view class="craft-btn" @click="onCraft">打造</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CraftingDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedToolIndex: 0,
+      scrollLeft: 0,
+      startX: 0,
+      lastX: 0,
+      isDragging: false,
+      tools: [
+        {
+          name: '捕虫网',
+          image: '/static/island/items/item_bugnet1.png',
+          description: '可以让你用来捕捉大虫',
+          costs: [2000, 800, 920]
+        },
+        {
+          name: '石镐',
+          image: '/static/island/items/item_stonepickaxe1.png',
+          description: '用来挖掘矿石',
+          costs: [2000, 8000, 1300]
+        },
+        {
+          name: '铲子',
+          image: '/static/island/items/item_shovel1.png',
+          description: '用来挖掘地面',
+          costs: [3000, 7200, 2600]
+        },
+        {
+          name: '斧子',
+          image: '/static/island/items/item_axe1.png',
+          description: '用来砍伐树木',
+          costs: [5500, 10000, 5800]
+        }
+      ]
+    }
+  },
+  computed: {
+    selectedTool() {
+      return this.tools[this.selectedToolIndex]
+    }
+  },
+  methods: {
+    onClose() {
+      this.$emit('close')
+    },
+    selectTool(index) {
+      this.selectedToolIndex = index
+    },
+    onCraft() {
+      // TODO: 实现制造逻辑
+      uni.showToast({
+        title: `正在制造${this.selectedTool.name}`,
+        icon: 'none'
+      })
+    },
+    onScroll(e) {
+      console.log('滚动事件:', {
+        scrollLeft: e.detail.scrollLeft
+      });
+      this.scrollLeft = e.detail.scrollLeft;
+    },
+    onTouchStart(e) {
+      console.log('触摸开始:', {
+        clientX: e.touches[0].clientX,
+        pageX: e.touches[0].pageX,
+        screenX: e.touches[0].screenX,
+        target: e.target
+      });
+      this.startX = e.touches[0].clientX;
+      this.isDragging = true;
+      e.preventDefault && e.preventDefault();
+    },
+    onTouchMove(e) {
+      if (!this.isDragging) return;
+      const currentX = e.touches[0].clientX;
+      const deltaX = this.startX - currentX;
+      console.log('触摸移动:', {
+        currentX,
+        startX: this.startX,
+        deltaX,
+        scrollLeft: this.scrollLeft,
+        target: e.target
+      });
+      this.scrollLeft += deltaX;
+      this.startX = currentX;
+      e.preventDefault && e.preventDefault();
+    },
+    onTouchEnd(e) {
+      console.log('触摸结束:', {
+        finalScrollLeft: this.scrollLeft,
+        target: e.target
+      });
+      this.isDragging = false;
+      e.preventDefault && e.preventDefault();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.crafting-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  
+  .dialog-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  
+  .dialog-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #E79D5E;
+    box-shadow: inset 0rpx 4rpx 4rpx 0rpx rgba(255,190,134,0.3);
+    border-radius: 20rpx 20rpx 0rpx 0rpx;
+    transform: translateY(100%);
+    transition: transform 0.3s ease-out;
+    
+    &.slide-up {
+      transform: translateY(0);
+    }
+  }
+  
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32rpx;
+
+    height: 72rpx;
+    width: 220rpx;
+    background: #FDDEC1;
+    box-shadow: inset 0rpx 4rpx 4rpx 0rpx rgba(255,190,134,0.3);
+    border-radius: 20rpx 20rpx 0rpx 0rpx;
+    
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      padding-left: 20rpx;
+      color: #A95F3C;
+    }
+    
+    .close-btn {
+      font-size: 48rpx;
+      color: #999;
+      padding: 0 20rpx;
+    }
+  }
+  
+  .dialog-body {
+    background: #FDDEC1;
+    margin-top: -32rpx;
+  }
+  
+  .crafting-content {
+    padding-bottom: 32rpx;
+    .tools-scroll {
+      width: 100%;
+      white-space: nowrap;
+      // margin-bottom: 32rpx;
+      
+      .tools-grid {
+        display: flex;
+        width: max-content;
+        padding: 20rpx;
+        
+        .tool-item {
+          width: 180rpx;
+          height: 180rpx;
+          flex-shrink: 0;
+          margin-right: 20rpx;
+          background: #FFF1E4;
+          border-radius: 20rpx 20rpx 20rpx 20rpx;
+          padding: 5rpx;
+          text-align: center;
+          border: 2rpx solid #DEB691;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          
+          &:last-child {
+            margin-right: 20rpx;
+          }
+          
+          &.selected {
+            border: 4rpx solid #84B654;
+            background: #E8F5E9;
+          }
+          
+          .tool-image {
+            width: 178rpx;
+            height: 178rpx;
+            // margin: 2rpx;
+            background: #FBD6A9;
+            border-radius: 16rpx;
+            // padding: 10rpx;
+            box-sizing: border-box;
+          }
+          
+          .tool-name {
+            font-size: 28rpx;
+            font-weight: bold;
+            color:#A95F3C;
+            white-space: normal;
+            line-height: 1.2;
+            width: 100%;
+            padding: 12rpx 0;
+            background: rgba(255, 255, 255, 0.8);
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border-radius: 0 0 20rpx 20rpx;
+          }
+        }
+      }
+    }
+    
+    .tool-details {
+      width: 694rpx;
+      height: 170rpx;
+      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;
+      margin: 0 auto;
+      padding: 20rpx 30rpx;
+      box-sizing: border-box;
+      
+      .tool-description {
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #A95F3C;
+        margin-bottom: 16rpx;
+        line-height: 1.4;
+      }
+      
+      .materials-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 32rpx;
+      }
+      
+      .materials {
+        display: flex;
+        gap: 32rpx;
+        
+        .material-item {
+          display: flex;
+          align-items: center;
+          gap: 8rpx;
+          
+          .material-icon {
+            width: 40rpx;
+            height: 40rpx;
+          }
+          
+          .material-count {
+            font-size: 28rpx;
+            color: #A95F3C;
+          }
+        }
+      }
+      
+      .craft-btn {
+        width: 144rpx;
+        height: 53rpx;
+        background: url('/static/island/UI/btn_green.png') no-repeat;
+        background-size: 100% 100%;
+        color: white;
+        font-size: 28rpx;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &:active {
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
+</style> 

components/dialogs/ShopDialog.scss

@@ -1,32 +1,40 @@
 .shop-content {
-  background: #f8f3e9;
-  min-height: 200rpx;
-  padding: 20rpx;
-  height: 680rpx;
+  margin-top: 25rpx;
+  margin-left: 10rpx;
+  background: url('/static/island/UI/task/rw_bg.png') no-repeat center center;
+  background-size: cover;
+  width: 702rpx;
+  height: 984rpx;
   display: flex;
   flex-direction: column;
 
   .shop-tabs {
+    flex-shrink: 0;
     display: flex;
-    margin-bottom: 20rpx;
-    background: #8b5e3c;
-    border-radius: 8rpx;
-    padding: 10rpx;
+    align-items: center;
+    justify-content: center;
+    padding-top: 60rpx;
+    gap: 40rpx;
 
     .tab-item {
-      flex: 1;
-      text-align: center;
-      padding: 15rpx 0;
-      font-size: 28rpx;
-      color: #f8f3e9;
-      background: #6b4423;
-      margin: 0 5rpx;
-      border-radius: 6rpx;
+      color: #FFF;
+      font-size: 32rpx;
+      font-weight: bold;
+      position: relative;
+      padding: 0 20rpx;
 
       &.active {
-        background: #f8f3e9;
-        color: #6b4423;
-        font-weight: bold;
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -10rpx;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 120rpx;
+          height: 4rpx;
+          background: #FFF;
+          border-radius: 2rpx;
+        }
       }
     }
   }
@@ -34,121 +42,133 @@
   .shop-items {
     flex: 1;
     overflow-y: auto;
+    margin-top: 10rpx;
+    margin-bottom: 18rpx;
+    padding: 0 20rpx;
 
-    .shop-item {
-      width: 100%;
-      padding: 0 10rpx;
-      margin-top: 10rpx;
-      margin-bottom: 20rpx;
-      height: 220rpx;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
+    &::-webkit-scrollbar {
+      width: 6rpx;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(166, 124, 82, 0.3);
+      border-radius: 3rpx;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: transparent;
     }
 
-    .item-card {
-      background: #fff;
-      border-radius: 12rpx;
-      padding: 5px;
-      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;
-      }
+    .shop-item {
+      margin-bottom: 20rpx;
 
-      .item-left {
+      .item-card {
+        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;
+        border: 2rpx solid #DEB691;
+        padding: 20rpx;
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-right: 20rpx;
-        width: 80rpx;
-        padding-left: 10rpx;
-        .item-icon {
-          width: 80rpx;
-          height: 80rpx;
-          margin-bottom: 28rpx;
-        }
+        position: relative;
 
-        .owned-text {
-          font-size: 22rpx;
-          color: #666;
-          white-space: nowrap;
+        .new-tag {
+          position: absolute;
+          top: -10rpx;
+          right: 20rpx;
+          background: linear-gradient(to right, #FF6B6B, #FF8E8E);
+          color: #FFF;
+          font-size: 20rpx;
+          padding: 4rpx 12rpx;
+          border-radius: 10rpx;
         }
-      }
 
-      .item-info {
-        padding-left: 80rpx;
-        flex: 1;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        
-        .item-name {
-          font-size: 26rpx;
-          color: #933;
-          font-weight: bold;
-          margin-bottom: 8rpx;
-        }
+        .item-left {
+          margin-right: 20rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
 
-        .item-details {
-          font-size: 20rpx;
-          color: #666;
-          padding-left: 10rpx;
+          .item-icon {
+            width: 120rpx;
+            height: 120rpx;
+            background: linear-gradient(to bottom right, #B8E986, #7EC242);
+            border-radius: 16rpx;
+            padding: 10rpx;
+          }
 
-          .detail-text {
-            display: block;
+          .owned-text {
+            margin-top: 10rpx;
+            color: #987453;
+            font-size: 24rpx;
           }
         }
 
-        .item-bottom {
+        .item-info {
+          flex: 1;
           display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-top: auto;
-          margin-bottom: 10rpx;
-          position: absolute;
-          bottom: 0;
-          left: 80rpx;
-          right: 0;
+          flex-direction: column;
 
-          .item-price {
+          .item-name {
+            color: #987453;
+            font-size: 28rpx;
+            font-weight: bold;
+            margin-bottom: 10rpx;
+          }
+
+          .item-details {
+            margin-bottom: 20rpx;
+
+            .detail-text {
+              color: #987453;
+              font-size: 24rpx;
+              margin-right: 20rpx;
+            }
+          }
+
+          .item-bottom {
+            margin-top: auto;
             display: flex;
+            justify-content: space-between;
             align-items: center;
-            gap: 4rpx;
-            margin-top: 25rpx;
 
-            .currency-icon {
-              width: 24rpx;
-              height: 24rpx;
+            .item-price {
+              display: flex;
+              align-items: center;
+              gap: 8rpx;
+
+              .currency-icon {
+                width: 32rpx;
+                height: 32rpx;
+              }
+
+              text {
+                color: #987453;
+                font-size: 28rpx;
+                font-weight: bold;
+              }
             }
 
-            text {
+            .buy-btn {
+              min-width: 120rpx;
+              height: 62rpx;
+              line-height: 62rpx;
+              text-align: center;
               font-size: 24rpx;
-              color: #ff9500;
-              font-weight: bold;
+              color: #ffffff;
+              background-image: url('/static/island/UI/btn_yellow.png');
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              border: none;
+              padding: 0 20rpx;
+
+              &:active {
+                transform: scale(0.95);
+                opacity: 0.9;
+              }
             }
           }
-
-          .buy-btn {
-            background: #8b5e3c;
-            color: white;
-            font-size: 24rpx;
-            padding: 4rpx 16rpx;
-            border-radius: 30rpx;
-            border: none;
-            margin-right: 10rpx; 
-          }
         }
       }
     }

components/dialogs/ShopDialog.vue

@@ -1,5 +1,12 @@
 <template>
-  <custom-dialog :visible.sync="dialogVisible" title="商城" @close="onClose">
+  <custom-dialog 
+    :visible.sync="dialogVisible" 
+    title="" 
+    content-width="720rpx" 
+    closeImg="/static/island/UI/btn_close.png" 
+    closeImgTop="0rpx" 
+    @close="onClose"
+  >
     <view class="shop-content">
       <view class="shop-tabs">
         <view 

pages/isLand/homeLand.vue

@@ -11,17 +11,21 @@
       </view>
 
       <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>
+        <image class="table-image" src="/static/island/building/workTable.png" mode="widthFix" style="width:670rpx; position: static;" @click="onTableClick" :animation="tableAnimationData">	</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>
 
+      <view style="position: absolute;width:200rpx;left:1000rpx; bottom:450rpx;align-items: center;">
+        <image class="taskBoard-image" src="/static/island/building/taskBoard.png" mode="widthFix" style="width:670rpx; position: static;" @click="onTaskClick" :animation="taskAnimationData">	</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>
+        <text class="main-text">去主岛</text>
       </view>
     </view>
   
@@ -60,6 +64,9 @@
       :player-name="playerName"
       @guide-complete="onGuideComplete"
     ></talk-guide>
+
+    <!-- 制造台对话框组件 -->
+    <crafting-dialog :visible.sync="craftingVisible" @close="craftingVisible = false"></crafting-dialog>
   </view> 
 </template>
 
@@ -70,6 +77,7 @@ import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
 import ShopDialog from '@/components/dialogs/ShopDialog.vue'
 import TaskDialog from './TaskDialog.vue'
 import TalkGuide from './talkGuide.vue'
+import CraftingDialog from '@/components/dialogs/CraftingDialog.vue'
 
 export default {
 	components: {
@@ -77,7 +85,8 @@ export default {
 		CharacterDialog,
 		ShopDialog,
 		TaskDialog,
-		TalkGuide
+		TalkGuide,
+		CraftingDialog
 	},
 	data() {
 		return {
@@ -92,9 +101,11 @@ export default {
 			backgroundWidth: 0,
 			islandHeight: 0,
 			houseAnimationData: {},
-			hallAnimationData: {},
+			tableAnimationData: {},
+			taskAnimationData: {},
 			houseAnimating: false,
-			hallAnimating: false,
+			tableAnimating: false,
+			taskAnimating: false,
 			baseTranslate: { x: -50, y: 50 },
 			inventoryVisible: false,
 			characterVisible: false,
@@ -133,7 +144,8 @@ export default {
 					position: 'left',
 					isMirror: true
 				}
-			]
+			],
+			craftingVisible: false
 		}
 	},
 	onLoad() {
@@ -179,12 +191,12 @@ export default {
 					this.translateX = -this.maxTranslate / 2;
 					
 					// 打印调试信息
-					console.log('屏幕宽度:', this.screenWidth);
-					console.log('背景宽度:', this.backgroundWidth);
-					console.log('岛屿高度:', this.islandHeight);
-					console.log('最大可移动距离:',this.maxTranslate);
+					// console.log('屏幕宽度:', this.screenWidth);
+					// console.log('背景宽度:', this.backgroundWidth);
+					// console.log('岛屿高度:', this.islandHeight);
+					// console.log('最大可移动距离:',this.maxTranslate);
 					
-					console.log('岛屿data:', data);
+					// console.log('岛屿data:', data);
 					
 				} else {
 					console.error('未能获取岛屿图片的尺寸');
@@ -270,16 +282,27 @@ export default {
 			});
 		},
 
-		onHallClick(event) {
-			if(this.hallAnimating) return;
+		onTableClick(event) {
+			if(this.tableAnimating) return;
+			console.log('Table clicked!');
+			
+			// 播放大厅的点击动画
+			this.playAnimation('table');
+			
+			// 显示制造台界面
+			this.craftingVisible = true;
+		},
+
+		onTaskClick(event) {
+			if(this.taskAnimating) return;
 			// 处理点击事件
-			console.log('Hall clicked!');
+			console.log('Task clicked!');
 			
 			// 播放大厅的点击动画
-			this.playAnimation('hall');
+			this.playAnimation('task');
 			
 			uni.showToast({
-				title: 'Hall clicked!',
+				title: 'task clicked!',
 				icon: 'none'
 			});
 		},
@@ -290,8 +313,10 @@ export default {
 			// 根据类型设置对应的动画状态
 			if (type === 'house') {
 				this.houseAnimating = true;
-			} else if (type === 'hall') {
-				this.hallAnimating = true;
+			} else if (type === 'table') {
+				this.tableAnimating = true;
+			} else if (type === 'task') {
+				this.taskAnimating = true;
 			}
 
 			// 创建动画实例
@@ -309,16 +334,20 @@ export default {
 			// 根据类型应用动画到对应的元素
 			if (type === 'house') {
 				this.houseAnimationData = animation.export();
-			} else if (type === 'hall') {
-				this.hallAnimationData = animation.export();
+			} else if (type === 'table') {
+				this.tableAnimationData = animation.export();
+			} else if (type === 'task') {
+				this.taskAnimationData = animation.export();
 			}
 
 			// 动画结束后重置状态
 			setTimeout(() => {
 				if (type === 'house') {
 					self.houseAnimating = false;
-				} else if (type === 'hall') {
-					self.hallAnimating = false;
+				} else if (type === 'table') {
+					self.tableAnimating = false;
+				} else if (type === 'task') {
+					self.taskAnimating = false;
 				}
 			}, 800);
 		},
@@ -370,7 +399,7 @@ export default {
 			const animate = () => {
 				if (!this.mainArrowAnimating) return;
 
-				animation.translateY(-20).step({ duration: 1000 });
+				animation.translateY(-10).step({ duration: 1000 });
 				this.mainArrowAnimation = animation.export();
 
 				setTimeout(() => {
@@ -459,15 +488,14 @@ export default {
 
 .main-arrow {
   position: absolute;
-  right: 100rpx;  // 调整到右边位置
-  top: 50%;
-  transform: translateY(-50%);
+  right: 100rpx;
+  bottom: 100rpx;  // 改为 bottom 定位
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
   z-index: 10;
-  transition: opacity 0.5s ease-in-out;  // 添加淡入效果
+  transition: opacity 0.5s ease-in-out;
 
   .main-text {
     color: #ffffff;