talk_appAmin/pages/Friend/Interactivemessage.vue

<!-- 互动消息 -->
<template>
	<navbar_neadVue title="互动消息"></navbar_neadVue>

	<view style="position: fixed; top: 0;bottom: 0; left: 0; right: 0; background-color: #ffffff; z-index: -1;"></view>
	<view style="margin-left: 32rpx; margin-right: 32rpx;">
		<u-tabs :lineWidth="25" :lineHeight="2" itemStyle="padding:12rpx;" lineColor="#3477fc" :list="list1"
			@change="tabChange"></u-tabs>
	</view>

	<view style="width: 750rpx;
height: 2rpx;
background: #f4f5f6;"></view>


	<view class="viewcontent">
		<view class="viewleft">
			<image src="../../static/images/icon/tu4-1.jpg" style="width: 82rpx; height: 82rpx; border-radius: 82rpx;">
			</image>
		</view>
		<view class="viewright">

			<view class="rightbutton">
				<text>回关</text>
			</view>

			<view class="viewtoptext">
				<text class="viewtoptextfirst">爱吃饭的小张</text>
				<text class="viewtoptextlast" style="margin-left: 20rpx;">2024.06.01</text>
			</view>

			<view class="viewbottomtext">
				<text>看你和我那么投缘，所以点个关注喽！</text>
			</view>
		</view>
	</view>


	<view class="viewcontent">
		<view class="viewleft">
			<image src="../../static/images/icon/tu4-1.jpg" style="width: 82rpx; height: 82rpx; border-radius: 82rpx;">
			</image>
			<image src="../../static/images/sign/type1.png" class="botimage"></image>
		</view>
		<view class="viewright" style="padding-top: 23rpx; margin-left: -16rpx;">
			<view class="viewtoptext">
				<text class="viewtoptextfirst" style="margin-top: 0rpx;">爱吃饭的小张</text>
				<view>
					<text class="viewtoptexttitle">赞了你的话题</text>
					<text class="viewtoptextlast" style="margin-left: 20rpx;">2024.06.01</text>
				</view>
			</view>

			<view class="viewtypebottomtext">
				<text>话题：下班之后一般喜欢吃什么？自己做饭还是吃1111111</text>
			</view>

		</view>
	</view>

	<view class="viewcontent">
		<view class="viewleft">
			<image src="../../static/images/icon/tu4-1.jpg" style="width: 82rpx; height: 82rpx; border-radius: 82rpx;">
			</image>
			<image src="../../static/images/sign/type2.png" class="botimage"></image>
		</view>
		<view class="viewright" style="padding-top: 23rpx; margin-left: -16rpx;">
			<view class="viewtoptext">
				<text class="viewtoptextfirst" style="margin-top: 0rpx;">爱吃饭的小张</text>
				<view>
					<text class="viewtoptexttitle" style="float: left;width: 370rpx;overflow: hidden;
		word-wrap: break-word;
		line-height: 21rpx;
		padding-top: 7rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;">回复了你的评论：你说的对，要不是之</text>
					<text class="viewtoptextlast" style="margin-left: 20rpx;">2024.06.01</text>
				</view>
			</view>

			<view class="viewtypebottomtext">
				<text>话题：下班之后一般喜欢吃什么？自己做饭还是吃1111111</text>
			</view>

		</view>
	</view>


</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import navbar_neadVue from '@/pages/common/navbar/navbar_nead.vue';

	const list1 = reactive([{
			name: '全部消息'
		},
		{
			name: '点赞'
		},
		{
			name: '评论'
		},
		{
			name: '关注'
		}
	])

	function tabChange(index) {
		console.log('当前选中的选项卡索引：', index);
	}



	const arr = reactive([{
			id: 1,
			image: "",
			name: "",
			time: "",
			type: "",
			content: ""
		},
		{
			id: 2,
			image: "",
			name: "",
			time: "",
			type: "",
			content: ""
		},

	])
</script>

<style>
	@import '@/pages/common/navbar/navbar.css';

	:deep(.u-tabs__wrapper__nav__item) {
		flex: 1 1 0% !important;
	}

	.viewcontent {
		width: 750rpx;
		height: 130rpx;
		/* background: #d1d1d1; */
		display: flex;
	}

	.viewleft {
		padding-top: 24rpx;
		padding-left: 32rpx;
	}

	.viewright {
		padding-top: 33rpx;
		padding-left: 32rpx;
		width: 100%;
	}

	.rightbutton {
		width: 72rpx;
		height: 40rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background: #3477fc;
		float: right;
		margin-right: 32rpx;
		vertical-align: middle;
		text-align: center;
		margin-top: 20rpx;
	}

	.rightbutton>text {
		display: block;
		font-weight: 500;
		font-size: 20rpx;
		text-align: left;
		color: #FFFFFF;
		text-align: center;
		line-height: 40rpx;
	}

	.viewtoptextfirst {
		font-weight: 600;
		/* width: 173rpx; */
		height: 29rpx;
		font-size: 28rpx;
		text-align: left;
		color: #000000;
	}

	.viewtoptextlast {
		font-weight: Regular;
		/* width: 89rpx; */
		height: 15rpx;
		font-size: 18rpx;
		text-align: left;
		color: #999999;
	}

	.viewtoptexttitle {
		font-weight: Regular;
		/* width: 120rpx; */
		height: 21rpx;
		font-size: 20rpx;
		text-align: left;
		color: #000000;
	}

	.viewbottomtext {
		font-weight: Regular;
		/* width: 327rpx; */
		height: 21rpx;
		font-size: 20rpx;
		text-align: left;
		color: #4E4E4E;


		/* overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; */
	}

	.viewtypebottomtext {
		font-weight: Regular;
		/* width: 468rpx; */
		height: 21rpx;
		font-size: 20rpx;
		text-align: left;
		color: #999999;
		line-height: 21rpx;

		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	/* / */
	.botimage {
		width: 32rpx;
		height: 32rpx;
		position: relative;
		bottom: 40rpx;
		right: -50rpx;
	}
</style>