fix: 样式优化套餐分配生效条件选择

src/views/package-management/series-grants/index.vue

@@ -146,7 +146,7 @@
                   </ElFormItem>
 
                   <!-- 套餐成本价 -->
-                  <ElFormItem label="套餐成本价" v-if="form.packages.length > 0">
+                  <ElFormItem label="套餐配置" v-if="form.packages.length > 0">
                     <div class="package-list">
                       <div
                         v-for="(pkg, index) in form.packages"
@@ -155,6 +155,7 @@
                       >
                         <span class="package-name">{{ getPackageName(pkg.package_id) }}</span>
                         <div class="cost-price-input-wrapper">
+                          <div class="package-field-label">套餐成本价（元）</div>
                           <ElInputNumber
                             v-model="pkg.cost_price"
                             :min="pkg.original_cost_price || 0"
@@ -171,11 +172,16 @@
                           </span>
                         </div>
                         <div class="expiry-base-input-wrapper">
-                          <ElRadioGroup v-model="pkg.expiry_base_override">
-                            <ElRadio value="default">跟随套餐默认</ElRadio>
-                            <ElRadio value="from_purchase">购买即生效</ElRadio>
-                            <ElRadio value="from_realname">实名即生效</ElRadio>
-                          </ElRadioGroup>
+                          <div class="expiry-base-label">生效条件</div>
+                          <ElSelect
+                            v-model="pkg.expiry_base_override"
+                            class="expiry-base-select"
+                            placeholder="请选择生效条件"
+                          >
+                            <ElOption label="跟随套餐默认" value="default" />
+                            <ElOption label="购买即生效" value="from_purchase" />
+                            <ElOption label="实名激活时生效" value="from_activation" />
+                          </ElSelect>
                         </div>
                         <ElButton type="danger" size="small" @click="removePackage(index)"
                           >删除</ElButton
@@ -567,7 +573,9 @@
     ElRow,
     ElCol,
     ElSteps,
-    ElStep
+    ElStep,
+    ElSelect,
+    ElOption
   } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import type {
@@ -1927,9 +1935,10 @@
   }
 
   .package-item {
-    display: flex;
-    gap: 12px;
-    align-items: center;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
+    gap: 16px;
+    align-items: start;
     padding: 8px;
     margin-bottom: 8px;
     background-color: var(--el-fill-color-light);
@@ -1944,20 +1953,98 @@
     }
 
     .package-name {
-      flex: 1;
+      grid-column: 1 / 3;
+      grid-row: 1;
+      min-width: 0;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--el-border-color-lighter);
       font-size: 14px;
       color: var(--el-text-color-regular);
     }
 
     .cost-price-input-wrapper {
+      grid-column: 1;
+      grid-row: 2;
       display: flex;
-      gap: 8px;
-      align-items: center;
+      flex-direction: column;
+      gap: 6px;
+      align-items: flex-start;
+      width: 100%;
+
+      :deep(.el-input-number) {
+        width: 100% !important;
+      }
+
+      .package-field-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--el-text-color-regular);
+      }
 
       .min-cost-hint {
         font-size: 12px;
         color: var(--el-text-color-secondary);
-        white-space: nowrap;
+        line-height: 1.4;
+      }
+    }
+
+    .expiry-base-input-wrapper {
+      grid-column: 2;
+      grid-row: 2;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+      width: 100%;
+      align-self: start;
+
+      .expiry-base-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--el-text-color-regular);
+      }
+
+      .expiry-base-select {
+        width: 100%;
+        max-width: none;
+      }
+    }
+
+    :deep(.el-button) {
+      grid-column: 3;
+      grid-row: 1;
+      align-self: start;
+      justify-self: end;
+      width: 56px;
+      padding-right: 8px;
+      padding-left: 8px;
+    }
+  }
+
+  @media (width <= 1000px) {
+    .package-item {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
+    }
+  }
+
+  @media (width <= 640px) {
+    .package-item {
+      grid-template-columns: 1fr;
+
+      .expiry-base-input-wrapper {
+        grid-column: 1 / -1;
+        grid-row: 3;
+      }
+
+      .cost-price-input-wrapper {
+        grid-column: 1 / -1;
+        grid-row: 2;
+      }
+
+      :deep(.el-button) {
+        grid-column: 3;
+        grid-row: 1;
+        justify-self: start;
       }
     }
   }