HAM!DREZA
142 lines
9.1 KiB
Vue
142 lines
9.1 KiB
Vue
<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> |