Skip to main content

Yêu Cầu Chỉnh Sửa: Bố Cục Trang BigFan Và Lỗi Cắt Góc Box Nội Dung

Ngày cập nhật: 30/06/2026
Loại: UX/UI Layout Tweaks & Bug Fixes

Ảnh feedback:

1. Lỗi Cắt Góc Dưới Của Các Box Nội Dung (Giao Diện Chung)​

Hiện trạng​

Trên trang chủ (Home Screen), các box của chuyên mục Event, BigFan, và Tin tức đang bị lỗi hiển thị ở phần đáy:

  • Các góc bo tròn phía dưới (bottom-left và bottom-right) bị cắt ngang phẳng lỳ.
  • Đổ bóng (box-shadow) ở viền dưới không hiển thị được.
  • Nguyên nhân thường do container cha sử dụng thuộc tính overflow: 'hidden' kết hợp với việc thiếu padding hoặc margin ở đáy (paddingBottom / marginBottom), hoặc do tính toán chiều cao cố định của box quá khít với nội dung bên trong.

Yêu cầu chỉnh sửa​

  • Kiểm tra và loại bỏ hoặc điều chỉnh thuộc tính overflow: 'hidden' trên các container box nếu nó cắt mất border-radius và box-shadow.
  • Thêm padding đáy (paddingBottom: 8 hoặc 12) hoặc margin để đảm bảo các góc bo tròn (borderRadius) và hiệu ứng đổ bóng phía dưới của box hiển thị đầy đủ, không bị cụt mất phần dưới.

2. Điều Chỉnh Tỉ Lệ Box BigFan Trên Trang Chủ​

Hiện trạng​

Box hiển thị hoạt động trao thưởng BigFan trên trang chủ hiện tại đang khá lùn, gây cảm giác thô và thiếu cân đối so với các box Event hay Tin tức bên cạnh.

Yêu cầu chỉnh sửa​

  • Tăng chiều cao của box BigFan trên trang chủ.
  • Cấu hình chiều cao của box BigFan cao hơn tỉ lệ 4:3 (ví dụ: tỉ lệ chiều rộng : chiều cao có thể chỉnh về 3:4 hoặc tăng thêm chiều cao tối thiểu minHeight để thông tin hiển thị thoáng hơn, không bị bó hẹp).

Theo feedback từ Ảnh 2, bố cục màn hình BigFan cần được sắp xếp và cố định lại các thành phần như sau:

3.1 Vị trí phần giới thiệu​

  • Phần giới thiệu cộng đồng: "Cập nhật ưu đãi cộng đồng, voucher và quà tặng sinh nhật dành cho thành viên Golden Lotus." phải luôn hiển thị ở phía trên đầu màn hình, nằm trước (trên) phần slide chạy các hoạt động trao thưởng.

3.2 Nút CTA "Tham gia cộng đồng Facebook" cố định dưới đáy (Sticky Bottom)​

  • Hiện trạng: Nút Facebook đang trôi nổi ngay dưới slide và sẽ cuộn theo nội dung trang nếu trang dài.
  • Yêu cầu mới: Nút "Tham gia cộng đồng Facebook" phải được ghim cố định dưới đáy màn hình (Sticky/Fixed Bottom).
    • Khi người dùng cuộn (scroll) danh sách slide trao thưởng ở giữa, nút Facebook vẫn nằm im ở vị trí sát cạnh dưới của màn hình.
    • Sử dụng layout định dạng tuyệt đối ở bottom hoặc dùng component bọc bên ngoài ScrollView.

Cấu trúc phân cấp UI đề xuất (React Native):

<View style={{ flex: 1, backgroundColor: '#fff' }}>
  {/* Phần cuộn nội dung */}
  <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 80 }}>
    
    {/* 1. Phần giới thiệu trên đầu */}
    <View style={styles.introContainer}>
      <Text style={styles.introText}>
        Cập nhật ưu đãi cộng đồng, voucher và quà tặng sinh nhật...
      </Text>
      <Text style={styles.sectionTitle}>
        Người nhận giải vòng quay
      </Text>
    </View>

    {/* 2. Slide hoạt động trao thưởng nằm ở giữa */}
    <View style={styles.slideContainer}>
      <BigFanCarousel />
    </View>

  </ScrollView>

  {/* 3. Nút Facebook ghim cố định dưới cùng */}
  <View style={styles.stickyBottomButtonContainer}>
    <TouchableOpacity style={styles.facebookButton}>
      <Icon name="facebook" />
      <Text>Tham gia cộng đồng Facebook</Text>
    </TouchableOpacity>
  </View>
</View>

Tóm Tắt Checklist Chỉnh Sửa​

  • Sửa lỗi cắt góc dưới và mất box-shadow của các box Event, BigFan, Tin tức trên trang chủ.
  • Tăng chiều cao của box BigFan trên trang chủ (cao hơn tỉ lệ 4:3).
  • Điều chỉnh trang BigFan: Chuyển nội dung giới thiệu lên trên đầu, trước slide.
  • Ghim cố định nút Facebook dưới đáy màn hình BigFan (Sticky Bottom Button).