feat：添加问题提醒弹窗

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

@@ -0,0 +1,182 @@
+<template>
+    <Popup v-model:show="show" class="problem-reminder-popup">
+        <div class="problem-reminder">
+            <!-- 标题区域 -->
+            <div class="problem-reminder-header">
+                <div class="title-section">
+                    <div class="main-title">填写以下问题</div>
+                    <div class="sub-title">为您定制农事提醒</div>
+                </div>
+                <img class="header-icon" src="@/assets/img/home/file-icon.png" alt="" />
+            </div>
+            <div class="question-section-wrapper">
+                <span class="question-text">在白点期,您当前农场是否出现白点?</span>
+                <div class="img"></div>
+                <div class="options-section">
+                    <span class="options-label">您可以选择</span>
+                    <div class="options-buttons">
+                        <div class="option-btn">拍照识别</div>
+                        <div class="option-btn">咨询专家</div>
+                    </div>
+                </div>
+            </div>
+            <!-- 底部按钮区域 -->
+            <div class="bottom-buttons">
+                <div class="bottom-btn no-btn" @click="noClick">否</div>
+                <div class="bottom-btn yes-btn" @click="yesClick">是</div>
+            </div>
+        </div>
+    </Popup>
+    <Popup v-model:show="noShow" class="no-popup">
+        <div class="no-popup-title">
+            <span>感谢您的配合</span>
+            <div class="no-popup-title-sub">飞鸟将会记录下您当前的农场情况</div>
+        </div>
+        <div class="no-popup-btn" @click="noShow = false">我知道了</div>
+    </Popup>
+</template>
+<script setup>
+import { Popup } from "vant";
+import { ref } from "vue";
+
+const show = ref(true);
+const noShow = ref(false);
+const noClick = () => {
+    show.value = false;
+    noShow.value = true;
+}
+const yesClick = () => {
+    console.log("yesClick");
+}
+</script>
+<style lang="scss" scoped>
+.problem-reminder-popup {
+    width: 100%;
+    border-radius: 14px;
+    padding: 20px 15px;
+    box-sizing: border-box;
+    background-image: linear-gradient(180deg, #d1e7fd 0%, #ffffff 25%);
+    .problem-reminder {
+        display: flex;
+        flex-direction: column;
+        // 标题区域样式
+        .problem-reminder-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 15px;
+
+            .title-section {
+                flex: 1;
+                font-size: 22px;
+                color: #1d1e1f;
+                line-height: 1.2;
+                div {
+                    font-family: "PangMenZhengDao";
+                }
+            }
+
+            .header-icon {
+                width: 88px;
+                height: 88px;
+                margin-top: -10px;
+                margin-right: -5px;
+            }
+        }
+        .question-section-wrapper {
+            border: 1px solid #ececec;
+            border-radius: 8px;
+            padding: 10px 8px;
+            margin-top: -10px;
+            background-color: #fff;
+            .question-text {
+                font-size: 16px;
+                color: #252525;
+                font-weight: 500;
+            }
+            .img{
+                margin: 12px 0;
+                width: 100%;
+                height: 140px;
+                border-radius: 6px;
+                background-color: green;
+            }
+            .options-section {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background-color: rgba(33, 153, 248, 0.1);
+                border-radius: 8px;
+                padding: 7px 8px;
+                font-weight: 500;
+                .options-label {
+                    font-size: 14px;
+                    color: #2199F8;
+                }
+            
+                .options-buttons {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 10px;
+                    .option-btn {
+                        padding: 5px 14px;
+                        border-radius: 20px;
+                        background: #fff;
+                        color: #252525;
+                        flex: 1;
+                    }
+                }
+            
+            }
+        }
+        // 底部按钮区域样式
+        .bottom-buttons {
+            display: flex;
+            gap: 12px;
+            margin-top: 10px;
+        
+            .bottom-btn {
+                flex: 1;
+                padding: 8px 0;
+                border-radius: 25px;
+                font-size: 16px;
+                font-weight: 500;
+                text-align: center;
+                background: #fff;
+                border: 1px solid #e5e5e5;
+        
+                &.yes-btn {
+                    background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
+                    color: #fff;
+                    border: none;
+                }
+            }
+        }
+    }
+}
+
+.no-popup {
+    width: 76%;
+    border-radius: 14px;
+    padding: 28px 15px 20px;
+    box-sizing: border-box;
+    .no-popup-title {
+        font-size: 24px;
+        font-weight: 500;
+        text-align: center;
+        .no-popup-title-sub{
+            font-size: 16px;
+            margin-top: 8px;
+        }
+    }
+    .no-popup-btn {
+        background-color: #2199F8;
+        padding: 8px;
+        border-radius: 20px;
+        color: #fff;
+        font-size: 16px;
+        margin-top: 32px;
+        text-align: center;
+    }
+}
+</style>

src/views/old_mini/home/index.vue

@@ -34,6 +34,8 @@
             :style="{ zIndex: zIndex }"
             @heightChange="heightChange"
         ></home-floating-panel>
+        <!-- 问题提醒 -->
+        <!-- <problem-reminder></problem-reminder> -->
     </div>
 </template>
 
@@ -44,6 +46,7 @@ import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import weatherInfo from "@/components/weatherInfo.vue";
 import homeFloatingPanel from "./components/homeFloatingPanel.vue";
+import problemReminder from "./components/problemReminder.vue";
 const router = useRouter();
 
 const store = useStore();