localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

메인

Browse Source
This commit is contained in:
dyhj625 2025-03-31 15:50:42 +09:00
parent 7f6caed69e
commit f0ff9ced0d
2 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/main/BoardMain.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="col-md-6 col-lg-4 order-1 mb-6">
<div class="card h-100">
<div class="card-header nav-align-top">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<button
type="button"
class="nav-link active"
role="tab"
data-bs-toggle="tab"
data-bs-target="#navs-tabs-line-card-income"
aria-controls="navs-tabs-line-card-income"
aria-selected="true"
>
Income
</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab">Expenses</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab">Profit</button>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content p-0">
<div class="tab-pane fade show active" id="navs-tabs-line-card-income" role="tabpanel">
<div class="d-flex mb-6">
<div class="avatar flex-shrink-0 me-3">
<img src="/img/icons/unicons/wallet-primary.png" alt="User" />
</div>
<div>
<p class="mb-0">Total Balance</p>
<div class="d-flex align-items-center">
<h6 class="mb-0 me-1">$459.10</h6>
<small class="text-success fw-medium">
<i class="bx bx-chevron-up bx-lg"></i>
42.9%
</small>
</div>
</div>
</div>
<div id="incomeChart"></div>
<div class="d-flex align-items-center justify-content-center mt-6 gap-3">
<div class="flex-shrink-0">
<div id="expensesOfWeek"></div>
</div>
<div>
<h6 class="mb-0">Income this week</h6>
<small>$39k less than last week</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

4
src/views/MainView.vue
View File

@ -2,12 +2,16 @@
<div class="container-xxl flex-grow-1 container-p-y pb-0"> <div class="container-xxl flex-grow-1 container-p-y pb-0">
<MainEventCalendar /> <MainEventCalendar />
<MemberManagement v-if="isAdmin" /> <MemberManagement v-if="isAdmin" />
<div class="">
<BoardMain />
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import MainEventCalendar from '@/components/main/MainEventCalendar.vue'; import MainEventCalendar from '@/components/main/MainEventCalendar.vue';
import MemberManagement from '@/components/main/MemberManagement.vue'; import MemberManagement from '@/components/main/MemberManagement.vue';
import BoardMain from '@c/main/BoardMain.vue';
import { useUserInfoStore } from '@/stores/useUserInfoStore'; import { useUserInfoStore } from '@/stores/useUserInfoStore';
import { inject, onMounted, ref } from 'vue'; import { inject, onMounted, ref } from 'vue';
import $api from '@api'; import $api from '@api';