reza added sample

master
Reza_ashrafi 3 years ago
parent 911dea17c0
commit f0f1ee4fd1
  1. 4
      src/AppRouter.js
  2. 2
      src/views/Home/HomeScroll/MyProduct/index.scss
  3. 29
      src/views/Home/HomeStatic/index.js
  4. 21
      src/views/Home/HomeStatic/index.scss
  5. 4
      src/views/Home/Navbar/Mobile/index.js
  6. 29
      src/views/Home/index.js
  7. 113
      src/views/Product/Sample/index.js
  8. 48
      src/views/Product/Sample/index.scss
  9. 5
      src/views/Product/index.js
  10. 8
      src/views/Product/index.scss

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

@ -1,6 +1,6 @@
.scroll-my-product{ .scroll-my-product{
padding: 10px; padding: 10px;
background-color: #ddd; background-color: #eee;
a{ a{
width : 100%; width : 100%;
text-decoration: none; text-decoration: none;

@ -39,6 +39,8 @@ export default class HomeStatic extends Component {
const Item = (props) => { const Item = (props) => {
return ( return (
<>
{window.innerWidth > 1000 ? (
<div <div
style={{ style={{
width: `${props.data.width}%`, width: `${props.data.width}%`,
@ -47,13 +49,28 @@ const Item = (props) => {
className="home-static__list--item d-flex" className="home-static__list--item d-flex"
> >
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<h2 style={{color : '#02733c'}}>{props.data.topText}</h2> <h2 style={{ color: "#02733c" }}>{props.data.topText}</h2>
<h2 style={{color : '#7dc241'}}>{props.data.bottomText}</h2> <h2 style={{ color: "#7dc241" }}>{props.data.bottomText}</h2>
</div> </div>
<img <img src={props.data.image} alt="عکس" />
src={props.data.image}
alt="عکس"
/>
</div> </div>
) : null}
{
window.innerWidth < 1000 ? (
<div
style={{
width: `${props.data.width}%`,
}}
className="home-static__list--item d-flex p-2 mobile-static"
>
<div className="d-flex flex-column">
<h1 style={{ color: "#02733c" }}>{props.data.topText}</h1>
<h2 style={{ color: "#7dc241" }}>{props.data.bottomText}</h2>
</div>
<img src={props.data.image} alt="عکس" />
</div>
) : null
}
</>
); );
}; };

@ -25,3 +25,24 @@
} }
} }
} }
.mobile-static{
div{
h1{
font-size: calc(100vw / 27);
letter-spacing: -1px;
margin-bottom: 5px;
}
h2{
font-size: calc(100vw / 35);
letter-spacing: -1px;
margin-bottom: 0px;
}
}
img {
// margin-right: 20px;
height: 50px;
width: 50px;
}
}

@ -6,8 +6,6 @@ import clsx from "clsx";
import logo from "../../../../assets/icons/logoMobile.png"; import logo from "../../../../assets/icons/logoMobile.png";
import hamburger from "../../../../assets/icons/hamburger.png"; import hamburger from "../../../../assets/icons/hamburger.png";
import ar from "../../../../assets/icons/ar.png";
import qr from "../../../../assets/icons/qr.png";
import search from "../../../../assets/icons/navbarSearch.png"; import search from "../../../../assets/icons/navbarSearch.png";
import "./index.scss"; import "./index.scss";
@ -75,8 +73,6 @@ export default function MobileNavbar(props) {
</div> </div>
<div className="mobile-navbar__left"> <div className="mobile-navbar__left">
<img src={search} alt="جستجو" /> <img src={search} alt="جستجو" />
<img src={ar} alt="واقعیت افزوده" className="m-2" />
<img src={qr} alt="کد QR" />
</div> </div>
<SwipeableDrawer <SwipeableDrawer
anchor="right" anchor="right"

@ -24,7 +24,8 @@ import book5 from '../../assets/images/book5.png';
import blog1 from '../../assets/images/blog1.png'; import blog1 from '../../assets/images/blog1.png';
import blog2 from '../../assets/images/blog2.png'; import blog2 from '../../assets/images/blog2.png';
import blog3 from '../../assets/images/blog3.png'; import blog3 from '../../assets/images/blog3.png';
import ar from "../../assets/icons/ar.png";
import qr from "../../assets/icons/qr.png";
import "./index.scss"; import "./index.scss";
export default class Home extends Component { export default class Home extends Component {
@ -71,9 +72,29 @@ export default class Home extends Component {
}, },
], ],
}, },
{ {
type: "static", type: window.innerWidth > 1000 ? '' : "static",
title: "",
height: 150,
data: [
{
image: qr,
width: 48,
link: "",
topText: 'QR خوان',
bottomText: 'توضیحات مختصر در این رابطه'
},
{
image: ar,
width: 48,
link: "",
topText: 'واقعیت افزوده',
bottomText: 'توضیحات مختصر در این رابطه'
},
],
},
{
type: window.innerWidth > 1000 ? "static" : "",
title: "", title: "",
height: 150, height: 150,
data: [ data: [
@ -502,7 +523,7 @@ const Identifier = (props) => {
data={props.item.data} data={props.item.data}
/> />
) : null} ) : null}
{props.item.type === "static" && window.innerWidth > 1000 ? ( {props.item.type === "static" ? (
<HomeStatic <HomeStatic
height={props.item.height} height={props.item.height}
title={props.item.title} title={props.item.title}

@ -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;
}
}
}
}
}

@ -1,4 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import {Link} from 'react-router-dom';
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
@ -30,8 +31,8 @@ export default class Product extends Component {
<h1>{product.title}</h1> <h1>{product.title}</h1>
<h2>{product.subTitle}</h2> <h2>{product.subTitle}</h2>
<div className="d-flex mt-3"> <div className="d-flex mt-3">
<button className="mobile-product__header--sampleButton">مطالعه نمومه کتاب</button> <Link to={`/products/${product.id}/sample`} className="mobile-product__header--sampleButton">مطالعه نمومه کتاب</Link>
<button className="mobile-product__header--purchase">خرید کتاب</button> <Link to={`/products/${product.id}/sample`} className="mobile-product__header--purchase">خرید کتاب</Link>
</div> </div>
</header> </header>
<div className="mobile-product__abstraction d-flex flex-column"> <div className="mobile-product__abstraction d-flex flex-column">

@ -23,25 +23,27 @@
font-size: calc(100vw / 28); font-size: calc(100vw / 28);
color: #6f7074; color: #6f7074;
} }
button{ a{
border: 0px; border: 0px;
font-family: numeralMedium; font-family: numeralMedium;
font-size: calc(100vw / 25); font-size: calc(100vw / 25);
padding: 15px 0px; padding: 15px 0px;
width: 150px; width: 150px;
text-align: center;
letter-spacing: -1px; letter-spacing: -1px;
text-decoration: none;
} }
&--purchase{ &--purchase{
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
background-color: #00cc69; background-color: #00cc69;
color: white; color: white !important;
} }
&--sampleButton{ &--sampleButton{
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
background-color: #efefef; background-color: #efefef;
color: #6f7074; color: #6f7074 !important;
} }
} }
&__abstraction{ &__abstraction{

Loading…
Cancel
Save