鸡汤来咯开发学习笔记-13

1.创建评论列表项组件，comment-item

<template>
    <view class="commentItem">
        <view class="outer">
            <view class="avatar">
                <image class="pic" src="../../static/images/defAvatar.png" mode="aspectFill"></image>
            </view>
            <view class="content">
                
                <view class="userinfo">
                    <view class="left">
                        <view class="name">tt</view>
                        <view class="time">1个月前</view>
                    </view>
                    <view class="right">
                        <view class="like">
                            <view class="num">33</view>
                            <uni-icons v-if="true" type="hand-up" size="20" color="#a7a7a7"></uni-icons>
                            <uni-icons v-else type="hand-up-filled" size="20" color="#dd524d"></uni-icons>
                        </view>
                        <view class="remove">
                            <uni-icons type="trash" size="20" color="#a7a7a7"></uni-icons>
                            <text>删除</text>
                        </view>
                    </view>
                </view>
                <view class="reply">
                    这是评论的内容
                </view>
            </view>
        </view>
    </view>

</template>

<script setup>

</script>

<style lang="scss" scoped>
.commentItem{
    padding: 30rpx;
    .outer{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .avatar{
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
            border-radius: 50%;
            overflow: hidden;
            .pic{
                width: 100%;
                height: 100%;
            }
            
        }
        .content{
            flex: 1;
            .userinfo{
                height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    .name{
                        font-size: 26rpx;
                        color: $text-font-color-2;
                    }
                    .time{
                        font-size: 22rpx;
                        color: $text-font-color-3; //引用了base-style中的常量自定义颜色，方便以后统一修改
                    }
                }
                .right{
                    color: $text-font-color-3;
                    font-size: 22rpx;
                    display: flex;
                    align-items: center;
                    .like{
                        display: flex;
                        align-items: center;
                        .num{
                            margin-right: 5rpx;
                        }
                    }
                    .remove{
                        margin-left: 20rpx;
                        display: flex;
                        align-items: center;  //垂直中心
                                justify-content: center; //水平中心
                    }
                    
                }
            }
            .reply{
                padding: 20rpx 0;
                font-size: 30rpx;
                color: $text-font-color-1;
            }
        }
        
        
    }
}
    

</style>

2.再在detail中引用这个组件

<view class="comment">
            <view class="list">
                <view class="row">
                    <comment-item></comment-item>
                </view>
            </view>
        </view>