2

keyBoard/Assets.xcassets/Home/home_bar_underline.imageset/Contents.json

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

keyBoard/Assets.xcassets/Home/home_left_image.imageset/Contents.json

@@ -5,12 +5,12 @@
       "scale" : "1x"
     },
     {
-      "filename" : "微信图片_20251107143422_215_763.png",
+      "filename" : "微信图片_20251107154239_220_763.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "微信图片_20251107143422_215_763 1.png",
+      "filename" : "微信图片_20251107154239_220_763 1.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

keyBoard/Assets.xcassets/Home/home_right_image.imageset/Contents.json

@@ -5,12 +5,12 @@
       "scale" : "1x"
     },
     {
-      "filename" : "微信图片_20251107143423_216_763.png",
+      "filename" : "微信图片_20251107154240_221_763.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "微信图片_20251107143423_216_763 1.png",
+      "filename" : "微信图片_20251107154240_221_763 1.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

keyBoard/Class/Home/V/KBPanModalView.m

@@ -14,16 +14,20 @@
 @property (nonatomic, strong) KBDirectionIndicatorView *indicator;
 // 顶部切换按钮与指示条
 @property (nonatomic, strong) UIView *topBar;
-@property (nonatomic, strong) UIView *contentView;
-@property (nonatomic, strong) UIImageView *leftImageView;
-@property (nonatomic, strong) UIImageView *rightImageView;
+@property (nonatomic, strong) UIView *bigWhiteContentView;
+@property (nonatomic, strong) UIView *secWhiteContentView;
 /// 皇冠👑
 @property (nonatomic, strong) UIImageView *hgImageView;
+/// 人
+@property (nonatomic, strong) UIImageView *personImageView;
+
+@property (nonatomic, strong) UIImageView *leftImageView;
+@property (nonatomic, strong) UIImageView *rightImageView;
 
 
 @property (nonatomic, strong) UIButton *hotButton;
 @property (nonatomic, strong) UIButton *rankButton;
-@property (nonatomic, strong) UIView *underlineView; // 选中下划线
+@property (nonatomic, strong) UIImageView *underlineImageView; // 选中下划线
 
 // 承载子控制器内容
 @property (nonatomic, strong) UIView *containerView;
@@ -37,34 +41,16 @@
 
 - (instancetype)initWithFrame:(CGRect)frame{
     if (self = [super initWithFrame:frame]) {
-//        self.backgroundColor = [UIColor redColor];
+        // 该背景色会被 HWPanModal 用来设置容器的 _contentView 背景色
+        // 参考 Pods/HWPanModal/Sources/View/PanModal/HWPanModalContainerView.m: adjustPanContainerBackgroundColor
+        // 想要改变外层白色底（截图中 _contentView）的颜色，只需改这里即可
+        self.backgroundColor = [UIColor clearColor]; // 柔和的绿色
 //        HWBackgroundConfig *config = [HWBackgroundConfig configWithBehavior:HWBackgroundBehaviorDefault];
 //        config.backgroundAlpha = 0;
 //        [self.hw_dimmedView reloadConfig:config];
         
-        // 添加容器
-        [self addSubview:self.contentView];
-        [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
-            make.left.right.equalTo(self).inset(16);
-            make.top.equalTo(self).offset(48);
-            make.bottom.equalTo(self);
-        }];
-        
-        [self.contentView addSubview:self.leftImageView];
-        [self.contentView addSubview:self.rightImageView];
-        [self.leftImageView mas_makeConstraints:^(MASConstraintMaker *make) {
-            make.left.right.equalTo(self.contentView);
-            make.top.equalTo(self.contentView);
-            make.height.mas_equalTo(79);
-        }];
-        [self.rightImageView mas_makeConstraints:^(MASConstraintMaker *make) {
-            make.left.right.equalTo(self.contentView);
-            make.top.equalTo(self.contentView);
-            make.height.equalTo(self.leftImageView);
 
-        }];
-
-        
+       
         // 顶部按钮 + 容器
         [self setupTopButtonsAndContainer];
         // 默认展示“热门”
@@ -171,16 +157,38 @@
 #pragma mark - UI
 
 - (void)setupTopButtonsAndContainer {
+    
+    // 添加最大的白色容器
+    [self addSubview:self.bigWhiteContentView];
+    [self addSubview:self.personImageView];
+    [self addSubview:self.hgImageView];
+    
+    [self.bigWhiteContentView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.right.equalTo(self).inset(0);
+        make.top.equalTo(self).offset(40);
+        make.bottom.equalTo(self);
+    }];
+    
+    [self.bigWhiteContentView addSubview:self.secWhiteContentView];
+    [self.secWhiteContentView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.right.equalTo(self).inset(16);
+        make.top.equalTo(self.bigWhiteContentView).offset(47);
+        make.bottom.equalTo(self.bigWhiteContentView);
+    }];
+    
+
     // 顶部栏
-    self.topBar = [[UIView alloc] init];
-//    self.topBar.backgroundColor = [UIColor colorWithWhite:1 alpha:0.9];
-    [self addSubview:self.topBar];
-    // 首次展示时先隐藏，待转场完成后再淡入，避免“自底向上滑入”的错觉
-//    self.topBar.alpha = 0.0;
+    [self.secWhiteContentView addSubview:self.topBar];
+    [self.secWhiteContentView addSubview:self.containerView];
+    
+    [self.topBar addSubview:self.leftImageView];
+    [self.topBar addSubview:self.rightImageView];
+    
+    
     
     // 两个按钮
     self.hotButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    [self.hotButton setTitle:@"热门" forState:UIControlStateNormal];
+    [self.hotButton setTitle:@"Ranking List" forState:UIControlStateNormal];
     [self.hotButton setTitleColor:[UIColor darkTextColor] forState:UIControlStateNormal];
     [self.hotButton setTitleColor:[UIColor blackColor] forState:UIControlStateSelected];
     self.hotButton.titleLabel.font = [UIFont boldSystemFontOfSize:16];
@@ -189,7 +197,7 @@
     [self.topBar addSubview:self.hotButton];
     
     self.rankButton = [UIButton buttonWithType:UIButtonTypeCustom];
-    [self.rankButton setTitle:@"排行" forState:UIControlStateNormal];
+    [self.rankButton setTitle:@"Persona circle" forState:UIControlStateNormal];
     [self.rankButton setTitleColor:[UIColor darkTextColor] forState:UIControlStateNormal];
     [self.rankButton setTitleColor:[UIColor blackColor] forState:UIControlStateSelected];
     self.rankButton.titleLabel.font = [UIFont boldSystemFontOfSize:16];
@@ -198,48 +206,67 @@
     [self.topBar addSubview:self.rankButton];
     
     // 下划线（跟随选中按钮）
-    self.underlineView = [[UIView alloc] init];
-    self.underlineView.backgroundColor = [UIColor blackColor];
-    self.underlineView.layer.cornerRadius = 1.0;
-    [self.topBar addSubview:self.underlineView];
-    
-    // 容器视图
-    self.containerView = [[UIView alloc] init];
-    self.containerView.backgroundColor = [UIColor redColor];
-    self.containerView.clipsToBounds = YES;
-    [self addSubview:self.containerView];
+    [self.topBar addSubview:self.underlineImageView];
     
     // Masonry 约束
-    CGFloat topPadding = 47; // 与顶部小指示器留点空间
+    CGFloat topPadding = 0; // 与顶部小指示器留点空间
     [self.topBar mas_makeConstraints:^(MASConstraintMaker *make) {
-        make.left.right.equalTo(self);
-        make.top.equalTo(self).offset(topPadding);
-        make.height.mas_equalTo(44);
+        make.left.right.equalTo(self.secWhiteContentView);
+        make.top.equalTo(self.secWhiteContentView).offset(topPadding);
+        make.height.mas_equalTo(54);
+    }];
+    
+    [self.leftImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.right.equalTo(self.topBar);
+        make.top.equalTo(self.topBar);
+        make.height.mas_equalTo(54);
+    }];
+    [self.rightImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.right.equalTo(self.topBar);
+        make.top.equalTo(self.topBar);
+        make.height.equalTo(self.leftImageView);
+
     }];
     
     [self.hotButton mas_makeConstraints:^(MASConstraintMaker *make) {
-        make.top.bottom.equalTo(self.topBar);
+        make.centerY.equalTo(self.topBar).offset(3);
         make.left.equalTo(self.topBar);
     }];
     [self.rankButton mas_makeConstraints:^(MASConstraintMaker *make) {
-        make.top.bottom.equalTo(self.topBar);
+        make.centerY.equalTo(self.hotButton);
         make.right.equalTo(self.topBar);
         make.left.equalTo(self.hotButton.mas_right);
         make.width.equalTo(self.hotButton);
     }];
     
     // 初始先放在“热门”下方，宽度稍小于按钮文字
