refactor: 黑金样式

src/App.vue

@@ -13,131 +13,48 @@
   </keep-alive>
 </router-view> -->
     <el-config-provider :locale="elementLocale">
-    <!-- keep-alive 必须常驻；用内部 component 的 v-if 区分是否缓存，避免切到非缓存页时整棵 keep-alive 被销毁 -->
-    <router-view v-slot="{ Component }">
-        <keep-alive>
-            <component
-                :is="Component"
-                v-if="Component && route.meta.keepAlive"
-                :key="route.name"
-            />
-        </keep-alive>
-        <component
-            :is="Component"
-            v-if="Component && !route.meta.keepAlive"
-            :key="route.name"
-        />
-    </router-view>
+        <!-- keep-alive 必须常驻；用内部 component 的 v-if 区分是否缓存，避免切到非缓存页时整棵 keep-alive 被销毁 -->
+        <router-view v-slot="{ Component }">
+            <keep-alive>
+                <component :is="Component" v-if="Component && route.meta.keepAlive" :key="route.name" />
+            </keep-alive>
+            <component :is="Component" v-if="Component && !route.meta.keepAlive" :key="route.name" />
+        </router-view>
 
 
-    <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#2199F8" inactive-color="#898989">
-        <!-- 托管农户：首页、农事档案、农事记录 -->
-        <!-- <template v-if="userType == 2"> -->
+        <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#FFD489" inactive-color="#B5B5B5">
             <tabbar-item replace to="/growth_report">
                 <span>{{ t("tabbar.situationAssessment") }}</span>
                 <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/home-active.png')
-                                : require('@/assets/img/tab_bar/home.png')
-                        "
-                    />
+                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
+                        src="@/assets/img/tab_bar/home-active.png" />
                 </template>
             </tabbar-item>
             <tabbar-item replace to="/diagnosis_report">
                 <span>诊断报告</span>
                 <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/report-active.png')
-                                : require('@/assets/img/tab_bar/report.png')
-                        "
-                    />
+                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
+                        src="@/assets/img/tab_bar/report-active.png" />
                 </template>
             </tabbar-item>
             <tabbar-item replace to="/agri_file">
                 <span>{{ t("tabbar.agriFile") }}</span>
                 <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/tree-active.png')
-                                : require('@/assets/img/tab_bar/tree.png')
-                        "
-                    />
+                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
+                        src="@/assets/img/tab_bar/tree-active.png" />
                 </template>
             </tabbar-item>
             <tabbar-item replace to="/work_execute">
                 <span>{{ t("tabbar.schedule") }}</span>
                 <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/task-active.png')
-                                : require('@/assets/img/tab_bar/task.png')
-                        "
-                    />
+                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
+                        src="@/assets/img/tab_bar/task-active.png" />
                 </template>
             </tabbar-item>
-        <!-- </template> -->
+        </Tabbar>
 
-        <!-- 普通农户：首页、农事服务、用户管理、个人中心（保留原逻辑） -->
-        <!-- <template v-else-if="userType == 1">
-            <tabbar-item replace to="/home" v-if="curRole == 0 || curRole == 2">
-                <span>{{ $t('首页') }}</span>
-                <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/home-active.png')
-                                : require('@/assets/img/tab_bar/home.png')
-                        "
-                    />
-                </template>
-            </tabbar-item>
-            <tabbar-item replace to="/task_condition">
-                <span>{{ $t('农事服务') }}</span>
-                <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/service-active.png')
-                                : require('@/assets/img/tab_bar/service.png')
-                        "
-                    />
-                </template>
-            </tabbar-item>
-            <tabbar-item replace to="/user">
-                <span>{{ $t('用户管理') }}</span>
-                <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/user-active.png')
-                                : require('@/assets/img/tab_bar/user.png')
-                        "
-                    />
-                </template>
-            </tabbar-item>
-            <tabbar-item replace to="/mine">
-                <span>{{ $t('个人中心') }}</span>
-                <template #icon="props">
-                    <img
-                        :src="
-                            props.active
-                                ? require('@/assets/img/tab_bar/mine-active.png')
-                                : require('@/assets/img/tab_bar/mine.png')
-                        "
-                    />
-                </template>
-            </tabbar-item>
-        </template> -->
-    </Tabbar>
-
-    <!-- 开启底部安全区适配 -->
-    <number-keyboard safe-area-inset-bottom />
+        <!-- 开启底部安全区适配 -->
+        <number-keyboard safe-area-inset-bottom />
     </el-config-provider>
 </template>
 
