对话框及三角形

<template>
  <div
    class="table-page-btn-list special-column-edit-container"
  >
    <div class="content">
        <div class="consulting">
            <ul>
                <li v-for="(item,index) in dialogue" :key="index">
                    <div class="tip">NO.{{ index + 1 }}</div>
                    <div class="smart-object">
                        <div class="pic">
                            <img src="./images/ai.png">
                        </div>
                        <div class="dialogue">
                            {{ item.question }}
                        </div>
                    </div>
                    <div class="answer">
                        <div class="answer-pic">
                            <img src="./images/answer-pic.png">
                        </div>
                        <div class="content-answer">
                            <div class="answer-dialogue">
                                {{ item.answer }}
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            dialogue: [
                ]
        }
    },
    methods: {

    }
}
</script>
<style lang="less">
.special-column-edit-container{
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-image: url(./images/background.png);
    background-size:cover;

    .consulting{
        position: relative;
        width: 100%;
        height: calc(100% - 3rem) ;
        padding: 0.3rem 0 0 0;
        background-image: url(./images/content.png);
        background-size:cover;
        background-repeat:no-repeat;

        ul{
            padding: 0;
        }
        li{
            .tip{
                font-size: 0.6rem;
                color: #999;
                text-align: center;
            }

            .smart-object{
                padding: 1rem 0.6rem 0 0.6rem;

                .pic{
                    width: 2.2rem;
                    height: 2.2rem;
                    display: inline-block;
                    position: relative;

                    img{
                        max-width: 100%;
                        max-height: 100%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                }
//箭头向左
                .dialogue{
                    font-size: 0.8rem;
                    display: inline-block;
                    background: #0762C8;
                    color: #fff;
                    padding: 0.6rem;
                    max-width: 15rem;
                    border-radius: 0.3rem;
                    position: relative;
                    left: 0.6rem;
                    bottom: 0.6rem;
                }
                .dialogue::before{
                    content:" ";
                    border-left: 0px solid #0762C8;
                    border-top:0.53rem solid transparent;
                    border-right:0.53rem solid #0762C8;
                    border-bottom:0.53rem solid transparent;
                    position: absolute;
                    left:-0.5rem;
                    top:0.53rem;
                }
            }

            .answer{
                padding:1rem 0.6rem 0 0.6rem;
                width: 100%;

                .answer-pic{
                    width: 2.2rem;
                    height: 2.2rem;
                    display: inline-block;
                    position: relative;
                    float: right;

                    img{
                        max-width: 100%;
                        max-height: 100%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                }
            //箭头向右
                .content-answer{
                    width: calc(100% - 2.6rem) ;
                    padding-left: 2.2rem;
                    padding-right:0.4rem ;
                    .answer-dialogue{
                        font-size: 0.8rem;
                        display: inline-block;
                        padding: 0.6rem;
                        background: #ededed;
                        color: #333;
                        max-width: 100%;
                        border-radius: 0.3rem;
                        position: relative;
                        bottom: 0.6rem;
                    }
                    .answer-dialogue::before{
                        content:" ";
                        border-left: 0.53rem solid #ededed;
                        border-top:0.53rem solid transparent;
                        border-right:0px solid #ededed;
                        border-bottom:0.53rem solid transparent;
                        position: absolute;
                        left: 100%;
                        top:1rem;
                    }
                }
            }
        }
}
</style>