pet-system-fulfiller-app/components/privacy-popup/privacy-popup.vue

<template>
    <view class="popup-mask" v-if="visible" @click.stop>
        <view class="popup-content">
            <!-- 顶部: 标题 + 关闭按钮 -->
            <view class="popup-header">
                <text class="popup-title">{{ title }}</text>
                <view class="close-icon" @click="close">×</view>
            </view>
            
            <!-- 内容滚动区 -->
            <scroll-view scroll-y class="popup-body">
                <slot>
                    <text class="default-text">{{ content }}</text>
                </slot>
            </scroll-view>
            
            <!-- 底部按钮 -->
            <view class="popup-footer">
                <button class="confirm-btn" @click="close">我知道了</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'privacy-popup',
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '协议标题'
            },
            content: {
                type: String, // 备用，主要用 slot
                default: ''
            }
        },
        methods: {
            close() {
                this.$emit('close');
            }
        }
    }
</script>

<style scoped>
    .popup-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4); /* 半透明遮罩 */
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup-content {
        width: 80%; /* 宽度大概屏幕 80% */
        max-height: 70%;
        background-color: #fff;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .popup-header {
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-bottom: 2rpx solid #eee;
    }

    .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .close-icon {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40rpx;
        color: #999;
        line-height: 1;
        padding: 10rpx; /* 增加点击区域 */
    }

    .popup-body {
        padding: 30rpx;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        max-height: 600rpx; /* 限制高度滚动 */
        box-sizing: border-box;
    }

    .popup-footer {
        padding: 30rpx;
        border-top: 2rpx solid #eee;
    }

    .confirm-btn {
        background: linear-gradient(90deg, #FF6F00 0%, #FF5722 100%);
        color: #fff;
        font-size: 30rpx;
        font-weight: bold;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 8rpx;
        box-shadow: 0 4rpx 10rpx rgba(255, 87, 34, 0.2);
    }
    
    .confirm-btn::after {
        border: none;
    }
</style>