1

src/views/public/CommentGenerator.vue

@@ -1,39 +1,25 @@
 <template>
   <div class="mobile-container">
     <div class="mobile-card">
-      <div class="mobile-header">
-        <h3>评论生成（公开）</h3>
-        <div class="header-info">
-          <span class="ip-info">
-            <i class="el-icon-monitor"></i>
-            IP: {{ currentIP || '获取中...' }}
-          </span>
-        </div>
-      </div>
-      
       <div class="mobile-form">
-        <!-- 使用统计区域 -->
+        <!-- 访问统计区域 -->
         <div class="form-section usage-statistics-section">
-          <div class="form-label">
+          <div class="usage-stats-row">
-            <i class="el-icon-data-line"></i>
-            使用统计
-          </div>
-          <div class="usage-stats-grid">
             <div class="usage-stat-item">
-              <div class="usage-stat-number">{{ usageStatistics.today || 0 }}</div>
               <div class="usage-stat-label">今天</div>
+              <div class="usage-stat-number">{{ usageStatistics.today || 0 }}</div>
             </div>
             <div class="usage-stat-item">
-              <div class="usage-stat-number">{{ usageStatistics.last7Days || 0 }}</div>
               <div class="usage-stat-label">近7天</div>
+              <div class="usage-stat-number">{{ usageStatistics.last7Days || 0 }}</div>
             </div>
             <div class="usage-stat-item">
-              <div class="usage-stat-number">{{ usageStatistics.last30Days || 0 }}</div>
               <div class="usage-stat-label">近30天</div>
+              <div class="usage-stat-number">{{ usageStatistics.last30Days || 0 }}</div>
             </div>
             <div class="usage-stat-item">
-              <div class="usage-stat-number">{{ usageStatistics.total || 0 }}</div>
               <div class="usage-stat-label">累计</div>
+              <div class="usage-stat-number">{{ usageStatistics.total || 0 }}</div>
             </div>
           </div>
         </div>
@@ -553,46 +539,14 @@ export default {
   overflow: hidden;
 }
 
-/* 头部样式 */
-.mobile-header {
-  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
-  color: #fff;
-  padding: 20px 16px;
-  text-align: center;
-}
-
-.mobile-header h3 {
-  margin: 0 0 12px 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.header-info {
-  margin-top: 8px;
-}
-
-.ip-info {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  opacity: 0.9;
-  background: rgba(255, 255, 255, 0.2);
-  padding: 4px 12px;
-  border-radius: 12px;
-}
-
-.ip-info i {
-  font-size: 14px;
-}
 
 /* 表单样式 */
 .mobile-form {
-  padding: 20px 16px;
+  padding: 12px 16px;
 }
 
 .form-section {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .form-label {
@@ -852,10 +806,6 @@ export default {
     height: 80px;
   }
   
-  .mobile-header h3 {
-    font-size: 16px;
-  }
-  
   .generate-btn {
     height: 44px;
     font-size: 15px;
@@ -1144,45 +1094,48 @@ export default {
   }
 }
 
-/* 使用统计样式 */
+/* 访问统计样式 */
 .usage-statistics-section {
   background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
   border: 1px solid #e1e8ff;
-  border-radius: 10px;
+  border-radius: 8px;
-  padding: 12px;
+  padding: 8px 10px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
-.usage-statistics-section .form-label {
+.usage-stats-row {
-  font-size: 13px;
+  display: flex;
-  margin-bottom: 8px;
+  justify-content: space-around;
-}
+  align-items: center;
-
+  gap: 4px;
-.usage-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
 }
 
 .usage-stat-item {
+  flex: 1;
   text-align: center;
   background: #fff;
-  padding: 8px 6px;
+  padding: 6px 4px;
-  border-radius: 6px;
+  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
+  display: flex;
-
+  flex-direction: column;
-.usage-stat-number {
+  align-items: center;
-  font-size: 18px;
+  justify-content: center;
-  font-weight: 700;
-  color: #409eff;
-  margin-bottom: 2px;
 }
 
 .usage-stat-label {
-  font-size: 11px;
+  font-size: 10px;
   color: #909399;
   font-weight: 500;
+  margin-bottom: 2px;
+  line-height: 1.2;
+}
+
+.usage-stat-number {
+  font-size: 16px;
+  font-weight: 700;
+  color: #409eff;
+  line-height: 1.2;
 }
 
 /* 历史记录样式 */
@@ -1263,30 +1216,24 @@ export default {
 /* 响应式适配 */
 @media (max-width: 480px) {
   .usage-statistics-section {
-    padding: 10px;
+    padding: 6px 8px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
   }
   
-  .usage-statistics-section .form-label {
+  .usage-stats-row {
-    font-size: 12px;
+    gap: 3px;
-    margin-bottom: 6px;
-  }
-  
-  .usage-stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 6px;
   }
 
   .usage-stat-item {
-    padding: 8px 4px;
+    padding: 5px 3px;
   }
 
   .usage-stat-number {
-    font-size: 16px;
+    font-size: 14px;
   }
 
   .usage-stat-label {
-    font-size: 10px;
+    font-size: 9px;
   }
 
   .history-item-header {
@@ -1294,11 +1241,6 @@ export default {
     align-items: flex-start;
     gap: 4px;
   }
-
-  .ip-info {
-    font-size: 12px;
-    padding: 3px 10px;
-  }
 }
 </style>