feat：添加作物档案水印

src/api/modules/ali.js

@@ -17,4 +17,9 @@ module.exports = {
         url: config.base_dev_url + "lz_tree_image/treeImageList",
         type: "post",
     },
+    //findSuitabilityByPoint
+    findSuitabilityByPoint: {
+        url: config.base_dev_url + "lz_weather7d/findSuitabilityByPoint/{farmId}/{date}",
+        type: "get",
+    },
 }

src/components/album_compoents/albumCarousel.vue

@@ -1,5 +1,5 @@
 <template>
-    <album-carousel-item v-if="images" :labelText="labelText" :imgData="imgData" :images="images" :isAchievementImgs="isAchievementImgs"></album-carousel-item>
+    <album-carousel-item v-if="images" :labelText="labelText" :imgData="imgData" :imgType="imgType" :images="images" :isAchievementImgs="isAchievementImgs" :disableClick="disableClick"></album-carousel-item>
 </template>
 
 <script setup>
@@ -24,6 +24,14 @@ const props =defineProps({
     type: Object,
     default: () => {},
   },
+  imgType:{
+    type: String,
+    default: '',
+  },
+  disableClick:{
+    type: Boolean,
+    default: false,
+  },
 })
 const { images } = toRefs(props);
 

src/components/album_compoents/albumCarouselItem.vue

@@ -10,41 +10,129 @@
                     ></album-draw-box>
                     </template>
             </photo-provider> -->
-            <div
-                class="carousel-img"
-                v-for="(photo, index) in images"
-                :key="index"
-            >
+            <div class="carousel-img" v-for="(photo, index) in images" :key="index">
                 <div class="label-text" v-if="labelText">{{ labelText }}</div>
                 <img class="img-dom" :index="index" @click="clickPhoto(photo)" :src="getPhotoSrc(photo)" alt="" />
