# 评论列表
# 样式 001
# data
const commentListTemplete001 = [
{
avatar: '/static/logo.png',
nickname: '卮言',
star: 4,
create_time: '2020-07-31 22:24',
content: 'Fast-UI 棒极了'
},
{
avatar: '/static/logo.png',
nickname: '卮言',
star: 4,
create_time: '2020-07-31 22:24',
content: 'Fast-UI 棒极了',
images: ['https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3756231566,3588819075&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1792672428,3675505084&fm=26&gp=0.jpg']
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# view
<view class="fu-comment-list-templete001">
<view class="fu-comment-list-templete001-item" v-for="(item, index) in commentListTemplete001" :key="index">
<view class="lside">
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
</view>
<view class="rside">
<view class="header">
<view class="left-box">
<view class="nickname">{{item.nickname}}</view>
<view class="star-box">
<text :class="{'fu-iconfont': true, active: j + 1 <= item.star}" v-for="(star, j) in '12345'"></text>
<!-- <image class="star" src="/static/contents/star.png" v-for="(star, j) in '12345'" :src="j + 1 <= item.star ? '/static/contents/star.png' : '/static/contents/star_gray.png'"></image> -->
</view>
</view>
<view class="right-box">{{item.create_time}}</view>
</view>
<view class="comment-content">{{item.content}}</view>
<view class="comment-image-box" v-if="item.images && item.images.length != 0">
<view class="image-wrapper" v-for="(img, imgIndex) in item.images" :key="imgIndex">
<image :src="img|assembleImgSrc" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# scss
.fu-comment-list-templete001 {
// 头像尺寸
$fu-comment-list-avatar-size: 72rpx;
// 评论图片的尺寸
$fu-comment-list-image-size: 150rpx;
&-item {
display: flex;
padding: 32rpx 32rpx 0 32rpx;
position: relative;
background-color: #fff;
&:after {
@include bottom-line(#eee);
}
.lside {
width: $fu-comment-list-avatar-size;
.avatar {
width: $fu-comment-list-avatar-size;
height: $fu-comment-list-avatar-size;
border-radius: 50%;
display: block;
background-color: #ccc;
}
}
.rside {
flex: 1;
padding: 0 16rpx 8rpx;
.header {
display: flex;
align-items: center;
.left-box {
flex: 1;
.nickname {
font-size: 28rpx;
color: #333;
line-height: 1.5;
}
.star-box {
display: flex;
padding-top: 4rpx;
.star {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
text {
color: #ccc;
font-size: 26rpx;
padding-right: 8rpx;
&.active {
color: #FFA01F;
}
}
}
}
.right-box {
font-size: 22rpx;
color: #BFBFBF;
}
}
.comment-content {
font-size: 28rpx;
color: #333;
padding: 16rpx 0 24rpx;
}
.comment-image-box {
display: flex;
flex-wrap: wrap;
padding-bottom: 24rpx;
.image-wrapper {
width: 190rpx;
height: 190rpx;
margin-right: 15rpx;
&:nth-child(3n) {
margin-right: 0;
}
image {
width: 190rpx;
height: 190rpx;
border-radius: 8rpx;
display: block;
background-color: #f7f7f7;
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106