parent
11746080bd
commit
911dea17c0
18 changed files with 1105 additions and 70 deletions
@ -0,0 +1,99 @@ |
||||
.MuiDrawer-paperAnchorRight { |
||||
background: linear-gradient(180deg, #00cba2 16.9%, #ffffff 17%) !important; |
||||
&::-webkit-scrollbar { |
||||
display: none; |
||||
width: 0px; |
||||
} |
||||
} |
||||
.navbar-drawer { |
||||
font-family: numeralLight; |
||||
// background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important; |
||||
text-align: right !important; |
||||
direction: rtl; |
||||
padding: 30px 10px 10px 10px; |
||||
&__header { |
||||
height: 60px; |
||||
background-color: #00cba2; |
||||
width: 100%; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0px 8px; |
||||
&--right { |
||||
& h1 { |
||||
margin-bottom: 0px; |
||||
font-size: 24px; |
||||
color: white; |
||||
letter-spacing: -1px; |
||||
} |
||||
& div { |
||||
color: white; |
||||
font-size: 12px; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
& img { |
||||
width: 22px; |
||||
height: 22px; |
||||
position: relative; |
||||
bottom: 35px; |
||||
} |
||||
} |
||||
&__bottom { |
||||
width: 100%; |
||||
margin-top: 50px !important; |
||||
&--link { |
||||
width: 100%; |
||||
align-items: center; |
||||
padding: 15px 10px; |
||||
& img { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-left: 20px; |
||||
} |
||||
& .badge { |
||||
background-color: rgb(160, 60, 209); |
||||
margin: 5px; |
||||
} |
||||
} |
||||
&--button { |
||||
width: 100%; |
||||
height: 100px; |
||||
color: white; |
||||
padding: 15px 10px; |
||||
cursor: pointer; |
||||
& img { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
&--version { |
||||
position: absolute; |
||||
bottom: 5px; |
||||
left: 0px; |
||||
width: 100%; |
||||
height: 32px; |
||||
font-size: 14px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
& span { |
||||
color: #cfcfcf; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.navbar-drawer__bottom a { |
||||
width: 100%; |
||||
height: 100px; |
||||
color: #666; |
||||
text-decoration: none; |
||||
} |
||||
.navbar-drawer__bottom a:hover { |
||||
color: #666; |
||||
} |
||||
|
||||
.navbar-drawer__bottom--link .navbar-drawer__bottom--link div { |
||||
font-size: 16px; |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
import React from "react"; |
||||
import moment from "jalali-moment"; |
||||
|
||||
import "./index.scss"; |
||||
export default function Comment(props) { |
||||
const { comment } = props; |
||||
return ( |
||||
<div className="mobile-comment d-flex flex-column"> |
||||
<strong>{comment.username}</strong> |
||||
<p>{comment.text}</p> |
||||
<span>{moment(comment.date).format('YYYY/MM/DD')}</span> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
.mobile-comment{ |
||||
padding : 30px 20px 20px; |
||||
border-radius: 10px; |
||||
background-color: #fffac9; |
||||
margin-left: 10px; |
||||
min-width: calc(100vw / 1.7); |
||||
max-width: 200px; |
||||
color: #72891edc; |
||||
position: relative; |
||||
p{ |
||||
text-align: justify; |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 30); |
||||
} |
||||
strong{ |
||||
font-family: numeralMedium; |
||||
margin-bottom: 5px; |
||||
font-size: calc(100vw / 25); |
||||
} |
||||
|
||||
span{ |
||||
position: absolute; |
||||
left: 10px; |
||||
top: 10px; |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 30); |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,118 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
import Footer from "../Home/Footer/index"; |
||||
import Navbar from "../Home/Navbar/index"; |
||||
import Comment from './Comment/index'; |
||||
|
||||
import book2 from "../../assets/images/book2.png"; |
||||
|
||||
import './index.scss'; |
||||
export default class Product extends Component { |
||||
render() { |
||||
const {product} = this.props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<> |
||||
<div className="product d-flex flex-column"> |
||||
<Navbar /> |
||||
|
||||
</div> |
||||
<Footer /> |
||||
</> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<> |
||||
<div className="mobile-product d-flex flex-column"> |
||||
<Navbar /> |
||||
<header className="mobile-product__header d-flex flex-column align-items-center"> |
||||
<img src={product.image} alt={product.title} /> |
||||
<h1>{product.title}</h1> |
||||
<h2>{product.subTitle}</h2> |
||||
<div className="d-flex mt-3"> |
||||
<button className="mobile-product__header--sampleButton">مطالعه نمومه کتاب</button> |
||||
<button className="mobile-product__header--purchase">خرید کتاب</button> |
||||
</div> |
||||
</header> |
||||
<div className="mobile-product__abstraction d-flex flex-column"> |
||||
<h1>خلاصه کتاب</h1> |
||||
<p>{product.abstraction}</p> |
||||
</div> |
||||
<div className="mobile-product__modules d-flex flex-column"> |
||||
<h1>این کتاب شامل چه مواردی است؟</h1> |
||||
<ul> |
||||
{product.modules.map((item, i) => ( |
||||
<React.Fragment key={i}> |
||||
<Item item={item} /> |
||||
</React.Fragment> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
<div className="mobile-product__tips d-flex flex-column"> |
||||
<h1>نکاتی که هنگام خرید باید به آن توجه داشته باشید؟</h1> |
||||
<ul> |
||||
{product.tips.map((item, i) => ( |
||||
<React.Fragment key={i}> |
||||
<Item item={item} /> |
||||
</React.Fragment> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
<div className="mobile-product__description d-flex"> |
||||
<p>{product.description}</p> |
||||
</div> |
||||
<div className="mobile-product__comments d-flex flex-column"> |
||||
<h1>نظرات خریداران</h1> |
||||
<div className="mobile-product__comments--list d-flex"> |
||||
{ |
||||
product.comments.map((item,i) => ( |
||||
<Comment comment={item} key={i} /> |
||||
)) |
||||
} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
Product.defaultProps = { |
||||
product: { |
||||
id: 1, |
||||
image: book2, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه ششم ابتدایی", |
||||
price: "39.000", |
||||
oldPrice: "59.000", |
||||
date: new Date(), |
||||
abstraction: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت', |
||||
modules: [ |
||||
'پک هدیه شامل یک عدد جلد سخت', |
||||
'عینک واقعیت مجازی', |
||||
'کارت گرافیک مناسب جهت اجرای بازی', |
||||
], |
||||
tips: [ |
||||
'پک هدیه شامل یک عدد جلد سخت', |
||||
'عینک واقعیت مجازی', |
||||
'کارت گرافیک مناسب جهت اجرای بازی', |
||||
], |
||||
description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت', |
||||
comments: [ |
||||
{id: 0, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 4}, |
||||
{id: 1, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 2.5}, |
||||
{id: 2, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 5}, |
||||
{id: 3, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 3.7}, |
||||
{id: 4, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 2}, |
||||
] |
||||
}, |
||||
}; |
||||
|
||||
|
||||
const Item = (props) => { |
||||
return( |
||||
<li>+ {props.item}</li> |
||||
); |
||||
} |
||||
@ -0,0 +1,142 @@ |
||||
.mobile-product{ |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding : 0px 10px 40px; |
||||
direction: rtl; |
||||
padding-top: 90px; |
||||
overflow-x: hidden; |
||||
&__header{ |
||||
width: 100%; |
||||
img{ |
||||
height: calc(100vh / 2.7); |
||||
} |
||||
h1{ |
||||
margin-top: 10px; |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 20); |
||||
color: #7dc241; |
||||
letter-spacing: -1px; |
||||
} |
||||
h2{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 28); |
||||
color: #6f7074; |
||||
} |
||||
button{ |
||||
border: 0px; |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 25); |
||||
padding: 15px 0px; |
||||
width: 150px; |
||||
letter-spacing: -1px; |
||||
} |
||||
&--purchase{ |
||||
border-top-left-radius: 8px; |
||||
border-bottom-left-radius: 8px; |
||||
background-color: #00cc69; |
||||
color: white; |
||||
} |
||||
&--sampleButton{ |
||||
border-top-right-radius: 8px; |
||||
border-bottom-right-radius: 8px; |
||||
background-color: #efefef; |
||||
color: #6f7074; |
||||
} |
||||
} |
||||
&__abstraction{ |
||||
margin-top: 30px; |
||||
width: 100%; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 22); |
||||
color: #6f7074; |
||||
letter-spacing: -1px; |
||||
} |
||||
p{ |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 30); |
||||
color: #6f7074; |
||||
letter-spacing: -1px; |
||||
text-align: justify; |
||||
} |
||||
} |
||||
&__modules{ |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
padding: 20px 10px; |
||||
background-color: #baffdc2f; |
||||
border-radius: 10px; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 28); |
||||
color: #02733c; |
||||
letter-spacing: -1px; |
||||
} |
||||
ul{ |
||||
list-style: none; |
||||
padding: 0px; |
||||
margin: 0px; |
||||
margin-top: 10px; |
||||
li{ |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 28); |
||||
color: #02733c; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
} |
||||
&__tips{ |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
padding: 20px 10px; |
||||
background-color: #1f6fb528; |
||||
border-radius: 10px; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 28); |
||||
color: #074f8b; |
||||
letter-spacing: -1px; |
||||
} |
||||
ul{ |
||||
list-style: none; |
||||
padding: 0px; |
||||
margin: 0px; |
||||
margin-top: 10px; |
||||
li{ |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 30); |
||||
color: #074f8b; |
||||
letter-spacing: -1px; |
||||
margin-bottom: 3px; |
||||
} |
||||
} |
||||
} |
||||
&__description{ |
||||
width: 100%; |
||||
margin-top: 20px; |
||||
p{ |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 30); |
||||
color: #6f7074; |
||||
letter-spacing: -1px; |
||||
text-align: justify; |
||||
} |
||||
} |
||||
&__comments{ |
||||
max-width: 100%; |
||||
margin-top: 30px; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 22); |
||||
color: #6f7074; |
||||
letter-spacing: -1px; |
||||
margin-bottom: 30px; |
||||
} |
||||
&--list{ |
||||
width: 100vw; |
||||
overflow-x: scroll !important; |
||||
transform: translateX(10px); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
import React, { Component } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
import './index.scss'; |
||||
export default class Product extends Component { |
||||
render() { |
||||
const { product } = this.props; |
||||
return ( |
||||
<article className="mobile-products-product d-flex flex-column"> |
||||
<Link to={`/products/${product.id}`}> |
||||
<img src={product.image} alt={product.title} /> |
||||
<h1>{product.title}</h1> |
||||
<h2>{product.subTitle}</h2> |
||||
{product.price ? ( |
||||
<div className="mobile-products-product__price d-flex justify-content-center"> |
||||
{product.oldPrice ? ( |
||||
<div> |
||||
<div className="mobile-products-product__price--old d-flex"> |
||||
{product.oldPrice} تومان |
||||
<span></span> |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
<div className="mobile-products-product__price--price"> |
||||
{product.price} تومان |
||||
</div> |
||||
</div> |
||||
) : ( |
||||
<div className="mobile-products-product__notAvailabe">ناموجود</div> |
||||
)} |
||||
</Link> |
||||
</article> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,64 @@ |
||||
.mobile-products-product{ |
||||
width: calc(100% / 3); |
||||
padding: 10px; |
||||
a{ |
||||
width : 100%; |
||||
text-decoration: none; |
||||
&:hover{ |
||||
} |
||||
img{ |
||||
width: 100%; |
||||
height: 170px; |
||||
border-top-left-radius: 15px; |
||||
border-top-right-radius: 15px; |
||||
} |
||||
h1{ |
||||
font-family: numeralBold; |
||||
margin-top: 15px; |
||||
font-size: calc(100vw / 26); |
||||
color: #7dc241; |
||||
letter-spacing: -1px; |
||||
} |
||||
h2{ |
||||
font-family: numeralLight; |
||||
margin-top: 10px; |
||||
font-size: calc(100vw / 32); |
||||
color: #6f7074; |
||||
} |
||||
} |
||||
&__notAvailabe{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 46); |
||||
width : 100%; |
||||
text-align: center; |
||||
color: #6f7074; |
||||
margin-top: 15px; |
||||
} |
||||
&__price{ |
||||
font-size: calc(100vw / 46); |
||||
width : 100%; |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
&--old{ |
||||
font-family: numeralBold; |
||||
color: #6f7074; |
||||
position: relative; |
||||
margin-left: 10px; |
||||
align-items:center; |
||||
font-size: calc(100vw / 46); |
||||
span{ |
||||
position: absolute; |
||||
left: 0px; |
||||
width : 100%; |
||||
height: 2px; |
||||
background-color: rgba(121, 121, 121, 0.534); |
||||
transform: rotate(-14deg); |
||||
} |
||||
} |
||||
&--price{ |
||||
color: #02733c; |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 46); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,74 @@ |
||||
import React from "react"; |
||||
import { makeStyles, withStyles } from "@material-ui/core/styles"; |
||||
import FormControl from "@material-ui/core/FormControl"; |
||||
import NativeSelect from "@material-ui/core/NativeSelect"; |
||||
import InputBase from "@material-ui/core/InputBase"; |
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
||||
|
||||
const BootstrapInput = withStyles((theme) => ({ |
||||
root: { |
||||
"label + &": { |
||||
marginTop: theme.spacing(3), |
||||
}, |
||||
}, |
||||
input: { |
||||
borderRadius: 4, |
||||
position: "relative", |
||||
backgroundColor: theme.palette.background.paper, |
||||
border: "1px solid #a5a5a5", |
||||
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)", |
||||
color: "#a5a5a5", |
||||
// maxWidth : 70,
|
||||
minWidth: window.innerWidth > 420 ? 100 : 80, |
||||
height: "35px", |
||||
padding: "5px", |
||||
transition: theme.transitions.create(["border-color", "box-shadow"]), |
||||
// Use the system font instead of the default Roboto font.
|
||||
fontFamily: "numeralLight", |
||||
"&:focus": { |
||||
borderRadius: 4, |
||||
}, |
||||
}, |
||||
}))(InputBase); |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
marginLeft: { |
||||
// margin: theme.spacing(1),
|
||||
marginLeft: 8, |
||||
}, |
||||
})); |
||||
|
||||
export default function CustomizedSelects(props) { |
||||
const classes = useStyles(); |
||||
|
||||
console.log(props); |
||||
return ( |
||||
<div style={{ position: "relative" }}> |
||||
<FormControl className={classes.marginLeft}> |
||||
<NativeSelect |
||||
id="demo-customized-select-native" |
||||
value={props.parent.state[props.name]} |
||||
onChange={(e) => |
||||
props.parent.setState({ [props.name]: e.target.value }) |
||||
} |
||||
input={<BootstrapInput />} |
||||
> |
||||
{props.options.map((item) => ( |
||||
<option key={item.id} value={item.value}> |
||||
{item.value} |
||||
</option> |
||||
))} |
||||
</NativeSelect> |
||||
</FormControl> |
||||
<KeyboardArrowDownIcon |
||||
style={{ |
||||
position: "absolute", |
||||
left: 5, |
||||
top: 6, |
||||
fontSize: 25, |
||||
color: "#a5a5a5", |
||||
}} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,165 @@ |
||||
import React, { Component } from "react"; |
||||
import FilterListIcon from "@material-ui/icons/FilterList"; |
||||
|
||||
import Navbar from "../Home/Navbar/index"; |
||||
import Footer from "../Home/Footer/index"; |
||||
import Select from "./Select/index"; |
||||
import Product from "./Product/index"; |
||||
|
||||
import book1 from "../../assets/images/book1.png"; |
||||
import book2 from "../../assets/images/book2.png"; |
||||
import book3 from "../../assets/images/book3.png"; |
||||
import book4 from "../../assets/images/book4.png"; |
||||
import book5 from "../../assets/images/book5.png"; |
||||
|
||||
import "./index.scss"; |
||||
export default class Products extends Component { |
||||
state = { |
||||
firstFilters: [ |
||||
{ id: 0, value: "محبوب ترین" }, |
||||
{ id: 1, value: "جدیدترین" }, |
||||
{ id: 2, value: "ارزان ترین" }, |
||||
], |
||||
dateFilters: [ |
||||
{ id: 0, value: "1400" }, |
||||
{ id: 1, value: "`1399" }, |
||||
{ id: 2, value: "1398" }, |
||||
], |
||||
degreeFilters: [ |
||||
{ id: 0, value: "اول" }, |
||||
{ id: 1, value: "دوم" }, |
||||
{ id: 2, value: "سوم" }, |
||||
], |
||||
first: "", |
||||
date: "", |
||||
degree: "", |
||||
}; |
||||
|
||||
render() { |
||||
const { dateFilters, degreeFilters, firstFilters } = this.state; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<> |
||||
<div className="products d-flex flex-column"> |
||||
<Navbar /> |
||||
</div> |
||||
<Footer /> |
||||
</> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<> |
||||
<div className="mobile-products d-flex flex-column"> |
||||
<Navbar /> |
||||
<div className="mobile-products__filters d-flex"> |
||||
<div className="d-flex"> |
||||
<Select name="first" options={firstFilters} parent={this} /> |
||||
<Select name="date" options={dateFilters} parent={this} /> |
||||
<Select name="degree" options={degreeFilters} parent={this} /> |
||||
</div> |
||||
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> |
||||
</div> |
||||
<div className="mobile-products__list d-flex flex-wrap"> |
||||
{this.props.products.map((item, i) => ( |
||||
<Product product={item} key={i} /> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
Products.defaultProps = { |
||||
products: [ |
||||
{ |
||||
id: 0, |
||||
image: book1, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه دهم ابتدایی", |
||||
price: "78.000", |
||||
oldPrice: "", |
||||
date: new Date(), |
||||
}, |
||||
{ |
||||
id: 1, |
||||
image: book2, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه ششم ابتدایی", |
||||
price: "39.000", |
||||
oldPrice: "59.000", |
||||
date: new Date(), |
||||
}, |
||||
{ |
||||
id: 2, |
||||
image: book3, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه ششم ابتدایی", |
||||
price: "21.000", |
||||
oldPrice: "", |
||||
}, |
||||
{ |
||||
id: 3, |
||||
image: book4, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه دهم ابتدایی", |
||||
price: "", |
||||
oldPrice: "", |
||||
}, |
||||
{ |
||||
id: 4, |
||||
image: book5, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه هفتم ابتدایی", |
||||
price: "59.000", |
||||
oldPrice: "", |
||||
}, |
||||
{ |
||||
id: 5, |
||||
image: book1, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه دهم ابتدایی", |
||||
price: "78.000", |
||||
oldPrice: "", |
||||
date: new Date(), |
||||
}, |
||||
{ |
||||
id: 6, |
||||
image: book2, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه ششم ابتدایی", |
||||
price: "39.000", |
||||
oldPrice: "59.000", |
||||
date: new Date(), |
||||
}, |
||||
{ |
||||
id: 7, |
||||
image: book3, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه ششم ابتدایی", |
||||
price: "21.000", |
||||
oldPrice: "", |
||||
date: new Date(), |
||||
}, |
||||
{ |
||||
id: 8, |
||||
image: book4, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه دهم ابتدایی", |
||||
price: "", |
||||
oldPrice: "", |
||||
date: new Date(), |
||||
}, |
||||
{ |
||||
id: 9, |
||||
image: book5, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه هفتم ابتدایی", |
||||
price: "59.000", |
||||
oldPrice: "", |
||||
date: new Date(), |
||||
}, |
||||
], |
||||
}; |
||||
@ -0,0 +1,35 @@ |
||||
.products{ |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding : 0px 10px; |
||||
direction: rtl; |
||||
} |
||||
|
||||
|
||||
.mobile-products{ |
||||
width: 100vw; |
||||
max-width: 600px; |
||||
margin: 0px auto; |
||||
padding: 0px; |
||||
direction: rtl; |
||||
overflow-x: hidden; |
||||
padding-top: 90px; |
||||
&__filters{ |
||||
width: 100%; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding : 0px 10px; |
||||
.MuiNativeSelect-icon{ |
||||
display: none; |
||||
} |
||||
.MuiNativeSelect-select.MuiNativeSelect-select{ |
||||
padding-right: 5px !important; |
||||
padding-left: 20px; |
||||
} |
||||
} |
||||
&__list{ |
||||
width : 100%; |
||||
padding: 10px 0px; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue