uniapp 为消息显示添加背景色，消息显示背景，聊天信息样式

.name {
	    padding: 15rpx 15rpx;
	    width: fit-content;
		/* 使元素的宽度根据其内容自动调整，以适应内容的大小。 */
		
	    background-color: aquamarine;
	    border-radius: 8px;
		/* 设置元素的边框圆角为12像素，使其拥有圆角的外观。 */
		
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    /* text-align: center; */
		/* 将元素内文本的水平对齐方式设置为居中对齐。 */
	  }

这是相关文本css样式

<template>
	<view class="content">
		<view class="buttompadding">
			<view class="row" v-for="item in note" :key="item.index">
				<view class="name">
					{{item.title}}
				</view>
			</view>
		</view>



		<view class="inputstyle">
			<input class="title" type="text" v-model="title" placeholder="请输入内容" />
			<button class="buttonstyle" @click="onpush">添加</button>

		</view>
		<view class="z">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				note: [],
				listarr: [],
				title: '',
				copytitle: ''
			}

		},
		onLoad() {
			// 在页面中保存文本到本地
			// uni.setStorageSync('note', '2023年1月要看一本书');
			// 在页面中从本地读取文本并显示在屏幕上
			// this.note = uni.getStorageSync('note');
			// console.log(this.note); // 输出 '2023年1月要看一本书'

			//页面初始化调用数据
			this.getdata()
			this.onsubmit()
		},
		methods: {
			//获取数据的getdata方法

			getdata() {
				uniCloud.callFunction({
					name: "getnotebookdata",
					data: {}
				}).then(res => {

					this.listarr = res.result.data
					// console.log(this.listarr);
					// //将数据进行重新排列，按照正序
					this.listarr.sort((a, b) => {
						return a._id.localeCompare(b._id);
					});

					// 数据存储到本地
					uni.setStorageSync('note', this.listarr);
				})

			},
			onsubmit() {
				this.note = uni.getStorageSync('note');
				console.log(this.note); // 本地数据的读取

			},
			onpush() {
				//将数据加入数组中
				const newText = {
					title: this.title
				}; // 要添加的文本
				this.note.push(newText); // 使用 push() 方法将文本添加到本地数组中
				console.log(this.note); //打印本地数据
				this.copytitle = this.title
				this.title = ''

				//连接云函数进行数据存储
				uniCloud.callFunction({
					name: "contentupload",
					data: {
						title: this.copytitle
					}
				}).then(res => {
					console.log(res);
				})

			}



		}
	}
</script>

<style>
	.content {
		padding: 30rpx 30rpx;
	}

	.inputstyle {
		/* position的优先级要比title的高一些，需要优先设置position */
		position: fixed;
		right: 30rpx;
		left: 30rpx;
		bottom: 15px;

		background-color: #FFFFFF;

		display: flex;
		justify-content: space-between;


		.title {
			flex: 1;
		}
	}

	.name {
	    padding: 15rpx 15rpx;
	    width: fit-content;
		/* 使元素的宽度根据其内容自动调整，以适应内容的大小。 */
		
	    background-color: aquamarine;
	    border-radius: 8px;
		/* 设置元素的边框圆角为12像素，使其拥有圆角的外观。 */
		
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    /* text-align: center; */
		/* 将元素内文本的水平对齐方式设置为居中对齐。 */
	  }

	.content {
		padding: 15rpx 30rpx 170rpx;
	}

	.z {
		background-color: #FFFFFF;
		position: fixed;
		right: 30rpx;
		left: 30rpx;
		bottom: 0;
		height: 15px;
	}

	.row {
		padding: 20rpx 0 0;
	}
</style>

这是全部代码