reza added some change

master
Reza_ashrafi 3 years ago
parent ca95749a25
commit bcebb1ba33
  1. 4
      src/AppRouter.js
  2. BIN
      src/assets/images/book6.png
  3. BIN
      src/assets/images/book7.png
  4. BIN
      src/assets/images/book8.png
  5. BIN
      src/assets/images/book9.png
  6. 5
      src/views/Home/HomeStatic/Flex/index.js
  7. 5
      src/views/Home/HomeStatic/Simple/index.js
  8. 2
      src/views/Home/HomeStatic/Vitrin/index.js
  9. 6
      src/views/Home/HomeStatic/index.scss
  10. 18
      src/views/Home/index.js
  11. 168
      src/views/MyBooks/index.js
  12. 62
      src/views/MyBooks/index.scss
  13. 32
      src/views/Products/BreadCrumb/index.js
  14. 8
      src/views/Products/BreadCrumb/index.scss
  15. 40
      src/views/Products/Filters/AppliedFilters/index.js
  16. 27
      src/views/Products/Filters/AppliedFilters/index.scss
  17. 49
      src/views/Products/Filters/TypicalFilters/index.js
  18. 39
      src/views/Products/Filters/TypicalFilters/index.scss
  19. 21
      src/views/Products/Filters/index.js
  20. 3
      src/views/Products/Filters/index.scss
  21. 18
      src/views/Products/List/index.js
  22. 3
      src/views/Products/List/index.scss
  23. 36
      src/views/Products/Product/index.js
  24. 55
      src/views/Products/Product/index.scss
  25. 36
      src/views/Products/Sort/index.js
  26. 21
      src/views/Products/Sort/index.scss
  27. 55
      src/views/Products/index.js
  28. 7
      src/views/Products/index.scss

