消息界面

pages/message/mailMessage.scss

@@ -1,4 +1,3 @@
-
 page {
 	background-color: #161616;
 }
@@ -34,23 +33,42 @@ page {
 		}
 	}
 	.scroll-view_H {
-		white-space: nowrap;
-		width: 750rpx;color:#fff;
+		flex-direction: row;
+		width: 400rpx;
+		color: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 80rpx;
+		margin: 0 auto;
 		.item {
-			width:120rpx;border-radius: 18rpx;height:80rpx;
-			display: inline-flex;flex-direction:column;justify-content: center;align-items: center;
-			margin:0 20rpx;color:#999999;
+			width: 200rpx;
+			border-radius: 18rpx;
+			height: 80rpx;
+			display: inline-flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			margin: 0 0px;
+			color: #999999;
+			
 			.line {
-				width: 36rpx;height: 8rpx;margin-top: 20rpx;
+				width: 36rpx;
+				height: 8rpx;
+				margin-top: 10rpx;
 				background: #161616;
 				border-radius: 4rpx 4rpx 4rpx 4rpx;
 			}
 		}
+		
 		.active {
-			color:#fff;
+			color: #fff;
+			background: #161616;
 			.line {
-				width: 36rpx;height: 8rpx;margin-top: 20rpx;
-				background: linear-gradient( 90deg, #FF5869 0%, #F83881 100%);
+				width: 36rpx;
+				height: 8rpx;
+				margin-top: 10rpx;
+				background: linear-gradient(90deg, #FF5869 0%, #F83881 100%);
 				border-radius: 4rpx 4rpx 4rpx 4rpx;
 			}
 		}
@@ -63,48 +81,141 @@ page {
 	}
 }
 .list_info {
-	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
-	width:750rpx;
-	
+	width: 750rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	.item {
-		margin-top: 20rpx;color:#fff;font-size: 28rpx;
-		display: flex;flex-direction: column;justify-content: center;align-items: center;
+		margin-top: 20rpx;
+		color: #fff;
+		font-size: 28rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
 		width: 690rpx;
-		height: 770rpx;
-		background: #28292D;
-		border-radius: 28rpx 28rpx 28rpx 28rpx;
+		height: 200rpx;
+		border-bottom: 2rpx solid #393939;
+		
 		.avator {
-			width:258rpx;height:258rpx;
+			width: 100rpx;
+			height: 100rpx;
+			background: #fff;
+			border-radius: 50rpx;
+			margin-right: 20rpx;
+			flex-shrink: 0;
 			.icon {
-				width:258rpx;height:258rpx;border-radius: 129rpx;
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50rpx;
 			}
 		}
-		.tit {
-			width:690rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;
-			margin-top:50rpx;
-			.name {
-				font-size: 32rpx;
+		
+		.content {
+			flex: 1;
+			width: auto;
+			padding: 0;
+			margin-top: 0;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			
+			.tit {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: flex-start;
+				margin-right: 20rpx;
+				
+				.name {
+					font-size: 32rpx;
+				}
+				.time {
+					font-size: 20rpx;
+					color: #999;
+					margin-top: 8rpx;
+				}
+				.desc {
+					color: #999;
+					font-size: 28rpx;
+					margin-top: 12rpx;
+				}
 			}
-			.desc {
-				color:#999;font-size: 28rpx;margin-top:12rpx;
+			
+			.thumbnail {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 12rpx;
+				overflow: hidden;
+				background: #fff;
+				flex-shrink: 0;
+				
+				image {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
 			}
 		}
-		.list_mem {
-			width:100%;margin-top:30rpx;
-			display: flex;flex-direction: row;justify-content: center;align-items: center;
+	}
+}
+.list_article {
+	width: 750rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	.item {
+		margin-top: 20rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 690rpx;
+		background: #28292D;
+		border-radius: 28rpx;
+		padding-bottom: 30rpx;
+		
+		.thumbnail {
+			width: 690rpx;
+			height: 460rpx;
+			border-radius: 28rpx 28rpx 0 0;
+			overflow: hidden;
+			
 			image {
-				width:72rpx;height:72rpx;margin:0rpx 8rpx;border-radius: 36rpx;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
 			}
 		}
-		.btn_submit {
-			width: 390rpx;height: 96rpx;margin-top:30rpx;
-			background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
-			border-radius: 28rpx 28rpx 28rpx 28rpx;
-			display: flex;flex-direction: column;justify-content: center;align-items: center;
+		
+		.title {
+			width: 650rpx;
+			margin-top: 30rpx;
+			font-size: 32rpx;
+			color: #fff;
+			line-height: 1.4;
 		}
-		.gray {
-			background: linear-gradient( 142deg, #FF5967 50%, #FF2A95 10%);
-			
+		
+		.content {
+			width: 650rpx;
+			margin-top: 20rpx;
+			font-size: 26rpx;
+			color: #999;
+			line-height: 1.6;
+		}
+		
+		.divider {
+			width: 650rpx;
+			height: 2rpx;
+			background: #393939;
+			margin-top: 30rpx;
+		}
+		
+		.time {
+			width: 650rpx;
+			margin-top: 20rpx;
+			font-size: 26rpx;
+			color: #999;
 		}
 	}
 }

pages/message/mailMessage.vue

@@ -2,10 +2,10 @@
 	<view class="page">
 		<view class="mainBody">
 			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
-				<view class="item" :class="{'active':tab===0}" @click="checkTab(0)">
+<!-- 				<view class="item" :class="{'active':tab===0}" @click="checkTab(0)">
 					<text class="left">全部</text>
 					<view class="line"></view>
-				</view>
+				</view> -->
 				<view class="item" :class="{'active':tab===item.id}" @click="checkTab(item.id)"
 					v-for="(item,index) in cate" :key="index">
 					<text class="left">{{item.name}}</text>
@@ -14,25 +14,39 @@
 			</scroll-view>
 
 		</view>
-		<view class="list_info">
+		<view class="list_info" v-if="tab === 2">
 			<block v-for="(item,index) in list" :key="index">
 				<view class="item" @click="goDetail(item)">
 					<view class="avator">
-						<image class="icon" :src="item.image" mode="aspectFill">
-						</image>
-					</view>
-					<view class="tit">
-						<view class="name">{{item.name}}</view>
-						<view class="desc">市场价：¥{{item.price}}</view>
+						<image class="icon" :src="item.image" mode="aspectFill"></image>
 					</view>
-					<view class="list_mem">
-						<image class="icon" v-for="(item2,index2) in item.mem_list" :src="item2.avator"
-							mode="aspectFill" />
+					<view class="content">
+						<view class="tit">
+							<view class="name">{{item.name}}</view>
+							<view class="time">{{item.time}}</view>
+							<view class="desc">{{item.desc}}</view>
+						</view>
+						<view class="thumbnail">
+							<image :src="item.thumbnail" mode="aspectFill"></image>
+						</view>
 					</view>
-
 				</view>
 			</block>
+			<view class="blankHeight"></view>
+		</view>
 
+		<view class="list_article" v-if="tab === 1">
+			<block v-for="(item,index) in list2" :key="index">
+				<view class="item" @click="goDetail(item)">
+					<view class="thumbnail">
+						<image :src="item.thumbnail" mode="aspectFill"></image>
+					</view>
+					<view class="title">{{item.title}}</view>
+					<view class="content">{{item.content}}</view>
+					<view class="divider"></view>
+					<view class="time">{{item.time}}</view>
+				</view>
+			</block>
 			<view class="blankHeight"></view>
 		</view>
 
@@ -46,13 +60,36 @@
 		components: {},
 		data() {
 			return {
-				tab: 0,
+				tab: 1,
 				scrollTop: 0,
 				old: {
 					scrollTop: 0
 				},
-				list: [],
-				cate: ["消息","评论和赞"],
+				list: [{
+					image: '/static/images/avatar.png',
+					name: '张三',
+					time: '2024-03-20 12:30',
+					desc: '给你点赞了一下作品',
+					thumbnail: '/static/images/thumb1.png'
+				}, {
+					image: '/static/images/avatar2.png',
+					name: '李四',
+					time: '2024-03-19 15:45',
+					desc: '评论了你的作品：真不错！',
+					thumbnail: '/static/images/thumb2.png'
+				}],
+				list2: [{
+					thumbnail: '/static/images/article1.png',
+					title: '2024年最新艺术设计趋势',
+					content: '近期艺术设计领域出现了许多新的趋势，本文将为您详细解析这些新趋势带来的机遇与挑战...',
+					time: '2024-03-20 10:00'
+				}, {
+					thumbnail: '/static/images/article2.png',
+					title: '如何提升作品质量',
+					content: '作品质量是艺术创作中最重要的环节，本文将分享一些实用的技巧和方法...',
+					time: '2024-03-19 14:30'
+				}],
+				cate: [{"name": "消息",id: 1},{"name": "点赞和评论",id: 2}],
 			}
 		},
 		onLoad() {},
@@ -77,26 +114,10 @@
 				this.old.scrollTop = e.detail.scrollTop
 			},
 			goDetail(item) {
-				// uni.navigateTo({
-				// 	url: '/pages/my/wishDetail?id=' + item.id,
-				// })
+
 			},
 			loadData() {
-				// uni.request({
-				// 	url: this.$apiHost + '/Wish/getList',
-				// 	data: {
-				// 		uuid: getApp().globalData.uuid,
-				// 		cid: this.tab,
-				// 	},
-				// 	header: {
-				// 		'content-type': 'application/json'
-				// 	},
-				// 	success: (res) => {
-				// 		console.log("res", res.data)
-				// 		this.list = res.data.list;
-				// 		this.cate = res.data.cate;
-				// 	}
-				// });
+
 			},
 		}
 	}