691 lines
27 KiB
TypeScript
691 lines
27 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';
|
||
|
|
|
||
|
|
export default function ArticleDetail() {
|
||
|
|
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}>Tin tức</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<ArticleDetailContent />
|
||
|
|
|
||
|
|
<CommentArticle />
|
||
|
|
|
||
|
|
<ArticleDetailNew />
|
||
|
|
|
||
|
|
<ArticleDetailHot />
|
||
|
|
|
||
|
|
<ArticleDetailProduct />
|
||
|
|
|
||
|
|
<PolicyFooter />
|
||
|
|
|
||
|
|
<Social />
|
||
|
|
|
||
|
|
<ShowroomList />
|
||
|
|
|
||
|
|
<FooterInfo />
|
||
|
|
</ScrollView>
|
||
|
|
</SafeAreaView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ArticleDetailContent = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.boxArticleDetail}>
|
||
|
|
<Text style={styles.boxArticleDetailTitle}>Chương trình Khuyến mãi “Play-with Power by MSI”</Text>
|
||
|
|
<Text style={styles.boxArticleDetailTime}>Từ 17-03-2021, 4:32 pm</Text>
|
||
|
|
<View style={styles.boxArticleDetailCreateBy}>
|
||
|
|
<Image style={styles.boxArticleDetailCreateByImg} source={require('../assets/images/img-cmt.png')} />
|
||
|
|
<View style={styles.boxArticleDetailCreateByText}>
|
||
|
|
<Text style={styles.boxArticleDetailCreateByTextSt}>By</Text>
|
||
|
|
<Text style={styles.boxArticleDetailCreateByTextB}>HNC</Text>
|
||
|
|
<Text style={styles.boxArticleDetailCreateByTextSt}>- 7-03-2021, 4:32 pm</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View>
|
||
|
|
<Image style={styles.boxArticleDetailImageMain} source={{ uri: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg' }} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleDetailContent}>
|
||
|
|
<Text>Nội dung đang được cập nhật!</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const CommentArticle = () => {
|
||
|
|
return (
|
||
|
|
<View style={styles.boxCommentArticle}>
|
||
|
|
<Text style={styles.boxCommentArticleTitle}>Trả lời</Text>
|
||
|
|
<Text style={styles.boxCommentArticleNote}>Email của bạn sẽ không được hiển thị công khai.</Text>
|
||
|
|
<Text style={styles.boxCommentArticleNote}>Các trường bắt buộc được đánh dấu <Text>*</Text></Text>
|
||
|
|
<View style={styles.boxCommentArticleContent}>
|
||
|
|
<View style={styles.boxCommentArticleItem}>
|
||
|
|
<Text style={styles.boxCommentArticleItemName}>Bình luận*</Text>
|
||
|
|
<TextInput style={styles.boxCommentArticleItemArea} multiline={true} numberOfLines={4} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxCommentArticleItem}>
|
||
|
|
<Text style={styles.boxCommentArticleItemName}>Tên*</Text>
|
||
|
|
<TextInput style={styles.boxCommentArticleItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxCommentArticleItemStyleNd}>
|
||
|
|
<View style={styles.boxCommentArticleItemNd}>
|
||
|
|
<Text style={styles.boxCommentArticleItemName}>Email*</Text>
|
||
|
|
<TextInput style={styles.boxCommentArticleItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxCommentArticleItemNd}>
|
||
|
|
<Text style={styles.boxCommentArticleItemName}>Trang web</Text>
|
||
|
|
<TextInput style={styles.boxCommentArticleItemInput} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxCommentArticleSubmit}>
|
||
|
|
<Pressable style={styles.boxCommentArticleSubmitButton}>
|
||
|
|
<Text style={styles.boxCommentArticleSubmitText}>Phản hồi</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const dataArticle = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
|
||
|
|
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
|
||
|
|
category: 'Review sản phẩm',
|
||
|
|
visit: 10,
|
||
|
|
comment: 40,
|
||
|
|
createDate: '12-03-2021, 5:30 pm',
|
||
|
|
createBy: 'Bùi Phương Thảo',
|
||
|
|
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
|
||
|
|
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
|
||
|
|
category: 'Review sản phẩm',
|
||
|
|
visit: 10,
|
||
|
|
comment: 40,
|
||
|
|
createDate: '13-03-2021, 8:30 pm',
|
||
|
|
createBy: 'Tiêu Phong',
|
||
|
|
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
|
||
|
|
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
|
||
|
|
category: 'Review sản phẩm',
|
||
|
|
visit: 10,
|
||
|
|
comment: 40,
|
||
|
|
createDate: '13-03-2021, 5:30 am',
|
||
|
|
createBy: 'Gâu Gâu',
|
||
|
|
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
|
||
|
|
image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
|
||
|
|
category: 'Review sản phẩm',
|
||
|
|
visit: 10,
|
||
|
|
comment: 40,
|
||
|
|
createDate: '22-03-2021, 5:30 pm',
|
||
|
|
createBy: 'Meo Meo',
|
||
|
|
summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const ArticleDetailNew = () => {
|
||
|
|
const dataArticleNew = dataArticle;
|
||
|
|
return (
|
||
|
|
<View style={styles.boxArticleDetailNew}>
|
||
|
|
<View style={styles.ArticleTitleAll}>
|
||
|
|
<Text style={styles.ArticleTitleAllText}>Bài viết mới nhất</Text>
|
||
|
|
<View style={styles.ArticleTitleAllLine}></View>
|
||
|
|
</View>
|
||
|
|
<View>
|
||
|
|
{
|
||
|
|
dataArticleNew.map((item, index) => {
|
||
|
|
if (index == 0) {
|
||
|
|
return (
|
||
|
|
<View key={item.id} style={styles.boxArticleDetailNewFirstItem}>
|
||
|
|
<Image style={styles.boxArticleDetailNewFirstItemImg} source={{ uri: item.image }} />
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemName} numberOfLines={2}>{item.title}</Text>
|
||
|
|
<View style={styles.boxArticleDetailNewFirstItemOther}>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>By</Text>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemCus}>{item.createBy}</Text>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>{item.createDate}</Text>
|
||
|
|
<View style={styles.boxArticleNewHomeItemView}>
|
||
|
|
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
|
||
|
|
<Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleNewHomeItemView}>
|
||
|
|
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
|
||
|
|
<Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleDetailNewFirstItemSummary}>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemSummaryCt} numberOfLines={2}>{item.summary}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
} else if (index > 0 && index < 4) {
|
||
|
|
return (
|
||
|
|
<View key={item.id} style={styles.boxArticleDetailNewItem}>
|
||
|
|
<View style={styles.boxArticleDetailNewItemImage}>
|
||
|
|
<Image style={styles.boxArticleDetailNewItemImageCt} source={{ uri: item.image }} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleDetailNewItemInfo}>
|
||
|
|
<Text style={styles.boxArticleDetailNewItemName} numberOfLines={2}>{item.title}</Text>
|
||
|
|
<View style={styles.boxArticleDetailNewItemInfoOther}>
|
||
|
|
<View style={styles.boxArticleNewHomeItemViewSt}>
|
||
|
|
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="clock-o" />
|
||
|
|
<Text style={styles.boxArticleNewHomeItemViewText}>{item.createDate}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleNewHomeItemView}>
|
||
|
|
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
|
||
|
|
<Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleNewHomeItemView}>
|
||
|
|
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
|
||
|
|
<Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ArticleDetailHot = () => {
|
||
|
|
|
||
|
|
const dataArticleHot = dataArticle;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.boxArticleDetailNew}>
|
||
|
|
<View style={styles.ArticleTitleAll}>
|
||
|
|
<Text style={styles.ArticleTitleAllText}>Bài viết nhiều người xem</Text>
|
||
|
|
<View style={styles.ArticleTitleAllLine}></View>
|
||
|
|
</View>
|
||
|
|
<View>
|
||
|
|
{
|
||
|
|
dataArticleHot.map((item, index) => {
|
||
|
|
if (index < 5) {
|
||
|
|
return (
|
||
|
|
<View key={item.id} style={styles.boxArticleDetailNewFirstItem}>
|
||
|
|
<Image style={styles.boxArticleDetailNewFirstItemImg} source={{ uri: item.image }} />
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemName} numberOfLines={2}>{item.title}</Text>
|
||
|
|
<View style={styles.boxArticleDetailNewFirstItemOther}>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>By</Text>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemCus}>{item.createBy}</Text>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemOtherText}>{item.createDate}</Text>
|
||
|
|
<View style={styles.boxArticleNewHomeItemView}>
|
||
|
|
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
|
||
|
|
<Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleNewHomeItemView}>
|
||
|
|
<FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
|
||
|
|
<Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxArticleDetailNewFirstItemSummary}>
|
||
|
|
<Text style={styles.boxArticleDetailNewFirstItemSummaryCt} numberOfLines={2}>{item.summary}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
</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 ArticleDetailProduct = () => {
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
return(
|
||
|
|
<View style={styles.boxPrductArticleDetail}>
|
||
|
|
<View style={styles.ArticleTitleAll}>
|
||
|
|
<Text style={styles.ArticleTitleAllText}>Sản phẩm bán chạy nhất</Text>
|
||
|
|
<View style={styles.ArticleTitleAllLine}></View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxPrductArticleDetailList}>
|
||
|
|
{
|
||
|
|
productData.map((item, index) => {
|
||
|
|
if(index < 5) {
|
||
|
|
return(
|
||
|
|
<View style={styles.boxPrductArticleDetailItem} key={index}>
|
||
|
|
<View style={styles.boxPrductArticleDetailImg}>
|
||
|
|
<Image style={styles.boxPrductArticleDetailImgCt} source={{ uri: item.productImage.large }} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.boxPrductArticleDetailInfo}>
|
||
|
|
<Text style={styles.boxPrductArticleDetailSku}>Mã SP: {item.productSKU}</Text>
|
||
|
|
<Text style={styles.boxPrductArticleDetailName} numberOfLines={2}>{item.productName}</Text>
|
||
|
|
<Text style={styles.boxPrductArticleDetailPrice}>{formatCurrency(item.price)} đ</Text>
|
||
|
|
<Text style={styles.boxPrductArticleDetailOldPrice}>{formatCurrency(item.marketPrice)}đ</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</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
|
||
|
|
},
|
||
|
|
boxArticleDetail: {
|
||
|
|
marginBottom: 20,
|
||
|
|
width: winWidth,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailTitle: {
|
||
|
|
fontSize: 30,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#222',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailTime: {
|
||
|
|
fontSize: 18,
|
||
|
|
color: '#888888',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailCreateBy: {
|
||
|
|
width: '100%',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxArticleDetailCreateByImg: {
|
||
|
|
width: 29,
|
||
|
|
height: 29,
|
||
|
|
borderRadius: 3,
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailCreateByText: {
|
||
|
|
flexDirection: 'row'
|
||
|
|
},
|
||
|
|
boxArticleDetailCreateByTextSt: {
|
||
|
|
fontSize: 13,
|
||
|
|
color: '#888'
|
||
|
|
},
|
||
|
|
boxArticleDetailCreateByTextB: {
|
||
|
|
fontSize: 13,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#536be8',
|
||
|
|
marginHorizontal: 5,
|
||
|
|
},
|
||
|
|
boxArticleDetailImageMain: {
|
||
|
|
width: '100%',
|
||
|
|
height: ratio * 450,
|
||
|
|
},
|
||
|
|
boxArticleDetailContent: {
|
||
|
|
marginTop: 20,
|
||
|
|
width: '100%',
|
||
|
|
paddingBottom: 20,
|
||
|
|
borderBottomColor: '#e1e1e1',
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
},
|
||
|
|
boxCommentArticle: {
|
||
|
|
width: winWidth,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxCommentArticleTitle: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
fontSize: 24,
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxCommentArticleNote: {
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
boxCommentArticleContent: {
|
||
|
|
marginTop: 20,
|
||
|
|
},
|
||
|
|
boxCommentArticleItem: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxCommentArticleItemNd: {
|
||
|
|
width: '49%',
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxCommentArticleItemName: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
boxCommentArticleItemArea: {
|
||
|
|
width: '100%',
|
||
|
|
height: 110,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderRadius: 5,
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
boxCommentArticleItemInput: {
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
borderRadius: 5,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
boxCommentArticleItemStyleNd: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between'
|
||
|
|
},
|
||
|
|
boxCommentArticleSubmit: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
},
|
||
|
|
boxCommentArticleSubmitButton: {
|
||
|
|
width: 115,
|
||
|
|
height: 40,
|
||
|
|
backgroundColor: '#f70d28',
|
||
|
|
borderRadius: 5,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
boxCommentArticleSubmitText: {
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
boxArticleDetailNew: {
|
||
|
|
width: winWidth,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
ArticleTitleAll: {
|
||
|
|
paddingVertical: 10,
|
||
|
|
marginBottom: 10,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: '#e1e1e1',
|
||
|
|
},
|
||
|
|
ArticleTitleAllText: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#ce0707',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
},
|
||
|
|
ArticleTitleAllLine: {
|
||
|
|
width: 100,
|
||
|
|
height: 1,
|
||
|
|
backgroundColor: '#ce0707',
|
||
|
|
position: 'absolute',
|
||
|
|
bottom: -1,
|
||
|
|
left: 0,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItem: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItemImg: {
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 10,
|
||
|
|
height: ratio * 450,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItemName: {
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItemOther: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItemOtherText: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#888'
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItemCus: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#536be8',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
marginHorizontal: 8,
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
boxArticleNewHomeItemView: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
marginLeft: 10,
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
boxArticleNewHomeItemIcon: {
|
||
|
|
fontSize: 11,
|
||
|
|
color: '#2e9fff',
|
||
|
|
marginRight: 2,
|
||
|
|
},
|
||
|
|
boxArticleNewHomeItemViewText: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#888'
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItemSummary: {
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewFirstItemSummaryCt: {},
|
||
|
|
boxArticleDetailNewItem: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
width: '100%',
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewItemImage: {
|
||
|
|
width: 130,
|
||
|
|
height: 87,
|
||
|
|
overflow: 'hidden',
|
||
|
|
position: 'relative',
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewItemImageCt: {
|
||
|
|
width: '100%',
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
bottom: 0,
|
||
|
|
right: 0,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewItemInfo: {
|
||
|
|
width: winWidthP10 - 140,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewItemName: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginBottom: 10,
|
||
|
|
lineHeight: 23,
|
||
|
|
},
|
||
|
|
boxArticleDetailNewItemInfoOther: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
boxArticleNewHomeItemViewSt: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
boxPrductArticleDetail: {
|
||
|
|
width: winWidth,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailList: {},
|
||
|
|
boxPrductArticleDetailItem: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailImg: {
|
||
|
|
width: 174,
|
||
|
|
height: 174,
|
||
|
|
position: 'relative',
|
||
|
|
overflow: 'hidden',
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailImgCt: {
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
bottom: 0,
|
||
|
|
right: 0,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailInfo: {
|
||
|
|
width: winWidthP10 - 184,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailName: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailSku: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#ce0707',
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailPrice: {
|
||
|
|
fontSize: 19,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#f40606',
|
||
|
|
marginBottom: 7,
|
||
|
|
},
|
||
|
|
boxPrductArticleDetailOldPrice: {
|
||
|
|
color: '#888',
|
||
|
|
textDecorationLine: 'line-through',
|
||
|
|
},
|
||
|
|
})
|