1212 lines
42 KiB
TypeScript
1212 lines
42 KiB
TypeScript
import 'react-native-gesture-handler';
|
|
import * as React from 'react';
|
|
import { useState } from 'react';
|
|
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
|
|
import Constants from 'expo-constants';
|
|
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
|
|
|
|
import EditScreenInfo from '../components/EditScreenInfo';
|
|
import { Text, View, } from '../components/Themed';
|
|
import useColorScheme from '../hooks/useColorScheme';
|
|
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 (
|
|
<SafeAreaView style={styles.container}>
|
|
<ScrollView>
|
|
<View style={styles.brecrumb}>
|
|
<Text style={styles.brecrumbText}>Trang chủ</Text>
|
|
<FontAwesome style={styles.brecrumbIcon} name="angle-right" />
|
|
<Text style={styles.brecrumbTextLast}>Build PC</Text>
|
|
</View>
|
|
|
|
<BuildPcBox />
|
|
|
|
<ProductOtherBuildPc />
|
|
|
|
<PolicyFooter />
|
|
|
|
<Social />
|
|
|
|
<ShowroomList />
|
|
|
|
<FooterInfo />
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const BuildPcBox = () => {
|
|
return (
|
|
<View style={styles.boxBuildPc}>
|
|
<Text style={styles.boxBuildPcTitle}>Xây dựng máy tính</Text>
|
|
<View style={styles.boxBuildPcBanner}>
|
|
<Image style={styles.boxBuildPcBannerImg} source={{ uri: 'https://www.hanoicomputer.vn/media/lib/huong-dan-xay-dung-cau-hinh-250420.png' }} />
|
|
</View>
|
|
<Text style={styles.boxBuildPcNote}>Chọn linh kiện xây dựng cấu hình</Text>
|
|
<View style={styles.listConfig}>
|
|
<Pressable style={[styles.listConfigItem, styles.listConfigItemActive]}>
|
|
<Text style={[styles.listConfigItemText, styles.listConfigItemTextActive]}>Cấu hình 1</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.listConfigItem}>
|
|
<Text style={styles.listConfigItemText}>Cấu hình 2</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.listConfigItem}>
|
|
<Text style={styles.listConfigItemText}>Cấu hình 3</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.listConfigItem}>
|
|
<Text style={styles.listConfigItemText}>Cấu hình 4</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.listConfigItem}>
|
|
<Text style={styles.listConfigItemText}>Cấu hình 5</Text>
|
|
</Pressable>
|
|
</View>
|
|
<View>
|
|
<Pressable style={styles.boxBuildPcReload}>
|
|
<Text style={styles.boxBuildPcReloadText}>Làm mới</Text>
|
|
<FontAwesome style={styles.boxBuildPcReloadIcon} name="refresh" />
|
|
</Pressable>
|
|
</View>
|
|
<View>
|
|
<Text style={styles.boxBuildPcTotalPrice}>Chi phí dự tính <Text style={styles.boxBuildPcTotalPriceNum}>30.000.000 đ</Text></Text>
|
|
</View>
|
|
|
|
<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>
|
|
)
|
|
}
|
|
|
|
const BuildPcListStore = () => {
|
|
const [checked, setChecked] = React.useState('store1');
|
|
const listStore = [
|
|
{
|
|
id: 1,
|
|
name: '01: 131 Lê Thanh Nghị - Q. Hai Bà Trưng - Hà Nội'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '02: 43 Thái Hà - Q. Đống Đa - Hà Nội'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '03: A1-6 Lô 8A Lê Hồng Phong - Q. Ngô Quyền - Hải Phòng'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '04: 79 Nguyễn Văn Huyên - Q. Cầu Giấy - Hà Nội'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '05: 511 Quang Trung - Q. Hà Đông - Hà Nội'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '06: 520 Cách Mạng Tháng 8 - Quận 3 - TP HCM'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '07: 398 Nguyễn Văn Cừ - Q. Long Biên - Hà Nội'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '08: 299 Minh Khai - Từ Sơn - Bắc Ninh'
|
|
},
|
|
]
|
|
return (
|
|
<View style={styles.boxStore}>
|
|
<View style={styles.boxStoreItem}>
|
|
<View style={styles.boxStoreItemCheck}>
|
|
<RadioButton color={'#243a76'} value={'store0'} status={checked === 'store0' ? 'checked' : 'unchecked'} onPress={() => setChecked('store0')} />
|
|
</View>
|
|
<Text style={styles.boxStoreItemText}>Tất cả kho</Text>
|
|
</View>
|
|
{
|
|
listStore.map(item => {
|
|
const value = 'store' + item.id;
|
|
return (
|
|
<View key={item.id} style={styles.boxStoreItem}>
|
|
<View style={styles.boxStoreItemCheck}>
|
|
<RadioButton color={'#243a76'} value={value} status={checked === value ? 'checked' : 'unchecked'} onPress={() => setChecked(value)} />
|
|
</View>
|
|
<Text style={styles.boxStoreItemText}>{item.name}</Text>
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const ListItemBuildPc = () => {
|
|
const dataListItem = [
|
|
{
|
|
id: 1,
|
|
name: 'Bộ vi xử lý',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Bo mạch chủ',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'RAM',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'HDD',
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'SSD',
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'VGA',
|
|
},
|
|
{
|
|
id: 7,
|
|
name: 'Nguồn',
|
|
},
|
|
{
|
|
id: 8,
|
|
name: 'Vỏ Case',
|
|
},
|
|
{
|
|
id: 9,
|
|
name: 'Màn hình',
|
|
},
|
|
{
|
|
id: 10,
|
|
name: 'Bàn phám, Chuột',
|
|
},
|
|
{
|
|
id: 11,
|
|
name: 'Bàn phím',
|
|
},
|
|
{
|
|
id: 12,
|
|
name: 'Chuột',
|
|
},
|
|
{
|
|
id: 13,
|
|
name: 'Tai nghe',
|
|
},
|
|
{
|
|
id: 14,
|
|
name: 'Loa',
|
|
},
|
|
{
|
|
id: 15,
|
|
name: 'Ghế gamming',
|
|
},
|
|
{
|
|
id: 16,
|
|
name: 'Quạt làm mát',
|
|
},
|
|
{
|
|
id: 17,
|
|
name: 'Tản nhiệt nước All in One',
|
|
},
|
|
{
|
|
id: 18,
|
|
name: 'Tản nhiệt nước custom',
|
|
},
|
|
{
|
|
id: 19,
|
|
name: 'Tản nhiệt khí',
|
|
},
|
|
{
|
|
id: 20,
|
|
name: 'Windows bản quyền',
|
|
},
|
|
{
|
|
id: 21,
|
|
name: 'Phần mềm Antivirus',
|
|
},
|
|
];
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
return (
|
|
<View style={styles.itemBuildPCList}>
|
|
{
|
|
dataListItem.map((item, index) => {
|
|
return (
|
|
<View style={styles.itemBuildPC} key={index}>
|
|
<Text style={styles.itemBuildPCText}>{index + 1}. {item.name}</Text>
|
|
<Pressable style={styles.itemBuildPCShowPop} onPress={() => setModalVisible(true)}>
|
|
<Text style={styles.itemBuildPCShowPopText}>+</Text>
|
|
</Pressable>
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
<Modal visible={modalVisible} animationType="slide" transparent={true} onRequestClose={() => { setModalVisible(!modalVisible); }}>
|
|
<View style={styles.itemBuildPCPop}>
|
|
<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>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
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 = () => {
|
|
|
|
return (
|
|
<View style={styles.boxPrductBuildPc}>
|
|
<View style={styles.boxPrductBuildPcList}>
|
|
{
|
|
productData.map((item, index) => {
|
|
if (index < 5) {
|
|
return (
|
|
<View style={styles.boxPrductBuildPcItem} key={index}>
|
|
<View style={styles.boxPrductBuildPcImg}>
|
|
<Image style={styles.boxPrductBuildPcImgCt} source={{ uri: item.productImage.large }} />
|
|
</View>
|
|
<View style={styles.boxPrductBuildPcInfo}>
|
|
<Text style={styles.boxPrductBuildPcName} numberOfLines={2}>{item.productName}</Text>
|
|
<View style={styles.boxPrductBuildPcOtherText}>
|
|
<Text style={styles.boxPrductBuildPcOtherTextSt}>Mã SP:</Text>
|
|
<Text style={styles.boxPrductBuildPcOtherTextNd}>{item.productSKU}</Text>
|
|
</View>
|
|
<View style={styles.boxPrductBuildPcOtherText}>
|
|
<Text style={styles.boxPrductBuildPcOtherTextSt}>Bảo hành:</Text>
|
|
<Text style={styles.boxPrductBuildPcOtherTextNd}>{item.warrantry}</Text>
|
|
</View>
|
|
<View style={styles.boxPrductBuildPcOtherText}>
|
|
<Text style={styles.boxPrductBuildPcQuantity}>Kho hàng:</Text>
|
|
{
|
|
item.quantity == 0
|
|
? <View style={styles.boxPrductBuildPcQuantityNo}>
|
|
<FontAwesome style={styles.boxPrductBuildPcQuantityNoIcon} name="phone" />
|
|
<Text style={styles.boxPrductBuildPcQuantityNoText}>Liên hệ</Text>
|
|
</View>
|
|
: <View style={styles.boxPrductBuildPcQuantityHas}>
|
|
<FontAwesome style={styles.boxPrductBuildPcQuantityHasIcon} name="check" />
|
|
<Text style={styles.boxPrductBuildPcQuantityHasText}>Còn hàng</Text>
|
|
</View>
|
|
}
|
|
</View>
|
|
<Text style={styles.boxPrductBuildPcPrice}>{formatCurrency(item.price)} đ</Text>
|
|
</View>
|
|
<Pressable style={styles.boxPrductBuildPcSelec}>
|
|
{
|
|
item.quantity == 0
|
|
? <View style={styles.boxPrductBuildPcSelecNo}>
|
|
<FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="ban" />
|
|
</View>
|
|
: <View style={styles.boxPrductBuildPcSelecYes}>
|
|
<FontAwesome style={styles.boxPrductBuildPcSelecIcon} name="plus" />
|
|
</View>
|
|
}
|
|
</Pressable>
|
|
</View>
|
|
)
|
|
}
|
|
})
|
|
}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
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;
|
|
const halfWinWidth = winWidth / 2;
|
|
const ratio = winWidthP10 / 850; //541 is actual image width
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#fff',
|
|
},
|
|
brecrumb: {
|
|
display: 'flex',
|
|
width: winWidth,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
flexDirection: 'row',
|
|
height: 18,
|
|
alignItems: 'center',
|
|
marginTop: 10,
|
|
marginBottom: 10,
|
|
},
|
|
brecrumbText: {
|
|
fontSize: 13,
|
|
color: '#222',
|
|
},
|
|
brecrumbTextLast: {
|
|
fontSize: 13,
|
|
color: '#b7b7b7',
|
|
},
|
|
brecrumbIcon: {
|
|
fontSize: 13,
|
|
color: '#222',
|
|
marginLeft: 6,
|
|
marginRight: 6
|
|
},
|
|
boxBuildPc: {
|
|
paddingHorizontal: 10,
|
|
width: winWidth,
|
|
marginBottom: 30,
|
|
},
|
|
boxBuildPcTitle: {
|
|
width: '100%',
|
|
marginBottom: 20,
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
textTransform: 'uppercase',
|
|
textAlign: 'center',
|
|
color: '#ed1b24',
|
|
},
|
|
boxBuildPcBanner: {
|
|
marginBottom: 20,
|
|
width: '100%',
|
|
height: 72,
|
|
position: 'relative',
|
|
},
|
|
boxBuildPcBannerImg: {
|
|
width: '100%',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
},
|
|
boxBuildPcNote: {
|
|
marginBottom: 20,
|
|
textAlign: 'center',
|
|
color: '#2d3877',
|
|
fontSize: 15,
|
|
fontWeight: 'bold',
|
|
},
|
|
listConfig: {
|
|
flexDirection: 'row',
|
|
marginBottom: 20,
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingBottom: 20,
|
|
borderBottomColor: '#e1e1e1',
|
|
borderBottomWidth: 1,
|
|
},
|
|
listConfigItem: {
|
|
width: '48%',
|
|
marginBottom: 10,
|
|
flexDirection: 'row',
|
|
height: 40,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: '#d9d9d9',
|
|
borderRadius: 3,
|
|
},
|
|
listConfigItemText: {
|
|
color: '#333',
|
|
textTransform: 'uppercase'
|
|
},
|
|
listConfigItemActive: {
|
|
backgroundColor: '#2d3877',
|
|
},
|
|
listConfigItemTextActive: {
|
|
color: '#fff',
|
|
},
|
|
boxBuildPcReload: {
|
|
width: 126,
|
|
height: 40,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 3,
|
|
backgroundColor: '#2d3877',
|
|
marginBottom: 20,
|
|
},
|
|
boxBuildPcReloadText: {
|
|
color: '#fff',
|
|
textTransform: 'uppercase',
|
|
marginRight: 10,
|
|
},
|
|
boxBuildPcReloadIcon: {
|
|
color: '#fff',
|
|
},
|
|
boxBuildPcTotalPrice: {
|
|
textAlign: 'right'
|
|
},
|
|
boxBuildPcTotalPriceNum: {
|
|
fontWeight: 'bold',
|
|
color: 'red'
|
|
},
|
|
boxStore: {
|
|
marginBottom: 20,
|
|
paddingBottom: 20,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e1e1e1'
|
|
},
|
|
boxStoreItem: {
|
|
marginBottom: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
},
|
|
boxStoreItemCheck: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
borderWidth: 1,
|
|
borderColor: '#666',
|
|
marginRight: 10,
|
|
},
|
|
boxStoreItemText: {
|
|
width: winWidthP10 - 46,
|
|
},
|
|
itemBuildPCList: {},
|
|
itemBuildPC: {
|
|
marginBottom: 10,
|
|
paddingBottom: 10,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e1e1e1'
|
|
},
|
|
itemBuildPCText: {},
|
|
itemBuildPCShowPop: {
|
|
width: 50,
|
|
height: 40,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 3,
|
|
backgroundColor: '#243a76',
|
|
},
|
|
itemBuildPCShowPopText: {
|
|
fontWeight: 'bold',
|
|
fontSize: 36,
|
|
color: '#fff',
|
|
lineHeight: 36,
|
|
},
|
|
itemBuildPCPop: {
|
|
flex: 1,
|
|
position: 'relative',
|
|
paddingTop: 25,
|
|
backgroundColor: '#243a76',
|
|
},
|
|
itemBuildPCPopClose: {
|
|
width: 30,
|
|
height: 30,
|
|
borderWidth: 1,
|
|
justifyContent: 'center',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderColor: '#fff'
|
|
},
|
|
itemBuildPCPopCloseIcon: {
|
|
color: '#fff'
|
|
},
|
|
boxPrductBuildPc: {
|
|
width: winWidth,
|
|
paddingHorizontal: 10,
|
|
marginBottom: 20,
|
|
},
|
|
boxPrductBuildPcList: {},
|
|
boxPrductBuildPcItem: {
|
|
flexDirection: 'row',
|
|
marginBottom: 15,
|
|
alignItems: 'center',
|
|
paddingBottom: 15,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e1e1e1'
|
|
},
|
|
boxPrductBuildPcImg: {
|
|
width: 60,
|
|
height: 60,
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
marginRight: 10,
|
|
},
|
|
boxPrductBuildPcImgCt: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
},
|
|
boxPrductBuildPcInfo: {
|
|
width: winWidthP10 - 130,
|
|
paddingRight: 10,
|
|
},
|
|
boxPrductBuildPcName: {
|
|
marginBottom: 10,
|
|
},
|
|
boxPrductBuildPcOtherText: {
|
|
marginBottom: 10,
|
|
flexDirection: 'row',
|
|
},
|
|
boxPrductBuildPcOtherTextSt: {
|
|
fontSize: 12,
|
|
width: 80,
|
|
},
|
|
boxPrductBuildPcOtherTextNd: {
|
|
fontSize: 12,
|
|
},
|
|
boxPrductBuildPcPrice: {
|
|
fontSize: 19,
|
|
fontWeight: 'bold',
|
|
color: '#f40606',
|
|
marginBottom: 7,
|
|
},
|
|
boxPrductBuildPcOldPrice: {
|
|
color: '#888',
|
|
textDecorationLine: 'line-through',
|
|
},
|
|
boxPrductBuildPcQuantity: {
|
|
width: 80,
|
|
},
|
|
boxPrductBuildPcQuantityNo: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 10,
|
|
height: 20,
|
|
backgroundColor: '#eaeaea',
|
|
borderRadius: 3,
|
|
},
|
|
boxPrductBuildPcQuantityNoIcon: {
|
|
marginRight: 5,
|
|
},
|
|
boxPrductBuildPcQuantityNoText: {},
|
|
boxPrductBuildPcQuantityHas: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 10,
|
|
height: 20,
|
|
backgroundColor: '#278c56',
|
|
borderRadius: 3,
|
|
},
|
|
boxPrductBuildPcQuantityHasIcon: {
|
|
marginRight: 5,
|
|
color: '#fff',
|
|
},
|
|
boxPrductBuildPcQuantityHasText: {
|
|
color: '#fff'
|
|
},
|
|
boxPrductBuildPcSelec: {
|
|
|
|
},
|
|
boxPrductBuildPcSelecNo: {
|
|
width: 50,
|
|
height: 40,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 3,
|
|
backgroundColor: '#ec1b23',
|
|
},
|
|
boxPrductBuildPcSelecYes: {
|
|
width: 50,
|
|
height: 40,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 3,
|
|
backgroundColor: '#243a76',
|
|
},
|
|
boxPrductBuildPcSelecIcon: {
|
|
fontWeight: 'bold',
|
|
fontSize: 36,
|
|
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'
|
|
},
|
|
}) |