them build pc, account

2021-03-19 17:43:53 +07:00
parent e8a10383f5
commit 96fa44ed43
5 changed files with 1138 additions and 103 deletions
--- a/screens/BuildPc.tsx
+++ b/screens/BuildPc.tsx
@@ -14,6 +14,8 @@ import { TextInput } from 'react-native-gesture-handler';
 import { RadioButton, Checkbox } from 'react-native-paper';
 import { Picker } from '@react-native-picker/picker';
 import { ArticleItem } from '../components/article/ArticleItem';
+import Swiper from 'react-native-swiper';
+import { ShowProductItem } from '../components/product/productItem';

 export default function BuildPc() {
    return (
@@ -27,6 +29,8 @@ export default function BuildPc() {

                <BuildPcBox />

+                <ProductOtherBuildPc />
+
                <PolicyFooter />

                <Social />
@@ -77,7 +81,35 @@ const BuildPcBox = () => {
            <BuildPcListStore />

            <ListItemBuildPc />
-
+            <View>
+                <Text style={styles.boxBuildPcTotalPrice}>Chi phí dự tính <Text style={styles.boxBuildPcTotalPriceNum}>30.000.000 đ</Text></Text>
+            </View>
+            <View>
+                <TouchableOpacity style={styles.buttonBuildPcFt}>
+                    <Text style={styles.buttonBuildPcFtText}>Lưu cấu hình</Text>
+                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="floppy-o" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.buttonBuildPcFt}>
+                    <Text style={styles.buttonBuildPcFtText}>tải file excel cấu hình</Text>
+                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="file-excel-o" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.buttonBuildPcFt}>
+                    <Text style={styles.buttonBuildPcFtText}>tải ảnh cấu hình</Text>
+                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.buttonBuildPcFt}>
+                    <Text style={styles.buttonBuildPcFtText}>chia sẻ cấu hình</Text>
+                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.buttonBuildPcFt}>
+                    <Text style={styles.buttonBuildPcFtText}>Xem & in</Text>
+                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="picture-o" />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.buttonBuildPcFt}>
+                    <Text style={styles.buttonBuildPcFtText}>Thêm vào giỏ hàng</Text>
+                    <FontAwesome style={styles.buttonBuildPcFtIcon} name="shopping-cart" />
+                </TouchableOpacity>
+            </View>
        </View>
    )
 }
@@ -247,9 +279,25 @@ const ListItemBuildPc = () => {
            }
            <Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
                <View style={styles.itemBuildPCPop}>
-                    <Pressable style={styles.itemBuildPCPopClose} onPress={() => setModalVisible(!modalVisible)}>
-                        <FontAwesome style={styles.itemBuildPCPopCloseIcon} name="times" />
-                    </Pressable>
+                    <View style={styles.headerPopBuildPC}>
+                        <View style={styles.headerPopBuildPCContentSt}>
+                            <Text style={styles.headerPopBuildPCTitle}>Chọn linh kiện</Text>
+                            <Pressable style={styles.itemBuildPCPopClose} onPress={() => setModalVisible(!modalVisible)}>
+                                <FontAwesome style={styles.itemBuildPCPopCloseIcon} name="times" />
+                            </Pressable>
+                        </View>
+                        <View style={styles.headerPopBuildPCContentNd}>
+                            <SearchPopBuildPc />
+                            <FilterPopBuildPc />
+                        </View>
+                        <View style={styles.headerPopBuildPCContentRd}>
+                            <View style={styles.headerPopBuildPCContentRdTop}>
+                                <SortProBuildPc />
+                                <WarehouseProBuildPc />
+                            </View>
+                            <PagingProBuildPc />
+                        </View>
+                    </View>
                    <ScrollView>
                        <ProductBuildPC />
                    </ScrollView>
@@ -259,90 +307,226 @@ const ListItemBuildPc = () => {
    )
 }

