src/components/weatherInfo.vue

@@ -2,11 +2,7 @@
     <div class="weather-info" :class="{ expanded: isExpanded, 'is-garden': isGarden ,'bg-white': isWhite}">
         <div class="header flex-center">
             <div class="header-left">
-                <div class="address flex-center" v-if="!isGarden">
-                    <el-icon class="address-icon"><Location /></el-icon>
-                    <span class="address-text">{{ locationName || '--' }}</span>
-                </div>
-                <div class="address-select flex-center" v-else>
+                <div class="address-select flex-center" v-if="isGarden">
                     <el-dropdown class="select-garden" trigger="click" popper-class="select-garden-popper">
                         <div class="el-dropdown-link flex-center">
                             <span class="ellipsis-l1">{{ farmName }}</span>
@@ -32,8 +28,9 @@
                 <div class="temperature flex-center">
                     <div class="temperature-number">{{ currentWeather.temp || '--' }}</div>
                     <div class="temperature-text">
-                        <span>{{ currentWeather.text || '--' }}</span>
+                        <span>{{ locationName || '--' }}</span>
                         <div class="temperature-text-time">
+                            <span>{{ currentWeather.text }}-</span>
                             <span>{{ currentDateText }}</span>
                             <span v-show="!isExpanded" class="temperature-text-more" @click="toggleExpand">
                                 展开更多天气
