<template>
    <div class="ht-base-guide-distribution-demo">
        <ht-base-guide-distribution>
            <div slot="dis-tip">
                <h1>我们做出了这些改变，让一切更美好！</h1>
                <ht-base-button type="primary" size="large" @click="closedistribution">我知道了</ht-base-button>
            </div>
            <ht-base-guide-distribution-item class-name="ht-step-one" placement="right">
                <h1>气泡对话框标题1</h1>
                <p>自定义气泡对话框内容文案，自定义气泡对话框内容文案自定义气泡对话框内容文案，自定义气泡对话框内容文案；</p>
                <p>自定义气泡对话框内容文案自定义气泡对话框内容文案。</p>
            </ht-base-guide-distribution-item>
            <ht-base-guide-distribution-item class-name="ht-step-two" placement="bottom">
                <h1>气泡对话框标题2</h1>
                <p>自定义气泡对话框内容文案，自定义气泡对话框内容文案自定义气泡对话框内容文案，自定义气泡对话框内容文案；</p>
                <p>自定义气泡对话框内容文案自定义气泡对话框内容文案。</p>
            </ht-base-guide-distribution-item>
            <ht-base-guide-distribution-item class-name="ht-step-three" placement="left">
                <h1>气泡对话框标题3</h1>
                <p>自定义气泡对话框内容文案，自定义气泡对话框内容文案自定义气泡对话框内容文案，自定义气泡对话框内容文案；</p>
                <p>自定义气泡对话框内容文案自定义气泡对话框内容文案。</p>
            </ht-base-guide-distribution-item>
            <ht-base-guide-distribution-item class-name="ht-step-fourth" placement="top">
                <h1>气泡对话框标题4</h1>
                <p>自定义气泡对话框内容文案，自定义气泡对话框内容文案自定义气泡对话框内容文案，自定义气泡对话框内容文案；</p>
                <p>自定义气泡对话框内容文案自定义气泡对话框内容文案。</p>
            </ht-base-guide-distribution-item>
        </ht-base-guide-distribution>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseGuideDistributionDemo',
        methods: {
            closedistribution() {
                this.$children[0].distributionShow = false;
            }
        }
    }
</script>
<style>
    .ht-base-guide-distribution-demo {

    }
</style>

