File: /var/www/dk/wp-content/themes/food/demo_html/comments.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>vite Taitwind 留言板</title>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<main class="p-4 bg-gray-50 min-h-screen w-100 py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]">
<div class="max-w-screen-xl mx-auto bg-white p-8 rounded-1g shadow-2x1">
<h2 class="text-3xl my-6">评论</h2>
<form action="" class="grid">
<textarea name="comment" id="" placeholder="请输入你的评论" class="bg-gray-50 p-2 rounded"></textarea>
<fieldset class="py-4">
<input type="submit" valve="评论" class="px-4 py-1 bg-blue-600 rounded text-white">
<input type="reset" value="取消" class="px-4 py-1 bg-white rounded border ml-3">
</fieldset>
</form>
<div class="border-b border-gray-300 my-2 mb-4"></div>
<div class="flex">
<!-- 即使在 public 文件夹下，也需要使用 / 绝对路径引用它下面的文件，省略 Public -->
<img :src="avatar" alt="" class="w-12 h-12 mr-4 rounded-full" />
<div>
<p>{{ user }}</p>
<p class="text-gray-600 text-sm">{{ time }}</p>
</div>
<!-- 菜单考右对齐 -->
<span class="ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
</svg>
</span>
</div>
<p class="text-gray-600 py-4">
{{ content }}
</p>
<div class="pl-8 border-l-2 border-gray-200">
<slot></slot>
</div>
<button class="pt-4 text-blue-600" :class="[showCommentBox ? 'pb-2' : 'pb-10']"
@click="showCommentBox = !showCommentBox">
回复
</button>
<CommentBox v-if="showCommentBox" class="mb-4" @submit="
emit('submit', $event);
showCommentBox = false;" />
</div>
</main>
</body>
</html>