充值

hdApp/src/admin/hb/sendHb.vue

@@ -13,8 +13,11 @@
       </view>
 
       <view class="section-header">
-        <view class="decoration"></view>
-        <text class="title">赠送红包设置</text>
+        <view class="section-header-left">
+          <view class="decoration"></view>
+          <text class="title">红包设置</text>
+        </view>
+        <button class="header-add-btn" @click="addRule">添加新红包</button>
       </view>
       <view class="rule-card" v-for="(item, index) in rules" :key="index">
         <view class="form-item">
@@ -50,9 +53,8 @@
               <text v-if="!item.effectiveDate" style="color:#ccc;">马上生效</text>
               <text v-else>{{item.effectiveDate}}</text>
             </view>
-            <view class="btn-group">
-                <button v-if="index > 0" class="mini-btn delete-btn" @click="deleteRule(index)">删除</button>
-                <button v-if="index == rules.length - 1" class="mini-btn add-btn" @click="addRule">添加</button>
+            <view class="btn-group" v-if="index > 0">
+                <button class="mini-btn delete-btn" @click="deleteRule(index)">删除</button>
             </view>
           </view>
         </view>
@@ -68,9 +70,8 @@
               </view>
               <view class="days-text">天后生效</view>
             </view>
-            <view class="btn-group">
-                <button v-if="index > 0" class="mini-btn delete-btn" @click="deleteRule(index)">删除</button>
-                <button v-if="index == rules.length - 1" class="mini-btn add-btn" @click="addRule">添加</button>
+            <view class="btn-group" v-if="index > 0">
+                <button class="mini-btn delete-btn" @click="deleteRule(index)">删除</button>
             </view>
           </view>
         </view>
@@ -337,22 +338,49 @@ export default {
 .section-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 24upx;
   padding: 0 10upx;
 
+  .section-header-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
   .decoration {
     width: 8upx;
-    height: 32upx;
+    height: 34upx;
     background-color: #09C567;
     border-radius: 4upx;
     margin-right: 16upx;
+    flex-shrink: 0;
   }
 
   .title {
-    font-size: 30upx;
+    font-size: 34upx;
     font-weight: bold;
     color: #333;
   }
+
+  .header-add-btn {
+    margin: 0 0 0 16upx;
+    padding: 0 24upx;
+    height: 56upx;
+    line-height: 56upx;
+    font-size: 26upx;
+    color: #fff;
+    background-color: #09C567;
+    border-radius: 28upx;
+    border: none;
+    flex-shrink: 0;
+
+    &::after {
+      border: none;
+    }
+  }
 }
 
 .rule-list {