parent
050c6102c0
commit
a8b5d34d4d
14 changed files with 778 additions and 56 deletions
@ -1,7 +1,68 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
import './index.scss'; |
||||
export default class Footer extends Component { |
||||
render() { |
||||
return <footer className="footer"></footer>; |
||||
const {fastAccess} = this.props; |
||||
return ( |
||||
<footer className="footer d-flex flex-column"> |
||||
<div className="footer-container d-flex"> |
||||
<div className="footer-container__content d-flex"> |
||||
<div className="footer-container__content--box first d-flex flex-column"> |
||||
<h1>دانوین کجاست؟</h1> |
||||
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه </p> |
||||
<div className="footer__location d-flex"> |
||||
{/* <img src={} /> */} |
||||
<p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p> |
||||
</div> |
||||
<div className="d-flex"> |
||||
<div className="d-flex"> |
||||
{/* <img src={} /> */} |
||||
<strong>Info@Danovin.ir</strong> |
||||
</div> |
||||
<div className="d-flex"> |
||||
{/* <img src={} /> */} |
||||
<strong>021-63462405</strong> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="footer-container__content--box second d-flex flex-column"> |
||||
<h1>دسترسی سریع</h1> |
||||
<ul> |
||||
{ |
||||
fastAccess.map(item => ( |
||||
<li>{item.name}</li> |
||||
)) |
||||
} |
||||
</ul> |
||||
</div> |
||||
<div className="footer-container__content--box second d-flex flex-column"> |
||||
<h1>دسترسی سریع</h1> |
||||
<ul> |
||||
{ |
||||
fastAccess.map(item => ( |
||||
<li>{item.name}</li> |
||||
)) |
||||
} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<div className="footer__privacy d-flex align-items-center"> |
||||
<p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p> |
||||
</div> |
||||
</footer> |
||||
); |
||||
} |
||||
} |
||||
|
||||
Footer.defaultProps = { |
||||
fastAccess : [ |
||||
{name : 'صفحه اصلی', to : '/'}, |
||||
{name : 'فروشگاه', link : '/shop'}, |
||||
{name : 'سوالات متداول', link : '/faq'}, |
||||
{name : 'درباره ما', link : '/about'}, |
||||
{name : 'تماس با ما', link : '/call'}, |
||||
] |
||||
}; |
||||
@ -0,0 +1,60 @@ |
||||
.footer{ |
||||
width : 100%; |
||||
background-color: rgb(80, 80, 80); |
||||
&-container{ |
||||
width : 100%; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
&__content{ |
||||
flex: 1; |
||||
padding-bottom: 40px; |
||||
.first{ |
||||
color: white; |
||||
flex: 1; |
||||
h1{ |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
p{ |
||||
margin-top: 8px; |
||||
font-size: calc(100vw / 130); |
||||
max-width: 80%; |
||||
} |
||||
& strong{ |
||||
font-size: calc(100vw / 120); |
||||
} |
||||
} |
||||
.second{ |
||||
flex: 0.75; |
||||
color: white; |
||||
h1{ |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
ul{ |
||||
list-style: none; |
||||
padding: 0px; |
||||
li{ |
||||
font-size: calc(100vw / 130); |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
} |
||||
&--box{ |
||||
margin-left: 15px; |
||||
padding-top: 40px; |
||||
justify-content: flex-start; |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
&__privacy{ |
||||
width : 100%; |
||||
justify-content: center; |
||||
color: white; |
||||
background-color: rgba(34, 34, 34, 0.316); |
||||
padding: 15px 0px; |
||||
p{ |
||||
font-size: calc(100vw / 130); |
||||
margin-bottom:0px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,39 @@ |
||||
import React, { Component } from 'react'; |
||||
import {Link} from 'react-router-dom'; |
||||
|
||||
import './index.scss'; |
||||
export default class Simple extends Component { |
||||
render() { |
||||
const { height, data } = this.props; |
||||
return( |
||||
<article className="slider-blog d-flex flex-column"
|
||||
style={{ |
||||
height: height, |
||||
}}> |
||||
<Link to={`/books/${data.id}`}> |
||||
<img src={data.image} alt={data.title} /> |
||||
<h1>{data.title}</h1> |
||||
<h2>{data.subTitle}</h2> |
||||
{ |
||||
data.price ?
|
||||
<div className="slider-blog__price d-flex justify-content-center"> |
||||
{ |
||||
data.oldPrice ?
|
||||
<div> |
||||
<div className="slider-blog__price--old d-flex"> |
||||
{data.oldPrice} تومان
|
||||
<span></span> |
||||
</div> |
||||
|
||||
</div> : null |
||||
} |
||||
<div>{data.price} تومان</div> |
||||
</div> : |
||||
<div className="slider-blog__notAvailabe">ناموجود</div> |
||||
} |
||||
</Link> |
||||
</article> |
||||
|
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
.slider-blog{ |
||||
margin : 10px; |
||||
padding: 10px 15px; |
||||
box-shadow: 0px 0px 5px rgb(200, 200, 200); |
||||
border-radius: 15px; |
||||
a{ |
||||
width : 100%; |
||||
text-decoration: none; |
||||
color: green; |
||||
&:hover{ |
||||
color: green; |
||||
} |
||||
img{ |
||||
width: 100%; |
||||
height: 300px; |
||||
border-radius: 10px; |
||||
} |
||||
h1{ |
||||
margin-top: 15px; |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
h2{ |
||||
margin-top: 10px; |
||||
font-size: calc(100vw / 95); |
||||
color: #afafaf; |
||||
} |
||||
} |
||||
&__notAvailabe{ |
||||
font-size: calc(100vw / 85); |
||||
width : 100%; |
||||
text-align: center; |
||||
color: #afafaf; |
||||
margin-top: 15px; |
||||
} |
||||
&__price{ |
||||
font-size: calc(100vw / 85); |
||||
width : 100%; |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
&--old{ |
||||
color: #afafaf; |
||||
position: relative; |
||||
margin-left: 10px; |
||||
align-items:center; |
||||
span{ |
||||
position: absolute; |
||||
left: 0px; |
||||
width : 100%; |
||||
height: 2px; |
||||
background-color: #afafafa3; |
||||
transform: rotate(-14deg); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,39 @@ |
||||
import React, { Component } from 'react'; |
||||
import {Link} from 'react-router-dom'; |
||||
|
||||
import './index.scss'; |
||||
export default class Simple extends Component { |
||||
render() { |
||||
const { height, data } = this.props; |
||||
return( |
||||
<article className="slider-simple d-flex flex-column"
|
||||
style={{ |
||||
height: height, |
||||
}}> |
||||
<Link to={`/books/${data.id}`}> |
||||
<img src={data.image} alt={data.title} /> |
||||
<h1>{data.title}</h1> |
||||
<h2>{data.subTitle}</h2> |
||||
{ |
||||
data.price ?
|
||||
<div className="slider-simple__price d-flex justify-content-center"> |
||||
{ |
||||
data.oldPrice ?
|
||||
<div> |
||||
<div className="slider-simple__price--old d-flex"> |
||||
{data.oldPrice} تومان
|
||||
<span></span> |
||||
</div> |
||||
|
||||
</div> : null |
||||
} |
||||
<div>{data.price} تومان</div> |
||||
</div> : |
||||
<div className="slider-simple__notAvailabe">ناموجود</div> |
||||
} |
||||
</Link> |
||||
</article> |
||||
|
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,54 @@ |
||||
.slider-simple{ |
||||
padding: 10px; |
||||
border-bottom: 1px solid #dfdfdf; |
||||
a{ |
||||
width : 100%; |
||||
text-decoration: none; |
||||
color: green; |
||||
&:hover{ |
||||
color: green; |
||||
} |
||||
img{ |
||||
width: 100%; |
||||
height: 300px; |
||||
border-top-left-radius: 15px; |
||||
border-top-right-radius: 15px; |
||||
} |
||||
h1{ |
||||
margin-top: 15px; |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
h2{ |
||||
margin-top: 10px; |
||||
font-size: calc(100vw / 95); |
||||
color: #afafaf; |
||||
} |
||||
} |
||||
&__notAvailabe{ |
||||
font-size: calc(100vw / 85); |
||||
width : 100%; |
||||
text-align: center; |
||||
color: #afafaf; |
||||
margin-top: 15px; |
||||
} |
||||
&__price{ |
||||
font-size: calc(100vw / 85); |
||||
width : 100%; |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
&--old{ |
||||
color: #afafaf; |
||||
position: relative; |
||||
margin-left: 10px; |
||||
align-items:center; |
||||
span{ |
||||
position: absolute; |
||||
left: 0px; |
||||
width : 100%; |
||||
height: 2px; |
||||
background-color: #afafafa3; |
||||
transform: rotate(-14deg); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import React from 'react'; |
||||
import TextField from '@material-ui/core/TextField'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
root: { |
||||
'& .MuiTextField-root': { |
||||
|
||||
width: '200px', |
||||
position : 'relative', |
||||
marginRight : 10, |
||||
}, |
||||
}, |
||||
})); |
||||
|
||||
export default function FormPropsTextFields(props) { |
||||
const classes = useStyles(); |
||||
|
||||
return ( |
||||
<form className={classes.root} noValidate autoComplete="off"> |
||||
<div> |
||||
<TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" /> |
||||
</div> |
||||
</form> |
||||
); |
||||
} |
||||
@ -0,0 +1,62 @@ |
||||
.membership { |
||||
width: 100%; |
||||
padding: 30px 20px; |
||||
box-shadow: 0px 0px 5px rgb(200, 200, 200); |
||||
border-radius: 7px; |
||||
justify-content: space-between; |
||||
align-items:center; |
||||
flex: 1; |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
h1{ |
||||
font-size: calc(100vw / 60); |
||||
margin-bottom: 0px; |
||||
color: green; |
||||
strong{ |
||||
color: white; |
||||
background-color: green; |
||||
padding:0px 5px; |
||||
} |
||||
} |
||||
p{ |
||||
margin-bottom: 0px; |
||||
} |
||||
|
||||
.MuiOutlinedInput-notchedOutline{ |
||||
top: 0px !important; |
||||
} |
||||
|
||||
.MuiOutlinedInput-input{ |
||||
padding : 20px 14px !important; |
||||
} |
||||
.MuiInputLabel-outlined{ |
||||
display : inline; |
||||
position: absolute; |
||||
right: 4px; |
||||
top: 12px; |
||||
transform: translate(0px, 0px) scale(1) !important; |
||||
} |
||||
.MuiInputLabel-shrink{ |
||||
display : inline; |
||||
position: absolute; |
||||
right: -23px; |
||||
top: -8px; |
||||
transform: translate(0px, 0px) scale(0.75) !important; |
||||
} |
||||
|
||||
label{ |
||||
background-color: white; |
||||
max-width: 120px; |
||||
text-align: center; |
||||
font-size: 14px !important; |
||||
} |
||||
|
||||
&__submit { |
||||
border: 0px; |
||||
background-color: green; |
||||
color: white; |
||||
border-radius: 5px; |
||||
padding : 7px 50px; |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue