seeMoreContainers

main
alireza khaji 2 years ago
parent 17a72d870d
commit 9a75a9a6cc
  1. 2
      src/components/Calendar/CalendarComponents/Calendar.js
  2. 17
      src/components/Calendar2/Calendar2.js
  3. 21
      src/components/Calendar2/Title.js
  4. 14
      src/components/Calendar2/Week.js
  5. 12
      src/view/my-services/Exams.js
  6. 90
      src/view/my-services/FutureExams.js
  7. 74
      src/view/my-services/MyCourse.js
  8. 45
      src/view/my-services/MyOrders.js
  9. 42
      src/view/my-services/MyRegisters.js
  10. 87
      src/view/my-services/MyServices.js
  11. 47
      src/view/my-services/ResultExams.js
  12. 29
      src/view/my-services/Title.js
  13. 32
      src/view/my-services/index.css

@ -309,7 +309,7 @@ let active_list;
type={type}
/>
<div className="Calendar__footer">
{ eventInFooter !== null && eventInFooter !== undefined &&
{ (eventInFooter !== null && eventInFooter !== undefined) &&
<div className={`footer__Events ${type}`}>
{
type == 'dashboard' ? <><div className='text-lg text-red52'>رویدادها: </div><p className='text-red26 text-sm '>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter

@ -0,0 +1,17 @@
import Title from "./Title";
import Week from "./Week";
const Calendar2 = ({ primaryColor }) => {
return (
<div className="Calendar2 w-full h-full rounded-lg border border-[#E0E0E0] py-1 px-2">
{/* ----title---------------- */}
<Title primaryColor={primaryColor} />
{/* ----------week---------------- */}
<Week/>
</div>
);
};
export default Calendar2;

@ -0,0 +1,21 @@
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
const Title = ({ primaryColor }) => {
return (
<div className="Title w-full h-12 flex flex-row-reverse items-center justify-between">
<IoIosArrowForward className="text-lg text-[#504F4F] cursor-pointer" />
<div
className="text-lg text-right"
style={{
color: `${primaryColor}`,
fontFamily: "IRANSansXFaNum-Medium",
}}
>
اریبهشت، 1401
</div>
<IoIosArrowBack className="text-lg text-[#504F4F] cursor-pointer" />
</div>
);
};
export default Title;

@ -0,0 +1,14 @@
let weekList = ["شنبه","یکشنبه","دوشنبه","سهشنبه","چهارشنبه","پنجشنبه","جمعه"]
const Week=()=>{
return (
<div className="Week w-full h-8 flex items-center justify-between flex-row-reverse">
{weekList.map((item,index)=>(
<div key={index} className="w-[13%] text-center text-xs">{item}</div>
))}
</div>
);
}
export default Week;

@ -4,11 +4,17 @@ import FutureExams from "./FutureExams";
import ResultExams from "./ResultExams";
const Exams = () => {
const Exams = ({ seeMoreHandler, seeMoreStatus }) => {
return (
<div className="Exams w-[70%] h-full flex flex-row-reverse rounded-lg border border-[#E0E0E0]">
<FutureExams />
<ResultExams />
<FutureExams
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
<ResultExams
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
</div>
);
};

@ -3,8 +3,8 @@ import img2 from "../../assets/img/usgs-hoS3dzgpHzw-unsplash.jpg";
import stickynote from "../../assets/img/stickynote.svg";
import clockIcon from "../../assets/img/vuesax-linear-clock.svg";
import Title from "./Title";
import './index.css'
const FutureExams = () => {
import "./index.css";
const FutureExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
let data = [
{
id: 1,
@ -54,64 +54,92 @@ const FutureExams = () => {
];
//hoverHandler--------------
const hoverHandler=(index)=>{
const hoverHandler = (index) => {
let frontBox = document.querySelectorAll(".frontBox");
let description = document.querySelectorAll(".frontBox-description");
frontBox[index].style.transform="translateY(0px)";
frontBox[index].style.transform = "translateY(0px)";
frontBox[index].style.background = "rgba(223,20,82,0.7)";
description[index].style.display="block";
description[index].style.display = "block";
// rgba(223,20,82,0.7)
}
};
const hoverHandle2 = (index) => {
let frontBox = document.querySelectorAll(".frontBox");
let description = document.querySelectorAll(".frontBox-description");
if(window.innerWidth>=1490){
frontBox[index].style.transform = "translateY(60%)";
}else if (window.innerWidth >= 1410) {
frontBox[index].style.transform = "translateY(57%)";
}else if (window.innerWidth >= 1315) {
frontBox[index].style.transform = "translateY(70%)";
}else if (window.innerWidth >= 1230) {
frontBox[index].style.transform = "translateY(67%)";
}else{
frontBox[index].style.transform = "translateY(63%)";
if (seeMoreStatus !== 1) {
if (window.innerWidth >= 1490) {
frontBox[index].style.transform = "translateY(60%)";
} else if (window.innerWidth >= 1410) {
frontBox[index].style.transform = "translateY(57%)";
} else if (window.innerWidth >= 1315) {
frontBox[index].style.transform = "translateY(70%)";
} else if (window.innerWidth >= 1230) {
frontBox[index].style.transform = "translateY(67%)";
} else {
frontBox[index].style.transform = "translateY(63%)";
}
} else {
frontBox[index].style.transform = "translateY(72%)";
}
frontBox[index].style.background =
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)";
description[index].style.display = "none";
// rgba(223,20,82,0.7)
};
return (
<div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-1 pt-1">
<div
className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-1 pt-1"
style={seeMoreStatus !== 0 ? { width: "100%", border: "none" } : null}
>
<div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */}
<Title titleText="آزمونهای پیشرو" />
<Title
titleText="آزمونهای پیشرو"
seeMoreHandler={() => seeMoreHandler(1)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */}
<div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[5%] res1:gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
<div
className="w-full mt-4 flex flex-row-reverse items-start gap-x-[5%] res1:gap-x-[3.5%] gap-y-4 flex-wrap pb-2"
style={seeMoreStatus === 1 ? { columnGap: "3.5%" } : null}
>
{data?.map((item, index) => (
<div
key={index}
className="w-[47.5%] res1:w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
onMouseEnter={() => hoverHandler(index)}
onMouseLeave={() => hoverHandle2(index)}
style={seeMoreStatus === 1 ? { width: "31%" } : null}
>
{/* -----back-img------ */}
<img src={item.img} className="w-full" alt="back-img" />
{/* -----front-data------ */}
<div
className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
style={{
background:
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
}}
style={
seeMoreStatus === 1
? {
background:
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
transform: "translateY(72%)",
}
: {
background:
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
}
}
>
<div className="w-full flex items-center flex-row-reverse pb-1 border-b border-white">
<img src={stickynote} alt="stickynote" className="h-5 ml-1" />
<div
className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap"
style={{ direction: "rtl" }}
style={
seeMoreStatus === 1
? { direction: "rtl", fontSize: "16px" }
: { direction: "rtl" }
}
>
{item.title}
</div>
@ -120,11 +148,17 @@ const FutureExams = () => {
<div className="w-full flex flex-row-reverse items-center justify-between py-1">
<div className="flex flex-row-reverse items-center">
<img src={clockIcon} alt="clockIcon" className="ml-1 h-4" />
<div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right">
<div
className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right"
style={seeMoreStatus === 1 ? { fontSize: "14px" } : null}
>
{item.date}
</div>
</div>
<div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right">
<div
className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right"
style={seeMoreStatus === 1 ? { fontSize: "14px" } : null}
>
ساعت {item.time}
</div>
</div>
@ -144,4 +178,4 @@ const FutureExams = () => {
);
};
export default FutureExams;
export default FutureExams;

@ -39,16 +39,27 @@ let data = [
teacher: "فرانتکار عجیب",
},
];
const MyCourse=()=>{
const MyCourse = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
return (
<div className="MyCourse w-[45%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1">
<div
className="MyCourse w-[45%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1"
style={seeMoreStatus === 4 ? { width: "100%" } : null}
>
<div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */}
<Title titleText="دورههای من" />
<Title
titleText="دورههای من"
seeMoreHandler={() => seeMoreHandler(4)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */}
<div className="w-full mt-4">
{data?.map((item, index) => (
<div className="w-full flex flex-row-reverse items-center justify-between mb-4 cursor-pointer">
<div
key={index}
className="w-full flex flex-row-reverse items-start justify-between mb-4 cursor-pointer"
>
<div className="w-[37%] aspect-[1/0.7] rounded overflow-hidden flex items-center justify-center">
<img
src={item.img}
@ -57,33 +68,58 @@ const MyCourse=()=>{
/>
</div>
{/* ---- */}
<div className="w-[61%]">
<div className="text-xs text-right text-[#B1B1B1]">
<div className="w-[61%] pt-1">
<div
className="text-xs text-right text-[#B1B1B1]"
style={seeMoreStatus === 4 ? { fontSize: "14px" } : null}
>
{item?.date}
</div>
<div
className="text-sm text-right mt-1"
style={{
fontFamily: "IRANSansXFaNum-Medium",
direction: "rtl",
}}
style={
seeMoreStatus === 4
? {
fontFamily: "IRANSansXFaNum-Medium",
direction: "rtl",
fontSize: "20px",
}
: {
fontFamily: "IRANSansXFaNum-Medium",
direction: "rtl",
}
}
>
{item.name}
</div>
<div
className="text-xs text-right text-[#B1B1B1] mt-1 overflow-hidden text-ellipsis"
style={{
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
display: "-webkit-box",
direction:"rtl"
}}
style={
seeMoreStatus === 4
? {
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
display: "-webkit-box",
direction: "rtl",
fontSize: "16px",
}
: {
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
display: "-webkit-box",
direction: "rtl",
}
}
>
{item.description}
</div>
<div
className="text-left text-xs w-full mt-1"
style={{ direction: "ltr" }}
style={
seeMoreStatus === 4
? { direction: "ltr",fontSize:"14px"}
: { direction: "ltr" }
}
>
استاد:{item?.teacher}
</div>
@ -94,6 +130,6 @@ const MyCourse=()=>{
</div>
</div>
);
}
};
export default MyCourse;
export default MyCourse;

@ -71,29 +71,43 @@ let data = [
},
];
let statusColor = ["#F7EA46", "#57F746", "#FE1E1E"];
const MyOrders = () => {
const MyOrders = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
return (
<div className="MyOrders w-[28.5%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1">
<div
className="MyOrders w-[28.5%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1"
style={seeMoreStatus === 5 ? { width: "100%" } : null}
>
<div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */}
<Title titleText="سفارشهای من" />
<Title
titleText="سفارشهای من"
seeMoreHandler={() => seeMoreHandler(5)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */}
<div className="w-full mt-4">
{data.map((item, index) => (
<div key={index} className="w-full mb-5">
<div className="w-full flex flex-row-reverse items-center justify-between py-1 border-y border-[#E0E0E0]">
<div className="w-[40%] pl-1 text-right text-xs border-l border-[#E0E0E0]">
<div
className="w-[40%] pl-1 text-right text-xs border-l border-[#E0E0E0]"
style={seeMoreStatus === 5 ? { width: "55%" } : null}
>
{item.factorId}
</div>
<div className="w-[22%] text-right text-xs">{item.date}</div>
<div className="w-[30%] flex flex-row-reverse items-center">
<div
className="w-[30%] flex flex-row-reverse items-center"
style={seeMoreStatus === 5 ? { width: "15%" } : null}
>
<div
className="w-4 h-4 rounded-full bg-black"
style={{
backgroundColor: `${statusColor[item.status - 1]}`,
}}
></div>
<div className="text-xs text-left mr-1">
<div className="order-status text-xs text-right mr-1">
{item.status === 1
? "در حال پردازش"
: item.status === 2
@ -104,19 +118,30 @@ const MyOrders = () => {
</div>
{/* ---------- */}
<div className="w-full flex flex-row-reverse justify-between pt-1">
<div className="w-[60%] flex flex-row-reverse items-start gap-x-2 gap-y-2 flex-wrap">
<div className="my-order-right w-[60%] flex flex-row-reverse items-start gap-x-2 gap-y-2 flex-wrap">
{item.products.map((ITEM, INDEX) => (
<div
key={INDEX}
className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center cursor-pointer"
style={
seeMoreStatus === 5
? { width: "80px", height: "128px" }
: null
}
></div>
))}
</div>
<div className="w-[37%]">
<div className="w-full text-left text-xs">
<div className="my-order-left w-[37%]">
<div
className="factor-sum-price w-full text-left text-xs"
style={seeMoreStatus === 5 ? { fontSize: "16px" } : null}
>
جمع فاکتور {item.sumPrice} تومان
</div>
<div className="w-full h-7 rounded flex items-center justify-center text-xs text-center text-white bg-[#DF1452] mt-2 cursor-pointer">
<div
className="w-full h-7 rounded flex items-center justify-center text-xs text-center text-white bg-[#DF1452] mt-2 cursor-pointer"
style={seeMoreStatus === 5 ? { width: "130px",fontSize:"16px",height:"35px" } : null}
>
جزئیات سفارش
</div>
</div>

@ -37,12 +37,20 @@ let data = [
type: 1,
},
];
const MyRegisters = () => {
const MyRegisters = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
return (
<div className="MyRegisters w-[53%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1">
<div
className="MyRegisters w-[53%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1"
style={seeMoreStatus===3?{width:"100%"}:null}
>
<div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */}
<Title titleText="پنل هوشمند ثبتنامهای من" />
<Title
titleText="پنل هوشمند ثبتنامهای من"
seeMoreHandler={() => seeMoreHandler(3)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */}
<div className="w-full mt-4">
{data.map((item, index) => (
@ -56,23 +64,31 @@ const MyRegisters = () => {
<div className="w-full py-1 flex flex-row-reverse items-center justify-between border-t border-[#E0E0E0]">
<div
className="w-1/2 text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
style={{
fontFamily: "IRANSansXFaNum-Medium",
direction: "rtl",
}}
>
{item.name}
</div>
{/* -- */}
<div className="w-[30%] pr-2 text-right text-xs text-[#B1B1B1] border-r border-[#E0E0E0]">
<div className="w-[60px] pr-2 text-right text-xs text-[#B1B1B1] border-r border-[#E0E0E0]">
{item.date}
</div>
{/* -- */}
<div className="w-1/4 h-6 rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center cursor-pointer">
{item.type === 1
? "شرکت در دوره"
: item.type === 2
? "مکان برگزاری"
: item.type === 3
? "دریافت قرارداد"
: "شرکت در آزمون"}
<div className="w-1/4" style={seeMoreStatus===3?{width:"20%"}:null}>
<div
className="w-full h-6 rounded flex items-center justify-center border border-[#DF1452] text-xs text-[#DF1452] text-center cursor-pointer"
// style={{ width: "calc(50% - 100px)" }}
>
قرارداد
</div>
<div
className="w-full h-6 rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center cursor-pointer mt-1"
// style={{ width: "calc(50% - 100px)" }}
>
{item.type === 1 ? "شرکت در دوره" : "مکان برگزاری"}
</div>
</div>
</div>
</div>

@ -3,25 +3,94 @@ import Exams from "./Exams";
import MyCourse from "./MyCourse";
import MyOrders from "./MyOrders";
import MyRegisters from "./MyRegisters";
import {useState} from "react";
import FutureExams from "./FutureExams";
import ResultExams from "./ResultExams";
import Calendar2 from "../../components/Calendar2/Calendar2";
const MyServices=()=>{
const [seeMoreStatus,setSeeMoreStatus]=useState(0);
const seeMoreHandler=(index)=>{
setSeeMoreStatus(index);
}
const deActiveSeeMore=()=>{
setSeeMoreStatus(0);
}
return (
<div className="MyServices w-[93.5%] h-[100vh] pt-[4%] pb-2 px-4 flex flex-col justify-between">
<div className="MyServices w-[93.5%] h-[100vh] pt-16 pb-2 px-4 flex flex-col justify-between relative">
<div className="MyServices-row w-full h-[49%] flex flex-row-reverse justify-between">
<Exams />
{seeMoreStatus === 0 ? (
<Exams
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
) : (
<div className="w-[70%] h-full"></div>
)}
<div className="w-[28.5%] h-full">
<SimpleCalendar />
{/* <SimpleCalendar /> */}
<Calendar2 primaryColor="#DF1452"/>
</div>
</div>
<div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
<div className="w-[70%] h-full flex flex-row-reverse justify-between">
<MyRegisters />
<MyCourse />
</div>
<MyOrders />
{seeMoreStatus === 0 && (
<div className="w-[70%] h-full flex flex-row-reverse justify-between">
<MyRegisters
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
<MyCourse
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
</div>
)}
{seeMoreStatus === 0 && (
<MyOrders
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
)}
</div>
{/* ----see-more-------------------- */}
{seeMoreStatus !== 0 && (
<div
className="see-more-container w-[70%] absolute top-16 right-4 border border-[#E0E0E0] rounded-lg bg-white"
style={{ height: "calc(100% - 72px)", width: "calc(70% - 20px)" }}
>
{seeMoreStatus === 1 && (
<FutureExams
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
)}
{seeMoreStatus === 2 && (
<ResultExams
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
)}
{seeMoreStatus === 3 && (
<MyRegisters
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
)}
{seeMoreStatus === 4 && (
<MyCourse
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
)}
{seeMoreStatus === 5 && (
<MyOrders
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
)}
</div>
)}
</div>
);
}

@ -25,7 +25,7 @@ import Title from "./Title";
},
];
const ResultExams = () => {
const ResultExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
let data = [
{
id: 1,
@ -61,12 +61,21 @@ const ResultExams = () => {
return (
<div
className="ResultExams w-[45%] h-full px-1 pt-1"
style={{ direction: "rtl" }}
style={
seeMoreStatus === 2
? { direction: "rtl", width: "100%" }
: { direction: "rtl" }
}
>
<div className="w-full h-full px-4 pt-4 overflow-y-auto">
{/* ----title-------- */}
<div style={{ direction: "ltr" }}>
<Title titleText="نتایج آزمونهای من" />
<Title
titleText="نتایج آزمونهای من"
seeMoreHandler={() => seeMoreHandler(2)}
deActiveSeeMore={deActiveSeeMore}
seeMoreStatus={seeMoreStatus}
/>
</div>
{/* ----body-------- */}
<div className="w-full mt-4">
@ -76,25 +85,27 @@ const ResultExams = () => {
className="w-full h-14 rounded px-3 flex items-center justify-between mb-2 cursor-pointer"
style={{ backgroundColor: `${colorList[index % 5].bg}` }}
>
<div
className="w-1 h-9 rounded-lg"
style={{ backgroundColor: `${colorList[index % 5].line}` }}
></div>
{/* --------- */}
<div className="w-[70%]">
<div className="w-[70%] flex items-center gap-x-2">
<div
className="w-full text-sm text-right"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
>
{item?.title}
</div>
<div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]">
{item?.date}
className="w-1 h-9 rounded-lg"
style={{ backgroundColor: `${colorList[index % 5].line}` }}
></div>
{/* --------- */}
<div className="w-auto">
<div
className="w-full text-sm text-right"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
>
{item?.title}
</div>
<div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]">
{item?.date}
</div>
</div>
</div>
{/* --------- */}
{/* ------------------ */}
<div
className="w-[15%] h-9 text-center border-r text-xs flex items-center"
className="w-[15%] h-9 text-center border-r text-xs flex items-center justify-center"
style={{ borderColor: `${colorList[index % 5].line}` }}
>
{item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"}

@ -1,7 +1,12 @@
import { IoIosArrowBack } from "react-icons/io";
const Title=({titleText})=>{
const Title = ({
titleText,
seeMoreHandler,
seeMoreStatus,
deActiveSeeMore,
}) => {
return (
<div className="w-full h-10 flex flex-row-reverse items-center justify-between">
<div
@ -10,12 +15,24 @@ const Title=({titleText})=>{
>
{titleText}
</div>
<div className="flex items-center cursor-pointer">
<IoIosArrowBack className="text-lg text-[#504F4F] mr-1" />
<div className="text-[#504F4F]">مشاهده بیشتر</div>
</div>
{seeMoreStatus === 0 && (
<div className="flex items-center cursor-pointer">
<IoIosArrowBack className="text-lg text-[#504F4F] mr-1" />
<div className="text-[#504F4F]" onClick={seeMoreHandler}>
مشاهده بیشتر
</div>
</div>
)}
{seeMoreStatus !== 0 && (
<div className="flex items-center cursor-pointer">
<IoIosArrowBack className="text-lg text-[#504F4F] mr-1" />
<div className="text-[#504F4F]" onClick={deActiveSeeMore}>
بازگشت
</div>
</div>
)}
</div>
);
}
};
export default Title;

@ -7,18 +7,50 @@
}
}
@media only screen and (max-width: 1446px) {
.factor-sum-price{
font-size: 11px;
}
.my-order-left{
width: 41%;
}
.my-order-right{
width: 56%;
}
}
@media only screen and (max-width: 1409px) {
.frontBox {
transform: translateY(70%);
}
}
@media only screen and (max-width: 1367px) {
.order-status{
font-size: 10px;
}
}
@media only screen and (max-width: 1314px) {
.frontBox {
transform: translateY(67%);
}
}
@media only screen and (max-width: 1234px) {
.factor-sum-price {
font-size: 11px;
}
.my-order-left {
width: 44%;
}
.my-order-right {
width: 53%;
}
}
@media only screen and (max-width: 1229px) {
.frontBox {
transform: translateY(63%);

Loading…
Cancel
Save