<template>
    <quick-item>
        <div :class="bem()">
            <i :class="bem('icon')" />
            <span>公众号</span>
        </div>
        <div :class="bem('tip')" slot="tip">
            <img
                src="../../assets/img/qr-code-wxsubscription.png"
                srcset="../../assets/img/qr-code-wxsubscription2x.png 2x"
                alt="稿定设计公众号"
            >
            <span>扫码关注公众号</span>
        </div>
    </quick-item>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import quickItem from './QuickItem';

export default {
    name: createComponentName('quick-link-qr'),

    components: {
        quickItem,
    },
    mixins: [componentMixin],
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-quick-link-qr';

.@{b} {
    position: relative;
    cursor: default;
    &__icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        background-image: url(../../assets/img/qrcode.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    &:hover{
        .@{b}__icon {
            background-image: url(../../assets/img/qrcode-hover.png);
        }
    }
    &__tip {
        padding: 15px;
        img {
            width: 120px;
            height:120px;
            object-fit: contain;
        }
        span {
            color: #666666;
            font-size: 14px;
            padding: 0;
        }
    }

    span {
        padding-top: .25em;
        display: block;
        white-space: nowrap;
        color: inherit;
        font-size: @font-size-xsm;
    }
}
</style>
