1

keyBoard/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "AppIcon60x60@2x.png",
+      "filename" : "切图 210.png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"
@@ -13,7 +13,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "AppIcon60x60@2x 1.png",
+      "filename" : "切图 208.png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"
@@ -25,7 +25,7 @@
           "value" : "tinted"
         }
       ],
-      "filename" : "AppIcon60x60@2x 2.png",
+      "filename" : "切图 209.png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"

keyBoard/Assets.xcassets/Ohter/close_white2_icon.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "close_white2_icon@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "close_white2_icon@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

keyBoard/Assets.xcassets/Pay/pay_vipbg_icon.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "pay_vipbg_icon@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "pay_vipbg_icon@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

keyBoard/Assets.xcassets/Pay/pay_wanwhite_icon.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "pay_wanwhite_icon@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "pay_wanwhite_icon@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

keyBoard/Class/Pay/V/KBVipPayHeaderView.m

@@ -12,6 +12,10 @@
 @property (nonatomic, strong) UIView *containerView;
 // 顶部大图：pay_vip_icon
 @property (nonatomic, strong) UIImageView *vipImageView;
+@property (nonatomic, strong) UIImageView *wanImageView;
+@property (nonatomic, strong) UILabel *titleLabel;
+@property (nonatomic, strong) UILabel *desLabel;
+
 // 功能图标四宫格
 @property (nonatomic, strong) UIImageView *aiImageView;
 @property (nonatomic, strong) UIImageView *keyboardImageView;
@@ -33,11 +37,28 @@
         // 1. 顶部大图（略微下移，避开自定义导航栏）
         [self.containerView addSubview:self.vipImageView];
         [self.vipImageView mas_makeConstraints:^(MASConstraintMaker *make) {
-            make.left.equalTo(self.containerView).offset(16);
-            make.right.equalTo(self.containerView).offset(-16);
-            make.top.equalTo(self.containerView).offset(KB_NAV_TOTAL_HEIGHT + 8);
-            make.height.mas_equalTo(KBFit(180));
+            make.right.left.equalTo(self.containerView).inset(KBFit(27));
+            make.top.equalTo(self.containerView).offset(KB_NAV_TOTAL_HEIGHT + 10);
+            make.height.mas_equalTo((269));
         }];
+        [self.containerView addSubview:self.wanImageView];
+        [self.wanImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.right.left.equalTo(self.containerView);
+            make.top.equalTo(self.vipImageView).offset(70);
+            make.bottom.equalTo(self.containerView);
+        }];
+        
+        [self.containerView addSubview:self.titleLabel];
+        [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.centerX.equalTo(self.containerView);
+            make.top.equalTo(self.wanImageView).offset(53);
+        }];
+        [self.containerView addSubview:self.desLabel];
+        [self.desLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.centerX.equalTo(self.containerView);
+            make.top.equalTo(self.titleLabel.mas_bottom).offset(10);
+        }];
+        
         
         // 2. 下方四宫格图标（简单示意）
         UIView *g1 = [self gridItemWithImageView:self.aiImageView];
@@ -49,11 +70,11 @@
         [self.containerView addSubview:g3];
         [self.containerView addSubview:g4];
         
-        CGFloat spacing = 12;
+        CGFloat spacing = 16;
         [g1 mas_makeConstraints:^(MASConstraintMaker *make) {
             make.left.equalTo(self.vipImageView);
-            make.top.equalTo(self.vipImageView.mas_bottom).offset(18);
-            make.height.mas_equalTo(KBFit(90));
+            make.top.equalTo(self.desLabel.mas_bottom).offset(18);
+            make.height.mas_equalTo(((113)));
         }];
         [g2 mas_makeConstraints:^(MASConstraintMaker *make) {
             make.right.equalTo(self.vipImageView);
@@ -74,7 +95,7 @@
             make.left.equalTo(g3.mas_right).offset(spacing);
             make.height.equalTo(g1);
             make.width.equalTo(g1);
-            make.bottom.lessThanOrEqualTo(self.containerView).offset(-12);
+//            make.bottom.lessThanOrEqualTo(self.containerView).offset(-12);
         }];
     }
     return self;
