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

<template>
    <!-- 添加退回提示区域 -->
    <view class="return-notice" @click="handleReturn">
        <view class="notice-content">
            <view class="title-row">
                <text class="title">退回不通过书籍</text>
                <text class="tag">首次免费退</text>
            </view>
            <view class="countdown">
                您需要在
                <u-count-down class="time" :timestamp="orderInfo.restTime" separator="zh" separator-size="28" separator-color="#FF0000" color="#FF0000" bg-color="transparent"></u-count-down>
                内处理
            </view>
        </view>
        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
    </view>
</template>

<script>
export default {
    props: {
        orderInfo: {
            type: Object,
            default: {}
        }
    },
    methods: {
        handleReturn() {
            this.$emit('close')
        }
    }
}
</script>

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