75 lines
1.3 KiB
Vue
75 lines
1.3 KiB
Vue
<template>
|
||
<view class="gift-message-card">
|
||
<view class="message-header">
|
||
<image class="avatar" :src="avatar" mode="aspectFill"></image>
|
||
<text class="gift-text">{{ nickname }} 赠您一份礼物，请查收！</text>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="message-content">
|
||
<text class="message-text">{{
|
||
gift_mark || "天天开心，所得皆所愿~"
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "SendGiftMarkCard",
|
||
props: {
|
||
avatar: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
nickname: {
|
||
type: String,
|
||
default: "匿名",
|
||
},
|
||
gift_mark: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.gift-message-card {
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 24rpx;
|
||
.message-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.avatar {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.gift-text {
|
||
font-size: 28rpx;
|
||
color: #ae5a2a;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
height: 1rpx;
|
||
background-color: #f5f5f5;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.message-content {
|
||
.message-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
</style>
|