<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">
                    图片尺寸建议 420*560，不大于 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: 'ExamplePop',
        data() {
            return {

            };
        }
    };
</script>

<style lang="scss" scoped>

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

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

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

</style>