maxDesktopSize ? 12 : window.innerWidth / 90,
+ mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
+};
+
+export default function ActiveLastBreadcrumb(props) {
+ const { name } = props;
+ return (
+
+ 1000 ? fontSize.desktop : fontSize.mobile,
+ }}
+ to={"/"}
+ >
+ صفحه اصلی
+
+ 1000 ? fontSize.desktop : fontSize.mobile,
+ color: "#00CC69",
+ }}
+ to={"/download"}
+ >
+ دریافت افزونه واقعیت افزوده
+
+
+ );
+}
diff --git a/src/views/Download/BreadCrumb/index.scss b/src/views/Download/BreadCrumb/index.scss
new file mode 100644
index 0000000..e10f243
--- /dev/null
+++ b/src/views/Download/BreadCrumb/index.scss
@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+ a {
+ text-decoration: none;
+ font-family: numeralLight;
+ color: #6F7074;
+ letter-spacing: -1px;
+ }
+}
diff --git a/src/views/Download/Item/index.js b/src/views/Download/Item/index.js
new file mode 100644
index 0000000..9216698
--- /dev/null
+++ b/src/views/Download/Item/index.js
@@ -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 ? (
+
+
+
+
+ {data["product.book.name"]}{" "}
+ {grades[+data["product.book.gradeId"]]}
+
+
+
+ ) : null}
+ {window.innerWidth > 1000 ? (
+
+ ) : null}
+ >
+ );
+ }
+}
diff --git a/src/views/Download/index.js b/src/views/Download/index.js
new file mode 100644
index 0000000..d5942f6
--- /dev/null
+++ b/src/views/Download/index.js
@@ -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 (
+
+
+ {window.innerWidth > 1000 ?
: null}
+
+
+
+
+
+
1000
+ ? fontSize.desktop.p
+ : fontSize.mobile.p,
+ }}
+ >
+ برای استفاده از بخش واقعیت افزوده می بایست افزونه آن را نصب نمایید
+
+
+ دریافت افزونه
+
+
+
+ );
+ }
+}
+
+export default connect(
+ (state) => ({
+ arList: state.userProduct.myList || [],
+ loading: state.loading,
+ }),
+ {
+ getMyList: userProduct.myList,
+ }
+)(AR);
diff --git a/src/views/Download/index.scss b/src/views/Download/index.scss
new file mode 100644
index 0000000..0c19cfc
--- /dev/null
+++ b/src/views/Download/index.scss
@@ -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;
+}
diff --git a/src/views/Home/Navbar/Mobile/index.js b/src/views/Home/Navbar/Mobile/index.js
index 3b3bdcf..75649e7 100644
--- a/src/views/Home/Navbar/Mobile/index.js
+++ b/src/views/Home/Navbar/Mobile/index.js
@@ -8,6 +8,7 @@ import clsx from "clsx";
import logo from "../../../../assets/icons/logoMobile.png";
import ar from "../../../../assets/icons/ar.png";
import qr from "../../../../assets/icons/qr.png";
+import back from "../../../../assets/icons/back.png";
import hamburger from "../../../../assets/icons/hamburger.png";
import search from "../../../../assets/icons/navbarSearch.png";
@@ -64,34 +65,50 @@ export default function MobileNavbar(props) {
);
return (