dengtongyu/yoho
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
dengtongyu committed 2020-08-20 18:28:03 +08:00
1 parent 7494f9f790
commit 59a03fe700
3 files changed
+195 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

App.vue
+3
View File
@@ -20,4 +20,7 @@ export default {
src: url('/static/uni.ttf'); src: url('/static/uni.ttf');
} }
/* #endif */ /* #endif */
page {
height: 100%;
}
</style> </style>
pages/room/avatar.vue
+14 -5
View File
@@ -4,7 +4,7 @@
<view class="avatar-image"> <view class="avatar-image">
<image class="image-style" mode="aspectFill" :src="showImage" @error="imageError"></image> <image class="image-style" mode="aspectFill" :src="showImage" @error="imageError"></image>
</view> </view>
<text class="avatar-text">{{name}}</text> <view class="avatar-text"><text>{{name}}</text></view>
</view> </view>
</template> </template>
@@ -17,7 +17,7 @@
}, },
name: { name: {
type: String, type: String,
default: '' default: '未知用户'
}, },
}, },
data() { data() {
@@ -47,8 +47,10 @@
.avatar-icon {} .avatar-icon {}
.avatar-image { .avatar-image {
width: 120px; width: 130px;
height: 120px; height: 130px;
overflow: hidden;
border-radius: 50%;
} }
.image-style { .image-style {
@@ -56,5 +58,12 @@
height: 100%; height: 100%;
} }
.avatar-text {} .avatar-text {
width: 100%;
text-align: center;
color: #646566;
font-size: 24px;
height: 30px;
line-height: 30px;
}
</style> </style>
pages/room/index.vue
+178 -12
View File
@@ -1,17 +1,45 @@
<template> <template>
<view> <view class="room-pages">
<view class="top-block"> <view class="room-content-block" :enable-flex="true">
<view class="mike-site-block"> <view class="room-top-block">
<view class="mike-site-top"> <view class="mike-site-block">
<avatar></avatar> <view class="mike-site-top" :enable-flex="true">
</view> <avatar></avatar>
<view class="mike-site-main"> </view>
<avatar></avatar> <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>
</view>
<view class="bottom-block">
</view> </view>
</view> </view>
</template> </template>
@@ -19,9 +47,93 @@
<script> <script>
import avatar from './avatar.vue' import avatar from './avatar.vue'
export default { export default {
components: {
avatar
},
data() { data() {
return { 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: { methods: {
@@ -31,5 +143,59 @@
</script> </script>
<style> <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> </style>