feat：添加系统提醒弹窗

src/views/old_mini/farm_manage/components/systemReminder.vue

@@ -0,0 +1,134 @@
+<template>
+    <Popup v-model:show="show" class="system-reminder-popup">
+        <div class="system-reminder-title">
+            <img class="title-img" src="@/assets/img/home/bulb-icon.png" alt="" />
+            <span class="title-text">飞鸟系统提醒</span>
+        </div>
+        <div class="system-reminder-content">
+            <div class="content-text">
+                <span>从化荔博园</span> 8月8日有 <span>剪枝农事</span> 需求，快去联系看看吧！
+            </div>
+            <div class="content-box">
+                <div class="address">
+                    <span>位置:广东省广州市从化区</span>
+                    <div class="distance">距离2.0km</div>
+                </div>
+                <div class="map"></div>
+            </div>
+        </div>
+        <div class="bottom-buttons">
+            <div class="bottom-btn no-btn">查看详情</div>
+            <div class="bottom-btn yes-btn" @click="handleContact">立即联系</div>
+        </div>
+    </Popup>
+    <action-sheet
+        class="action-sheet"
+        style="bottom: 50px;padding-top: 10px;"
+        title=" "
+        closeable
+        v-model:show="contactShow"
+        :actions="actions"
+        @select="onSelect"
+    />
+</template>
+
+<script setup>
+import { Popup, ActionSheet } from "vant";
+import { ref } from "vue";
+const show = ref(true);
+const contactShow = ref(false);
+
+const handleContact = () => {
+    show.value = false;
+    contactShow.value = true;
+};
+
+const actions = [{ name: "在线联系" }, { name: "电话联系" }];
+const onSelect = (item) => {
+    contactShow.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.system-reminder-popup {
+    width: 100%;
+    border-radius: 12px;
+    padding: 16px 12px;
+    background-image: linear-gradient(180deg, #d1e7fd 0%, #ffffff 25%);
+    .system-reminder-title {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        border-radius: 5px 0 0 5px;
+        background: linear-gradient(90deg, #2199f8 0%, transparent 100%);
+
+        .title-img {
+            width: 22px;
+            height: 22px;
+            margin-right: 4px;
+        }
+        .title-text {
+            font-size: 20px;
+            color: #fff;
+            font-family: "PangMenZhengDao";
+        }
+    }
+    .system-reminder-content {
+        .content-text {
+            font-size: 16px;
+            color: #1d1e1f;
+            font-weight: 500;
+            margin: 5px 0 12px 0;
+            span {
+                color: #2199f8;
+            }
+        }
+        .content-box {
+            border: 1px solid #ececec;
+            border-radius: 8px;
+            padding: 10px 8px;
+            .address {
+                display: flex;
+                justify-content: space-between;
+                color: #1d1e1f;
+                font-weight: 500;
+                .distance {
+                    background: #f2f2f2;
+                    color: #999999;
+                    padding: 3px 10px;
+                    border-radius: 25px;
+                    font-weight: 400;
+                }
+            }
+            .map {
+                width: 100%;
+                height: 140px;
+                border-radius: 6px;
+                background: #f5f5f5;
+                margin-top: 12px;
+            }
+        }
+    }
+    .bottom-buttons {
+        display: flex;
+        gap: 12px;
+        margin-top: 10px;
+
+        .bottom-btn {
+            flex: 1;
+            padding: 8px 0;
+            border-radius: 25px;
+            font-size: 16px;
+            text-align: center;
+            background: #fff;
+            border: 1px solid #e5e5e5;
+
+            &.yes-btn {
+                background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
+                color: #fff;
+                border: none;
+            }
+        }
+    }
+}
+</style>

src/views/old_mini/farm_manage/index.vue

@@ -8,6 +8,7 @@
                 <demand-hall />
             </tab>
         </tabs>
+        <system-reminder />
     </div>
 </template>
 
@@ -16,7 +17,7 @@ import { ref } from "vue";
 import { Tab, Tabs } from "vant";
 import farmManage from "./components/farmManage.vue";
 import demandHall from "./components/demandHall.vue";
-
+import systemReminder from "./components/systemReminder.vue";
 const active = ref(0);
 </script>