pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

seeMoreContainers

Browse Source
main
alireza khaji 3 years ago
parent 17a72d870d
commit 9a75a9a6cc
13 changed files with 405 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

2
src/components/Calendar/CalendarComponents/Calendar.js
Unescape View File

@ -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

17
src/components/Calendar2/Calendar2.js
Unescape View File

@ -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;

21
src/components/Calendar2/Title.js
Unescape View File

@ -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;

14
src/components/Calendar2/Week.js
Unescape View File

@ -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;

12
src/view/my-services/Exams.js
Unescape View File

@ -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>
);
};

90
src/view/my-services/FutureExams.js
Unescape View File

@ -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;

74
src/view/my-services/MyCourse.js
Unescape View File

@ -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;

45
src/view/my-services/MyOrders.js
Unescape View File

@ -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>

42
src/view/my-services/MyRegisters.js
Unescape View File

@ -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>

87
src/view/my-services/MyServices.js
Unescape View File

@ -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>
);
}

47
src/view/my-services/ResultExams.js
Unescape View File

@ -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 ? "نتیجه موقت" : "نتیجه نهایی"}

29
src/view/my-services/Title.js
Unescape View File

@ -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;

32
src/view/my-services/index.css
Unescape View File

@ -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%);

Write Preview
Loading…
Cancel
Save