256 lines
5.3 KiB
Vue
256 lines
5.3 KiB
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> |