+const SearchPopBuildPc = () => {
+    return (
+        <View style={styles.headerPopBuildPCSearch}>
+            <TextInput style={styles.headerPopBuildPCSearchInput} placeholder="Bạn cần tìm linh kiện gì?" />
+            <Pressable style={styles.headerPopBuildPCSearchButton}>
+                <FontAwesome style={styles.headerPopBuildPCSearchIcon} name="search" />
+            </Pressable>
+        </View>
+    )
+}
+
+const FilterPopBuildPc = () => {
+    const [openFilter, setopenFilter] = useState(true);
+    return (
+        <View style={styles.headerPopBuildPCContentFilter}>
+            <TouchableOpacity style={styles.headerPopBuildPCFilter} onPress={() => setopenFilter(!openFilter)}>
+                <Ionicons style={styles.headerPopBuildPCFinterIcon} name="funnel-outline" />
+                <Text style={styles.headerPopBuildPCFinterText}>Lọc</Text>
+            </TouchableOpacity>
+            <View style={openFilter ? styles.headerPopBuildPCContentFilterShowHide : styles.headerPopBuildPCContentFilterShow}>
+                <Text style={styles.headerPopBuildPCContentFilterTitle}>Lọc sản phẩm theo</Text>
+                <ScrollView style={{ maxHeight: 400, }}>
+                    <FinterBuildPcItem />
+                    <FinterBuildPcItem />
+                    <FinterBuildPcItem />
+                    <FinterBuildPcItem />
+                </ScrollView>
+            </View>
+        </View>
+    )
+}
+
+const FinterBuildPcItem = () => {
+    const [checkedFilter, setCheckedFilter] = useState(false);
+    return (
+        <View style={styles.headerPopBuildPCContentFilterBox}>
+            <Text style={styles.headerPopBuildPCContentFilterName}>Hãng sản xuất</Text>
+            <View style={styles.headerPopBuildPCContentFilterList}>
+                <View style={styles.headerPopBuildPCContentFilterItem}>
+                    <View style={styles.headerPopBuildPCContentFilterCheck}>
+                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
+                    </View>
+                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
+                </View>
+                <View style={styles.headerPopBuildPCContentFilterItem}>
+                    <View style={styles.headerPopBuildPCContentFilterCheck}>
+                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
+                    </View>
+                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
+                </View>
+                <View style={styles.headerPopBuildPCContentFilterItem}>
+                    <View style={styles.headerPopBuildPCContentFilterCheck}>
+                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
+                    </View>
+                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
+                </View>
+                <View style={styles.headerPopBuildPCContentFilterItem}>
+                    <View style={styles.headerPopBuildPCContentFilterCheck}>
+                        <Checkbox.IOS status={checkedFilter ? 'checked' : 'unchecked'} onPress={() => setCheckedFilter(!checkedFilter)} />
+                    </View>
+                    <Text style={styles.headerPopBuildPCContentFilterText}>AMD (50)</Text>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+const SortProBuildPc = () => {
+    const [showSortProBuildPc, setshowSortProBuildPc] = useState(true);
+    return (
+        <View style={styles.headerPopBuildPCContentSelect}>
+            <Text style={styles.headerPopBuildPCContentSelectTite}>Sắp Xếp</Text>
+            <TouchableOpacity style={styles.headerPopBuildPCContentSelectBox} onPress={() => setshowSortProBuildPc(!showSortProBuildPc)}>
+                <Text style={styles.headerPopBuildPCContentSelectBoxText}>Tùy chọn</Text>
+                <FontAwesome style={styles.headerPopBuildPCContentSelectBoxIcon} name="angle-down" />
+            </TouchableOpacity>
+            <View style={showSortProBuildPc ? [styles.headerPopBuildPCContentSelectList, styles.poLeft] : [styles.headerPopBuildPCContentSelectList, styles.poLeft, styles.active]}>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>Mới nhất</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>Giá tăng dần</Text>
+            </View>
+        </View>
+    )
+}
+
+const WarehouseProBuildPc = () => {
+    const [showSortProBuildPc, setshowSortProBuildPc] = useState(true);
+    return (
+        <View style={styles.headerPopBuildPCContentSelect}>
+            <Text style={styles.headerPopBuildPCContentSelectTite}>Kho hàng</Text>
+            <TouchableOpacity style={styles.headerPopBuildPCContentSelectBox} onPress={() => setshowSortProBuildPc(!showSortProBuildPc)}>
+                <Text style={styles.headerPopBuildPCContentSelectBoxText}>Tất cả</Text>
+                <FontAwesome style={styles.headerPopBuildPCContentSelectBoxIcon} name="angle-down" />
+            </TouchableOpacity>
+            <View style={showSortProBuildPc ? [styles.headerPopBuildPCContentSelectList, styles.poRight] : [styles.headerPopBuildPCContentSelectList, styles.poRight, styles.active]}>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>02: 43 Thái Hà - Q. Đống Đa - Hà Nội</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>05: 511 Quang Trung - Q. Hà Đông - Hà Nội</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội</Text>
+                <Text style={styles.headerPopBuildPCContentSelectItem}>08: 299 Minh Khai - Từ Sơn - Bắc Ninh</Text>
+            </View>
+        </View>
+    )
+}
+
+const PagingProBuildPc = () => {
+    return (
+        <View style={styles.pagingBuildPc}>
+            <TouchableOpacity style={[styles.pagingBuildPcItem, styles.pagingBuildPcItemActive]}>
+                <Text style={[styles.pagingBuildPcText, styles.pagingBuildPcTextActive]}>1</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.pagingBuildPcItem}>
+                <Text style={styles.pagingBuildPcText}>2</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.pagingBuildPcItem}>
+                <Text style={styles.pagingBuildPcText}>3</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.pagingBuildPcItem}>
+                <Text style={styles.pagingBuildPcText}>4</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.pagingBuildPcItem}>
+                <Text style={styles.pagingBuildPcText}>5</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.pagingBuildPcItem}>
+                <Text style={styles.pagingBuildPcText}>6</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.pagingBuildPcItem}>
+                <Text style={styles.pagingBuildPcText}>7</Text>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
 function formatCurrency(price: string | number) {
    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
    let len = priceConvert.length;
    return priceConvert.substring(0, len - 3);
 }

