refactor(beautify): B批 tianpan家族 px→rpx 转换 (387处 ×2)

375px 设计基准，CSS px ×2 = rpx，canvas 元素尺寸与 canvas 绘图 JS 保留 px
pages/tianpan:
  index.vue           85 处
  relation-detail.vue  71 处
  member-detail.vue    69 处
  traditional.vue      60 处
  daily-fortune.vue    38 处
  annual-energy.vue    36 处
  related-items.vue    28 处

cfc-frontend/pages/tianpan/annual-energy.vue

@@ -118,31 +118,31 @@ export default {
 </script>
 <stylescoped lang="scss">
 .annual-energy-page { min-height: 100vh; background: #F3F4F6; }
-.nav-right { width: 40px; }
-.loading-state, .error-state { padding: 60px 20px; display: flex; justify-content: center; align-items: center; }
-.error-text { color: $status-danger; font-size: 14px; }
-.content { padding: 12px; }
-.year-selector { text-align: center; padding: 16px 0 8px; }
-.year-current { font-size: 28px; font-weight: bold; color: $brand-primary; }
-.year-label { font-size: 13px; color: #9CA3AF; display: block; }
-.info-card { background: $app-surface; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
-.card-title-bar { margin-bottom: 12px; border-bottom: 1px solid #F3F4F6; padding-bottom: 8px; }
-.card-title { font-size: 15px; font-weight: bold; color: #1F2937; }
-.radar-container { display: flex; justify-content: center; padding: 8px 0; }
-.radar-canvas { width: 260px; height: 260px; }
-.stars-grid { display: flex; gap: 12px; }
-.star-item { flex: 1; background: $uni-primary-pale; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; align-items: center; }
-.star-name { font-size: 13px; color: #9CA3AF; }
-.star-phase { font-size: 14px; color: $brand-primary; font-weight: bold; margin-top: 4px; }
+.nav-right { width: 80rpx; }
+.loading-state, .error-state { padding: 120rpx 40rpx; display: flex; justify-content: center; align-items: center; }
+.error-text { color: $status-danger; font-size: 28rpx; }
+.content { padding: 24rpx; }
+.year-selector { text-align: center; padding: 32rpx 0 16rpx; }
+.year-current { font-size: 56rpx; font-weight: bold; color: $brand-primary; }
+.year-label { font-size: 26rpx; color: #9CA3AF; display: block; }
+.info-card { background: $app-surface; border-radius: 24rpx; padding: 32rpx; margin-bottom: 24rpx; }
+.card-title-bar { margin-bottom: 24rpx; border-bottom: 2rpx solid #F3F4F6; padding-bottom: 16rpx; }
+.card-title { font-size: 30rpx; font-weight: bold; color: #1F2937; }
+.radar-container { display: flex; justify-content: center; padding: 16rpx 0; }
+.radar-canvas { width: 520rpx; height: 520rpx; }
+.stars-grid { display: flex; gap: 24rpx; }
+.star-item { flex: 1; background: $uni-primary-pale; border-radius: 16rpx; padding: 24rpx; display: flex; flex-direction: column; align-items: center; }
+.star-name { font-size: 26rpx; color: #9CA3AF; }
+.star-phase { font-size: 28rpx; color: $brand-primary; font-weight: bold; margin-top: 8rpx; }
 .dimensions-list { display: flex; flex-direction: column; }
-.dimension-item { margin-bottom: 14px; }
-.dim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
-.dim-label { font-size: 13px; color: #374151; font-weight: 500; }
-.dim-value { font-size: 13px; color: $brand-primary; font-weight: bold; }
-.bar-track { height: 6px; background: #E5E7EB; border-radius: 3px; margin-bottom: 4px; }
-.bar-fill { height: 100%; border-radius: 3px; }
+.dimension-item { margin-bottom: 28rpx; }
+.dim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8rpx; }
+.dim-label { font-size: 26rpx; color: #374151; font-weight: 500; }
+.dim-value { font-size: 26rpx; color: $brand-primary; font-weight: bold; }
+.bar-track { height: 12rpx; background: #E5E7EB; border-radius: 6rpx; margin-bottom: 8rpx; }
+.bar-fill { height: 100%; border-radius: 6rpx; }
 .highlight-list { display: flex; flex-direction: column; }
-.highlight-item { padding: 6px 0; border-bottom: 1px solid #F3F4F6; }
+.highlight-item { padding: 12rpx 0; border-bottom: 2rpx solid #F3F4F6; }
 .highlight-item:last-child { border-bottom: none; }
-.highlight-text { font-size: 13px; color: #374151; line-height: 1.5; }
+.highlight-text { font-size: 26rpx; color: #374151; line-height: 1.5; }
 </style>

cfc-frontend/pages/tianpan/daily-fortune.vue

@@ -70,33 +70,33 @@ export default {
 </script>
 <stylescoped lang="scss">
 .daily-fortune-page { min-height: 100vh; background: #F3F4F6; }
-.nav-right { width: 40px; }
-.loading-state, .error-state { padding: 60px 20px; display: flex; justify-content: center; align-items: center; }
-.error-text { color: $status-danger; font-size: 14px; }
-.content { padding: 12px; }
-.date-banner { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 12px; padding: 20px; margin-bottom: 12px; text-align: center; }
-.date-text { font-size: 22px; font-weight: bold; color: $app-surface; display: block; }
-.date-lunar { font-size: 13px; color: rgba(255,255,255,0.8); display: block; margin-top: 4px; }
-.info-card { background: $app-surface; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
-.card-title-bar { margin-bottom: 12px; border-bottom: 1px solid #F3F4F6; padding-bottom: 8px; display: flex; align-items: center; }
-.auspicious-bar .card-title { color: $status-success; font-size: 15px; font-weight: bold; }
-.inauspicious-bar .card-title { color: $status-danger; font-size: 15px; font-weight: bold; }
-.card-title { font-size: 15px; font-weight: bold; color: #1F2937; }
-.five-elements-display { text-align: center; padding: 8px 0; }
-.fe-main { font-size: 28px; font-weight: bold; color: $brand-primary; display: block; }
-.fe-detail { font-size: 13px; color: #9CA3AF; display: block; margin-top: 4px; }
-.item-tags { display: flex; flex-wrap: wrap; gap: 8px; }
-.tag-item { padding: 6px 14px; border-radius: 16px; }
+.nav-right { width: 80rpx; }
+.loading-state, .error-state { padding: 120rpx 40rpx; display: flex; justify-content: center; align-items: center; }
+.error-text { color: $status-danger; font-size: 28rpx; }
+.content { padding: 24rpx; }
+.date-banner { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 24rpx; padding: 40rpx; margin-bottom: 24rpx; text-align: center; }
+.date-text { font-size: 44rpx; font-weight: bold; color: $app-surface; display: block; }
+.date-lunar { font-size: 26rpx; color: rgba(255,255,255,0.8); display: block; margin-top: 8rpx; }
+.info-card { background: $app-surface; border-radius: 24rpx; padding: 32rpx; margin-bottom: 24rpx; }
+.card-title-bar { margin-bottom: 24rpx; border-bottom: 2rpx solid #F3F4F6; padding-bottom: 16rpx; display: flex; align-items: center; }
+.auspicious-bar .card-title { color: $status-success; font-size: 30rpx; font-weight: bold; }
+.inauspicious-bar .card-title { color: $status-danger; font-size: 30rpx; font-weight: bold; }
+.card-title { font-size: 30rpx; font-weight: bold; color: #1F2937; }
+.five-elements-display { text-align: center; padding: 16rpx 0; }
+.fe-main { font-size: 56rpx; font-weight: bold; color: $brand-primary; display: block; }
+.fe-detail { font-size: 26rpx; color: #9CA3AF; display: block; margin-top: 8rpx; }
+.item-tags { display: flex; flex-wrap: wrap; gap: 16rpx; }
+.tag-item { padding: 12rpx 28rpx; border-radius: 32rpx; }
 .tag-item.good { background: #DCFCE7; }
 .tag-item.bad { background: #FEE2E2; }
-.tag-text { font-size: 13px; }
+.tag-text { font-size: 26rpx; }
 .tag-item.good .tag-text { color: #166534; }
 .tag-item.bad .tag-text { color: #991B1B; }
-.advice-content { padding: 4px 0; }
-.advice-text { font-size: 14px; color: #374151; line-height: 1.7; }
+.advice-content { padding: 8rpx 0; }
+.advice-text { font-size: 28rpx; color: #374151; line-height: 1.7; }
 .focus-member-card { display: flex; flex-direction: column; }
-.focus-name { font-size: 16px; font-weight: bold; color: $brand-primary; margin-bottom: 4px; }
-.focus-tip { font-size: 13px; color: #374151; line-height: 1.5; }
-.focus-wuxing { margin-top: 8px; background: $uni-primary-pale; border-radius: 8px; padding: 8px; }
-.wuxing-tip-text { font-size: 12px; color: #9CA3AF; }
+.focus-name { font-size: 32rpx; font-weight: bold; color: $brand-primary; margin-bottom: 8rpx; }
+.focus-tip { font-size: 26rpx; color: #374151; line-height: 1.5; }
+.focus-wuxing { margin-top: 16rpx; background: $uni-primary-pale; border-radius: 16rpx; padding: 16rpx; }
+.wuxing-tip-text { font-size: 24rpx; color: #9CA3AF; }
 </style>

cfc-frontend/pages/tianpan/index.vue

@@ -697,13 +697,13 @@ export default {
 .tianpan-container {
   min-height: 100vh;
   background: linear-gradient(180deg, #FFF8F0 0%, $app-surface 100%);
-  padding-bottom: 20px;
+  padding-bottom: 40rpx;
 }
 
 /* 自定义导航栏 */
 .custom-nav {
   background: linear-gradient(135deg, $brand-primary 0%, $brand-primary-light 100%);
-  padding: 44px 16px 12px;
+  padding: 88rpx 32rpx 24rpx;
   color: $app-surface;
 }
 
@@ -717,23 +717,23 @@ export default {
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, 0.2);
-  padding: 4px 12px;
-  border-radius: 16px;
+  padding: 8rpx 24rpx;
+  border-radius: 32rpx;
 }
 
 .year-text {
-  font-size: 14px;
-  margin-right: 4px;
+  font-size: 28rpx;
+  margin-right: 8rpx;
 }
 
 .picker-icon {
-  font-size: 10px;
+  font-size: 20rpx;
 }
 
 .family-name {
   text-align: center;
-  margin-top: 8px;
-  font-size: 14px;
+  margin-top: 16rpx;
+  font-size: 28rpx;
   opacity: 0.9;
 }
 
@@ -741,15 +741,15 @@ export default {
 .canvas-wrapper {
   display: flex;
   justify-content: center;
-  padding: 20px 0;
+  padding: 40rpx 0;
 }
 
 .tianpan-canvas {
-  width: 375px;
-  height: 375px;
+  width: 750rpx;
+  height: 750rpx;
   background: #FFF8F0;
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(249, 114, 22, 0.1);
+  border-radius: 32rpx;
+  box-shadow: 0 8rpx 24rpx rgba(249, 114, 22, 0.1);
 }
 
 /* 标签栏 */
@@ -757,16 +757,16 @@ export default {
   display: flex;
   justify-content: space-around;
   background: $app-surface;
-  margin: 0 16px;
-  padding: 12px 0;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin: 0 32rpx;
+  padding: 24rpx 0;
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
 }
 
 .tab-item {
-  padding: 6px 16px;
-  border-radius: 20px;
-  font-size: 14px;
+  padding: 12rpx 32rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
   color: #6B7280;
 }
 
@@ -777,22 +777,22 @@ export default {
 
 /* 相关事项列表 */
 .related-items-list {
-  padding: 16px;
+  padding: 32rpx;
 }
 
 .item-card {
   display: flex;
   align-items: center;
   background: $app-surface;
-  padding: 16px;
-  border-radius: 12px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  padding: 32rpx;
+  border-radius: 24rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
 }
 
 .item-icon {
-  font-size: 28px;
-  margin-right: 12px;
+  font-size: 56rpx;
+  margin-right: 24rpx;
 }
 
 .item-content {
@@ -800,71 +800,71 @@ export default {
 }
 
 .item-title {
-  font-size: 16px;
+  font-size: 32rpx;
   font-weight: 500;
   color: #1F2937;
   display: block;
-  margin-bottom: 4px;
+  margin-bottom: 8rpx;
 }
 
 .item-desc {
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
   display: block;
 }
 
 .item-arrow {
-  font-size: 20px;
+  font-size: 40rpx;
   color: #D1D5DB;
 }
 
 .empty-state {
   text-align: center;
-  padding: 40px 0;
+  padding: 80rpx 0;
   color: #9CA3AF;
-  font-size: 14px;
+  font-size: 28rpx;
 }
 
 /* 每日运势卡片 */
 .fortune-card {
-  margin: 16px;
-  padding: 20px;
+  margin: 32rpx;
+  padding: 40rpx;
   background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%);
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(249, 114, 22, 0.2);
+  border-radius: 32rpx;
+  box-shadow: 0 8rpx 24rpx rgba(249, 114, 22, 0.2);
 }
 
 .fortune-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 }
 
 .fortune-title {
-  font-size: 18px;
+  font-size: 36rpx;
   font-weight: bold;
   color: #7C2D12;
 }
 
 .fortune-date {
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9A3412;
 }
 
 .fortune-content {
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 }
 
 .fortune-text {
-  font-size: 14px;
+  font-size: 28rpx;
   color: #9A3412;
   line-height: 1.6;
 }
 
 .fortune-arrow {
   text-align: right;
-  font-size: 12px;
+  font-size: 24rpx;
   color: #7C2D12;
 }
 
@@ -893,8 +893,8 @@ export default {
   left: 0;
   right: 0;
   background: $app-surface;
-  border-radius: 20px 20px 0 0;
-  padding: 24px;
+  border-radius: 40rpx 40rpx 0 0;
+  padding: 48rpx;
   max-height: 70vh;
   overflow-y: auto;
 }
@@ -903,86 +903,86 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 40rpx;
 }
 
 .popup-title {
-  font-size: 20px;
+  font-size: 40rpx;
   font-weight: bold;
   color: #1F2937;
 }
 
 .popup-close {
-  font-size: 28px;
+  font-size: 56rpx;
   color: #9CA3AF;
   line-height: 1;
 }
 
 .popup-body {
-  margin-bottom: 20px;
+  margin-bottom: 40rpx;
 }
 
 .member-info-row {
   display: flex;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 }
 
 .info-label {
-  width: 80px;
+  width: 160rpx;
   color: #6B7280;
-  font-size: 14px;
+  font-size: 28rpx;
 }
 
 .info-value {
   flex: 1;
   color: #1F2937;
-  font-size: 14px;
+  font-size: 28rpx;
 }
 
 .energy-bars {
-  margin-top: 20px;
+  margin-top: 40rpx;
 }
 
 .energy-section-title {
-  font-size: 14px;
+  font-size: 28rpx;
   font-weight: bold;
   color: #1F2937;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
   display: block;
 }
 
 .energy-bar-item {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 }
 
 .energy-label {
-  width: 40px;
+  width: 80rpx;
   color: #6B7280;
-  font-size: 14px;
+  font-size: 28rpx;
 }
 
 .energy-bar {
   flex: 1;
-  height: 8px;
+  height: 16rpx;
   background: #E5E7EB;
-  border-radius: 4px;
-  margin: 0 12px;
+  border-radius: 8rpx;
+  margin: 0 24rpx;
   overflow: hidden;
 }
 
 .energy-fill {
   height: 100%;
   background: linear-gradient(90deg, $brand-primary 0%, $brand-primary-light 100%);
-  border-radius: 4px;
+  border-radius: 8rpx;
 }
 
 .energy-value {
-  width: 30px;
+  width: 60rpx;
   text-align: right;
   color: #1F2937;
-  font-size: 14px;
+  font-size: 28rpx;
 }
 
 .popup-footer {
@@ -994,15 +994,15 @@ export default {
   background: linear-gradient(135deg, $brand-primary 0%, $brand-primary-light 100%);
   color: $app-surface;
   border: none;
-  padding: 12px 48px;
-  border-radius: 24px;
-  font-size: 16px;
+  padding: 24rpx 96rpx;
+  border-radius: 48rpx;
+  font-size: 32rpx;
 }
 
 /* 传统命理入口卡片 */
 .tradition-card {
   background: linear-gradient(135deg, #F5F0FF 0%, #E0D4FF 100%);
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
+  box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.2);
 }
 
 .tradition-card .fortune-title {
@@ -1033,13 +1033,13 @@ export default {
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #E5E7EB;
+  width: 80rpx;
+  height: 80rpx;
+  border: 8rpx solid #E5E7EB;
   border-top-color: $brand-primary;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 @keyframes spin {

cfc-frontend/pages/tianpan/member-detail.vue

@@ -235,12 +235,12 @@ export default {
 .member-detail-container {
   min-height: 100vh;
   background: $facade-fill-gray-50;
-  padding-bottom: 20px;
+  padding-bottom: 40rpx;
 }
 
 .custom-nav {
   background: linear-gradient(135deg, $brand-primary 0%, $brand-primary-light 100%);
-  padding: 44px 16px 16px;
+  padding: 88rpx 32rpx 32rpx;
   display: flex;
   align-items: center;
 }
@@ -250,18 +250,18 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 80px 20px;
+  padding: 160rpx 40rpx;
   text-align: center;
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #E5E7EB;
+  width: 80rpx;
+  height: 80rpx;
+  border: 8rpx solid #E5E7EB;
   border-top-color: $brand-primary;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 @keyframes spin {
@@ -271,46 +271,46 @@ export default {
 }
 
 .retry-btn {
-  margin-top: 16px;
+  margin-top: 32rpx;
   background: $brand-primary;
   color: $app-surface;
   border: none;
-  padding: 10px 32px;
-  border-radius: 20px;
-  font-size: 14px;
+  padding: 20rpx 64rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
 }
 
 .detail-content {
-  padding: 16px;
+  padding: 32rpx;
 }
 
 .info-card {
   background: $app-surface;
-  border-radius: 16px;
-  padding: 20px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 32rpx;
+  padding: 40rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
 }
 
 .member-header {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 40rpx;
 }
 
 .avatar {
-  width: 64px;
-  height: 64px;
+  width: 128rpx;
+  height: 128rpx;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 16px;
+  margin-right: 32rpx;
 }
 
 .avatar-text {
   color: $app-surface;
-  font-size: 28px;
+  font-size: 56rpx;
   font-weight: bold;
 }
 
@@ -319,15 +319,15 @@ export default {
 }
 
 .member-name {
-  font-size: 20px;
+  font-size: 40rpx;
   font-weight: bold;
   color: #1F2937;
   display: block;
-  margin-bottom: 4px;
+  margin-bottom: 8rpx;
 }
 
 .member-role {
-  font-size: 14px;
+  font-size: 28rpx;
   color: #6B7280;
 }
 
@@ -338,8 +338,8 @@ export default {
 
 .info-item {
   width: 50%;
-  padding: 12px 0;
-  border-bottom: 1px solid #F3F4F6;
+  padding: 24rpx 0;
+  border-bottom: 2rpx solid #F3F4F6;
 }
 
 .info-item:nth-child(2n) {
@@ -348,97 +348,97 @@ export default {
 
 .info-label {
   display: block;
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-bottom: 4px;
+  margin-bottom: 8rpx;
 }
 
 .info-value {
   display: block;
-  font-size: 14px;
+  font-size: 28rpx;
   color: #1F2937;
   font-weight: 500;
 }
 
 .energy-card, .relationship-card {
   background: $app-surface;
-  border-radius: 16px;
-  padding: 20px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 32rpx;
+  padding: 40rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
 }
 
 .card-header {
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 .card-title {
-  font-size: 18px;
+  font-size: 36rpx;
   font-weight: bold;
   color: #1F2937;
 }
 
 .energy-bars {
-  margin-top: 16px;
+  margin-top: 32rpx;
 }
 
 .energy-bar-item {
   display: flex;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 .energy-info {
-  width: 80px;
+  width: 160rpx;
 }
 
 .energy-label {
   display: block;
-  font-size: 14px;
+  font-size: 28rpx;
   font-weight: 500;
   color: #1F2937;
 }
 
 .energy-desc {
   display: block;
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-top: 2px;
+  margin-top: 4rpx;
 }
 
 .energy-bar {
   flex: 1;
-  height: 10px;
+  height: 20rpx;
   background: #E5E7EB;
-  border-radius: 5px;
-  margin: 0 12px;
+  border-radius: 10rpx;
+  margin: 0 24rpx;
   overflow: hidden;
 }
 
 .energy-fill {
   height: 100%;
-  border-radius: 5px;
+  border-radius: 10rpx;
   transition: width 0.3s ease;
 }
 
 .energy-value {
-  width: 36px;
+  width: 72rpx;
   text-align: right;
-  font-size: 14px;
+  font-size: 28rpx;
   font-weight: bold;
   color: #1F2937;
 }
 
 .relationship-list {
-  margin-top: 16px;
+  margin-top: 32rpx;
 }
 
 .relationship-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #F3F4F6;
+  padding: 24rpx 0;
+  border-bottom: 2rpx solid #F3F4F6;
 }
 
 .relationship-item:last-child {
@@ -451,16 +451,16 @@ export default {
 
 .rel-name {
   display: block;
-  font-size: 14px;
+  font-size: 28rpx;
   font-weight: 500;
   color: #1F2937;
 }
 
 .rel-role {
   display: block;
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-top: 2px;
+  margin-top: 4rpx;
 }
 
 .rel-score {
@@ -469,14 +469,14 @@ export default {
 }
 
 .score-value {
-  font-size: 24px;
+  font-size: 48rpx;
   font-weight: bold;
 }
 
 .score-label {
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-left: 2px;
+  margin-left: 4rpx;
 }
 
 .score-good {
@@ -494,14 +494,14 @@ export default {
 .action-buttons {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 16px;
+  gap: 24rpx;
+  padding: 32rpx;
 }
 
 .action-btn {
-  padding: 14px 24px;
-  border-radius: 12px;
-  font-size: 16px;
+  padding: 28rpx 48rpx;
+  border-radius: 24rpx;
+  font-size: 32rpx;
   border: none;
 }
 
@@ -513,6 +513,6 @@ export default {
 .action-btn.secondary {
   background: $app-surface;
   color: $brand-primary;
-  border: 2px solid $brand-primary;
+  border: 4rpx solid $brand-primary;
 }
 </style>

cfc-frontend/pages/tianpan/related-items.vue

@@ -100,29 +100,29 @@ export default {
 </script>
 <stylescoped lang="scss">
 .related-items-page { min-height: 100vh; background: #F3F4F6; }
-.nav-right { width: 40px; }
-.tab-bar { display: flex; background: $app-surface; border-bottom: 1px solid #E5E7EB; position: sticky; top: 0; z-index: 10; }
-.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 0; position: relative; }
-.tab-text { font-size: 14px; color: #6B7280; }
+.nav-right { width: 80rpx; }
+.tab-bar { display: flex; background: $app-surface; border-bottom: 2rpx solid #E5E7EB; position: sticky; top: 0; z-index: 10; }
+.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24rpx 0; position: relative; }
+.tab-text { font-size: 28rpx; color: #6B7280; }
 .tab-item.active .tab-text { color: $brand-primary; font-weight: 500; }
-.tab-underline { position: absolute; bottom: 0; width: 40px; height: 2px; background: $brand-primary; border-radius: 1px; }
-.loading-state, .error-state, .empty-state { padding: 60px 20px; display: flex; justify-content: center; align-items: center; }
-.error-text, .empty-text { font-size: 14px; color: #9CA3AF; }
-.content { padding: 12px; }
-.tab-content { min-height: 300px; }
+.tab-underline { position: absolute; bottom: 0; width: 80rpx; height: 4rpx; background: $brand-primary; border-radius: 2rpx; }
+.loading-state, .error-state, .empty-state { padding: 120rpx 40rpx; display: flex; justify-content: center; align-items: center; }
+.error-text, .empty-text { font-size: 28rpx; color: #9CA3AF; }
+.content { padding: 24rpx; }
+.tab-content { min-height: 600rpx; }
 .item-list { display: flex; flex-direction: column; }
-.item-card { background: $app-surface; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
-.item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
-.item-title { font-size: 14px; font-weight: 500; color: #1F2937; flex: 1; }
-.status-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
+.item-card { background: $app-surface; border-radius: 24rpx; padding: 28rpx; margin-bottom: 20rpx; }
+.item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
+.item-title { font-size: 28rpx; font-weight: 500; color: #1F2937; flex: 1; }
+.status-tag { font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 20rpx; }
 .status-tag.pending { background: #FEF3C7; color: #92400E; }
 .status-tag.in-progress { background: #DBEAFE; color: #1E40AF; }
 .status-tag.completed { background: #DCFCE7; color: #166534; }
 .status-tag.cancelled { background: #F3F4F6; color: #6B7280; }
-.alert-level { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
+.alert-level { font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 20rpx; }
 .alert-low { background: #DCFCE7; color: #166534; }
 .alert-medium { background: #FEF3C7; color: #92400E; }
 .alert-high { background: #FEE2E2; color: #991B1B; }
-.item-meta { display: flex; gap: 12px; margin-bottom: 4px; }
-.meta-text { font-size: 12px; color: #9CA3AF; }
+.item-meta { display: flex; gap: 24rpx; margin-bottom: 8rpx; }
+.meta-text { font-size: 24rpx; color: #9CA3AF; }
 </style>

cfc-frontend/pages/tianpan/relation-detail.vue

@@ -413,12 +413,12 @@ export default {
 .relation-detail-container {
   min-height: 100vh;
   background: $facade-fill-gray-50;
-  padding-bottom: 20px;
+  padding-bottom: 40rpx;
 }
 
 .custom-nav {
   background: linear-gradient(135deg, $brand-primary 0%, $brand-primary-light 100%);
-  padding: 44px 16px 16px;
+  padding: 88rpx 32rpx 32rpx;
   display: flex;
   align-items: center;
 }
@@ -428,18 +428,18 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 80px 20px;
+  padding: 160rpx 40rpx;
   text-align: center;
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #E5E7EB;
+  width: 80rpx;
+  height: 80rpx;
+  border: 8rpx solid #E5E7EB;
   border-top-color: $brand-primary;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 @keyframes spin {
@@ -449,38 +449,38 @@ export default {
 }
 
 .retry-btn {
-  margin-top: 16px;
+  margin-top: 32rpx;
   background: $brand-primary;
   color: $app-surface;
   border: none;
-  padding: 10px 32px;
-  border-radius: 20px;
-  font-size: 14px;
+  padding: 20rpx 64rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
 }
 
 .detail-content {
-  padding: 16px;
+  padding: 32rpx;
 }
 
 .score-card {
   background: $app-surface;
-  border-radius: 16px;
-  padding: 32px 20px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 32rpx;
+  padding: 64rpx 40rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
   text-align: center;
 }
 
 .score-circle {
   position: relative;
-  width: 180px;
-  height: 180px;
-  margin: 0 auto 16px;
+  width: 360rpx;
+  height: 360rpx;
+  margin: 0 auto 32rpx;
 }
 
 .score-canvas {
-  width: 180px;
-  height: 180px;
+  width: 360rpx;
+  height: 360rpx;
 }
 
 .score-content {
@@ -492,24 +492,24 @@ export default {
 
 .score-value {
   display: block;
-  font-size: 48px;
+  font-size: 96rpx;
   font-weight: bold;
   line-height: 1;
 }
 
 .score-label {
   display: block;
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-top: 8px;
+  margin-top: 16rpx;
 }
 
 .score-level {
-  margin-top: 12px;
+  margin-top: 24rpx;
 }
 
 .level-text {
-  font-size: 18px;
+  font-size: 36rpx;
   font-weight: bold;
   color: #1F2937;
 }
@@ -528,18 +528,18 @@ export default {
 
 .members-card, .dimensions-card, .trend-card, .advice-card {
   background: $app-surface;
-  border-radius: 16px;
-  padding: 20px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 32rpx;
+  padding: 40rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
 }
 
 .card-header {
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 .card-title {
-  font-size: 16px;
+  font-size: 32rpx;
   font-weight: bold;
   color: #1F2937;
 }
@@ -556,94 +556,94 @@ export default {
 }
 
 .member-avatar {
-  width: 56px;
-  height: 56px;
+  width: 112rpx;
+  height: 112rpx;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 auto 8px;
+  margin: 0 auto 16rpx;
 }
 
 .member-avatar-text {
   color: $app-surface;
-  font-size: 24px;
+  font-size: 48rpx;
   font-weight: bold;
 }
 
 .member-name {
   display: block;
-  font-size: 14px;
+  font-size: 28rpx;
   font-weight: 500;
   color: #1F2937;
 }
 
 .member-role {
   display: block;
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-top: 2px;
+  margin-top: 4rpx;
 }
 
 .relation-icon {
-  font-size: 24px;
+  font-size: 48rpx;
   color: #D1D5DB;
-  padding: 0 8px;
+  padding: 0 16rpx;
 }
 
 .dimension-list {
-  margin-top: 16px;
+  margin-top: 32rpx;
 }
 
 .dimension-item {
   display: flex;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 .dim-info {
-  width: 80px;
+  width: 160rpx;
 }
 
 .dim-label {
   display: block;
-  font-size: 14px;
+  font-size: 28rpx;
   font-weight: 500;
   color: #1F2937;
 }
 
 .dim-desc {
   display: block;
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-top: 2px;
+  margin-top: 4rpx;
 }
 
 .dim-bar {
   flex: 1;
-  height: 8px;
+  height: 16rpx;
   background: #E5E7EB;
-  border-radius: 4px;
-  margin: 0 12px;
+  border-radius: 8rpx;
+  margin: 0 24rpx;
   overflow: hidden;
 }
 
 .dim-fill {
   height: 100%;
-  border-radius: 4px;
+  border-radius: 8rpx;
   transition: width 0.3s ease;
 }
 
 .dim-value {
-  width: 32px;
+  width: 64rpx;
   text-align: right;
-  font-size: 14px;
+  font-size: 28rpx;
   font-weight: bold;
   color: #1F2937;
 }
 
 .trend-chart {
-  height: 150px;
+  height: 300rpx;
 }
 
 .trend-canvas {
@@ -652,13 +652,13 @@ export default {
 }
 
 .advice-content {
-  padding: 12px;
+  padding: 24rpx;
   background: #FFF8F0;
-  border-radius: 8px;
+  border-radius: 16rpx;
 }
 
 .advice-text {
-  font-size: 14px;
+  font-size: 28rpx;
   line-height: 1.6;
   color: #7C2D12;
 }
@@ -666,14 +666,14 @@ export default {
 .action-buttons {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 16px;
+  gap: 24rpx;
+  padding: 32rpx;
 }
 
 .action-btn {
-  padding: 14px 24px;
-  border-radius: 12px;
-  font-size: 16px;
+  padding: 28rpx 48rpx;
+  border-radius: 24rpx;
+  font-size: 32rpx;
   border: none;
 }
 
@@ -685,6 +685,6 @@ export default {
 .action-btn.secondary {
   background: $app-surface;
   color: $brand-primary;
-  border: 2px solid $brand-primary;
+  border: 4rpx solid $brand-primary;
 }
 </style>

cfc-frontend/pages/tianpan/traditional.vue

@@ -189,24 +189,24 @@ export default {
 .traditional-container {
   min-height: 100vh;
   background: #FFF8F0;
-  padding-bottom: 40px;
+  padding-bottom: 80rpx;
 }
 
 .custom-nav {
   background: linear-gradient(135deg, $brand-primary 0%, $brand-primary-light 100%);
-  padding: 44px 16px 16px;
+  padding: 88rpx 32rpx 32rpx;
   display: flex;
   align-items: center;
 }
 
 .nav-back {
-  font-size: 16px;
+  font-size: 32rpx;
   color: $app-surface;
-  margin-right: 16px;
+  margin-right: 32rpx;
 }
 
 .nav-title {
-  font-size: 18px;
+  font-size: 36rpx;
   color: $app-surface;
   font-weight: bold;
 }
@@ -216,17 +216,17 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 120px 0;
+  padding: 240rpx 0;
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #E5E7EB;
+  width: 80rpx;
+  height: 80rpx;
+  border: 8rpx solid #E5E7EB;
   border-top-color: $brand-primary;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 @keyframes spin {
@@ -234,36 +234,36 @@ export default {
 }
 
 .member-list {
-  padding: 16px;
+  padding: 32rpx;
 }
 
 .member-card {
   background: $app-surface;
-  border-radius: 16px;
-  padding: 20px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 32rpx;
+  padding: 40rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
 }
 
 .card-header {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 40rpx;
 }
 
 .avatar {
-  width: 64px;
-  height: 64px;
+  width: 128rpx;
+  height: 128rpx;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 16px;
+  margin-right: 32rpx;
 }
 
 .avatar-text {
   color: $app-surface;
-  font-size: 28px;
+  font-size: 56rpx;
   font-weight: bold;
 }
 
@@ -272,25 +272,25 @@ export default {
 }
 
 .member-name {
-  font-size: 18px;
+  font-size: 36rpx;
   font-weight: bold;
   color: #1F2937;
   display: block;
 }
 
 .member-role {
-  font-size: 14px;
+  font-size: 28rpx;
   color: #6B7280;
 }
 
 .section {
-  margin-bottom: 20px;
+  margin-bottom: 40rpx;
 }
 
 .section-title {
-  font-size: 14px;
+  font-size: 28rpx;
   color: #9CA3AF;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
   font-weight: 500;
 }
 
@@ -306,13 +306,13 @@ export default {
 }
 
 .bazi-label {
-  font-size: 12px;
+  font-size: 24rpx;
   color: #9CA3AF;
-  margin-bottom: 4px;
+  margin-bottom: 8rpx;
 }
 
 .bazi-value {
-  font-size: 24px;
+  font-size: 48rpx;
   font-weight: bold;
   color: #8B5CF6;
 }
@@ -320,75 +320,75 @@ export default {
 .wuxing-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 24rpx;
 }
 
 .wuxing-item {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 24rpx;
 }
 
 .wuxing-label {
-  font-size: 14px;
-  width: 24px;
+  font-size: 28rpx;
+  width: 48rpx;
   text-align: center;
 }
 
 .wuxing-bar-track {
   flex: 1;
-  height: 8px;
+  height: 16rpx;
   background: #E5E7EB;
-  border-radius: 4px;
+  border-radius: 8rpx;
   overflow: hidden;
 }
 
 .wuxing-bar-fill {
   height: 100%;
-  border-radius: 4px;
+  border-radius: 8rpx;
 }
 
 .wuxing-value {
-  font-size: 12px;
+  font-size: 24rpx;
   color: #6B7280;
-  width: 36px;
+  width: 72rpx;
   text-align: right;
 }
 
 .tag-row {
   display: flex;
-  gap: 12px;
+  gap: 24rpx;
   flex-wrap: wrap;
 }
 
 .tag {
   background: #F3F4F6;
-  padding: 6px 16px;
-  border-radius: 20px;
-  font-size: 14px;
+  padding: 12rpx 32rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
   color: #374151;
 }
 
 .numsoul-display {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 32rpx;
 }
 
 .numsoul-number {
-  width: 64px;
-  height: 64px;
+  width: 128rpx;
+  height: 128rpx;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 28px;
+  font-size: 56rpx;
   font-weight: bold;
   color: $app-surface;
 }
 
 .numsoul-title {
-  font-size: 16px;
+  font-size: 32rpx;
   color: #374151;
   font-weight: 500;
 }
@@ -396,43 +396,43 @@ export default {
 .dimension-bars {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 24rpx;
 }
 
 .dim-item {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 24rpx;
 }
 
 .dim-label {
-  font-size: 14px;
-  width: 24px;
+  font-size: 28rpx;
+  width: 48rpx;
 }
 
 .dim-bar-track {
   flex: 1;
-  height: 8px;
+  height: 16rpx;
   background: #E5E7EB;
-  border-radius: 4px;
+  border-radius: 8rpx;
   overflow: hidden;
 }
 
 .dim-bar-fill {
   height: 100%;
-  border-radius: 4px;
+  border-radius: 8rpx;
 }
 
 .dim-value {
-  font-size: 12px;
+  font-size: 24rpx;
   color: #6B7280;
-  width: 36px;
+  width: 72rpx;
   text-align: right;
 }
 
 .empty-state {
   text-align: center;
-  padding: 120px 0;
+  padding: 240rpx 0;
   color: #9CA3AF;
 }
 </style>

cfc-frontend/scripts/convert-tianpan-px.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/**
+ * tianpan 家族 px→rpx 转换（×2，375px 设计基准）
+ * 转换范围：<style> 块内 CSS 声明（font-size, padding, margin, width, height, border-radius,
+ *           box-shadow offset, border-width, gap 等）
+ * 不转换：canvas 元素尺寸（<canvas width=... height=...>），canvas 绘图 JS（ctx.font="14px"）
+ */
+const fs = require('fs')
+const path = require('path')
+
+const ROOT = path.resolve(__dirname, '..')
+const TIANPAN_DIR = path.join(ROOT, 'pages', 'tianpan')
+const FILES = [
+  'index.vue',
+  'relation-detail.vue',
+  'member-detail.vue',
+  'traditional.vue',
+  'daily-fortune.vue',
+  'annual-energy.vue',
+  'related-items.vue',
+]
+
+// 匹配：属性值中的 px（在 <style> 块内，排除 canvas 元素和 ctx.font 等 JS）
+// 策略：用正则替换 <style> 块内的 \d+px → \d*2rpx
+const PX_RE = /(\d+)\s*px/g
+
+function convertPxToRpx(text) {
+  // 替换 px 为单位转换（注意：保留 canvas 宽高属性、保留 JS 内的 px）
+  // 通过只匹配 <style>...</style> 内容来隔离
+  const styleStart = text.search(/<style/)
+  if (styleStart === -1) return text
+
+  let result = ''
+  let pos = 0
+  const styleRegex = /(<style)([^>]*)>([\s\S]*?)(<\/style>)/gi
+  let m
+  let matchCount = 0
+  while ((m = styleRegex.exec(text)) !== null) {
+    // 跳过 canvas 内部（canvas 标签不在 style 块里）
+    const body = m[3]
+    const converted = body.replace(PX_RE, (_match, num) => {
+      matchCount++
+      const px = parseInt(num, 10)
+      return `${px * 2}rpx`
+    })
+    if (converted !== body) {
+      result += text.slice(pos, m.index) + m[1] + m[2] + '>' + converted + '</style>'
+      pos = styleRegex.lastIndex
+    }
+  }
+  result += text.slice(pos)
+  return { newSrc: result, count: matchCount }
+}
+
+function main() {
+  let totalConverted = 0
+  const log = []
+  for (const file of FILES) {
+    const filePath = path.join(TIANPAN_DIR, file)
+    if (!fs.existsSync(filePath)) {
+      console.warn(`跳过不存在文件: ${file}`)
+      continue
+    }
+    const src = fs.readFileSync(filePath, 'utf8')
+    const { newSrc, count } = convertPxToRpx(src)
+    if (count > 0) {
+      fs.writeFileSync(filePath, newSrc, 'utf8')
+      totalConverted += count
+      log.push(`${count.toString().padStart(3)}  ${file}`)
+    }
+  }
+  console.log(`\n=== tianpan px→rpx 完成 ===`)
+  console.log(`转换次数: ${totalConverted}`)
+  console.log('')
+  log.sort((a, b) => parseInt(b.split(' ')[0]) - parseInt(a.split(' ')[0]))
+  for (const line of log) console.log(line)
+}
+
+main()