reza added new home

master
Reza_ashrafi 3 years ago
parent 183a97e0ad
commit ca95749a25
  1. BIN
      src/assets/images/bookActivating.png
  2. BIN
      src/assets/images/homeBlog.png
  3. BIN
      src/assets/images/myBook.png
  4. 35
      src/views/Home/HomeStatic/3D/index.js
  5. 6
      src/views/Home/HomeStatic/Flex/index.js
  6. 10
      src/views/Home/HomeStatic/Identifier/index.js
  7. 20
      src/views/Home/HomeStatic/Simple/index.js
  8. 54
      src/views/Home/HomeStatic/Vitrin/index.js
  9. 1
      src/views/Home/HomeStatic/index.js
  10. 48
      src/views/Home/HomeStatic/index.scss
  11. 129
      src/views/Home/index.js
  12. 2
      src/views/Home/index.scss
  13. 12
      src/views/Product/Comment/index.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

@ -0,0 +1,35 @@
import React from 'react';
import Flex from '../Flex/index';
import Simple from '../Simple/index';
export default function Column(props){
const {data} = props;
const style = {
flex: data.flex,
}
return(
<div style={style} className="mobile-home-static__3d d-flex flex-column">
{
data.subData.map((item,i) => (
<SubIdentifier item={item} key={i} />
))
}
</div>
);
}
const SubIdentifier = (props) => {
const {item} = props;
return(
<>
{
item.design === 'flex' ?
<Flex data={item} /> : null
}
{
item.design === 'simple' ?
<Simple data={item} /> : null
}
</>
);
}

