reza added QR

master
ravino 3 years ago
parent f0f1ee4fd1
commit 972912f961
  1. 6
      src/AppRouter.js
  2. 113
      src/views/Product/Sample/index.js
  3. 32
      src/views/QR/Links/index.js
  4. 34
      src/views/QR/Links/index.scss
  5. 22
      src/views/QR/PDF/index.js
  6. 23
      src/views/QR/PDF/index.scss
  7. 22
      src/views/QR/PowerPoint/index.js
  8. 23
      src/views/QR/PowerPoint/index.scss
  9. 22
      src/views/QR/VideoBox/index.js
  10. 19
      src/views/QR/VideoBox/index.scss
  11. 22
      src/views/QR/VoiceBox/index.js
  12. 24
      src/views/QR/VoiceBox/index.scss
  13. 180
      src/views/QR/index.js
  14. 26
      src/views/QR/index.scss

@ -8,7 +8,7 @@ import Contact from './views/Contact/index';
import About from './views/About/index';
import Products from './views/Products/index';
import Product from './views/Product/index';
import Sample from './views/Product/Sample/index';
import QR from './views/QR/index';
class AppRouter extends Component {
constructor(props) {
super(props);
@ -45,8 +45,8 @@ class AppRouter extends Component {
<Route exact path={'/products/:id'}>
<Product />
</Route>
<Route exact path={'/products/:id/sample'}>
<Sample />
<Route exact path={'/qr'}>
<QR />
</Route>
</Switch>
</Router>

@ -1,113 +0,0 @@
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,32 @@
import React from 'react';
import './index.scss';
export default function Links(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="links-box d-flex flex-column">
<h2>{props.data.title}</h2>
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-links-box d-flex flex-column">
<h2><span></span>لینکها</h2>
<ul>
{props.data.links.map((item,i) => (
<Item data={item} key={i} />
) )}
</ul>
</div> : null
}
</>
);
}
const Item = (props) => {
return(
<li><a href={props.data.link}>{props.data.title}</a></li>
);
}

@ -0,0 +1,34 @@
.mobile-links-box{
width: 100%;
border-radius: 10px;
background-color: #fffac948;
margin: 15px 0px;
text-decoration: none;
padding: 20px 10px;
h2{
font-family: numeralMedium;
font-size: calc(100vw / 32);
color: #72891edc;
padding: 5px;
span{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #72891e;
margin-left: 5px;
}
}
ul{
padding: 0px;
margin: 0px;
list-style: none;
padding-right: 15px;
li{
font-size: calc(100vw / 30);
a{
text-decoration: none;
color: #72891e;
}
}
}
}

@ -0,0 +1,22 @@
import React from 'react';
import './index.scss';
export default function PDF(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="pdf-box d-flex flex-column">
<h2>{props.data.title}</h2>
</div> : null
}
{
window.innerWidth < 1000 ?
<a href={props.data.file} download className="mobile-pdf-box d-flex flex-column">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</a> : null
}
</>
);
}

@ -0,0 +1,23 @@
.mobile-pdf-box{
width: 100%;
border-radius: 10px;
background-color:#ffa9a91e;
margin: 15px 0px;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
h2{
font-family: numeralMedium;
font-size: calc(100vw / 32);
color: #FF0808;
padding: 5px;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #ffa9a925;
margin-left: 5px;
}
}
}

@ -0,0 +1,22 @@
import React from 'react';
import './index.scss';
export default function PowerPoint(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="ppt-box d-flex flex-column">
<h2>{props.data.title}</h2>
</div> : null
}
{
window.innerWidth < 1000 ?
<a href={props.data.file} download className="mobile-ppt-box d-flex flex-column">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</a> : null
}
</>
);
}

@ -0,0 +1,23 @@
.mobile-ppt-box{
width: 100%;
border-radius: 10px;
background-color : #8dfaf61f;
margin: 15px 0px;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
h2{
font-family: numeralMedium;
font-size: calc(100vw / 32);
color: #0D9189;
padding: 5px;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #0D9189;
margin-left: 5px;
}
}
}

@ -0,0 +1,22 @@
import React from 'react';
import './index.scss';
export default function VideoBox(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="video-box d-flex flex-column">
<h2>{props.data.title}</h2>
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-video-box d-flex flex-column">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</div> : null
}
</>
);
}

