boursecu/boursecu_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change responsive]

Browse Source
This commit is contained in:
safavimohadeseh78
2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/dashboardItem.vue
+7 -7
View File
@@ -1,15 +1,15 @@
<template>
<div class="flex">
<div class="w-full flex md:block justify-between md:justify-unset items-center">
<div class="flex items-center gap-2 mx-2">
<div class="p-1 h-8 aspect-square rounded-full" :class="bgColor">
<div class="w-full min-w-0 rounded-lg border border-gray-100 bg-gray-50/60 px-3 py-2 lg:border-0 lg:bg-transparent lg:px-0 lg:py-0">
<div class="flex w-full min-w-0 items-center justify-between gap-2 lg:block">
<div class="flex min-w-0 items-center gap-2">
<div class="aspect-square h-8 shrink-0 rounded-full p-1" :class="bgColor">
<BaseIcon icon="vuesax-linear:profile-add" :class="textColor" />
</div>
<div class="text-xs font-bold">{{ title }}</div>
<div class="truncate text-xs font-bold">{{ title }}</div>
</div>
<div class="flex flex-row-reverse gap-1 mt-5 items-center md:w-full pl-2 items-end">
<div class="flex shrink-0 flex-row-reverse items-baseline gap-1 pl-1 lg:mt-5 lg:w-full lg:pl-2">
<div class="text-xs">{{ unit }}</div>
<div class="font-bold text-xl">{{ count }}</div>
<div class="font-bold text-lg lg:text-xl">{{ count ?? 0 }}</div>
</div>
</div>
</div>
src/pages/dashboard/index.vue
+124 -77
View File
@@ -1,49 +1,49 @@
<template>
<div class="p-5">
<a-spin size="large" :spinning="loading">
<div class="dashboard-page box-border h-full min-h-0 w-full max-w-full overflow-x-hidden overflow-y-auto p-3 md:p-4 lg:p-5">
<a-spin size="large" :spinning="loading" class="block min-w-0">
<div
class="w-full bg-[#0A1B37] flex p-2 rounded-lg md:justify-evenly flex-col shadow-lg"
class="dashboard-price-banner grid w-full min-w-0 gap-2 rounded-lg bg-[#0A1B37] p-3 shadow-lg sm:grid-cols-2 lg:flex lg:justify-evenly"
>
<div class="flex text-white gap-2 items-center">
<div>مظنه روز:</div>
<div class="font-bold">
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-white sm:col-span-2 lg:col-span-1">
<span class="shrink-0">مظنه روز:</span>
<span class="break-all font-bold">
{{ usePrice(parseInt(dashboardInf?.price ?? '0'), true, '') }}
</div>
<div class="text-xs">ریال</div>
</span>
<span class="text-xs">ریال</span>
</div>
<div class="flex text-white gap-2 items-center">
<div>آخرین تاریخ به روز رسانی:</div>
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-white">
<span>آخرین تاریخ به روز رسانی:</span>
</div>
<div class="flex text-white gap-2 items-center">
<div>هر مثقال طلا:</div>
<div class="font-bold"></div>
<div class="text-xs">ریال</div>
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-white">
<span class="shrink-0">هر مثقال طلا:</span>
<span class="break-all font-bold"></span>
<span class="text-xs">ریال</span>
</div>
</div>
<div class="flex flex-col items-center md:items-unset md:grid md:grid-cols-7 gap-4 mt-3">
<BaseCard class="w-full md:w-none md:col-span-7">
<div class="mt-3 flex w-full min-w-0 flex-col gap-3 md:gap-4 lg:grid lg:grid-cols-7 lg:items-start">
<BaseCard class="w-full min-w-0 lg:col-span-7">
<div class="text-lg font-bold">مشتری</div>
<div
class="flex flex-col md:flex-row justify-around mt-5 justify-between items-dashboard h-full"
class="items-dashboard mt-3 flex h-full flex-col gap-2 lg:mt-5 lg:flex-row lg:justify-between lg:gap-0"
>
<DashboardItem
class="md:w-1/3"
class="lg:w-1/3"
color="blue"
title="مشتری جدید"
unit="نفر"
:count="dashboardInf?.new_customer_single"
/>
<div class="h-[60%] hidden md:block bg-gray-200 w-[1px]" />
<div class="hidden h-[60%] w-[1px] bg-gray-200 lg:block" />
<DashboardItem
class="md:w-1/3"
class="lg:w-1/3"
color="green"
title="کل مشتریان"
unit="نفر"
:count="dashboardInf?.all_customer_single"
/>
<div class="h-[60%] hidden md:block bg-gray-200 w-[1px]" />
<div class="hidden h-[60%] w-[1px] bg-gray-200 lg:block" />
<DashboardItem
class="md:w-1/3"
class="lg:w-1/3"
color="orange"
title="مشتریان بایگانی شده"
unit="نفر"
@@ -51,7 +51,7 @@
/>
</div>
</BaseCard>
<BaseCard class="md:hidden w-full">
<BaseCard class="w-full min-w-0 lg:hidden">
<div class="grid grid-cols-3 gap-1 text-xs">
<div class="bg-blue-600 text-white rounded p-1">مجموع</div>
<div class="bg-blue-600 text-white rounded p-1">ریال</div>
@@ -108,36 +108,34 @@
</div>
</div>
</BaseCard>
<BaseCard class="w-full h-full md:col-span-7">
<BaseCard class="h-full w-full min-w-0 lg:col-span-7">
<ASpin :spinning="tarazLoading">
<div class="grid md:grid-cols-3 gap-3 mt-2">
<div>
<div class="md:flex content-center gap-3">
<div class="w-full md:flex items-baseline gap-2 bg-gray-100 p-2 rounded-lg">
<p class="font-bold mr-2">تاریخ تراز</p>
<div class="w-full flex items-baseline flex-1 gap-3">
<p class="font-bold">از:</p>
<BaseDatePicker
v-model:value="startTaraz"
format="YYYY-MM-DD HH:mm:ss"
class="flex-1"
/>
</div>
<div class="w-full flex items-baseline flex-1 gap-3">
<p class="font-bold">تا:</p>
<BaseDatePicker
v-model:value="endTaraz"
format="YYYY-MM-DD HH:mm:ss"
class="flex-1"
/>
</div>
<BaseButton @click="getTaraz()">ثبت تاریخ</BaseButton>
<div class="mt-2 grid min-w-0 gap-3 lg:grid-cols-3">
<div class="min-w-0">
<div class="flex w-full min-w-0 flex-col gap-3 rounded-lg bg-gray-100 p-3 lg:flex-row lg:items-end lg:p-2">
<p class="shrink-0 font-bold lg:mr-2">تاریخ تراز</p>
<div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
<p class="shrink-0 font-bold">از:</p>
<BaseDatePicker
v-model:value="startTaraz"
format="YYYY-MM-DD HH:mm:ss"
class="min-w-0 w-full flex-1"
/>
</div>
<div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
<p class="shrink-0 font-bold">تا:</p>
<BaseDatePicker
v-model:value="endTaraz"
format="YYYY-MM-DD HH:mm:ss"
class="min-w-0 w-full flex-1"
/>
</div>
<BaseButton class="w-full shrink-0 sm:w-auto" @click="getTaraz()">ثبت تاریخ</BaseButton>
</div>
<div class="flex font-bold p-2">
<div class="flex flex-wrap items-center gap-2 p-2 font-bold">
<span>جمع واریزی : </span>
<div class="mr-4">{{ usePrice(balance_?.income_money ?? 0) }}</div>
<div>{{ usePrice(balance_?.income_money ?? 0) }}</div>
</div>
</div>
<div
@@ -147,9 +145,9 @@
<span class="text-center text-base font-700 bg-yellow text-white rounded-lg">
تراز طلایی
</span>
<div class="flex flex-col md:flex-row items-center justify-between md:gap-15">
<div class="w-full flex flex-col gap-3">
<div class="flex justify-between mx-5">
<div class="flex flex-col items-stretch justify-between gap-3 lg:flex-row lg:items-center lg:gap-15">
<div class="flex w-full flex-col gap-3">
<div class="flex justify-between gap-2 px-2 lg:mx-5">
<span class="font-600">تراز اصلی:</span>
<span
class="text-base"
@@ -175,9 +173,9 @@
<span class="text-center text-base font-700 bg-blue-6 rounded-lg text-white">
تراز ریالی
</span>
<div class="flex flex-col md:flex-row items-center justify-between md:gap-15">
<div class="w-full flex flex-col gap-3">
<div class="flex justify-between mx-5">
<div class="flex flex-col items-stretch justify-between gap-3 lg:flex-row lg:items-center lg:gap-15">
<div class="flex w-full flex-col gap-3">
<div class="flex justify-between gap-2 px-2 lg:mx-5">
<span class="font-600">تراز اصلی:</span>
<span
class="text-base"
@@ -292,34 +290,34 @@
:series="sumOfSellCoworkerSeries"
></apexchart>
</BaseCard>-->
<BaseCard class="w-full md:grid md:col-span-7">
<div class="font-bold text-lg mt-2 text-center md:text-right">
<BaseCard class="w-full min-w-0 lg:col-span-7">
<div class="mt-2 text-center text-lg font-bold lg:text-right">
حسابداری گلد در یک نگاه
</div>
<div class="md:flex mt-6">
<div class="flex items-baseline flex-1 gap-3">
<p>از:</p>
<div class="mt-4 flex flex-col gap-3 lg:mt-6 lg:flex-row">
<div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
<p class="shrink-0">از:</p>
<BaseDatePicker
v-model:value="startDate"
@on-change="getTaraz"
format="YYYY-MM-DD HH:mm:ss"
class="flex-1"
class="min-w-0 w-full flex-1"
/>
</div>
<div class="flex items-baseline flex-1 gap-3">
<p class="md:mr-6">تا:</p>
<div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
<p class="shrink-0 lg:mr-6">تا:</p>
<BaseDatePicker
v-model:value="endDate"
@on-change="getTaraz"
format="YYYY-MM-DD HH:mm:ss"
class="flex-1"
class="min-w-0 w-full flex-1"
/>
</div>
</div>
<div class="grid-cols-1 grid gap-2 bg-green-100 rounded-lg shadow-lg">
<div class="p-4">
<div class="font-bold text-lg">دریافتی</div>
<div class="md:grid-cols-5 grid gap-2 mt-4">
<div class="grid-cols-1 grid gap-2 rounded-lg bg-green-100 shadow-lg">
<div class="p-3 lg:p-4">
<div class="text-lg font-bold">دریافتی</div>
<div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5 lg:gap-2">
<div>
<div>کل سود دریافت شده</div>
<div class="font-bold">{{ usePrice(balance?.fullPriceSood ?? 0) }}</div>
@@ -343,9 +341,9 @@
</div>
</div>
</div>
<div class="mt-4 bg-red-100 p-4 rounded-lg flex-col md:flex-row shadow-lg">
<div class="font-bold text-lg">خروجی</div>
<div class="md:grid-cols-2 grid mt-4">
<div class="mt-4 flex-col rounded-lg bg-red-100 p-3 shadow-lg lg:flex-row lg:p-4">
<div class="text-lg font-bold">خروجی</div>
<div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:gap-4">
<div>
<div>پاداش معرفی به گرم</div>
<div class="font-bold">{{ balance?.Gifts }}</div>
@@ -357,7 +355,7 @@
</div>
</div>
<div
class="mt-4 bg-blue-100 p-4 rounded-lg md:justify-evenly flex-col md:flex-row shadow-lg"
class="mt-4 flex-col rounded-lg bg-blue-100 p-3 shadow-lg lg:flex-row lg:justify-evenly lg:p-4"
>
<div>
<div class="font-bold text-lg">قیمت کل</div>
@@ -368,11 +366,11 @@
</div>
</div>
</BaseCard>
<BaseCard class="w-full md:w-none md:col-span-7">
<BaseCard class="w-full min-w-0 lg:col-span-7">
<div>
<div class="font-bold text-lg mt-2 text-center md:text-right">نوسانات قیمت</div>
<div id="chart">
<div class="toolbar text-center md:text-right mt-2 mb-2">
<div class="mt-2 text-center text-lg font-bold lg:text-right">نوسانات قیمت</div>
<div id="chart" class="min-w-0">
<div class="dashboard-chart-toolbar mt-2 mb-2 text-center lg:text-right">
<button
id="DAILY"
@click="updateData('DAILY')"
@@ -398,10 +396,10 @@
</button>
</div>
<div id="chart-timeline">
<div id="chart-timeline" class="min-w-0 overflow-hidden">
<apexchart
type="area"
height="350"
:height="chartHeight"
ref="chart"
:options="priceChartOptions"
:series="priceChartSeries"
@@ -432,6 +430,9 @@ import type { OthersPrices } from '@/model/othersPrices'
import { getNow, toJalaliNoTime } from '@core/utils/useDataTime'
import type { Balance } from '@/model/product'
import { getBalance } from "@/api/product";
import { isLargeScreen } from '@core/utils/responsive'
const chartHeight = computed(() => (isLargeScreen.value ? 350 : 280))
const tarazLoading = ref<boolean>(false)
const main = ref(null)
const type = ref<string>('week')
@@ -861,5 +862,51 @@ onMounted(() => {
@apply ! bg- [ #0A1B37 ] ! text-white rounded-lg;
}
.dashboard-chart-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
button {
border: 1px solid #d1d5db;
border-radius: 0.5rem;
background: #fff;
color: #374151;
cursor: pointer;
font-family: inherit;
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
transition: all 0.2s ease;
&.active,
&:hover {
background: #0a1b37;
border-color: #0a1b37;
color: #fff;
}
}
}
@media (min-width: 1024px) {
.dashboard-chart-toolbar {
justify-content: flex-start;
button {
font-size: 0.875rem;
}
}
}
.dashboard-page :deep(.ant-card) {
min-width: 0;
}
.dashboard-page :deep(.ant-picker) {
max-width: 100%;
min-width: 0;
width: 100%;
}
//chart
</style>