vant4 评论二级的样式

vant4 是基于 Vue.js 的移动端组件库，如果要为评论添加二级样式，可以使用 vant4 中的 Collapse 折叠面板组件来实现。具体步骤如下：

1. 引入 vant4 组件库和 CSS 样式。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

2. 在组件中使用 Collapse 组件，并为每个评论添加一个 CollapseItem 组件。

<template>
  <div>
    <van-collapse v-model="active">
      <van-collapse-item v-for="(comment, index) in comments" :key="index">
        <div class="comment">
          <div class="comment-header">{{ comment.author }}</div>
          <div class="comment-content">{{ comment.content }}</div>
          <<div class="comment-footer">
            <a href="#" @click="reply(comment)">回复</a>
          </div>
          <van-collapse>
            <van-collapse-item v-for="(reply, i) in comment.replies" :key="i">
              <div class="reply">
                <div class="reply-header">{{ reply.author }}</div>
                <div class="reply-content">{{ reply.content }}</div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

3. 在 CSS 样式中设置评论和回复的样式。

.comment {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.comment-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-content {
  font-size: 14px;
  margin-bottom: 5px;
}

.comment-footer {
  margin-top: 5px;
}

.reply {
  padding: 10px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}

.reply-header {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.reply-content {
  font-size: 12px;
  margin-bottom: 5px;
}

通过以上步骤，就可以为评论添加二级样式了。每个评论下面的回复可以通过 Collapse 组件实现折叠和展开。