book-hi/pages-mine/components/return-notice.vue

<template>
    <!-- 添加退回提示区域 -->
    <view class="return-notice">
        <view class="notice-content">
            <view class="title-row">
                <text class="title">退回不通过书籍</text>
                <text class="tag">首次免费退</text>
            </view>
            <view class="countdown">
                您需要在<text class="time">3天05小时16分52秒</text>内处理
            </view>
        </view>
        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
    </view>
</template>

<style lang="scss" scoped>
// 添加新的样式
.return-notice {
    margin: 30rpx;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF4F4;
    border-radius: 10rpx;
    border: 2rpx solid #FF0000;

    .notice-content {
        flex: 1;

        .title-row {
            display: flex;
            align-items: center;
            margin-bottom: 12rpx;

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

            .tag {
                margin-left: 12rpx;
                padding: 4rpx 12rpx;
                background: #FF4B4B;
                color: #fff;
                font-size: 24rpx;
                border-radius: 4rpx;
            }
        }

        .countdown {
            font-size: 28rpx;
            color: #666;

            .time {
                color: #FF4B4B;
            }
        }
    }
}
</style>