fix: 农事列表

src/App.vue

@@ -179,3 +179,9 @@ watch(
     }
 }
 </style>
+
+<style lang="scss">
+.van-overlay {
+    backdrop-filter: blur(4px);
+}
+</style>

src/components/farmHeader.vue

@@ -148,7 +148,7 @@ defineExpose({ loadFarmInfo });
 
     .farm-header__name {
         font-size: 20px;
-        font-family: "PanMenZhengDao";
+        font-family: "PangMenZhengDao";
         background: linear-gradient(180deg, #FFE2AE 0%, #FFD489 100%);
         /* 裁切背景到文字 */
         -webkit-background-clip: text;

src/components/popup/diagnosisReportPopup.vue

@@ -7,21 +7,55 @@
         :z-index="20000"
         :close-on-click-overlay="true"
     >
-        <img class="diagnosis-report-popup__image" src="@/assets/img/agricultural/report.png" alt="" />
-        <div class="diagnosis-report-popup__title">
-            <div>{{ t("agriFile.plantingDiagnosisReport") }}</div>
-            <div>{{ t("agriFile.reportGenerated") }}</div>
+        <div class="diagnosis-report-popup__content">
+            <img class="diagnosis-report-popup__image" src="@/assets/img/agricultural/report.png" alt="" />
+            <div class="diagnosis-report-popup__title">
+                <div>种植全析</div>
+                <div>报告已生成</div>
+            </div>
+            <div class="diagnosis-report-content">
+                <div class="content-divider">
+                    <span class="line" />
+                    <span class="label">报告对象</span>
+                    <span class="line line-r" />
+                </div>
+                <div class="content-subject">
+                    <div class="subject-location">{{ farmLocation }}</div>
+                    <div class="subject-variety">
+                        <span class="subject-variety__label">品种</span>
+                        <span class="subject-variety__value">{{ varietyName }}</span>
+                    </div>
+                </div>
+
+                <div class="content-divider bottom-d">
+                    <span class="line" />
+                    <span class="label">分析维度 · 5项</span>
+                    <span class="line" />
+                </div>
+                <div class="content-dims">
+                    <div v-for="item in dimensionList" :key="item.key" class="dim-item">
+                        <div class="dim-item__icon-wrap">
+                            <img class="dim-item__icon" :src="item.icon" alt="" />
+                        </div>
+                        <div class="dim-item__label">{{ item.label }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="diagnosis-report-popup__btn" @click="handleView">查看报告</div>
         </div>
-        <div class="diagnosis-report-popup__btn" @click="handleView">{{ t("agriFile.clickToView") }}</div>
-        <div class="diagnosis-report-popup__hint">{{ t("agriFile.viewInDiagnosisHint") }}</div>
     </popup>
 </template>
 
 <script setup>
-import { onActivated, onMounted, ref, watch } from "vue";
+import { onActivated, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { Popup } from "vant";
 import { useI18n } from "@/i18n";
+import tab1Icon from "@/assets/img/farm/weather.png";
+import tab2Icon from "@/assets/img/farm/bugs.png";
+import tab3Icon from "@/assets/img/farm/star.png";
+import tab4Icon from "@/assets/img/farm/inputs.png";
+import tab5Icon from "@/assets/img/farm/calendar.png";
 
 const { t } = useI18n();
 const router = useRouter();
@@ -30,6 +64,16 @@ const SHOWN_CACHE_PREFIX = "DIAGNOSIS_REPORT_POPUP_SHOWN_";
 
 /** 弹窗显隐由组件内接口控制，默认不展示 */
 const visible = ref(false);
+const farmLocation = ref("农场位置");
+const varietyName = ref("-");
+
+const dimensionList = [
+    { key: "weather", label: "气象风险", icon: tab1Icon },
+    { key: "pest", label: "病虫风险", icon: tab2Icon },
+    { key: "quality", label: "品质潜力", icon: tab3Icon },
+    { key: "input", label: "必要投入", icon: tab4Icon },
+    { key: "manage", label: "农事管理", icon: tab5Icon },
+];
 
 /** 当前缓存中选中的农场 / 分区 id */
 const getSelectedFarmId = () => {
@@ -63,7 +107,7 @@ const markPopupShown = (farmId, zoneId) => {
     localStorage.setItem(getShownCacheKey(farmId, zoneId), "1");
 };
 
-/** 当前选中农场；接口必传 farm_id / zone_id */
+/** 当前选中农场 */
 const readSelectedFarm = () => {
     try {
         return JSON.parse(localStorage.getItem("selectedFarmData") || "null") || {};
@@ -72,22 +116,30 @@ const readSelectedFarm = () => {
     }
 };
 
-const readFarmId = () => {
-    const farm = readSelectedFarm();
-    const id = farm.farm_id ?? farm.id;
-    if (id != null && id !== "") return id;
-    return localStorage.getItem("selectedFarmId") || "";
-};
-
-const readZoneId = () => {
+function refreshSubjectInfo() {
     const farm = readSelectedFarm();
-    const id = farm.zone_id ?? farm.zoneId;
-    return id != null && id !== "" ? id : "";
-};
-
-let checking = false;
+    farmLocation.value =
+        farm.rawAddress ||
+        farm.farm_address ||
+        farm.address ||
+        farm.city ||
+        farm.farm_name ||
+        "农场位置";
+    const name =
+        farm.variety_name ||
+        farm.varietyName ||
+        farm.categoryLabel ||
+        farm.crop_name ||
+        "";
+    if (!name) {
+        varietyName.value = "-";
+        return;
+    }
+    const parts = String(name).split("-").filter(Boolean);
+    varietyName.value = parts.length > 1 ? parts[parts.length - 1] : name;
+}
 
-/** exists=2 且本地未展示过时弹窗（不依赖物候确认） */
+/** exists=1 且本地未展示过时弹窗 */
 const checkShouldShow = async () => {
     const farmId = getSelectedFarmId();
     const zoneId = getSelectedZoneId();
@@ -95,19 +147,21 @@ const checkShouldShow = async () => {
         visible.value = false;
         return;
     }
-    checking = true;
     try {
         const res = await VE_API.questionnaire.checkReportGenerated({
             farm_id: farmId,
             zone_id: zoneId,
         });
         const shouldShow = res?.code === 200 && Number(res?.data?.exists) === 1;
-        visible.value = shouldShow;
-        if (shouldShow) markPopupShown(farmId, zoneId);
+        if (shouldShow) {
+            refreshSubjectInfo();
+            visible.value = true;
+            markPopupShown(farmId, zoneId);
+        } else {
+            visible.value = false;
+        }
     } catch {
         visible.value = false;
-    } finally {
-        checking = false;
     }
 };
 
@@ -136,10 +190,19 @@ defineExpose({
 <style scoped lang="scss">
 .diagnosis-report-popup {
     width: 78%;
-    padding: 80px 16px 20px;
     text-align: center;
     overflow: visible;
-    background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
+linear-gradient(180deg, rgba(255, 212, 137, 0.36) 0%, rgba(255, 212, 137, 0) 12%);
+    border-radius: 16px;
+    padding: 1px;
+
+
+    .diagnosis-report-popup__content {
+        padding: 80px 16px 20px;
+        background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
+        border-radius: 16px;
+    }
 
     &__image {
         display: block;
@@ -153,17 +216,123 @@ defineExpose({
     }
 
     &__title {
-        font-size: 30px;
-        color: #fff;
         line-height: 32px;
-        div{
+        
+        font-size: 30px;
+                background: linear-gradient(180deg, #FFFFFF 0%, #FFD489 100%);
+
+                /* 从上到下渐变，to bottom 等价 180deg */
+                // background: linear-gradient(to bottom, #36cfff, #1677ff);
+                /* 裁切背景到文字 */
+                -webkit-background-clip: text;
+                background-clip: text;
+                /* 文字填充透明，露出渐变背景 */
+                -webkit-text-fill-color: transparent;
+                color: transparent;
+        div {
             font-family: "pangmenzhengdao";
+           
+        }
+    }
+
+    .diagnosis-report-content {
+        margin-top: 18px;
+
+        .content-divider {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin: 16px 0 12px;
+            &.bottom-d {
+                gap: 30px;
+                margin: 11px 0;
+            }
+
+            .line {
+                flex: 1;
+                height: 1px;
+                background: linear-gradient(90deg, rgba(255, 212, 137, 0) 0%, rgba(255, 212, 137, 0.4) 100%);
+                &.line-r {
+                    background: linear-gradient(90deg, rgba(255, 212, 137, 0.4) 0%, rgba(255, 212, 137, 0) 100%);
+                }
+            }
+
+            .label {
+                flex-shrink: 0;
+                font-size: 12px;
+                line-height: 18px;
+                color: rgba(255, 255, 255, 0.45);
+            }
+        }
+
+        .content-subject {
+            .subject-location {
+                font-size: 16px;
+                line-height: 24px;
+                color: #fff;
+            }
+
+            .subject-variety {
+                margin-top: 4px;
+                font-size: 14px;
+                line-height: 21px;
+
+                &__label {
+                    margin-right: 4px;
+                    color: rgba(255, 255, 255, 0.5);
+                }
+
+                &__value {
+                    color: #FFD489;
+                }
+            }
+        }
+
+        .content-dims {
+            display: flex;
+            justify-content: space-between;
+            gap: 16px;
+            padding: 0 6px;
+        }
+
+        .dim-item {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            &__icon-wrap {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.05);
+                border: 1px solid rgba(255, 255, 255, 0.12);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+            }
+
+            &__icon {
+                width: 15px;
+                // height: 22px;
+                object-fit: contain;
+            }
+
+            &__label {
+                padding-top: 8px;
+                font-size: 12px;
+                line-height: 18px;
+                color: rgba(255, 255, 255, 0.6);
+                white-space: nowrap;
+            }
         }
     }
 
     &__btn {
-        width: 162px;
-        margin: 18px auto 10px;
+        width: 160px;
+        margin: 18px auto 0;
         padding: 8px 0;
         border-radius: 25px;
         background: linear-gradient(90deg, #FFEBC9 0%, #FFCA6D 100%);

src/components/popup/patrolDiagnosisPopup.vue

@@ -0,0 +1,192 @@
+<template>
+    <popup
+        v-model:show="showValue"
+        round
+        teleport="body"
+        class="patrol-diagnosis-popup"
+        :z-index="20000"
+        @closed="handleClosed"
+    >
+        <div class="patrol-diagnosis-popup__content">
+            <img
+                class="patrol-diagnosis-popup__image"
+                src="@/assets/img/agricultural/report.png"
+                alt=""
+            />
+            <div class="patrol-diagnosis-popup__title">诊断报告已生成</div>
+
+            <div class="patrol-diagnosis-popup__card">
+                <div class="info-row">
+                    <span class="info-row__label">巡园区域</span>
+                    <div class="info-row__value">
+                        <span class="info-row__text">{{ zoneName || "-" }}</span>
+                        <span v-if="cropName" class="info-row__tag">{{ cropName }}</span>
+                    </div>
+                </div>
+                <div class="info-row">
+                    <span class="info-row__label">诊断要点</span>
+                    <span class="info-row__text">{{ diagnosisPoint || "-" }}</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-row__label">生成时间</span>
+                    <span class="info-row__text">{{ generateTime || "-" }}</span>
+                </div>
+            </div>
+
+            <div class="patrol-diagnosis-popup__btn" @click="handleView">查看报告</div>
+            <div class="patrol-diagnosis-popup__hint">
+                还可在 <span class="highlight">农事档案-诊断报告</span> 中查看
+            </div>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { Popup } from "vant";
+
+// ---------------------------------------------------------------------------
+// Props / Emits
+// ---------------------------------------------------------------------------
+const props = defineProps({
+    show: { type: Boolean, default: false },
+});
+
+const zoneName = ref("分区一");
+const cropName = ref("荔枝");
+const diagnosisPoint = ref("水分失衡");
+const generateTime = ref("10/16");
+
+const emit = defineEmits(["update:show"]);
+
+const showValue = computed({
+    get: () => props.show,
+    set: (val) => emit("update:show", val),
+});
+
+const handleView = () => {
+    showValue.value = false;
+};
+
+const handleClosed = () => {
+};
+</script>
+
+<style scoped lang="scss">
+.patrol-diagnosis-popup {
+    width: 78%;
+    text-align: center;
+    overflow: visible;
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
+        linear-gradient(180deg, rgba(255, 212, 137, 0.36) 0%, rgba(255, 212, 137, 0) 12%);
+    border-radius: 16px;
+    padding: 1px;
+
+    &__content {
+        position: relative;
+        padding: 72px 16px 20px;
+        background: linear-gradient(180deg, #1a191d 0%, #121216 100%);
+        border-radius: 16px;
+    }
+
+    &__image {
+        display: block;
+        width: 147px;
+        position: absolute;
+        top: -60px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    &__title {
+        font-size: 28px;
+        line-height: 36px;
+        font-family: "pangmenzhengdao";
+        background: linear-gradient(180deg, #ffffff 0%, #ffd489 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+    }
+
+    &__card {
+        margin-top: 18px;
+        padding: 0 10px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        text-align: left;
+    }
+
+    .info-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 41px;
+        padding: 10px 0;
+        box-sizing: border-box;
+
+        & + .info-row {
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        &__label {
+            flex-shrink: 0;
+            font-size: 14px;
+            line-height: 20px;
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        &__value {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 8px;
+            min-width: 0;
+        }
+
+        &__text {
+            font-size: 14px;
+            line-height: 20px;
+            color: #fff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__tag {
+            flex-shrink: 0;
+            padding: 0 6px;
+            border-radius: 4px;
+            background: rgba(255, 212, 137, 0.1);
+            color: rgba(255, 212, 137, 1);
+            font-size: 12px;
+            height: 18px;
+            line-height: 18px;
+        }
+    }
+
+    &__btn {
+        width: 160px;
+        margin: 17px auto 0;
+        height: 40px;
+        line-height: 40px;
+        border-radius: 20px;
+        background: linear-gradient(90deg, #FFEBC9 0%, #FFCA6D 100%);
+        color: #1A1408;
+        font-size: 16px;
+        cursor: pointer;
+    }
+
+    &__hint {
+        margin-top: 17px;
+        font-size: 12px;
+        line-height: 18px;
+        color: rgba(255, 255, 255, 0.6);
+
+        .highlight {
+            color: #FFD489;
+        }
+    }
+}
+</style>

src/i18n/messages.js

@@ -206,7 +206,7 @@ export default {
             reportDate: "8月30日",
             addZone: "新增分区",
             drawFarmArea: "勾画区域",
-            addAlbum: "新增相册",
+            addAlbum: "新增相册/分区",
             selectZoneHint: "请勾选新增分区的范围",
             drawFarmAreaHint: "请勾画农场区域",
             drawFarmAreaSuccess: "勾画农场区域成功",

src/styles/common.scss

@@ -33,6 +33,11 @@ h6 {
     font-weight: 400;
 }
 
+#app {
+    background: #141414;
+    color: #fff;
+}
+
 .ve_header_row_class_name,
 .el-table__fixed-right-patch {
     background: $main-bg-color !important;

src/views/old_mini/agri_file/components/albumPanel.vue

@@ -9,7 +9,7 @@
                 </div>
             </div>
             <div v-else class="add-zone-btn" @click.stop="goAddZone('region')">
-                <el-icon>
+                <el-icon size="10">
                     <Plus />
                 </el-icon>
                 <span>{{ t("agriFile.addZone") }}</span>
@@ -20,7 +20,9 @@
                 :ref="(el) => setMarkerEl(item.id, el)"
                 class="zone-marker"
             >
-                <div class="zone-marker__label">{{ item.name }}</div>
+                <div class="zone-marker__label">
+                    <div class="zone-marker__label-text">{{ item.name }}</div>
+                </div>
                 <div class="zone-marker__thumb">
                     <img :src="item.cover" alt="" />
                     <span v-if="item.count" class="zone-marker__badge">{{ item.count }}</span>
@@ -49,16 +51,21 @@
                         src="@/assets/img/agricultural/photo.png"
                         alt=""
                     />
-                    <span class="album-card__count">
-                        {{ t("agriFile.photoCount", { count: item.count }) }}
-                    </span>
                     <div class="album-card__add" @click.stop="handleUploadClick(item.zone_id, item.geom)">
                         <el-icon>
                             <Plus />
                         </el-icon>
                     </div>
                 </div>
-                <div class="album-card__name">{{ item.name }}</div>
+                <div class="album-card__cover-mask-bg"></div>
+                <div class="album-card__cover-mask">
+                    <div class="album-card__name">{{ item.name }}</div>
+                    <div class="album-card__name-count">
+                        <span class="name-val">{{ item.name }}</span>
+                        ·
+                        <span class="count-val">{{ item.count }}张</span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -422,11 +429,19 @@ watch(
         pointer-events: none;
 
         &__label {
-            padding: 3px 14px;
+            padding: 1px;
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
             border-radius: 25px;
-            background: #fff;
-            color: #0a0a0a;
+            color: #fff;
             font-size: 12px;
+            backdrop-filter: blur(4px);
+            &-text {
+                background: rgba(10, 10, 10, 0.6);
+                border-radius: 25px;
+                padding: 0 10px;
+                height: 22px;
+                line-height: 23px;
+            }
         }
 
         &__thumb {
@@ -439,7 +454,7 @@ watch(
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
-                border: 2px solid #fff;
+                border: 1px solid rgba(255, 255, 255, 0.6);
                 border-radius: 6px;
                 box-sizing: border-box;
             }
@@ -453,8 +468,8 @@ watch(
             height: 18px;
             line-height: 16px;
             border-radius: 50%;
-            background: #fff;
-            color: #0a0a0a;
+            background: #FFD489;
+            color: #0A0A0A;
             font-size: 12px;
             text-align: center;
         }
@@ -464,23 +479,27 @@ watch(
             height: 0;
             border-left: 5px solid transparent;
             border-right: 5px solid transparent;
-            border-top: 6px solid #fff;
+            border-top: 6px solid rgba(255, 212, 137, 1);
         }
     }
 
     .add-zone-btn {
         position: absolute;
-        right: 5px;
-        bottom: 10px;
+        left: 5px;
+        top: 8px;
         z-index: 5;
         display: flex;
         align-items: center;
+        height: 30px;
+        box-sizing: border-box;
         gap: 2px;
-        padding: 5px 10px;
-        border-radius: 4px;
-        background: #fff;
-        color: #2199f8;
-        font-weight: 500;
+        padding: 0 14px;
+        border-radius: 24px;
+        border: 1px solid rgba(255, 212, 137, 0.5);
+        background: rgba(7, 4, 0, 0.56);
+        color: rgba(255, 212, 137, 1);
+        font-size: 12px;
+        backdrop-filter: blur(4px);
     }
 
     .album-grid {
@@ -497,48 +516,63 @@ watch(
             align-items: center;
             justify-content: center;
             width: 100%;
-            aspect-ratio: 1;
-            border-radius: 5px;
-            background: #ffffff;
-            color: #969494;
-            font-size: 16px;
+            height: 186px;
+            border: 1px dashed rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.03);
+            color: #fff;
+            font-size: 14px;
 
             &__icon {
-                margin-bottom: 6px;
+                margin-bottom: 10px;
                 font-size: 20px;
+                width: 40px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.05);
+                border: 1px solid rgba(255, 255, 255, 0.12);
             }
         }
 
         .album-card {
             width: 100%;
+            height: 186px;
+            position: relative;
 
             &.is-empty {
                 .album-card__cover {
                     display: flex;
-                    align-items: center;
+                    // align-items: center;
                     justify-content: center;
                     overflow: hidden;
-                    border-radius: 8px;
-                    background: linear-gradient(180deg, #e0f1ff 0%, #c2e4ff 100%);
+                    border-radius: 10px;
+                    background: linear-gradient(180deg, rgba(255, 212, 137, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%);
                 }
             }
 
             &__cover {
+                border: 1px solid rgba(255, 255, 255, 0.12);
                 position: relative;
                 width: 100%;
-                aspect-ratio: 1;
+                height: 100%;
+                // aspect-ratio: 1;
 
                 img:not(.album-card__empty-icon) {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
-                    border-radius: 6px;
+                    border-radius: 10px;
                 }
             }
 
             &__empty-icon {
-                width: 50px;
-                height: 50px;
+                margin-top: 55px;
+                width: 60px;
+                height: 54px;
+                object-fit: contain;
             }
 
             &__count {
@@ -555,23 +589,55 @@ watch(
             &__add {
                 position: absolute;
                 right: 8px;
-                bottom: 8px;
+                top: 6px;
                 z-index: 1;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                width: 44px;
-                height: 44px;
+                width: 27px;
+                height: 27px;
                 border-radius: 50%;
-                background: #2199f8;
+                background: rgba(20, 20, 22, 0.8);
                 color: #fff;
-                font-size: 20px;
-                box-shadow: 0 2px 8px rgba(33, 153, 248, 0.35);
+                font-size: 16px;
+                border: 1px solid rgba(255, 255, 255, 0.24);
+            }
+
+            &__cover-mask-bg {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 90px;
+                background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 91.97%);
+                border-radius: 0 0 10px 10px;
+            }
+
+            &__cover-mask {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 2;
+                padding: 8px;
             }
 
             &__name {
+                line-height: 24px;
                 margin-top: 10px;
-                color: #1f1f1f;
+                font-size: 16px;
+                color: rgba(255, 255, 255, 1);
+            }
+            &__name-count {
+                line-height: 18px;
+                font-size: 12px;
+                color: rgba(255, 255, 255, 0.6);
+                .name-val {
+                    color: rgba(255, 255, 255, 1);
+                }
+                .count {
+                    color: rgba(255, 255, 255, 1);
+                    font-weight: 600;
+                }
             }
         }
     }

src/views/old_mini/agri_file/components/albumUploadPopup.vue

@@ -8,7 +8,12 @@
         @closed="handleClosed"
     >
         <div class="album-upload-popup__content">
-            <div class="album-upload-popup__title">上传照片</div>
+            <div class="album-upload-popup__header">
+                <div class="album-upload-popup__title">上传照片</div>
+                <div class="album-upload-popup__close" @click="handleCancel">
+                    <el-icon :size="14"><Close /></el-icon>
+                </div>
+            </div>
 
             <uploader
                 class="album-upload-popup__uploader"
@@ -19,35 +24,49 @@
                 @delete="onDelete"
             >
                 <div class="album-upload-popup__add">
-                    <el-icon size="22" color="rgba(0, 0, 0, 0.6)"><Plus /></el-icon>
-                    <!-- <span class="album-upload-popup__add-icon">+</span> -->
+                    <el-icon size="28" color="rgba(255, 255, 255, 0.45)"><Plus /></el-icon>
                 </div>
             </uploader>
 
             <div class="album-upload-popup__date">
-                <div class="album-upload-popup__date-label">上传日期</div>
-                <el-date-picker
-                    v-model="uploadDate"
-                    type="date"
-                    format="YYYY-MM-DD"
-                    value-format="YYYY-MM-DD"
-                    placeholder="请选择上传日期"
-                    :editable="false"
-                    :disabled-date="disableAfterToday"
-                    style="width: 100%"
-                    size="large"
+                <div class="album-upload-popup__label">上传日期</div>
+                <div class="album-upload-popup__date-field">
+                    <el-icon class="date-icon" :size="16"><Clock /></el-icon>
+                    <el-date-picker
+                        v-model="uploadDate"
+                        type="date"
+                        format="YYYY-MM-DD"
+                        value-format="YYYY-MM-DD"
+                        placeholder="选择时间"
+                        :editable="false"
+                        :clearable="false"
+                        :disabled-date="disableAfterToday"
+                        teleported
+                        popper-class="album-upload-date-popper"
+                        :popper-options="{ strategy: 'fixed' }"
+                        style="width: 100%"
+                        size="large"
+                    />
+                </div>
+            </div>
+
+            <div class="album-upload-popup__desc-wrap">
+                <div class="album-upload-popup__label">照片描述</div>
+                <el-input
+                    v-model="description"
+                    class="album-upload-popup__desc"
+                    type="textarea"
+                    :rows="4"
+                    resize="none"
+                    placeholder="为您的照片添加描述吧~"
+                    maxlength="200"
                 />
             </div>
 
-            <el-input
-                v-model="description"
-                class="album-upload-popup__desc"
-                type="textarea"
-                :rows="4"
-                resize="none"
-                placeholder="为您的照片添加描述吧~"
-                maxlength="200"
-            />
+            <div class="album-upload-popup__tip">
+                <span class="tip-star">✧</span>
+                上传后将自动生成本次诊断报告
+            </div>
 
             <div class="album-upload-popup__actions">
                 <div class="album-upload-popup__btn album-upload-popup__btn--cancel" @click="handleCancel">
@@ -58,7 +77,7 @@
                     :class="{ disabled: confirming }"
                     @click="handleConfirm"
                 >
-                    {{ confirming ? "上传中..." : "确认上传" }}
+                    {{ confirming ? "上传中..." : "确认信息" }}
                 </div>
             </div>
         </div>
@@ -66,9 +85,10 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
 import { Popup, Uploader } from "vant";
 import { ElMessage } from "element-plus";
+import { ArrowDown, Clock, Close, Plus } from "@element-plus/icons-vue";
 import { getFileExt } from "@/utils/util";
 import UploadFile from "@/utils/upliadFile";
 import { useStore } from "vuex";
@@ -91,6 +111,24 @@ const store = useStore();
 const miniUserId = store.state.home.miniUserId || localStorage.getItem("MINI_USER_ID");
 const uploadFileObj = new UploadFile();
 
+/** 需高于 vant popup(20000)，否则 Message 会被盖住 */
+const LAYER_Z = 30050;
+
+function toast(type, message) {
+    ElMessage({
+        type,
+        message,
+        customClass: "album-upload-el-message",
+        duration: 2500,
+    });
+    // EP 内联 z-index 默认约 2000+，强制抬到弹窗之上
+    nextTick(() => {
+        document.querySelectorAll(".album-upload-el-message").forEach((el) => {
+            el.style.setProperty("z-index", String(LAYER_Z), "important");
+        });
+    });
+}
+
 const showValue = ref(false);
 const fileList = ref([]);
 const uploadedKeys = ref([]);
@@ -156,7 +194,7 @@ const afterRead = (file) => {
             .catch(() => {
                 item.status = "failed";
                 item.message = "上传失败";
-                ElMessage.error("图片上传失败，请稍后再试！");
+                toast("error", "图片上传失败，请稍后再试！");
             });
     });
 };
@@ -176,16 +214,16 @@ const handleConfirm = () => {
     if (confirming.value) return;
     const uploading = fileList.value.some((item) => item.status === "uploading");
     if (uploading) {
-        ElMessage.warning("图片上传中，请稍候");
+        toast("warning", "图片上传中，请稍候");
         return;
     }
     const failed = fileList.value.some((item) => item.status === "failed");
     if (failed) {
-        ElMessage.warning("存在上传失败的图片，请删除后重试");
+        toast("warning", "存在上传失败的图片，请删除后重试");
         return;
     }
     if (!uploadedKeys.value.length) {
-        ElMessage.warning("请先上传照片");
+        toast("warning", "请先上传照片");
         return;
     }
 
@@ -208,26 +246,50 @@ const handleClosed = () => {
 .album-upload-popup {
     width: 90%;
     max-width: 420px;
-    border-radius: 12px;
-    background: #fff;
+    border-radius: 16px;
+    padding: 1px;
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.32)),
+linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 12%);
     overflow: hidden;
+    backdrop-filter: blur(4px);
+
 
     &__content {
-        padding: 20px 16px 16px;
+        background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
+        border-radius: 16px;
+        padding: 18px 16px 16px;
         box-sizing: border-box;
     }
 
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+    }
+
     &__title {
-        margin-bottom: 14px;
         font-size: 16px;
         line-height: 22px;
         font-weight: 500;
-        color: #111;
+        color: #fff;
+    }
+
+    &__close {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.12);
+        color: rgba(255, 255, 255, 0.85);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
     }
 
     &__uploader {
         width: 100%;
-        margin-bottom: 12px;
+        margin-bottom: 16px;
 
         :deep(.van-uploader__wrapper) {
             gap: 8px;
@@ -239,7 +301,7 @@ const handleClosed = () => {
             width: calc((100vw * 0.9 - 32px - 24px) / 4);
             height: calc((100vw * 0.9 - 32px - 24px) / 4);
             margin: 0;
-            border-radius: 6px;
+            border-radius: 8px;
             overflow: hidden;
         }
 
@@ -252,6 +314,7 @@ const handleClosed = () => {
             right: 0;
         }
     }
+
     :deep(.van-uploader__input-wrapper) {
         width: calc(25% - 8px);
         min-height: 66px;
@@ -263,77 +326,145 @@ const handleClosed = () => {
         display: flex;
         align-items: center;
         justify-content: center;
-        background: #F6F6F6;
-        border: 1px dashed #DDDDDD;
-        border-radius: 6px;
+        background: transparent;
+        border: 1px dashed rgba(255, 255, 255, 0.28);
+        border-radius: 8px;
         box-sizing: border-box;
     }
 
-    &__add-icon {
-        font-size: 28px;
-        line-height: 1;
-        color: #999;
-        font-weight: 300;
+    &__label {
+        margin-bottom: 8px;
+        font-size: 14px;
+        line-height: 20px;
+        color: #fff;
     }
 
     &__date {
-        margin-bottom: 12px;
+        margin-bottom: 16px;
+    }
+
+    &__date-field {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 44px;
+        padding: 0 12px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.06);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-sizing: border-box;
+
+        .date-icon {
+            flex-shrink: 0;
+            margin-right: 8px;
+            color: rgba(255, 255, 255, 0.75);
+        }
+
+        .date-arrow {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: rgba(255, 255, 255, 0.45);
+            pointer-events: none;
+            z-index: 1;
+        }
 
-        &-label {
-            margin-bottom: 8px;
+        :deep(.el-date-editor) {
+            flex: 1;
+            min-width: 0;
+            height: 100%;
+            box-shadow: none !important;
+            background: transparent;
+            border: none;
+        }
+
+        :deep(.el-input__wrapper) {
+            padding: 0 24px 0 0;
+            box-shadow: none !important;
+            background: transparent;
+        }
+
+        :deep(.el-input__inner) {
+            height: 42px;
+            color: #fff;
             font-size: 14px;
-            line-height: 20px;
-            color: #333;
+
+            &::placeholder {
+                color: rgba(255, 255, 255, 0.35);
+            }
+        }
+
+        :deep(.el-input__prefix),
+        :deep(.el-input__suffix) {
+            display: none;
         }
     }
 
-    &__desc {
-        border: 1px solid rgba(220, 220, 220, 1);
-        margin-bottom: 16px;
-        border-radius: 3px;
+    &__desc-wrap {
+        margin-bottom: 12px;
+    }
 
+    &__desc {
         :deep(.el-textarea__inner) {
             min-height: 96px;
-            padding: 10px 12px;
-            border-radius: 6px;
-            border-color: #e5e5e5;
+            padding: 12px;
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.06);
             box-shadow: none;
             font-size: 14px;
             line-height: 20px;
-            color: #333;
+            color: #fff;
 
             &::placeholder {
-                color: rgba(0, 0, 0, 0.3);
+                color: rgba(255, 255, 255, 0.35);
             }
         }
     }
 
+    &__tip {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin-bottom: 16px;
+        font-size: 12px;
+        line-height: 18px;
+        color: #ffd489;
+
+        .tip-star {
+            flex-shrink: 0;
+            font-size: 12px;
+        }
+    }
+
     &__actions {
         display: flex;
         gap: 10px;
     }
 
     &__btn {
-        height: 40px;
-        line-height: 40px;
-        border-radius: 4px;
+        height: 44px;
+        line-height: 44px;
+        border-radius: 8px;
         text-align: center;
-        font-size: 15px;
+        font-size: 16px;
         box-sizing: border-box;
         cursor: pointer;
 
         &--cancel {
-            width: 96px;
+            width: 128px;
             flex-shrink: 0;
-            color: #666;
-            background: #fff;
-            border: 1px solid #dcdfe6;
+            color: rgba(255, 255, 255, 0.85);
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.12);
         }
 
         &--confirm {
             flex: 1;
-            color: #fff;
-            background: #2199f8;
+            color: #1a1408;
+            font-weight: 500;
+            background: linear-gradient(135deg, #FFEBC9 0%, #FFCA6D 100%);
 
             &.disabled {
                 opacity: 0.6;
@@ -343,3 +474,136 @@ const handleClosed = () => {
     }
 }
 </style>
+
+<style lang="scss">
+/* teleported 到 body，需高于 vant popup(20000) */
+.album-upload-date-popper {
+    z-index: 30050 !important;
+    background: #1c1c1e !important;
+    border: 1px solid rgba(255, 216, 145, 0.5) !important;
+    border-radius: 12px !important;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
+    // overflow: hidden;
+
+    .el-popper__arrow::before {
+        background: #1c1c1e !important;
+        border: 1px solid #ffd891 !important;
+    }
+
+    .el-picker-panel,
+    .el-date-picker,
+    .el-picker__popper {
+        background: transparent !important;
+        border: none !important;
+        color: #fff !important;
+        box-shadow: none !important;
+    }
+    .el-date-table td.disabled .el-date-table-cell {
+        background: rgba(217, 217, 217, 0.07);
+    }
+    // &.el-popper[data-popper-placement^=bottom] .el-popper__arrow:before {
+    //     border-top-color: rgba(255, 216, 145, 0.5) !important;
+    //     border-left-color: rgba(255, 216, 145, 0.5) !important;
+    // }
+
+    .el-date-picker__header {
+        margin: 8px 12px 4px;
+        color: #fff;
+
+        .el-picker-panel__icon-btn,
+        .el-date-picker__header-label {
+            color: rgba(255, 255, 255, 0.85) !important;
+
+            &:hover {
+                color: #ffd891 !important;
+            }
+        }
+    }
+
+    .el-date-table {
+        th {
+            color: rgba(255, 255, 255, 0.45);
+            border-bottom-color: rgba(255, 255, 255, 0.08);
+            font-weight: 400;
+        }
+
+        td {
+            &.prev-month,
+            &.next-month {
+                color: rgba(255, 255, 255, 0.25);
+
+                .el-date-table-cell__text,
+                span {
+                    color: rgba(255, 255, 255, 0.25);
+                }
+            }
+
+            &.available,
+            &.today {
+                .el-date-table-cell__text,
+                span {
+                    color: #fff;
+                }
+            }
+
+            &.today {
+                .el-date-table-cell__text,
+                span {
+                    color: #ffd891;
+                    font-weight: 600;
+                }
+            }
+
+            &.available:hover {
+                color: #fff;
+
+                .el-date-table-cell {
+                    background: rgba(255, 255, 255, 0.08);
+                    border-radius: 6px;
+                }
+
+                .el-date-table-cell__text,
+                span {
+                    background: transparent !important;
+                    color: #fff !important;
+                }
+            }
+
+            /* 选中：金色圆底 + 深色字 */
+            &.current:not(.disabled) {
+                .el-date-table-cell__text,
+                span {
+                    background: #ffd891 !important;
+                    color: #1a1408 !important;
+                    border-radius: 50% !important;
+                    font-weight: 600;
+                }
+            }
+
+            &.disabled {
+                .el-date-table-cell__text,
+                span {
+                    color: rgba(255, 255, 255, 0.2) !important;
+                    background: transparent !important;
+                }
+            }
+        }
+
+        td .el-date-table-cell__text,
+        td span {
+            width: 28px;
+            height: 28px;
+            line-height: 28px;
+            border-radius: 50%;
+        }
+    }
+
+    .el-picker-panel__content {
+        margin: 8px 10px 12px;
+    }
+}
+
+.el-message.album-upload-el-message {
+    z-index: 30050 !important;
+}
+</style>

src/views/old_mini/agri_file/fileMap.js

@@ -48,7 +48,7 @@ const RECORD_TYPE_STYLE = {
     zone: { fill: "rgba(28, 158, 128, 0.45)", stroke: "#1c9e80" },
     growth: { fill: "rgba(255, 120, 0, 0.5)", stroke: "#cc5500" },
     pest: { fill: "rgba(224, 49, 49, 0.45)", stroke: "#e03131" },
-    album: { fill: "rgba(255, 255, 255, 0.28)", stroke: "#ffffff" },
+    album: { fill: "rgba(4, 2, 0, 0.5)", stroke: "rgba(255, 212, 137, 0.7)" },
 };
 
 /** 物候→管理分区，农事→管理分区，异常→病虫害异常，相册→白色分区 */

src/views/old_mini/agri_file/index.vue

@@ -74,6 +74,11 @@
             @reject="handlePhenologyUpdateReject"
             @confirm="handlePhenologyUpdateConfirm"
         />
+
+        <!-- 诊断报告 -->
+        <patrol-diagnosis-popup
+            v-model:show="showPatrolDiagnosis"
+            />
     </div>
 </template>
 
@@ -94,6 +99,7 @@ import phenologyUpdatePopup from "@/components/popup/phenologyUpdatePopup.vue";
 import patrolPanel from "./components/patrolPanel.vue";
 import albumPanel from "./components/albumPanel.vue";
 import reportPanel from "./components/reportPanel.vue";
+import patrolDiagnosisPopup from "@/components/popup/patrolDiagnosisPopup.vue";
 
 const { t } = useI18n();
 const store = useStore();
@@ -133,7 +139,7 @@ const showUploadPopup = ref(false);
 const showSuccessPopup = ref(false);
 const showCompleteFarmPopup = ref(false);
 const patrolPanelRef = ref(null);
-
+const showPatrolDiagnosis = ref(false);
 /** 后续由接口控制是否展示代管授权弹窗 */
 const showProxyAuthPopup = ref(false);
 const proxyServiceName = ref("农服名称");

src/views/old_mini/agri_file/pages/albumMap.vue

@@ -19,7 +19,9 @@
                 :ref="(el) => setMarkerEl(item.id, el)"
                 class="zone-marker"
             >
-                <div class="zone-marker__label">{{ item.name }}</div>
+                <div class="zone-marker__label">
+                    <div class="zone-marker__label-text">{{ item.name }}</div>
+                </div>
                 <div class="zone-marker__thumb">
                     <img :src="item.cover" alt="" />
                     <span v-if="item.count" class="zone-marker__badge">{{ item.count }}</span>
@@ -45,7 +47,7 @@ const { t } = useI18n();
 const store = useStore();
 
 // ---------- 常量 ----------
-const defaultCover = require("@/assets/img/agricultural/photo.png");
+const defaultCover = require("@/assets/img/map/default.png");
 const DEFAULT_CENTER = [113.6142086995688, 23.585836479509055];
 
 // ---------- 页面状态 ----------
@@ -280,11 +282,19 @@ onBeforeUnmount(clearMapOverlays);
     pointer-events: none;
 
     &__label {
-        padding: 3px 14px;
+        padding: 1px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
         border-radius: 25px;
-        background: #fff;
-        color: #0a0a0a;
+        color: #fff;
         font-size: 12px;
+        backdrop-filter: blur(4px);
+        &-text {
+            background: rgba(10, 10, 10, 0.6);
+            border-radius: 25px;
+            padding: 0 10px;
+            height: 22px;
+            line-height: 23px;
+        }
     }
 
     &__thumb {
@@ -297,7 +307,7 @@ onBeforeUnmount(clearMapOverlays);
             width: 100%;
             height: 100%;
             object-fit: cover;
-            border: 2px solid #fff;
+            border: 1px solid rgba(255, 255, 255, 0.6);
             border-radius: 6px;
             box-sizing: border-box;
         }
@@ -311,8 +321,8 @@ onBeforeUnmount(clearMapOverlays);
         height: 18px;
         line-height: 16px;
         border-radius: 50%;
-        background: #fff;
-        color: #0a0a0a;
+        background: #FFD489;
+        color: #0A0A0A;
         font-size: 12px;
         text-align: center;
     }
@@ -322,7 +332,7 @@ onBeforeUnmount(clearMapOverlays);
         height: 0;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
-        border-top: 6px solid #fff;
+        border-top: 6px solid rgba(255, 212, 137, 1);
     }
 }
 

src/views/old_mini/agri_file/pages/regionAlbums.vue

@@ -8,39 +8,48 @@
                 </el-icon>
             </div>
             <div class="region-albums__hero-info">
-                <span class="region-albums__title">{{ regionName }}</span>
-                <span class="region-albums__count">{{ t("agriFile.photoCount", { count: totalCount }) }}</span>
+                <div class="region-albums__title">
+                    {{ regionName }}
+                    <el-icon class="edit-icon"><EditPen /></el-icon>
+                </div>
+                <div class="region-albums__count">
+                    <img class="count-icon" src="@/assets/img/agricultural/img-icon.png" alt="">
+                    {{ t("agriFile.photoCount", { count: totalCount }) }}
+                </div>
             </div>
         </div>
 
         <div class="region-albums__panel" v-loading="loading">
-            <div v-if="!loading && isEmpty" class="region-albums__empty">
-                <img
-                    class="region-albums__empty-icon"
-                    src="@/assets/img/agricultural/empty.png"
-                    alt=""
-                />
-                <div class="region-albums__empty-text">{{ t("agriFile.emptyAlbumTip") }}</div>
-            </div>
+            <div class="region-albums__panel-content">
+                <div v-if="!loading && isEmpty" class="region-albums__empty">
+                    <img
+                        class="region-albums__empty-icon"
+                        src="@/assets/img/agricultural/empty.png"
+                        alt=""
+                    />
+                    <div class="region-albums__empty-text">{{ t("agriFile.emptyAlbumTip") }}</div>
+                    <div class="region-albums__empty-text-hint">照片会按上传日期自动归档</div>
+                </div>
 
-            <div v-else class="region-albums__album-list">
-                <div
-                    v-for="group in dateGroups"
-                    :key="group.date"
-                    class="album-group"
-                >
-                    <div class="album-group__header">
-                        <div class="album-group__date">{{ group.dateLabel }}</div>
-                        <div v-if="group.remark" class="album-group__remark">{{ group.remark }}</div>
-                    </div>
-                    <div class="album-group__grid">
-                        <div
-                            v-for="(item, index) in group.list"
-                            :key="item.id || `${group.date}-${index}`"
-                            class="album-group__item"
-                            @click="previewImage(group, index)"
-                        >
-                            <img class="album-group__img" :src="item.url" alt="" loading="lazy" />
+                <div v-else class="region-albums__album-list">
+                    <div
+                        v-for="group in dateGroups"
+                        :key="group.date"
+                        class="album-group"
+                    >
+                        <div class="album-group__header">
+                            <div class="album-group__date">{{ group.dateLabel }}</div>
+                            <div v-if="group.remark" class="album-group__remark">{{ group.remark }}</div>
+                        </div>
+                        <div class="album-group__grid">
+                            <div
+                                v-for="(item, index) in group.list"
+                                :key="item.id || `${group.date}-${index}`"
+                                class="album-group__item"
+                                @click="previewImage(group, index)"
+                            >
+                                <img class="album-group__img" :src="item.url" alt="" loading="lazy" />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -48,7 +57,7 @@
         </div>
 
         <div class="region-albums__fab" @click="handleAdd">
-            <el-icon :size="28" color="#fff"><Plus /></el-icon>
+            <el-icon :size="28" color="#1A1408"><Plus /></el-icon>
         </div>
 
         <album-upload-popup
@@ -296,7 +305,7 @@ onDeactivated(() => {
 <style lang="scss" scoped>
 .region-albums {
     min-height: 100vh;
-    background: #f5f7fb;
+    background: #1A191D;
     position: relative;
 
     &__hero {
@@ -318,7 +327,7 @@ onDeactivated(() => {
         );
 
         &.is-light {
-            background: linear-gradient(180deg, #d2ebff 0%, #c2dcef 70%, #8ca1b2 100%);
+            background: url('@/assets/img/agricultural/album-bg.png') no-repeat center center /100% 100%;
         }
     }
 
@@ -333,18 +342,15 @@ onDeactivated(() => {
         display: flex;
         align-items: center;
         justify-content: center;
-        background: rgba(0, 0, 0, 0.25);
+        background: rgba(255, 255, 255, 0.25);
         cursor: pointer;
     }
 
     &__hero-info {
         position: absolute;
         z-index: 2;
-        left: 10px;
+        left: 12px;
         bottom: 36px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
     }
 
     &__title {
@@ -353,18 +359,31 @@ onDeactivated(() => {
         font-weight: 500;
         color: #fff;
         text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+        .edit-icon {
+            margin-left: 10px;
+            font-size: 16px;
+            cursor: pointer;
+        }
     }
 
     &__count {
+        margin-top: 4px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
         padding: 0 6px;
-        height: 24px;
-        line-height: 24px;
-        border-radius: 4px;
+        height: 28px;
+        border-radius: 24px;
         backdrop-filter: blur(4px);
-        background: rgba(255, 255, 255, 0.2);
+        background: rgba(0, 0, 0, 0.5);
         color: #fff;
         font-size: 14px;
         box-sizing: border-box;
+        .count-icon {
+            width: 20px;
+            height: 20px;
+            object-fit: contain;
+        }
     }
 
     &__panel {
@@ -372,10 +391,19 @@ onDeactivated(() => {
         z-index: 3;
         margin-top: -20px;
         height: calc(100vh - 140px);
-        background: #fff;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 72.15%),
+linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 72.15%);
         border-radius: 12px 12px 0 0;
-        padding-top: 12px;
+        padding: 1px;
         box-sizing: border-box;
+        &-content {
+            border-radius: 12px 12px 0 0;
+            height: 100%;
+            overflow-y: auto;
+            background: #1A191D;
+            padding: 0 6px 40px;
+            box-sizing: border-box;
+        }
     }
 
     &__empty {
@@ -390,8 +418,8 @@ onDeactivated(() => {
     }
 
     &__empty-icon {
-        width: 58px;
-        height: 56px;
+        width: 131px;
+        height: 90px;
         object-fit: contain;
     }
 
@@ -399,10 +427,17 @@ onDeactivated(() => {
         margin-top: 16px;
         font-size: 14px;
         line-height: 20px;
-        color: rgba(0, 0, 0, 0.71);
+        color: rgba(255, 255, 255, 0.85);
         text-align: center;
     }
 
+    &__empty-text-hint {
+        margin-top: 5px;
+        font-size: 12px;
+        line-height: 18px;
+        color: rgba(255, 255, 255, 0.5);
+    }
+
     &__album-list {
         overflow-y: auto;
         height: 100%;
@@ -418,11 +453,10 @@ onDeactivated(() => {
         width: 56px;
         height: 56px;
         border-radius: 50%;
-        background: #2199f8;
+        background: linear-gradient(135deg, #FFEBC9 0%, #FFCA6D 100%);
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 6px 16px rgba(33, 153, 248, 0.4);
         cursor: pointer;
     }
 }

src/views/old_mini/growth_report/components/CropAlertPanel.vue

@@ -867,6 +867,14 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
         font-size: 14px;
         color: rgba(255, 255, 255, 0.5);
         text-align: center;
+        ::v-deep {
+            .el-loading-spinner .el-loading-text {
+                color: rgba(255, 212, 137, 0.8)
+            }
+            .el-loading-spinner .path {
+                stroke: rgba(255, 212, 137, 0.8);
+            }
+        }
     }
 
     .alert-card {

src/views/old_mini/work_execute/components/calendar.vue

@@ -28,8 +28,9 @@
                 @click="selectDate(day.date, day)"
             >
                 <div class="day-box">
-                    <span class="days-week">{{ day.isToday ? "今天" : `周${day.dayOfWeek}` }}</span>
-                    <span class="days-one">{{ day.dayLabel }}</span>
+                    <span class="days-week">{{ day.isToday ? "今" : day.dayOfWeek }}</span>
+                    <span class="days-one">{{ day.day }}</span>
+                    <span v-if="day.typeName?.lengthVal" class="day-dot" />
                 </div>
                 <div v-if="day.solarTerm" class="solar-term">{{ day.solarTerm }}</div>
                 <div v-if="day.typeName?.lengthVal" class="type-num">{{ day.typeName.lengthVal }}</div>
@@ -258,195 +259,107 @@ defineExpose({
     width: 100%;
     text-align: center;
     box-sizing: border-box;
+
     .header-wrap {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-        .header-l {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-            .top-c {
-                flex: 1;
-                text-align: center;
-            }
-            .header-text {
-                color: #000;
-                font-size: 16px;
-                font-weight: bold;
-                .center-line {
-                    position: relative;
-                    top: -3px;
-                }
-            }
-            .icon {
-                width: 20px;
-                height: 20px;
-                background: #F2F3F5;
-                border-radius: 50%;
-                text-align: center;
-                line-height: 20px;
-                &.icon-l {
-                    margin-right: 2px;
-                }
-                &.icon-r {
-                    margin-left: 2px;
-                }
-            }
-            .top-tag {
-                font-size: 12px;
-                padding: 0 8px;
-                height: 20px;
-                line-height: 20px;
-                border-radius: 20px;
-                &.red {
-                    color: #FF0000;
-                    background: rgba(255, 0, 0, 0.1);
-                }
-                &.orange {
-                    color: #FF790B;
-                    background: rgba(255, 149, 61, 0.2);
-                }
-            }
-        }
-        .header-r {
-            background: rgba(252, 138, 44, 0.12);
-            padding: 6px 10px;
-            border-radius: 28px;
-            color: #fc8a2c;
-            display: inline-flex;
-            align-items: center;
-            font-size: 10px;
-            .line {
-                width: 12px;
-                height: 1px;
-                margin-right: 5px;
-                background: #fc8a2c;
-            }
-        }
+        display: none;
     }
 }
 
-.weekdays {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    font-size: 12px;
-}
 .days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    // gap: 5px;
     font-size: 12px;
     position: relative;
-    .days-fixed {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        box-shadow: -4px 0px 4px 0px #00000000;
-        width: 48px;
-        height: 50px;
-        background: #fff;
-        color: #969696;
-    }
+
     .days-item + .days-item {
         margin-left: 6px;
     }
+
     .days-item {
         cursor: pointer;
         position: relative;
-        &.today {
-            // min-height: 70px;
-            .day-box {
-                color: #2199f8;
-            }
-        }
 
-        &.activeDay {
-            .day-box {
-                color: #fff;
-                background: linear-gradient(136deg, #9fd5ff, #2199f8);
-            }
-        }
         .day-box {
-            background: #fff;
-            color: #000;
-            border-radius: 8px;
-            padding: 7px 0;
+            background: rgba(255, 255, 255, 0.06);
+            color: rgba(255, 255, 255, 0.55);
+            border-radius: 10px;
+            padding: 8px 0 10px;
             position: relative;
+            border: 1px solid transparent;
+            box-sizing: border-box;
+
             .days-week {
                 font-size: 12px;
+                line-height: 16px;
             }
         }
+
+        .days-one {
+            text-align: center;
+            display: block;
+            margin: 2px auto 0;
+            font-size: 15px;
+            line-height: 20px;
+            font-weight: 500;
+            color: rgba(255, 255, 255, 0.85);
+        }
+
+        .day-dot {
+            display: block;
+            width: 4px;
+            height: 4px;
+            margin: 4px auto 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.35);
+        }
+
         .solar-term {
             padding-top: 3px;
-            color: #8D8D8D;
-            font-size: 12px;
+            color: rgba(255, 255, 255, 0.35);
+            font-size: 11px;
         }
+
         .type-num {
             position: absolute;
-            top: -5px;
-            right: -5px;
-            color: #fff;
+            top: -4px;
+            right: -4px;
+            z-index: 1;
+            min-width: 16px;
+            height: 16px;
+            padding: 0 3px;
+            box-sizing: border-box;
+            color: #1a1408;
             font-size: 10px;
-            background: #2199F8;
-            width: 14px;
-            height: 14px;
-            line-height: 16px;
-            border-radius: 50%;
-        }
-        .days-one {
-            text-align: center;
-            display: block;
-            margin: 0 auto;
-            font-size: 14px;
             line-height: 16px;
-            padding-top: 2px;
-            // width: 32px;
-            // height: 32px;
-            // line-height: 32px;
-            // border-radius: 50%;
+            background: #ffd489;
+            border-radius: 5px;
         }
-        .type-name {
-            font-size: 10px;
-            margin-top: 2px;
-            border-radius: 12px;
-            background: #fff;
-            padding-top: 2px;
-            .type-text {
-                border-radius: 12px;
-                padding: 2px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                max-width: 44px;
-                margin: 0 auto;
-                color: #666;
+
+        &.today .day-box {
+            color: #ffd489;
+            border-color: rgba(255, 212, 137, 0.55);
+
+            .days-one {
+                color: #ffd489;
+            }
+
+            .day-dot {
+                background: #ffd489;
             }
         }
-    }
-}
-.today {
-    position: relative;
-    // &::after {
-    //     content: "";
-    //     position: absolute;
-    //     left: 0;
-    //     right: 0;
-    //     bottom: 0;
-    //     margin: 0 auto;
-    //     width: 10px;
-    //     height: 10px;
-    //     background: url("@/assets/img/home/today.png") no-repeat center center / 100% 100%;
-    // }
-    &.no-type {
-        &::after {
-            bottom: 14px;
+
+        &.activeDay .day-box {
+            color: #ffd489;
+            background: rgba(255, 212, 137, 0.08);
+            border-color: #ffd489;
+
+            .days-one {
+                color: #ffd489;
+            }
+
+            .day-dot {
+                background: #ffd489;
+            }
         }
     }
 }

src/views/old_mini/work_execute/index.js

@@ -47,10 +47,14 @@ function createPillLabel(text) {
   ctx.font = LABEL_FONT;
   ctx.beginPath();
   ctx.roundRect(0, 0, width, height, Math.min(LABEL_RADIUS, height / 2));
-  ctx.fillStyle = "#FFFFFF";
+  // 深色胶囊标签，贴合页面深色主题
+  ctx.fillStyle = "rgba(12, 12, 12, 0.78)";
   ctx.fill();
+  ctx.strokeStyle = "rgba(255, 255, 255, 0.12)";
+  ctx.lineWidth = 1;
+  ctx.stroke();
 
-  ctx.fillStyle = "#0A0A0A";
+  ctx.fillStyle = "#FFFFFF";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   ctx.fillText(labelText, Math.round(width / 2), Math.round(height / 2));

src/views/old_mini/work_execute/index.vue

@@ -10,58 +10,68 @@
         <div class="task-list">
             <div class="task-tabs">
                 <div class="tab-item" :class="{ active: activeTab === 'pending' }" @click="handleTabChange('pending')">
-                    待执行({{ pendingCount }})
+                    待执行 {{ pendingCount }}
                 </div>
-                <div class="tab-item" :class="{ active: activeTab === 'completed' }" @click="handleTabChange('completed')">
-                    已完成({{ completedCount }})
+                <div class="tab-item" :class="{ active: activeTab === 'completed' }"
+                    @click="handleTabChange('completed')">
+                    已完成 {{ completedCount }}
                 </div>
             </div>
             <div class="work-task-list">
-                <div
-                    v-for="item in displayTaskList"
-                    :key="item.id"
-                    class="task-card"
-                    @click.stop="handleViewDetail(item)"
-                    :class="{ 'is-risk': item.isHighRisk }"
-                >
-                    <div v-if="item.status === 'pending' && item.cornerTip" class="task-card__corner">{{ item.cornerTip }}</div>
-                    <div v-if="item.status === 'completed' && item.cornerTip" class="task-card__corner done-corner" :class="{ 'myself-corner': item.isByMyself }">
-                        <el-icon size="14" class="myself-corner__icon" :class="{ 'myself-corner__icon-success': item.isByMyself }"><SuccessFilled /></el-icon>
-                        {{ item.cornerTip }}
-                    </div>
-
-                    <div class="task-card__header">
-                        <!-- <img class="task-card__icon" src="@/assets/img/home/task.png" alt="" /> -->
-                        <span class="task-card__title van-ellipsis">{{ item.executeDate + ' ' + item.title }}</span>
-                        <span v-if="item.isNormal" class="badge-tag normal-badge">标准类</span>
-                        <span v-if="item.isAbnormal" class="badge-tag abnormal-badge">异常类</span>
-                        <span v-if="item.isWeather" class="badge-tag weather-badge">气象类</span>
-                        <span v-if="item.isHighRisk" class="badge-tag risk-badge">{{ t("workExecute.highRisk") }}</span>
-                    </div>
+                <div v-for="item in displayTaskList" :key="item.id" class="task-card" :class="{
+                    'is-risk': item.isHighRisk,
+                    'is-weather': item.isWeather,
+                    'is-abnormal': item.isAbnormal,
+                    'is-normal': item.isNormal,
+                }" @click.stop="handleViewDetail(item)">
+                    <div class="task-card__content">
+                        <div v-if="item.isHighRisk" class="task-card__risk">
+                            {{ t("workExecute.highRisk") }}
+                        </div>
 
-                    <div class="task-card__body">
-                        <!-- <div class="info-line">
-                            触发条件：{{ item.fw_trigger || '--' }}
-                        </div> -->
-                        <div class="info-line">
-                            {{ t("workExecute.farmSituation") }}{{ item.analysisSummary }}
+                        <div class="task-card__header">
+                            <span class="task-card__title van-ellipsis">
+                                {{ item.executeDate + " " + item.title }}
+                            </span>
                         </div>
-                        <div class="info-line">
-                            {{ t("workExecute.executeAreaLabel") }}{{ item.areaCode }}
+
+                        <div class="task-card__tags">
+                            <span v-if="item.isNormal" class="badge-tag normal-badge">标准类</span>
+                            <span v-if="item.isAbnormal" class="badge-tag abnormal-badge">异常类</span>
+                            <span v-if="item.isWeather" class="badge-tag weather-badge">气象类</span>
+                            <span v-if="item.status === 'pending' && item.cornerTip" class="badge-tag status-badge">
+                                {{ item.cornerTip }}
+                            </span>
+                            <span v-if="item.status === 'completed' && item.cornerTip"
+                                class="badge-tag status-badge is-done" :class="{ 'is-myself': item.isByMyself }">
+                                {{ item.cornerTip }}
+                            </span>
                         </div>
-                    </div>
 
-                    <div class="task-card__footer">
-                        <!-- <div class="footer-l">
-                            <img class="footer-l__icon" src="@/assets/img/home/user-icon-fill.png" alt="">
-                            外包农事
-                        </div> -->
-                        <div class="footer-r">
-                            <div class="card-btn card-btn--ghost" @click.stop="handleForward(item)">
-                                {{ t("workExecute.forward") }}
+                        <div class="task-card__body">
+                            <div class="info-row">
+                                <span class="info-row__label">农情研判</span>
+                                <span class="info-row__value">{{ item.analysisSummary || "--" }}</span>
                             </div>
-                            <div class="card-btn card-btn--primary" @click.stop="handleViewDetail(item)">
-                                我已完成
+                            <div class="info-row">
+                                <span class="info-row__label">执行区域</span>
+                                <span class="info-row__value">{{ item.areaCode || "--" }}</span>
+                            </div>
+                            <div v-if="item.fw_trigger" class="info-row">
+                                <span class="info-row__label">触发条件</span>
+                                <span class="info-row__value">{{ item.fw_trigger }}</span>
+                            </div>
+                        </div>
+
+                        <div class="task-card__footer">
+                            <div class="footer-l">外包农事</div>
+                            <div class="footer-r">
+                                <div class="card-btn card-btn--ghost" @click.stop="handleForward(item)">
+                                    {{ t("workExecute.forward") }}
+                                </div>
+                                <div class="card-btn card-btn--primary" @click.stop="handleViewDetail(item)">
+                                    我已完成
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -563,16 +573,19 @@ onDeactivated(() => {
     height: calc(100vh - 50px);
     overflow: auto;
     box-sizing: border-box;
-    background: linear-gradient(180deg, #d1ebff 0%, #ffffff 100%);
+    background: url('@/assets/img/agricultural/page-bg.png') no-repeat top center;
+    background-size: 100% 250px;
 
     .map-container {
         width: 100%;
         height: 162px;
-        clip-path: inset(0 round 8px);
+        border-radius: 12px;
+        overflow: hidden;
+        background: #1a1a1a;
     }
 
     .calendar-container {
-        padding: 4px 12px 8px;
+        padding: 10px 12px 8px;
     }
 
     .task-top {
@@ -584,26 +597,31 @@ onDeactivated(() => {
     }
 
     .task-tabs {
-        display: flex;
+        display: inline-flex;
         align-items: center;
-        justify-content: center;
-        gap: 50px;
-        margin: 2px 0 26px 0;
+        gap: 0;
+        margin: 4px 0 14px;
+        padding: 3px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.06);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+
         .tab-item {
-            color: #1D2129;
-            position: relative;
+            min-width: 88px;
+            height: 32px;
+            padding: 0 14px;
+            border-radius: 8px;
+            color: rgba(255, 255, 255, 0.45);
+            font-size: 13px;
+            line-height: 32px;
+            text-align: center;
+            cursor: pointer;
+
             &.active {
-                color: #2199F8;
+                color: #fff;
+                background: rgba(255, 255, 255, 0.12);
+                border: 1px solid rgba(255, 255, 255, 0.16);
                 font-weight: 500;
-                &::after {
-                    content: '';
-                    position: absolute;
-                    bottom: -10px;
-                    left: 0;
-                    width: 100%;
-                    height: 2px;
-                    background: #2199F8;
-                }
             }
         }
     }
@@ -611,121 +629,154 @@ onDeactivated(() => {
     .work-task-list {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 12px;
     }
 
     .task-card {
         position: relative;
-        padding: 14px 12px 12px;
-        border-radius: 8px;
-        background: #fff;
+        border-radius: 12px 13px 13px 12px;
+        // background: #1a1a1a;
+        // border: 1px solid rgba(255, 255, 255, 0.06);
         box-sizing: border-box;
         overflow: hidden;
-        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
+        width: 100%;
+        padding-left: 1px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 127.87%),
+linear-gradient(0deg, #FFD489, #FFD489);
+
+        .task-card__content {
+            padding: 14px 14px 12px;
+            border-right: 1px solid #1A191D;
+            // border-radius: 12px 0 0 12px;
+            border-radius: 12px 11px 11px 12px;
+            background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
+        }
+
+        // &::before {
+        //     content: "";
+        //     position: absolute;
+        //     left: 0;
+        //     top: 0;
+        //     bottom: 0;
+        //     width: 1px;
+        //     border-radius: 0 12px 0 12px;
+        //     background: rgba(255, 212, 137, 0.75);
+        // }
+
+        &.is-weather::before {
+            background: rgba(64, 158, 255, 0.85);
+        }
+
+        &.is-abnormal::before,
+        &.is-risk::before {
+            background: rgba(232, 84, 84, 0.9);
+        }
 
-        &__corner {
+        &__risk {
             position: absolute;
-            top: 0;
-            right: 0;
-            max-width: 78px;
-            padding: 2px 8px;
-            border-radius: 0 8px 0 8px;
-            background: rgba(33, 153, 248, 0.1);
-            color: #2199F8;
-            // background: rgba(255, 106, 106, 0.1);
-            // color: #FF6A6A;
+            top: 12px;
+            right: 12px;
+            height: 22px;
+            padding: 0 8px;
+            border-radius: 6px;
+            background: #c93c3c;
+            color: #fff;
             font-size: 12px;
-            line-height: 16px;
-            white-space: wrap;
-            box-sizing: border-box;
-            text-align: center;
-            // overflow: hidden;
-            // text-overflow: ellipsis;
-
-            &.done-corner {
-                max-width: 86px;
-                height: 24px;
-                background: rgba(118, 126, 116, 0.1);
-                display: flex;
-                align-items: center;
-                gap: 4px;
-                color: #959595;
-                &.myself-corner {
-                    background: rgba(74, 191, 50, 0.1);
-                    color: #4ABF32;
-                }
-                .myself-corner__icon {
-                    color: #959595;
-                    flex-shrink: 0;
-                }
-                .myself-corner__icon-success {
-                    color: #4ABF32;
-                }
-            }
+            line-height: 22px;
         }
 
         &__header {
             display: flex;
             align-items: center;
-            gap: 8px;
-            padding-right: 8px;
             min-width: 0;
-        }
-
-        &__icon {
-            width: 16px;
-            height: 16px;
-            flex-shrink: 0;
+            padding-right: 72px;
         }
 
         &__title {
-            max-width: 160px;
             font-size: 16px;
-            font-weight: 500;
-            color: #000;
+            font-weight: 600;
+            line-height: 22px;
+            color: #fff;
+        }
+
+        &__tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            margin-top: 8px;
         }
 
         .badge-tag {
             flex-shrink: 0;
-            height: 18px;
-            padding: 0 6px;
-            border-radius: 2px;
+            height: 20px;
+            padding: 0 8px;
+            border-radius: 6px;
             font-size: 12px;
-        }
-        .badge-tag + .badge-tag {
-            margin-left: 4px;
+            line-height: 18px;
+            box-sizing: border-box;
+            border: 1px solid transparent;
         }
 
-        .risk-badge {
-            background: #FF6A6A;
-            color: #FFFFFF;
-        }
         .normal-badge {
-            background: rgba(33, 153, 248, 0.1);
-            color: #2199F8;
+            color: #ffd489;
+            border-color: rgba(255, 212, 137, 0.45);
+            background: transparent;
         }
+
         .abnormal-badge {
-            background: rgba(255, 106, 106, 0.1);
-            color: #FF6A6A;
+            color: #ff8b8b;
+            background: rgba(232, 84, 84, 0.16);
+            border-color: rgba(232, 84, 84, 0.28);
         }
+
         .weather-badge {
-            background: rgba(255, 149, 61, 0.1);
-            color: #FDA202;
+            color: #6eb6ff;
+            background: rgba(64, 158, 255, 0.16);
+            border-color: rgba(64, 158, 255, 0.28);
+        }
+
+        .status-badge {
+            color: #1a1408;
+            background: #ffd489;
+            border-color: #ffd489;
+
+            &.is-done {
+                color: rgba(255, 255, 255, 0.65);
+                background: rgba(255, 255, 255, 0.1);
+                border-color: transparent;
+            }
+
+            &.is-myself {
+                color: #7dff9a;
+                background: rgba(74, 191, 50, 0.16);
+            }
         }
 
         &__body {
-            margin-top: 10px;
-            padding-top: 10px;
-            border-top: 0.5px solid rgba(0, 0, 0, 0.05);
+            margin-top: 12px;
         }
 
-        .info-line {
-            font-size: 14px;
+        .info-row {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            font-size: 13px;
             line-height: 20px;
-            color: rgba(111, 114, 116, 0.6);
 
-            & + .info-line {
-                margin-top: 6px;
+            &+.info-row {
+                margin-top: 8px;
+            }
+
+            &__label {
+                flex-shrink: 0;
+                width: 56px;
+                color: rgba(255, 255, 255, 0.4);
+            }
+
+            &__value {
+                flex: 1;
+                min-width: 0;
+                color: rgba(255, 255, 255, 0.88);
             }
         }
 
@@ -735,54 +786,56 @@ onDeactivated(() => {
             justify-content: space-between;
             gap: 12px;
             margin-top: 14px;
+            padding-top: 12px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+
             .footer-l {
-                background: rgba(33, 153, 248, 0.1);
-                height: 20px;
-                display: flex;
-                align-items: center;
-                gap: 6px;
-                padding: 0 6px;
-                border-radius: 2px;
                 font-size: 12px;
-                color: #2199F8;
-                .footer-l__icon {
-                    width: 14px;
-                    height: 14px;
-                    flex-shrink: 0;
-                }
+                color: rgba(255, 255, 255, 0.4);
             }
+
             .footer-r {
                 display: flex;
                 align-items: center;
-                gap: 10px;
+                gap: 8px;
             }
         }
 
         .card-btn {
             height: 32px;
-            border-radius: 20px;
+            border-radius: 8px;
             text-align: center;
             line-height: 32px;
             font-size: 12px;
+            box-sizing: border-box;
 
             &--ghost {
-                background: #F6F6F6;
-                color: #000000;
-                padding: 0 20px;
+                padding: 0 12px;
+                color: #fff;
+                background: rgba(255, 255, 255, 0.08);
+                border: 1px solid rgba(255, 255, 255, 0.12);
             }
 
             &--primary {
-                background: #2199F8;
-                color: #FFFFFF;
-                padding: 0 16px;
+                padding: 0 14px;
+                color: #1a1408;
+                background: linear-gradient(135deg, #ffebc9 0%, #ffca6d 100%);
+                border: none;
             }
         }
+
+        &.is-abnormal .card-btn--primary,
+        &.is-risk .card-btn--primary {
+            color: #ffd489;
+            background: transparent;
+            border: 1px solid rgba(255, 212, 137, 0.45);
+        }
     }
 
     .empty-tip {
         padding: 40px 0;
         text-align: center;
-        color: #86909c;
+        color: rgba(255, 255, 255, 0.35);
         font-size: 14px;
     }
 }