@ -15,6 +15,7 @@ import Activation from './views/Activation/index';
import ChatList from './views/ChatList/index';
import Chatroom from './views/ChatRoom/index';
import Cart from './views/Cart/index';
import MyBooks from './views/MyBooks/index';
class AppRouter extends Component {
constructor(props) {
@ -73,6 +74,9 @@ class AppRouter extends Component {
<Route exact path={'/cart'}>
<Cart />
</Route>
<Route exact path={'/mybooks'}>
<MyBooks />
</Route>
{
window.innerWidth < 1000 ?
<Route exact path={'/chatroom/:id'}>

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

@ -1,4 +1,5 @@
import React from 'react';
import {Link} from 'react-router-dom';
const maxMobileSize = 550;
@ -18,7 +19,7 @@ export default function Flex(props){
}
return(
<div className="mobile-home-static__flex d-flex align-items-center" style={style}>
<Link to={data.link} 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>
{
@ -28,7 +29,7 @@ export default function Flex(props){
<span style={{ fontSize: fontSize.span }}>{data.subTitle}</span>
</div>
<img src={data.imageUrl} alt={data.title} />
</div>
</Link>
);
}

@ -1,4 +1,5 @@
import React from 'react';
import {Link} from 'react-router-dom';
const maxMobileSize = 550;
@ -29,11 +30,11 @@ export default function Simple(props){
alignItems: data.alignItems
};
return(
<div className="mobile-home-static__simple d-flex" style={parentStyle}>
<Link to={data.link} 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>
</Link>
);
}

@ -32,7 +32,7 @@ export default function Vitrin(props){
<Item data={item} key={i} />
))
}
<span style={{fontSize: fontSize.span }}>مشاهده بیشتر</span>
<Link to={data.link} style={{fontSize: fontSize.span }}>مشاهده بیشتر</Link>
</div>
</div>
);

@ -31,6 +31,7 @@
&__flex{
padding: 20px 10px;
justify-content: space-around;
text-decoration: none;
img {
// margin-right: 20px;
max-height: 55px;
@ -65,16 +66,19 @@
border-radius: 10px;
}
}
span{
a{
text-decoration: none;
font-family: numeralLight;
align-items: flex-end;
margin-bottom: 5px;
letter-spacing: -1px;
margin-right: 5px;
color: white;
}
}
&__simple{
// padding: 0px 10px;
text-decoration: none;
min-height: 50px;
div{
width: 100%;

@ -178,7 +178,7 @@ Home.defaultProps = {
design: "flex",
title: "QR خوان",
subTitle: "در صفحات کتاب هوشمند",
link: '',
link: '/qr-scan',
badge : '',
flex : 1,
fontSize : 'large',
@ -195,7 +195,7 @@ Home.defaultProps = {
design: "flex",
title: "واقعیت افزوده",
subTitle: "توضیحات مختصر در این رابطه",
link: '',
link: '/ar-scan',
badge : '',
flex : 1,
fontSize : 'large',
@ -234,11 +234,11 @@ Home.defaultProps = {
angle: '180deg'
},
design: "simple",
title: "واقعیت افزوده",
title: "کتابهای من",
subTitle: "",
justifyContent: 'flex-start',
alignItems: 'center',
link: '',
link: '/mybooks',
badge : '',
flex : 1,
fontSize : 'large',
@ -264,7 +264,7 @@ Home.defaultProps = {
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
link: '/blog',
badge : '',
flex : 1.2,
fontSize : 'normal',
@ -287,7 +287,7 @@ Home.defaultProps = {
{ id: 1, imageUrl: book2 },
{ id: 2, imageUrl: book3},
],
link: '',
link: '/products',
badge : '',
flex : 2,
fontSize : 'large',
@ -318,7 +318,7 @@ Home.defaultProps = {
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
link: '/contact',
badge : '',
flex : 1,
fontSize : 'normal',
@ -337,7 +337,7 @@ Home.defaultProps = {
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
link: '/profile',
badge : '',
flex : 1,
fontSize : 'normal',
@ -358,7 +358,7 @@ Home.defaultProps = {
subTitle: "",
justifyContent: 'center',
alignItems: 'center',
link: '',
link: '/activation',
badge : '',
flex : 1,
fontSize : 'large',

@ -0,0 +1,168 @@
import React from "react";
import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import book6 from "../../assets/images/book6.png";
import book7 from "../../assets/images/book7.png";
import book8 from "../../assets/images/book8.png";
import book9 from "../../assets/images/book9.png";
import basket from "../../assets/icons/basket.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
mobile: {
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15,
a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30,
},
};
export default class MyBooks extends React.Component {
render() {
const { books } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="mybooks d-flex flex-column">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-mybooks d-flex flex-column">
<Navbar />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1>
<div className="d-flex flex-wrap p-1">
{books.map((item, i) => (
<Item data={item} key={i} id={i} />
))}
</div>
</div>
</>
) : null}
</>
);
}
}
const Item = (props) => {
const { data, id } = props;
return (
<div
className="mobile-mybooks__item d-flex flex-column"
style={{
borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0,
borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0,
}}
>
<img src={data.imageUrl} alt={"عکس مجصول"} />
<div className="mobile-mybooks__item--buttons d-flex flex-column">
<Link
style={{
background: data.status.digital ? "#FFEE00" : "#FFFFFF",
fontSize: fontSize.mobile.a,
color: data.status.ar ? "#4D4D4F" : "#4D4D4F",
}}
>
کتاب دیجیتال
{ !data.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
</Link>
<Link
style={{
background: data.status.ar ? "#00CC69" : "#FFFFFF",
color: data.status.ar ? "#FFFFFF" : "#4D4D4F",
fontSize: fontSize.mobile.a,
}}
>
واقعیت افزوده
{ !data.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
</Link>
</div>
</div>
);
};
MyBooks.defaultProps = {
books: [
{
id: 0,
link: "",
imageUrl: book6,
status: {
digital: true,
ar: true,
},
},
{
id: 1,
link: "",
imageUrl: book7,
status: {
digital: false,
ar: true,
},
},
{
id: 2,
link: "",
imageUrl: book8,
status: {
digital: true,
ar: false,
},
},
{
id: 3,
link: "",
imageUrl: book9,
status: {
digital: true,
ar: true,
},
},
{
id: 4,
link: "",
imageUrl: book6,
status: {
digital: true,
ar: true,
},
},
{
id: 5,
link: "",
imageUrl: book7,
status: {
digital: true,
ar: true,
},
},
{
id: 6,
link: "",
imageUrl: book8,
status: {
digital: true,
ar: true,
},
},
{
id: 7,
link: "",
imageUrl: book9,
status: {
digital: true,
ar: true,
},
},
],
};

@ -0,0 +1,62 @@
.mybooks{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
}
.mobile-mybooks{
width: 100vw;
max-width: 600px;
margin: 0px auto;
padding: 0px;
direction: rtl;
overflow-x: hidden;
padding-top: 70px;
h1{
padding: 0px 10px;
font-family: numeralBold;
color: #6F7074;
margin-bottom: 10px;
}
&__item{
background-color: #F2F2F2;
width: calc(100vw / 2 - 15px);
margin: 5px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
margin-bottom: 20px;
& img{
width: 100%;
height: calc(100vh / 3.5);
border-radius: 30px;
max-height: 200px;
margin-bottom: 10px;
}
&--buttons{
padding: 5px 9px;
a {
text-decoration: none;
width: 100%;
padding: 8px;
font-family: numeralLight;
margin-bottom: 10px;
border-radius: 10px;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
img{
position: absolute;
top: calc(50% - 8px);
left: 5px;
width: 20px;
height: 20px;
}
}
}
}
}

@ -0,0 +1,32 @@
import React from 'react';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {Link} from 'react-router-dom';
import './index.scss';
function handleClick(event) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
};
export default function ActiveLastBreadcrumb() {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to={'/'} onClick={handleClick}>
صفحه اصلی
</Link>
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}} to="/products" onClick={handleClick}>
محصولات
</Link>
</Breadcrumbs>
);
}

@ -0,0 +1,8 @@
.MuiBreadcrumbs-li{
a {
text-decoration: none;
font-family: numeralLight;
color: #6F7074;
letter-spacing: -1px;
}
}

@ -0,0 +1,40 @@
import React from 'react';
import CloseIcon from '@material-ui/icons/Close';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
}
export default class AppliedFilters extends React.Component {
render() {
const {data} = this.props;
return(
<div className="products-filters-applied d-flex flex-column">
<header className="products-filters-applied__header d-flex align-items-center">
<span></span>
<h2 style={{ fontSize : fontSize.h2 }}>فیلترهای اعمال شده</h2>
</header>
<div className="products-filters-applied__items d-flex flex-wrap">
{
data.map((item,i) => (
<Item data={item} key={i} />
))
}
</div>
</div>
);
}
}
const Item = (props) => {
const {data} = props;
return(
<button className="d-flex align-items-center">
<span>{data.name}</span>
<CloseIcon style={{ fontSize: 20 }} />
</button>
);
}

@ -0,0 +1,27 @@
.products-filters-applied {
width: 100%;
margin-bottom: 20px;
&__header {
h2 {
font-family: numeralBold;
margin: 0px;
color: #373737;
}
span {
width: 3px;
border-radius: 100px;
background-color: #17dfff;
height: 100%;
margin-left: 5px;
min-height: 20px;
}
}
&__items {
margin-top: 10px;
box-shadow: 0px 0px 10px #70707028;
border-radius: 8px;
min-height: 30px;
padding: 10px 5px;
}
}

@ -0,0 +1,49 @@
import React from 'react';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CloseIcon from '@material-ui/icons/Close';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
}
export default class TypicalFilters extends React.Component {
render() {
const {data, title, theme} = this.props;
return(
<div className="products-filters-typical d-flex flex-column">
<header className="products-filters-typical__header d-flex align-items-center">
<span style={{ background : theme }}></span>
<h2 style={{ fontSize : fontSize.h2 }}>{title}</h2>
</header>
<div className="products-filters-typical__items d-flex flex-column">
{
data.map((item,i) => (
<Item data={item} key={i} />
))
}
</div>
</div>
);
}
}
const Item = (props) => {
const {data} = props;
return(
<div className="d-flex align-items-center mt-2">
<FormControlLabel
control={<Checkbox icon={<CheckBoxOutlineBlankIcon style={{ color: '#EAEAEA' }} />} checkedIcon={<CheckBoxIcon style={{ color: '#00CC69' }} />} name="checkedH" />}
label=""
/>
<strong style={{ fontSize: fontSize.strong }}>{data}</strong>
</div>
);
}

@ -0,0 +1,39 @@
.products-filters-typical{
width: 100%;
margin-bottom: 20px;
&__header{
h2{
font-family: numeralBold;
margin: 0px;
color: #373737;
}
span{
width: 4px;
border-radius: 4px;
height: 100%;
margin-left: 5px;
min-height: 20px;
}
}
&__items {
margin-top: 10px;
box-shadow: 0px 0px 10px #70707028;
border-radius: 8px;
min-height: 30px;
padding: 10px 5px;
.MuiFormControlLabel-root{
margin: 0px;
}
.MuiCheckbox-root{
padding: 0px;
}
strong{
font-weight: 100;
color: #6F7074;
font-family: numeralLight;
margin-right: 10px;
}
}
}

@ -0,0 +1,21 @@
import React from 'react';
import AppliedFiltesrs from './AppliedFilters/index';
import TypicalFilters from './TypicalFilters/index';
import './index.scss';
export default class Filtesrs extends React.Component {
render() {
const {parent} = this.props;
return(
<div className="products-filters d-flex flex-column">
{
parent.state.selectedFilters.length !== 0 ?
<AppliedFiltesrs data={parent.state.selectedFilters} />: null
}
<TypicalFilters data={parent.props.subjects} title="دسته بندی موضوعی" theme="#D7FF17" />
<TypicalFilters data={parent.props.levels} title="پایه تحصیلی" theme="#FF8917" />
</div>
);
}
}

@ -0,0 +1,3 @@
.products-filters{
flex: 1;
}

@ -0,0 +1,18 @@
import React from 'react';
import Product from '../Product/index';
import './index.scss';
export default class List extends React.Component {
render() {
const {parent} = this.props;
return(
<div className="products-list d-flex flex-wrap">
{
parent.props.products.map((item,i) => (
<Product product={item} key={i} />
))
}
</div>
);
}
}

@ -0,0 +1,3 @@
.products-list{
padding: 20px 20px;
}

@ -4,13 +4,20 @@ import { Link } from "react-router-dom";
import "./index.scss";
const maxMobileSize = 550;
const maxDesktopSize = 1250;
const fontSize = {
mobile : {
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
}
},
desktop : {
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
},
}
export default class Product extends Component {
render() {
@ -45,6 +52,33 @@ export default class Product extends Component {
</Link>
</article>
) : null}
{window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items">
<Link to={`/products/${product.id}`}>
<img src={product.image} alt={product.title} />
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{product.title + ' ' + product.subTitle}</h1>
{product.price ? (
<div className="products-product__price d-flex justify-content-center align-items-center">
{product.oldPrice ? (
<div>
<div style={{ fontSize: fontSize.desktop.old }} className="products-product__price--old d-flex">
{product.oldPrice} تومان
<span></span>
</div>
</div>
) : null}
<div style={{ fontSize: fontSize.desktop.div }} className="products-product__price--price">
{product.price} تومان
</div>
</div>
) : (
<div style={{ fontSize: fontSize.desktop.div }} className="products-product__notAvailabe">
ناموجود
</div>
)}
</Link>
</article>
) : null}
</>
);
}

