uniapp购买成功组件样式

<template>
    <view class="success-popup-container">
        <u-popup :show="show" mode="center" @close="close" @open="open" bgColor="transparent">
            <view class="p-wrap">
                <view class="popup-box">
                    
                    <image :src="faceImg" class="faceImg" mode=""></image>
                    <view class="lgchar-wrap">
                        <text class="lg-blue-char">购买成功</text>
                        <!-- <view class="yellow-line"></view> -->
                    </view>
                    <view class="note-sec">
                        优惠券可在“<text style="color: #1877d2;">我的-优惠券管理中心</text>”查看
                    </view>
                    <navigator class="btn" url="/pagesB/myCenterViews/CouponManagement/CouponManagement">
                        点击查看
                    </navigator>
                </view>
                <image :src="closeImg" class="closeImg" mode="" @click="close"></image>
            </view>
            
        </u-popup>
    </view>
</template>

<script>
    import { imgUrl } from "@/http/api.js"
    export default {
        name: "SuccessPopup",
        data() {
            return {
                show: false,
                faceImg: imgUrl + "/uploads/20230720/91e400592bc9e91030160fbea044c953.png",
                closeImg: imgUrl + "/uploads/20230720/81644d4963659afc7c109b7498de5a4f.png",
            }
        },
        methods: {
            open() {
                // console.log('open');
                this.show = true
            },
            close() {
                this.show = false
                // console.log('close');
            }
        }
    }
</script>

<style lang="scss">
    .success-popup-container {
        .p-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .closeImg {
            width: 72rpx;
            height: 71rpx;
            margin-top: 44rpx;
        }
        .popup-box {
            width: 592rpx;
            height: 605rpx;
            background: linear-gradient(180deg,#e1eafc 0%, #ffffff 100%);
            border-radius: 48rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 71rpx;
            box-sizing: border-box;
            .sm-blue-char {
                font-size: 32rpx;
                font-family: PingFang SC, PingFang SC-Bold;
                font-weight: 700;
                text-align: center;
                color: #066fff;
                margin-bottom: 18rpx;
            }
            .lgchar-wrap {
                position: relative;
                display: inline-block;
                .lg-blue-char {
                    position: relative;
                    z-index: 100;
                    // background: linear-gradient(-40deg,#106dff 0%, #24a6ff 99%);
                    font-size: 48rpx;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: 500;
                    text-align: center;
                    color: #08173e;
                }
                .yellow-line {
                    position: absolute;
                    left: -5rpx;
                    bottom: 0;
                    width: 230rpx;
                    height: 15rpx;
                    background: linear-gradient(0deg,#ffef2c 0%, #ffef85 100%);
                }
            }
            .note-sec {
                margin: 60rpx 0 80rpx 0;
                width: 520rpx;
                height: 57rpx;
                background: rgba(86, 155, 248, 0.12);
                border-radius: 29rpx;
                font-size: 23rpx;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: 500;
                text-align: center;
                color: #5ea9f2;
                line-height: 57rpx;
                text-align: center;
            }
            .faceImg {
                width: 277rpx;
                height: 121rpx;
                margin-bottom: 27rpx;
            }
            .btn {
                width: 402rpx;
                height: 85rpx;
                background: #2d89ea;
                border-radius: 43rpx;
                font-size: 32rpx;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: 500;
                text-align: center;
                color: #ffffff;
                line-height: 85rpx;
            }
        }
    }
</style>