个人中心

pages/user/contentDetails.vue

@@ -0,0 +1,173 @@
+<template>
+	<view class="details">
+		<view class="main"></view>
+		<view></view>
+		<view class="data-list">
+			<view>
+				<image src="/static/image/user/2.png"></image>
+				<text>2.5w</text>
+			</view>
+			<view>
+				<image src="/static/image/user/3.png" v-if="0"></image>
+				<image src="/static/image/user/7.png" v-else></image>
+				<text>2.5w</text>
+			</view>
+			<view>
+				<image src="/static/image/user/4.png" v-if="0"></image>
+				<image src="/static/image/user/6.png" v-else></image>
+				<text>2.5w</text>
+			</view>
+		</view>
+		<view class="comment-list">
+			<view class="item" v-for="(item, index) in 4" :key="index">
+				<view class="info">
+					<image></image>
+					<view class="center">
+						<view class="name">用户1</view>
+						<view class="time">6小时前</view>
+					</view>
+					<view class="btn" @click="showChat=true">回复</view>
+				</view>
+				<view class="content u-line-1">德铭阳光赞德铭阳光赞德铭阳光赞</view>
+			</view>
+		</view>
+		<u-popup v-model="showChat" mode="bottom" :mask=false>
+			<view class="chat">
+				<view class="input-box">
+					<input type="text">
+					<view class="btn">发送</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			showChat: false
+		}
+	},
+	onLoad(option) {
+		this.setNavTitle(option.current);
+	},
+	methods: {
+		setNavTitle(current) {
+			uni.setNavigationBarTitle({
+				title: current == 0 ? "图文详情" : "视频详情"
+			});
+		}
+	},
+};
+</script>
+<style lang="scss" scoped>
+.details {
+	min-height: calc(100vh - var(--window-top));
+	background-color: #ECECEC;
+	.main {
+		height: 740rpx;
+		margin: 2rpx 0rpx; 
+		background-color: #FFFFFF;
+	}
+	.comment-list {
+		.item {
+			background-color: #FFFFFF;
+			padding: 30rpx;
+			margin-bottom: 2rpx;
+			.info {
+				display: flex;
+				align-items: flex-end;
+				margin-bottom: 20rpx;
+				> image {
+					width: 60rpx;
+					height: 60rpx;
+					border-radius: 50%;
+					margin-right: 20rpx;
+					background-color: aqua;
+				}
+				.center {
+					margin-right: auto;
+					.name {
+						font-size: 26rpx;
+						color: rgba(51,51,51,1);
+						margin-bottom: auto;
+					}
+					.time {
+						font-size: 22rpx;
+						color: rgba(153,153,153,1);
+					}
+				}
+				.btn {
+					font-size: 26rpx;
+					color: rgba(51,51,51,1);
+				}
+			}
+			.content {
+				margin-left: 80rpx;
+				display: flex;
+			}
+		}
+	}
+	.data-list {
+		background-color: #FFFFFF;
+		display: flex;
+		height: 88rpx;
+		padding: 0 30rpx;
+		align-items: center;
+		justify-content: space-between;
+		@mixin image-class($width) {
+			> image {
+				width: $width;
+				height: 40rpx;
+				margin-right: 20rpx;
+			}
+		}
+		> view {
+			display: flex;
+			align-items: center;
+			&:first-child {
+				@include image-class(45rpx);
+			}
+			&:nth-child(2) {
+				@include image-class(40rpx);
+			}
+			&:last-child {
+				@include image-class(32rpx);
+			}
+			> text {
+				font-size: 28rpx;
+				color: rgba(51,51,51,1);
+			}
+		}
+	}
+	.chat {
+		background-color: #ECECEC;
+		width: 100%;
+		height: 98rpx;
+		padding: 19rpx 30rpx;
+		.input-box {
+			background-color: #FFFFFF;
+			width: 690rpx;
+			height: 60rpx;
+			background: rgba(255,255,255,1);
+			border-radius: 30rpx;
+			display: flex;
+			align-items: center;
+			> input {
+				flex: 1;
+				padding: 10rpx 30rpx;
+			}
+			.btn {
+				width: 90rpx;
+				background: rgba(255,120,15,1);
+				border-radius: 25rpx;
+				font-size: 26rpx;
+				color: rgba(255,255,255,1);
+				line-height: 50rpx;
+				text-align: center;
+				margin-right: 5rpx;
+			}
+		}
+	}
+}
+</style>