@ -56,4 +56,59 @@
font-family: numeralBold;
}
}
}
.products-product{
width: calc(100% / 4);
padding: 10px;
margin-bottom: 20px;
a{
width : 100%;
text-decoration: none;
&:hover{
}
img{
width: 100%;
height: 200px;
border-radius: 30px;
}
h1{
font-family: numeralBold;
margin-top: 15px;
color: #02A1A6;
letter-spacing: -1px;
text-align: center;
}
}
&__notAvailabe{
font-family: numeralBold;
width : 100%;
text-align: center;
color: #6f7074;
margin-top: 15px;
}
&__price{
width : 100%;
margin-top: 15px;
text-align: center;
&--old{
font-family: numeralBold;
color: #6f7074;
position: relative;
margin-left: 10px;
align-items:center;
span{
position: absolute;
left: 0px;
width : 100%;
height: 2px;
background-color: rgba(121, 121, 121, 0.534);
transform: rotate(-14deg);
}
}
&--price{
color: #4d4d4d;
font-family: numeralBold;
}
}
}

@ -0,0 +1,36 @@
import React from 'react';
import SortIcon from '@material-ui/icons/Sort';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
span : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
}
export default class Sort extends React.Component {
render() {
const {parent} = this.props;
return(
<div className="products-sort d-flex align-items-center">
<SortIcon style={{ fontSize: 30, color : '#A5A5A5', marginLeft : 10}} />
<span style={{ fontSize: fontSize.span }}>مرتب سازی بر اساس</span>
<ul className="d-flex justify-content-between align-items-center mr-2">
{
parent.props.sortItems.map((item, i) => (
<Item data={item} key={i} />
))
}
</ul>
</div>
);
}
}
const Item = (props) => {
return(
<li style={{ fontSize: fontSize.li }}>{props.data}</li>
);
}

