109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
||
<view class="message-board">
|
||
<scroll-view class="message-board-scroll" scroll-y :scroll-top="scrollTop">
|
||
<view v-for="msg in messages" :key="msg.id" class="message-bubble">
|
||
<text class="msg-user">{{ msg.user }}：</text>
|
||
<text class="msg-content">{{ msg.content }}</text>
|
||
</view>
|
||
<view v-if="messages.length === 0" class="empty-tip">
|
||
<text>暂无留言,快来抢沙发吧~</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, nextTick } from "vue";
|
||
|
||
const props = defineProps({
|
||
messages: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
});
|
||
|
||
const scrollTop = ref(0);
|
||
|
||
// 监听消息变化,自动滚动到底部
|
||
watch(
|
||
() => props.messages.length,
|
||
async () => {
|
||
await nextTick();
|
||
scrollTop.value = 99999;
|
||
},
|
||
);
|
||
</script>
|
||
|
||
<style scoped>
|
||
.message-board {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 128rpx;
|
||
padding: 0 34rpx; /* 对应 Figma 中 left: 17px */
|
||
}
|
||
|
||
.message-board-scroll {
|
||
height: 352rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start; /* 气泡左对齐,宽度适应内容 */
|
||
gap: 6rpx; /* 对应 Figma 中 3px 间距,rpx 自动换算 */
|
||
}
|
||
|
||
/* 留言气泡:对应 Figma 留言板 的圆角矩形 */
|
||
.message-bubble {
|
||
/* display: inline-flex; */
|
||
align-items: baseline;
|
||
flex-wrap: wrap;
|
||
max-width: max-content;
|
||
padding: 6rpx 16rpx; /* 适当内边距,让文字与气泡边距舒适 */
|
||
background: rgba(42, 17, 17, 0.3);
|
||
border-radius: 16rpx; /* 8px = 16rpx */
|
||
/* Figma 中的微妙旋转与倾斜,营造手写/手帐感 */
|
||
transform: rotate(-0.44deg) skewX(-0.1deg);
|
||
animation: bubbleFadeIn 0.3s ease-out;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.msg-user {
|
||
font-size: 24rpx; /* 12px = 24rpx */
|
||
color: #acf0c3;
|
||
font-weight: bold;
|
||
text-shadow: -1rpx 1rpx 4rpx rgba(206, 9, 9, 0.45);
|
||
font-family: "Abhaya Libre ExtraBold", sans-serif;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.msg-content {
|
||
font-size: 24rpx; /* 12px = 24rpx */
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
text-shadow: -1rpx 1rpx 4rpx rgba(206, 9, 9, 0.45);
|
||
font-family: "Abhaya Libre ExtraBold", sans-serif;
|
||
line-height: 1.5;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.empty-tip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 200rpx;
|
||
width: 100%;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
@keyframes bubbleFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20rpx) rotate(-0.44deg) skewX(-0.1deg);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) rotate(-0.44deg) skewX(-0.1deg);
|
||
}
|
||
}
|
||
</style>
|