danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create profile section

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-21 15:01:29 +03:30
parent abe8daf536
commit 0c7fd83de2
18 changed files with 1535 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dlearn_front.zip
BIN
View File
Binary file not shown.
assets/css/tailwind.css
+30
View File
@@ -42,3 +42,33 @@ body {
@apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw] md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]
}
}
@media (max-width: 768px) {
.tabs-component .tabs-component-tab .is-active::before{
height: 0vw !important;
}
.tabs-component .tabs-component-tab .is-active p{
background-color: #D3EDED;
}
.scrolBar{
padding: 0vw 1.5vw;
overflow: auto;
white-space: nowrap;
background-color: #FDFAFC;
box-shadow: 0px 0px 5px 0px #A6228626;
width: 87.692vw;
height: 13.077vw;
display: flex;
align-items: center;
border-radius: 3.846vw;
}
.scrolBar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrolBar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
components/ProgressCard.vue
+108
View File
@@ -0,0 +1,108 @@
<template>
<div class="thin pinkShadow md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
<div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
<p
class="text-black post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute left-0 bottom-0 bg-white rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
540,000
<span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]"
>تومان</span
>
</p>
<img
style="object-fit: cover"
src="/public/images/course.png"
alt="laravel"
class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]"
/>
</div>
<div
class="w-full flex flex-col justify-center space-y-[1.042vw] md:space-y-[1.25vw]"
>
<p
class="mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
>
ترفند های کاربردی پایتون
</p>
<div
class="flex flex-col justify-between items-center py-[3vw] md:py-[0.7vw] mx-[3vw] md:mx-[0.833vw] border-t"
>
<div class="flex justify-between w-full mb-[0.417vw]">
<p class="text-[2.836vw] md:text-[0.658vw] text-[#383E43]">میزان مشاهده</p>
<p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">0 %</p>
</div>
<div
id="progressbar"
class="mt-[3vw] md:mt-[0vw] h-[2.051vw] md:h-[0.26vw] rounded-[2vw] md:rounded-[0.521vw]"
>
<div
class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.26vw]"
></div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.post::before {
content: "";
position: absolute;
top: -8.1vw;
left: 0vw;
width: 3vw;
height: 8.1vw;
border-bottom-left-radius: 0.781vw;
box-shadow: -0.03vw 0.8vw 0 -0.026vw rgb(255, 255, 255);
}
.post::after {
content: "";
position: absolute;
top: 0.16vw;
left: 100%;
width: 3.083vw;
height: 2.083vw;
border-bottom-left-radius: 0.781vw;
box-shadow: -0.26vw 1.042vw 0 0.026vw rgb(255, 255, 255);
}
#progressbar {
background-color: #e5e5e5;
width: 100%;
}
#progressbar > div {
background-color: #0d3f40;
width: 77%;
float: left;
left: 0;
}
@media (max-width: 768px) {
.post::before {
content: "";
position: absolute;
top: -8.1vw;
left: 0vw;
width: 3vw;
height: 8.1vw;
border-bottom-left-radius: 3.59vw;
box-shadow: -0.03vw 2.8vw 0 -0.026vw rgb(255, 255, 255) ;
}
.post::after {
content: "";
position: absolute;
top: 3.4vw;
left: 100%;
width: 5.083vw;
height: 6.083vw;
border-bottom-left-radius: 3.59vw;
box-shadow: -1vw 2vw 0 0.026vw rgb(255, 255, 255) ;
}
}
</style>
components/courses-page/Courses-list.vue
+15 -4
View File
@@ -9,8 +9,8 @@
class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
>
<svg
width="24"
height="25"
class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +43,7 @@
</span>
<ul class="gap-x-[1vw] items-center hidden md:flex">
<li
class="pb-[0.5vw] text-primaryGreen border-b-[0.104vw] border-primaryGreen"
class="relative pb-[0.681vw] text-primaryGreen active"
>
همه دوره ها
</li>
@@ -89,4 +89,15 @@ const openSortOptions = () => {
}
};
</script>
</script>
<style>
.active::before{
content: '';
position: absolute;
background-color: #0D3F40;
width: 100%;
height: 0.01vw;
top: 2vw;
}
</style>
components/home-page/About-us.vue
+3 -3
View File
@@ -39,11 +39,11 @@
</template>
<style scoped>
<style>
@media (min-width: 768px) {
.panel {
background: url("./images/aboutUs.jpg");
background: url("public/images/aboutUs.jpg");
background-size: cover;
background-repeat: no-repeat !important;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
@@ -80,7 +80,7 @@
}
.panel {
background: url("./images/aboutUs.jpg");
background: url("public/images/aboutUs.jpg");
background-size: cover;
background-repeat: no-repeat !important;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
layouts/default.vue
+1 -1
View File
@@ -263,7 +263,7 @@
</nuxt-link>
</div>
<nuxt-link to="/signup">
<nuxt-link to="/account">
<img
src="/images/Profile.png"
alt="profile"
layouts/footer.vue
+15 -23
View File
@@ -7,7 +7,7 @@
$route.path === '/reset-password' ||
$route.path === '/new-password',
}"
class="hidden md:flexBox h-[19.479vw] bg-[#5C5C5C] flex-col space-y-[1vw]"
class="thin hidden md:flexBox h-[19.479vw] bg-[#5C5C5C] flex-col space-y-[1vw]"
>
<div
class="w-[81.04%] flex justify-between items-center text-white border-b pb-[5vw]"
@@ -21,8 +21,8 @@
<div>
<p class="text-[1.055vw] mt-[4vw]">خدمات مشتریان</p>
<p class="text-[0.833vw] mt-[1vw]">سوالات متداول</p>
<p class="text-[0.833vw] mt-[0.8vw]">قوانین سایت</p>
<p class="text-[0.833vw] mt-[1vw] text-[#E5E5E5]">سوالات متداول</p>
<p class="text-[0.833vw] mt-[0.8vw] text-[#E5E5E5]">قوانین سایت</p>
</div>
<svg
class="mt-[4vw] w-[31.719vw] h-[4.271vw]"
@@ -61,8 +61,7 @@
</p>
<div class="flex gap-[0.5vw]">
<svg
width="30"
height="30"
class="h-[1.563vw] w-[1.563vw]"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -84,23 +83,16 @@
fill="white"
/>
</svg>
<svg
class="h-[1.563vw] w-[1.563vw]"
viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15Z" fill="#878787"/>
<path d="M10.875 22.5H7.6875V12.4688H10.875V22.5ZM9.28125 11.0625C8.25 11.0625 7.5 10.3125 7.5 9.28125C7.5 8.25 8.34375 7.5 9.28125 7.5C10.3125 7.5 11.0625 8.25 11.0625 9.28125C11.0625 10.3125 10.3125 11.0625 9.28125 11.0625ZM22.5 22.5H19.3125V17.0625C19.3125 15.4688 18.6562 15 17.7187 15C16.7812 15 15.8437 15.75 15.8437 17.1562V22.5H12.6562V12.4688H15.6562V13.875C15.9375 13.2188 17.0625 12.1875 18.6562 12.1875C20.4375 12.1875 22.3125 13.2187 22.3125 16.3125V22.5H22.5Z" fill="white"/>
</svg>
<svg
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15Z"
fill="#878787"
/>
</svg>
<svg
width="30"
height="30"
class="h-[1.563vw] w-[1.563vw]"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -126,7 +118,7 @@
$route.path === '/reset-password' ||
$route.path === '/new-password',
}"
class="z-[10] fixed bottom-0 px-[5vw] flex bg-white w-full justify-around items-center md:hidden h-[19.479vw] shadow-2xl border-t"
class="thin z-[10] fixed bottom-0 px-[5vw] flex bg-white w-full justify-around items-center md:hidden h-[19.479vw] shadow-2xl border-t"
>
@@ -198,7 +190,7 @@
<span v-if="$route.path === '/about-us'" class="px-[2vw]">درباره ما</span>
</nuxt-link>
<nuxt-link to="/" class="bg-footerGreen text-primaryGreen font-semibold p-[2.564vw] flexBox rounded-[7.692vw]">
<nuxt-link to="/account" class="bg-footerGreen text-primaryGreen p-[2.564vw] flexBox rounded-[7.692vw]">
<svg
class="h-[6.154vw] w-[6.154vw]"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -206,7 +198,7 @@
<path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span v-if="$route.path === '/signup'" class="ps-[2vw]">پروفایل کاربری</span>
<span v-if="$route.path === '/account'" class="px-[2vw]">پروفایل کاربری</span>
</nuxt-link>
</footer>
</template>
layouts/profile.vue
+328
View File
File diff suppressed because one or more lines are too long
package-lock.json
Generated
+10 -1
View File
@@ -10,7 +10,8 @@
"nuxt": "^3.11.2",
"vue": "^3.4.27",
"vue-router": "^4.3.2",
"vue3-carousel-nuxt": "^1.1.1"
"vue3-carousel-nuxt": "^1.1.1",
"vue3-tabs-component": "^1.3.7"
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.12.0"
@@ -11787,6 +11788,14 @@
"vue3-carousel": "^0.3.3"
}
},
"node_modules/vue3-tabs-component": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/vue3-tabs-component/-/vue3-tabs-component-1.3.7.tgz",
"integrity": "sha512-nitYlPlTrKCW8msQS1HdtajYNRAfZsSP+2wQQymJDGDCK3um62mXP4oKUgAF5pRe6md86LMRQud7Ic3zmu7Zpg==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
package.json
+3 -2
View File
@@ -5,7 +5,7 @@
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"start": "PORT=3542 HOST=127.0.0.1 node .output/server/index.mjs",
"start": "PORT=5805 HOST=127.0.0.1 node .output/server/index.mjs",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
@@ -14,7 +14,8 @@
"nuxt": "^3.11.2",
"vue": "^3.4.27",
"vue-router": "^4.3.2",
"vue3-carousel-nuxt": "^1.1.1"
"vue3-carousel-nuxt": "^1.1.1",
"vue3-tabs-component": "^1.3.7"
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.12.0"
pages/account.vue
+5
View File
@@ -0,0 +1,5 @@
<template>
<NuxtLayout name="profile">
<NuxtPage />
</NuxtLayout>
</template>
pages/account/index.vue
+481
View File
@@ -0,0 +1,481 @@
<template>
<div class="flex flex-col md:flex-row justify-between w-full thin pb-[25vw] md:pb-0">
<div class="w-full md:w-[36.667vw]">
<div class="grid grid-cols-2 gap-3">
<div
class="h-[18.974vw] md:h-[5.469vw] bg-[#EFFAFE] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-[2.051vw] md:px-[1.25vw]"
>
<div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
<p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
1 روز
</p>
<p
class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
>
سابقه عضویت
</p>
</div>
<svg
class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
viewBox="0 0 45 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 3.75V9.375"
stroke="#66A0FF"
stroke-width="3"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M30 3.75V9.375"
stroke="#66A0FF"
stroke-width="3"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.5625 17.0437H38.4375"
stroke="#66A0FF"
stroke-width="3"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M39.375 15.9375V31.875C39.375 37.5 36.5625 41.25 30 41.25H15C8.4375 41.25 5.625 37.5 5.625 31.875V15.9375C5.625 10.3125 8.4375 6.5625 15 6.5625H30C36.5625 6.5625 39.375 10.3125 39.375 15.9375Z"
stroke="#66A0FF"
stroke-width="3"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22.4915 25.6875H22.5084"
stroke="#66A0FF"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15.5518 25.6875H15.5687"
stroke="#66A0FF"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15.5518 31.3125H15.5687"
stroke="#66A0FF"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div
class="h-[18.974vw] md:h-[5.469vw] bg-[#F9F6FF] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-6"
>
<div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
<p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
3 دوره
</p>
<p
class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
>
دوره های من
</p>
</div>
<svg
class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
viewBox="0 0 45 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.4937 38.2875H11.6438C5.71875 38.2875 3.75 34.35 3.75 30.3937V14.6062C3.75 8.68124 5.71875 6.71249 11.6438 6.71249H23.4937C29.4187 6.71249 31.3875 8.68124 31.3875 14.6062V30.3937C31.3875 36.3187 29.4 38.2875 23.4937 38.2875Z"
stroke="#A466FE"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M36.6 32.0625L31.3875 28.4063V16.575L36.6 12.9188C39.15 11.1375 41.25 12.225 41.25 15.3563V29.6438C41.25 32.775 39.15 33.8625 36.6 32.0625Z"
stroke="#A466FE"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M21.5625 20.625C23.1158 20.625 24.375 19.3658 24.375 17.8125C24.375 16.2592 23.1158 15 21.5625 15C20.0092 15 18.75 16.2592 18.75 17.8125C18.75 19.3658 20.0092 20.625 21.5625 20.625Z"
stroke="#A466FE"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div
class="h-[18.974vw] md:h-[5.469vw] bg-[#FFF7F4] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-6"
>
<div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
<p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
1 تیکت
</p>
<p
class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
>
تیکت ها
</p>
</div>
<svg
class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.5625 23.4375C36.5625 20.85 38.6625 18.75 41.25 18.75V16.875C41.25 9.375 39.375 7.5 31.875 7.5H13.125C5.625 7.5 3.75 9.375 3.75 16.875V17.8125C6.3375 17.8125 8.4375 19.9125 8.4375 22.5C8.4375 25.0875 6.3375 27.1875 3.75 27.1875V28.125C3.75 35.625 5.625 37.5 13.125 37.5H31.875C39.375 37.5 41.25 35.625 41.25 28.125C38.6625 28.125 36.5625 26.025 36.5625 23.4375Z" stroke="#FFA766" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.75 7.5L18.75 37.5" stroke="#FFA766" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5"/>
</svg>
</div>
<div
class="h-[18.974vw] md:h-[5.469vw] bg-[#FEEFF6] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-[1.25vw]"
>
<div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
<p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
0 تومان
</p>
<p
class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
>
کیف پول
</p>
</div>
<svg
class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
viewBox="0 0 45 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.825 25.4062C33.0375 26.175 32.5875 27.2812 32.7 28.4625C32.8688 30.4875 34.725 31.9687 36.75 31.9687H40.3125V34.2C40.3125 38.0812 37.1437 41.25 33.2625 41.25H11.7375C7.85625 41.25 4.6875 38.0812 4.6875 34.2V21.5813C4.6875 17.7 7.85625 14.5312 11.7375 14.5312H33.2625C37.1437 14.5312 40.3125 17.7 40.3125 21.5813V24.2813H36.525C35.475 24.2813 34.5188 24.6937 33.825 25.4062Z"
stroke="#FF66AD"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4.6875 23.2687V14.7001C4.6875 12.4688 6.05625 10.4812 8.1375 9.69374L23.025 4.06874C25.35 3.18749 27.8438 4.91255 27.8438 7.4063V14.5313"
stroke="#FF66AD"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M42.2978 26.194V30.0566C42.2978 31.0879 41.4728 31.9316 40.4228 31.9691H36.7478C34.7228 31.9691 32.8665 30.4878 32.6978 28.4628C32.5853 27.2816 33.0353 26.1753 33.8228 25.4066C34.5165 24.6941 35.4728 24.2816 36.5228 24.2816H40.4228C41.4728 24.3191 42.2978 25.1628 42.2978 26.194Z"
stroke="#FF66AD"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.125 22.5H26.25"
stroke="#FF66AD"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<div class="lastTickets mt-[20vw] md:mt-[2.917vw]">
<div class="flex flex-col">
<div class="flex justify-between items-center border-b pb-[0.733vw]">
<p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
آخرین تیکت ها
</p>
<p class="text-[2.836vw] md:text-[0.741vw] flex">
همه ی تیکت ها
<svg
class="ms-[2.051vw] w-[4.103vw] md:w-[1.042vw]"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.97501 5.44165L2.91667 10.5L7.97501 15.5583"
stroke="#0F3738"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17.0833 10.5H3.05833"
stroke="#0F3738"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</p>
</div>
<div class="flex justify-between items-center mt-[1.25vw] px-2">
<p class="text-[3.19vw] md:text-[0.833vw] text-[#000]">
طراحی سایت
</p>
<p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
1402/09/12
</p>
<p
class="flex justify-center items-center text-[2.518vw] md:text-[0.658vw] px-[2.564vw] md:px-[0.417vw] py-[2.051vw] md:py-[0.521vw] text-[#2ED573] bg-[#2ED5731A] rounded-[2.051vw] md:rounded-[0.521vw]"
>
پاسخ داده شده
</p>
</div>
<div class="flex justify-between items-center mt-[0.833vw] px-2">
<p class="text-[3.19vw] md:text-[0.833vw] text-[#000]">
طراحی سایت
</p>
<p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
1402/09/12
</p>
<p
class="flex justify-center items-center text-[2.518vw] md:text-[0.658vw] px-[2.564vw] md:px-[0.417vw] py-[2.051vw] md:py-[0.521vw] text-[#2ED573] bg-[#2ED5731A] rounded-[2.051vw] md:rounded-[0.521vw]"
>
پاسخ داده شده
</p>
</div>
</div>
</div>
<div class="lastCources mt-[20vw] md:mt-[2.917vw] mb-8">
<div class="flex flex-col">
<div class="flex justify-between items-center border-b pb-[0.833vw]">
<p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
آخرین دوره ها
</p>
<p class="text-[2.836vw] md:text-[0.741vw] flex">
همه ی دوره های ثبت نام شده
<svg
class="ms-2 w-[4.103vw] md:w-[1.042vw] h-[4.103vw] md:h-[1.042vw]"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.97501 5.44165L2.91667 10.5L7.97501 15.5583"
stroke="#0F3738"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17.0833 10.5H3.05833"
stroke="#0F3738"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 mt-[3vw] md:mt-[1.25vw] gap-[3vw] md:gap-[1.25vw]">
<ProgressCard />
<ProgressCard />
</div>
</div>
</div>
</div>
<div class="w-full md:w-[23.385vw]">
<div
class="bg-white mb-[1.25vw] pinkShadow p-[5vw] md:p-[1.25vw] flex flex-col profile w-full md:w-[23.385vw] h-[108.872vw] md:h-[26.25vw] rounded-[3.846vw] md:rounded-[0.781vw] space-y-[7vw] md:space-y-[1.5vw]"
>
<div class="flex justify-between items-center">
<p class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold">پروفایل</p>
<svg
class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.68 12.2287C13.5675 12.2175 13.4325 12.2175 13.3088 12.2287C10.6313 12.1387 8.505 9.945 8.505 7.245C8.505 4.48875 10.7325 2.25 13.5 2.25C16.2563 2.25 18.495 4.48875 18.495 7.245C18.4838 9.945 16.3575 12.1387 13.68 12.2287Z"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8.055 16.38C5.3325 18.2025 5.3325 21.1725 8.055 22.9837C11.1487 25.0537 16.2225 25.0537 19.3162 22.9837C22.0388 21.1612 22.0388 18.1913 19.3162 16.38C16.2337 14.3213 11.16 14.3213 8.055 16.38Z"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="flex justify-center items-center flex-col mt-[1.823vw]">
<img
src="/public/images/client1.png"
class="h-[27.949vw] md:h-[7.24vw] w-[27.949vw] md:w-[7.24vw] rounded-full"
alt=""
/>
<p class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold mt-[1.25vw]">
علی مصلحی
</p>
<p class="font-[400] text-[3.19vw] md:text-[0.833vw] text-[#878787] mt-[0.417vw]">
alimoslehi@
</p>
</div>
<div class="flex justify-between mt-[2.083vw]">
<svg
class="w-[4.615vw] md:w-[1.25vw] h-[4.615vw] md:h-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 4.07998L15.52 10.6C16.29 11.37 16.29 12.63 15.52 13.4L9 19.92"
stroke="#292D32"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="text-[#383E43] text-[4.038vw] md:text-[0.938vw] font-[600]">آذر</span>
<svg
class="h-[4.615vw] md:h-[1.25vw] w-[4.615vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 19.92L8.48 13.4C7.71 12.63 7.71 11.37 8.48 10.6L15 4.08002"
stroke="#292D32"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="grid grid-cols-5 md:grid-cols-7 mt-[0.833vw] justify-center">
<div class="hidden md:flex flex-col items-center">
<p
class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
>
18
</p>
<p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
سه شنبه
</p>
</div>
<div class="flex flex-col items-center">
<p
class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
>
17
</p>
<p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
دو شنبه
</p>
</div>
<div class="flex flex-col items-center">
<p
class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
>
16
</p>
<p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
یک شنبه
</p>
</div>
<div class="flex flex-col items-center activeDay">
<p
class="bg-white rounded-full text-[4.038vw] md:text-[0.938vw] w-[10.333vw] md:w-[1.979vw] h-[10.282vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
>
15
</p>
<p
class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[3vw] md:pt-[0.833vw] text-white"
>
شنبه
</p>
</div>
<div class="flex flex-col items-center">
<p
class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
>
14
</p>
<p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
جمعه
</p>
</div>
<div class="flex flex-col items-center">
<p
class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
>
13
</p>
<p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
پنج شنبه
</p>
</div>
<div class="hidden md:flex flex-col items-center">
<p
class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
>
12
</p>
<p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
چهار شنبه
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style scoped>
.activeDay {
background: linear-gradient(0deg, #0e8789 0%, rgba(34, 164, 166, 0.8) 100%);
width: 2.917vw;
height: 4.479vw;
border-radius: 1.563vw;
padding-top: 0.313vw;
}
@media (max-width: 768px) {
.activeDay {
background: linear-gradient(0deg, #0e8789 0%, rgba(34, 164, 166, 0.8) 100%);
width: 16.333vw;
height: 25.282vw;
border-radius: 7.692vw;
padding-top: 3vw;
}
}
</style>
pages/account/my-courses.vue
+94
View File
@@ -0,0 +1,94 @@
<template>
<div class="">
<tabs nav-item-active-class="text-primaryGreen relative" nav-class="scrolBar flex gap-[2vw] md:gap-[0.8vw] md:border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]" :options="{ useUrlFragment: false }">
<tab :name=tab1>
<div class="me-[4vw] grid grid-cols-1 md:grid-cols-3 mt-[6vw] md:mt-[1.25vw] gap-[1vw]">
<ProgressCard />
<ProgressCard />
</div>
</tab>
<tab :name=tab2>
محتوا دوم
</tab>
<tab :name=tab3>
محتوا سوم
</tab>
<tab :name=tab4>
محتوا سوم
</tab>
</tabs>
</div>
</template>
<script setup>
import ProgressCard from './../../../components/ProgressCard.vue'
import {Tabs, Tab} from 'vue3-tabs-component';
const tab1 =
`<p
class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg
class="hidden md:block w-[1.406vw] h-[1.406vw]"
viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
nav-item-active-class="stroke-primaryGreen"
d="M13.4663 24.75C19.6795 24.75 24.7163 19.7132 24.7163 13.5C24.7163 7.2868 19.6795 2.25 13.4663 2.25C7.25311 2.25 2.21631 7.2868 2.21631 13.5C2.21631 19.7132 7.25311 24.75 13.4663 24.75Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.83252 13.7587V11.88C9.83252 9.53999 11.4863 8.58374 13.5113 9.75374L15.1425 10.6987L16.7738 11.6437C18.7988 12.8137 18.7988 14.7262 16.7738 15.8962L15.1425 16.8412L13.5113 17.7862C11.4863 18.9562 9.83252 18 9.83252 15.66V13.7587Z" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
همه دوره ها
</p>`
const tab2 =
`<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4663 24.75C19.6795 24.75 24.7163 19.7132 24.7163 13.5C24.7163 7.2868 19.6795 2.25 13.4663 2.25C7.25311 2.25 2.21631 7.2868 2.21631 13.5C2.21631 19.7132 7.25311 24.75 13.4663 24.75Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.83252 13.7587V11.88C9.83252 9.53999 11.4863 8.58374 13.5113 9.75374L15.1425 10.6987L16.7738 11.6437C18.7988 12.8137 18.7988 14.7262 16.7738 15.8962L15.1425 16.8412L13.5113 17.7862C11.4863 18.9562 9.83252 18 9.83252 15.66V13.7587Z" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دوره های جاری
</p>`
const tab3 =
`<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.4536 21.4538C25.8524 17.055 25.8524 9.93373 21.4536 5.54623" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.54613 5.54623C1.14738 9.94498 1.14738 17.0663 5.54613 21.4538" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.7876 24.0862C10.9913 24.5025 12.2401 24.705 13.5001 24.705C14.7601 24.6938 16.0088 24.5025 17.2126 24.0862" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.7876 2.91379C10.9913 2.49754 12.2401 2.29498 13.5001 2.29498C14.7601 2.29498 16.0088 2.49754 17.2126 2.91379" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.83252 13.5V11.6213C9.83252 9.28127 11.4863 8.32501 13.5113 9.49501L15.1425 10.44L16.7738 11.385C18.7988 12.555 18.7988 14.4675 16.7738 15.6375L15.1425 16.5825L13.5113 17.5275C11.4863 18.6975 9.83252 17.7413 9.83252 15.4013V13.5Z" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دوره های گذرانده شده
</p>`
const tab4 =
`<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg
class="hidden md:block w-[1.406vw] h-[1.406vw]"
viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.75 13.5C24.75 14.9738 24.4688 16.3912 23.94 17.685C23.2088 17.1787 22.32 16.875 21.375 16.875C20.3175 16.875 19.3388 17.2463 18.5625 17.865C17.5275 18.6863 16.875 19.9575 16.875 21.375C16.875 22.2188 17.1112 23.0175 17.5275 23.6925C17.5725 23.7712 17.6288 23.85 17.6963 23.9288C16.4025 24.4575 14.985 24.75 13.5 24.75C7.29 24.75 2.25 19.71 2.25 13.5C2.25 7.29 7.29 2.25 13.5 2.25C19.71 2.25 24.75 7.29 24.75 13.5Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5527 13.5V11.9363C10.5527 10.0013 11.9252 9.20252 13.6015 10.17L14.9515 10.9463L16.3015 11.7225C17.9777 12.69 17.9777 14.2763 16.3015 15.2438L14.9515 16.02L13.6015 16.7963C11.9252 17.7638 10.5527 16.9763 10.5527 15.03V13.5Z" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.875 21.375C25.875 22.2187 25.6388 23.0175 25.2225 23.6925C24.9863 24.0975 24.6825 24.4575 24.3338 24.75C23.5463 25.4587 22.5112 25.875 21.375 25.875C19.8337 25.875 18.4838 25.0988 17.6963 23.9288C17.6288 23.85 17.5725 23.7712 17.5275 23.6925C17.1112 23.0175 16.875 22.2187 16.875 21.375C16.875 19.9575 17.5275 18.6863 18.5625 17.865C19.3387 17.2463 20.3175 16.875 21.375 16.875C22.32 16.875 23.2087 17.1787 23.94 17.685C25.11 18.495 25.875 19.845 25.875 21.375Z" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5788 22.545L20.1938 20.1712" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5564 20.205L20.1714 22.5788" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دوره های غیرفعال
</p>`
</script>
<style>
.tabs-component .tabs-component-tab .is-active p svg path{
stroke: #0D3F40;
}
.tabs-component .tabs-component-tab .is-active::before{
content: '';
position: absolute;
width: 100%;
height: 0.106vw;
top: 2.1vw !important;
background-color: #0D3F40;
}
</style>
pages/account/profile.vue
+106
View File
@@ -0,0 +1,106 @@
<template>
<div class="flex justify-between flex-col text-[#383E43]">
<div class="relative">
<img
src="/public/images/client3.png"
class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
alt=""
/>
<svg
class="h-[10.769vw] md:h-[2.188vw] w-[10.769vw] md:w-[2.188vw] absolute -bottom-[0.2vw] right-[4vw] md:right-[0.7vw]"
viewBox="0 0 42 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="21" cy="21" r="21" fill="#0D3F40" />
<path
d="M10.167 19.9167V17.75C10.167 13.9583 12.3337 12.3333 15.5837 12.3333H26.417C29.667 12.3333 31.8337 13.9583 31.8337 17.75V24.25C31.8337 28.0417 29.667 29.6667 26.417 29.6667H21.0003"
stroke="white"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M21.0003 23.7083C22.4961 23.7083 23.7087 22.4958 23.7087 21C23.7087 19.5042 22.4961 18.2917 21.0003 18.2917C19.5046 18.2917 18.292 19.5042 18.292 21C18.292 22.4958 19.5046 23.7083 21.0003 23.7083Z"
stroke="white"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M28.042 18.2917V23.7083"
stroke="white"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.167 24.7917H15.952C16.6454 24.7917 17.2087 25.355 17.2087 26.0483V27.435"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M11.4886 23.47L10.167 24.7917L11.4886 26.1133"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17.2087 30.5117H11.4236C10.7303 30.5117 10.167 29.9483 10.167 29.255V27.8683"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15.8887 31.8337L17.2103 30.512L15.8887 29.1903"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="relative items-center gap-[5vw] md:gap-0 grid grid-cols-1 md:grid-cols-2 mt-[2vw] w-full md:w-[65%]">
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label>
<input
type="text"
class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]"
/>
</div>
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
>نام و نام خانوادگی</label
>
<input
type="text"
class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]"
/>
</div>
<div class="flex flex-col space-y-[0.2vw]">
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">ایمیل</label>
<input
type="text"
class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]"
/>
</div>
<button
class="text-[3.59vw] md:text-[0.833vw] absolute md:left-[1vw] top-[80vw] md:top-[11vw] greenButton h-[13.59vw] md:h-[2.813vw] w-full md:w-[8.438vw] rounded-[2.564vw] md:rounded-[0.521vw] flexBox px-0"
>
ثبت اطلاعات
</button>
</div>
</div>
</template>
pages/account/tickets.vue
+186
View File
@@ -0,0 +1,186 @@
<template>
<div>
<tabs
nav-item-active-class="text-primaryGreen relative"
nav-class="scrolBar flex gap-[2vw] md:gap-[0.8vw] md:border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]"
:options="{ useUrlFragment: false }"
>
<div class="flex flex-col md:flex-col-reverse">
<div class="border-b md:border-0 py-[8vw] md:py-0">
<p
class="text-[4.038vw] md:text-[1.335vw] border-b border-b-[0.144vw] pb-[0.7vw]"
>
تیکت ها
</p>
<tab :name="tab1">
<div>
<ul class="space-y-[0.5vw] mt-[0.5vw]">
<li class="flex justify-between items-center">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
طراحی سایت
</p>
<p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
1402,09,12
</p>
<div class="flex items-center gap-[1vw]">
<button
class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
>
مشاوره
</button>
<button
class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
>
پاسخ داده شده
</button>
</div>
</li>
<li class="flex justify-between items-center">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
طراحی سایت
</p>
<p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
1402,09,12
</p>
<div class="flex items-center gap-[1vw]">
<button
class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
>
مشاوره
</button>
<button
class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
>
پاسخ داده شده
</button>
</div>
</li>
<li class="flex justify-between items-center">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
طراحی سایت
</p>
<p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
1402,09,12
</p>
<div class="flex items-center gap-[1vw]">
<button
class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
>
مشاوره
</button>
<button
class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
>
پاسخ داده شده
</button>
</div>
</li>
</ul>
</div>
</tab>
<tab :name="tab2"> محتوا دوم </tab>
<tab :name="tab3"> محتوا سوم </tab>
</div>
<button
class="flexBox items-center greenButton py-[5vw] md:py-0 my-[6vw] md:my-[3vw] rounded-[2.564vw] md:rounded-[0.781vw] text-[4.038vw] md:text-[0.938vw] w-full md:w-[15.479vw]"
>
<svg
class="w-[5.641vw] md:w-[1.406vw] h-[5.641vw] md:h-[1.406vw]"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.1196 4.5H7.86961C3.56086 4.5 2.35711 5.535 2.25586 9.5625C4.42711 9.5625 6.18211 11.3287 6.18211 13.5C6.18211 15.6712 4.42711 17.4262 2.25586 17.4375C2.35711 21.465 3.56086 22.5 7.86961 22.5H19.1196C23.6196 22.5 24.7446 21.375 24.7446 16.875V10.125C24.7446 5.625 23.6196 4.5 19.1196 4.5Z"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.1177 4.5V8.4375"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.1177 18.5625V22.5"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.903 10.4962L17.6005 11.9025C17.668 12.0375 17.803 12.1387 17.9493 12.1612L19.5018 12.3862C19.8843 12.4425 20.0418 12.915 19.7605 13.185L18.6355 14.2762C18.523 14.3775 18.478 14.535 18.5005 14.6925L18.7705 16.2337C18.838 16.6162 18.433 16.9087 18.0955 16.7287L16.7118 15.9975C16.5768 15.93 16.408 15.93 16.273 15.9975L14.8893 16.7287C14.5405 16.9087 14.1468 16.6162 14.2143 16.2337L14.4843 14.6925C14.5068 14.535 14.4618 14.3887 14.3493 14.2762L13.2355 13.185C12.9543 12.915 13.1118 12.4425 13.4943 12.3862L15.0468 12.1612C15.2043 12.1387 15.328 12.0487 15.3955 11.9025L16.0818 10.4962C16.2393 10.1475 16.7343 10.1475 16.903 10.4962Z"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
تیکت جدید
</button>
</div>
</tabs>
</div>
</template>
<script setup>
import { Tabs, Tab } from "vue3-tabs-component";
const tab1 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg
class="hidden md:block w-[1.406vw] h-[1.406vw]"
viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.9375 14.0625C21.9375 12.51 23.1975 11.25 24.75 11.25V10.125C24.75 5.625 23.625 4.5 19.125 4.5H7.875C3.375 4.5 2.25 5.625 2.25 10.125V10.6875C3.8025 10.6875 5.0625 11.9475 5.0625 13.5C5.0625 15.0525 3.8025 16.3125 2.25 16.3125V16.875C2.25 21.375 3.375 22.5 7.875 22.5H19.125C23.625 22.5 24.75 21.375 24.75 16.875C23.1975 16.875 21.9375 15.615 21.9375 14.0625Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.25 4.5L11.25 22.5" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5"/>
</svg>
همه تیکت ها
</p>`;
const tab2 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg
class="hidden md:block w-[1.406vw] h-[1.406vw]"
viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.2737 16.5291C21.2737 17.9803 22.4662 19.1616 23.9175 19.1616C23.9175 23.3803 22.86 24.4378 18.6412 24.4378H8.08875C3.87 24.4378 2.8125 23.3803 2.8125 19.1616V18.6441C4.26375 18.6441 5.45625 17.4516 5.45625 16.0003C5.45625 14.5491 4.26375 13.3566 2.8125 13.3566V12.8391C2.82375 8.6203 3.87 7.56281 8.08875 7.56281H18.63C22.8487 7.56281 23.9062 8.6203 23.9062 12.8391V13.8966C22.455 13.8966 21.2737 15.0666 21.2737 16.5291Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.2375 7.56281H8.01123L11.3075 4.26656C13.9962 1.57781 15.3462 1.57781 18.035 4.26656L18.71 4.94156C18.0012 5.65031 17.8325 6.69656 18.2375 7.56281Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.1138 7.56299L11.1138 24.438" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5"/>
</svg>
تیکت های باز
</p>`;
const tab3 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg
class="hidden md:block w-[1.406vw] h-[1.406vw]"
viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.2651 22.3538H19.5439C23.7064 22.3538 24.7414 21.3188 24.7414 17.1563C23.3014 17.1563 22.1426 15.9863 22.1426 14.5576C22.1426 13.1176 23.3014 11.9476 24.7414 11.9476V10.9126C24.7414 6.75009 23.7064 5.71509 19.5439 5.71509H12.3664V13.3538" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.3678 18.9787V22.3537H9.25151C7.58651 22.3537 6.60776 21.2175 5.52776 18.6075L5.32526 18.1012C6.68651 17.5612 7.35026 15.9862 6.77651 14.625C6.22526 13.2637 4.66151 12.6112 3.28901 13.1737L3.09776 12.69C1.47776 8.73 2.04026 7.34625 6.00026 5.715L8.97026 4.5L12.3678 12.735V15.6037" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.18246 22.3539H8.99121" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
تیکت های بسته
</p>`;
</script>
<style>
.tabs-component .tabs-component-tab .is-active p svg path {
stroke: #0d3f40;
}
.tabs-component .tabs-component-tab .is-active::before {
content: "";
position: absolute;
width: 100%;
height: 0.104vw;
top: 2.1vw;
background-color: #0d3f40;
}
</style>
pages/account/wallet.vue
+142
View File
@@ -0,0 +1,142 @@
<template>
<div class="flex flex-col md:flex-row justify-between">
<div class="w-full md:w-[41.5vw]">
<tabs nav-item-active-class="text-primaryGreen relative" nav-class="scrolBar flex gap-[2vw] md:gap-[0.8vw] border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]" :options="{ useUrlFragment: false }">
<div class="relative flex w-full flex-col-reverse md:flex-row">
<div class="w-full">
<tab :name=tab1>
<ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
<li class="flex justify-between items-center">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">طراحی سایت</p>
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">60,000</p>
<p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">1402,09,12</p>
<button class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]">واریز</button>
</li>
<li class="flex justify-between items-center">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">طراحی سایت</p>
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">60,000</p>
<p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">1402,09,12</p>
<div class="flex items-center gap-[1vw]">
<button class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]">برداشت</button>
</div>
</li>
</ul>
</tab>
<tab :name=tab2>
محتوا دوم
</tab>
<tab :name=tab3>
محتوا سوم
</tab>
</div>
<div class="my-[6vw] md:my-0 relative md:absolute left-0 md:-left-[20vw] absolute flexBox smallShadow w-full md:w-[18.906vw] h-[87.692vw] md:h-[20.729vw] rounded-[0.781vw]">
<div class="w-[75vw] md:w-[17.229vw] space-y-[8vw] md:space-y-[3vw]">
<div class="flex justify-between">
<p class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold">موجودی حساب</p>
<svg
class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.625 10.125H7.875" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.7498 12.3412V14.6588C24.7498 15.2775 24.2548 15.7837 23.6248 15.8062H21.4197C20.2047 15.8062 19.091 14.9175 18.9898 13.7025C18.9223 12.9937 19.1922 12.33 19.6647 11.8687C20.081 11.4412 20.6547 11.1938 21.2847 11.1938H23.6248C24.2548 11.2163 24.7498 11.7225 24.7498 12.3412Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.665 11.8687C19.1925 12.33 18.9225 12.9937 18.99 13.7025C19.0913 14.9175 20.205 15.8062 21.42 15.8062H23.625V17.4375C23.625 20.8125 21.375 23.0625 18 23.0625H7.875C4.5 23.0625 2.25 20.8125 2.25 17.4375V9.5625C2.25 6.5025 4.095 4.365 6.96375 4.005C7.25625 3.96 7.56 3.9375 7.875 3.9375H18C18.2925 3.9375 18.5737 3.94874 18.8437 3.99374C21.7462 4.33124 23.625 6.48 23.625 9.5625V11.1938H21.285C20.655 11.1938 20.0812 11.4412 19.665 11.8687Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p class="w-full text-end text-[4.544vw] md:text-[1.055vw]">
60,000
<span class="text-[2.836vw] md:text-[0.741vw] font-[400]">
تومان
</span>
</p>
<div class="pt-[10vw] md:pt-0 space-y-[3vw] md:space-y-[1vw]">
<p class="text-[3.19vw] md:text-[0.833vw] text-[#383E43]">مبلغ مورد نظر</p>
<input type="number" placeholder="تومان" class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]">
<button class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]">شارژ حساب</button>
</div>
</div>
</div>
</div>
</tabs>
</div>
</div>
</template>
<script setup>
import {Tabs, Tab} from 'vue3-tabs-component';
const tab1 =
`<p
class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.25 9.56808H24.75" stroke="#0D3F40" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.75 18.5681H9" stroke="#0D3F40" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.8125 18.5681H16.3125" stroke="#0D3F40" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.245 3.94308H19.7438C23.7488 3.94308 24.75 4.93308 24.75 8.88183V18.1181C24.75 22.0668 23.7488 23.0568 19.755 23.0568H7.245C3.25125 23.0681 2.25 22.0781 2.25 18.1293V8.88183C2.25 4.93308 3.25125 3.94308 7.245 3.94308Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
همه تراکنش ها
</p>`
const tab2 =
`<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.25 9.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.75 18.5625H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.8125 18.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.75 15.7838V18.1238C24.75 22.0725 23.7488 23.0625 19.755 23.0625H7.245C3.25125 23.0625 2.25 22.0725 2.25 18.1238V8.87625C2.25 4.9275 3.25125 3.9375 7.245 3.9375H16.3125" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5 3.9375V10.6875L24.75 8.4375" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5 10.6875L20.25 8.4375" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
واریزی ها
</p>`
const tab3 =
`<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.25 9.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.75 18.5625H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.8125 18.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.75 15.7838V18.1238C24.75 22.0725 23.7488 23.0625 19.755 23.0625H7.245C3.25125 23.0625 2.25 22.0725 2.25 18.1238V8.87625C2.25 4.9275 3.25125 3.9375 7.245 3.9375H16.3125" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5 10.6875V3.9375L24.75 6.1875" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5 3.9375L20.25 6.1875" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
برداشت ها
</p>`
</script>
<style>
.tabs-component .tabs-component-tab .is-active p svg path{
stroke: #0D3F40;
}
.tabs-component .tabs-component-tab .is-active::before{
content: '';
position: absolute;
width: 100%;
height: 0.104vw;
top: 2.1vw;
background-color: #0D3F40;
}
</style>
pages/index.vue
+7 -4
View File
@@ -1,7 +1,10 @@
<template>
<home-pageIntro />
<home-pageSuggested-courses />
<home-pageInformation />
<home-pageAbout-us />
<client-only>
<home-pageIntro />
<home-pageSuggested-courses />
<home-pageInformation />
<home-pageAbout-us />
</client-only>
</template>
tailwind.config.js
+1 -1
View File
@@ -8,7 +8,7 @@ export default {
primaryGreen: '#0D3F40',
primaryTextColor: '#383E43',
secondaryTextColor: '#878787',
footerGreen: '#D3EDED'
footerGreen: '#D3EDED',
}
}