HAM!DREZA
520 lines
22 KiB
Vue
520 lines
22 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<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 class="flex flex-col flex-col-reverse pb-[10vw]">
|
|
<ul
|
|
class="space-y-[2vw] md:space-y-[0.5vw] mt-[0.5vw] border-b"
|
|
v-for="ticket in tickets.result"
|
|
:key="ticket.id"
|
|
>
|
|
|
|
<li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
|
|
|
|
|
|
<p
|
|
@click="openTicket(ticket.id)"
|
|
class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ ticket.subject }}
|
|
</p>
|
|
|
|
|
|
<p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
|
|
{{ jDate(ticket.createdAt) }}
|
|
</p>
|
|
|
|
<div class="basis-2/6 flex items-center justify-end gap-[1vw]">
|
|
<button
|
|
@click="openTicket(ticket.id)"
|
|
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>
|
|
<div class="chatBox">
|
|
<div
|
|
class=" grid justify-items-stretch w-full close"
|
|
:id="ticket.id"
|
|
>
|
|
<div class="flex flex-col flex-col-reverse">
|
|
<div v-if="loading" class="loadingText">درحال دریافت اطلاعات...</div>
|
|
<div
|
|
class="grid mt-[5vw] md:mt-0"
|
|
v-for="(message, index) in ticketMessages[0]
|
|
?.ticketMessages"
|
|
:key="index"
|
|
>
|
|
|
|
|
|
<div
|
|
class="justify-self-start rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
|
|
:class="{ 'justify-self-end rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] !bg-[#F4FDFD] mb-[1vw] text-[#383E43]' : message.createdBy.roles[0] === 'Admin' }"
|
|
|
|
>
|
|
<p class="text-[3.59vw] md:text-[1.055vw]">
|
|
{{ message.createdBy && "کاربر مهمان" }} {{ }}
|
|
</p>
|
|
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
|
{{ jDate(message.createdAt) }}
|
|
</p>
|
|
|
|
|
|
<p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
|
|
{{ message.content }}
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div
|
|
class="emptyText"
|
|
v-if="ticketMessages[0]
|
|
?.ticketMessages.length < 1">
|
|
گفتگویی جهت نمایش وجود ندارد
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="justify-self-end flex flex-col w-full mt-[8vw] md:mt-[1vw] grid justify-items-stretch"
|
|
>
|
|
<textarea
|
|
v-model="content"
|
|
placeholder="متن تیکت خود را بنویسید..."
|
|
class="textPlaceholer p-[4vw] md:p-[2vw] w-full bg-[#F5F5F5] rounded-[5.128vw] md:rounded-[1.042vw]"
|
|
name="message"
|
|
cols="30"
|
|
rows="10"
|
|
></textarea>
|
|
<button
|
|
class="greenButton text-[3.59vw] rounded-[2.564vw] md:rounded-[0.521vw] md:text-[0.833vw] w-full md:w-[10vw] float-left mt-[5vw] md:mt-[1vw] mb-[5vw] justify-self-end h-[12vw] md:h-[2.9vw]"
|
|
@click="sendMessage(ticket.id)"
|
|
>
|
|
ارسال
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</tab>
|
|
|
|
<tab :name="tab2">
|
|
<div class="flex flex-col flex-col-reverse pb-[10vw]">
|
|
<ul
|
|
class="space-y-[2vw] md:space-y-[0.5vw] mt-[0.5vw] border-b"
|
|
v-for="ticket in tickets.result"
|
|
:key="ticket.id"
|
|
v-show="ticket.status === 'active'"
|
|
>
|
|
<li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
|
|
|
|
<p
|
|
@click="openTicket(ticket.id)"
|
|
class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ ticket.subject }}
|
|
</p>
|
|
|
|
<p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
|
|
{{ jDate(ticket.createdAt) }}
|
|
</p>
|
|
|
|
<div class="basis-2/6 flex items-center justify-end gap-[1vw]">
|
|
<button
|
|
@click="openTicket(ticket.id)"
|
|
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>
|
|
<div class="chatBox">
|
|
<div
|
|
class="grid justify-items-stretch w-full close"
|
|
:id="ticket.id"
|
|
>
|
|
<div class="flex flex-col flex-col-reverse">
|
|
<div v-if="loading" class="loadingText">درحال دریافت اطلاعات...</div>
|
|
<div
|
|
class="justify-self-start mt-[5vw] md:mt-0"
|
|
v-for="(message, index) in ticketMessages[0]
|
|
?.ticketMessages"
|
|
:key="index"
|
|
>
|
|
<div
|
|
class="rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
|
|
>
|
|
<p class="text-[3.59vw] md:text-[1.055vw]">
|
|
{{ message.createdBy && "کاربر مهمان" }}
|
|
</p>
|
|
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
|
{{ message.createdAt }}
|
|
</p>
|
|
<p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
|
|
{{ message.content }}
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div
|
|
class="emptyText"
|
|
v-if="ticketMessages[0]
|
|
?.ticketMessages.length < 1">
|
|
محتوایی جهت نمایش وجود ندارد
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="justify-self-end flex flex-col w-full mt-[8vw] md:mt-[1vw] grid justify-items-stretch"
|
|
>
|
|
<textarea
|
|
v-model="content"
|
|
placeholder="متن تیکت خود را بنویسید..."
|
|
|
|
class="p-[4vw] md:p-[2vw] w-full bg-[#F5F5F5] rounded-[5.128vw] md:rounded-[1.042vw]"
|
|
name="message"
|
|
cols="30"
|
|
rows="10"
|
|
></textarea>
|
|
<button
|
|
class="greenButton text-[3.59vw] rounded-[2.564vw] md:rounded-[0.521vw] md:text-[0.833vw] w-full md:w-[10vw] float-left mt-[5vw] md:mt-[1vw] mb-[5vw] justify-self-end h-[12vw] md:h-[2.9vw]"
|
|
@click="sendMessage(ticket.id)"
|
|
>
|
|
ارسال
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</tab>
|
|
|
|
<tab :name="tab3">
|
|
<div class="flex flex-col flex-col-reverse pb-[10vw]">
|
|
<ul
|
|
class="space-y-[2vw] md:space-y-[0.5vw] mt-[0.5vw] border-b"
|
|
v-for="ticket in tickets.result"
|
|
:key="ticket.id"
|
|
v-show="ticket.status !== 'active'"
|
|
>
|
|
|
|
<li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
|
|
|
|
<p class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ ticket.subject }}
|
|
</p>
|
|
<p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
|
|
{{ jDate(ticket.createdAt) }}
|
|
</p>
|
|
<div class="basis-2/6 flex items-center justify-end 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>
|
|
<div class="chatBox">
|
|
|
|
<div
|
|
class="grid justify-items-stretch w-full hidden close"
|
|
:id="ticket.id"
|
|
>
|
|
<div class="flex flex-col flex-col-reverse">
|
|
<div v-if="loading" class="loadingText">درحال دریافت اطلاعات...</div>
|
|
<div
|
|
class="justify-self-start mt-[5vw] md:mt-0"
|
|
v-for="(message, index) in ticketMessages[0]
|
|
?.ticketMessages"
|
|
:key="index"
|
|
>
|
|
<div
|
|
class="emptyText"
|
|
v-if="ticketMessages[0]
|
|
?.ticketMessages.length < 1">
|
|
محتوایی جهت نمایش وجود ندارد
|
|
</div>
|
|
<div
|
|
class="rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
|
|
>
|
|
<p class="text-[3.59vw] md:text-[1.055vw]">
|
|
{{ message.createdBy && "کاربر مهمان" }}
|
|
</p>
|
|
|
|
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
|
{{ message.createdAt }}
|
|
</p>
|
|
<p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
|
|
{{ message.content }}
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div
|
|
class="justify-self-end flex flex-col w-full mt-[8vw] md:mt-[1vw] grid justify-items-stretch"
|
|
>
|
|
<textarea
|
|
v-model="content"
|
|
placeholder="پاسخ"
|
|
class="p-[4vw] md:p-[2vw] w-full bg-[#F5F5F5] rounded-[5.128vw] md:rounded-[1.042vw]"
|
|
name="message"
|
|
cols="30"
|
|
rows="10"
|
|
></textarea>
|
|
<button
|
|
class="greenButton text-[3.59vw] rounded-[2.564vw] md:rounded-[0.521vw] md:text-[0.833vw] w-full md:w-[10vw] float-left mt-[5vw] md:mt-[1vw] mb-[5vw] justify-self-end h-[12vw] md:h-[2.9vw]"
|
|
@click="sendMessage(ticket.id)"
|
|
>
|
|
ارسال
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</tab>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row justify-between">
|
|
<button
|
|
@click="addTicketForm = true"
|
|
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] h-[12vw] md:h-[3vw]"
|
|
>
|
|
<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 class="flex flex-col md:flex-row items-center gap-[0.5vw]" v-if="addTicketForm">
|
|
<input
|
|
v-model="subject"
|
|
class="w-full items-center md:h-[3vw] py-[5vw] md:py-0 my-[6vw] md:my-[3vw] rounded-[2.564vw] md:rounded-[0.781vw] border text-[4.038vw] md:text-[0.938vw] ps-[3vw] md:ps-[2vw] md:pe-[10vw]"
|
|
type="text" placeholder="موضوع تیکت را وارد کنید">
|
|
<button
|
|
class="h-[12vw] w-full md:w-auto md:h-[3vw] px-[1.5vw] greenButton rounded-[2.564vw] md:rounded-[0.781vw] text-[4.038vw] md:text-[0.938vw]
|
|
"
|
|
@click="sendTicket"
|
|
>ثبت</button>
|
|
<button class="mt-[1vw] md:mt-0 h-[12vw] w-full md:w-auto md:h-[3vw] px-[1.5vw] bg-red-500 md:h-[3vw] text-white rounded-[2.564vw] md:rounded-[0.781vw] text-[4.038vw] md:text-[0.938vw]
|
|
"
|
|
@click="addTicketForm = false"
|
|
>انصراف</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</tabs>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import {Tabs, Tab} from 'vue3-tabs-component';
|
|
import { useToast } from 'vue-toastification'
|
|
const toast = useToast()
|
|
|
|
const { data: tickets, refresh: load } = await useFetch("/api/ticket/getTickets");
|
|
const loading = ref(false);
|
|
const addTicketForm = ref(false);
|
|
const subject = ref(null);
|
|
const content = ref(null);
|
|
const ticketMessages = ref([]);
|
|
const update = ref(null)
|
|
const day = ref([])
|
|
const month = ref([])
|
|
const year = ref([])
|
|
const shamsi = ref([])
|
|
|
|
tickets.value.result.map(item =>{
|
|
item = new Date(item.createdAt)
|
|
year.value.push(item.getFullYear())
|
|
month.value.push(item.getMonth() + 1)
|
|
day.value.push(item.getDate())
|
|
})
|
|
|
|
const combinedItems = year.value.map((year, index) => ({
|
|
year,
|
|
month: month.value[index],
|
|
day: day.value[index],
|
|
}));
|
|
|
|
|
|
const values = combinedItems.map(item =>(
|
|
Object.values(item)
|
|
))
|
|
const jalali = ref([])
|
|
const shamsis = values.map(item => (
|
|
jalali.value.push(gregorian_to_jalali(item[0],item[1],item[2]))
|
|
|
|
))
|
|
|
|
|
|
|
|
|
|
const sendTicket = async () => {
|
|
if (subject.value === null) {
|
|
return toast.error("موضوع تیکت را وارد کنید")
|
|
}
|
|
const data = await useFetch("/api/ticket/send", {
|
|
method: "POST",
|
|
body: {
|
|
subject: subject.value,
|
|
},
|
|
});
|
|
load()
|
|
addTicketForm.value = false;
|
|
subject.value = null;
|
|
toast.success('تیکت جدید با موفقیت ثبت شد')
|
|
// location.reload()
|
|
|
|
};
|
|
|
|
const openTicket = async (data) => {
|
|
loading.value = true;
|
|
ticketMessages.value = [];
|
|
if (process.client) {
|
|
const slides = document.getElementsByClassName("close");
|
|
for (let i = 0; i < slides.length; i++) {
|
|
if (slides[i].id === data) {
|
|
slides[i].style.maxHeight = slides[i].scrollHeight + "vh";
|
|
} else {
|
|
slides[i].style.maxHeight = null;
|
|
}
|
|
|
|
}
|
|
}
|
|
const {data: single, refresh: reload} = await useFetch("/api/ticket/id", {
|
|
method: 'POST',
|
|
query: {
|
|
id: data,
|
|
},
|
|
});
|
|
|
|
ticketMessages.value.push(single.value);
|
|
|
|
loading.value = false;
|
|
};
|
|
const sendMessage = async (data, reload) => {
|
|
if (content.value === null || '') {
|
|
return toast.error("متن تیکت را وارد کنید")
|
|
}
|
|
const message = await useFetch("/api/ticket/message", {
|
|
method: "POST",
|
|
body: {
|
|
content: content.value,
|
|
ticketId: data,
|
|
},
|
|
});
|
|
content.value = "";
|
|
toast.success("تیکت جدید با موفقیت ثبت")
|
|
openTicket().reload()
|
|
};
|
|
|
|
|
|
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="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11.25 4.5L11.25 22.5" stroke="#878787" 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> |