+const productData = [
+    {
+        id: 1,
+        productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+        },
+        price: 30000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        warrantry: '36 Tháng',
+    },
+    {
+        id: 2,
+        productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+        },
+        price: 25000000,
+        marketPrice: 50000000,
+        quantity: 0,
+        warrantry: '36 Tháng',
+    },
+    {
+        id: 3,
+        productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+        },
+        price: 35000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        warrantry: '36 Tháng',
+    },
+    {
+        id: 4,
+        productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+        },
+        price: 40000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        warrantry: '36 Tháng',
+    },
+    {
+        id: 5,
+        productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
+        productSKU: 'TESTSKU',
+        productImage: {
+            small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+            original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
+        },
+        price: 30000000,
+        marketPrice: 50000000,
+        quantity: 1,
+        warrantry: '36 Tháng',
+    },
+]
+
 const ProductBuildPC = () => {
-    const productData = [
-        {
-            id: 1,
-            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
-            productSKU: 'TESTSKU',
-            productImage: {
-                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-            },
-            price: 30000000,
-            marketPrice: 50000000,
-            quantity: 1,
-            warrantry: '36 Tháng',
-        },
-        {
-            id: 2,
-            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
-            productSKU: 'TESTSKU',
-            productImage: {
-                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-            },
-            price: 25000000,
-            marketPrice: 50000000,
-            quantity: 0,
-            warrantry: '36 Tháng',
-        },
-        {
-            id: 3,
-            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
-            productSKU: 'TESTSKU',
-            productImage: {
-                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-            },
-            price: 35000000,
-            marketPrice: 50000000,
-            quantity: 1,
-            warrantry: '36 Tháng',
-        },
-        {
-            id: 4,
-            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
-            productSKU: 'TESTSKU',
-            productImage: {
-                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-            },
-            price: 40000000,
-            marketPrice: 50000000,
-            quantity: 1,
-            warrantry: '36 Tháng',
-        },
-        {
-            id: 5,
-            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
-            productSKU: 'TESTSKU',
-            productImage: {
-                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
-            },
-            price: 30000000,
-            marketPrice: 50000000,
-            quantity: 1,
-            warrantry: '36 Tháng',
-        },
-    ]

    return (
        <View style={styles.boxPrductBuildPc}>
@@ -390,7 +574,7 @@ const ProductBuildPC = () => {
                                                : <View style={styles.boxPrductBuildPcSelecYes}>
                                                    <FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="plus" />
                                                </View>
-                                            }
+                                        }
                                    </Pressable>
                                </View>
                            )
@@ -402,6 +586,33 @@ const ProductBuildPC = () => {
    )
 }

