|
|
@@ -1,6 +1,21 @@
|
|
|
<template>
|
|
|
<view class="center">
|
|
|
-
|
|
|
+ <view class="message">
|
|
|
+ <view class="item" v-for="l in list">
|
|
|
+ <view class="img">
|
|
|
+ <image :src="l.image" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="top">
|
|
|
+ <view class="title">{{ l.name }}</view><view class="time">{{ l.time }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="concent clamp2">{{ l.last_message.detail }}</view><view class="icon" v-show="l.unwatch_message>0"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -19,6 +34,7 @@ export default {
|
|
|
methods: {
|
|
|
loadData() {
|
|
|
messageList({page:1,limit:10}).then(({data}) =>{
|
|
|
+ this.list = data
|
|
|
console.log(data)
|
|
|
})
|
|
|
}
|
|
|
@@ -32,5 +48,59 @@ export default {
|
|
|
width: 100%;
|
|
|
background: #F8F8F8;
|
|
|
}
|
|
|
+ .message {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ background-color: #fff;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ border-bottom: solid 1rpx #f8f8f8;
|
|
|
+ .img {
|
|
|
+ margin: auto 0;
|
|
|
+ width: 110rpx;
|
|
|
+ margin-left: 0rpx;
|
|
|
+ image {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: calc(100% - 110rpx);
|
|
|
+ display: grid;
|
|
|
+ align-content: space-between;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title {
|
|
|
+ color: #000;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .concent {
|
|
|
+ width: calc(100% - 30rpx);
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ margin: auto 0;
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background-color: #FB555C;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
</style>
|
