sc

src/pages/mine/about-us.vue

@@ -445,39 +445,293 @@
     color: #909399;
   }
   
-  /* 响应式设计 */
-  @media screen and (min-width: 500px) {
+  /* 平板响应式 */
+  @media screen and (min-width: 768px) {
     .about-us-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;
     }
     
     .company-section {
+      margin: 24rpx;
       padding: 80rpx 40rpx;
     }
     
+    .company-logo {
+      width: 180rpx;
+      height: 180rpx;
+      border-radius: 90rpx;
+      margin-bottom: 40rpx;
+    }
+    
+    .logo-icon {
+      font-size: 90rpx;
+    }
+    
     .company-name {
       font-size: 40rpx;
+      margin-bottom: 20rpx;
     }
     
     .company-slogan {
       font-size: 28rpx;
     }
     
+    .version-section {
+      margin: 0 24rpx 24rpx;
+      padding: 40rpx;
+    }
+    
+    .version-item {
+      padding: 24rpx 0;
+    }
+    
+    .version-label {
+      font-size: 32rpx;
+    }
+    
+    .version-value {
+      font-size: 32rpx;
+    }
+    
+    .features-section {
+      margin: 0 24rpx 24rpx;
+      padding: 40rpx;
+    }
+    
+    .section-title {
+      font-size: 36rpx;
+      margin-bottom: 40rpx;
+    }
+    
     .features-list {
       grid-template-columns: repeat(auto-fill, minmax(400rpx, 1fr));
+      gap: 32rpx;
+    }
+    
+    .feature-item {
+      padding: 32rpx;
+      border-radius: 16rpx;
+    }
+    
+    .feature-icon {
+      font-size: 48rpx;
+      margin-right: 20rpx;
     }
     
     .feature-title {
       font-size: 32rpx;
+      margin-bottom: 12rpx;
     }
     
     .feature-desc {
       font-size: 28rpx;
     }
     
+    .contact-section {
+      margin: 0 24rpx 24rpx;
+      padding: 40rpx;
+    }
+    
+    .contact-list {
+      gap: 32rpx;
+    }
+    
+    .contact-item {
+      padding: 32rpx;
+      border-radius: 16rpx;
+    }
+    
+    .contact-icon {
+      font-size: 48rpx;
+      margin-right: 24rpx;
+    }
+    
+    .contact-label {
+      font-size: 28rpx;
+      margin-bottom: 8rpx;
+    }
+    
     .contact-value {
       font-size: 32rpx;
     }
+    
+    .copyright-section {
+      padding: 60rpx 40rpx;
+    }
+    
+    .copyright-text {
+      font-size: 32rpx;
+      margin-bottom: 12rpx;
+    }
+    
+    .copyright-desc {
+      font-size: 28rpx;
+      margin-bottom: 32rpx;
+    }
+    
+    .policy-item {
+      font-size: 28rpx;
+    }
+    
+    .policy-divider {
+      font-size: 28rpx;
+    }
+  }
+  
+  /* 大屏设备响应式 */
+  @media screen and (min-width: 1024px) {
+    .about-us-container {
+      max-width: 1000px;
+    }
+    
+    .page-header {
+      height: 160rpx;
+      padding: 0 64rpx;
+    }
+    
+    .header-title {
+      font-size: 40rpx;
+    }
+    
+    .back-icon {
+      font-size: 56rpx;
+    }
+    
+    .company-section {
+      padding: 100rpx 50rpx;
+    }
+    
+    .company-logo {
+      width: 200rpx;
+      height: 200rpx;
+      border-radius: 100rpx;
+      margin-bottom: 48rpx;
+    }
+    
+    .logo-icon {
+      font-size: 100rpx;
+    }
+    
+    .company-name {
+      font-size: 48rpx;
+      margin-bottom: 24rpx;
+    }
+    
+    .company-slogan {
+      font-size: 32rpx;
+    }
+    
+    .version-section {
+      padding: 48rpx;
+    }
+    
+    .version-item {
+      padding: 28rpx 0;
+    }
+    
+    .version-label {
+      font-size: 36rpx;
+    }
+    
+    .version-value {
+      font-size: 36rpx;
+    }
+    
+    .features-section {
+      padding: 48rpx;
+    }
+    
+    .section-title {
+      font-size: 40rpx;
+      margin-bottom: 48rpx;
+    }
+    
+    .features-list {
+      grid-template-columns: repeat(auto-fill, minmax(450rpx, 1fr));
+      gap: 40rpx;
+    }
+    
+    .feature-item {
+      padding: 40rpx;
+      border-radius: 20rpx;
+    }
+    
+    .feature-icon {
+      font-size: 56rpx;
+      margin-right: 24rpx;
+    }
+    
+    .feature-title {
+      font-size: 36rpx;
+      margin-bottom: 16rpx;
+    }
+    
+    .feature-desc {
+      font-size: 32rpx;
+    }
+    
+    .contact-section {
+      padding: 48rpx;
+    }
+    
+    .contact-list {
+      gap: 40rpx;
+    }
+    
+    .contact-item {
+      padding: 40rpx;
+      border-radius: 20rpx;
+    }
+    
+    .contact-icon {
+      font-size: 56rpx;
+      margin-right: 28rpx;
+    }
+    
+    .contact-label {
+      font-size: 32rpx;
+      margin-bottom: 12rpx;
+    }
+    
+    .contact-value {
+      font-size: 36rpx;
+    }
+    
+    .copyright-section {
+      padding: 80rpx 50rpx;
+    }
+    
+    .copyright-text {
+      font-size: 36rpx;
+      margin-bottom: 16rpx;
+    }
+    
+    .copyright-desc {
+      font-size: 32rpx;
+      margin-bottom: 40rpx;
+    }
+    
+    .policy-item {
+      font-size: 32rpx;
+    }
+    
+    .policy-divider {
+      font-size: 32rpx;
+    }
   }
 </style>