@@ -84,13 +105,15 @@
 - (UIView *)gridItemWithImageView:(UIImageView *)iv {
     // 简单白底圆角卡片承载图标
     UIView *v = [UIView new];
-    v.backgroundColor = [UIColor colorWithWhite:0.97 alpha:1.0];
-    v.layer.cornerRadius = 12;
-    v.layer.masksToBounds = YES;
+//    v.backgroundColor = [UIColor colorWithWhite:0.97 alpha:1.0];
+//    v.layer.cornerRadius = 12;
+//    v.layer.masksToBounds = YES;
     [v addSubview:iv];
+    iv.contentMode = UIViewContentModeScaleAspectFill;
     [iv mas_makeConstraints:^(MASConstraintMaker *make) {
-        make.center.equalTo(v);
-        make.width.height.mas_equalTo(40);
+//        make.center.equalTo(v);
+//        make.width.height.mas_equalTo(40);
+        make.edges.equalTo(v);
     }];
     return v;
 }
@@ -108,12 +131,18 @@
     if (!_vipImageView) {
         _vipImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_vip_icon"]];
         _vipImageView.contentMode = UIViewContentModeScaleAspectFill;
-        _vipImageView.clipsToBounds = YES;
-        _vipImageView.layer.cornerRadius = 14;
     }
     return _vipImageView;
 }
 
+- (UIImageView *)wanImageView {
+    if (!_wanImageView) {
+        _wanImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_wanwhite_icon"]];
+        _wanImageView.contentMode = UIViewContentModeScaleAspectFill;
+    }
+    return _wanImageView;
+}
+
 - (UIImageView *)aiImageView {
     if (!_aiImageView) {
         _aiImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_ai_icon"]];
@@ -143,5 +172,25 @@
     return _emotionImageView;
 }
 
+
+- (UILabel *)titleLabel{
+    if (!_titleLabel) {
+        _titleLabel = [[UILabel alloc] init];
+        _titleLabel.text = @"Become a member of LOVE KEY";
+        _titleLabel.textColor = [UIColor colorWithHex:KBBlackValue];
+        _titleLabel.font = [UIFont systemFontOfSize:25 weight:UIFontWeightBold];
+    }
+    return _titleLabel;
+}
+- (UILabel *)desLabel{
+    if (!_desLabel) {
+        _desLabel = [[UILabel alloc] init];
+        _desLabel.text = @"Unlock all functions";
+        _desLabel.textColor = [UIColor colorWithHex:KBBlackValue];
+        _desLabel.font = [UIFont systemFontOfSize:16 weight:UIFontWeightBold];
+    }
+    return _desLabel;
+}
+
 @end
 

keyBoard/Class/Pay/V/KBVipSubscribeCell.m

@@ -13,7 +13,6 @@
 @property (nonatomic, strong) UILabel *priceLabel;       // “$4.49”
 @property (nonatomic, strong) UILabel *strikeLabel;      // 删除线原价
 @property (nonatomic, strong) UIButton *selectButton;    // 右侧选择按钮
-@property (nonatomic, strong) CAShapeLayer *borderLayer; // 选中边框
 @end
 
 @implementation KBVipSubscribeCell
@@ -23,8 +22,12 @@
         self.contentView.backgroundColor = [UIColor clearColor];
         
         [self.contentView addSubview:self.cardView];
+//        self.cardView.backgroundColor = [UIColor redColor];
         [self.cardView mas_makeConstraints:^(MASConstraintMaker *make) {
-            make.edges.equalTo(self.contentView);
+            make.left.right.equalTo(self.contentView);
+            make.top.equalTo(self.contentView).inset(6);
+            make.bottom.equalTo(self.contentView);
+
         }];
         
         [self.cardView addSubview:self.titleLabel];
@@ -34,7 +37,7 @@
         
         [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
             make.left.equalTo(self.cardView).offset(16);
-            make.top.equalTo(self.cardView).offset(16);
+            make.top.equalTo(self.cardView).offset(11);
         }];
         [self.priceLabel mas_makeConstraints:^(MASConstraintMaker *make) {
             make.left.equalTo(self.titleLabel);
@@ -49,27 +52,16 @@
             make.right.equalTo(self.cardView).offset(-16);
             make.width.height.mas_equalTo(28);
         }];
