From 59a03fe70050ff8ee8f4a951cf3b68c99db19cbc Mon Sep 17 00:00:00 2001
From: "tony.deng" <dengtongyu123@163.com>
Date: Thu, 20 Aug 2020 18:28:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue               |   5 +-
 pages/room/avatar.vue |  19 +++-
 pages/room/index.vue  | 232 ++++++++++++++++++++++++++++++++++++------
 3 files changed, 217 insertions(+), 39 deletions(-)

diff --git a/App.vue b/App.vue
index 0df57e1..a032c38 100755
--- a/App.vue
+++ b/App.vue
@@ -19,5 +19,8 @@ export default {
 	font-family: uniicons;
 	src: url('/static/uni.ttf');
 }
-/* #endif */
+/* #endif */
+page {
+	height: 100%;
+}
 </style>
diff --git a/pages/room/avatar.vue b/pages/room/avatar.vue
index c64ce65..c5402c5 100644
--- a/pages/room/avatar.vue
+++ b/pages/room/avatar.vue
@@ -4,7 +4,7 @@
 		<view class="avatar-image">
 			<image class="image-style" mode="aspectFill" :src="showImage" @error="imageError"></image>
 		</view>
-		<text class="avatar-text">{{name}}</text>
+		<view class="avatar-text"><text>{{name}}</text></view>
 	</view>
 </template>
 
@@ -17,7 +17,7 @@
 			},
 			name: {
 				type: String,
-				default: ''
+				default: '未知用户'
 			},
 		},
 		data() {
@@ -47,8 +47,10 @@
 	.avatar-icon {}
 
 	.avatar-image {
-		width: 120px;
-		height: 120px;
+		width: 130px;
+		height: 130px;
+		overflow: hidden;
+		border-radius: 50%;
 	}
 
 	.image-style {
@@ -56,5 +58,12 @@
 		height: 100%;
 	}
 
-	.avatar-text {}
+	.avatar-text {
+		width: 100%;
+		text-align: center;
+		color: #646566;
+		font-size: 24px;
+		height: 30px;
+		line-height: 30px;
+	}
 </style>
diff --git a/pages/room/index.vue b/pages/room/index.vue
index 1e41658..27db432 100644
--- a/pages/room/index.vue
+++ b/pages/room/index.vue
@@ -1,35 +1,201 @@
-<template>
-	<view>
-		<view class="top-block">
-			<view class="mike-site-block">
-				<view class="mike-site-top">
-					<avatar></avatar>
-				</view>
-				<view class="mike-site-main">
-					<avatar></avatar>
-				</view>
-			</view>
-		</view>
-		<view class="bottom-block">
-			
-		</view>
-	</view>
-</template>
-
-<script>
-	import avatar from './avatar.vue'
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
+<template>
+	<view class="room-pages">
+		<view class="room-content-block" :enable-flex="true">
+			<view class="room-top-block">
+				<view class="mike-site-block">
+					<view class="mike-site-top" :enable-flex="true">
+						<avatar></avatar>
+					</view>
+					<view class="mike-site-main" :enable-flex="true">
+						<view class="mike-site-item">
+							<avatar></avatar>
+						</view>
+						<view class="mike-site-item">
+							<avatar></avatar>
+						</view>
+						<view class="mike-site-item">
+							<avatar></avatar>
+						</view>
+						<view class="mike-site-item">
+							<avatar></avatar>
+						</view>
+						<view class="mike-site-item">
+							<avatar></avatar>
+						</view>
+						<view class="mike-site-item">
+							<avatar></avatar>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="room-bottom-block">
+				<view class="room-bottom-comment">
+					<scroll-view scroll-y="true" class="comment-scroll-box">
+						<view class="comment-item-block" v-for="(item,index) in commentList" :key="item.id">
+							<view class="comment-item-inline">
+								<text class="comment-item-name">{{item.name}}</text>
+								<text class="comment-item-content">{{item.content}}</text>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import avatar from './avatar.vue'
+	export default {
+		components: {
+			avatar
+		},
+		data() {
+			return {
+				commentList: [
+					{
+						id: '1',
+						name: '士大夫撒',
+						content: '似懂非懂发'
+					},
+					{
+						id: '2',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发随时随地'
+					},
+					{
+						id: '3',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发'
+					},
+					{
+						id: '4',
+						name: '士大夫撒',
+						content: '似懂非懂随'
+					},
+					{
+						id: '5',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发时随地发'
+					},
+					{
+						id: '6',
+						name: '士大夫撒',
+						content: '懂随时随地发'
+					},
+					{
+						id: '7',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发似懂非'
+					},
+					{
+						id: '8',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发'
+					},
+					{
+						id: '1',
+						name: '士大夫撒',
+						content: '似懂非懂发'
+					},
+					{
+						id: '2',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发随时随地'
+					},
+					{
+						id: '3',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发'
+					},
+					{
+						id: '4',
+						name: '士大夫撒',
+						content: '似懂非懂随'
+					},
+					{
+						id: '5',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发时随地发'
+					},
+					{
+						id: '6',
+						name: '士大夫撒',
+						content: '懂随时随地发'
+					},
+					{
+						id: '7',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发似懂非'
+					},
+					{
+						id: '8',
+						name: '士大夫撒',
+						content: '似懂非懂随时随地发'
+					}
+				]
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
 <style>
-
+	.room-pages {
+		height: 100%;
+	}
+	.room-content-block {
+		height: 100%;
+		/* display: flex;
+		flex-direction: column; */
+	}
+	.room-top-block {
+		height: 576px;
+	}
+	.room-bottom-block {
+		/* flex: 1; */
+		height: calc(100% - 576px - 60px);
+		padding: 30px 40px;
+	}
+	.mike-site-top {
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.mike-site-main {
+		display: flex;
+		flex-wrap: wrap;
+
+	}
+	.mike-site-item {
+		margin: 15px 60px;
+	}
+	.room-bottom-comment {
+		height: 100%;
+	}
+	.comment-scroll-box {
+		height: 100%;
+	}
+	.comment-item-block {
+		font-size: 24px;
+		margin-bottom: 15px;
+	}
+	.comment-item-inline {
+		display: inline;
+		line-height: 30px;
+		border-radius: 8px;
+		background-color: rgba(0,0,0,0.4);
+		padding: 0 10px;
+	}
+	.comment-item-name {
+		color: #007AFF;
+		margin-right: 10px;
+	}
+	.comment-item-content {
+		color: #666666;
+	}
 </style>