@@ -294,19 +291,17 @@ const currentDateText = computed(() => {
     const now = new Date();
     const month = String(now.getMonth() + 1).padStart(2, '0');
     const day = String(now.getDate()).padStart(2, '0');
-    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-    const weekDay = weekDays[now.getDay()];
-    return `${month}/${day} ${weekDay}`;
+    return `${month}/${day}`;
 });
 </script>
 
 <style lang="scss" scoped>
 .weather-info {
     width: 100%;
-    height: 89px;
+    height: 58px;
     border-radius: 14px;
-    background-image: linear-gradient(90deg, #e2f1fe 0%, #ffffff 80%);
-    padding: 10px;
+    background-color: #ffffff;
+    padding: 0 12px;
     box-sizing: border-box;
     transition: height 0.3s ease-in-out;
     overflow: hidden;
@@ -369,17 +364,7 @@ const currentDateText = computed(() => {
                     border-radius: 25px;
                 }
             }
-            .address-icon {
-                margin-right: 4px;
-                font-size: 16px;
-            }
-            .address-text {
-                font-size: 16px;
-                font-weight: 500;
-                color: #000000;
-            }
             .temperature {
-                margin-top: 8px;
                 .temperature-number {
                     font-size: 40px;
                     position: relative;
@@ -414,7 +399,7 @@ const currentDateText = computed(() => {
         }
         .weather-icon {
             i {
-                font-size: 50px;
+                font-size: 47px;
                 color: #a7cffb;
             }
         }

src/views/old_mini/home/components/AgriculturalDynamics.vue

@@ -1,52 +1,57 @@
 <template>
     <div class="agricultural-dynamics">
-        <!-- 标题 -->
-        <div class="title">农情动态</div>
-
-        <!-- 标签页导航 -->
-        <div class="tab-nav">
-            <div
-                v-for="tab in tabs"
-                :key="tab.value"
-                class="tab-item"
-                :class="{ active: activeTab === tab.value }"
-                @click="handleTabClick(tab.value)"
-            >
-                {{ tab.label }}
+        <!-- 任务列表 -->
+        <div class="task-list">
+            <div v-for="(task, index) in taskList" :key="index" class="task-item">
+                <div class="task-content">
+                    <div class="task-header">
+                        <div class="task-status-tag">待完成</div>
+                        <div class="task-title">{{ task.title }}</div>
+                    </div>
+                    <div class="task-time">执行时间 {{ task.executionTime }}</div>
+                </div>
+                <div class="task-action">上传照片</div>
             </div>
         </div>
 
+        <div class="title">农情互动</div>
         <!-- 内容区域 -->
-        <div class="content-area">
-            <!-- 气象预警内容/农事预警内容 -->
-            <div v-if="activeTab !== 4" class="content-list">
-                <div v-for="(item, index) in warningList" :key="index" class="content-item" @click="handleItem(item)">
-                    <div class="item-image">
-                        <img :src="item.media[0]" />
-                    </div>
-                    <div class="item-content">
-                        <div class="item-text van-multi-ellipsis--l2">{{ item.title }}</div>
-                        <div class="item-date">{{ item.createTime && item.createTime.slice(0, 10)  }}</div>
+        <div class="agricultural-list">
+            <div class="agricultural-item">
+                <!-- 头部区域 -->
+                <div class="header-section">
+                    <div class="header-left">
+                        <div class="farm-name">水稻园</div>
+                        <div class="tag-group">
+                            <div class="tag tag-blue">桂味</div>
+                            <div class="tag tag-orange">托管客户</div>
+                        </div>
                     </div>
+                    <div class="remind-btn" @click="handleRemind">提醒客户</div>
+                </div>
+                <!-- 警告通知块 -->
+                <div class="warning-block">
+                    当前处于<span class="highlight">梢期</span>,可能会有<span class="highlight">蒂蛀虫</span
+                    >风险,预计<span class="highlight">5天</span>后进入物候期
                 </div>
-            </div>
 
-            <!-- 专家问答内容 -->
-            <div v-else class="content-list expert-qa">
-                <div v-for="(item, index) in expertQAList" :key="index" class="qa-item" @click="handleItem(item)">
-                    <div class="question-header">
-                        <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="" />
-                        <div class="question-title">{{ item.title }}</div>
-                    </div>
-                    <div class="expert-info">
-                        <el-avatar class="expert-avatar" :size="16" :src="item.icon" />
-                        <div class="expert-details">
-                            <span class="expert-name">{{ item.name }}</span>
-                            <span class="expert-title">{{ item.belongEnterprise }}</span>
-                            <span class="qa-date">{{ item.createTime && item.createTime.slice(0, 10) }}</span>
+                <div class="timeline">
+                    <div class="timeline-item" v-for="item in timelineList" :key="item.id">
+                        <div class="timeline-left">
+                            <div class="dot"></div>
+                            <div class="line"></div>
+                        </div>
+                        <div class="timeline-right">
+                            <div class="date">
+                                预计{{ item.date }}天后触发<span class="work-name">{{ item.workName }}</span>
+                            </div>
+                            <div class="text">
+                                预计报价<span class="price">{{ item.price }}元</span>
+                                <span class="action-detail">查看报价单</span>
+                            </div>
                         </div>
+                        <div class="timeline-action" @click="handleTimelineAction(item)">转入农事任务</div>
                     </div>
-                    <div class="answer-content" v-html="item.content"></div>
                 </div>
             </div>
         </div>
@@ -55,16 +60,6 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-const activeTab = ref(2);
-
-const tabs = [
-    { label: "气象预警", value: 2 },
-    { label: "农事预警", value: 3 },
-    { label: "专家问答", value: 4 },
-];
 
 // 气象/农事预警数据
 const warningList = ref([]);
@@ -72,40 +67,52 @@ const warningList = ref([]);
 // 专家问答数据
 const expertQAList = ref([]);
 
-const handleTabClick = (value) => {
-    activeTab.value = value;
-    getWarningList();
+// 任务列表数据
+const taskList = ref([
+    { id: 1, title: "梢期杀虫", executionTime: "2025.05.06", status: "pending" },
+    { id: 2, title: "梢期杀虫", executionTime: "2025.05.06", status: "pending" },
+]);
+
+const timelineList = ref([
+    {
+        date: "3",
+        workName: "梢期杀虫",
+        price: "1258",
+    },
+    // {
+    //     date: "5",
+    //     workName: "梢期营养",
+    //     price: "1758",
+    // },
+]);
+
+const handleTimelineAction = (item) => {
+    // 处理转入农事任务逻辑
+    console.log("转入农事任务", item);
 };
 
-const handleItem = (item) => {
-    if (activeTab.value === 4) {
-        router.push("/expert_detail?id=" + item.id);
-    } else {
-        let showImage = false;
-        if(activeTab.value === 2){
-            showImage = true;
-        }
-        router.push("/warning_detail?id=" + item.id + "&showImage=" + showImage);
-    }
+const handleRemind = () => {
+    // 处理提醒客户逻辑
+    console.log("提醒客户");
 };
 
 onMounted(() => {
-    getWarningList();
+    // getWarningList();
 });
 
 const getWarningList = () => {
     const params = {
         page: 1,
         limit: 10,
-        topicId: activeTab.value,
+        topicId: 2,
     };
-    VE_API.home.warningPageList(params).then((res) => {
-        if(activeTab.value === 4){
-            expertQAList.value = res.data || [];
-        }else{
-            warningList.value = res.data || [];
-        }
-    });
+    // VE_API.home.warningPageList(params).then((res) => {
+    //     if (activeTab.value === 4) {
+    //         expertQAList.value = res.data || [];
+    //     } else {
+    //         warningList.value = res.data || [];
+    //     }
+    // });
 };
 </script>
 
@@ -113,119 +120,208 @@ const getWarningList = () => {
 .agricultural-dynamics {
     padding: 0 10px;
 
-    .title {
-        font-size: 16px;
-        font-weight: bold;
-        color: #1d2129;
-        margin-bottom: 16px;
-    }
+    // 任务列表样式
+    .task-list {
+        .task-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: #ffffff;
+            border-radius: 8px;
+            padding: 12px;
+            margin-top: 10px;
+            position: relative;
+            overflow: hidden;
+            &::after {
+                content: "";
+                position: absolute;
+                top: -10px;
+                right: 0;
+                width: 72px;
+                height: 72px;
+                background: url("@/assets/img/home/task-icon.png") no-repeat center center / 100% 100%;
+            }
+
+            .task-content {
+                .task-header {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 4px;
+                    gap: 8px;
+                }
+
+                .task-status-tag {
+                    background-color: rgba(33, 153, 248, 0.1);
+                    color: #2199f8;
+                    font-size: 12px;
+                    padding: 1px 6px;
+                    border-radius: 2px;
+                }
+
+                .task-title {
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #1d2129;
+                }
 
-    .tab-nav {
-        display: flex;
-        margin-bottom: 16px;
+                .task-time {
+                    font-size: 12px;
+                    color: rgba(78, 89, 105, 0.5);
+                }
+            }
 
-        .tab-item {
-            margin-right: 20px;
-            padding-bottom: 6px;
-            &.active {
+            .task-action {
+                background-color: rgba(33, 153, 248, 0.1);
                 color: #2199f8;
-                border-bottom: 2px solid #2199f8;
+                border-radius: 25px;
+                padding: 7px 14px;
+                font-size: 12px;
             }
         }
     }
 
-    .content-area {
-        .content-list {
-            .content-item {
+    .title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #1d2129;
+        margin-top: 10px;
+    }
+
+    .agricultural-list {
+        .agricultural-item {
+            background-color: #ffffff;
+            border-radius: 8px;
+            padding: 8px 12px;
+            margin-top: 8px;
+
+            // 头部区域样式
+            .header-section {
                 display: flex;
                 align-items: center;
-                overflow-x: hidden;
-                .item-image {
-                    width: 114px;
-                    height: 74px;
-                    margin-right: 12px;
-                    flex-shrink: 0;
-
-                    img {
-                        width: 100%;
-                        height: 100%;
-                        object-fit: cover;
-                        border-radius: 8px;
-                    }
-                }
+                justify-content: space-between;
+                padding-bottom: 5px;
+                border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
 
-                .item-content {
-                    flex: 1;
+                .header-left {
                     display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    height: 68px;
-                    max-width: calc(100% - 130px);
-
-                    .item-text {
+                    align-items: center;
+                    gap: 8px;
+                    .farm-name {
+                        font-size: 16px;
+                        font-weight: 500;
                         color: #1d2129;
-                        ::v-deep {
-                            p{
-                                margin: 0;
+                    }
+
+                    .tag-group {
+                        display: flex;
+                        gap: 4px;
+                        .tag {
+                            padding: 2px 8px;
+                            border-radius: 2px;
+                            font-size: 12px;
+
+                            &.tag-blue {
+                                background-color: #e8f3ff;
+                                color: #2199f8;
+                            }
+
+                            &.tag-orange {
+                                background-color: rgba(255, 149, 61, 0.1);
+                                color: #ff953d;
                             }
                         }
                     }
+                }
 
-                    .item-date {
-                        color: #86909c;
-                        font-size: 13px;
-                    }
+                .remind-btn {
+                    background-color: #2199f8;
+                    color: #ffffff;
+                    border-radius: 25px;
+                    padding: 7px 12px;
+                    font-size: 12px;
                 }
             }
-            .content-item + .content-item {
-                margin-top: 12px;
-            }
-
-            // 专家问答样式
-            &.expert-qa {
-                .qa-item {
-                    padding: 0 12px;
 
-                    .question-header {
-                        display: flex;
-                        align-items: center;
-                        margin-bottom: 6px;
-                        gap: 8px;
+            // 警告通知块样式
+            .warning-block {
+                background-color: rgba(33, 153, 248, 0.1);
+                border-radius: 5px;
+                padding: 5px;
+                margin: 8px 0;
+                font-size: 12px;
+                color: #252525;
 
-                        .question-icon {
-                            width: 20px;
-                            height: 20px;
-                        }
+                .highlight {
+                    color: #2199f8;
+                    font-weight: 500;
+                }
+            }
 
-                        .question-title {
-                            font-size: 16px;
-                            font-weight: 600;
-                        }
+            .timeline {
+                margin-left: -5px;
+                .timeline-item {
+                    display: flex;
+                    align-items: flex-start;
+                    font-size: 14px;
+                    color: #ffffff;
+                    line-height: 22px;
+                    & + .timeline-item {
+                        margin-top: 10px;
                     }
-
-                    .expert-info {
+                    .timeline-left {
+                        width: 22px;
                         display: flex;
+                        flex-direction: column;
                         align-items: center;
-                        gap: 6px;
-                        margin-bottom: 8px;
-                        .expert-details {
-                            display: flex;
-                            align-items: center;
-                            gap: 6px;
-                            font-size: 13px;
-                            color: #666666;
+                        .dot {
+                            width: 6px;
+                            height: 6px;
+                            border-radius: 50%;
+                            background: #a2d5fd;
+                            margin-top: 6px;
+                        }
+                        .line {
+                            border-left: 1px dashed #a2d5fd;
+                            margin-top: 4px;
+                            height: 28px;
                         }
                     }
-
-                    .answer-content {
-                        color: #333333;
-                        .font-bold {
+                    .timeline-right {
+                        padding-left: 5px;
+                        flex: 1;
+                        .date {
+                            color: #1d2129;
                             font-weight: 500;
+                            font-size: 14px;
+                            line-height: 22px;
+                        }
+                        .text {
+                            font-size: 12px;
+                            color: #d7d7d7;
+                            .price {
+                                padding-left: 4px;
+                            }
+                            .action-detail {
+                                margin-left: 6px;
+                                color: #2199f8;
+                                border-bottom: 1px solid;
+                            }
+                        }
+                        .work-name {
+                            padding-left: 4px;
                         }
                     }
-                }
-                .qa-item + .qa-item {
-                    margin-top: 16px;
+                    .timeline-action {
+                        align-self: center;
+                        height: 28px;
+                        line-height: 28px;
+                        flex: none;
+                        background: rgba(33, 153, 248, 0.1);
+                        color: #2199f8;
+                        font-size: 12px;
+                        padding: 0px 11px;
+                        border-radius: 20px;
+                    }
                 }
             }
         }

src/views/old_mini/home/index copy.vue

@@ -1,139 +1,257 @@
 <template>
-    <custom-header v-if="isExpert" name="飞鸟管家"></custom-header>
-    <div class="home-index" :style="{ height: isExpert ? `calc(100vh - 40px)` : `calc(100vh - ${tabBarHeight}px - 50px)` }">
-        <!-- 地图 -->
-        <div class="map-container" ref="mapContainer"></div>
-        <!-- 新建按钮 -->
-        <div class="add-button" v-show="showAddButton && !isExpert" @click="toSubPage">
-            <el-icon class="add-button-icon"><CircleCloseFilled /></el-icon>
-            <span>创建我的农场</span>
+    <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
+        <div class="banner-wrap">
+            <img class="banner-img" @click="handleBannerClick" :src="bannerObj?.media?.[0]" alt="" />
+            <div class="banner-title">
+                <span class="van-multi-ellipsis--l2">{{ bannerObj?.title }}</span>
+            </div>
         </div>
         <!-- 天气遮罩 -->
-        <div class="weather-mask" v-show="isExpanded"></div>
+        <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
         <!-- 天气 -->
-        <weather-info class="weather-info" @weatherExpanded="weatherExpanded"></weather-info>
-        <!-- 操作按钮 -->
-        <div class="operation-button">
-            <div class="button-group">
-                <div class="button-item" @click="toFarmInfo">
-                    <img class="button-icon" src="@/assets/img/tab_bar/home-active.png" alt="">
-                    <span>基本信息</span>
+        <weather-info
+            ref="weatherInfoRef"
+            class="weather-info"
+            @weatherExpanded="weatherExpanded"
+            :isGarden="false"
+            @changeGarden="changeGarden"
+        ></weather-info>
+        <div class="farm-monitor-container" :class="{ 'container-role': curRole == 2 }">
+            <div class="farm-monitor-left" @click="handleCardClick(monitorCards.left)">
+                <div class="title">
+                    <span>{{ monitorCards.left.title }}</span>
+                    <el-icon v-if="curRole == 2" class="icon"><ArrowRightBold /></el-icon>
                 </div>
-                <div class="button-item" @click="toFarmPhoto">
-                    <img class="button-icon" src="@/assets/img/home/photo-icon.png" alt="">
-                    <span>农场相册</span>
+                <div class="content">{{ monitorCards.left.content }}</div>
+                <div class="arrow" v-if="curRole != 2">
+                    <el-icon class="icon"><ArrowRightBold /></el-icon>
                 </div>
             </div>
-            <div class="add-farm-button" v-show="!isExpert">
-                <el-icon class="icon"><CircleCloseFilled /></el-icon>
-                <span>新增农场</span>
+            <div class="farm-monitor-right">
+                <div
+                    v-for="(item, index) in monitorCards.right"
+                    :key="index"
+                    class="right-item"
+                    :class="{ expert: index === 1 }"
+                    @click="handleCardClick(item)"
+                >
+                    <div class="title">
+                        <span>{{ item.title }}</span>
+                        <el-icon class="icon"><ArrowRightBold /></el-icon>
+                    </div>
+                    <div class="content">{{ item.content }}</div>
+                </div>
             </div>
         </div>
-        <!-- 浮动面板 -->
-        <home-floating-panel
-            :isExpert="isExpert"
-            class="home-floating-panel"
-            :style="{ zIndex: zIndex }"
-            @heightChange="heightChange"
-        ></home-floating-panel>
-        <!-- 问题提醒 -->
-        <problem-reminder></problem-reminder>
-        <!-- 农场信息 -->
-        <farm-info-popup ref="farmInfoRef"></farm-info-popup>
+        <AgriculturalDynamics />
     </div>
+    <!-- 创建农场弹窗 -->
+    <tip-popup
+        v-model:show="showFarmPopup"
+        :type="farmPopupType"
+        :text="farmPopupType === 'create' ? ['您当前还没有农场', '请先创建农场'] : '农场创建成功'"
+        @confirm="handleBtn"
+    />
+    <!-- 问题提醒 -->
+    <problem-reminder></problem-reminder>
 </template>
 
 <script setup>
-import IndexMap from "./map/index.js";
-import { onMounted, computed, ref } from "vue";
+import { ref, computed, onActivated } from "vue";
 import { useStore } from "vuex";
-import { useRouter,useRoute } from "vue-router";
-import customHeader from "@/components/customHeader.vue";
 import weatherInfo from "@/components/weatherInfo.vue";
-import homeFloatingPanel from "./components/homeFloatingPanel.vue";
+import AgriculturalDynamics from "./components/AgriculturalDynamics.vue";
+import { useRouter, useRoute } from "vue-router";
+import wx from "weixin-js-sdk";
 import problemReminder from "./components/problemReminder.vue";
-import farmInfoPopup from "./components/farmInfoPopup.vue";
-const router = useRouter();
-const route = useRoute();
+import { ElMessage } from "element-plus";
+import tipPopup from "@/components/popup/tipPopup.vue";
+
+const curRole = localStorage.getItem("SET_USER_CUR_ROLE");
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
-const farmInfoRef = ref(null);
-const indexMap = new IndexMap();
-const mapContainer = ref(null);
+const router = useRouter();
+const route = useRoute();
 
-const isExpert = ref(false);
-if (route.query.type) {
-    isExpert.value = true;
-}
-onMounted(() => {
-    const point = store.state.home.miniUserLocationPoint
-    indexMap.initMap(point, mapContainer.value);
+const showFarmPopup = ref(false);
+const farmPopupType = ref("create");
+
+const gardenId = ref(null);
+
+const isGarden = ref(false);
+const changeGarden = ({ id }) => {
+    gardenId.value = id;
+    getExpertByFarmId();
+};
+
+const expertInfo = ref({});
+const getExpertByFarmId = () => {
+    VE_API.home.getExpertByFarmId({ farmId: gardenId.value }).then(({ data }) => {
+        expertInfo.value = data || {};
+        sessionStorage.setItem("expertId", data.appUserId);
+    });
+};
+
+// 监测卡片数据
+const monitorCards = ref({
+    left: {
+        title: "农场监测",
+        content: "实时监测农场状态",
+        route: "/monitor",
+    },
+    right: [
+        {
+            title: "病虫识别",
+            content: "精准识别病虫",
+            route: "/pest",
+        },
+        {
+            title: "专家咨询",
+            content: "专家多年经验指导",
+            route: "/chat_frame",
+        },
+    ],
 });
 
-const isExpanded = ref(false);
-const weatherExpanded = (isExpandedValue) => {
-    isExpanded.value = isExpandedValue;
+// 卡片点击事件
+const handleCardClick = (card) => {
+    if (curRole == 0) {
+        if (!isGarden.value) {
+            showFarmPopup.value = true;
+            return;
+        }
+    }
+    if (card.route === "/pest") {
+        // ElMessage.warning("该功能正在升级中，敬请期待");
+        // if (curRole == 2) {
+        //     ElMessage.warning("该功能正在升级中，敬请期待");
+        // } else {
+            const dropdownGardenItem = ref({
+                organId: 766,
+                periodId: 1,
+                wktVal: "wktVal",
+                address: "address",
+                district: "district",
+                name: "荔博园",
+            });
+            wx.miniProgram.navigateTo({
+                url: `/pages/subPages/new_recognize/index?gardenData=${JSON.stringify(dropdownGardenItem.value)}`,
+            });
+        // }
+    } else {
+        if (card.route === "/chat_frame") {
+            router.push("/agri_services?active=1");
+            // router.push(`/chat_frame?userId=${expertInfo.value.appUserId}`);
+        } else {
+            router.push(card.route);
+        }
+    }
 };
 
-const zIndex = ref(1);
-const showAddButton = ref(true);
-const heightChange = (height) => {
-    zIndex.value = 1;
-    showAddButton.value = true;
-    if (height === 0) {
-        showAddButton.value = false;
-    } else if (height > 310 + tabBarHeight.value) {
-        zIndex.value = 3;
+const handleBtn = () => {
+    if (farmPopupType.value === "create") {
+        router.push("/create_farm?isReload=true&from=home");
     }
 };
 
-function toSubPage() {
-    router.push("/create_farm?isFromHome=true");
-}
+onActivated(() => {
+    getBannerList();
+    isGarden.value = Boolean(localStorage.getItem("isGarden"));
+    // 检测是否从创建农场页面成功返回
+    if (route.query.showSuccess === "true") {
+        farmPopupType.value = "success";
+        showFarmPopup.value = true;
+
+        // 清除URL参数，避免刷新页面时再次显示弹窗
+        router.replace({
+            path: "/home",
+            query: { reload: route.query.reload },
+        });
+    }
+    if (curRole == 2) {
+        monitorCards.value.left = {
+            title: "新增客户",
+            content: "实时监测农场状态",
+            route: "/create_farm?type=client&isReload=true&from=home",
+        };
+        monitorCards.value.right = [
+            {
+                title: "病虫识别",
+                content: "精准识别病虫",
+                route: "/pest",
+            },
+        ];
+    }
+});
 
-function toFarmPhoto() {
-    router.push({
-        path: "/farm_photo",
+const bannerObj = ref({});
+const getBannerList = () => {
+    const params = {
+        page: 1,
+        limit: 1,
+        topicId: 5,
+    };
+    VE_API.home.warningPageList(params).then(({ data }) => {
+        bannerObj.value = data[0] || {};
     });
-}
+};
 
-function toFarmInfo() {
-    farmInfoRef.value.handleShow();
-}
+const isExpanded = ref(false);
+const weatherInfoRef = ref(null);
+const weatherExpanded = (isExpandedValue) => {
+    isExpanded.value = isExpandedValue;
+};
+
+// 点击遮罩时收起天气
+const handleMaskClick = () => {
+    if (weatherInfoRef.value && weatherInfoRef.value.toggleExpand) {
+        weatherInfoRef.value.toggleExpand();
+    }
+};
+
+const handleBannerClick = () => {
+    router.push(`/warning_detail?id=${bannerObj.value.id}`);
+};
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .home-index {
-    position: relative;
     width: 100%;
-    height: 100%;
-    overflow: hidden;
-    .map-container {
+    height: 100vh;
+    overflow: auto;
+    position: relative;
+    .banner-wrap {
         width: 100%;
-        height: 100%;
-    }
-    .add-button {
-        position: absolute;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        background-image: linear-gradient(180deg, #70bffe 0%, #2199f8 100%);
-        border-radius: 25px;
-        padding: 12px 0;
-        width: 187px;
-        .add-button-icon {
-            font-size: 20px;
-            margin-right: 5px;
-            transform: rotate(45deg);
+        height: 200px;
+        position: relative;
+        z-index: 1;
+        .banner-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .banner-title {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 10px 12px 34px 12px;
+            box-sizing: border-box;
+            background: linear-gradient(
+                180deg,
+                rgba(102, 102, 102, 0) -64.3%,
+                rgba(0, 0, 0, 0.0074) -1.43%,
+                rgba(0, 0, 0, 0.684747) 39.67%,
+                rgba(0, 0, 0, 0.74) 40.09%,
+                rgba(0, 0, 0, 0.74) 83.2%
+            );
+            color: #fff;
+            font-weight: bold;
+            backdrop-filter: blur(2px);
         }
     }
     .weather-mask {
-        position: absolute;
+        position: fixed;
         top: 0;
         left: 0;
         width: 100%;
@@ -142,68 +260,86 @@ function toFarmInfo() {
         z-index: 2;
     }
     .weather-info {
+        width: calc(100% - 20px);
         position: absolute;
-        top: 12px;
-        left: 12px;
-        width: calc(100% - 24px);
-        z-index: 2;
+        top: calc(200px - 28px);
+        left: 10px;
+        z-index: 3;
     }
-    .operation-button{
-        position: absolute;
-        top: 117px;
-        left: 12px;
-        width: calc(100% - 24px);
-        z-index: 1;
+    .farm-monitor-container {
+        padding-top: 60px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        font-size: 12px;
-        font-weight: 500;
-        .button-group{
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .button-item{
+        gap: 7px;
+        margin: 10px;
+        height: 170px;
+        .farm-monitor-left,
+        .farm-monitor-right {
+            .title {
+                font-size: 16px;
+                color: #1d2129;
+                font-weight: 500;
+                .icon {
+                    font-size: 12px;
+                    margin-left: 2px;
+                }
+            }
+            .content {
+                margin-top: 6px;
+                font-size: 12px;
+                color: rgba(29, 33, 41, 0.5);
+                line-height: 1.5;
+            }
+            .arrow {
+                border-radius: 5px;
+                background: #fff;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                gap: 4px;
-                color: rgba(0, 0, 0, 0.8);
-                background-color: #fff;
-                .button-icon{
-                    width: 13px;
-                    height: 13px;
-                }
-            }
-            .button-item:first-child{
-                margin-right: 10px;
+                width: 34px;
+                height: 25px;
+                margin-top: 10px;
+                font-size: 11px;
             }
         }
-        .add-farm-button{
+        .farm-monitor-left {
+            flex: 1;
+            height: 100%;
+            padding: 25px 10px;
+            box-sizing: border-box;
+            background: url("@/assets/img/home/farm-bg-1.png") no-repeat center center / 100% 100%;
+        }
+        .farm-monitor-right {
+            flex: 1;
+            height: 100%;
             display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            background: rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.5);
-            color: #fff;
-            .icon{
-                font-size: 16px;
-                transform: rotate(45deg);
+            flex-direction: column;
+            gap: 7px;
+            .right-item {
+                padding: 10px;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                flex: 1;
+                background: url("@/assets/img/home/farm-bg-2.png") no-repeat center center / 100% 100%;
+            }
+            .expert {
+                background: url("@/assets/img/home/farm-bg-3.png") no-repeat center center / 100% 100%;
             }
         }
-        .button-item,
-        .add-farm-button{
-            border-radius: 25px;
-            padding: 8px 12px;
+
+        &.container-role {
+            height: 104px;
+            .farm-monitor-left {
+                background: url("@/assets/img/home/farm-bg-4.png") no-repeat center center / 100% 100%;
+            }
+            .farm-monitor-right {
+                .right-item {
+                    background: url("@/assets/img/home/farm-bg-5.png") no-repeat center center / 100% 100%;
+                }
+            }
         }
     }
-    .home-floating-panel {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        z-index: 1;
-    }
 }
 </style>

src/views/old_mini/home/index.vue

@@ -16,14 +16,14 @@
             :isGarden="false"
             @changeGarden="changeGarden"
         ></weather-info>
-        <div class="farm-monitor-container" :class="{ 'container-role': curRole == 2 }">
+        <div class="farm-monitor-container">
             <div class="farm-monitor-left" @click="handleCardClick(monitorCards.left)">
                 <div class="title">
                     <span>{{ monitorCards.left.title }}</span>
-                    <el-icon v-if="curRole == 2" class="icon"><ArrowRightBold /></el-icon>
+                    <el-icon class="icon"><ArrowRightBold /></el-icon>
                 </div>
                 <div class="content">{{ monitorCards.left.content }}</div>
-                <div class="arrow" v-if="curRole != 2">
+                <div class="arrow">
                     <el-icon class="icon"><ArrowRightBold /></el-icon>
                 </div>
             </div>
@@ -95,20 +95,20 @@ const getExpertByFarmId = () => {
 // 监测卡片数据
 const monitorCards = ref({
     left: {
-        title: "农场监测",
-        content: "实时监测农场状态",
+        title: "农情采集",
+        content: "精准监测  科学决策",
         route: "/monitor",
     },
     right: [
         {
             title: "病虫识别",
-            content: "精准识别病虫",
+            content: "智能识别  快速诊断",
             route: "/pest",
         },
         {
-            title: "专家咨询",
-            content: "专家多年经验指导",
-            route: "/chat_frame",
+            title: "新增客户",
+            content: "农情先知  高效管理",
+            route: "/create_farm?type=client&isReload=true&from=home",
         },
     ],
 });
@@ -168,20 +168,6 @@ onActivated(() => {
             query: { reload: route.query.reload },
         });
     }
-    if (curRole == 2) {
-        monitorCards.value.left = {
-            title: "新增客户",
-            content: "实时监测农场状态",
-            route: "/create_farm?type=client&isReload=true&from=home",
-        };
-        monitorCards.value.right = [
-            {
-                title: "病虫识别",
-                content: "精准识别病虫",
-                route: "/pest",
-            },
-        ];
-    }
 });
 
 const bannerObj = ref({});
@@ -220,6 +206,7 @@ const handleBannerClick = () => {
     height: 100vh;
     overflow: auto;
     position: relative;
+    background: linear-gradient(180deg, #f4f9fd 0%, #f9f9f9 100%);
     .banner-wrap {
         width: 100%;
         height: 200px;
@@ -267,12 +254,12 @@ const handleBannerClick = () => {
         z-index: 3;
     }
     .farm-monitor-container {
-        padding-top: 60px;
+        padding-top: 30px;
         display: flex;
         align-items: center;
-        gap: 7px;
         margin: 10px;
-        height: 170px;
+        gap: 6px;
+        height: 134px;
         .farm-monitor-left,
         .farm-monitor-right {
             .title {
@@ -305,18 +292,19 @@ const handleBannerClick = () => {
         .farm-monitor-left {
             flex: 1;
             height: 100%;
-            padding: 25px 10px;
+            margin-top: 2px;
+            padding: 25px 16px;
             box-sizing: border-box;
-            background: url("@/assets/img/home/farm-bg-1.png") no-repeat center center / 100% 100%;
+            max-width: 170px;
+            background: url("@/assets/img/home/farm-bg-1.png") no-repeat center center / 105% 106%;
         }
         .farm-monitor-right {
             flex: 1;
             height: 100%;
             display: flex;
             flex-direction: column;
-            gap: 7px;
             .right-item {
-                padding: 10px;
+                padding: 10px 12px;
                 box-sizing: border-box;
                 display: flex;
                 flex-direction: column;
@@ -328,18 +316,6 @@ const handleBannerClick = () => {
                 background: url("@/assets/img/home/farm-bg-3.png") no-repeat center center / 100% 100%;
             }
         }
-
-        &.container-role {
-            height: 104px;
-            .farm-monitor-left {
-                background: url("@/assets/img/home/farm-bg-4.png") no-repeat center center / 100% 100%;
-            }
-            .farm-monitor-right {
-                .right-item {
-                    background: url("@/assets/img/home/farm-bg-5.png") no-repeat center center / 100% 100%;
-                }
-            }
-        }
     }
 }
 </style>

src/views/old_mini/home/subPages/warningDetail.vue

@@ -17,16 +17,12 @@
                 <img :src="warningDetail?.media && warningDetail?.media[0]" alt="荔枝开花图片" />
             </div>
 
-            <div class="article-text">
-                <span v-html="warningDetail.content"></span>
-            </div>
-
-            <div class="article-footer">
-                <div class="footer-top">
+            <div class="article-box">
+                <div class="box-top">
                     <img class="icon" src="@/assets/img/home/ask-icon.png" alt="" />
                     <div class="title">在白点期，您当前农场是否出现白点？</div>
                 </div>
-                <div class="footer-bottom" :style="{ justifyContent: !isLink ? 'center' : 'flex-end' }">
+                <div class="box-bottom" :style="{ justifyContent: !isLink ? 'center' : 'flex-end' }">
                     <div class="edit-btn" v-if="!isLink">编辑问题</div>
                     <template v-else>
                         <div class="edit-btn">否，未出现</div>
@@ -35,6 +31,10 @@
                 </div>
             </div>
 
+            <div class="article-text">
+                <span v-html="warningDetail.content"></span>
+            </div>
+
             <div class="custom-bottom-fixed-btns" v-if="!isLink">
                 <div class="bottom-btn primary-btn" @click="handleForward">转发</div>
             </div>
@@ -49,7 +49,7 @@ import { useRoute } from "vue-router";
 
 const route = useRoute();
 
-const isLink = ref(false);
+const isLink = ref(true);
 
 const warningDetail = ref({});
 const showImage = ref(false);
@@ -131,12 +131,12 @@ const getWarningDetail = () => {
             }
         }
 
-        .article-footer {
-            margin-top: 12px;
+        .article-box {
+            margin-bottom: 12px;
             border-radius: 8px;
             border: 1px solid #2199f8;
             padding: 10px;
-            .footer-top {
+            .box-top {
                 display: flex;
                 align-items: center;
                 gap: 8px;
@@ -152,7 +152,7 @@ const getWarningDetail = () => {
                 }
             }
 
-            .footer-bottom {
+            .box-bottom {
                 display: flex;
                 justify-content: flex-end;
                 gap: 10px;
@@ -164,7 +164,7 @@ const getWarningDetail = () => {
                     border-radius: 25px;
                     font-size: 12px;
                     text-align: center;
-                    &.primary-btn{
+                    &.primary-btn {
                         background: #2199f8;
                         color: #fff;
                     }