-        
-        // 边框层（选中时显示主题绿）
-        self.borderLayer = [CAShapeLayer layer];
-        self.borderLayer.strokeColor = [UIColor colorWithWhite:0.9 alpha:1.0].CGColor;
-        // 使用透明填充，避免遮挡内部子视图；只显示描边
-        self.borderLayer.fillColor = UIColor.clearColor.CGColor;
-        self.borderLayer.lineWidth = 1.5;
-        // 放到底层，避免盖住 label/button（修复滚动后偶现内容被遮挡变空白）
-        [self.cardView.layer insertSublayer:self.borderLayer atIndex:0];
+        // 基于 CALayer 的边框（替代 borderLayer）
+        self.cardView.layer.borderWidth = 1;
+        self.cardView.layer.borderColor = [UIColor colorWithWhite:0.9 alpha:1.0].CGColor;
     }
     return self;
 }
 
 - (void)layoutSubviews {
     [super layoutSubviews];
-    CGFloat radius = 16;
-    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.cardView.bounds cornerRadius:radius];
-    self.cardView.layer.cornerRadius = radius;
-    self.cardView.layer.masksToBounds = YES;
-    self.borderLayer.frame = self.cardView.bounds;
-    self.borderLayer.path = path.CGPath;
+
 }
 
 - (void)prepareForReuse {
@@ -101,17 +93,13 @@
     [self.selectButton setImage:img forState:UIControlStateNormal];
     CGColorRef color = (selected ? [UIColor colorWithHex:KBColorValue].CGColor : [UIColor colorWithWhite:0.9 alpha:1.0].CGColor);
     void (^changes)(void) = ^{
-        self.borderLayer.strokeColor = color;
-        self.cardView.layer.shadowOpacity = selected ? 0.12 : 0.0;
-        self.cardView.layer.shadowColor = [UIColor colorWithHex:KBColorValue].CGColor;
-        self.cardView.layer.shadowRadius = selected ? 8 : 0;
-        self.cardView.layer.shadowOffset = CGSizeMake(0, selected ? 4 : 0);
+        self.cardView.layer.borderColor = color;
+//        self.cardView.layer.shadowOpacity = selected ? 0.12 : 0.0;
+//        self.cardView.layer.shadowColor = [UIColor colorWithHex:KBColorValue].CGColor;
+//        self.cardView.layer.shadowRadius = selected ? 8 : 0;
+//        self.cardView.layer.shadowOffset = CGSizeMake(0, selected ? 4 : 0);
     };
-    if (animated) {
-        [UIView animateWithDuration:0.15 animations:changes];
-    } else {
         changes();
-    }
 }
 
 #pragma mark - Lazy
@@ -119,6 +107,9 @@
     if (!_cardView) {
         _cardView = [UIView new];
         _cardView.backgroundColor = [UIColor whiteColor];
+        CGFloat radius = 10;
+        _cardView.layer.cornerRadius = radius;
+        _cardView.clipsToBounds = YES;
     }
     return _cardView;
 }
@@ -127,7 +118,7 @@
         _titleLabel = [UILabel new];
         _titleLabel.text = @"Monthly Subscription";
         _titleLabel.textColor = [UIColor colorWithHex:KBBlackValue];
-        _titleLabel.font = [UIFont systemFontOfSize:16 weight:UIFontWeightSemibold];
+        _titleLabel.font = [UIFont systemFontOfSize:13 weight:UIFontWeightSemibold];
     }
     return _titleLabel;
 }
@@ -136,7 +127,7 @@
         _priceLabel = [UILabel new];
         _priceLabel.text = @"$4.49";
         _priceLabel.textColor = [UIColor colorWithHex:KBBlackValue];
-        _priceLabel.font = [UIFont systemFontOfSize:28 weight:UIFontWeightBold];
+        _priceLabel.font = [UIFont systemFontOfSize:20 weight:UIFontWeightBold];
     }
     return _priceLabel;
 }
@@ -144,7 +135,7 @@
     if (!_strikeLabel) {
         _strikeLabel = [UILabel new];
         _strikeLabel.text = @"$4.49";
-        _strikeLabel.font = [UIFont systemFontOfSize:16 weight:UIFontWeightSemibold];
+        _strikeLabel.font = [UIFont systemFontOfSize:20 weight:UIFontWeightSemibold];
         _strikeLabel.textColor = [UIColor colorWithWhite:0.7 alpha:1.0];
     }
     return _strikeLabel;

keyBoard/Class/Pay/VC/KBVipPay.h

@@ -10,7 +10,7 @@
 NS_ASSUME_NONNULL_BEGIN
 
 /// VIP 订阅页（整体使用 UICollectionView，上下滚动）
-@interface KBVipPay : UIViewController
+@interface KBVipPay : BaseViewController
 @end
 
 NS_ASSUME_NONNULL_END

keyBoard/Class/Pay/VC/KBVipPay.m

