664 lines
20 KiB
Vue
664 lines
20 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<NuxtLayout name="default" :menu="sidbarMenu">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-6 mb-5 mb-xl-10">
|
||
|
|
<div class="card card-flush h-xl-100">
|
||
|
|
<div class="card-header pt-7">
|
||
|
|
<h3 class="card-title align-items-start flex-column">
|
||
|
|
<span class="card-label fw-bold text-dark"
|
||
|
|
>جستجوهای کاربران</span
|
||
|
|
>
|
||
|
|
|
||
|
|
<span class="text-gray-400 pt-2 fw-semibold fs-6"
|
||
|
|
>آخرین عبارات جستجو</span
|
||
|
|
>
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="dropdown" v-if="false">
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-light dropdown-toggle"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
PDF Report
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
|
||
|
|
data-kt-menu="true"
|
||
|
|
>
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Remove </a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Mute </a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Settings </a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-body pt-5">
|
||
|
|
<div
|
||
|
|
id="kt_charts_widget_15_chart"
|
||
|
|
class="min-h-auto ps-4 pe-6 mb-3 h-300px"
|
||
|
|
>
|
||
|
|
<!-- <pie
|
||
|
|
:dataChart="listLastSearchText"
|
||
|
|
style="height: 100%; position: relative"
|
||
|
|
></pie> -->
|
||
|
|
<WordCloud
|
||
|
|
:key="chartRender"
|
||
|
|
width="100%"
|
||
|
|
:data="listLastSearchText"
|
||
|
|
gridSize="10"
|
||
|
|
class="h-100 position-relative"
|
||
|
|
></WordCloud>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-6 mb-5 mb-xl-10">
|
||
|
|
<div class="card card-flush h-xl-100">
|
||
|
|
<div class="card-header pt-7">
|
||
|
|
<h3 class="card-title align-items-start flex-column">
|
||
|
|
<span class="card-label fw-bold text-dark"
|
||
|
|
>جستجوهای کاربران</span
|
||
|
|
>
|
||
|
|
|
||
|
|
<span class="text-gray-400 pt-2 fw-semibold fs-6"
|
||
|
|
>بر حسب بیشترین تکرار جستجو</span
|
||
|
|
>
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="dropdown" v-if="false">
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-light dropdown-toggle"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
PDF Report
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
|
||
|
|
data-kt-menu="true"
|
||
|
|
>
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Remove </a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Mute </a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="menu-item px-3">
|
||
|
|
<a href="#" class="menu-link px-3"> Settings </a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-body pt-5">
|
||
|
|
<!--begin::Chart container-->
|
||
|
|
<div
|
||
|
|
id="kt_charts_widget_15_chart"
|
||
|
|
class="min-h-auto ps-6 pe-6 mb-3 h-300px"
|
||
|
|
dir="ltr"
|
||
|
|
style="direction: ltr"
|
||
|
|
>
|
||
|
|
<WordCloud
|
||
|
|
:key="chartRender2"
|
||
|
|
width="100%"
|
||
|
|
gridSize="10"
|
||
|
|
:data="listMaxSearchText"
|
||
|
|
class="h-100 position-relative"
|
||
|
|
></WordCloud>
|
||
|
|
|
||
|
|
<!-- <pie-chart
|
||
|
|
:data="pieData"
|
||
|
|
class="h-100 position-relative"
|
||
|
|
></pie-chart> -->
|
||
|
|
</div>
|
||
|
|
<!--end::Chart container-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-6 mb-5 mb-xl-10">
|
||
|
|
<div class="card card-flush h-xl-100">
|
||
|
|
<div class="card-header pt-7">
|
||
|
|
<h3 class="card-title align-items-start flex-column">
|
||
|
|
<span class="card-label fw-bold text-dark"
|
||
|
|
>مراجعات کاربران</span
|
||
|
|
>
|
||
|
|
|
||
|
|
<span class="text-gray-400 pt-2 fw-semibold fs-6"
|
||
|
|
>عناوین پرتکرار اسنادی که کاربران متن آن را مشاهده
|
||
|
|
کردند</span
|
||
|
|
>
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="dropdown">
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-light dropdown-toggle"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
{{ selectedDropdownFavorite }}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
|
||
|
|
data-kt-menu="true"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="menu-item px-3"
|
||
|
|
v-for="(item, index) in dateFilterList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<button-component
|
||
|
|
@click="getFavoriteData(item.key)"
|
||
|
|
:title="item.title"
|
||
|
|
class="menu-link px-3"
|
||
|
|
:classes="{
|
||
|
|
active: favoriteActiveItem == item.key,
|
||
|
|
}"
|
||
|
|
:buttonText="item.title"
|
||
|
|
></button-component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-body pt-5">
|
||
|
|
<div
|
||
|
|
id="kt_charts_widget_15_chart"
|
||
|
|
class="min-h-auto ps-4 pe-6 mb-3 h-300px"
|
||
|
|
>
|
||
|
|
<!-- <pie-donut
|
||
|
|
:dataPie="favoriteData"
|
||
|
|
:PieOptions="PieOptions"
|
||
|
|
style="height: 100%; position: relative"
|
||
|
|
></pie-donut> -->
|
||
|
|
<WordCloud
|
||
|
|
:key="favoriteRender"
|
||
|
|
width="100%"
|
||
|
|
:data="favoriteData"
|
||
|
|
gridSize="10"
|
||
|
|
class="h-100 position-relative"
|
||
|
|
></WordCloud>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-6 mb-5 mb-xl-10">
|
||
|
|
<div class="card card-flush h-xl-100">
|
||
|
|
<div class="card-header pt-7">
|
||
|
|
<h3 class="card-title align-items-start flex-column">
|
||
|
|
<span class="card-label fw-bold text-dark"
|
||
|
|
>علامت گذاری کاربران</span
|
||
|
|
>
|
||
|
|
|
||
|
|
<span class="text-gray-400 pt-2 fw-semibold fs-6"
|
||
|
|
>عناوین پرتکرار اسنادی که کاربران متن آن را علامتگذاری
|
||
|
|
کردند</span
|
||
|
|
>
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="dropdown">
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-light dropdown-toggle"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
{{ selectedDropdownBookMark }}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
|
||
|
|
data-kt-menu="true"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="menu-item px-3"
|
||
|
|
v-for="(item, index) in dateFilterList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<button-component
|
||
|
|
@click="getBookMarkData(item.key)"
|
||
|
|
:title="item.title"
|
||
|
|
class="menu-link px-3"
|
||
|
|
:buttonText="item.title"
|
||
|
|
:classes="{
|
||
|
|
active: bookMarkActiveItem == item.key,
|
||
|
|
}"
|
||
|
|
></button-component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-body pt-5">
|
||
|
|
<div
|
||
|
|
id="kt_charts_widget_15_chart"
|
||
|
|
class="min-h-auto ps-4 pe-6 mb-3 h-300px"
|
||
|
|
>
|
||
|
|
<!-- <Bar
|
||
|
|
:dataChart="bookMarkData"
|
||
|
|
style="height: 100%; position: relative"
|
||
|
|
></Bar> -->
|
||
|
|
<WordCloud
|
||
|
|
:key="bookMarkRender"
|
||
|
|
width="100%"
|
||
|
|
:data="bookMarkData"
|
||
|
|
gridSize="10"
|
||
|
|
class="h-100 position-relative"
|
||
|
|
></WordCloud>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</NuxtLayout>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import adminMenu from "~/json/admin/json/menu.json";
|
||
|
|
import { useCommonStore } from "~/stores/commonStore";
|
||
|
|
import { mapState } from "pinia";
|
||
|
|
import reportExtension from "~/extensions/reportExtension";
|
||
|
|
// import HttpService from "@services/httpService";
|
||
|
|
import adminApi from "~/apis/adminApi";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
// name: "admin",
|
||
|
|
setup() {
|
||
|
|
definePageMeta({
|
||
|
|
layout: false,
|
||
|
|
// name: "admin",
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
extends: reportExtension,
|
||
|
|
beforeMount() {
|
||
|
|
this.httpService = useNuxtApp()["$http"];
|
||
|
|
},
|
||
|
|
beforeCreate() {
|
||
|
|
// ApiService.init(process.env.VUE_APP_REPO_BASE_URL);
|
||
|
|
// this.permitHttpService = new HttpService();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
const vm = this;
|
||
|
|
// ,vm.getData("nokeys")
|
||
|
|
Promise.allSettled([vm.getData("last", 20), vm.getData("count", 100)]).then(
|
||
|
|
function (results) {
|
||
|
|
results.forEach((result, index) => {
|
||
|
|
if (result.status === "fulfilled" && result.value?.length)
|
||
|
|
result.value?.forEach((element) => {
|
||
|
|
if (index == 0) {
|
||
|
|
let splittedTitles = element.key.split(" ");
|
||
|
|
|
||
|
|
if (splittedTitles.length > 4) {
|
||
|
|
let title = "";
|
||
|
|
for (let i = 0; i < 4; i++)
|
||
|
|
title += splittedTitles[i] + (i == 3 ? "..." : " ");
|
||
|
|
|
||
|
|
element.key = title;
|
||
|
|
}
|
||
|
|
|
||
|
|
vm.listLastSearchText.push({
|
||
|
|
category: element.key,
|
||
|
|
value: element.doc_count,
|
||
|
|
name: element.key,
|
||
|
|
weight: element.doc_count,
|
||
|
|
});
|
||
|
|
} else if (index == 1)
|
||
|
|
vm.listMaxSearchText.push({
|
||
|
|
// for list
|
||
|
|
category: element.key,
|
||
|
|
value: element.doc_count,
|
||
|
|
// for cload chart
|
||
|
|
name: element.key,
|
||
|
|
weight: element.doc_count,
|
||
|
|
});
|
||
|
|
// else if (index == 1)
|
||
|
|
// vm.noKeysData.push({
|
||
|
|
// category: element.key,
|
||
|
|
// value: element.doc_count,
|
||
|
|
// });
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
vm.showCharts = true;
|
||
|
|
}
|
||
|
|
);
|
||
|
|
setTimeout(() => {
|
||
|
|
this.chartRender++;
|
||
|
|
this.chartRender2++;
|
||
|
|
}, 1000);
|
||
|
|
|
||
|
|
this.getFavoriteData();
|
||
|
|
this.getBookMarkData();
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selectedDropdownFavorite: "",
|
||
|
|
selectedDropdownBookMark: "",
|
||
|
|
PieOptions: {
|
||
|
|
radius: ["40%", "70%"],
|
||
|
|
selectedMode: "single",
|
||
|
|
},
|
||
|
|
menu: adminMenu,
|
||
|
|
bookMarkActiveItem: "all",
|
||
|
|
favoriteActiveItem: "all",
|
||
|
|
favoriteRender: 0,
|
||
|
|
bookMarkRender: 0,
|
||
|
|
chartRender: 0,
|
||
|
|
chartRender2: 0,
|
||
|
|
dateFilterList: [
|
||
|
|
{
|
||
|
|
title: "تا یک روز ",
|
||
|
|
key: "day",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "تا یک هفته ",
|
||
|
|
key: "week",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "تا یک ماه",
|
||
|
|
key: "month",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "تا شش ماه",
|
||
|
|
key: "month6",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "تا یک سال",
|
||
|
|
key: "year",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "همه",
|
||
|
|
key: "all",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
lastSearchInListMode: true,
|
||
|
|
topRepeatInListMode: true,
|
||
|
|
systems: [],
|
||
|
|
db: undefined,
|
||
|
|
// permitHttpService: undefined,
|
||
|
|
listLastSearchText: [],
|
||
|
|
noKeysData: [],
|
||
|
|
listMaxSearchText: [],
|
||
|
|
bookMarkData: [],
|
||
|
|
favoriteData: [],
|
||
|
|
showCharts: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(useCommonStore, ["isSidebarCollapsed"]),
|
||
|
|
sidbarMenu() {
|
||
|
|
return adminMenu;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getFavoriteData(timeKey = "all") {
|
||
|
|
this.favoriteActiveItem = timeKey;
|
||
|
|
this.selectedDropdownFavorite =
|
||
|
|
this.dateFilterList.find((item) => item.key === timeKey)?.title ||
|
||
|
|
"انتخاب تاریخ";
|
||
|
|
|
||
|
|
// if (this.fetchingData) return;
|
||
|
|
// this.fetchingData = true;
|
||
|
|
let url = adminApi.favorite.favoriteList;
|
||
|
|
// url = url.replace("{{@data_type}}", "favorite");
|
||
|
|
url = url.replace("@data_type", "history");
|
||
|
|
url = url.replace("@time_key", timeKey);
|
||
|
|
return this.httpService
|
||
|
|
.getRequest(url)
|
||
|
|
.then((response) => {
|
||
|
|
let res = response.aggregations.result.buckets;
|
||
|
|
let chartData = [];
|
||
|
|
res.forEach((element) => {
|
||
|
|
let splittedTitles = element.key.split(" ");
|
||
|
|
if (splittedTitles.length > 4) {
|
||
|
|
let title = "";
|
||
|
|
for (let i = 1; i < 4; i++)
|
||
|
|
title += splittedTitles[i] + (i == 3 ? "..." : " ");
|
||
|
|
element.key = title;
|
||
|
|
}
|
||
|
|
chartData.push({
|
||
|
|
category: element.key,
|
||
|
|
value: element.doc_count,
|
||
|
|
name: element.key,
|
||
|
|
weight: element.doc_count,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
this.favoriteData = chartData;
|
||
|
|
this.favoriteRender++;
|
||
|
|
// vm.fetchingData = false;
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// vm.fetchingData = false;
|
||
|
|
// vm.$alert(error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getBookMarkData(timeKey = "all") {
|
||
|
|
this.bookMarkActiveItem = timeKey;
|
||
|
|
this.selectedDropdownBookMark =
|
||
|
|
this.dateFilterList.find((item) => item.key === timeKey)?.title ||
|
||
|
|
"انتخاب تاریخ";
|
||
|
|
// if (this.fetchingData) return;
|
||
|
|
// this.fetchingData = true;
|
||
|
|
let url = adminApi.favorite.bookmarkList;
|
||
|
|
// url = url.replace("@data_type", "favorite");
|
||
|
|
url = url.replace("@data_type", "bookmark");
|
||
|
|
url = url.replace("@time_key", timeKey);
|
||
|
|
return this.httpService
|
||
|
|
.getRequest(url)
|
||
|
|
.then((response) => {
|
||
|
|
let res = response.aggregations.result.buckets;
|
||
|
|
let chartData = [];
|
||
|
|
res.forEach((element) => {
|
||
|
|
chartData.push({
|
||
|
|
category: element.key,
|
||
|
|
value: element.doc_count,
|
||
|
|
name: element.key,
|
||
|
|
weight: element.doc_count,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
this.bookMarkData = chartData;
|
||
|
|
this.bookMarkRender++;
|
||
|
|
console.log("🟢 ~ .then ~ bookMarkData:", bookMarkData);
|
||
|
|
// vm.fetchingData = false;
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// vm.fetchingData = false;
|
||
|
|
// vm.$alert(error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
// WordCloud: () => import("@components/charts/WordCloud.vue"),
|
||
|
|
// Pie: () => import("@components/charts/Pie.vue"),
|
||
|
|
// PieDonut: () => import("@components/charts/PieDonut.vue"),
|
||
|
|
// Bar: () => import("@components/charts/Bar.vue"),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.pages-content-container {
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.text-dark {
|
||
|
|
color: var(--bs-text-dark) !important;
|
||
|
|
}
|
||
|
|
.pt-7 {
|
||
|
|
padding-top: 1.75rem !important;
|
||
|
|
}
|
||
|
|
.fw-bold {
|
||
|
|
font-weight: 600 !important;
|
||
|
|
}
|
||
|
|
.text-dark {
|
||
|
|
color: var(--bs-text-dark) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fw-semibold {
|
||
|
|
font-weight: 500 !important;
|
||
|
|
}
|
||
|
|
.fs-6 {
|
||
|
|
font-size: 1.075rem !important;
|
||
|
|
}
|
||
|
|
.text-gray-400 {
|
||
|
|
color: var(--bs-text-gray-400) !important;
|
||
|
|
}
|
||
|
|
.min-h-auto {
|
||
|
|
min-height: auto !important;
|
||
|
|
}
|
||
|
|
.ps-4 {
|
||
|
|
padding-left: 1rem !important;
|
||
|
|
}
|
||
|
|
.pe-6 {
|
||
|
|
padding-right: 1.5rem !important;
|
||
|
|
}
|
||
|
|
.h-300px {
|
||
|
|
// height: 300px !important;
|
||
|
|
height: 30em !important;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
--bs-text-gray-400: #b5b5c3;
|
||
|
|
--bs-body-bg: #fff;
|
||
|
|
--bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
|
||
|
|
--bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
|
||
|
|
--bs-menu-dropdown-bg-color: var(--bs-body-bg);
|
||
|
|
|
||
|
|
--bs-card-spacer-y: 1rem;
|
||
|
|
--bs-card-spacer-x: 1rem;
|
||
|
|
--bs-card-title-spacer-y: 0.5rem;
|
||
|
|
--bs-card-title-color: ;
|
||
|
|
--bs-card-subtitle-color: ;
|
||
|
|
--bs-card-border-width: 1px;
|
||
|
|
--bs-card-border-color: var(--bs-border-color);
|
||
|
|
--bs-card-border-radius: 0.625rem;
|
||
|
|
--bs-card-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
|
||
|
|
|
||
|
|
--bs-card-bg: #f8f9fa;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 0;
|
||
|
|
height: var(--bs-card-height);
|
||
|
|
word-wrap: break-word;
|
||
|
|
background-color: var(--bs-card-bg);
|
||
|
|
background-clip: border-box;
|
||
|
|
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
|
||
|
|
border-radius: var(--bs-card-border-radius);
|
||
|
|
box-shadow: var(--bs-card-box-shadow);
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
&.card-flush > .card-header {
|
||
|
|
border-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
.card-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: stretch;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
min-height: 70px;
|
||
|
|
padding: 0 2.25rem;
|
||
|
|
color: var(--bs-card-cap-color);
|
||
|
|
background-color: var(--bs-card-cap-bg);
|
||
|
|
border-bottom: 1px solid var(--bs-card-border-color);
|
||
|
|
|
||
|
|
.card-title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0.5rem;
|
||
|
|
margin-left: 0;
|
||
|
|
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--bs-text-dark);
|
||
|
|
|
||
|
|
&.flex-column {
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-label {
|
||
|
|
margin: 0 0.75rem 0 0;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--bs-text-dark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-toolbar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-body {
|
||
|
|
padding: 2rem 2.25rem;
|
||
|
|
color: var(--bs-card-color);
|
||
|
|
flex: 1 1 auto;
|
||
|
|
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
|
||
|
|
color: var(--bs-card-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-sub-dropdown {
|
||
|
|
border-radius: 0.475rem;
|
||
|
|
background-color: var(--bs-menu-dropdown-bg-color);
|
||
|
|
box-shadow: var(--bs-menu-dropdown-box-shadow);
|
||
|
|
z-index: 107;
|
||
|
|
text-align: right;
|
||
|
|
|
||
|
|
.menu-item {
|
||
|
|
.menu-link {
|
||
|
|
&.active,
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.card-flush {
|
||
|
|
box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
|
||
|
|
0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
|
||
|
|
0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
|
||
|
|
0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
|
||
|
|
}
|
||
|
|
.dropdown-toggle {
|
||
|
|
border: 1px solid var(--primary-color);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
../../apis/adminApi
|