@@ -167,7 +84,7 @@ const userType = ref("2");
 
 // 获取用户是否为托管农户，并缓存 USER_TYPE（与 dev_login.vue 逻辑一致）
 const fetchUserType = async () => {
-    
+
     userType.value = "2";
     localStorage.setItem("USER_TYPE", "2");
 
@@ -251,5 +168,14 @@ watch(
     position: fixed;
     pointer-events: all;
     z-index: 9999;
+    --van-tabbar-background: #1D1D1D;
+    --van-tabbar-item-active-background: #1D1D1D;
+
+    .inactive-icon {
+        filter: grayscale(100%);
+    }
+    &::after {
+        border: none;
+    }
 }
 </style>

src/components/popup/completeFarmInfoPopup.vue

@@ -6,13 +6,30 @@
         class="complete-farm-popup"
         :close-on-click-overlay="false"
     >
+        
+        <div class="calendar-bg">
+            <img src="@/assets/img/farm/light-bg.png" alt="">
+        </div>
+        <div class="complete-farm-popup__image">
+            <img src="@/assets/img/farm/record-bg.png" alt="" />
+        </div>
         <div class="complete-farm-popup__title">{{ t("agriFile.completeFarmInfo") }}</div>
         <div class="complete-farm-popup__subtitle">
             {{ t("agriFile.getImmediately") }}
-            <span>{{ highlightLabel }}</span>
+            <span>农事诊断服务</span>
         </div>
-        <div class="complete-farm-popup__image">
-            <img :src="imageSrc" alt="" />
+        <div class="complete-farm-popup__features">
+            <div
+                v-for="(item, index) in featureList"
+                :key="item.label"
+                class="complete-farm-popup__feature"
+            >
+                <div v-if="index > 0" class="complete-farm-popup__feature-divider"></div>
+                <div class="complete-farm-popup__feature-icon">
+                    <img :src="item.icon" alt="" />
+                </div>
+                <div class="complete-farm-popup__feature-label">{{ item.label }}</div>
+            </div>
         </div>
         <div class="complete-farm-popup__btn" @click="handleOpen">{{ t("agriFile.goEnable") }}</div>
     </popup>
@@ -22,7 +39,6 @@
 import { computed } from "vue";
 import { Popup } from "vant";
 import { useI18n } from "@/i18n";
-import defaultImage from "@/assets/img/common/empty-bg.png";
 
 const { t } = useI18n();
 
@@ -31,11 +47,6 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    /** 不传则用原 empty-bg；诊断报告等场景可传 empty-bg-3 */
-    image: {
-        type: String,
-        default: "",
-    },
     /** 不传则用「巡田诊断服务」；诊断报告传「种植全析报告」 */
     highlightText: {
         type: String,
@@ -45,7 +56,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:show", "confirm"]);
 
-const imageSrc = computed(() => props.image || defaultImage);
 const highlightLabel = computed(
     () => props.highlightText || t("agriFile.patrolDiagnosisService")
 );
@@ -55,6 +65,12 @@ const showValue = computed({
     set: (val) => emit("update:show", val),
 });
 
+const featureList = [
+    { icon: require("@/assets/img/farm/list.png"), label: "诊断报告" },
+    { icon: require("@/assets/img/farm/warning.png"), label: "风险预警" },
+    { icon: require("@/assets/img/farm/guide.png"), label: "巡园指导" },
+];
+
 const handleOpen = () => {
     emit("confirm");
     showValue.value = false;
@@ -64,47 +80,111 @@ const handleOpen = () => {
 <style scoped lang="scss">
 .complete-farm-popup {
     width: 82%;
-    padding: 20px 10px;
+    padding: 24px 20px;
     text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
 
     &__title,
     &__subtitle {
+        color: #fff;
         font-size: 24px;
         font-family: 'pangmenzhengdao';
     }
 
     &__subtitle {
-        margin-top: -4px;
+        // margin-top: -4px;
 
         span {
-            color: #2199f8;
+            color: #FFD489;
+        }
+    }
+
+    
+
+    .calendar-bg {
+        position:absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        // height: 100%;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
     }
 
     &__image {
         width: 100%;
-        height: 156px;
-        margin: 14px 0;
-        border-radius: 5px;
-        background: #f2f4f7;
+        height: 150px;
+        margin-bottom: 25px;
 
         img {
             display: block;
             width: 100%;
             height: 100%;
-            object-fit: cover;
-            border-radius: 5px;
+            object-fit: contain;
         }
     }
 
+    &__features {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        margin: 20px 0 24px;
+    }
+
+    &__feature {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__feature-divider {
+        position: absolute;
+        left: 0;
+        top: 8px;
+        width: 1px;
+        height: 36px;
+        background: rgba(255, 212, 137, 0.18);
+    }
+
+    &__feature-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 212, 137, 0.16);
+        background: rgba(255, 212, 137, 0.1);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+            width: 15px;
+            object-fit: contain;
+            display: block;
+        }
+    }
+
+    &__feature-label {
+        font-size: 12px;
+        line-height: 18px;
+        color: rgba(255, 255, 255, 0.6);
+    }
+
     &__btn {
-        width: 162px;
-        border-radius: 25px;
-        background: #2199f8;
-        padding: 8px 0;
-        color: #fff;
+        width: 100%;
+        border-radius: 8px;
+        background: linear-gradient(90deg, #FFEBC9 0%, #FFCA6D 100%);
+        color: #1A1408;
         font-size: 16px;
-        margin: auto;
+        height: 48px;
+        line-height: 48px;
     }
 }
 </style>

src/components/popup/diagnosisReportPopup.vue

@@ -136,18 +136,18 @@ defineExpose({
 <style scoped lang="scss">
 .diagnosis-report-popup {
     width: 78%;
-    padding: 90px 20px 22px;
+    padding: 80px 16px 20px;
     text-align: center;
     overflow: visible;
-    background: linear-gradient(360deg, #FFFFFF 0%, #D3EBFF 100%);
+    background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
 
     &__image {
         display: block;
-        width: 138px;
-        height: 138px;
-        margin: 0 auto 16px;
+        width: 147px;
+        height: 132px;
+        // margin: 0 auto 16px;
         position: absolute;
-        top: -54px;
+        top: -74px;
         left: 50%;
         transform: translateX(-50%);
     }
@@ -166,8 +166,8 @@ defineExpose({
         margin: 18px auto 10px;
         padding: 8px 0;
         border-radius: 25px;
-        background: linear-gradient(180deg, #96D1FF 0%, #2199F8 100%);
-        color: #fff;
+        background: linear-gradient(90deg, #FFEBC9 0%, #FFCA6D 100%);
+        color: #1A1408;
         font-size: 16px;
     }
 

src/components/popup/farmCalendarPopup.vue

@@ -6,31 +6,38 @@
         class="farm-calendar-popup"
         :close-on-click-overlay="false"
     >
-        <div class="farm-calendar-popup__title">{{ t("agriFile.completeFarmInfo") }}</div>
-        <div class="farm-calendar-popup__subtitle">
-            {{ t("agriFile.getImmediately") }}
-            <span>{{ t("workExecute.exclusiveFarmCalendar") }}</span>
+        <div class="calendar-bg">
+            <img src="@/assets/img/farm/light-bg.png" alt="">
         </div>
-        <div class="farm-calendar-popup__days">
-            <div
-                v-for="(day, index) in weekDays"
-                :key="day"
-                class="farm-calendar-popup__day"
-                :class="{ 'is-active': activeDay === index }"
-                @click="activeDay = index"
-            >
-                {{ t(day) }}
+        <div class="calendar-content">
+            <div class="farm-calendar-popup__image">
+                <img src="@/assets/img/farm/calendar-bg.png" alt="">
             </div>
+            <div class="farm-calendar-popup__title">{{ t("agriFile.completeFarmInfo") }}</div>
+            <div class="farm-calendar-popup__subtitle">
+                {{ t("agriFile.getImmediately") }}
+                <span>{{ t("workExecute.exclusiveFarmCalendar") }}</span>
+            </div>
+            <div class="farm-calendar-popup__features">
+                <div
+                    v-for="(item, index) in featureList"
+                    :key="item.label"
+                    class="farm-calendar-popup__feature"
+                >
+                    <div v-if="index > 0" class="farm-calendar-popup__feature-divider"></div>
+                    <div class="farm-calendar-popup__feature-icon">
+                        <img :src="item.icon" alt="" />
+                    </div>
+                    <div class="farm-calendar-popup__feature-label">{{ item.label }}</div>
+                </div>
+            </div>
+            <div class="farm-calendar-popup__btn" @click="handleOpen">{{ t("agriFile.goEnable") }}</div>
         </div>
-        <div class="farm-calendar-popup__image">
-            <img src="@/assets/img/common/empty-bg-2.png" alt="">
-        </div>
-        <div class="farm-calendar-popup__btn" @click="handleOpen">{{ t("agriFile.goEnable") }}</div>
     </popup>
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { Popup } from "vant";
 import { useI18n } from "@/i18n";
 
@@ -54,10 +61,11 @@ const showValue = computed({
     set: (val) => emit("update:show", val),
 });
 
-const weekDays = ["week.1", "week.2", "week.3", "week.4", "week.5"];
-const activeDay = ref(1);
-
-const currentImage = computed(() => props.images[activeDay.value] || "");
+const featureList = [
+    { icon: require("@/assets/img/farm/calendar.png"), label: "每日农事" },
+    { icon: require("@/assets/img/farm/clock.png"), label: "到点提醒" },
+    { icon: require("@/assets/img/farm/check.png"), label: "一键打卡" },
+];
 
 const handleOpen = () => {
     emit("confirm");
@@ -68,12 +76,17 @@ const handleOpen = () => {
 <style scoped lang="scss">
 .farm-calendar-popup {
     width: 82%;
-    padding: 20px 10px;
+    padding: 24px 20px;
     text-align: center;
-    background: linear-gradient(360deg, #FFFFFF 1.28%, #D7EEFF 55.76%, #FFFFFF 98.67%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
+    // .calendar-content {
+    //     background: url('@/assets/img/farm/light-bg.png') no-repeat center center;
+    // }
 
     &__title,
     &__subtitle {
+        color: #fff;
         font-size: 24px;
         font-family: "pangmenzhengdao";
         line-height: 28px;
@@ -81,63 +94,92 @@ const handleOpen = () => {
 
     &__subtitle {
         span {
-            color: #2199f8;
+            color: #FFD489;
+        }
+    }
+
+    .calendar-bg {
+        position:absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        // height: 100%;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
     }
 
-    &__days {
+    &__image {
+        width: 100%;
+        height: 160px;
+        padding-bottom: 25px;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__features {
         display: flex;
+        align-items: flex-start;
         justify-content: space-between;
-        gap: 12px;
-        margin-top: 14px;
+        margin: 20px 0 24px;
     }
 
-    &__day {
+    &__feature {
         position: relative;
         flex: 1;
-        border-radius: 4px 4px 0 0;
-        background: #fff;
-        padding: 4px 0;
-
-        &.is-active {
-            background: linear-gradient(149.44deg, #9FD5FF 2.43%, #2199F8 91.84%);
-            color: #fff;
-            border-radius: 4px;
-
-            &::after {
-                content: "";
-                position: absolute;
-                left: 50%;
-                bottom: -5px;
-                transform: translateX(-50%);
-                border-left: 6px solid transparent;
-                border-right: 6px solid transparent;
-                border-top: 6px solid #2199f8;
-            }
-        }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
     }
 
-    &__image {
-        width: 100%;
-        height: 142px;
-        margin: 12px 0 14px;
-        border-radius: 5px;
-        background: #f2f4f7;
+    &__feature-divider {
+        position: absolute;
+        left: 0;
+        top: 8px;
+        width: 1px;
+        height: 36px;
+        background: rgba(255, 212, 137, 0.18);
+    }
+
+    &__feature-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 212, 137, 0.16);
+        background: rgba(255, 212, 137, 0.1);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         img {
+            width: 15px;
+            object-fit: contain;
             display: block;
-            width: 100%;
-            height: 100%;
         }
     }
 
+    &__feature-label {
+        font-size: 12px;
+        line-height: 18px;
+        color: rgba(255, 255, 255, 0.6);
+    }
+
     &__btn {
-        width: 162px;
+        width: 100%;
         margin: auto;
-        padding: 8px 0;
-        border-radius: 25px;
-        background: #2199f8;
-        color: #fff;
+        height: 48px;
+        line-height: 48px;
+        border-radius: 8px;
+        background: linear-gradient(90deg, #FFEBC9 0%, #FFCA6D 100%);
+        color: #1A1408;
         font-size: 16px;
     }
 }

src/components/popup/restorePlantingPopup.vue

@@ -16,7 +16,7 @@
             <div class="restore-planting-popup__header">
                 <div class="restore-planting-popup__title">
                     <div>{{ t("agriFile.restoreFillQuestions") }}</div>
-                    <div>{{ t("agriFile.restorePlantingService") }}</div>
+                    <div>立即 <span class="light-text">恢复种植服务</span></div>
                 </div>
             </div>
 
@@ -82,9 +82,9 @@
                         @click="handlePhenologySelect(item.value)"
                     >
                         <span>{{ item.label }}</span>
-                        <span v-if="phenologyAnswer === item.value" class="restore-planting-popup__option-check">
+                        <!-- <span v-if="phenologyAnswer === item.value" class="restore-planting-popup__option-check">
                             <el-icon><Check /></el-icon>
-                        </span>
+                        </span> -->
                     </div>
                 </div>
             </div>
@@ -491,67 +491,76 @@ defineExpose({
 
 <style scoped lang="scss">
 .restore-planting-popup {
-    width: 86%;
-    padding: 18px 14px 16px;
+    width: 90%;
+    min-width: 340px;
+    padding: 1px;
+    border-radius: 16px;
     box-sizing: border-box;
-    background: linear-gradient(180deg, #d7ecff 0%, #ffffff 28%);
+    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%);
+
     overflow: visible;
 
     &__header {
         display: flex;
         align-items: flex-start;
-        justify-content: space-between;
+        justify-content: end;
     }
 
     &__title {
         font-size: 22px;
         line-height: 25px;
-        color: #111;
+        color: #fff;
         div {
             font-family: "PangMenZhengDao";
         }
+        .light-text {
+            color: #FFD489;
+            padding-left: 2px;
+        }
     }
 
     .popup-content {
+        padding: 28px 16px 20px;
+        background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
         position: relative;
+        border-radius: 16px;
     }
 
     &__decor {
         position: absolute;
         top: -8px;
-        right: -4px;
-        width: 78px;
-        height: 78px;
+        left: 0px;
+        width: 127px;
+        height: 127px;
         object-fit: contain;
         pointer-events: none;
     }
 
     &__card {
-        margin-top: 12px;
-        padding: 10px 12px 12px;
-        border-radius: 12px;
-        background: #eaf5ff;
+        padding-top: 20px;
         box-sizing: border-box;
         position: relative;
         z-index: 2;
+        color: #fff;
     }
 
     &__question {
-        font-size: 15px;
+        font-size: 16px;
         line-height: 24px;
-        color: #252525;
+        color: #fff;
         font-weight: 500;
     }
 
     &__keyword {
-        color: #2199f8;
+        color: #FFD489;
     }
 
     &__hint {
         margin-top: 4px;
         font-size: 12px;
         line-height: 16px;
-        color: #9e9e9e;
+        color: rgba(255, 255, 255, 0.5);
     }
 
     &__photo {
@@ -570,9 +579,9 @@ defineExpose({
             object-fit: cover;
         }
 
-        &--guide img {
-            height: 132px;
-        }
+        // &--guide img {
+        //     height: 140px;
+        // }
     }
 
     &__guide-btn {
@@ -599,20 +608,21 @@ defineExpose({
     &__option {
         position: relative;
         flex: 1;
-        height: 36px;
+        height: 40px;
         border-radius: 8px;
-        background: #fff;
-        border: 1px solid transparent;
+        background: rgba(255, 255, 255, 0.05);
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 13px;
-        color: #333;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.7);
         box-sizing: border-box;
+        border: 1px solid rgba(255, 255, 255, 0.12);
 
         &.active {
-            border-color: #2199f8;
-            color: #2199f8;
+            border-color: #FFD489;
+            background: rgba(255, 212, 137, 0.1);
+            color: #FFD489;
         }
     }
 
@@ -669,13 +679,17 @@ defineExpose({
         align-items: center;
         justify-content: center;
         font-size: 16px;
-        font-weight: 500;
         box-sizing: border-box;
-
+        
         &--primary {
+            color: #1A1408;
+            border-radius: 8px;
+            height: 44px;
+            line-height: 44px;
             // flex: 1;
-            background: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
-            color: #fff;
+            width: 100%;
+            border: none;
+            background: linear-gradient(135deg, #FFEBC9 0%, #FFCA6D 100%);
 
             &.disabled {
                 opacity: 0.6;

src/components/popup/tipPopup.vue

@@ -161,6 +161,10 @@ const handleClosed = () => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: linear-gradient(180deg, #1A191D 0%, #121216 100%);
+
     .tip-icon {
         margin-bottom: 12px;
         &.create-icon {
@@ -185,7 +189,7 @@ const handleClosed = () => {
             font-weight: 400;
         }
         .highlight-text {
-            color: #2199f8;
+            color: #FFD489;
         }
         &.pmzd{
             font-family: 'PangMenZhengDao';
@@ -229,8 +233,8 @@ const handleClosed = () => {
         padding: 8px;
         border-radius: 25px;
         font-size: 16px;
-        background: #2199f8;
-        color: #fff;
+        background: linear-gradient(135deg, #FFEBC9 0%, #FFCA6D 100%);
+        color: #1A1408;
         text-align: center;
         cursor: pointer;
     }

src/views/old_mini/agri_file/index.vue

@@ -325,7 +325,7 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background: linear-gradient(180deg, #d1ebff 0%, #ffffff 100%);
+    background: #141414;
 
     .nav-cards {
         position: relative;
@@ -459,8 +459,8 @@ onBeforeUnmount(() => {
 
         &.primary-btn {
             flex: 1;
-            background: #2199f8;
-            color: #fff;
+            background: linear-gradient(90deg, #FFEBC9 0%, #FFCA6D 100%);
+            color: #1A1408;
         }
     }
 }

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

@@ -7,17 +7,20 @@
             v-model:height="height"
             :anchors="anchors"
             :content-draggable="true"
+            :safe-area-inset-bottom="false"
             @height-change="handleHeightChange"
         >
             <div class="floating-panel-content">
                 <div class="panel-shell" ref="panelShellRef">
                     <div class="crop-header">
                         <div class="crop-info">
-                            <el-avatar class="crop-avatar" :size="24" :src="resolvedCropAvatar" />
-                            <span class="crop-name">{{ currentCropName }}</span>
-                            <span class="crop-badge">当前作物</span>
+                            <el-avatar class="crop-avatar" shape="square" :size="42" :src="resolvedCropAvatar" />
+                            <div class="crop-detail">
+                                <div class="crop-name">{{ currentCropName }}</div>
+                                <div class="crop-subtitle">花芽分化期</div>
+                            </div>
                         </div>
-                        <div v-if="hasFarm" class="switch-wrap">
+                        <div class="switch-wrap">
                             <el-tooltip
                                 v-model:visible="cropMenuVisible"
                                 placement="bottom"
@@ -69,7 +72,7 @@
                             class="alert-generating"
                             v-loading="true"
                             element-loading-text="报告生成中，请稍后..."
-                            element-loading-background="rgba(255, 255, 255, 0.9)"
+                            element-loading-background="rgba(0, 0, 0, 0.5)"
                         ></div>
                         <template v-else>
                             <div
@@ -78,23 +81,25 @@
                                 class="alert-card"
                             >
                                 <div class="alert-card__header">
-                                    <div class="alert-card__title-wrap">
+                                    <div class="alert-card__category">
                                         <img class="alert-card__icon" :src="item.icon" alt="" />
-                                        <span class="alert-card__title">{{ item.title }}</span>
+                                        <span>{{ item.category }}</span>
+                                    </div>
+                                    <div class="alert-card__level">
+                                        <span class="alert-card__level-dot"></span>
+                                        <span>{{ item.riskLevel }}</span>
                                     </div>
-                                    <span class="alert-card__link" @click="handleViewDetail(item)">
-                                        查看详情
-                                    </span>
                                 </div>
-                                <div class="alert-card__content-wrap">
-                                    <span class="alert-card__content">{{ item.content }}</span>
-                                    <span
-                                        v-if="hasFarm && item.patrolTip && item.title !== '正常气象'"
-                                        class="alert-card__patrol"
-                                        @click="handlePatrolTip(item)"
-                                    >
-                                        <el-icon class="alert-card__patrol-icon"><Link /></el-icon>
-                                        <span>{{ item.patrolTip }}</span>
+                                <div class="alert-card__name">{{ item.title || "—" }}</div>
+                                <div class="alert-card__metric">
+                                    <span class="alert-card__metric-num">{{ item.metricValue }}</span>
+                                    <span class="alert-card__metric-unit">{{ item.metricUnit }}</span>
+                                </div>
+                                <div class="alert-card__advice">{{ item.content || "—" }}</div>
+                                <div class="alert-card__footer">
+                                    <span class="alert-card__time">{{ item.timeText }}</span>
+                                    <span class="alert-card__link" @click="handleViewDetail(item)">
+                                        详情 &gt;
                                     </span>
                                 </div>
                             </div>
@@ -108,7 +113,7 @@
 
 <script setup>
 import { FloatingPanel } from "vant";
-import { CaretBottom, Link } from "@element-plus/icons-vue";
+import { CaretBottom } from "@element-plus/icons-vue";
 import { computed, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "@/i18n";
@@ -158,8 +163,16 @@ const activeIndex = ref(0);
 
 const emit = defineEmits(["viewDetail", "heightChange", "zoneChange"]);
 
-const weatherIcon = require("@/assets/img/report/weather.png");
+const weatherIcon = require("@/assets/img/report/icon-weather.png");
+const stressIcon = require("@/assets/img/report/icon-warning.png");
 const DEFAULT_CROP_AVATAR = "https://birdseye-img.sysuimars.com/dinggou-mini/defalut-icon.png";
+/** 卡片占位文案（接口字段待补） */
+const PLACEHOLDER = {
+    riskLevel: "待完善",
+    metricValue: "8",
+    metricUnit: "待完善",
+    timeText: "待完善待完善待完善",
+};
 /** 当前作物名 → 品类图标 */
 const CROP_ICON_MAP = {
     水稻: require("@/assets/img/type_icon/水稻.png"),
@@ -167,12 +180,18 @@ const CROP_ICON_MAP = {
     荔枝: require("@/assets/img/type_icon/荔枝.png"),
 };
 
-/** 底部 tabBar 高度（含小程序安全区），优先读 DOM / store */
+/** 面板 bottom：取 tabBar 顶边距视口底的距离，避免 offsetHeight 偏差留缝 */
 const resolveTabBarHeight = () => {
-    const fromDom = document.querySelector(".van-tabbar")?.offsetHeight;
+    const el = document.querySelector(".van-tabbar");
+    if (el) {
+        const rect = el.getBoundingClientRect();
+        if (rect.height > 0) {
+            return Math.max(0, Math.round(window.innerHeight - rect.top));
+        }
+    }
     const fromStore = Number(store.state.home.tabBarHeight) || 0;
     const fromStorage = Number(localStorage.getItem("tabBarHeight")) || 0;
-    return fromDom || fromStore || fromStorage || 50;
+    return fromStore || fromStorage || 50;
 };
 
 const tabBarHeight = ref(resolveTabBarHeight());
@@ -249,7 +268,7 @@ const dismissGuide = () => {
 };
 
 const tryShowGuide = () => {
-    if (!hasFarm.value) return;
+    // if (!hasFarm.value) return;
     if (localStorage.getItem(GUIDE_STORAGE_KEY)) return;
     guideVisible.value = true;
 };
@@ -288,8 +307,8 @@ const handleSelectCrop = (index) => {
     fetchAlertCards();
 };
 
-const PANEL_HEADER_BAR = 14; // van-floating-panel 原生 header 高度
-const PANEL_BOTTOM_GAP = 12;
+/** header 已 display:none，不再计入；留少量 buffer 避免 overflow 出滚动条 */
+const PANEL_HEIGHT_BUFFER = 8;
 /** 收起态：仅作物头，高度不含 tabBar（tabBar 用 bottom 顶开） */
 const COLLAPSED_CONTENT_HEIGHT = 72;
 
@@ -317,7 +336,7 @@ const syncMidAnchor = () => {
 
     // scrollHeight 才是内容真实高度；offsetHeight 在被裁切时会偏小
     const contentH = shell.scrollHeight;
-    const idealMid = Math.round(contentH + PANEL_HEADER_BAR + PANEL_BOTTOM_GAP);
+    const idealMid = Math.round(contentH + PANEL_HEIGHT_BUFFER);
     // 留一点顶部空间，并扣掉底部 tabBar
     const maxMid = Math.round(window.innerHeight - tabBarHeight.value) - 48;
     const nextMid = Math.max(collapsed + 80, Math.min(idealMid, maxMid));
@@ -357,19 +376,27 @@ const alertCards = ref([
     {
         id: CARD_ID.WARNING,
         source: "warning",
+        category: "气象预警",
         title: "",
         icon: weatherIcon,
         content: "",
-        patrolTip: "",
+        riskLevel: PLACEHOLDER.riskLevel,
+        metricValue: PLACEHOLDER.metricValue,
+        metricUnit: PLACEHOLDER.metricUnit,
+        timeText: PLACEHOLDER.timeText,
     },
     {
         id: CARD_ID.STRESS,
         source: "stress",
         type: "abnormal",
+        category: "未来胁迫",
         title: "",
-        icon: weatherIcon,
+        icon: stressIcon,
         content: "",
-        patrolTip: "异常态势巡园要点",
+        riskLevel: PLACEHOLDER.riskLevel,
+        metricValue: PLACEHOLDER.metricValue,
+        metricUnit: PLACEHOLDER.metricUnit,
+        timeText: PLACEHOLDER.timeText,
     },
 ]);
 
@@ -609,16 +636,6 @@ const handleViewDetail = (item) => {
     });
 };
 
-const handlePatrolTip = (item) => {
-    const isAbnormal = item?.type === "abnormal";
-    router.push({
-        path: isAbnormal ? "/abnormal_track" : "/growth_track",
-        query: {
-            id: item.id,
-        },
-    });
-};
-
 const handleHeightChange = ({ height: nextHeight }) => {
     isBackground.value = nextHeight < anchors.value[1];
     emitPanelHeight(nextHeight);
@@ -676,12 +693,20 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
 }
 
 .floating-panel {
-    background: transparent;
+    // 展开态同色铺底，避免与 tabBar 之间透出地图缝
+    background: #141416;
+    border-radius: 14px 14px 0 0;
+    --van-floating-panel-header-height: 0px;
+
+    &.background-panel {
+        background: transparent;
+    }
 
     ::v-deep {
         .van-floating-panel__header {
             background: transparent;
-            height: 16px;
+            display: none;
+            height: 0;
         }
 
         .van-floating-panel__header-bar {
@@ -693,13 +718,12 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
 
         .van-floating-panel__content {
             background: transparent;
-
             overflow-y: auto;
         }
     }
 
     .floating-panel-content {
-        width: calc(100% - 20px);
+        width: 100%;
         margin: 0 auto;
         // margin: 14px auto 0; // 补偿隐藏 header 的 10px，原本30px，整体下移
         box-sizing: border-box;
@@ -707,17 +731,19 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
 
     .panel-shell {
         padding: 12px;
-        border-radius: 16px;
-        background: linear-gradient(180deg, #b2dbfb 0%, #cbe8ff 100%);
+        border-radius: 14px 14px 0 0;
+        background: #141416;
         box-sizing: border-box;
     }
 
     .crop-header {
+        height: 42px;
+        box-sizing: border-box;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
     }
 
     .crop-info {
@@ -734,9 +760,13 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
     .crop-name {
         font-size: 18px;
         font-weight: 500;
-        color: #000000;
+        color: #FFFFFF;
         line-height: 26px;
     }
+    .crop-subtitle {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 12px;
+    }
 
     .crop-badge {
         flex-shrink: 0;
@@ -763,7 +793,8 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
         width: 216px;
         padding: 6px 10px;
         border-radius: 6px;
-        background: rgba(0, 0, 0, 0.8);
+        background: rgba(73, 73, 73, 0.8);
+        backdrop-filter: blur(4px);
         box-sizing: border-box;
         z-index: 20;
         pointer-events: auto;
@@ -776,20 +807,20 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
             height: 0;
             border-left: 6px solid transparent;
             border-right: 6px solid transparent;
-            border-bottom: 6px solid rgba(0, 0, 0, 0.8);
+            border-bottom: 6px solid rgba(73, 73, 73, 0.8);
         }
 
         &__content {
             font-size: 14px;
             line-height: 22px;
-            color: #fff;
+            color: rgba(255, 255, 255, 0.9);
             word-break: break-all;
             text-align: justify;
         }
 
         &__crop {
             padding: 0 2px;
-            color: #2199f8;
+            color: #FFD489;
         }
     }
 
@@ -801,19 +832,18 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
         height: 28px;
         padding: 0 10px;
         border-radius: 14px;
-        border: 1px solid #2199f8;
-        background: #fff;
-        color: #2199f8;
+        background: rgba(255, 255, 255, 0.05);
+        color: #fff;
         font-size: 12px;
 
-        &.is-open {
-            border-color: #2199f8;
-            box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.15);
-        }
+        // &.is-open {
+        //     border-color: #2199f8;
+        //     box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.15);
+        // }
 
         &__icon {
             font-size: 14px;
-            color: #2199f8;
+            color: #fff;
             transition: transform 0.3s ease;
         }
         .is-open-icon {
@@ -823,100 +853,163 @@ defineExpose({ refreshAlerts: fetchAlertCards, refreshZones: fetchZones, reloadF
 
     .alert-list {
         display: flex;
-        flex-direction: column;
-        gap: 10px;
+        flex-direction: row;
+        gap: 12px;
+        padding-top: 8px;
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
         :deep(.el-loading-spinner) {
             top: 38%;
         }
     }
 
     .alert-generating {
-        min-height: 120px;
+        flex: 1;
+        min-height: 140px;
         padding: 14px 12px;
         border-radius: 12px;
-        background: #fff;
+        background: #1c1c1e;
         box-sizing: border-box;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 14px;
-        color: #86909c;
+        color: rgba(255, 255, 255, 0.5);
         text-align: center;
     }
 
     .alert-card {
-        padding: 12px;
+        flex: 1;
+        min-width: 0;
+        padding: 10px 10px 8px;
         border-radius: 12px;
-        background: #fff;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: #1c1c1e;
         box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
 
         &__header {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            gap: 8px;
+            gap: 4px;
         }
 
-        &__title-wrap {
+        &__category {
             display: flex;
-            align-items: flex-end;
-            gap: 6px;
+            align-items: center;
+            gap: 4px;
             min-width: 0;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
         }
 
         &__icon {
-            width: 17px;
-            height: 17px;
+            width: 12px;
             flex-shrink: 0;
+            object-fit: contain;
         }
 
-        &__title {
-            font-size: 14px;
-            font-weight: 500;
-            color: #000000;
+        &__level {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            flex-shrink: 0;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
         }
 
-        &__link {
+        &__level-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #FF9F5A;
             flex-shrink: 0;
-            font-size: 12px;
-            color: #2199f8;
         }
 
-        &__content-wrap {
-            margin-top: 8px;
+        &__name {
+            margin-top: 6px;
+            font-size: 16px;
+            line-height: 24px;
+            color: #fff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
-        &__content {
-            font-size: 14px;
-            line-height: 21px;
-            color: rgba(6, 6, 6, 0.5);
-            word-break: break-all;
+        &__metric {
+            margin-top: 6px;
+            display: flex;
+            align-items: baseline;
+            gap: 4px;
+            min-width: 0;
+        }
+
+        &__metric-num {
+            font-size: 28px;
+            font-weight: 700;
+            line-height: 34px;
+            color: #fff;
+            flex-shrink: 0;
+        }
+
+        &__metric-unit {
+            font-size: 12px;
+            line-height: 16px;
+            color: rgba(255, 255, 255, 0.45);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
-        &__patrol {
-            padding-left: 6px;
-            display: inline-flex;
+        &__advice {
+            margin-top: 4px;
+            font-size: 12px;
+            line-height: 18px;
+            color: rgba(255, 255, 255, 0.45);
+            // overflow: hidden;
+            // text-overflow: ellipsis;
+            // white-space: nowrap;
+        }
+
+        &__footer {
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            display: flex;
             align-items: center;
-            gap: 4px;
-            font-size: 14px;
-            color: #2199f8;
-            text-decoration: underline;
-            text-underline-offset: 4px;
+            justify-content: space-between;
+            gap: 6px;
         }
 
-        &__patrol-icon {
-            font-size: 16px;
+        &__time {
+            min-width: 0;
+            font-size: 11px;
+            line-height: 16px;
+            color: rgba(255, 255, 255, 0.4);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__link {
+            flex-shrink: 0;
+            font-size: 11px;
+            line-height: 16px;
+            color: rgba(255, 255, 255, 0.45);
         }
     }
 
     &.background-panel {
 
         .panel-shell {
-            padding: 6px 10px 10px 10px;
-            background: url("@/assets/img/report/type-bg.png");
-            background-size: calc(100vw - 20px) 40px;
-            background-repeat: no-repeat;
-            background-position: center top;
+            // padding: 6px 10px 10px 10px;
+            // background: url("@/assets/img/report/type-bg.png");
+            // background-size: calc(100vw - 20px) 40px;
+            // background-repeat: no-repeat;
+            // background-position: center top;
+            height: 66px;
+            border-radius: 14px;
             .crop-header {
                 // padding-bottom: 60px;
             }

src/views/old_mini/growth_report/growthReportMap.js

@@ -36,7 +36,7 @@ class IndexMap {
         return new Style({
           image: new Icon({
             src: require("@/assets/img/home/garden-point.png"),
-            scale: 0.4,
+            scale: 0.5,
           }),
         });
       },

src/views/old_mini/growth_report/index.vue

@@ -65,11 +65,14 @@
             </div>
         </div>
 
-        <div v-if="activeLegendUrl" class="map-legend map-legend--image" :style="{ bottom: `${inviteBottom}px` }">
+        <div v-if="activeLegendUrl" class="map-legend map-legend--image" :style="{ bottom: `${inviteBottom + 10}px` }">
             <img class="map-legend__img" :src="activeLegendUrl" alt="" />
         </div>
 
-        <div class="invite-group" :style="{ bottom: `${inviteBottom}px` }">
+        <div class="invite-group">
+            <div class="invite-btn">
+                <img class="current-icon" src="@/assets/img/home/current.png" alt="">
+            </div>
             <div class="invite-btn" @click="handleInvite('service')">
                 <img class="invite-icon" src="@/assets/img/home/user-icon.png" alt="">
                 邀请农服
@@ -875,7 +878,7 @@ onActivated(() => {
 .growth-report-page {
     width: 100%;
     height: 100%;
-    background: #f5f7fb;
+    background: #0A0A0A;
     box-sizing: border-box;
 
     .interact-float {
@@ -1025,23 +1028,23 @@ onActivated(() => {
 
         &__action {
             flex-shrink: 0;
-            color: #2199f8;
+            color: #FFD489;
         }
     }
 
     .side-menu {
         position: fixed;
-        top: 58px;
+        top: 52px;
         z-index: 15;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 12px;
-        padding: 10px 6px;
-        border-radius: 6px;
-        background: #fff;
-        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+        padding: 4px;
+        border-radius: 10px;
+        background: rgba(20, 20, 22, 0.8);
         box-sizing: border-box;
+        border: 1px solid rgba(255, 255, 255, 0.12);
 
         &--left {
             left: 10px;
@@ -1052,25 +1055,27 @@ onActivated(() => {
             flex-direction: column;
             align-items: center;
             gap: 4px;
-            width: 26px;
-            color: #8a8a8a;
+            width: 45px;
+            color: #C1C1C1;
+            padding: 5px 10px;
+            box-sizing: border-box;
             cursor: pointer;
 
             &.active {
-                color: #2199f8;
+                color: #FFD489;
+                background: #2C2C2C;
+                border-radius: 6px;
 
                 .side-menu__icon {
                     opacity: 1;
-                    filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(1805%) hue-rotate(178deg) brightness(98%) contrast(97%);
+                    // filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(1805%) hue-rotate(178deg) brightness(98%) contrast(97%);
                 }
             }
         }
 
         &__icon {
-            width: 16px;
-            height: 16px;
+            width: 21px;
             object-fit: contain;
-            opacity: 0.55;
             filter: grayscale(1);
         }
 
@@ -1087,29 +1092,32 @@ onActivated(() => {
 
     .invite-group {
         position: fixed;
+        top: 52px;
         right: 16px;
         z-index: 20;
         pointer-events: none;
-        transition: bottom 0.2s ease;
 
         .invite-btn {
             pointer-events: auto;
-            height: 32px;
+            height: 48px;
+            width: 48px;
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 5px;
-            background: #fff;
-            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
-            gap: 4px;
-            padding: 0 8px;
-            color: #2199F8;
-            font-weight: 500;
-            font-size: 12px;
+            flex-direction: column;
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: rgba(20, 20, 22, 0.8);
+            gap: 6px;
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 10px;
 
             .invite-icon {
                 width: 16px;
             }
+            .current-icon {
+                width: 20px;
+            }
         }
 
         .invite-btn+.invite-btn {
@@ -1120,7 +1128,7 @@ onActivated(() => {
 
     .map-legend {
         position: fixed;
-        left: 10px;
+        right: 10px;
         z-index: 20;
         pointer-events: none;
         // transition: bottom 0.2s ease;