<template>
    <quick-item :class="bem()">
        <div>
            <i :class="bem('icon')" />
            <span>粉丝群</span>
        </div>
        <div :class="bem('tip')" slot="tip">
            <div>
                <img src="../../assets/img/dianshang-qq.png" alt="稿定粉丝qq群">
                <span>电商QQ交流群</span>
            </div>
            <div>
                <img src="../../assets/img/dianshang-wechat.png" alt="稿定粉丝微信群">
                <span>电商微信交流群</span>
            </div>
        </div>
    </quick-item>
</template>

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

export default {
    name: createComponentName('quick-link-dianshang'),
    components: {
        QuickItem,
    },
    mixins: [componentMixin],
};
</script>

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

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

.@{b} {
    cursor: default;
    &__icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        background-image: url(../../assets/img/fensi.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    &:hover{
        .@{b}__icon {
            background-image: url(../../assets/img/fensi-hover.png);
        }
    }
    &__tip {
        display: flex;
        div {
            padding: 22px 15px 23px;
            &:first-of-type {
                border-right: 1px solid #ddd;
            }
            img {
                width: 120px;
                height:105px;
                object-fit: contain;
            }
            span {
                color: #666666;
                font-size: 14px;
                padding: 0;
            }
        }

    }
}
</style>
