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
+217 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/room/index.vue
+199 -33
View File
@@ -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>