web_dist/src/components/xiao-chan/cy-message/CyMessage.vue

<script setup lang="ts">
</script>

<template>
  <div class="cy-message_body">
    <div
        style="position:absolute;height: 5px;width: 30px;border: 1px solid #a9f384;top: 10px;left: -10px;background-color: #d3f1c4;box-shadow: 0 0 10px rgb(0,153,184) inset,0 0 30px rgb(0,153,184);">

    </div>
    <div class="cy-message_icon">
      <i class="el-icon el-message__icon el-message-icon--success">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor"
                d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path>
        </svg>
      </i>
    </div>

    <div class="cy-message_content">
      打卡什么快递老母鸡卡佩拉
    </div>

  </div>
</template>

<style lang="scss">
.cy-message_body {
  border-top: 1px solid #a9f384;
  border-bottom: 1px solid #a9f384;
  width: fit-content;
  display: flex;
  box-sizing: border-box;
  padding: 5px 19px;
  align-items: center;
  //background-color: #f0f9eb;
  position: relative;
  background: linear-gradient(to right, #f0f9eb 0%, #d3f1c4 50%, #f0f9eb 100%);

  .cy-message_icon {
    color: #67c23a;
    font-size: 16px;
  }

  .cy-message_content {
    max-width: 220px;
  }

}
</style>