@@ -19,6 +19,7 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
 @property (nonatomic, strong) NSArray<NSDictionary *> *plans;     // 订阅方案数组
 @property (nonatomic, assign) NSInteger selectedIndex;            // 当前选中的方案索引
 @property (nonatomic, strong) UIButton *closeButton;            // 当前选中的方案索引
+@property (nonatomic, strong) UIImageView *bgImageView;  // 全屏背景图
 
 @end
 
@@ -29,9 +30,15 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
     // 标题与导航样式
 //    self.kb_titleLabel.text = @"VIP";
 //    self.kb_navView.backgroundColor = [UIColor clearColor];
-    
-    self.view.backgroundColor = [UIColor colorWithWhite:0.97 alpha:1.0];
-    
+    self.view.backgroundColor = [UIColor colorWithHex:0xF6F7FB];
+    self.kb_enableCustomNavBar = NO;
+    self.bgImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_vipbg_icon"]];
+    self.bgImageView.contentMode = UIViewContentModeScaleAspectFill;
+    [self.view addSubview:self.bgImageView];
+    [self.bgImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.top.right.equalTo(self.view);
+        make.height.mas_equalTo(224);
+    }];
     // 初始化数据（简单演示）
     self.plans = @[
         @{@"title":@"Monthly Subscription", @"price":@"$4.49", @"strike":@"$4.49"},
@@ -39,17 +46,18 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
         @{@"title":@"Monthly Subscription", @"price":@"$4.49", @"strike":@"$4.49"},
     ];
     self.selectedIndex = 1; // 默认选中第二项
-    [self.view addSubview:self.closeButton];
-    [self.closeButton mas_makeConstraints:^(MASConstraintMaker *make) {
-        make.top.equalTo(self.view).offset(KB_NAV_TOTAL_HEIGHT);
-        make.left.equalTo(self.view).offset(15);
-        make.width.height.mas_equalTo(36);
-    }];
+    
     // 组装主列表
     [self.view addSubview:self.collectionView];
     [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
         make.left.right.bottom.equalTo(self.view);
-        make.top.equalTo(self.view).offset(KB_NAV_TOTAL_HEIGHT);
+        make.top.equalTo(self.view).offset(0);
+    }];
+    [self.view addSubview:self.closeButton];
+    [self.closeButton mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.top.equalTo(self.view).offset(KB_NAV_TOTAL_HEIGHT - 30);
+        make.left.equalTo(self.view).offset(15);
+        make.width.height.mas_equalTo(36);
     }];
     
     [self.collectionView reloadData];
@@ -67,6 +75,11 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
     if (cell) { [cell applySelected:YES animated:NO]; }
 }
 
+#pragma mark - Action
+- (void)onTapClose{
+    [self.navigationController popViewControllerAnimated:true];
+}
+
 #pragma mark - UICollectionView DataSource
 
 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
@@ -133,7 +146,7 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
     CGFloat w = KB_SCREEN_WIDTH - 32;
     if (indexPath.section == 1) {
-        return CGSizeMake(w, 106);
+        return CGSizeMake(w, KBFit(75 + 6));
     } else {
         return CGSizeMake(w, 140);
     }
@@ -142,7 +155,7 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
     if (section == 0) {
         // 头部高度 = 484 + 导航栏高度
-        return CGSizeMake(KB_SCREEN_WIDTH, 484 + KB_NAV_TOTAL_HEIGHT);
+        return CGSizeMake(KB_SCREEN_WIDTH, 474 + KB_NAV_TOTAL_HEIGHT);
     }
     return CGSizeZero;
 }
@@ -154,7 +167,8 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
 
 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
     if (section == 1) {
-        return UIEdgeInsetsMake(0, 16, 10, 16);
+        // 留出顶部间距，避免第一个订阅 cell 的边框被 header 盖住
+        return UIEdgeInsetsMake(16, 16, 10, 16);
     } else if (section == 2) {
         return UIEdgeInsetsMake(10, 16, 20, 16);
     }
@@ -185,7 +199,7 @@ static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
 - (UIButton *)closeButton {
     if (!_closeButton) {
         _closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
-        [_closeButton setImage:[UIImage imageNamed:@"white_close_icon"] forState:UIControlStateNormal];
+        [_closeButton setImage:[UIImage imageNamed:@"close_white2_icon"] forState:UIControlStateNormal];
         [_closeButton addTarget:self action:@selector(onTapClose) forControlEvents:UIControlEventTouchUpInside];
     }
     return _closeButton;