@ -0,0 +1,21 @@
.products-sort{
padding: 5px 15px;
box-shadow: 0px 0px 10px #70707028;
border-radius: 8px;
span{
font-family: numeralLight;
color: #373737;
}
ul{
padding: 0px;
margin: 0px;
list-style: none;
flex: 1;
padding-right: 60px;
li{
font-family: numeralLight;
color: #373737;
cursor: pointer;
}
}
}

@ -5,6 +5,10 @@ import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Select from "./Select/index";
import Product from "./Product/index";
import Breadcrumbs from "./BreadCrumb/index";
import List from "./List/index";
import Sort from "./Sort/index";
import Filters from "./Filters/index";
import book1 from "../../assets/images/book1.png";
import book2 from "../../assets/images/book2.png";
@ -16,6 +20,7 @@ import book5 from "../../assets/images/book5.png";
import "./index.scss";
export default class Products extends Component {
state = {
selectedFilters : [],
firstFilters: [
{ id: 0, value: "محبوب ترین" },
{ id: 1, value: "جدیدترین" },
@ -44,6 +49,14 @@ export default class Products extends Component {
<>
<div className="products d-flex flex-column">
<Navbar page={'products'} />
<Breadcrumbs />
<div className="products__body d-flex">
<Filters parent={this} />
<div className="products__body--left d-flex flex-column">
<Sort parent={this} />
<List parent={this} />
</div>
</div>
</div>
<Footer />
</>
@ -74,11 +87,33 @@ export default class Products extends Component {
}
Products.defaultProps = {
sortItems : [
'پربازدیدترین',
'پرفروش ترین',
'گرانترین',
'ارزانترین',
'جدیدترین',
'بزودی',
],
subjects: [
'فیزیک',
'زیست شناسی',
'شیمی آلی',
'روانشناسی',
'علوم تجربی',
'دین و زندگی',
],
levels : [
'اول',
'دوم',
'سوم',
'چهارم',
],
products: [
{
id: 0,
image: book1,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
@ -87,7 +122,7 @@ Products.defaultProps = {
{
id: 1,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
@ -96,7 +131,7 @@ Products.defaultProps = {
{
id: 2,
image: book3,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
@ -104,7 +139,7 @@ Products.defaultProps = {
{
id: 3,
image: book4,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
@ -112,7 +147,7 @@ Products.defaultProps = {
{
id: 4,
image: book5,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
@ -120,7 +155,7 @@ Products.defaultProps = {
{
id: 5,
image: book1,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
@ -129,7 +164,7 @@ Products.defaultProps = {
{
id: 6,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
@ -138,7 +173,7 @@ Products.defaultProps = {
{
id: 7,
image: book3,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
@ -147,7 +182,7 @@ Products.defaultProps = {
{
id: 8,
image: book4,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
@ -156,7 +191,7 @@ Products.defaultProps = {
{
id: 9,
image: book5,
title: "منفجر کردن مغز خود را به ما بسپارید",
title: "کتاب علوم تجربی",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",

@ -5,6 +5,13 @@
padding : 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
&__body{
margin-top: 20px;
&--left{
flex: 4;
padding-right: 20px;
}
}
}

Loading…
Cancel
Save