取名小程序

NamingAssistant/pages/result/index.ttss

@@ -102,6 +102,56 @@
   margin-bottom: 8px;
 }
 
+.element-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: rgba(18, 24, 46, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  padding: 16px 18px;
+  color: rgba(255, 244, 227, 0.85);
+}
+
+.chart-title {
+  font-size: 14px;
+  letter-spacing: 3px;
+  text-align: center;
+}
+
+.chart-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.chart-label {
+  width: 42px;
+  font-size: 13px;
+  color: rgba(255, 244, 227, 0.78);
+}
+
+.chart-bar {
+  flex: 1;
+  height: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.chart-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, rgba(255, 205, 146, 0.9), rgba(112, 184, 255, 0.9));
+  border-radius: 10px;
+}
+
+.chart-percent {
+  font-size: 12px;
+  color: rgba(255, 244, 227, 0.7);
+  min-width: 70px;
+  text-align: right;
+}
+
 .result-card {
   display: flex;
   flex-direction: column;
@@ -115,11 +165,19 @@
   backdrop-filter: blur(16px);
 }
 
-.result-line {
-  font-size: 15px;
-  color: rgba(255, 244, 227, 0.9);
-  line-height: 1.8;
-  word-break: break-all;
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.result-name {
+  font-size: 18px;
+  color: #fdf0da;
+  font-weight: 600;
+  letter-spacing: 3px;
+  flex: 1;
 }
 
 .collect-button {
@@ -130,7 +188,18 @@
   background: rgba(255, 255, 255, 0.12);
   color: #fbe6ce;
   border: 1px solid rgba(255, 255, 255, 0.18);
-  align-self: flex-end;
+}
+
+.result-meaning {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.86);
+  line-height: 1.8;
+}
+
+.result-reason {
+  font-size: 13px;
+  color: rgba(255, 244, 227, 0.7);
+  line-height: 1.6;
 }
 
 .back-button {