@ -0,0 +1,19 @@
.mobile-video-box{
width: 100%;
border-radius: 10px;
background-color: #eee;
margin: 15px 0px;
height: calc(100vh / 4);
position: relative;
h2{
font-family: numeralMedium;
font-size: calc(100vw / 35);
color: #02733C;
padding: 5px;
background-color: #FFFFFF;
color: #4D4D4F;
position: absolute;
right: 10px;
top: 20px;
}
}

@ -0,0 +1,22 @@
import React from 'react';
import './index.scss';
export default function VoiceBox(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="voice-box d-flex flex-column">
<h2>{props.data.title}</h2>
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-voice-box d-flex flex-column">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</div> : null
}
</>
);
}

@ -0,0 +1,24 @@
.mobile-voice-box{
width: 100%;
border-radius: 10px;
background-color: #8dfac541;
padding: 10px 10px;
margin: 15px 0px;
h2{
font-family: numeralBold;
font-size: calc(100vw / 40);
color: #02733C;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #00CC69;
margin-left: 5px;
}
}
div{
width: 100%;
height: 40px;
background-color: #02733C;
}
}

@ -0,0 +1,180 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import VoiceBox from "./VoiceBox/index.js";
import VideoBox from "./VideoBox/index";
import PDF from './PDF/index';
import PowerPoint from './PowerPoint/index';
import Links from './Links/index';
import book2 from "../../assets/images/book2.png";
import './index.scss';
export default class QR extends Component {
render() {
const { QR } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="product-sample d-flex">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-qr d-flex flex-column">
<Navbar />
<header className="mobile-qr__header d-flex">
<div className="mobile-qr__header--right d-flex">
<img src={QR.image} alt={QR.title} />
</div>
<div className="mobile-qr__header--left d-flex flex-column">
<h1>{QR.title}</h1>
<h2>{QR.subTitle}</h2>
<div>
شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong> هستید.
</div>
<div>
پیشرفت شما در مطالعه کتاب به <span>{QR.sample.percent} درصد</span> رسیده است.
</div>
</div>
</header>
<div className="d-flex pt-3">
<div className="mobile-qr__buttons">
</div>
<div className="mobile-qr__content d-flex flex-column">
{
QR.data.map((item, i) => (
<Identifier data={item} />
))
}
</div>
</div>
</div>
</>
) : null}
</>
);
}
}
QR.defaultProps = {
QR: {
id: 1,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
date: new Date(),
sample: {
page: 67,
percent: 60,
},
data: [
{
type: 'h1',
text: 'خلاصه کتاب'
},
{
type: 'p',
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
},
{
type: 'h1',
text: 'خلاصه کتاب'
},
{
type: 'p',
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
},
{
type: 'voice',
title: 'استاد رضایی:توضیح در مورد درس آتشفشان',
file: null,
},
{
type: 'p',
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
},
{
type: 'video',
title: 'ویدئوی آزمایشی آتش فشان سرکه',
file: null
},
{
type: 'p',
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
},
{
type: 'ppt',
title: 'فایل پاورپوینت ارائه درس آتشفشان',
link: ''
},
{
type: 'pdf',
title: 'فایل پی دی اف ارائه درس آتشفشان',
link: ''
},
{
type: 'p',
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
},
{
type: 'links',
links: [
{
title: 'وبسایت آموزشی دانوین',
link: '',
},
{
title: 'وبسایت رسمی مدیریت راهبردی کشور',
link: ''
},
{
title: 'سازمان تبلیغات صنایع سبک',
link: ''
}
]
}
]
},
};
const Identifier = (props) => {
return(
<>
{
props.data.type === 'p' ?
<p>{props.data.text}</p> : null
}
{
props.data.type === 'h1' ?
<h1>{props.data.text}</h1> : null
}
{
props.data.type === 'voice'?
<VoiceBox data={props.data} /> : null
}
{
props.data.type === 'video'?
<VideoBox data={props.data} /> : null
}
{
props.data.type === 'pdf'?
<PDF data={props.data} /> : null
}
{
props.data.type === 'ppt'?
<PowerPoint data={props.data} /> : null
}
{
props.data.type === 'links'?
<Links data={props.data} /> : null
}
</>
);
}

@ -1,12 +1,13 @@
.mobile-product-sample{
.mobile-qr{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px 40px;
padding : 0px 0px 40px;
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
&__header{
padding: 0px 10px;
width: 100%;
&--right{
img{
@ -45,4 +46,25 @@
}
}
}
&__buttons{
width: 35px;
background-color: #eee;
}
&__content{
width: calc(100% - 35px);
padding: 0px 10px;
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;
}
}
}
Loading…
Cancel
Save