feiniao-farm-h5/src/components/reportPopup.vue

<template>
    <Popup v-model:show="show" class="report-popup">
        <div class="popup-content-box">
            <div class="report-bg">
                <img class="box-bg" src="@/assets/img/home/box-bg.png" alt="">
            </div>
            <div class="report-content">
                <div class="report-garden">
                    <img class="garden-icon" src="https://birdseye-img.sysuimars.com/birdseye-look-mini/Group%201321316260.png" alt="">
                    荔枝博览园
                </div>
                <div class="report-time">2025.02.15农场报告</div>
                <div class="report-address">广东省广州市从化区</div>
                <div class="report-img">
                    <img class="report-img-dom" src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg" alt="">
                </div>
                <div class="report-line"></div>
                <div class="report-desc">
                    当前位于广州市从化区荔枝博览园，共 <span class="main-text">12000棵</span>树，有 <span class="main-text">7659棵</span> 树触发了农事。
                </div>
                <div class="report-info">
                    <div class="info-item">
                        <span class="item-dotted"></span>
                        物候进程
                        <span class="item-text">花期短暂，果期集中，成熟迅速</span>
                    </div>
                    <div class="info-item">
                        <span class="item-dotted"></span>
                        生长异常
                        <span class="item-text">花而不实，落果严重，品质下降</span>
                    </div>
                    <div class="info-item">
                        <span class="item-dotted"></span>
                        病虫异常
                        <span class="item-text">虫蛀果裂，病斑密布，落叶早衰</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom-btn">
            <div class="btn-item secondary-btn" @click="toPage">分享给</div>
            <div class="btn-item primary-btn" @click="triggerClick">保存图片</div>
        </div>
    </Popup>
</template>

<script setup>
import { Popup } from "vant";
import { ref } from "vue";

const show = ref(false);

const handleShow = () => {
    show.value = true;
};

const handleClose = () => {
    show.value = false;
};

defineExpose({handleClose,handleShow});
</script>

<style lang="scss" scoped>
.report-popup {
    width: 343px;
    border-radius: 12px;
    background: transparent;
    .popup-content-box {
        position: relative;
        background: #FFFFFF;
        border-radius: 12px;
        .report-bg {
            .box-bg {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 0;
                width: 100%;
                height: 203px;
            }
        }
        .report-content {
            position: relative;
            z-index: 2;
            padding: 12px 12px 20px 12px;
            .report-garden {
                background: rgba(0, 0, 0, 0.6);
                color: #fff;
                height: 28px;
                display: flex;
                align-items: center;
                width: fit-content;
                padding: 0 8px 0 2px;
                border-radius: 20px;
                font-size: 14px;
                .garden-icon {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    box-sizing: border-box;
                    // border: 1px solid #fff;
                    margin-right: 6px;
                }
            }
            .report-time {
                padding-top: 42px;
                font-size: 22px;
                color: #000000;
                font-weight: bold;
            }
            .report-address {
                font-size: 16px;
                color: rgba(0, 0, 0, 0.5);
            }
            .report-img {
                padding: 16px 0 12px 0;
                .report-img-dom {
                    width: 100%;
                    height: 152px;
                    border-radius: 12px;
                    object-fit: cover;
                }
            }
            .report-line {
                border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
            }
            .report-desc {
                padding: 17px 10px 8px 10px;
                font-size: 14px;
                color: #333333;
                .main-text {
                    color: #2199F8;
                }
            }
            .report-info {
                padding: 5px 8px;
                font-size: 14px;
                .info-item {
                    display: flex;
                    align-items: center;
                    color: #999999;
                    padding-bottom: 2px;
                    .item-dotted {
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: #BBBBBB;
                        margin-right: 8px;
                    }
                    .item-text {
                        padding-left: 12px;
                        color: #000000;
                    }
                }
            }
        }
    }
    .bottom-btn {
        width: 100%;
        text-align: center;
        margin-top: 20px;
        display: flex;
        .btn-item {
            flex: 1;
            text-align: center;
            height: 38px;
            line-height: 38px;
            border-radius: 30px;
            font-size: 14px;
            &.secondary-btn {
                background: #FFFFFF;
                color: #000000;
            }
            &.primary-btn {
                background: linear-gradient(180deg, #76C3FF, #2199F8);
                color: #FFFFFF;
            }
        }
        .btn-item + .btn-item {
            margin-left: 12px;
        }
    }
}
</style>