设置对话框样式

最新推荐文章于 2021-05-26 08:43:05 发布

开心市民小李・ࡇ・

最新推荐文章于 2021-05-26 08:43:05 发布

阅读量229

点赞数

分类专栏： vue css 文章标签： vue css less

本文链接：https://blog.csdn.net/weixin_44242623/article/details/115234667

版权

vue 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

           <div
              v-for="(item, index) in transText"
              :key="index"
              style="overflow: hidden; padding-top:10px;"
            >
              <div
                v-if="item.callerText"
                :class="['avatar', item.callerType == 1 ? '' : 'aright']"
              ></div>
              <div
                :class="item.callerType == 1 ? 'left' : 'right '"
                v-if="item.callerText"
              >
                <p v-html="item.callerText"></p>
              </div>
            </div>

.talk2 {
  // fix
  font-size: 12px;
  width: 100%;
  padding: 15px 0;
  .avatar {
    float: left;
    width: 40px;
    height: 40px;
    background-image: url("../../assets/images/01.png");
    background-size: 40px;
  }

  .aright {
    float: right;
    background-image: url("../../assets/images/02.png");
  }
  .right {
    position: relative;
    min-height: 10px;
    display: table;
    /*使左右的对话框分开*/
    float: right;
    max-width: 78%;
    margin: 0 5px;
    background: rgba(45, 183, 245, 0.3);
    border: 1px solid #2db7f5;
    box-sizing: border-box;
    border-radius: 16px 16px 0px 16px;
  }

  .left {
    position: relative;
    min-height: 10px;
    display: table;
    /*使左右的对话框分开*/
    float: left;
    max-width: 78%;
    margin: 0 5px;
    background: #edf8f3;
    border: 1px solid #74c284;
    box-sizing: border-box;
    border-radius: 16px 16px 16px 0px;
  }

  .left > p,
  .right > p {
    /*使内容居中*/
    display: table-cell;
    vertical-align: middle;
    padding: 10px 14px;
    height: 20px;
    line-height: 18px;
    max-width: 280px;
    position: relative;
  }

  .right > p {
    color: #000;
  }

  .left:before {
    border-right: 8px solid #fff;
    left: -16px;
  }

  .right:after {
    border-left: 8px solid #9eea6a;
    right: -16px;
  }
}