From 4786fab50f811ae443f55bb7319181e36eaf3b72 Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Fri, 1 Oct 2021 17:11:34 +0330 Subject: [PATCH] reza added faq desktop --- src/custom.scss | 10 +++ src/redux/reducers/public.tsx | 116 +++++++++++++++++++------------- src/router.tsx | 4 ++ src/views/Faq/index.scss | 121 ++++++++++++++++++++++++++++++++++ src/views/Faq/index.tsx | 56 ++++++++++++++++ 5 files changed, 261 insertions(+), 46 deletions(-) create mode 100644 src/views/Faq/index.scss create mode 100644 src/views/Faq/index.tsx diff --git a/src/custom.scss b/src/custom.scss index b7c3dc8..e3f6fa7 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -158,10 +158,20 @@ .submit{ font-size: 20px; } + .main{ + main { + max-width: 1350px; + } + } } @media screen and (min-width: 1008px) and (max-width: 1440px){ .submit{ font-size : calc(100vw / 70); } + .main{ + main { + max-width: 1250px; + } + } } \ No newline at end of file diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx index 136c25e..54b000f 100644 --- a/src/redux/reducers/public.tsx +++ b/src/redux/reducers/public.tsx @@ -3,82 +3,106 @@ const initialState = { homeData: [], newProducts: [], levels: [], - faqList: [], loading: false, error: null, searchResult: [], arList: [], blogList: [], blog: null, - mockSubscribes : [ + mockSubscribes: [ { - id : 0, - name : 'اشتراک 3 ماهه', - finalPrice : '19.000', - offPercent : 0, - off : 0, + id: 0, + name: "اشتراک 3 ماهه", + finalPrice: "19.000", + offPercent: 0, + off: 0, }, { - id : 1, - name : 'اشتراک 3 ماهه', - finalPrice : '19.000', - offPercent : 0, - off : 0, + id: 1, + name: "اشتراک 3 ماهه", + finalPrice: "19.000", + offPercent: 0, + off: 0, }, { - id : 2, - name : 'اشتراک 6 ماهه', - finalPrice : '30.000', - offPercent : 30, - off : '10.000', + id: 2, + name: "اشتراک 6 ماهه", + finalPrice: "30.000", + offPercent: 30, + off: "10.000", }, { - id : 3, - name : 'اشتراک 6 ماهه', - finalPrice : '40.000', - offPercent : 0, - off : 0, - } + id: 3, + name: "اشتراک 6 ماهه", + finalPrice: "40.000", + offPercent: 0, + off: 0, + }, ], selectedSubscripe: { - id : 0, - name : 'اشتراک 3 ماهه', - finalPrice : '19.000', - offPercent : 0, - off : 0, + id: 0, + name: "اشتراک 3 ماهه", + finalPrice: "19.000", + offPercent: 0, + off: 0, }, - departmans : [ + departmans: [ { id: 0, - name : 'محتوا' + name: "محتوا", }, { id: 0, - name : 'دیزاین' + name: "دیزاین", }, { id: 0, - name : 'برنامه نویسی' + name: "برنامه نویسی", }, ], - contactData : [ + contactData: [ { - name : 'آدرس ما', - value : 'تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2' + name: "آدرس ما", + value: "تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2", }, { - name : 'شماره تماس', - value : '02163462405 - 02163462406' + name: "شماره تماس", + value: "02163462405 - 02163462406", }, { - name : 'شماره پیامک', - value : '300000000008762144' + name: "شماره پیامک", + value: "300000000008762144", }, { - name : 'ایمیل سازمانی', - value : 'Info@Danovin.ir' + name: "ایمیل سازمانی", + value: "Info@Danovin.ir", + }, + ], + faqList: [ + { + name: "نحوه خرید از سایت دانوین چگونه است ؟", + active: true, + value: + "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ", + }, + { + name: "در این قسمت متن جدید خواهد آمد؟", + active: false, + value: + "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ", + }, + { + name: "چرا باید در این قسمت پرسش های متداول طرح شود؟", + active: false, + value: + "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ", + }, + { + name : 'این متن جهت سردرگرمی شما نوشته شده و کاربرد دیگری ندارد', + active : false, + value : 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ' } - ] + ], }; const grades = [ @@ -103,12 +127,12 @@ export default function publicApi(state = initialState, action: PublicAction) { let itemsLevel; if (window.innerWidth > 1000) { const jadidTarin = data.filter( - (item : any) => item.title === "جدیدترین کتاب‌های دانوین" + (item: any) => item.title === "جدیدترین کتاب‌های دانوین" ); itemsLevel = jadidTarin[0].data - .map((item : any) => item.book.gradeId * 1) - .sort((a : any, b : any) => a - b) - .map((e : any) => grades[e]); + .map((item: any) => item.book.gradeId * 1) + .sort((a: any, b: any) => a - b) + .map((e: any) => grades[e]); itemsLevel.unshift("همه"); } diff --git a/src/router.tsx b/src/router.tsx index 9e7ba76..cd13faf 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -12,6 +12,7 @@ import Course from "./views/Course/index"; import VideoTube from "./views/VideoTube/index"; import Subscription from "./views/Subscription/index"; import Contact from "./views/Contact/index"; +import Faq from "./views/Faq/index"; function router(){ return ( @@ -41,6 +42,9 @@ function router(){ + + + ); diff --git a/src/views/Faq/index.scss b/src/views/Faq/index.scss new file mode 100644 index 0000000..816dc11 --- /dev/null +++ b/src/views/Faq/index.scss @@ -0,0 +1,121 @@ +.faq { + header { + width: 100%; + margin: 0px auto; + padding-top: 40px; + h1 { + color: white; + margin-bottom: 15px; + } + p { + color: #969696; + } + input { + background-color: #424242; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + border: none; + color: white; + flex: 1; + &::placeholder { + color: #969696; + } + } + button { + background-color: #39383d; + border: none; + margin-right: 2px; + width: 70px; + height: 60px; + border-radius: 5px; + } + } + &__list { + width: 100%; + margin: 0px auto !important; + padding-top: 30px !important; + li{ + background-color: #242424; + margin-bottom: 15px; + cursor: pointer; + border-radius: 5px; + } + &--itemHeader { + border-top-right-radius: 5px; + border-top-left-radius: 5px; + strong { + color: #4dd35b; + } + img{ + width: 30px; + } + } + &--itemBody { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + p { + color: white; + } + } + } +} + +@media screen and (min-width: 1441px) { + .faq { + header { + max-width: 800px; + h1 { + font-size: 44px; + } + p { + font-size: 21px; + } + input { + padding: 10px 20px 10px 0px; + font-size: 21px; + } + img { + width: 35px; + } + } + &__list{ + max-width: 1040px; + h2{ + font-size: 19px; + } + p{ + font-size: 21px; + } + } + } +} + +@media screen and (min-width: 1008px) and (max-width: 1440px) { + .faq { + header { + max-width: 700px; + h1 { + font-size: calc(100vw / 35); + } + p { + font-size: calc(100vw / 70); + } + input { + padding: 10px 20px 10px 0px; + font-size: calc(100vw / 70); + } + img { + width: 35px; + } + } + &__list{ + max-width: 900px; + h2{ + font-size: calc(100vw / 75); + } + p{ + font-size: calc(100vw / 72); + } + } + } +} diff --git a/src/views/Faq/index.tsx b/src/views/Faq/index.tsx new file mode 100644 index 0000000..71be83b --- /dev/null +++ b/src/views/Faq/index.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import Navbar from "../../components/Navbar/index"; +import Footer from "../../views/Home/Footer/index"; +import search from "../../assets/icons/search.png"; +import dropdown from "../../assets/icons/dropdown.png"; +import whiteDropdown from "../../assets/icons/white-dropdown.png"; +import { connect } from "react-redux"; +import "./index.scss"; + +function Faq({ list }: any) { + return ( +
+ +
+
+

پرسش های متداول

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با + استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در + ستون و سطرآنچنان که لازم است و برای شرایط{" "} +

+
+ + +
+
+
    + {list.map((item: any, i: any) => ( +
  • +
    + {item.name} + {item.active ? ( + + ) : ( + + )} +
    + {item.active && ( +
    +

    {item.value}

    +
    + )} +
    • + ))} +
+
+
+ ); +} + +export default connect((state: any) => ({ + list: state.publicApi.faqList, +}))(Faq);