效果图

企业微信截图_16602834214178.png

优惠券

.base-coupons {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        position: relative;
        display: flex;
        min-height: 50px;
        padding: 16px 0 6px 15px;
        color: #fff;
        align-items: center;
        background: #66A4FF;
    }

印章

<view class="seal"  ">
                    <view class="seal-son">
                        <span style="position: absolute;top: 10px;left: 4px; text-align: center;font-size: 15px;transform: rotate(-45deg); color: #B4B4B4;font-weight: 400;">EXPIRED</span>
                    </view>
 </view>

.seal{
        width: 85px;
        height: 80px;
        border: solid 6px #B4B4B4;
        border-radius: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0 0 50px;
    }
    .seal-son{
        width: 70px;
        height: 65px;
        border: solid 2px #B4B4B4;
        border-radius: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        position: relative;
    }
    .base-coupons::after {
        content: ' ';
        height: 100%;
        position: absolute;
        border-left: 6px dotted white;
        top: 0;
        right: -3px;
    }

复制优惠码

<i class="copy-no copy-no-icon" data-clipboard-text="<?= $couponCode ?>"></i>
添加图标样式：
.copy-no-icon:after {
        font-family: "FontAwesome";
        content: "\f0c5";
        cursor: pointer;
        padding-left: 6px;
        color: #4D4D4D;
        font-size: 16px;
        font-weight: 800;
        font-style: normal;
    }

<script type="text/javascript">
    require([
        'jquery',
        'layer',
        'mage/translate',
        'jquery/clipboard.min'
    ], function ($, layer, $t, Clipboard) {

        layer = layui.layer;

        // 复制订单号
        $('div.customer-coupon-list-content').on('click', '.copy-no', function (event) {
            let self    = $(event.target),
                copyTxt = self.attr('data-clipboard-text');

            // 如果是空直接返回
            if (typeof copyTxt === "undefined" || copyTxt === "") return false;

            let clipboard = new Clipboard('.copy-no');

            clipboard.on('success', function(e) {
                layer.tips($t('Success'), self);
                e.clearSelection();
            });

            clipboard.on('error', function(e) {
                layer.tips($t('Failure'), self);
            });
        });
    });

</script>