202 lines
4.0 KiB
Vue
202 lines
4.0 KiB
Vue
<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>
|