+const ProductOtherBuildPc = () => {
+    const itemProductStyle = {
+        width: '100%',
+        flexDirection: 'column',
+    }
+    return (
+        <View style={styles.ProductOtherBuildPc}>
+            <Text style={styles.ProductOtherBuildPcTitle}>Cấu hình tham khảo</Text>
+            <View style={styles.ProductOtherBuildPcList}>
+                <Swiper style={styles.sliderSwipper} autoplay={true} showsButtons={false} index={3000} showsPagination={false}>
+                    {
+                        productData.map(item => <ShowProductItem key={item.id} id={item.id} productName={item.productName}
+                            productSKU={item.productSKU} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
+                        />)
+                    }
+                </Swiper>
+            </View>
+            <View>
+                <TouchableOpacity style={styles.ProductOtherBuildPcButton}>
+                    <Text style={styles.ProductOtherBuildPcButtonText}>Xem thêm 19 sản phẩm</Text>
+                    <FontAwesome style={styles.ProductOtherBuildPcButtonIcon} name="caret-right" />
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
 const winWidth = Dimensions.get('window').width; //full width
 const winHeight = Dimensions.get('window').height; //full height
 const winWidthP10 = winWidth - 20;
@@ -579,11 +790,10 @@ const styles = StyleSheet.create({
        lineHeight: 36,
    },
    itemBuildPCPop: {
-        backgroundColor: '#fff',
        flex: 1,
-        padding: 10,
        position: 'relative',
-        paddingTop: 50,
+        paddingTop: 25,
+        backgroundColor: '#243a76',
    },
    itemBuildPCPopClose: {
        width: 30,
@@ -592,11 +802,11 @@ const styles = StyleSheet.create({
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'center',
-        position: 'absolute',
-        top: 15,
-        right: 10,
+        borderColor: '#fff'
+    },
+    itemBuildPCPopCloseIcon: {
+        color: '#fff'
    },
-    itemBuildPCPopCloseIcon: {},
    boxPrductBuildPc: {
        width: winWidth,
        paddingHorizontal: 10,
@@ -708,4 +918,295 @@ const styles = StyleSheet.create({
        color: '#fff',
        lineHeight: 36,
    },
+    headerPopBuildPC: {
+        width: winWidth,
+        flexDirection: 'column',
+        zIndex: 9,
+    },
+    headerPopBuildPCContentSt: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+        backgroundColor: '#243a76',
+        height: 40,
+        alignItems: 'center',
+        paddingHorizontal: 10,
+    },
+    headerPopBuildPCTitle: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#fff'
+    },
+    headerPopBuildPCContentNd: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: winWidth,
+        backgroundColor: '#243a76',
+        padding: 10,
+        zIndex: 9,
+    },
+    headerPopBuildPCSearch: {
+        width: winWidthP10 - 60,
+        backgroundColor: '#fff',
+        position: 'relative',
+        borderRadius: 3,
+        overflow: 'hidden',
+    },
+    headerPopBuildPCSearchInput: {
+        width: '100%',
+        height: 40,
+        paddingHorizontal: 10,
+        paddingRight: 40,
+    },
+    headerPopBuildPCSearchButton: {
+        width: 40,
+        height: 40,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    headerPopBuildPCSearchIcon: {
+        fontSize: 18,
+        color: '#ec1b23'
+    },
+    headerPopBuildPCContentFilter: {
+        width: 60,
+        height: 40,
+        position: 'relative',
+        backgroundColor: 'rgba(0,0,0,0)'
+    },
+    headerPopBuildPCFilter: {
+        width: '100%',
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        zIndex: 9,
+    },
+    headerPopBuildPCFinterIcon: {
+        fontSize: 16,
+        color: '#fff',
+        marginRight: 5,
+    },
+    headerPopBuildPCFinterText: {
+        fontSize: 16,
+        color: '#fff'
+    },
+    headerPopBuildPCContentFilterShowHide: {
+        width: winWidth,
+        position: 'absolute',
+        top: 50,
+        right: -10,
+        padding: 10,
+        backgroundColor: '#fff',
+        zIndex: 9,
+        display: 'none',
+    },
+    headerPopBuildPCContentFilterShow: {
+        width: winWidth,
+        position: 'absolute',
+        top: 50,
+        right: -10,
+        padding: 10,
+        backgroundColor: '#fff',
+        zIndex: 9,
+    },
+    headerPopBuildPCContentFilterTitle: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#243a76',
+        lineHeight: 32,
+    },
+    headerPopBuildPCContentFilterBox: {
+        paddingVertical: 10,
+        borderTopColor: '#e1e1e1',
+        borderTopWidth: 1,
+    },
+    headerPopBuildPCContentFilterName: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    headerPopBuildPCContentFilterList: {
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+    headerPopBuildPCContentFilterItem: {
+        width: '100%',
+        flexDirection: 'row',
+        marginBottom: 10,
+        alignItems: 'center'
+    },
+    headerPopBuildPCContentFilterCheck: {
+        width: 35,
+        height: 35,
+        borderWidth: 1,
+        borderColor: '#999',
+        marginRight: 10,
+        position: 'relative',
+    },
+    headerPopBuildPCContentFilterText: {},
+    headerPopBuildPCContentRd: {
+        flexDirection: 'column',
+        width: winWidth,
+        padding: 10,
+        borderBottomColor: '#f7f7f7',
+        borderBottomWidth: 1,
+    },
+    headerPopBuildPCContentRdTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 10,
+        position: 'relative',
+        zIndex: 8,
+    },
+    headerPopBuildPCContentSelect: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '49%',
+        position: 'relative',
+        zIndex: 9,
+    },
+    headerPopBuildPCContentSelectTite: {
+        marginRight: 10,
+        fontWeight: 'bold',
+        width: 65,
+    },
+    headerPopBuildPCContentSelectBox: {
+        paddingHorizontal: 10,
+        height: 32,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#e1e1e1',
+        borderRadius: 3,
+    },
+    headerPopBuildPCContentSelectBoxText: {
+        marginRight: 10,
+    },
+    headerPopBuildPCContentSelectBoxIcon: {},
+    headerPopBuildPCContentSelectList: {
+        position: 'absolute',
+        width: winWidthP10,
+        top: 35,
+        padding: 10,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 0.22,
+        shadowRadius: 2.22,
+        elevation: 3,
+        display: 'none',
+    },
+    active: {
+        display: 'flex',
+    },
+    poRight: {
+        right: 0,
+    },
+    poLeft: {
+        left: 0,
+    },
+    headerPopBuildPCContentSelectItem: {
+        marginBottom: 10,
+    },
+    pagingBuildPc: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+    },
+    pagingBuildPcItem: {
+        width: 28,
+        height: 28,
+        borderRadius: 3,
+        backgroundColor: '#243a76',
+        marginHorizontal: 2,
+        color: '#fff',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderColor: '#243a76',
+        borderWidth: 1,
+    },
+    pagingBuildPcItemActive: {
+        backgroundColor: '#fff',
+    },
+    pagingBuildPcText: {
+        color: '#fff',
+        fontWeight: 'bold',
+    },
+    pagingBuildPcTextActive: {
+        color: '#ec0000',
+        fontWeight: 'bold',
+    },
+    buttonBuildPcFt: {
+        width: '100%',
+        marginTop: 10,
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#2d3877',
+        borderRadius: 3,
+    },
+    buttonBuildPcFtText: {
+        fontSize: 14,
+        textTransform: 'uppercase',
+        color: '#fff',
+        marginRight: 10,
+        fontWeight: 'bold',
+    },
+    buttonBuildPcFtIcon: {
+        fontSize: 14,
+        color: '#fff',
+    },
+    sliderSwipper: {
+        flexDirection: 'row',
+        height: 500,
+    },
+    ProductOtherBuildPc: {
+        marginVertical: 20,
+        paddingHorizontal: 10,
+        borderTopWidth: 1,
+        borderTopColor: '#e1e1e1'
+    },
+    ProductOtherBuildPcTitle: {
+        width: '100%',
+        paddingVertical: 10,
+        fontWeight: 'bold',
+        fontSize: 24,
+        textTransform: 'uppercase',
+        color: '#2d3877',
+        textAlign: 'center'
+    },
+    ProductOtherBuildPcList: {
+        width: '100%',
+    },
+    ProductOtherBuildPcButton: {
+        width: '100%',
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 3,
+        backgroundColor: '#2d3877'
+    },
+    ProductOtherBuildPcButtonText: {
+        color: '#fff',
+        marginRight: 10,
+    },
+    ProductOtherBuildPcButtonIcon: {
+        color: '#fff'
+    },
 })