sc

src/pages/mine/personal-info.vue

@@ -466,17 +466,53 @@
     font-weight: 500;
   }
   
-  /* 响应式设计 */
-  @media screen and (min-width: 500px) {
+  /* 平板响应式 */
+  @media screen and (min-width: 768px) {
     .personal-info-container {
       max-width: 900px;
       margin: 0 auto;
+      width: 100%;
+    }
+    
+    .page-header {
+      height: 140rpx;
+      padding: 0 48rpx;
+    }
+    
+    .header-title {
+      font-size: 36rpx;
+    }
+    
+    .back-icon {
+      font-size: 48rpx;
+    }
+    
+    .save-btn {
+      font-size: 32rpx;
     }
     
     .form-section {
+      margin: 24rpx;
       padding: 40rpx;
     }
     
+    .avatar-section {
+      margin-bottom: 48rpx;
+    }
+    
+    .avatar-preview {
+      width: 240rpx;
+      height: 240rpx;
+    }
+    
+    .avatar-icon {
+      font-size: 96rpx;
+    }
+    
+    .avatar-tip {
+      font-size: 24rpx;
+    }
+    
     .form-group {
       margin-bottom: 40rpx;
     }
@@ -487,7 +523,7 @@
     }
     
     .form-input {
-      height: 100rpx;
+      height: 96rpx;
       font-size: 32rpx;
       padding: 0 32rpx;
     }
@@ -499,13 +535,136 @@
     }
     
     .form-text {
-      height: 100rpx;
+      height: 96rpx;
+      font-size: 32rpx;
+      padding: 0 32rpx;
+    }
+    
+    .picker-display {
       font-size: 32rpx;
       padding: 0 32rpx;
     }
     
     .account-section {
+      margin: 0 24rpx 32rpx;
       padding: 40rpx;
     }
+    
+    .section-title {
+      font-size: 36rpx;
+      margin-bottom: 32rpx;
+    }
+    
+    .account-info {
+      gap: 24rpx;
+    }
+    
+    .info-item {
+      padding: 24rpx 0;
+    }
+    
+    .info-label,
+    .info-value {
+      font-size: 32rpx;
+    }
+  }
+  
+  /* 大屏设备响应式 */
+  @media screen and (min-width: 1024px) {
+    .personal-info-container {
+      max-width: 1000px;
+    }
+    
+    .page-header {
+      height: 160rpx;
+      padding: 0 64rpx;
+    }
+    
+    .header-title {
+      font-size: 40rpx;
+    }
+    
+    .back-icon {
+      font-size: 56rpx;
+    }
+    
+    .save-btn {
+      font-size: 36rpx;
+    }
+    
+    .form-section {
+      padding: 48rpx;
+    }
+    
+    .avatar-section {
+      margin-bottom: 56rpx;
+    }
+    
+    .avatar-preview {
+      width: 280rpx;
+      height: 280rpx;
+    }
+    
+    .avatar-icon {
+      font-size: 112rpx;
+    }
+    
+    .avatar-tip {
+      font-size: 28rpx;
+    }
+    
+    .form-group {
+      margin-bottom: 48rpx;
+    }
+    
+    .form-label {
+      font-size: 36rpx;
+      margin-bottom: 20rpx;
+    }
+    
+    .form-input {
+      height: 112rpx;
+      font-size: 36rpx;
+      padding: 0 40rpx;
+    }
+    
+    .form-textarea {
+      min-height: 240rpx;
+      font-size: 36rpx;
+      padding: 40rpx;
+    }
+    
+    .form-text {
+      height: 112rpx;
+      font-size: 36rpx;
+      padding: 0 40rpx;
+    }
+    
+    .picker-display {
+      font-size: 36rpx;
+      padding: 0 40rpx;
+    }
+    
+    .account-section {
+      padding: 48rpx;
+    }
+    
+    .section-title {
+      font-size: 40rpx;
+      margin-bottom: 40rpx;
+    }
+    
+    .account-info {
+      gap: 28rpx;
+    }
+    
+    .info-item {
+      padding: 28rpx 0;
+    }
+    
+    .info-label,
+    .info-value {
+      font-size: 36rpx;
+    }
   }
 </style>