parent
73f4f7ad3d
commit
e6ced3736d
21 changed files with 520 additions and 207 deletions
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,45 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Breadcrumbs from "@material-ui/core/Breadcrumbs"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
function handleClick(event) { |
||||||
|
event.preventDefault(); |
||||||
|
console.info("You clicked a breadcrumb."); |
||||||
|
} |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 650; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
||||||
|
mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25, |
||||||
|
}; |
||||||
|
|
||||||
|
export default function ActiveLastBreadcrumb(props) { |
||||||
|
const { name } = props; |
||||||
|
return ( |
||||||
|
<Breadcrumbs aria-label="breadcrumb"> |
||||||
|
<Link |
||||||
|
style={{ |
||||||
|
fontSize: |
||||||
|
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||||
|
}} |
||||||
|
to={"/"} |
||||||
|
> |
||||||
|
صفحه اصلی |
||||||
|
</Link> |
||||||
|
<Link |
||||||
|
style={{ |
||||||
|
fontSize: |
||||||
|
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||||
|
color: "#00CC69", |
||||||
|
}} |
||||||
|
to={"/download"} |
||||||
|
> |
||||||
|
دریافت افزونه واقعیت افزوده |
||||||
|
</Link> |
||||||
|
</Breadcrumbs> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.MuiBreadcrumbs-li{ |
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
font-family: numeralLight; |
||||||
|
color: #6F7074; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
|
||||||
|
const maxMobileSize = 550; |
||||||
|
const maxDesktopSize = 1250; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
mobile: { |
||||||
|
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26, |
||||||
|
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34, |
||||||
|
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32, |
||||||
|
}, |
||||||
|
desktop: { |
||||||
|
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, |
||||||
|
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, |
||||||
|
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120, |
||||||
|
}, |
||||||
|
}; |
||||||
|
const grades = [ |
||||||
|
"پیش دبستان", |
||||||
|
"اول", |
||||||
|
"دوم", |
||||||
|
"سوم", |
||||||
|
"چهارم", |
||||||
|
"پنجم", |
||||||
|
"ششم", |
||||||
|
"هفتم", |
||||||
|
"هشتم", |
||||||
|
"نهم", |
||||||
|
"دهم", |
||||||
|
"یازدهم", |
||||||
|
"دوازدهم", |
||||||
|
]; |
||||||
|
export default class Item extends Component { |
||||||
|
render() { |
||||||
|
const { data } = this.props; |
||||||
|
console.log({ data }); |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<a |
||||||
|
href={`https://ar.dnvn.ir/lunch?id=${data.id}`} |
||||||
|
target="_blank" |
||||||
|
className="mobile-products-product d-flex flex-column" |
||||||
|
> |
||||||
|
<img |
||||||
|
src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`} |
||||||
|
alt={data.title} |
||||||
|
/> |
||||||
|
<div className="mobile-products-product__info d-flex flex-column"> |
||||||
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
||||||
|
{data["product.book.name"]}{" "} |
||||||
|
{grades[+data["product.book.gradeId"]]} |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
) : null} |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<article className="products-product d-flex flex-column align-items"></article> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { userProduct } from "~/Redux/actions"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import Navbar from "../Home/Navbar/index"; |
||||||
|
import Footer from "../Home/Footer/index"; |
||||||
|
import Loader from "~/components/Loader/index"; |
||||||
|
import Item from "./Item/index"; |
||||||
|
import BreadCrumbs from "./BreadCrumb/index"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
mobile: { |
||||||
|
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20, |
||||||
|
a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 30, |
||||||
|
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, |
||||||
|
}, |
||||||
|
desktop: { |
||||||
|
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
||||||
|
a: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 85, |
||||||
|
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
class AR extends Component { |
||||||
|
componentDidMount() { |
||||||
|
window.scrollTo(0, 0); |
||||||
|
this.props.getMyList({ isActive: 1, productType: 3 }); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { arList, loading } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="ar d-flex flex-column"> |
||||||
|
<Navbar page="home" /> |
||||||
|
{window.innerWidth > 1000 ? <BreadCrumbs /> : null} |
||||||
|
<div |
||||||
|
className="mybooks__list--empty d-flex flex-column justify-content-center align-items-center" |
||||||
|
style={{ width: "95vw" }} |
||||||
|
> |
||||||
|
<div |
||||||
|
class="mobile-home-static__flex--right d-flex flex-column" |
||||||
|
style={{ padding: "40px 10px" }} |
||||||
|
> |
||||||
|
<img |
||||||
|
src="https://dnvn.ir/api/v1/file/1851" |
||||||
|
alt="واقعیت افزوده" |
||||||
|
width="150" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p |
||||||
|
style={{ |
||||||
|
textAlign: "center", |
||||||
|
fontSize: |
||||||
|
window.innerWidth > 1000 |
||||||
|
? fontSize.desktop.p |
||||||
|
: fontSize.mobile.p, |
||||||
|
}} |
||||||
|
> |
||||||
|
برای استفاده از بخش واقعیت افزوده می بایست افزونه آن را نصب نمایید |
||||||
|
</p> |
||||||
|
<a |
||||||
|
href="https://dnvn.ir/ar.apk" |
||||||
|
style={{ |
||||||
|
color: "white", |
||||||
|
fontSize: 18, |
||||||
|
width: "80%", |
||||||
|
textAlign: "center", |
||||||
|
}} |
||||||
|
> |
||||||
|
دریافت افزونه |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default connect( |
||||||
|
(state) => ({ |
||||||
|
arList: state.userProduct.myList || [], |
||||||
|
loading: state.loading, |
||||||
|
}), |
||||||
|
{ |
||||||
|
getMyList: userProduct.myList, |
||||||
|
} |
||||||
|
)(AR); |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
.mobile-ar { |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
margin: 0px auto; |
||||||
|
padding: 0px 10px 40px; |
||||||
|
direction: rtl; |
||||||
|
padding-top: 70px; |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.ar { |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
min-height: calc(100vh - 288px); |
||||||
|
margin: 0px auto; |
||||||
|
padding: 0px 10px; |
||||||
|
direction: rtl; |
||||||
|
overflow-x: hidden; |
||||||
|
padding-top: 100px; |
||||||
|
} |
||||||
Loading…
Reference in new issue