-    [self.underlineView mas_makeConstraints:^(MASConstraintMaker *make) {
-        make.height.mas_equalTo(2);
-        make.bottom.equalTo(self.topBar.mas_bottom).offset(-2);
-        make.centerX.equalTo(self.hotButton);
-        make.width.mas_equalTo(24);
+    [self.underlineImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.height.mas_equalTo(5);
+        make.bottom.equalTo(self.topBar.mas_bottom).offset(-14);
+        make.centerX.equalTo(self.hotButton).offset(-0);
+        make.width.mas_equalTo(78);
     }];
     
     [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
         make.top.equalTo(self.topBar.mas_bottom).offset(8);
-        make.left.right.bottom.equalTo(self);
+        make.left.right.equalTo(self.secWhiteContentView).inset(0);
+        make.bottom.equalTo(self.secWhiteContentView);
     }];
+    
+    [self.personImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.equalTo(self).offset(46);
+        make.bottom.equalTo(self.topBar.mas_top).offset(22);
+        make.width.mas_equalTo(70);
+        make.height.mas_equalTo(107);
+    }];
+    
+    [self.hgImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.right.equalTo(self).offset(-38);
+        make.bottom.equalTo(self.topBar.mas_top).offset(12);
+        make.width.mas_equalTo(97);
+        make.height.mas_equalTo(78);
+    }];
+
 }
 
 #pragma mark - Action
