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

前端 · 2024-07-07

1、在评论组件中加入更多评论回复模块
页面区

<view class="subReply">
            <view class="list">
                <view class="row">
                    张三:啊啊啊对对
                </view>
                <view class="row">
                    李四:66666
                </view>
                <view class="row more">共3条回复     //css的多个选择器
                    <uni-icons type="right" color="#a7a7a7" size="16"></uni-icons>
                </view>
            </view>
        </view>

样式

.subReply{
        padding-left: 80rpx;
        .list{
            background: #f4f4f4;
            padding: 20rpx;
            border-radius: 10rpx;
            .row{
                line-height: 1.8em;
                font-size: 28rpx;
                color: $text-font-color-2;
            }
            .more{
                color: $text-font-color-3;
            }
        }
    }

3.写入回复@的内容与样式

<view class="reply">
                    <text class="text">
                        回复<text class="nickname">@tuntun</text>
                    </text>
                    这是评论的内容
                </view>

样式

.text{
                    color: $text-font-color-3; //加入高亮的颜色
                    .nickname{
                        color: $brand-theme-color;
                    }
                }

鸡汤来咯
Theme Jasmine by Kent Liao