<!--
 * @Author: Jason Liu
 * @Date: 2025-03-18 13:53:23
 * @Desc: 
-->
<!--
 * @Author: Jason Liu
 * @Date: 2022-10-12 13:15:18
 * @Desc: 
-->
<template>
  <div class="user_said_info">
    <div class="user_header"></div>
    <div class="user_info">
      {{ value.info }}
    </div>
  </div>
</template>
<script type="text/javascript" src="./service.js"></script>
<style lang="less">
.user_said_info {
  display: flex;
  width: 100%;
  line-height: 38px;
  margin-bottom: 12px;
  flex-direction: row-reverse;
  .user_info {
    background: #3b40f3;
    border-radius: 8px;
    line-height: 22px;
    padding: 8px;
    color: #ffffff;
    position: relative;
    max-width: calc(100% - 54px);
    &::before {
      content: ""; // 必须设置 content 属性
      position: absolute;
      top: 14px; // 调整箭头的垂直位置
      right: -4px; // 将箭头放置在右侧外部
      width: 0; // 设置为 0，使用 border 创建三角形
      height: 0;
      border-top: 4px solid transparent; // 上边框透明
      border-bottom: 4px solid transparent; // 下边框透明
      border-left: 4px solid #3b40f3; // 左边框颜色与背景一致
    }
  }
  .user_header {
    width: 34px;
    height: 34px;
    margin: 2px 0px 2px 6px;
    border-radius: 60px;
    background-image: url(../../assets/bg_header.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    overflow: hidden;
    -webkit-app-region: no-drag;
  }
}
</style>
