topfans/frontend/pages/support-activity/components/MessageInput.vue

<template>
  <!--
    Figma 147:325 (Group 50, 296x42)
    展示型留言条:左侧圆形头像 + 中间居中文本 + 右侧表情 + 发送箭头
    点击整条 / 点击发送箭头会触发 send 事件,父组件可弹出真实输入面板
  -->
  <view class="message-row" @click="handleTap">
    <!-- 外层 pill 容器 (296x42, radius 20) -->
    <view class="message-row__pill">
      <!-- 内嵌凹槽 (238x30, radius 16) -->
      <view class="message-row__groove">
        <text class="message-row__text">{{ displayText }}</text>
      </view>
    </view>

    <!-- 左侧圆形头像 (35x35) -->
    <view class="message-row__avatar">
      <image
        class="message-row__avatar-img"
        :src="avatar || defaultAvatar"
        mode="aspectFill"
      />
    </view>

    <!-- 骰子表情 (17x17) -->
    <image
      class="message-row__emoji"
      src="/static/rank/activity-support-icon/message-row/emoji.png"
      mode="aspectFit"
    />

    <!-- 发送箭头 (21x21) -->
    <view class="message-row__send" @click.stop="handleSend">
      <image
        class="message-row__send-img"
        src="/static/rank/activity-support-icon/message-row/send.png"
        mode="aspectFit"
      />
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  /**
   * 展示的文案:父组件可传入最新一条留言,默认使用 Figma 设计稿文案。
   */
  text: {
    type: String,
    default: "今天第一天姐妹们大家冲鸭！！！",
  },
  /**
   * 头像 URL,未传时回退到默认头像。
   */
  avatar: {
    type: String,
    default: "",
  },
  /**
   * 兼容旧用法:外部如果还在传 placeholder,作为 text 的兜底。
   */
  placeholder: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["send", "tap"]);

const defaultAvatar =
  "/static/rank/activity-support-icon/message-row/avatar.png";

const displayText = computed(() => {
  if (props.text && props.text.trim().length > 0) return props.text;
  if (props.placeholder && props.placeholder.trim().length > 0)
    return props.placeholder;
  return "今天第一天姐妹们大家冲鸭！！！";
});

function handleTap() {
  emit("tap");
}

function handleSend() {
  // 展示型组件:点击发送图标抛出事件,业务侧决定弹出输入面板 / 直接发送等行为
  emit("send", displayText.value);
}
</script>

<style scoped>
/*
 * 设计稿原始尺寸 (px)  →  rpx (按 750 / 375 = 2 倍换算)
 * 容器     296 x 42    →  592rpx x 84rpx
 * 凹槽     238 x 30    →  476rpx x 60rpx  (left 12px=24rpx,top 6px=12rpx)
 * 头像     35  x 35    →  70rpx  x 70rpx  (left 6px=12rpx,top 3px=6rpx)
 * 文本     11px        →  22rpx
 * emoji   17  x 17    →  34rpx  x 34rpx
 * send    21  x 21    →  42rpx  x 42rpx
 */

.message-row {
  position: fixed;
  left: 22rpx; /* 11px */
  bottom: 32rpx;
  width: 592rpx;
  height: 84rpx;
  z-index: 50;
}

/* 外层 pill */
.message-row__pill {
  position: absolute;
  inset: 0;
  background: rgba(217, 217, 217, 0.4);
  border-radius: 40rpx; /* 20px */
  box-shadow: 2rpx 4rpx 8rpx 0 rgba(0, 0, 0, 0.25);
}

/* 内嵌凹槽 */
.message-row__groove {
  position: absolute;
  left: 24rpx; /* 12px */
  top: 12rpx; /* 6px */
  width: 476rpx; /* 238px */
  height: 60rpx; /* 30px */
  background: rgba(54, 51, 51, 0.1);
  border-radius: 32rpx; /* 16px */
  display: flex;
  align-items: center;
  /* 头像突出在 pill 左侧,文字从凹槽右半段开始;末尾留出表情 + 发送图标空间 */
  padding-left: 80rpx;
  padding-right: 120rpx;
  overflow: hidden;
}

.message-row__text {
  display: block;
  width: 100%;
  font-size: 22rpx; /* 11px */
  line-height: 1.3;
  color: #ffffff;
  font-weight: bold;
  font-family: "Abhaya Libre ExtraBold", "PingFang SC", sans-serif;
  text-shadow: -2rpx 2rpx 8rpx rgba(206, 9, 9, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 设计稿的轻微倾斜 */
  transform: rotate(-0.44deg) skewX(-0.1deg);
  transform-origin: center;
}

/* 左侧头像 (突出 pill 左缘) */
.message-row__avatar {
  position: absolute;
  left: 12rpx; /* 6px */
  top: 6rpx; /* 3px */
  width: 70rpx; /* 35px */
  height: 70rpx;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 14rpx 0 rgba(203, 24, 24, 0.84);
  background: #2a1111;
}

.message-row__avatar-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 骰子表情 */
.message-row__emoji {
  position: absolute;
  right: 92rpx; /* ≈ 46px from right edge */
  top: 24rpx; /* (84-34)/2 ≈ 25 */
  width: 34rpx; /* 17px */
  height: 34rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(138, 6, 6, 0.74));
}

/* 右侧发送箭头 (可点击) */
.message-row__send {
  position: absolute;
  right: 28rpx; /* ≈ 14px */
  top: 20rpx; /* 21 */
  width: 42rpx; /* 21px */
  height: 42rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6rpx 8rpx rgba(0, 0, 0, 0.47));
}

.message-row__send-img {
  width: 100%;
  height: 100%;
}

.message-row__send:active {
  transform: scale(0.92);
  transition: transform 0.12s ease;
}
</style>