reza added home page api

master
RezaAshrafi77 3 years ago
parent 94e8caa1ee
commit 1e1842d4fe
  1. 2
      src/Redux/actions/index.js
  2. 10
      src/Redux/actions/public.js
  3. 2
      src/Redux/reducers/index.js
  4. 14
      src/Redux/reducers/public.js
  5. BIN
      src/assets.rar
  6. BIN
      src/assets/IRANSans.rar
  7. 2
      src/views/Contact/index.js
  8. 64
      src/views/Home/HomeScroll/index.scss
  9. 84
      src/views/Home/HomeSlider/Blog/index.js
  10. 27
      src/views/Home/HomeSlider/Blog/index.scss
  11. 40
      src/views/Home/HomeSlider/Header/index.js
  12. 74
      src/views/Home/HomeSlider/Simple/index.js
  13. 43
      src/views/Home/HomeStatic/Flex/index.js
  14. 32
      src/views/Home/HomeStatic/Simple/index.js
  15. 56
      src/views/Home/HomeStatic/Vitrin/index.js
  16. 43
      src/views/Home/HomeStatic/index.js
  17. 1
      src/views/Home/Membership/index.scss
  18. 26
      src/views/Home/SingleBlog/index.js
  19. 786
      src/views/Home/index.js
  20. 1
      src/views/QR/Image/index.js
  21. 9
      src/views/QR/VideoBox/React-video-js-player/index.js
  22. 9
      src/views/QR/VideoBox/index.js

@ -2,7 +2,7 @@
export { default as chat } from "./chat.js";
// export { default as message } from './message.js';
// export { default as public } from './public.js';
export { default as publicApi } from "./public.js";
export { default as user } from "./user.js";
export { default as qr } from "./qr.js";
export { default as book } from "./book.js";

@ -1,3 +1,7 @@
import proxy from '../proxy';
export const otp = (data) => async (dispatch) =>
(await proxy.get('public/otp', data)).dispatch(dispatch);
import proxy from "../proxy";
const publicApi = {
getHomeData: (data, history) => async (dispatch) =>
await proxy.get("public/homePage", data, { history, dispatch }),
};
export default publicApi;

@ -2,7 +2,7 @@
export { default as chat } from "./chat.js";
export { default as message } from "./message.js";
export { default as public } from "./public.js";
export { default as publicApi } from "./public.js";
export { default as user } from "./user.js";
export { default as qr } from "./qr.js";
export { default as book } from "./book.js";

