更新
This commit is contained in:
dengtongyu committed
1 parent
7494f9f790
commit
59a03fe700
3 files changed
+217
-39
No files matched your search
+14
-5
@@ -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>
|
||||
+199
-33
@@ -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>
|
||||
Reference in new issue
Block a user