refactor: 整体美化智维度页面 - 修复幽灵样式/注释/统一视觉语言

cfc-frontend/pages/wisdom-detail/index.vue

@@ -610,115 +610,6 @@ export default {
 }
 </script>
 
-.view-toggle {
-  display: flex;
-  margin: 20rpx 30rpx;
-  background: rgba(255,255,255,0.12);
-  border-radius: 12rpx;
-  padding: 6rpx;
-}
-.toggle-btn {
-  flex: 1;
-  text-align: center;
-  padding: 12rpx 0;
-  border-radius: 8rpx;
-  font-size: 26rpx;
-  color: rgba(255,255,255,0.65);
-}
-.toggle-btn.active {
-  background: rgba(255,255,255,0.22);
-  color: #fff;
-  font-weight: 600;
-}
-
-/* 页面说明 */
-.section-sub {
-  font-size: 22rpx;
-  color: rgba(255,255,255,0.55);
-  margin-top: 6rpx;
-  display: block;
-}
-
-/* 得分解读卡片 */
-.score-explain-card {
-  margin: 20rpx 30rpx;
-  padding: 28rpx 24rpx;
-  background: rgba(255,255,255,0.1);
-  border-radius: 20rpx;
-  border: 1rpx solid rgba(255,255,255,0.15);
-}
-.explain-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 14rpx;
-}
-.explain-icon {
-  font-size: 36rpx;
-  margin-right: 10rpx;
-}
-.explain-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #fff;
-}
-.explain-text {
-  font-size: 26rpx;
-  color: rgba(255,255,255,0.8);
-  line-height: 1.6;
-}
-
-/* 子维度评分卡 */
-.subdim-section {
-  margin: 20rpx 30rpx;
-}
-.subdim-cards {
-  background: rgba(255,255,255,0.08);
-  border-radius: 20rpx;
-  overflow: hidden;
-  border: 1rpx solid rgba(255,255,255,0.12);
-}
-.subdim-card {
-  padding: 24rpx 28rpx;
-  border-bottom: 1rpx solid rgba(255,255,255,0.08);
-}
-.subdim-card:last-child {
-  border-bottom: none;
-}
-.subdim-card-left {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12rpx;
-}
-.subdim-card-label {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #fff;
-}
-.subdim-card-desc {
-  font-size: 22rpx;
-  color: rgba(255,255,255,0.5);
-  margin-top: 4rpx;
-}
-.subdim-card-right {
-  text-align: right;
-}
-.subdim-card-score {
-  font-size: 36rpx;
-  font-weight: 700;
-}
-.subdim-bar-track {
-  height: 8rpx;
-  background: rgba(255,255,255,0.1);
-  border-radius: 4rpx;
-  overflow: hidden;
-  margin-top: 8rpx;
-}
-.subdim-bar-fill {
-  height: 100%;
-  border-radius: 4rpx;
-  transition: width 0.5s ease;
-}
 <style scoped>
 .wisdom-container {
   min-height: 100vh;
@@ -735,7 +626,7 @@ export default {
   border-radius: 24rpx;
   padding: 30rpx 16rpx;
   display: flex;
-  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
 
 .func-item {
@@ -753,7 +644,7 @@ export default {
   width: 88rpx;
   height: 88rpx;
   border-radius: 50%;
-  background: #FFF8E1;
+  background: rgba(99,102,241,0.12);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -777,6 +668,7 @@ export default {
 
 .section-header {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20rpx;
@@ -788,9 +680,66 @@ export default {
   color: #333;
 }
 
+/* 页面说明（独占一行，避免与标题挤在同一行） */
+.section-sub {
+  flex: 1 1 100%;
+  font-size: 22rpx;
+  color: #94A3B8;
+  line-height: 1.4;
+  margin-top: 6rpx;
+  display: block;
+}
+
 .section-more {
+  flex-shrink: 0;
   font-size: 24rpx;
-  color: #999;
+  color: #6366F1;
+}
+
+/* 得分解读卡片 */
+.score-explain-card {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 28rpx 24rpx;
+  border-left: 8rpx solid #6366F1;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.explain-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14rpx;
+}
+.explain-icon {
+  font-size: 36rpx;
+  margin-right: 10rpx;
+}
+.explain-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+}
+.explain-text {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.6;
+  display: block;
+}
+
+/* 主按钮 */
+.primary-btn {
+  background: linear-gradient(135deg, #6366F1, #4F46E5);
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: bold;
+  border: none;
+  border-radius: 48rpx;
+  padding: 18rpx 56rpx;
+  line-height: 1.6;
+  margin: 0;
+  box-shadow: 0 4rpx 16rpx rgba(79,70,229,0.35);
+}
+.primary-btn:active {
+  opacity: 0.88;
 }
 
 /* ===== 底部占位 ===== */
@@ -807,7 +756,7 @@ export default {
 .indicator-range { font-size: 20rpx; color: #bbb; }
 .bottom-spacer { height: 120rpx; }
 
-/* DAN 报告卡片 
+/* DAN 报告卡片 */
 .dan-card {
   background: #fff;
   border-radius: 16rpx;
@@ -863,23 +812,27 @@ export default {
   color: #999;
 }
 .avg-badge {
+  flex: 1 1 100%;
   font-size: 20rpx;
   color: #94A3B8;
-  margin-left: 12rpx;
+  margin-top: 6rpx;
+  display: block;
 }
 
 /* 品牌定位语 */
 .brand-strap {
   margin: 16rpx 30rpx 0;
-  padding: 20rpx 28rpx;
-  background: linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.12));
+  padding: 24rpx 28rpx;
+  background: linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.16));
   border-radius: 16rpx;
   border-left: 4rpx solid #6366F1;
+  box-shadow: 0 2rpx 12rpx rgba(99,102,241,0.12);
 }
 .brand-strap-text {
   font-size: 26rpx;
   color: #3730A3;
-  font-weight: 500;
+  font-weight: bold;
+  line-height: 1.5;
 }
 
 /* 每月引导语 */