@ -1,11 +1,17 @@
const initialState = {
otp: null,
homeData: [],
loading: false,
error: null,
};
export default function publics(state = initialState, action) {
export default function publicApi(state = initialState, action) {
let { type, data } = action;
switch (type) {
case 'public/otp':
return { ...state, ...data };
case "public/homePage":
return { ...state, loading: false, error: null, homeData: data };
case "loading":
return { ...state, loading: true };
case "error":
return { ...state, loading: false, error: data.message };
default:
return state;
}

Binary file not shown.

Binary file not shown.

@ -129,7 +129,7 @@ export default class Contact extends Component {
</div>
</div>
<div className="mobile-contact__address--map d-flex align-items-center mt-3">
<Location />
{/* <Location /> */}
</div>
</div>
</div>

@ -1,35 +1,36 @@
.home-scroll {
margin: 20px 0px;
width: 100%;
&__header{
height : 50px;
&__header {
height: 50px;
width: 100%;
justify-content: space-between;
align-items: center;
padding : 0px 6px;
&--right{
padding: 0px 6px;
&--right {
position: relative;
h1{
h1 {
font-family: numeralBold;
letter-spacing: -1px;
}
span{
span {
position: absolute;
width: 40%;
height: 3px;
border-radius: 10px;
background-color: #7dc241;
bottom : 0px;
bottom: 0px;
right: 0px;
}
}
&--more{
span{
&--more {
cursor: pointer;
span {
color: #7dc241;
font-family: numeralMedium;
}
img{
img {
width: 15px;
height: 12px;
transform: rotate(90deg);
@ -38,53 +39,51 @@
align-items: center;
}
}
&__list{
height : 100%;
width : 100%;
&__list {
height: 100%;
width: 100%;
overflow-x: scroll;
transform : translateX(0px);
a{
transform: translateX(0px);
a {
margin: 0px 6px;
}
}
}
.mobile-home-scroll {
margin: 20px 0px;
width: 100%;
&__header{
height : 50px;
&__header {
height: 50px;
width: 100%;
justify-content: space-between;
align-items: center;
padding : 0px 6px;
&--right{
padding: 0px 6px;
&--right {
position: relative;
h1{
h1 {
font-size: calc(100vw / 30);
font-family: numeralBold;
letter-spacing: -1px;
}
span{
span {
position: absolute;
width: 40%;
height: 3px;
border-radius: 10px;
background-color: #7dc241;
bottom : 0px;
bottom: 0px;
right: 0px;
}
}
&--more{
span{
&--more {
span {
font-size: calc(100vw / 35);
color: #7dc241;
font-family: numeralMedium;
}
img{
img {
width: 15px;
height: 12px;
transform: rotate(90deg);
@ -93,14 +92,13 @@
align-items: center;
}
}
&__list{
height : 100%;
width : 100%;
&__list {
height: 100%;
width: 100%;
overflow-x: scroll;
transform : translateX(0px);
a{
transform: translateX(0px);
a {
margin: 0px 6px;
}
}
}

@ -1,54 +1,73 @@
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import React, { Component } from "react";
import { Link } from "react-router-dom";
import './index.scss';
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop : {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110,
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90,
}
}
},
};
export default class Simple extends Component {
render() {
const { height, data } = this.props;
return(
return (
<>
{
window.innerWidth > 1000 ?
<article className="slider-blog d-flex flex-column"
{window.innerWidth > 1000 ? (
<article
className="slider-blog d-flex flex-column"
style={{
height: height,
}}>
<div>
<img src={data.image} alt={data.title} />
}}
>
<Link to={data.link}>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title}
/>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
<div className="slider-blog__footer d-flex mt-3">
<div className="d-flex">
{/* <img src={} /> */}
<div className="d-flex flex-column">
<span style={{ fontSize: fontSize.desktop.span }}>مطالعه کامل در {data.duration}</span>
<span style={{ fontSize: fontSize.desktop.span }}>تاریخ انتشار {data.data}</span>
<span style={{ fontSize: fontSize.desktop.span }}>
مطالعه کامل در {data.duration}
</span>
<span style={{ fontSize: fontSize.desktop.span }}>
تاریخ انتشار {data.data}
</span>
</div>
</div>
<Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>{data.buttonText}</Link>
<Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>
{data.buttonText}
</Link>
</div>
<span className="slider-blog__category" style={{backgroundColor: data.category.color, fontSize: fontSize.desktop.span}}>{data.category.name}</span>
</div>
</article> : null
}
{
window.innerWidth < 1000 ?
<article className="mobile-slider-blog d-flex flex-column"
<span
className="slider-blog__category"
style={{
backgroundColor: data.category.color,
fontSize: fontSize.desktop.span,
}}
>
{data.category.name}
</span>
</Link>
</article>
) : null}
{window.innerWidth < 1000 ? (
<article
className="mobile-slider-blog d-flex flex-column"
style={{
height: height,
}}>
<div>
}}
>
<Link to={data.link}>
<img src={data.image} alt={data.title} />
<h1>{data.title}</h1>
<h2>{data.subTitle}</h2>
@ -62,13 +81,16 @@ export default class Simple extends Component {
</div>
<Link to={data.link}>{data.buttonText}</Link>
</div>
<span className="mobile-slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span>
</div>
</article> : null
}
<span
className="mobile-slider-blog__category"
style={{ backgroundColor: data.category.color }}
>
{data.category.name}
</span>
</Link>
</article>
) : null}
</>
);
}
}

@ -1,4 +1,5 @@
.slider-blog {
cursor: pointer;
margin: 10px;
padding: 10px 15px;
box-shadow: 0px 0px 5px rgb(200, 200, 200);
@ -7,6 +8,10 @@
text-decoration: none;
position: relative;
max-width: 300px;
a {
text-decoration: none;
color: #4e4e4e;
}
img {
width: 100%;
height: 200px;
@ -22,7 +27,7 @@
margin-top: 5px;
color: #a5a5a5;
}
&__category{
&__category {
font-family: numeralMedium;
position: absolute;
top: 20px;
@ -34,8 +39,8 @@
&__footer {
width: 100%;
align-items:center;
justify-content:space-between;
align-items: center;
justify-content: space-between;
a {
font-family: numeralMedium;
padding: 6px 12px;
@ -43,11 +48,11 @@
color: #02733c;
text-decoration: none;
border-radius: 5px;
&:hover{
&:hover {
color: #02733c;
}
}
span{
span {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
@ -55,7 +60,6 @@
}
}
.mobile-slider-blog {
margin: 10px;
padding: 5px 8px;
@ -64,6 +68,7 @@
width: 100%;
text-decoration: none;
position: relative;
cursor: pointer;
img {
width: 100%;
height: 150px;
@ -81,7 +86,7 @@
font-size: calc(100vw / 50);
color: #a5a5a5;
}
&__category{
&__category {
font-family: numeralMedium;
position: absolute;
top: 10px;
@ -94,8 +99,8 @@
&__footer {
width: 100%;
align-items:center;
justify-content:space-between;
align-items: center;
justify-content: space-between;
a {
font-family: numeralMedium;
padding: 6px 12px;
@ -104,11 +109,11 @@
text-decoration: none;
border-radius: 5px;
font-size: calc(100vw / 50);
&:hover{
&:hover {
color: #02733c;
}
}
span{
span {
font-family: numeralLight;
font-size: calc(100vw / 50);
color: #a5a5a5;

@ -1,14 +1,13 @@
import React, { Component } from "react";
import {Link} from 'react-router-dom';
import { Link } from "react-router-dom";
import './index.scss';
import "./index.scss";
export default class Header extends Component {
render() {
const { height, data } = this.props;
return (
<>
{
window.innerWidth > 1000 ?
{window.innerWidth > 1000 ? (
<div
style={{
minWidth: `${data.width}`,
@ -16,8 +15,14 @@ export default class Header extends Component {
}}
className="slider-header d-flex"
>
<div className="slider-header__right d-flex" style={{ backgroundColor: data.backgroundColor }}>
<img src={data.image} alt={data.title} />
<div
className="slider-header__right d-flex"
style={{ backgroundColor: data.backgroundColor }}
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title}
/>
</div>
<div
style={{ backgroundColor: data.backgroundColor }}
@ -27,10 +32,9 @@ export default class Header extends Component {
<h2>{data.subTitle}</h2>
<Link to={data.link}>{data.buttonText}</Link>
</div>
</div> : null
}
{
window.innerWidth < 1000 ?
</div>
) : null}
{window.innerWidth < 1000 ? (
<div
style={{
minWidth: `${data.width}`,
@ -38,8 +42,14 @@ export default class Header extends Component {
}}
className="mobile-slider-header d-flex"
>
<div className="mobile-slider-header__right d-flex" style={{ backgroundColor: data.backgroundColor }}>
<img src={data.image} alt={data.title} />
<div
className="mobile-slider-header__right d-flex"
style={{ backgroundColor: data.backgroundColor }}
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title}
/>
</div>
<div
style={{ backgroundColor: data.backgroundColor }}
@ -49,11 +59,9 @@ export default class Header extends Component {
<h2>{data.subTitle}</h2>
<Link to={data.link}>{data.buttonText}</Link>
</div>
</div> : null
}
</div>
) : null}
</>
);
}
}

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import React, { Component } from "react";
import { Link } from "react-router-dom";
import './index.scss';
import "./index.scss";
const maxDesktopSize = 1250;
@ -9,7 +9,8 @@ const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65,
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
notAvailable: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
notAvailable:
window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
available: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
},
};
@ -17,39 +18,54 @@ const fontSize = {
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={`/products/${data.id}`}>
<img src={data.image} alt={data.title} />
<h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
return (
<article
className="slider-simple d-flex flex-column"
style={
{
data.price !== undefined ?
data.price ?
// height: height,
}
}
>
<Link to={`/products/${data.id}`}>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title}
/>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
{data.price !== undefined ? (
data.price ? (
<div className="slider-simple__price d-flex justify-content-center">
{
data.oldPrice ?
{data.oldPrice ? (
<div>
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--old d-flex">
<div
style={{ fontSize: fontSize.desktop.available }}
className="slider-simple__price--old d-flex"
>
{data.oldPrice} تومان
<span></span>
</div>
</div> : null
}
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div>
</div> :
<div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div>
: null
}
</div>
) : null}
<div
style={{ fontSize: fontSize.desktop.available }}
className="slider-simple__price--price"
>
{data.price} تومان
</div>
</div>
) : (
<div
style={{ fontSize: fontSize.desktop.notAvailable }}
className="slider-simple__notAvailabe"
>
ناموجود
</div>
)
) : null}
</Link>
</article>
);
}
}

@ -1,5 +1,5 @@
import React from 'react';
import {Link} from 'react-router-dom';
import React from "react";
import { Link } from "react-router-dom";
const maxMobileSize = 550;
@ -8,30 +8,41 @@ const fontSize = {
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 35,
};
export default function Flex(props){
const {data} = props;
export default function Flex(props) {
const { data } = props;
const style = {
background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
flex: data.flex,
margin: 5,
borderRadius: 10,
color: data.color,
}
return(
<Link to={data.link} className="mobile-home-static__flex d-flex align-items-center" style={style}>
};
return (
<Link
to={data.link}
className="mobile-home-static__flex d-flex align-items-center"
style={style}
>
<div className="mobile-home-static__flex--right d-flex flex-column">
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
{
data.badge ?
<span className="d-flex justify-content-center" style={{ fontSize: fontSize.span, backgroundColor: '#F1F907', color: '#4D4D4F'}}>{data.badge}</span> : null
}
{data.badge ? (
<span
className="d-flex justify-content-center"
style={{
fontSize: fontSize.span,
backgroundColor: "#F1F907",
color: "#4D4D4F",
}}
>
{data.badge}
</span>
) : null}
<span style={{ fontSize: fontSize.span }}>{data.subTitle}</span>
</div>
<img src={data.imageUrl} alt={data.title} />
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title}
/>
</Link>
);
}

@ -1,5 +1,5 @@
import React from 'react';
import {Link} from 'react-router-dom';
import React from "react";
import { Link } from "react-router-dom";
const maxMobileSize = 550;
@ -8,35 +8,35 @@ const fontSize = {
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
};
export default function Simple(props){
const {data} = props;
export default function Simple(props) {
const { data } = props;
const parentStyle = {
// backgroundImage: `url('${data.imageUrl}')`,
background: `url('${data.imageUrl}')`,
background: `url('${`https://dnvn.ir/api/v1/file/${data.fileId}`}')`,
flex: data.flex,
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%",
margin: 5,
borderRadius: 10,
color: data.color,
textAlign: 'center',
textAlign: "center",
};
const childStyle = {
background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
borderRadius: 10,
justifyContent: data.justifyContent,
alignItems: data.alignItems
alignItems: data.alignItems,
};
return(
<Link to={data.link} className="mobile-home-static__simple d-flex" style={parentStyle}>
return (
<Link
to={data.link}
className="mobile-home-static__simple d-flex"
style={parentStyle}
>
<div style={childStyle} className="d-flex">
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
</div>
</Link>
);
}

@ -1,5 +1,5 @@
import React from 'react';
import {Link} from "react-router-dom";
import React from "react";
import { Link } from "react-router-dom";
const maxMobileSize = 550;
@ -8,47 +8,49 @@ const fontSize = {
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 34,
};
export default function Vitrin(props){
const {data} = props;
export default function Vitrin(props) {
const { data } = props;
const style = {
// backgroundImage: `url('${data.imageUrl}')`,
background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
flex: data.flex,
backgroundRepeat: 'no-repeat',
backgroundSize: '100%',
backgroundOpacity: '60%',
backgroundRepeat: "no-repeat",
backgroundSize: "100%",
backgroundOpacity: "60%",
margin: 5,
borderRadius: 10,
color: data.color,
};
return(
<div className="mobile-home-static__vitrin d-flex flex-column" style={style}>
return (
<div
className="mobile-home-static__vitrin d-flex flex-column"
style={style}
>
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
<div className="d-flex align-items-end">
{
data.books.map((item,i) => (
{data.books.map((item, i) => (
<Item data={item} key={i} />
))
}
<Link to={data.link} style={{fontSize: fontSize.span }}>مشاهده بیشتر</Link>
))}
<Link to={data.link} style={{ fontSize: fontSize.span }}>
مشاهده بیشتر
</Link>
</div>
</div>
);
}
const Item = (props) => {
const {data} = props;
return(
<Link to={'/products/'+ data.id} className="mobile-home-static__vitrin--product d-flex">
<img src={data.imageUrl} alt={'عکس محصول'} />
const { data } = props;
return (
<Link
to={"/products/" + data.id}
className="mobile-home-static__vitrin--product d-flex"
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={"عکس محصول"}
/>
</Link>
);
}
};

@ -17,8 +17,7 @@ export default class HomeStatic extends Component {
const { data, height, title, designType } = this.props;
return (
<>
{
window.innerWidth > 1000 ?
{window.innerWidth > 1000 ? (
<section
className={
title ? "home-static d-flex flex-column" : "home-static d-flex"
@ -45,23 +44,15 @@ export default class HomeStatic extends Component {
<Item data={item} height={height} key={i} />
))}
</div>
</section> : null
}
{
window.innerWidth < 1000 ?
<section
className="mobile-home-static d-flex"
>
{
data.map((item,i) => (
<Identifier
data={item}
key={i}
/>
))
}
</section> : null
}
</section>
) : null}
{window.innerWidth < 1000 ? (
<section className="mobile-home-static d-flex">
{data.map((item, i) => (
<Identifier data={item} key={i} />
))}
</section>
) : null}
</>
);
}
@ -79,13 +70,19 @@ const Item = (props) => {
className="home-static__list--item d-flex"
>
<div className="d-flex flex-column">
<h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>{props.data.topText}</h2>
<h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>{props.data.bottomText}</h2>
<h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>
{props.data.topText}
</h2>
<h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>
{props.data.bottomText}
</h2>
</div>
<img src={props.data.image} alt="عکس" />
<img
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
alt="عکس"
/>
</div>
) : null}
</>
);
};

@ -57,6 +57,7 @@
background-color: white;
text-align: center;
font-size: 14px !important;
width: fit-content !important;
}
&__submit {

@ -1,5 +1,5 @@
import React, { Component } from "react";
import {Link} from 'react-router-dom';
import { Link } from "react-router-dom";
import "./index.scss";
@ -17,26 +17,22 @@ export default class SingleBlog extends Component {
render() {
const { height, data, direction } = this.props;
return (
<div
style={{ height: height }}
className="single-blog d-flex"
>
<div style={{ height: height }} className="single-blog d-flex">
<div className="single-blog__right d-flex flex-column justify-content-center">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<p style={{fontSize: fontSize.desktop.p }}>{data.subTitle}</p>
<Link style={{fontSize : fontSize.desktop.a }} to={data.link}>
<p style={{ fontSize: fontSize.desktop.p }}>{data.subTitle}</p>
<Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>
{data.buttonText}
</Link>
</div>
<div className="single-blog__left d-flex">
{
data.image ?
<img src={data.image} alt={data.title} /> : null
}
{
data.video ?
<video sourcce={data.video} /> : null
}
{data.fileId ? (
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title}
/>
) : null}
{data.video ? <video sourcce={data.video} /> : null}
</div>
</div>
);

@ -1,4 +1,6 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";
import Navbar from "./Navbar";
import HomeHeader from "./HomeHeader/index";
@ -9,40 +11,46 @@ import HomeSlider from "./HomeSlider/index";
import HomeSearch from "./HomeSearch/index";
import Membership from "./Membership/index";
import SingleBlog from "./SingleBlog/index";
import Loader from "~/components/Loader/index";
import pic1 from "~/assets/images/pic1.png";
import pic from "~/assets/images/pic.png";
import online from "~/assets/icons/online-education.png";
import chemistry from "~/assets/icons/chemistry.png";
import calculator from "~/assets/icons/calculator.png";
import homework from "~/assets/icons/homework.png";
import sciense_6 from "~/assets/images/sciense-6.png";
import chemistry_10 from "~/assets/images/chemistry-10.png";
import sciense_8 from "~/assets/images/sciense-8.png";
import sciense_9 from "~/assets/images/sciense-9.png";
import zist_10 from "~/assets/images/zist-10.png";
import blog1 from "~/assets/images/blog1.png";
import blog2 from "~/assets/images/blog2.png";
import blog3 from "~/assets/images/blog3.png";
import ar from "~/assets/icons/qr.svg";
import qr from "~/assets/icons/qr.svg";
import myBook from "~/assets/images/myBook.png";
import homeBlog from "~/assets/images/homeBlog.png";
import bookActivation from "~/assets/images/bookActivating.png";
import home_chat from "~/assets/icons/home_chat.png";
import home_ar from "~/assets/icons/home_ar(2).png";
// import pic1 from "~/assets/images/pic1.png";
// import pic from "~/assets/images/pic.png";
// import online from "~/assets/icons/online-education.png";
// import chemistry from "~/assets/icons/chemistry.png";
// import calculator from "~/assets/icons/calculator.png";
// import homework from "~/assets/icons/homework.png";
// import sciense_6 from "~/assets/images/sciense-6.png";
// import chemistry_10 from "~/assets/images/chemistry-10.png";
// import sciense_8 from "~/assets/images/sciense-8.png";
// import sciense_9 from "~/assets/images/sciense-9.png";
// import zist_10 from "~/assets/images/zist-10.png";
// import blog1 from "~/assets/images/blog1.png";
// import blog2 from "~/assets/images/blog2.png";
// import blog3 from "~/assets/images/blog3.png";
// import ar from "~/assets/icons/qr.svg";
// import qr from "~/assets/icons/qr.svg";
// import myBook from "~/assets/images/myBook.png";
// import homeBlog from "~/assets/images/homeBlog.png";
// import bookActivation from "~/assets/images/bookActivating.png";
// import home_chat from "~/assets/icons/home_chat.png";
// import home_ar from "~/assets/icons/home_ar(2).png";
import "./index.scss";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {};
class Home extends Component {
componentDidMount() {
if (window.innerWidth < 1000) {
this.props.getHomeData({ device: 2 });
} else {
this.props.getHomeData({ device: 1 });
}
}
render() {
const { homeData, mobileData } = this.props;
const { homeData, loading } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
!loading ? (
<>
<div className="home d-flex flex-column">
<Navbar page={"home"} />
@ -52,22 +60,47 @@ export default class Home extends Component {
</div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
{window.innerWidth < 1000 ? (
!loading ? (
<>
<div className="mobile-home d-flex flex-column">
<Navbar page={"home"} />
{mobileData.map((item, i) => (
{homeData.map((item, i) => (
<Identifier item={item} key={i} />
))}
</div>
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
</>
);
}
}
export default connect(
(state) => ({
homeData: state.publicApi.homeData,
loading: state.publicApi.loading,
}),
{ getHomeData: publicApi.getHomeData }
)(Home);
const Identifier = (props) => {
return (
<>
@ -121,702 +154,3 @@ const Identifier = (props) => {
</>
);
};
Home.defaultProps = {
mobileData: [
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 203,
design: "header",
number: 1,
data: [
{
id: 0,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 1,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 2,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: qr,
backgroundColor: {
first: "#2070CBED",
second: "#2070CBED",
angle: "180deg",
},
design: "flex",
title: "QR خوان",
subTitle: "در صفحات کتاب هوشمند",
link: "/qr-scan",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
{
id: 1,
imageUrl: home_ar,
backgroundColor: {
first: "#09DA76",
second: "#056D3B",
angle: "230deg",
},
design: "flex",
title: "واقعیت افزوده",
subTitle: "توضیحات مختصر در این رابطه",
link: "/ar",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: home_chat,
backgroundColor: {
first: "#0AB81B",
second: "#6CFF61",
angle: "110deg",
},
design: "flex",
title: "دانوینی ها",
subTitle: "",
link: "/chatroom",
badge: "5 پیام جدید",
flex: 1.6,
fontSize: "normal",
color: "white",
},
{
id: 1,
imageUrl: myBook,
backgroundColor: {
first: "#9446FCaa",
second: "#9446FCaa",
angle: "180deg",
},
design: "simple",
title: "کتابهای من",
subTitle: "",
justifyContent: "flex-start",
alignItems: "center",
link: "/mybooks",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: homeBlog,
backgroundColor: {
first: "#39BF55",
second: "#39BF4B55",
angle: "110deg",
},
design: "simple",
title: "بلاگ",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/blog",
badge: "",
flex: 1.2,
fontSize: "normal",
color: "white",
},
{
id: 1,
backgroundColor: {
first: "#5DBEFF",
second: "#0483D9",
angle: "180deg",
},
design: "vitrin",
title: "فروشگاه",
subTitle: "",
justifyContent: "flex-start",
alignItems: "center",
books: [
{ id: 0, imageUrl: sciense_6 },
{ id: 1, imageUrl: chemistry_10 },
{ id: 2, imageUrl: sciense_8 },
],
link: "/products",
badge: "",
flex: 2,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
data: [
{
id: 0,
design: "3d",
flex: 1,
subData: [
{
id: 0,
imageUrl: "",
backgroundColor: {
first: "#FC365F",
second: "#7E1B30",
angle: "254deg",
},
design: "simple",
title: "پیشتیبانی",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/contact",
badge: "",
flex: 1,
fontSize: "normal",
color: "white",
},
{
id: 1,
imageUrl: "",
backgroundColor: {
first: "#FFCC00",
second: "#FF9800",
angle: "105deg",
},
design: "simple",
title: "پروفایل",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/profile",
badge: "",
flex: 1,
fontSize: "normal",
color: "white",
},
],
},
{
id: 1,
imageUrl: bookActivation,
backgroundColor: {
first: "#03FCDA7F",
second: "#03FCDA7F",
angle: "180deg",
},
design: "simple",
title: "فعال سازی کتاب",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/activation",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
],
homeData: [
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 233,
design: "header",
number: 1,
data: [
{
id: 0,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 1,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 2,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
],
},
{
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: "",
height: 150,
data: [
{
image: online,
width: 24,
link: "",
topText: "دسترسی به محتوای آموزشی",
bottomText: "از تمامی دستگاهها",
},
{
image: chemistry,
width: 24,
link: "",
topText: " به صورت زنده و جالب انگیز",
bottomText: "آزمایش انجام دهید",
},
{
image: calculator,
width: 24,
link: "",
topText: "به صرفه تر هزینه کنید",
bottomText: "با خرید یکی دوتا ببرید",
},
{
image: homework,
width: 24,
link: "",
topText: "به صورت کاملا تعاملی",
bottomText: "درسهای خود را یاد بگیرید",
},
],
},
{
type: "search",
data: ["همه", "پرفروش"],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "کتابهای من",
moreText: "لیست کتابها",
height: window.innerWidth > 1000 ? 340 : 270,
design: window.innerWidth > 1000 ? "simple" : "myProduct",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
},
],
},
{
type: window.innerWidth < 1000 ? "scroll" : "",
title: "موضوعات",
moreText: "تمام موضوعات",
design: "subjects",
number: 4,
data: [
{ id: 0, name: "علوم طبیعی", backgroundColor: "yellow" },
{ id: 1, name: "شیمی الی", backgroundColor: "red" },
{ id: 2, name: "زمین شناسی", backgroundColor: "blue" },
{ id: 3, name: "ریاضیات", backgroundColor: "purple" },
],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "پرفروشترین کتابهای دانوین",
moreText: "لیست کتابها",
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "simple" : "product",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "جدیدترین کتابهای دانوین",
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "tab" : "product",
number: window.innerWidth > 1000 ? 4 : 3.5,
moreText: "لیست کتابها",
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
{
type: "singleBlog",
height: 350,
direction: "rtl",
data: {
id: 0,
image: pic,
video: null,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
link: "",
buttonText: "اطلاعات بیشتر",
},
},
{
type: "slider",
title: "بلاگ",
height: "",
design: "blog",
number: window.innerWidth > 1000 ? 3 : 2,
data: [
{
id: 0,
image: blog1,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
date: new Date(),
link: "",
buttonText: "ادامه مطلب",
category: { name: "علمی تخیلی", color: "red" },
duration: "۲۰ دقیقه",
},
{
id: 1,
image: blog2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
date: new Date(),
link: "",
buttonText: "ادامه مطلب",
category: { name: "تاریخی", color: "blue" },
duration: "۲۰ دقیقه",
},
{
id: 2,
image: blog3,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
link: "",
buttonText: "ادامه مطلب",
category: { name: "ورزشی", color: "green" },
duration: "۲۰ دقیقه",
},
{
id: 3,
image: pic,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
link: "",
buttonText: "ادامه مطلب",
category: { name: "سیاسی", color: "purple" },
duration: "۲۰ دقیقه",
},
],
},
{
type: "membership",
},
],
};

@ -3,7 +3,6 @@ import React, { Component } from "react";
import "./index.scss";
export default function QRImage(props) {
const list = props.data.fileIds.split(",");
console.log(list);
return (
<>
{window.innerWidth < 1000 ? (

@ -7,7 +7,7 @@ class VideoApp extends Component {
player = {};
state = {
video: {
src: film,
src: `https://dnvn.ir/api/v1/file/${this.props.fileId}`,
},
};
@ -42,8 +42,8 @@ class VideoApp extends Component {
render() {
return (
<div style={{ width: '100%', height: '100%' }}>
<VideoPlayer
// <div style={{ width: "100%", height: "100%" }}>
<video
controls={true}
src={this.state.video.src}
onReady={this.onPlayerReady.bind(this)}
@ -53,8 +53,9 @@ class VideoApp extends Component {
onSeeking={this.onVideoSeeking.bind(this)}
onSeeked={this.onVideoSeeked.bind(this)}
onEnd={this.onVideoEnd.bind(this)}
type="video/mp4"
/>
</div>
// </div>
);
}
}

@ -5,6 +5,7 @@ import ReactVideoJsPlayer from "./React-video-js-player/index";
import "./index.scss";
export default function VideoBox(props) {
const { data } = props;
return (
<>
{window.innerWidth > 1000 ? (
@ -14,18 +15,18 @@ export default function VideoBox(props) {
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
{data.title}
</h2>
<ReactVideoJsPlayer />
<ReactVideoJsPlayer fileId={data.fileIds} />
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-video-box d-flex flex-column" id="video">
<h2 className="d-flex align-items-center">
<span></span>
{props.data.title}
{data.title}
</h2>
<ReactVideoJsPlayer />
<ReactVideoJsPlayer fileId={data.fileIds} />
</div>
) : null}
</>

Loading…
Cancel
Save