vue 实现邮戳边缘

Posted 2020-11-12 林景之

效果：

 

 vue：

<template>
    <div class="couponItem">
        <div class="itemLeft">
            <span class="tagDiv">
                <span class="tagLeft">折</span>
            </span>
            <div>
                <p class="price"><strong class="priceNum">{{coupon.cdiscount}}</strong>
                    <span class="priceIcon">折</span></p>
                <p class="coupon">满 {{coupon.minimum}} 元可使用</p>
                <p class="coupon">无金额门槛</p>
            </div>
        </div>
        <div class="itemRight">
            <p class="couponName"><span class="shopTag">店铺：</span>{{coupon.deptname}}</p>
            <p class="useRluer">{{coupon.cname}}</p>
            <p class="useTime"><i class="timeEnd">{{coupon.validstart}}至{{coupon.validend}}</i><span class="rightBtn">立即使用</span></p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                coupon: {
                    \'cdiscount\': 8.8,
                    \'minimum\': 10,
                    \'deptname\': \'好又多\',
                    \'cname\': \'全店通用\',
                    \'validstart\': \'2019-06-26\',
                    \'validend\': \'2019-06-30\'
                }
            }
        },
        methods: {},
    }
</script>

<style scoped>
    i {
        font-style: normal;
    }

    .couponItem {
        width: 100%;
        height: 1rem;
        font-size: .14rem;
        position: relative;
        overflow: hidden;
        background: #fff;
        padding: 0 .05rem;
        box-sizing: border-box;
        text-align: left;
        display: flex;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -moz-flexbox;
        margin: 1rem 0;
    }

    .itemLeft {
        width: 33%;
        height: 100%;
        background: -webkit-linear-gradient(left, #fa7f6d, #fc5e75);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #fa7f6d, #fc5e75);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #fa7f6d, #fc5e75);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #fa7f6d, #fc5e75);
        /* 标准的语法 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        margin-right: .1rem;
        text-align: center;
    }

    .itemLeft:before {
        content: \' \';
        width: 0;
        height: 100%;
        position: absolute;
        top: 10px;
        right: -2px;
        border-right: 3px dotted white;/* 控制右边花纹大小 */
    }

    .itemRight {
        flex: 1;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -moz-flex: 1;
    }

    .rightBtn {
        width: .7rem;
        color: #fa644b;
        border: 1px solid #fa644b;
        text-align: center;
        font-size: .12rem;
        border-radius: 8px;
        padding: .03rem 0;
    }

    .coupon {
        font-size: .12rem;
        text-align: center;
        color: #f4f4f4;
        white-space: nowrap;
        -webkit-transform: scale(0.80);
    }

    .priceIcon {
        font-size: .14rem;
        margin-left: .05rem;
        color: #ffffff;
    }

    .itemLeftBttom {
        font-size: .12rem;
    }

    .price {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .priceNum {
        font-size: .3rem;
        letter-spacing: -2px;
        color: #ffffff;
    }

    .couponName {
        font-size: .12rem;
        padding: .05rem 0;
        margin: .01rem 0 .16rem 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgb(77, 77, 77);
    }

    .useRluer {
        font-size: .14rem;
        color: #4d4d4d;
        margin-bottom: .03rem;
        border-bottom: 1px dashed #cccccc;
    }

    .useTime {
        height: .3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .12rem;
        color: #999;
    }

    .timeEnd {
        font-size: .12rem;
        -webkit-transform-origin-x: 0;
        -ms-transform: scale(0.8);
        /* IE 9 */
        -moz-transform: scale(0.8);
        /* Firefox */
        -webkit-transform: scale(0.8);
        /* Safari 和 Chrome */
        -o-transform: scale(0.8);
    }

    .tagDiv {
        background: #ff9900;
        color: #fff;
        position: absolute;
        transform: rotate(-45deg);
        font-size: .12rem;
        left: -.2rem;
        text-align: center;
        top: -.05rem;
        padding: 0 .28rem;
        height: .3rem;
        line-height: .3rem;
    }

    .tagLeft {
        position: absolute;
        top: .035rem;
        left: .22rem;
        transform: rotate(45deg);
        font-size: .14rem;
        font-weight: bold;
    }
</style>