HAM!DREZA
94 lines
6.3 KiB
Vue
94 lines
6.3 KiB
Vue
<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> |