parent
911dea17c0
commit
f0f1ee4fd1
10 changed files with 253 additions and 30 deletions
@ -0,0 +1,113 @@ |
||||
import React, { Component } from "react"; |
||||
import Navbar from "../../Home/Navbar/index"; |
||||
import Footer from "../../Home/Footer/index"; |
||||
|
||||
import book2 from "../../../assets/images/book2.png"; |
||||
|
||||
import './index.scss'; |
||||
export default class Sample extends Component { |
||||
render() { |
||||
const { product } = this.props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<> |
||||
<div className="product-sample d-flex"> |
||||
<Navbar /> |
||||
</div> |
||||
<Footer /> |
||||
</> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<> |
||||
<div className="mobile-product-sample d-flex flex-column"> |
||||
<Navbar /> |
||||
<header className="mobile-product-sample__header d-flex"> |
||||
<div className="mobile-product-sample__header--right d-flex"> |
||||
<img src={product.image} alt={product.title} /> |
||||
</div> |
||||
<div className="mobile-product-sample__header--left d-flex flex-column"> |
||||
<h1>{product.title}</h1> |
||||
<h2>{product.subTitle}</h2> |
||||
<div> |
||||
شما در حال مطالعه <strong>صفحه {product.sample.page}</strong> هستید. |
||||
</div> |
||||
<div> |
||||
پیشرفت شما در مطالعه کتاب به <span>{product.sample.percent} درصد</span> رسیده است. |
||||
</div> |
||||
</div> |
||||
</header> |
||||
</div> |
||||
</> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
Sample.defaultProps = { |
||||
product: { |
||||
id: 1, |
||||
image: book2, |
||||
title: "منفجر کردن مغز خود را به ما بسپارید", |
||||
subTitle: "پایه ششم ابتدایی", |
||||
price: "39.000", |
||||
oldPrice: "59.000", |
||||
date: new Date(), |
||||
sample: { |
||||
page: 67, |
||||
percent: 60, |
||||
}, |
||||
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, |
||||
}, |
||||
], |
||||
}, |
||||
}; |
||||
@ -0,0 +1,48 @@ |
||||
.mobile-product-sample{ |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding : 0px 10px 40px; |
||||
direction: rtl; |
||||
padding-top: 70px; |
||||
overflow-x: hidden; |
||||
&__header{ |
||||
width: 100%; |
||||
&--right{ |
||||
img{ |
||||
height: 130px; |
||||
} |
||||
} |
||||
&--left{ |
||||
justify-content:center; |
||||
margin-right : 30px; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 25); |
||||
color: #7DC241; |
||||
letter-spacing: -1px; |
||||
} |
||||
h2{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 32); |
||||
color: #6F7074; |
||||
} |
||||
div{ |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 30); |
||||
color: #6F7074; |
||||
letter-spacing: -1px; |
||||
strong{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 30); |
||||
color: #05dfba; |
||||
} |
||||
span{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 30); |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue