components/CustomDialog/CustomDialog.vue

@@ -6,7 +6,7 @@
         <text class="dialog-title">{{title}}</text>
       </view>
       <view class="dialog-close" @click="closeDialog" v-if="!closeImg">×</view>
-      <image v-if="closeImg" class="dialog-close-img" :src="closeImg" @click="closeDialog" mode="aspectFit"></image>
+      <image v-if="closeImg" class="dialog-close-img" :src="closeImg" @click="closeDialog" mode="aspectFit" :style="{ top: closeImgTop && closeImgTop.length > 0 ? closeImgTop : '20rpx' }"></image>
       <view class="dialog-body">
         <slot></slot>
       </view>
@@ -33,6 +33,10 @@ export default {
     closeImg: {
       type: String,
       default: ''
+    },
+    closeImgTop: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -105,8 +109,8 @@ export default {
   
   .dialog-content {
     position: relative;
-    background: #fff;
-    border-radius: 16rpx;
+    // background: #fff;
+    // border-radius: 16rpx;
     overflow: hidden;
     opacity: 0;
     transform: scale(0.8);
@@ -151,7 +155,6 @@ export default {
   .dialog-close-img {
     position: absolute;
     right: 20rpx;
-    top: 20rpx;
     width: 60rpx;
     height: 60rpx;
     z-index: 1;
@@ -163,7 +166,7 @@ export default {
   }
   
   .dialog-body {
-    padding: 30rpx;
+    padding: 0rpx;
   }
 }
 </style> 

pages/isLand/TaskDialog.scss

@@ -1,35 +1,55 @@
 .task-board {
-  padding: 30rpx;
-  background: transparent;
-  width: 600rpx;
-  margin: 0 auto;
+  margin-top: 25rpx;
+  margin-left: 10rpx;
+  background: url('/static/island/UI/task/rw_bg.png') no-repeat center center;
+  background-size: cover;
+  width: 702rpx;
+  // margin: 0 auto;
+  height: 984rpx;
+  display: flex;
+  flex-direction: column;
   
   .board-title {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 30rpx;
-    
-    .title-dot {
-      width: 12rpx;
-      height: 12rpx;
-      border-radius: 50%;
-      background-color: #A67C52;
-      margin: 0 20rpx;
-    }
+    padding-top: 60rpx;
+    // margin-bottom: 30rpx;
     
     text {
-      color: #A67C52;
+      color: #FFF;
       font-size: 32rpx;
       font-weight: bold;
     }
   }
 
+  .task-cards-container {
+    flex: 1;
+    overflow-y: auto;
+    // padding: 0 16rpx;
+    margin-top: 10rpx;
+    margin-bottom: 18rpx;
+    
+    &::-webkit-scrollbar {
+      width: 6rpx;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(166, 124, 82, 0.3);
+      border-radius: 3rpx;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+
   .task-card {
     background-color: rgba(255, 246, 235, 0.95);
     border-radius: 20rpx;
     padding: 24rpx;
-    margin-bottom: 16rpx;
+    margin: 10rpx 43rpx 15rpx 43rpx  ;
     position: relative;
     
     .task-header,
@@ -37,13 +57,14 @@
       margin-bottom: 16rpx;
       
       .task-label {
-        color: #A67C52;
+        color: #987453;
         font-size: 26rpx;
-        font-weight: 500;
+        // font-weight: 500;
+        font-weight: bold;
       }
       
       .task-content {
-        color: #8B6244;
+        color: #987453;
         font-size: 26rpx;
         margin-left: 8rpx;
       }
@@ -51,18 +72,19 @@
     
     .task-rewards {
       margin-bottom: 24rpx;
+      display: flex;
+      align-items: flex-start;
       
       .task-label {
-        color: #A67C52;
+        color: #987453;
         font-size: 26rpx;
-        font-weight: 500;
-        display: block;
-        margin-bottom: 16rpx;
+        font-weight: bold;
+        margin-right: 16rpx;
       }
       
       .reward-list {
         display: flex;
-        gap: 30rpx;
+        gap: 10rpx;
         
         .reward-item {
           display: flex;
@@ -70,80 +92,88 @@
           align-items: center;
           
           .reward-box {
-            width: 90rpx;
-            height: 90rpx;
+            width: 70rpx;
+            height: 70rpx;
             background: linear-gradient(to bottom right, #B8E986, #7EC242);
-            border-radius: 14rpx;
+            border-radius: 12rpx;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-bottom: 8rpx;
+            margin-bottom: 6rpx;
             
             &:nth-child(3) {
               background: linear-gradient(to bottom right, #E5C1FF, #9D7EE0);
             }
             
             .reward-icon {
-              width: 60rpx;
-              height: 60rpx;
+              width: 45rpx;
+              height: 45rpx;
             }
           }
           
           .reward-text {
             color: #B3894A;
-            font-size: 22rpx;
+            font-size: 20rpx;
             text-align: center;
           }
         }
       }
     }
     
+
     .task-footer {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
       align-items: center;
-      
+      margin-top: 16rpx;
+      padding-top: 16rpx;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        height: 2rpx;
+        background: linear-gradient(to right, 
+          transparent, 
+          rgba(179, 137, 74, 0.3) 20%, 
+          rgba(179, 137, 74, 0.3) 80%, 
+          transparent
+        );
+      }
+
       .task-date {
         color: #CCAB8F;
         font-size: 24rpx;
+        margin-right: auto;
       }
       
       .task-button {
-        min-width: 140rpx;
-        height: 60rpx;
-        line-height: 60rpx;
+        min-width: 170rpx;
+        height: 62rpx;
         text-align: center;
-        border-radius: 30rpx;
         font-size: 24rpx;
         border: none;
-        padding: 0 24rpx;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
         
         &.completed {
-          background: linear-gradient(to right, #FFD879, #FFA751);
+          background-image: url('/static/island/UI/btn_green.png');
           color: #ffffff;
-          box-shadow: 0 4rpx 8rpx rgba(255, 167, 81, 0.3);
+          
+          &:active {
+            transform: scale(0.95);
+            opacity: 0.9;
+          }
         }
         
-        &.available {
-          background: linear-gradient(to right, #ADE277, #7EC242);
+        &.uncompleted {
+          background-image: url('/static/island/UI/btn_yellow.png');
           color: #ffffff;
-          box-shadow: 0 4rpx 8rpx rgba(126, 194, 66, 0.3);
         }
       }
     }
-    
-    .card-divider {
-      position: absolute;
-      left: 24rpx;
-      right: 24rpx;
-      bottom: 0;
-      height: 2rpx;
-      background: linear-gradient(to right, 
-        transparent, 
-        rgba(179, 137, 74, 0.3) 20%, 
-        rgba(179, 137, 74, 0.3) 80%, 
-        transparent
-      );
-    }
   }
 } 

pages/isLand/TaskDialog.vue

@@ -1,41 +1,43 @@
 <template>
-  <custom-dialog :visible="visible" title="" content-width="720rpx" @close="onClose">
+  <custom-dialog :visible="visible" title="" content-width="720rpx" closeImg="/static/island/UI/btn_close.png" closeImgTop="0rpx" @close="onClose">
     <view class="task-board">
       <view class="board-title">
         <view class="title-dot"></view>
         <text>任务看板</text>
         <view class="title-dot"></view>
       </view>
-      <view v-for="(task, index) in tasks" :key="index" class="task-card">
-        <view class="task-header">
-          <text class="task-label">任务目标：</text>
-          <text class="task-content">{{task.title}}</text>
-        </view>
-        <view class="task-desc">
-          <text class="task-label">任务描述：</text>
-          <text class="task-content">{{task.description}}</text>
-        </view>
-        <view class="task-rewards">
-          <text class="task-label">任务奖励：</text>
-          <view class="reward-list">
-            <view v-for="(reward, rIndex) in task.rewards" :key="rIndex" class="reward-item">
-              <view class="reward-box">
-                <image :src="reward.icon" class="reward-icon"></image>
+      <view class="task-cards-container">
+        <view v-for="(task, index) in tasks" :key="index" class="task-card">
+          <view class="task-header">
+            <text class="task-label">任务目标：</text>
+            <text class="task-content">{{task.title}}</text>
+          </view>
+          <view class="task-desc">
+            <text class="task-label">任务描述：</text>
+            <text class="task-content">{{task.description}}</text>
+          </view>
+          <view class="task-rewards">
+            <text class="task-label">任务奖励：</text>
+            <view class="reward-list">
+              <view v-for="(reward, rIndex) in task.rewards" :key="rIndex" class="reward-item">
+                <view class="reward-box">
+                  <image :src="reward.icon" class="reward-icon"></image>
+                </view>
+                <text class="reward-text">{{reward.text}}</text>
               </view>
-              <text class="reward-text">{{reward.text}}</text>
             </view>
           </view>
+          <view class="task-footer">
+            <text class="task-date">{{task.date}}</text>
+            <button 
+              :class="['task-button', task.status === 'completed' ? 'completed' : 'uncompleted']"
+              @click="handleTaskAction(task)"
+            >
+              {{task.status === 'completed' ? '完成任务' : '未完成'}}
+            </button>
+          </view>
+          <view class="card-divider"></view>
         </view>
-        <view class="task-footer">
-          <text class="task-date">{{task.date}}</text>
-          <button 
-            :class="['task-button', task.status === 'completed' ? 'completed' : 'available']"
-            @click="handleTaskAction(task)"
-          >
-            {{task.status === 'completed' ? '完成任务' : '领取任务'}}
-          </button>
-        </view>
-        <view class="card-divider"></view>
       </view>
     </view>
   </custom-dialog>
@@ -78,6 +80,26 @@ export default {
           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'
+        },
         {
           title: '负债累累的冒险家',
           description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
@@ -114,10 +136,10 @@ export default {
         })
       } else {
         // 处理领取任务的逻辑
-        uni.showToast({
-          title: '已领取任务',
-          icon: 'success'
-        })
+        // uni.showToast({
+        //   title: '已领取任务',
+        //   icon: 'success'
+        // })
       }
     }
   }