SOURCE

console 命令行工具 X clear

                    
>
console
<link href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.css" rel="stylesheet">
<div class="plr5 hidden">
    <a class="stamp stamp01 weui-row" href="02mine-coupon_detail.html">
      <div class="par weui-col-66"><p class="fz_14">2019-2020学年度第一学期</p><div class="t-center fz_22 mt15">星光少年特权奖励券</div></div>
      <div class="copy weui-col-33 t-center"><img class="img40 img-bor radius-cirle" src="../image/u01.jpg" alt=""><p>黄晓明</p><p class="fz_12">一年级(6)班</p></div>
      <i></i>
    </a>
    </div>
<div class="plr5 hidden">
    <a class="stamp stamp-have weui-row" href="02mine-coupon_detail-done.html">
        <div class="po_ab_r tip_have"><span>已使用</span></div>
      <div class="par weui-col-66"><p class="fz_14">2019-2020学年度第一学期</p><div class="t-center fz_22 mt15">阳光少年特权奖励券</div></div>
      <div class="copy weui-col-33 t-center"><img class="img40 img-bor radius-cirle" src="../image/u01.jpg" alt=""><p>黄晓明</p><p class="fz_12">一年级(6)班</p></div>
      <i></i>
    </a>
    </div>
.plr5 {
    padding-left: 5px!important;
    padding-right: 5px!important;
}
.hidden {
    overflow: hidden;
}
.po_ab_r {
    position: absolute !important;
    top: 0;
    right: 0;
}
/*券已使用*/
.tip_done{transform: rotate(-20deg); color:#555; border:1px dashed #555;padding:1px 5px; font-size:12px; border-radius:4px; }
/*电子券*/
.stamp {height: auto;padding: 0 6px;position: relative;background: none;color:#fff; margin-top:20px;}
.stamp *{ box-sizing: content-box; }
.img-coupon{ width: calc(100% + 20px ); height: auto; margin-left: -10px; margin-right: -10px;}
.img-cdone{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}
.stamp:before,.stamp:after {content: '';position: absolute;top:0;bottom:0;z-index: -1; width: 10px; height: 100%;background-size: 18px 18px !important;}
.stamp:before{left:-5px;background-position: 9px -2px !important;}
.stamp:after{right:-5px;background-position:1px -2px !important;}
.stamp i{position: absolute;left:0%;top: 45px;height: 200px;width:500px;background-color: rgba(255,255,255,.15);transform: rotate(-23deg);}
.stamp .par{float: left;padding: 15px 0;border-right:2px dashed rgba(255,255,255,.3);text-align: left; min-height:140px; position: relative;}
.stamp .par p{ color: rgba(255, 255, 255, 0.7); font-size: 14px;}
.stamp .par .btm{ position: absolute; bottom:10px; right:10px;}
.stamp .copy{height: 100%; padding:20px 0;position: relative; font-size: 14px;}
.weui-row .weui-col-20.copy{ width: 20%;}
.weui-row .weui-col-20.copy .weui-btn{ display: inline-block; margin-top: 35px; font-size: 12px; padding-left: 5px; padding-right: 5px;}
.stamp01{background: #5eadef;}
.stamp01:before,.stamp01:after{ background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #5eadef 3px);}
.stamp02{background: #44b580;}
.stamp02:before,.stamp02:after{ background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #44b580 3px)}
.stamp02 .weui-btn_plain-primary{color: #44b580; border-color: #44b580;}
.stamp03{background: #F39B00;}
.stamp03:before,.stamp03:after{ background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #F39B00 3px);}
.stamp03 .weui-btn_plain-primary{color: #F39B00; border-color: #F39B00;}
.stamp-have{background: #d6d6d6;}
.stamp-have:before,.stamp-have:after{ background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #d6d6d6 3px);}
/*已使用过期*/
.tip_have{transform: rotate(-25deg); right:18%;top:-10px; color:#666; border:2px solid #999; border-radius: 50%;  text-align: center; line-height: 60px;padding:5px; z-index: 1;}
.tip_have span{ display: inline-block; border:2px dashed #999; width: 60px; height: 60px;border-radius: 50%; }
.stamp .po_ab_r.mark-topright{right: -5px;}

.radius-10.bor-top_ds::before{left:10px; right: 10px;}
.bg_yorg+.bor-top_ds::before{  border-top:2px dashed #ffba41; left: 15px; right: 15px;}
.bg_lylw+.bor-top_ds::before{  border-top:2px dashed #f7e09d; left: 15px; right: 15px;}