-                <div class="carousel-img-mask" v-if="!isAchievementImgs">
-                    <div class="mask-content">
-                        <div class="mask-line line-top">
-                            <span class="date-text">{{ imgData?.executeDate }}</span>
-                            <span class="line-separator">|</span>
-                            <span class="executor-text">执行人：{{ imgData?.executeName }}</span>
+
+                <div class="carousel-img-mask app-mask" v-if="!isAchievementImgs && imgType === 'app'">
+                    <div class="mask-content app-mask-content">
+                        <div class="app-mask-top">
+                            <div class="app-mask-top-left">
+                                <div class="app-year">{{ formatYear(imgData?.createTime || imgData?.updateTime) }}</div>
+                                <div class="app-date-wrapper">
+                                    <div class="app-date-line"></div>
+                                    <div class="app-date">
+                                        {{ formatMonthDay(imgData?.createTime || imgData?.updateTime) }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="app-mask-top-right">
+                                    <div class="app-phenology">当前处于 {{ imgData?.phenologyName }}</div>
+                                    <div class="app-uploader">上传人:{{ imgData?.sourceDataJson?.userName }}</div>
+                                </div>
+                                <!-- 底部中间/右侧：天气信息和位置 -->
+                                <div class="app-mask-bottom">
+                                    <div class="app-weather-info">
+                                        <div class="app-weather-item">
+                                            <img class="app-weather-icon" src="@/assets/watermark/temp.png" alt="" />
+                                            <span
+                                                >{{ imgData?.sourceDataJson?.suitability?.tempMin }}-{{
+                                                    imgData?.sourceDataJson?.suitability?.tempMax
+                                                }}℃ {{ imgData?.sourceDataJson?.suitability?.tempSuitability }}</span
+                                            >
+                                        </div>
+                                        <div class="app-weather-item">
+                                            <img class="app-weather-icon" src="@/assets/watermark/shidu.png" alt="" />
+                                            <span>{{ imgData?.sourceDataJson?.suitability?.humiditySuitability }}</span>
+                                        </div>
+                                        <div class="app-weather-item">
+                                            <img class="app-weather-icon" src="@/assets/watermark/fushe.png" alt="" />
+                                            <span>{{ imgData?.sourceDataJson?.suitability?.vindexSuitability }}</span>
+                                        </div>
+                                        <!-- <span class="app-weather-separator" v-if="imgData?.sourceDataJson?.address">-</span>
+                                        <span class="app-location">
+                                            {{ imgData?.sourceDataJson?.address }}
+                                        </span> -->
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        <div class="mask-line line-middle">
-                            <span class="work-name">{{ imgData?.farmWorkName }}</span>
-                            <span class="line-separator">|</span>
-                            <span class="location-text">
-                                <img src="@/assets/watermark/address.png" alt="location" class="location-icon" />
-                                {{ imgData?.farmName }}
-                            </span>
+                    </div>
+                </div>
+                <div class="carousel-img-mask app-mask" v-else-if="!isAchievementImgs && imgType === 'dji'">
+                    <div class="mask-content app-mask-content">
+                        <div class="dji-mask-top">
+                            <span>{{ imgData?.sourceDataJson?.resFilename?.[index]?.treeCode }}</span>
+                            <span>蓬径:{{ imgData?.sourceDataJson?.resFilename?.[index]?.pengjing }}m</span>
+                            <span>高度:{{ imgData?.sourceDataJson?.resFilename?.[index]?.height.toFixed(1) }}m</span>
+                            <span>{{ imgData?.sourceDataJson?.resFilename?.[index]?.highYield === 1 ? '高产树' : '低产树' }}</span>
+                            <span>{{ imgData?.sourceDataJson?.resFilename?.[index]?.pingzhong }}</span>
                         </div>
-                        <div class="mask-line line-bottom">
-                            <span class="prescription-text">药物处方：{{ prescriptionText }}</span>
+                        <div class="app-mask-bottom">
+                            <div class="app-weather-info">
+                                <div class="app-weather-item">
+                                    <img class="app-weather-icon" src="@/assets/watermark/temp.png" alt="" />
+                                    <span
+                                        >{{ imgData?.sourceDataJson?.suitability?.tempMin }}-{{
+                                            imgData?.sourceDataJson?.suitability?.tempMax
+                                        }}℃ {{ imgData?.sourceDataJson?.suitability?.tempSuitability }}</span
+                                    >
+                                </div>
+                                <div class="app-weather-item">
+                                    <img class="app-weather-icon" src="@/assets/watermark/shidu.png" alt="" />
+                                    <span>{{ imgData?.sourceDataJson?.suitability?.humiditySuitability }}</span>
+                                </div>
+                                <div class="app-weather-item">
+                                    <img class="app-weather-icon" src="@/assets/watermark/fushe.png" alt="" />
+                                    <span>{{ imgData?.sourceDataJson?.suitability?.vindexSuitability }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="garden-info">
+                            <span class="drone-date">{{ imgData?.droneDate }}</span>
+                            <span class="code van-ellipsis">{{ imgData?.sourceDataJson?.resFilename?.[index]?.longCode }}</span>
+                        </div>
+                        <div class="base-map-wrapper" v-if="imgData?.sourceDataJson?.resFilename?.[index]?.baseMap">
+                            <img
+                                class="base-map-img"
+                                :src="imgData?.sourceDataJson?.resFilename?.[index]?.baseMap"
+                                alt=""
+                            />
                         </div>
                     </div>
                 </div>
-                <div class="carousel-img-mask" v-if="isAchievementImgs && imgData?.reCheckText">
-                    <div class="mask-content">
-                        <div class="review-effect-text">复核成效</div>
-                        <div class="review-effect-content">
-                            <span class="review-effect-content-text">{{ imgData?.reCheckText }}</span>
+
+                <template v-else>
+                    <div class="carousel-img-mask" v-if="!isAchievementImgs">
+                        <div class="mask-content">
+                            <div class="mask-line line-top">
+                                <span class="date-text">{{ imgData?.executeDate }}</span>
+                                <span class="line-separator">|</span>
+                                <span class="executor-text">执行人：{{ imgData?.executeName }}</span>
+                            </div>
+                            <div class="mask-line line-middle">
+                                <span class="work-name">{{ imgData?.farmWorkName }}</span>
+                                <span class="line-separator">|</span>
+                                <span class="location-text">
+                                    <img src="@/assets/watermark/address.png" alt="location" class="location-icon" />
+                                    {{ imgData?.farmName }}
+                                </span>
+                            </div>
+                            <div class="mask-line line-bottom">
+                                <span class="prescription-text">药物处方：{{ prescriptionText }}</span>
+                            </div>
                         </div>
                     </div>
-                </div>
+                    <div class="carousel-img-mask" v-if="isAchievementImgs && imgData?.reCheckText">
+                        <div class="mask-content">
+                            <div class="review-effect-text">复核成效</div>
+                            <div class="review-effect-content">
+                                <span class="review-effect-content-text">{{ imgData?.reCheckText }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
             </div>
         </div>
 
@@ -74,7 +162,6 @@
                                 <img src="@/assets/watermark/address.png" alt="location" class="location-icon" />
                                 {{ imgData?.farmName }}
                             </span>
-                            
                         </div>
                         <div class="mask-line line-bottom">
                             <span class="prescription-text">药物处方：{{ prescriptionText }}</span>
@@ -99,9 +186,7 @@
             <!-- 底部操作按钮 -->
             <div class="bottom-actions" @click.stop="showPopup = false">
                 <div class="action-buttons">
-                    <div class="action-btn text-btn">
-                        &lt;&lt;长按图片保存或转发&gt;&gt;
-                    </div>
+                    <div class="action-btn text-btn">&lt;&lt;长按图片保存或转发&gt;&gt;</div>
                     <!-- <div class="action-btn green-btn" @click.stop="handleWechat">
                         <div class="icon-circle">
                             <img src="@/assets/img/home/wechat.png" alt="" />
@@ -145,8 +230,16 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    imgType: {
+        type: String,
+        default: "",
+    },
+    disableClick: {
+        type: Boolean,
+        default: false,
+    },
 });
-const { images, labelText, isAchievementImgs } = toRefs(props);
+const { images, labelText, isAchievementImgs, imgType, disableClick } = toRefs(props);
 let timer = null;
 const currentIndex = ref(0);
 
@@ -159,29 +252,49 @@ onUnmounted(() => {
     clearInterval(timer);
 });
 
-
-watch(() => props.imgData, (newVal) => {
-    if (newVal && newVal.prescriptionList) {
-        prescriptionText.value = buildPrescriptionText(newVal.prescriptionList);
+watch(
+    () => props.imgData,
+    (newVal) => {
+        if (newVal && newVal.prescriptionList) {
+            prescriptionText.value = buildPrescriptionText(newVal.prescriptionList);
+        }
     }
-});
-
+);
 
 const prescriptionText = ref("");
 function buildPrescriptionText(list) {
-    if (!list || !Array.isArray(list) || list.length === 0 || list[0]?.pesticideFertilizerList?.length === 0) {
+    if (!list || !Array.isArray(list) || list.length === 0) {
         return "无处方";
     }
     try {
-        return list
-            .map((group) =>
-                (group.pesticideFertilizerList || [])
-                    .map((p) => p.defaultName || p.pesticideFertilizerName || "")
-                    .filter(Boolean)
-                    .join("+")
-            )
-            .filter(Boolean)
-            .join("+");
+        // 兼容原有格式：嵌套结构 [{ pesticideFertilizerList: [...] }]
+        if (list[0]?.pesticideFertilizerList) {
+            const result = list
+                .map((group) =>
+                    (group.pesticideFertilizerList || [])
+                        .map((p) => p.defaultName || p.pesticideFertilizerName || "")
+                        .filter(Boolean)
+                        .join("+")
+                )
+                .filter(Boolean)
+                .join("+");
+            return result || "无处方";
+        }
+        
+        // 兼容新格式：直接是字符串数组 ["药物1", "药物2"]
+        if (typeof list[0] === "string") {
+            return list.filter(Boolean).join("+") || "无处方";
+        }
+        
+        // 兼容新格式：对象数组 [{ defaultName: "xxx" }, { defaultName: "yyy" }]
+        if (list[0]?.defaultName || list[0]?.pesticideFertilizerName) {
+            return list
+                .map((p) => p.defaultName || p.pesticideFertilizerName || "")
+                .filter(Boolean)
+                .join("+") || "无处方";
+        }
+        
+        return "无处方";
     } catch {
         return "无处方";
     }
@@ -246,6 +359,9 @@ const previewCanvas = ref(null);
 
 const currentImgRef = ref(null);
 const clickPhoto = (photo) => {
+    if (disableClick.value) {
+        return;
+    }
     currentPhoto.value = getPhotoSrc(photo);
     nextTick(async () => {
         const canvas = await html2canvas(currentImgRef.value, {
@@ -269,7 +385,7 @@ const clickPhoto = (photo) => {
 };
 
 const handleSaveImage = () => {
-    downloadImage(previewCanvas.value, '执行照片');
+    downloadImage(previewCanvas.value, "执行照片");
 };
 
 function downloadImage(dataUrl, filename) {
@@ -287,6 +403,24 @@ const getPhotoSrc = (photo) => {
     // }
     return base_img_url2 + (photo.cloudFilename ? photo.cloudFilename : photo);
 };
+
+// 格式化年份
+const formatYear = (dateStr) => {
+    if (!dateStr) return "";
+    const date = new Date(dateStr);
+    if (Number.isNaN(date.getTime())) return "";
+    return date.getFullYear().toString();
+};
+
+// 格式化月/日
+const formatMonthDay = (dateStr) => {
+    if (!dateStr) return "";
+    const date = new Date(dateStr);
+    if (Number.isNaN(date.getTime())) return "";
+    const m = date.getMonth() + 1;
+    const d = date.getDate();
+    return `${m}/${d}`;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -368,11 +502,137 @@ const getPhotoSrc = (photo) => {
         padding: 8px 12px;
         box-sizing: border-box;
         border-radius: 8px 8px 12px 12px;
+        &.app-mask {
+            padding: 0;
+            height: 100%;
+        }
         .mask-content {
             width: 100%;
             color: #ffffff;
             font-size: 10px;
             line-height: 15px;
+            &.app-mask-content {
+                padding: 10px 8px;
+                font-size: 12px;
+                background: rgba(0, 0, 0, 0.2);
+                backdrop-filter: blur(4px);
+                .dji-mask-top {
+                    background: rgba(0, 0, 0, 0.4);
+                    backdrop-filter: blur(4px);
+                    border-radius: 5px 0 5px 0;
+                    padding: 6px 11px;
+                    position: absolute;
+                    top: -203px;
+                    left: 0;
+                    display: flex;
+                    gap: 9px;
+                    font-size: 10px;
+                }
+                .garden-info {
+                    display: flex;
+                    align-items: center;
+                    margin-top: 4px;
+                    width: calc(100% - 125px);
+                    .code {
+                        font-size: 10px;
+                        opacity: 0.5;
+                        margin-left: 5px;
+                        width: 100%;
+                        display: inline-block;
+                    }
+                }
+                .base-map-wrapper {
+                    position: absolute;
+                    bottom: 4px;
+                    right: 0;
+                    width: 125px;
+                    height: 94px;
+                    z-index: 1;
+                    .base-map-img {
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 4px;
+                        border: 1px solid #ffffff;
+                        object-fit: cover;
+                        box-sizing: border-box;
+                    }
+                }
+                .app-mask-top {
+                    display: flex;
+                    align-items: center;
+                    gap: 12px;
+                    .app-mask-top-left {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: flex-start;
+                        .app-year {
+                            font-size: 12px;
+                            color: #ffffff;
+                            margin-bottom: 4px;
+                        }
+                        .app-date-wrapper {
+                            position: relative;
+                            .app-date-line {
+                                position: absolute;
+                                top: -2px;
+                                left: 0;
+                                right: 0;
+                                height: 1px;
+                                background: #ffffff;
+                            }
+                            .app-date {
+                                font-size: 12px;
+                                color: #ffffff;
+                                position: relative;
+                            }
+                        }
+                    }
+                    .app-mask-top-right {
+                        display: flex;
+                        align-items: center;
+                        gap: 12px;
+                        .app-phenology {
+                            color: #f0d09c;
+                            font-weight: 500;
+                        }
+                        .app-uploader {
+                            font-size: 10px;
+                            color: #ffffff;
+                            opacity: 0.5;
+                        }
+                    }
+                }
+                .app-mask-bottom {
+                    display: flex;
+                    align-items: center;
+                    .app-weather-info {
+                        display: flex;
+                        align-items: center;
+                        flex-wrap: wrap;
+                        gap: 5px;
+                        .app-weather-item {
+                            color: #ffffff;
+                            display: flex;
+                            align-items: center;
+                            gap: 2px;
+                            .app-weather-icon {
+                                width: 15px;
+                                height: 15px;
+                            }
+                        }
+                        .app-weather-separator {
+                            font-size: 10px;
+                            color: #ffffff;
+                            margin: 0 4px;
+                        }
+                        .app-location {
+                            font-size: 10px;
+                            color: #ffffff;
+                            opacity: 0.5;
+                        }
+                    }
+                }
+            }
         }
         .review-effect-text {
             font-family: "PangMenZhengDao";

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -68,12 +68,13 @@
                                     </div>
                                     <div
                                         class="card-right"
-                                        v-if="fw.sourceDataJson && fw.sourceDataJson.resFilename"
-                                        @click="handleImageClick(fw)"
+                                        v-if="fw.sourceDataJson && fw.sourceDataJson.resFilename && fw.sourceDataJson.resFilename.length > 0 || fw.sourceType === 7"
+                                        @click.stop="handleImageClick(fw)"
                                     >
-                                        <img :src="base_img_url2 + fw.sourceDataJson?.resFilename?.[0]" alt="" />
-                                        <div class="num" v-if="fw?.sourceDataJson?.imageIds">
-                                            {{ fw?.sourceDataJson?.imageIds.length || 0 }}
+                                        <img v-if="fw.sourceType === 7" :src="base_img_url2 + fw.sourceDataJson?.executeImageUrls?.[0]" alt="" />
+                                        <img v-else :src="base_img_url2 + fw.sourceDataJson?.resFilename?.[0]?.filename" alt="" />
+                                        <div class="num" v-if="fw?.sourceDataJson?.imageIds || fw.sourceType === 7">
+                                            {{ fw?.sourceDataJson?.imageIds?.length || fw?.sourceDataJson?.executeImageUrls?.length || 0 }}
                                         </div>
                                     </div>
                                 </div>
@@ -121,13 +122,15 @@
         </div>
     </div>
     <!-- 图片弹窗 -->
-    <popup v-model:show="showImagePopup" round class="image-popup" z-index="9999" teleport="body">
+    <popup v-model:show="showImagePopup" class="image-popup" z-index="9999" teleport="body">
         <album-carousel
             class="popup-content"
-            :key="currentImageData?.sourceDataJson?.resFilename?.length"
+            :key="imageList?.length"
             labelText=""
             :imgData="currentImageData"
-            :images="currentImageData?.sourceDataJson?.resFilename || []"
+            :images="imageList"
+            :imgType="imgType"
+            disableClick
         ></album-carousel>
     </popup>
 </template>
@@ -265,13 +268,15 @@ const fetchImageUrls = async (params) => {
     try {
         const res = await VE_API.ali.getTreeImageList(params);
         if (res.code === 0 && Array.isArray(res.data)) {
-            // 将 resFilename 加上 base_img_url2 前缀后返回
             return res.data.map((item) => {
                 if (item.filename) {
-                    return item.filename;
+                    return {
+                        ...item,
+                        cloudFilename: item.filename, // 兼容组件
+                    };
                 }
                 return null;
-            });
+            }).filter(item => item !== null);
         }
         return [];
     } catch (error) {
@@ -281,15 +286,26 @@ const fetchImageUrls = async (params) => {
 };
 
 // 点击图片
+const imgType = ref('');
+const imageList = ref([]);
 const currentImageData = ref({});
 const handleImageClick = (fw) => {
     console.log(fw, "fw");
+    if(fw.sourceType !== 7) {
+        imgType.value = fw.sourceDataJson.resFilename?.[0]?.source || '';
+        imageList.value = fw.sourceDataJson.resFilename || [];
+    } else {
+        imgType.value = '';
+        imageList.value = fw.sourceDataJson.executeImageUrls || [];
+    }
     currentImageData.value = {
         ...fw,
-        executeName: fw.sourceDataJson.userName,
+        executeName: fw.sourceDataJson.executorName,
         executeDate: formatDate(fw.updateTime),
         farmName: fw.sourceDataJson.farmName,
-        farmWorkLibName: fw.sourceDataJson.farmWorkLibName,
+        prescriptionList:fw.sourceDataJson.pesticideFertilizerNames,
+        farmWorkName: fw.sourceDataJson.farmWorkName,
+        droneDate : formatDateToYYMMDD(fw.updateTime)
     };
     showImagePopup.value = true;
 };
@@ -475,10 +491,6 @@ const handleRowClick = (item) => {
         const scrollTop = timelineContainerRef.value.scrollTop || 0;
         sessionStorage.setItem("timelineScrollTop", scrollTop.toString());
     }
-
-    // item.isEdit = shouldShowIncompleteStatus(item.farmWorkId);
-    item.invalidIds = invalidIds.value;
-    item.invalidArr = invalidArr.value;
     emits("row-click", item);
 };
 
@@ -533,17 +545,36 @@ const getFarmWorkPlan = () => {
                                                               Array.isArray(sourceDataJson.imageIds) &&
                                                               sourceDataJson.imageIds.length > 0
                                                           ) {
-                                                              const resFilenameList = await fetchImageUrls({
-                                                                  imageIds: sourceDataJson.imageIds,
-                                                                  page: 1,
-                                                                  limit: 100,
-                                                              });
-                                                              // 将获取到的 resFilename（已加上 base_img_url2 前缀）添加到 sourceDataJson
-                                                              console.log(resFilenameList, "resFilenameList");
+                                                              const resFilenameList = await fetchImageUrls(
+                                                                  {
+                                                                      imageIds: sourceDataJson.imageIds,
+                                                                      page: 1,
+                                                                      limit: 100,
+                                                                  }
+                                                              );
                                                               sourceDataJson.resFilename = resFilenameList;
-                                                          }
+                                                              // 调用 findSuitabilityByPoint 接口获取天气适宜性信息
+                                                              if (fw.farmId && fw.createTime) {
+                                                                  try {
+                                                                      const dateStr = formatDateForAPI(fw.createTime);
+                                                                      if (dateStr) {
+                                                                          const suitabilityRes = await VE_API.ali.findSuitabilityByPoint({
+                                                                              farmId: fw.farmId,
+                                                                              date: dateStr,
+                                                                          });
+                                                                          if (suitabilityRes && suitabilityRes.code === 0 && suitabilityRes.data) {
+                                                                              // 将返回的数据合并到 sourceDataJson
+                                                                              sourceDataJson.suitability = suitabilityRes.data;
+                                                                          }
+                                                                      }
+                                                                  } catch (error) {
+                                                                      console.error("获取天气适宜性信息失败:", error);
+                                                                  }
+                                                              }
+                                                            }
                                                           return {
                                                               ...fw,
+                                                              phenologyName: r.phenologyName,
                                                               sourceDataJson,
                                                               containerSpaceTimeId: it.containerSpaceTimeId,
                                                           };
@@ -705,6 +736,28 @@ const formatDate = (dateStr) => {
     return `${m}-${d}`;
 };
 
+// 格式化日期为 YYYY-MM-DD 格式（用于接口调用）
+const formatDateForAPI = (dateStr) => {
+    if (!dateStr) return null;
+    const date = new Date(dateStr);
+    if (Number.isNaN(date.getTime())) return null;
+    const y = date.getFullYear();
+    const m = `${date.getMonth() + 1}`.padStart(2, "0");
+    const d = `${date.getDate()}`.padStart(2, "0");
+    return `${y}-${m}-${d}`;
+};
+
+// 格式化日期为 YYMMDD 格式（如：260110，26为年份，01为月份，10为日）
+const formatDateToYYMMDD = (dateStr) => {
+    if (!dateStr) return "";
+    const date = new Date(dateStr);
+    if (Number.isNaN(date.getTime())) return "";
+    const y = `${date.getFullYear()}`.substring(2); // 获取后两位年份，如 2026 -> 26
+    const m = `${date.getMonth() + 1}`.padStart(2, "0");
+    const d = `${date.getDate()}`.padStart(2, "0");
+    return `${y}${m}${d}`;
+};
+
 // 获取下一个即将到来的节气（当前节气）的 progress
 const getNextTermProgress = () => {
     if (!solarTerms.value || solarTerms.value.length === 0) return Infinity;
@@ -1148,6 +1201,7 @@ watch(
 <style lang="scss" scoped>
 .image-popup {
     width: 327px;
+    border-radius: 8px;
     .popup-content {
         width: 100%;
     }