|
|
@@ -0,0 +1,95 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>B站视频评论</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ margin: 0;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-container {
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-card {
|
|
|
+ display: flex;
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-section {
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #212121;
|
|
|
+ font-size: 14px;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-content {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-text {
|
|
|
+ color: #616161;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-meta {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ color: #9e9e9e;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="comment-container">
|
|
|
+ <h1 style="color: #212121; margin-bottom: 24px;">用户评论</h1>
|
|
|
+ <ul style="list-style: none; padding: 0;">
|
|
|
+ {{each rdata}}
|
|
|
+ <li class="comment-card">
|
|
|
+ <div class="user-section">
|
|
|
+ <img class="user-avatar" src="{{$value.userAvatar}}" alt="用户头像">
|
|
|
+ <div class="user-name">{{$value.userName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="comment-content">
|
|
|
+ <div class="comment-text">{{$value.msg}}</div>
|
|
|
+ <div class="comment-meta">
|
|
|
+ <span>{{$value.reply_time}}</span>
|
|
|
+ <span>{{$value.IPcaty}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ {{/each}}
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
枫林