feiniao-farm-h5/src/views/old_mini/home/components/problemReminder.vue

<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>