@@ -296,12 +323,19 @@
     
     UIButton *btn = (index == 0) ? self.hotButton : self.rankButton;
     // 更新下划线位置
-    [self.underlineView mas_remakeConstraints:^(MASConstraintMaker *make) {
-        make.height.mas_equalTo(2);
-        make.bottom.equalTo(self.topBar.mas_bottom).offset(-2);
-        make.centerX.equalTo(btn);
-        make.width.mas_equalTo(24);
+    [self.underlineImageView mas_remakeConstraints:^(MASConstraintMaker *make) {
+        make.height.mas_equalTo(5);
+        make.bottom.equalTo(self.topBar.mas_bottom).offset(-15);
+        make.centerX.equalTo(btn).offset(index == 0 ? -6 : -11);
+        make.width.mas_equalTo(78);
     }];
+    if (index == 0) {
+        self.leftImageView.hidden = false;
+        self.rightImageView.hidden = true;
+    }else{
+        self.leftImageView.hidden = true;
+        self.rightImageView.hidden = false;
+    }
     
     if (animated) {
         [UIView animateWithDuration:0.25 animations:^{
@@ -312,11 +346,22 @@
     }
 }
 
-- (UIView *)contentView{
-    if (!_contentView) {
-        _contentView = [[UIView alloc] init];
+- (UIView *)bigWhiteContentView{
+    if (!_bigWhiteContentView) {
+        _bigWhiteContentView = [[UIView alloc] init];
+        _bigWhiteContentView.backgroundColor = [UIColor whiteColor];
+        _bigWhiteContentView.layer.cornerRadius = 40;
+        _bigWhiteContentView.layer.masksToBounds = true;
     }
-    return _contentView;
+    return _bigWhiteContentView;
+}
+
+- (UIView *)secWhiteContentView{
+    if (!_secWhiteContentView) {
+        _secWhiteContentView = [[UIView alloc] init];
+        _secWhiteContentView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.23];
+    }
+    return _secWhiteContentView;
 }
 
 - (UIImageView *)leftImageView{
@@ -332,7 +377,7 @@
     if (!_rightImageView) {
         _rightImageView = [[UIImageView alloc] init];
         _rightImageView.image = [UIImage imageNamed:@"home_right_image"];
-        _rightImageView.contentMode = UIViewContentModeScaleToFill;
+        _rightImageView.contentMode = UIViewContentModeScaleAspectFit;
         _rightImageView.hidden = true;
     }
     return _rightImageView;
@@ -342,9 +387,41 @@
     if (!_hgImageView) {
         _hgImageView = [[UIImageView alloc] init];
         _hgImageView.image = [UIImage imageNamed:@"home_hg_icon"];
-        _hgImageView.contentMode = UIViewContentModeScaleToFill;
+        _hgImageView.contentMode = UIViewContentModeScaleAspectFit;
     }
     return _hgImageView;
 }
 
+- (UIImageView *)personImageView{
+    if (!_personImageView) {
+        _personImageView = [[UIImageView alloc] init];
+        _personImageView.image = [UIImage imageNamed:@"home_person_icon"];
+        _personImageView.contentMode = UIViewContentModeScaleAspectFit;
+    }
+    return _personImageView;
+}
+
+
+- (UIView *)topBar{
+    if (!_topBar) {
+        _topBar = [[UIView alloc] init];
+    }
+    return _topBar;
+}
+
+- (UIView *)containerView{
+    if (!_containerView) {
+        _containerView = [[UIView alloc] init];
+    }
+    return _containerView;
+}
+
+- (UIImageView *)underlineImageView{
+    if (!_underlineImageView) {
+        _underlineImageView = [[UIImageView alloc] init];
+        _underlineImageView.image = [UIImage imageNamed:@"home_bar_underline"];
+    }
+    return _underlineImageView;
+}
+
 @end