<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>
2015-08-13
<br>2016-08-13
</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>
2015-08-13
<br>2016-08-13
</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>
2015-08-13
<br>2016-08-13
</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>
2015-08-13
<br>2016-08-13
</p>
<a href="#">立即使用</a>
</div>
<i></i>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sampleValue: "111",
value1: "",
sampleValues: ""
};
}
};
</script>
<style>
.demo {
width: 410px;
}
.stamp * {
padding: 0;
margin: 0;
list-style: none;
font-family: "Microsoft YaHei", "Source Code Pro", Menlo, Consolas, Monaco,
monospace;
}
.stamp {
width: 387px;
height: 140px;
padding: 0 10px;
margin-bottom: 50px;
position: relative;
overflow: hidden;
}
.stamp:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 10px;
right: 10px;
z-index: -1;
}
.stamp:after {
content: "";
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
z-index: -2;
}
.stamp i {
position: absolute;
left: 20%;
top: 45px;
height: 190px;
width: 390px;
background-color: rgba(255, 255, 255, 0.15);
transform: rotate(-30deg);
}
.stamp .par {
float: left;
padding: 16px 15px;
width: 220px;
border-right: 2px dashed rgba(255, 255, 255, 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(255, 255, 255, 0.8);
}
.stamp .copy {
display: inline-block;
padding: 21px 14px;
width: 100px;
vertical-align: text-bottom;
font-size: 30px;
color: rgb(255, 255, 255);
text-align: center;
line-height: initial;
}
.stamp .copy p {
font-size: 16px;
margin-top: 15px;
}
.stamp01 {
background: #f39b00;
background: radial-gradient(
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0) 5px,
#f39b00 5px
);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp01:before {
background-color: #f39b00;
}
.stamp02 {
background: #d24161;
background: radial-gradient(transparent 0, transparent 5px, #d24161 5px);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp02:before {
background-color: #d24161;
}
.stamp03 {
background: #7eab1e;
background: radial-gradient(transparent 0, 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: #333;
font-size: 14px;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
display: block;
}
.stamp04 {
width: 390px;
background: #50add3;
background: radial-gradient(
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0) 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: #333;
font-size: 14px;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
display: block;
}
</style>
![](https://img2018.cnblogs.com/blog/1212625/201904/1212625-20190426092055990-1524243915.png)