<template>
    <div class="nus_cornermark"
        v-if="nameText"
        :data-text="nameText">
    </div>
</template>

<script>
export default {
    props: {
        /**
         * 内容文本
         */
        nameText: {
            type: String
        }
    }
};
</script>

<style lang="scss">
@import '../../../../../_assets/style/_iconFont.scss';
@import '../../../../../_assets/style/_var.scss';
@import '../../../../../_assets/style/_mixin.scss';

.nus_cornermark {
    position: absolute;
    bottom: 0;
    left: 0;
    letter-spacing: 1px;
    overflow: hidden;
    font-size: $nugoodsitem-cornermark-font-size;
    color: $nugoodsitem-cornermark-color;
    padding: 2px 10px 2px 8px;
    &::before {
        content: '';
        background: $nugoodsitem-cornermark-bg-color;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-top-right-radius: 3px;
        transform: skew(15deg);
        transform-origin: 0 100%;
    }
    &::after {
        content: attr(data-text);
        letter-spacing: 1px;
        position: relative;
        width: 100%;
        line-height: 1;
        z-index: 1;
    }
}
</style>
