<template>
    <div style="display: inline-block">
        <Poptip trigger="hover" placement="right-start">
            <Icon type="help-circled"></Icon>
            <div class="example" slot="content">
                <div class="title">
                    图片尺寸建议 1050*1400，不大于 500KB 。
                </div>

                <div class="title">
                    色卡图片会被自动设置为商品的正面图片，要求必须拍摄商品正面照，且图片底色为 <strong>F5F7F6</strong> 。
                </div>

                <div class="text-center"><img class="image"></div>
            </div>
        </Poptip>
    </div>
</template>

<script>
    export default {
        name: 'example-pop',
        data() {
            return {

            };
        }
    };
</script>

<style lang="scss" scoped>
.example {
    padding: 10px;

    .title {
        color: #c90;
        width: 155px;
        white-space: normal;
        margin-bottom: 10px;
    }

    .text-center {
        text-align: center;
    }

    .image {
        width: 100px;
        height: 134px;
        background-image: url(../../statics/images/example/1.png);
    }
}
</style>