<template>

    <div class="demo">

        <div class="stamp stamp01">

            <div class="par">

                <p>XXXXXX折扣店</p>

                <sub class="sign">￥</sub>

                <span>50.00</span>

                <sub>优惠券</sub>

                <p>订单满100.00元</p>

            </div>

            <div class="copy">

                副券

                <p>

                    --

                    <br>--

                </p>

            </div>

            <i></i>

        </div>

        <div class="stamp stamp02">

            <div class="par">

                <p>XXXXXX折扣店</p>

                <sub class="sign">￥</sub>

                <span>50.00</span>

                <sub>优惠券</sub>

                <p>订单满100.00元</p>

            </div>

            <div class="copy">

                副券

                <p>

                    --

                    <br>--

                </p>

            </div>

            <i></i>

        </div>

        <div class="stamp stamp03">

            <div class="par">

                <p>XXXXXX折扣店</p>

                <sub class="sign">￥</sub>

                <span>50.00</span>

                <sub>优惠券</sub>

                <p>订单满100.00元</p>

            </div>

            <div class="copy">

                副券

                <p>

                    --

                    <br>--

                </p>

                <a href="#">立即使用</a>

            </div>

            <i></i>

        </div>

        <div class="stamp stamp04">

            <div class="par">

                <p>XXXXXX折扣店</p>

                <sub class="sign">￥</sub>

                <span>50.00</span>

                <sub>优惠券</sub>

                <p>订单满100.00元</p>

            </div>

            <div class="copy">

                副券

                <p>

                    --

                    <br>--

                </p>

                <a href="#">立即使用</a>

            </div>

            <i></i>

        </div>

    </div>

</template>

<script>

export default {

    data() {

        return {

            sampleValue: "",

            value1: "",

            sampleValues: ""

        };

    }

};

</script>

<style>

.demo {

    width: 410px;

}

.stamp * {

    padding: ;

    margin: ;

    list-style: none;

    font-family: "Microsoft YaHei", "Source Code Pro", Menlo, Consolas, Monaco,

        monospace;

}

.stamp {

    width: 387px;

    height: 140px;

    padding:  10px;

    margin-bottom: 50px;

    position: relative;

    overflow: hidden;

}

.stamp:before {

    content: "";

    position: absolute;

    top: ;

    bottom: ;

    left: 10px;

    right: 10px;

    z-index: -;

}

.stamp:after {

    content: "";

    position: absolute;

    left: 10px;

    top: 10px;

    right: 10px;

    bottom: 10px;

    box-shadow:   20px 1px rgba(, , , 0.5);

    z-index: -;

}

.stamp i {

    position: absolute;

    left: %;

    top: 45px;

    height: 190px;

    width: 390px;

    background-color: rgba(, , , 0.15);

    transform: rotate(-30deg);

}

.stamp .par {

    float: left;

    padding: 16px 15px;

    width: 220px;

    border-right: 2px dashed rgba(, , , 0.3);

    text-align: left;

}

.stamp .par p {

    color: #fff;

    font-size: 16px;

    line-height: 21px;

}

.stamp .par span {

    font-size: 50px;

    color: #fff;

    margin-right: 5px;

    line-height: 65px;

}

.stamp .par .sign {

    font-size: 34px;

}

.stamp .par sub {

    position: relative;

    top: -5px;

    color: rgba(, , , 0.8);

}

.stamp .copy {

    display: inline-block;

    padding: 21px 14px;

    width: 100px;

    vertical-align: text-bottom;

    font-size: 30px;

    color: rgb(, , );

    text-align: center;

    line-height: initial;

}

.stamp .copy p {

    font-size: 16px;

    margin-top: 15px;

}

.stamp01 {

    background: #f39b00;

    background: radial-gradient(

        rgba(, , , ) ,

        rgba(, , , ) 5px,

        #f39b00 5px

    );

    background-size: 15px 15px;

    background-position: 9px 3px;

}

.stamp01:before {

    background-color: #f39b00;

}

.stamp02 {

    background: #d24161;

    background: radial-gradient(transparent , transparent 5px, #d24161 5px);

    background-size: 15px 15px;

    background-position: 9px 3px;

}

.stamp02:before {

    background-color: #d24161;

}

.stamp03 {

    background: #7eab1e;

    background: radial-gradient(transparent , transparent 5px, #7eab1e 5px);

    background-size: 15px 15px;

    background-position: 9px 3px;

}

.stamp03:before {

    background-color: #7eab1e;

}

.stamp03 .copy {

    padding: 10px 6px 10px 12px;

    font-size: 24px;

}

.stamp03 .copy p {

    font-size: 14px;

    margin-top: 5px;

    margin-bottom: 8px;

}

.stamp03 .copy a {

    background-color: #fff;

    color: #;

    font-size: 14px;

    text-decoration: none;

    padding: 5px 10px;

    border-radius: 3px;

    display: block;

}

.stamp04 {

    width: 390px;

    background: #50add3;

    background: radial-gradient(

        rgba(, , , ) ,

        rgba(, , , ) 4px,

        #50add3 4px

    );

    background-size: 12px 8px;

    background-position: -5px 10px;

}

.stamp04:before {

    background-color: #50add3;

    left: 5px;

    right: 5px;

}

.stamp04 .copy {

    padding: 10px 6px 10px 12px;

    font-size: 24px;

}

.stamp04 .copy p {

    font-size: 14px;

    margin-top: 5px;

    margin-bottom: 8px;

}

.stamp04 .copy a {

    background-color: #fff;

    color: #;

    font-size: 14px;

    text-decoration: none;

    padding: 5px 10px;

    border-radius: 3px;

    display: block;

}

</style>