@ -3,8 +3,8 @@ import React from 'react';
const maxMobileSize = 550;
const fontSize = {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 28,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 35,
};
export default function Flex(props){
@ -18,7 +18,7 @@ export default function Flex(props){
}
return(
<div className="mobile-home-static__flex d-flex align-items-center justify-content-center" style={style}>
<div className="mobile-home-static__flex d-flex align-items-center" style={style}>
<div className="mobile-home-static__flex--right d-flex flex-column">
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
{

@ -1,6 +1,8 @@
import React from 'react';
import Flex from '../Flex/index';
import Simple from '../Simple/index';
import Vitrin from '../Vitrin/index';
import Column from '../3D/index';
export default function Identifier(props){
const {data} = props;
@ -14,6 +16,14 @@ export default function Identifier(props){
data.design === 'simple' ?
<Simple data={data} /> : null
}
{
data.design === 'vitrin' ?
<Vitrin data={data} /> : null
}
{
data.design === '3d' ?
<Column data={data} /> : null
}
</>
);
}

@ -10,17 +10,29 @@ const fontSize = {
export default function Simple(props){
const {data} = props;
const style = {
backgroundImage: `url('${data.imageUrl}')`,
backgroundColor: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
const parentStyle = {
// backgroundImage: `url('${data.imageUrl}')`,
background: `url('${data.imageUrl}')`,
flex: data.flex,
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
margin: 5,
borderRadius: 10,
color: data.color,
textAlign: 'center',
};
const childStyle = {
background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
borderRadius: 10,
justifyContent: data.justifyContent,
alignItems: data.alignItems
};
return(
<div className="mobile-home-static__simple d-flex flex-column justify-content-center" style={style}>
<div className="mobile-home-static__simple d-flex" style={parentStyle}>
<div style={childStyle} className="d-flex">
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
</div>
</div>
);
}

@ -0,0 +1,54 @@
import React from 'react';
import {Link} from "react-router-dom";
const maxMobileSize = 550;
const fontSize = {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 34,
};
export default function Vitrin(props){
const {data} = props;
const style = {
// backgroundImage: `url('${data.imageUrl}')`,
background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
flex: data.flex,
backgroundRepeat: 'no-repeat',
backgroundSize: '100%',
backgroundOpacity: '60%',
margin: 5,
borderRadius: 10,
color: data.color,
};
return(
<div className="mobile-home-static__vitrin d-flex flex-column" style={style}>
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
<div className="d-flex align-items-end">
{
data.books.map((item,i) => (
<Item data={item} key={i} />
))
}
<span style={{fontSize: fontSize.span }}>مشاهده بیشتر</span>
</div>
</div>
);
}
const Item = (props) => {
const {data} = props;
return(
<Link to={'/products/'+ data.id} className="mobile-home-static__vitrin--product d-flex">
<img src={data.imageUrl} alt={'عکس محصول'} />
</Link>
);
}

@ -51,7 +51,6 @@ export default class HomeStatic extends Component {
window.innerWidth < 1000 ?
<section
className="mobile-home-static d-flex"
style={{ minHeight : height }}
>
{
data.map((item,i) => (

@ -29,13 +29,14 @@
.mobile-home-static{
&__flex{
padding: 0px 10px;
padding: 20px 10px;
justify-content: space-around;
img {
// margin-right: 20px;
height: 40px;
width: 40px;
// max-width: 80px;
// max-width: 80px;
max-height: 55px;
max-width: 55px;
width: 40%;
height: 70%;
}
&--right{
margin-left: 10px;
@ -48,8 +49,43 @@
}
}
}
&__vitrin{
padding: 15px 5px;
h1{
font-family: numeralBold;
text-align: justify;
}
&--product{
width: 24%;
margin: 3px;
border-radius: 10px;
img{
width: 100%;
height: 70px;
border-radius: 10px;
}
}
span{
font-family: numeralLight;
align-items: flex-end;
margin-bottom: 5px;
letter-spacing: -1px;
margin-right: 5px;
}
}
&__simple{
padding: 0px 10px;
// padding: 0px 10px;
min-height: 50px;
div{
width: 100%;
height: 100%;
padding: 0px 3px;
h1{
font-family: numeralBold;
text-align: justify;
margin: 0px;
}
}
}
}

@ -26,6 +26,9 @@ import blog2 from '../../assets/images/blog2.png';
import blog3 from '../../assets/images/blog3.png';
import ar from "../../assets/icons/qr.svg";
import qr from "../../assets/icons/qr.svg";
import myBook from '../../assets/images/myBook.png';
import homeBlog from '../../assets/images/homeBlog.png';
import bookActivation from '../../assets/images/bookActivating.png';
import "./index.scss";
export default class Home extends Component {
@ -123,7 +126,7 @@ Home.defaultProps = {
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 233,
height: window.innerWidth > 1000 ? 370 : 203,
design: "header",
number: 1,
data: [
@ -224,7 +227,7 @@ Home.defaultProps = {
},
{
id: 1,
imageUrl: ar,
imageUrl: myBook,
backgroundColor : {
first: '#9446FCaa',
second: '#9446FCaa',
@ -233,6 +236,128 @@ Home.defaultProps = {
design: "simple",
title: "واقعیت افزوده",
subTitle: "",
justifyContent: 'flex-start',
alignItems: 'center',
link: '',
badge : '',
flex : 1,
fontSize : 'large',
color: 'white',
},
]
},
{
type: "static",
title: "",
height: 160,
data : [
{
id: 0,
imageUrl: homeBlog,
backgroundColor : {
first: '#39BF55',
second: '#39BF4B55',
angle: '110deg'
},
design: "simple",
title: "بلاگ",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
badge : '',
flex : 1.2,
fontSize : 'normal',
color: 'white',
},
{
id: 1,
backgroundColor : {
first: '#5DBEFF',
second: '#0483D9',
angle: '180deg'
},
design: "vitrin",
title: "فروشگاه",
subTitle: "",
justifyContent: 'flex-start',
alignItems: 'center',
books: [
{ id: 0, imageUrl: book1 },
{ id: 1, imageUrl: book2 },
{ id: 2, imageUrl: book3},
],
link: '',
badge : '',
flex : 2,
fontSize : 'large',
color: 'white',
},
]
},
{
type: "static",
title: "",
data : [
{
id: 0,
design: "3d",
flex : 1,
subData: [
{
id: 0,
imageUrl: '',
backgroundColor : {
first: '#FC365F',
second: '#7E1B30',
angle: '254deg'
},
design: "simple",
title: "پیشتیبانی",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
badge : '',
flex : 1,
fontSize : 'normal',
color: 'white',
},
{
id: 1,
imageUrl: '',
backgroundColor : {
first: '#FFCC00',
second: '#FF9800',
angle: '105deg'
},
design: "simple",
title: "پروفایل",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
badge : '',
flex : 1,
fontSize : 'normal',
color: 'white',
},
]
},
{
id: 1,
imageUrl : bookActivation,
backgroundColor : {
first: '#03FCDA7F',
second: '#03FCDA7F',
angle: '180deg'
},
design: "simple",
title: "فعال سازی کتاب",
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
badge : '',
flex : 1,

@ -14,5 +14,5 @@
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 90px;
padding-top: 70px;
}

@ -1,7 +1,5 @@
import React from "react";
import moment from "jalali-moment";
import Reply from './Reply/index';
import "./index.scss";
const maxDesktopSize = 1250;
@ -13,7 +11,7 @@ const fontSize = {
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
mobile : {
mobile : {
strong: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 20,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
@ -28,15 +26,13 @@ export default function Comment(props) {
<strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong>
<p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.mobile.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
{comment.reply ? <Reply reply={comment.reply} /> : null}
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="comment d-flex flex-column">
<strong className="comment__user" style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
<p className="comment__text" style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
<span className="comment__date" style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
{comment.reply ? <Reply reply={comment.reply} /> : null}
<strong style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
<p style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
</div>
) : null}
</>

Loading…
Cancel
Save