<template>
    <quick-item :class="bem()">
        <div>
            <i :class="bem('icon')" />
            <span>移动端</span>
        </div>
        <div :class="bem('tip')" slot="tip">
            <img src="../../assets/img/app-qrcode.png" alt="搞定设计App">
            <img src="../../assets/img/wx-acode.png" alt="搞定设计小程序">
        </div>
    </quick-item>
</template>

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

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

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

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

.@{b} {
    cursor: default;
    &__icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        background-image: url(../../assets/img/cellphone.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    &:hover{
        .@{b}__icon {
            background-image: url(../../assets/img/cellphone-hover.png);
        }
    }

    &__tip {
        display: flex;
        img {
            width: 150px;
            height: 175px;
            object-fit: cover;
        }

        img + img {
            border-left: 1px #ddd  solid;
        }
    }

}
</style>
