diff --git a/src/components/XImage.vue b/src/components/XImage.vue
new file mode 100644
index 0000000..aa6f89d
--- /dev/null
+++ b/src/components/XImage.vue
@@ -0,0 +1,24 @@
+<script setup>
+const {src} = defineProps({
+    src: {
+        type: String,
+        default: "",
+    }
+});
+
+const preview = () => {
+    uni.previewImage({
+        current: 0,
+        urls: [src],
+        indicator: true,
+    }).then();
+}
+</script>
+
+<template>
+    <image @click="preview" v-bind="$attrs" :src="src"></image>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/pages/taskDetails/components/TaskDetails.vue b/src/pages/taskDetails/components/TaskDetails.vue
index b0c29e2..caa5ad3 100644
--- a/src/pages/taskDetails/components/TaskDetails.vue
+++ b/src/pages/taskDetails/components/TaskDetails.vue
@@ -1,6 +1,7 @@
 <script setup>
 import fmt from "../../../static/images/fmt.png";
 import linkIcon from '../../../static/icons/link.png';
+import XImage from "../../../components/XImage.vue";
 </script>
 
 <template>
@@ -17,7 +18,8 @@ import linkIcon from '../../../static/icons/link.png';
                     <text class="ellipsis-1 flex-grow">
                         https://www.baidu.com/s?wd=%E7%8C%8E%E8%81%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1
                     </text>
-                    <view class="nowrap flex-shrink !py-[7rpx] !px-[32rpx] rounded-full bg-[#E8F3FF]" style="font-size: 24rpx">
+                    <view class="nowrap flex-shrink !py-[7rpx] !px-[32rpx] rounded-full bg-[#E8F3FF]"
+                          style="font-size: 24rpx">
                         复制
                     </view>
                 </view>
@@ -26,9 +28,9 @@ import linkIcon from '../../../static/icons/link.png';
         <view class="block">
             <view class="block-title">评论区案例:</view>
             <view class="block-info !grid grid-cols-3 gap-[20rpx]">
-                <image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></image>
-                <image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></image>
-                <image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></image>
+                <x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
+                <x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
+                <x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
             </view>
         </view>
     </view>