适配暗黑色

src/views/recharge/package/index.vue

@@ -372,7 +372,7 @@ onMounted(async () => {
     </div>
 
     <!-- 套餐详情 -->
-    <div class="package-details">
+    <a-card>
       <h3 class="section-title">{{ t('page.setmeal.mealdetail') }}</h3>
       <div class="details-list">
         <div class="detail-item">
@@ -426,7 +426,7 @@ onMounted(async () => {
           </button>
         </div>
       </div>
-    </div>
+    </a-card>
 
     <!-- 订单确认弹窗 -->
     <OrderConfirmModal
@@ -447,7 +447,8 @@ onMounted(async () => {
 }
 
 .price-header {
-  background: #fff1f0;
+  border-color: #ff4d4f;
+  background: rgba(218, 7, 7, 0.1);
   padding: 20px;
   border-radius: 12px;
   margin-bottom: 16px;
@@ -473,14 +474,14 @@ onMounted(async () => {
 
 .subtitle {
   font-size: 14px;
-  color: #666;
+  color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
 }
 
 .section-title {
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 16px;
-  color: #333;
+  color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
   position: relative;
   padding-left: 12px;
 }
@@ -505,7 +506,7 @@ onMounted(async () => {
 }
 
 .option-card {
-  background: white;
+  background: var(--primary-color, var(--ant-primary-color));
   padding: 16px;
   border-radius: 8px;
   text-align: center;
@@ -522,7 +523,8 @@ onMounted(async () => {
 
 .option-card.selected {
   border-color: #ff4d4f;
-  background: #fff1f0;
+  background: rgba(218, 7, 7, 0.1);
+
 }
 
 .recommended-tag {
@@ -554,12 +556,12 @@ onMounted(async () => {
 
 .label {
   width: 80px;
-  color: #666;
+  color: var(--primary-color, var(--ant-primary-color));
 }
 
 .value {
   flex: 1;
-  color: #333;
+  color: var(--primary-color, var(--ant-primary-color));
 }
 
 .value.highlight {
@@ -596,18 +598,18 @@ onMounted(async () => {
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 8px;
-  color: #333;
+  color: var(--primary-color, var(--ant-primary-color));
 }
 
 .traffic {
   font-size: 14px;
-  color: #666;
+  color: var(--primary-color, var(--ant-primary-color));
   margin-top: 8px;
 }
 
 .device-count {
   font-size: 14px;
-  color: #666;
+  color: var(--primary-color, var(--ant-primary-color));
   margin-top: 4px;
 }