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. 70
      src/views/Home/HomeScroll/index.scss
  9. 122
      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. 78
      src/views/Home/HomeSlider/Simple/index.js
  13. 45
      src/views/Home/HomeStatic/Flex/index.js
  14. 34
      src/views/Home/HomeStatic/Simple/index.js
  15. 60
      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. 814
      src/views/Home/index.js
  20. 1
      src/views/QR/Image/index.js
  21. 29
      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 chat } from "./chat.js";
// export { default as message } from './message.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 user } from "./user.js";
export { default as qr } from "./qr.js"; export { default as qr } from "./qr.js";
export { default as book } from "./book.js"; export { default as book } from "./book.js";

@ -1,3 +1,7 @@
import proxy from '../proxy'; import proxy from "../proxy";
export const otp = (data) => async (dispatch) => const publicApi = {
(await proxy.get('public/otp', data)).dispatch(dispatch); 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 chat } from "./chat.js";
export { default as message } from "./message.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 user } from "./user.js";
export { default as qr } from "./qr.js"; export { default as qr } from "./qr.js";
export { default as book } from "./book.js"; export { default as book } from "./book.js";

@ -1,11 +1,17 @@
const initialState = { 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; let { type, data } = action;
switch (type) { switch (type) {
case 'public/otp': case "public/homePage":
return { ...state, ...data }; return { ...state, loading: false, error: null, homeData: data };
case "loading":
return { ...state, loading: true };
case "error":
return { ...state, loading: false, error: data.message };
default: default:
return state; return state;
} }

Binary file not shown.

Binary file not shown.

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

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

@ -1,74 +1,96 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import './index.scss'; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop : { desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 80, h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110, span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110,
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90, a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90,
} },
} };
export default class Simple extends Component { export default class Simple extends Component {
render() { render() {
const { height, data } = this.props; const { height, data } = this.props;
return( return (
<> <>
{ {window.innerWidth > 1000 ? (
window.innerWidth > 1000 ? <article
<article className="slider-blog d-flex flex-column" className="slider-blog d-flex flex-column"
style={{ style={{
height: height, height: height,
}}> }}
<div> >
<img src={data.image} alt={data.title} /> <Link to={data.link}>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1> <img
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2> src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
<div className="slider-blog__footer d-flex mt-3"> alt={data.title}
<div className="d-flex"> />
{/* <img src={} /> */} <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<div className="d-flex flex-column"> <h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
<span style={{ fontSize: fontSize.desktop.span }}>مطالعه کامل در {data.duration}</span> <div className="slider-blog__footer d-flex mt-3">
<span style={{ fontSize: fontSize.desktop.span }}>تاریخ انتشار {data.data}</span> <div className="d-flex">
</div> {/* <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>
</div> </div>
<Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>{data.buttonText}</Link>
</div> </div>
<span className="slider-blog__category" style={{backgroundColor: data.category.color, fontSize: fontSize.desktop.span}}>{data.category.name}</span> <Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>
{data.buttonText}
</Link>
</div> </div>
</article> : null <span
} className="slider-blog__category"
{ style={{
window.innerWidth < 1000 ? backgroundColor: data.category.color,
<article className="mobile-slider-blog d-flex flex-column" fontSize: fontSize.desktop.span,
}}
>
{data.category.name}
</span>
</Link>
</article>
) : null}
{window.innerWidth < 1000 ? (
<article
className="mobile-slider-blog d-flex flex-column"
style={{ style={{
height: height, height: height,
}}> }}
<div> >
<img src={data.image} alt={data.title} /> <Link to={data.link}>
<h1>{data.title}</h1> <img src={data.image} alt={data.title} />
<h2>{data.subTitle}</h2> <h1>{data.title}</h1>
<div className="mobile-slider-blog__footer d-flex mt-3"> <h2>{data.subTitle}</h2>
<div className="d-flex"> <div className="mobile-slider-blog__footer d-flex mt-3">
{/* <img src={} /> */} <div className="d-flex">
<div className="d-flex flex-column"> {/* <img src={} /> */}
<span>مطالعه کامل در {data.duration}</span> <div className="d-flex flex-column">
<span>تاریخ انتشار {data.data}</span> <span>مطالعه کامل در {data.duration}</span>
</div> <span>تاریخ انتشار {data.data}</span>
</div> </div>
<Link to={data.link}>{data.buttonText}</Link>
</div> </div>
<span className="mobile-slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span> <Link to={data.link}>{data.buttonText}</Link>
</div> </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 { .slider-blog {
cursor: pointer;
margin: 10px; margin: 10px;
padding: 10px 15px; padding: 10px 15px;
box-shadow: 0px 0px 5px rgb(200, 200, 200); box-shadow: 0px 0px 5px rgb(200, 200, 200);
@ -7,6 +8,10 @@
text-decoration: none; text-decoration: none;
position: relative; position: relative;
max-width: 300px; max-width: 300px;
a {
text-decoration: none;
color: #4e4e4e;
}
img { img {
width: 100%; width: 100%;
height: 200px; height: 200px;
@ -22,7 +27,7 @@
margin-top: 5px; margin-top: 5px;
color: #a5a5a5; color: #a5a5a5;
} }
&__category{ &__category {
font-family: numeralMedium; font-family: numeralMedium;
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -34,8 +39,8 @@
&__footer { &__footer {
width: 100%; width: 100%;
align-items:center; align-items: center;
justify-content:space-between; justify-content: space-between;
a { a {
font-family: numeralMedium; font-family: numeralMedium;
padding: 6px 12px; padding: 6px 12px;
@ -43,11 +48,11 @@
color: #02733c; color: #02733c;
text-decoration: none; text-decoration: none;
border-radius: 5px; border-radius: 5px;
&:hover{ &:hover {
color: #02733c; color: #02733c;
} }
} }
span{ span {
font-family: numeralLight; font-family: numeralLight;
color: #a5a5a5; color: #a5a5a5;
letter-spacing: -1px; letter-spacing: -1px;
@ -55,7 +60,6 @@
} }
} }
.mobile-slider-blog { .mobile-slider-blog {
margin: 10px; margin: 10px;
padding: 5px 8px; padding: 5px 8px;
@ -64,6 +68,7 @@
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 150px; height: 150px;
@ -81,7 +86,7 @@
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
color: #a5a5a5; color: #a5a5a5;
} }
&__category{ &__category {
font-family: numeralMedium; font-family: numeralMedium;
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -94,8 +99,8 @@
&__footer { &__footer {
width: 100%; width: 100%;
align-items:center; align-items: center;
justify-content:space-between; justify-content: space-between;
a { a {
font-family: numeralMedium; font-family: numeralMedium;
padding: 6px 12px; padding: 6px 12px;
@ -104,11 +109,11 @@
text-decoration: none; text-decoration: none;
border-radius: 5px; border-radius: 5px;
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
&:hover{ &:hover {
color: #02733c; color: #02733c;
} }
} }
span{ span {
font-family: numeralLight; font-family: numeralLight;
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
color: #a5a5a5; color: #a5a5a5;

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

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import './index.scss'; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
@ -9,7 +9,8 @@ const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65, h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65,
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, 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, available: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
}, },
}; };
@ -17,39 +18,54 @@ const fontSize = {
export default class Simple extends Component { export default class Simple extends Component {
render() { render() {
const { height, data } = this.props; const { height, data } = this.props;
return( return (
<article className="slider-simple d-flex flex-column" <article
style={{ className="slider-simple d-flex flex-column"
height: height, style={
}}>
<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>
{ {
data.price !== undefined ? // height: height,
}
data.price ? }
>
<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"> <div className="slider-simple__price d-flex justify-content-center">
{ {data.oldPrice ? (
data.oldPrice ?
<div> <div>
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--old d-flex"> <div
{data.oldPrice} تومان style={{ fontSize: fontSize.desktop.available }}
className="slider-simple__price--old d-flex"
>
{data.oldPrice} تومان
<span></span> <span></span>
</div> </div>
</div>
</div> : null ) : null}
} <div
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div> style={{ fontSize: fontSize.desktop.available }}
</div> : className="slider-simple__price--price"
<div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div> >
: null {data.price} تومان
} </div>
</div>
) : (
<div
style={{ fontSize: fontSize.desktop.notAvailable }}
className="slider-simple__notAvailabe"
>
ناموجود
</div>
)
) : null}
</Link> </Link>
</article> </article>
); );
} }
} }

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

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

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

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

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

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

@ -1,4 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import HomeHeader from "./HomeHeader/index"; import HomeHeader from "./HomeHeader/index";
@ -9,65 +11,96 @@ import HomeSlider from "./HomeSlider/index";
import HomeSearch from "./HomeSearch/index"; import HomeSearch from "./HomeSearch/index";
import Membership from "./Membership/index"; import Membership from "./Membership/index";
import SingleBlog from "./SingleBlog/index"; import SingleBlog from "./SingleBlog/index";
import Loader from "~/components/Loader/index";
import pic1 from "~/assets/images/pic1.png"; // import pic1 from "~/assets/images/pic1.png";
import pic from "~/assets/images/pic.png"; // import pic from "~/assets/images/pic.png";
import online from "~/assets/icons/online-education.png"; // import online from "~/assets/icons/online-education.png";
import chemistry from "~/assets/icons/chemistry.png"; // import chemistry from "~/assets/icons/chemistry.png";
import calculator from "~/assets/icons/calculator.png"; // import calculator from "~/assets/icons/calculator.png";
import homework from "~/assets/icons/homework.png"; // import homework from "~/assets/icons/homework.png";
import sciense_6 from "~/assets/images/sciense-6.png"; // import sciense_6 from "~/assets/images/sciense-6.png";
import chemistry_10 from "~/assets/images/chemistry-10.png"; // import chemistry_10 from "~/assets/images/chemistry-10.png";
import sciense_8 from "~/assets/images/sciense-8.png"; // import sciense_8 from "~/assets/images/sciense-8.png";
import sciense_9 from "~/assets/images/sciense-9.png"; // import sciense_9 from "~/assets/images/sciense-9.png";
import zist_10 from "~/assets/images/zist-10.png"; // import zist_10 from "~/assets/images/zist-10.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/qr.svg"; // import ar from "~/assets/icons/qr.svg";
import qr from "~/assets/icons/qr.svg"; // import qr from "~/assets/icons/qr.svg";
import myBook from "~/assets/images/myBook.png"; // import myBook from "~/assets/images/myBook.png";
import homeBlog from "~/assets/images/homeBlog.png"; // import homeBlog from "~/assets/images/homeBlog.png";
import bookActivation from "~/assets/images/bookActivating.png"; // import bookActivation from "~/assets/images/bookActivating.png";
import home_chat from "~/assets/icons/home_chat.png"; // import home_chat from "~/assets/icons/home_chat.png";
import home_ar from "~/assets/icons/home_ar(2).png"; // import home_ar from "~/assets/icons/home_ar(2).png";
import "./index.scss"; import "./index.scss";
export default class Home extends Component { class Home extends Component {
constructor(props) { componentDidMount() {
super(props); if (window.innerWidth < 1000) {
this.state = {}; this.props.getHomeData({ device: 2 });
} else {
this.props.getHomeData({ device: 1 });
}
} }
render() { render() {
const { homeData, mobileData } = this.props; const { homeData, loading } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> !loading ? (
<div className="home d-flex flex-column"> <>
<Navbar page={"home"} /> <div className="home d-flex flex-column">
{homeData.map((item, i) => ( <Navbar page={"home"} />
<Identifier item={item} key={i} /> {homeData.map((item, i) => (
))} <Identifier item={item} key={i} />
))}
</div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div> </div>
<Footer /> )
</>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<> !loading ? (
<div className="mobile-home d-flex flex-column"> <>
<Navbar page={"home"} /> <div className="mobile-home d-flex flex-column">
{mobileData.map((item, i) => ( <Navbar page={"home"} />
<Identifier item={item} key={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> </div>
</> )
) : null} ) : null}
</> </>
); );
} }
} }
export default connect(
(state) => ({
homeData: state.publicApi.homeData,
loading: state.publicApi.loading,
}),
{ getHomeData: publicApi.getHomeData }
)(Home);
const Identifier = (props) => { const Identifier = (props) => {
return ( 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"; import "./index.scss";
export default function QRImage(props) { export default function QRImage(props) {
const list = props.data.fileIds.split(","); const list = props.data.fileIds.split(",");
console.log(list);
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (

@ -7,7 +7,7 @@ class VideoApp extends Component {
player = {}; player = {};
state = { state = {
video: { video: {
src: film, src: `https://dnvn.ir/api/v1/file/${this.props.fileId}`,
}, },
}; };
@ -42,19 +42,20 @@ class VideoApp extends Component {
render() { render() {
return ( return (
<div style={{ width: '100%', height: '100%' }}> // <div style={{ width: "100%", height: "100%" }}>
<VideoPlayer <video
controls={true} controls={true}
src={this.state.video.src} src={this.state.video.src}
onReady={this.onPlayerReady.bind(this)} onReady={this.onPlayerReady.bind(this)}
onPlay={this.onVideoPlay.bind(this)} onPlay={this.onVideoPlay.bind(this)}
onPause={this.onVideoPause.bind(this)} onPause={this.onVideoPause.bind(this)}
onTimeUpdate={this.onVideoTimeUpdate.bind(this)} onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
onSeeking={this.onVideoSeeking.bind(this)} onSeeking={this.onVideoSeeking.bind(this)}
onSeeked={this.onVideoSeeked.bind(this)} onSeeked={this.onVideoSeeked.bind(this)}
onEnd={this.onVideoEnd.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"; import "./index.scss";
export default function VideoBox(props) { export default function VideoBox(props) {
const { data } = props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
@ -14,18 +15,18 @@ export default function VideoBox(props) {
className="d-flex align-items-center" className="d-flex align-items-center"
> >
<span></span> <span></span>
{props.data.title} {data.title}
</h2> </h2>
<ReactVideoJsPlayer /> <ReactVideoJsPlayer fileId={data.fileIds} />
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-video-box d-flex flex-column" id="video"> <div className="mobile-video-box d-flex flex-column" id="video">
<h2 className="d-flex align-items-center"> <h2 className="d-flex align-items-center">
<span></span> <span></span>
{props.data.title} {data.title}
</h2> </h2>
<ReactVideoJsPlayer /> <ReactVideoJsPlayer fileId={data.fileIds} />
</div> </div>
) : null} ) : null}
</> </>

Loading…
Cancel
Save