book-hi/pages/home/components/KindReminder.vue

<template>
    <u-popup v-model="showPopup" @close="closePopup" mode="center" border-radius="30" :width="width">
        <view class="kind-reminder">
            <view class="container-form">
                <view class="icon-wrapper">
                    <image src="/static/tabbar/home2.png" class="tip-icon"></image>
                    <text class="tip-text">温馨提示</text>
                </view>

                <view class="content">
                    <view class="reminder-text">
                        卖书前请务必仔细阅读
                    </view>
                    <text class="highlight">《书嗨卖书答疑》</text>
                </view>

                <view class="footer">
                    <button class="rule-btn" @click="handleViewRules">查看规则</button>
                    <button class="start-btn" @click="handleStartSelling">开始卖书</button>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        width: {
            type: String,
            default: "80%",
        },
    },
    data() {
        return {
            showPopup: false,
        };
    },
    methods: {
        openPopup() {
            this.showPopup = true;
        },
        closePopup() {
            this.showPopup = false;
        },
        handleStartSelling() {
            this.$emit("start");
            this.closePopup();
        },
        handleViewRules() {
            this.$emit("viewRules");
            uni.navigateTo({
                url: '/pages-mine/pages/rules-for-sellbooks'
            });
            this.closePopup();
        },
    },
};
</script>

<style lang="scss" scoped>
.kind-reminder {
    background: #ffffff;
    border-radius: 26rpx;
    overflow: hidden;
    padding: 16rpx;
    background: linear-gradient(-90deg, #98e05f, #0de3ac);
    .container-form {
        background: #effcf3;
        border-radius: 26rpx;
        padding: 30rpx;
        padding-bottom: 40rpx;
    }

    .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;

        .tip-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 10rpx;
        }

        .tip-text {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 36rpx;
            color: #37c148;
        }
    }

    .content {
        padding: 20rpx 10rpx;
        font-size: 32rpx;
        color: #333333;
        line-height: 48rpx;
        text-align: center;
        
        .reminder-text {
            font-size: 36rpx;
            font-weight: 500;
        }
    }

    .footer {
        display: flex;
        gap: 30rpx;
        margin-top: 30rpx;
        padding: 0 10rpx;

        button {
            height: 88rpx;
            line-height: 88rpx;
            font-size: 32rpx;
            border: none;
            border-radius: 10rpx;

            &::after {
                border: none;
            }

            &.rule-btn {
                flex: 1;
                background-color: rgba(56, 193, 72, 0.4);
                color: #ffffff;
            }

            &.start-btn {
                flex: 1;
                background-color: #38c148;
                color: #ffffff;
            }
        }
    }
}
</style>