HAM!DREZA
186 lines
9.3 KiB
Vue
186 lines
9.3 KiB
Vue
<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> |