|
|
@@ -1,7 +1,7 @@
|
|
|
<script setup>
|
|
|
-import "./layout.css"
|
|
|
-import "@/assets/table.css"
|
|
|
-import Context from "./layout.js"
|
|
|
+import "./layout.css";
|
|
|
+import "@/assets/table.css";
|
|
|
+import Context from "./layout.js";
|
|
|
import ctxRef from "@/utils/ctx_ref.js";
|
|
|
import { provide, ref } from "vue";
|
|
|
import BasicLayout from "@/layouts/BasicLayout.vue";
|
|
|
@@ -12,319 +12,414 @@ import TTabView from "@/components/ui/TTabView.vue";
|
|
|
import TTabs from "@/components/ui/TTabs.vue";
|
|
|
import TTab from "@/components/ui/TTab.vue";
|
|
|
import InitData from "./index/initData";
|
|
|
+import SettingMenu from "@/views/servers/server/settings/@setting_menu.vue";
|
|
|
|
|
|
-InitData()
|
|
|
-const ctx = ctxRef(new Context())
|
|
|
+InitData();
|
|
|
+const ctx = ctxRef(new Context());
|
|
|
|
|
|
-provide("$popupLayout", false)
|
|
|
+provide("$popupLayout", false);
|
|
|
|
|
|
-const mainMenuVisible = ref(false)
|
|
|
+const mainMenuVisible = ref(false);
|
|
|
const showMainMenu = () => {
|
|
|
- const mainMenu = document.querySelector(".main-menu")
|
|
|
- mainMenuVisible.value = !mainMenuVisible.value
|
|
|
- if (mainMenuVisible.value) {
|
|
|
- mainMenu.style.display = "block"
|
|
|
- } else {
|
|
|
- mainMenu.style.display = "none"
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
+ const mainMenu = document.querySelector(".main-menu");
|
|
|
+ mainMenuVisible.value = !mainMenuVisible.value;
|
|
|
+ if (mainMenuVisible.value) {
|
|
|
+ mainMenu.style.display = "block";
|
|
|
+ } else {
|
|
|
+ mainMenu.style.display = "none";
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <BasicLayout>
|
|
|
- <!-- 顶部导航 -->
|
|
|
- <div class="top-nav">
|
|
|
- <TMenubar>
|
|
|
- <template #start>
|
|
|
- <a href="" class="inline-block sm:hidden"
|
|
|
- :class="{ 'bg-gray-200': mainMenuVisible, '!bg-transparent': !mainMenuVisible }"
|
|
|
- @click.prevent="showMainMenu"><i class="icon bars"></i></a>
|
|
|
- <a href="/dashboard" class="hidden sm:flex">
|
|
|
- <div class="flex gap-[8px] items-center">
|
|
|
- <span class="title-icon text-[24px] text-[#1e65ff]"></span>
|
|
|
- <span class="font-bold text-[24px]">Faven.</span>
|
|
|
- </div>
|
|
|
- <!-- <i class="ui icon cloud" v-if="ctx.teaCommon.teaLogoFileId == 0"></i><img
|
|
|
+ <BasicLayout>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <div class="top-nav">
|
|
|
+ <TMenubar>
|
|
|
+ <template #start>
|
|
|
+ <a
|
|
|
+ href=""
|
|
|
+ class="inline-block sm:hidden"
|
|
|
+ :class="{
|
|
|
+ 'bg-gray-200': mainMenuVisible,
|
|
|
+ '!bg-transparent': !mainMenuVisible,
|
|
|
+ }"
|
|
|
+ @click.prevent="showMainMenu"
|
|
|
+ ><i class="icon bars"></i
|
|
|
+ ></a>
|
|
|
+ <a href="/dashboard" class="hidden sm:flex">
|
|
|
+ <div class="flex gap-[8px] items-center">
|
|
|
+ <span class="title-icon text-[24px] text-[#1e65ff]"></span>
|
|
|
+ <span class="font-bold text-[24px]">Faven.</span>
|
|
|
+ </div>
|
|
|
+ <!-- <i class="ui icon cloud" v-if="ctx.teaCommon.teaLogoFileId == 0"></i><img
|
|
|
v-if="ctx.teaCommon.teaLogoFileId > 0" :src="'/ui/image/' + ctx.teaCommon.teaLogoFileId"
|
|
|
style="width: auto;height: 1.6em" alt="Logo" class="dark:invert" /> {{ ctx.teaTitle
|
|
|
}} <sup v-if="ctx.teaCommon.teaShowVersion">v{{ ctx.teaVersion }}</sup><sup
|
|
|
v-if="ctx.teaFrontMode == 'proxy'">front:{{ ctx.teaFrontMode }}</sup> -->
|
|
|
- </a>
|
|
|
- </template>
|
|
|
- <template #end>
|
|
|
- <div class="flex flex-wrap items-center">
|
|
|
- <a href="/messages" class="item" :class="{ active: ctx.teaMenu == 'message' }"><span
|
|
|
- :class="{ 'blink': ctx.globalMessageBadge > 0 }" class="flex items-center gap-0.5"><i
|
|
|
- class="icon bell mr-1"></i><span class="hidden sm:inline-block">消息({{
|
|
|
- ctx.globalMessageBadge }}) </span></span></a>
|
|
|
- <a href="/settings/profile" class="item" :class="{ active: ctx.teaMenu == 'settings' }">
|
|
|
- <i class="icon setting mr-1"></i><span class="hidden sm:inline-block">设置</span>
|
|
|
- </a>
|
|
|
- <a href="/" class="item" v-show="ctx.teaShowIndexPage">
|
|
|
- <i class="icon home"></i><span class="hidden sm:inline-block"> 首页</span>
|
|
|
- </a>
|
|
|
- <a href="/docs" class="item" :class="{ active: ctx.teaMenu == 'docs' }"><i
|
|
|
- class="icon file mr-1"></i><span class="hidden sm:inline-block">文档</span></a>
|
|
|
- <a href="/settings/profile" class="item">
|
|
|
- <i class="icon user mr-1" v-if="ctx.teaUserAvatar.length == 0"></i>
|
|
|
- <img class="avatar" alt="" :src="ctx.teaUserAvatar" v-if="ctx.teaUserAvatar.length > 0" />
|
|
|
- <span class="hidden sm:inline-block">{{ ctx.teaCommon.teaUsername }}</span>
|
|
|
- </a>
|
|
|
- <!-- color scheme -->
|
|
|
- <a href="" class="item" v-tooltip.bottom="'切换亮色/暗色风格'" @click.prevent="ctx.changeColorScheme()">
|
|
|
- <i class="pi pi-moon" v-if="ctx.currentColorScheme == 'dark'"></i>
|
|
|
- <i class="pi pi-sun" v-if="ctx.currentColorScheme == 'light'"></i>
|
|
|
- <span class="hidden sm:inline-block" v-if="ctx.currentColorScheme == 'dark'">暗色</span>
|
|
|
- <span class="hidden sm:inline-block" v-if="ctx.currentColorScheme == 'light'">亮色</span>
|
|
|
- </a>
|
|
|
- <a :href="ctx.$url('logout')" class="item" title="安全退出登录"><i
|
|
|
- class="icon sign out mr-1"></i><span class="hidden sm:inline-block">退出</span></a>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </TMenubar>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 左侧主菜单 -->
|
|
|
- <div class="main-menu">
|
|
|
- <div>
|
|
|
- <div class="pb-20">
|
|
|
- <TMenuAccordion :items="ctx.menuItems" style="width: 11em"></TMenuAccordion>
|
|
|
- </div>
|
|
|
- <TDivider layout="vertical" class="divider"></TDivider>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 右侧主操作栏 -->
|
|
|
- <div class="main" :class="{ 'opacity-30': mainMenuVisible }">
|
|
|
- <!-- 操作菜单 -->
|
|
|
- <div class="mb-4 -mt-3">
|
|
|
- <TTabView v-if="ctx.teaTabbar.length > 1" code="RANDOM" :value="ctx.tabValue" @change="ctx.changeTab">
|
|
|
- <TTabs>
|
|
|
- <TTab v-for="(item, index) in ctx.teaTabbar" :code="item.url"
|
|
|
- @click="ctx.clickTab($event, item)" :disabled="item.isDisabled && !item.isActive">
|
|
|
- <!-- TODO, right, title, icon, subName -->
|
|
|
- <!-- right:item.isRight, title: item.isTitle, icon: item.icon != null && item.icon.length > 0-->
|
|
|
-
|
|
|
- <var class="not-italic">
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <span v-if="item.subName.length > 0">({{ item.subName }})</span>
|
|
|
- <i class="icon small" :class="item.icon"
|
|
|
- v-if="index == 0 && item.icon != null && item.icon.length > 0"></i>
|
|
|
- </var>
|
|
|
- <var class="not-italic" v-if="item.isTitle && typeof ctx.node == 'object'">{{ ctx.node.name
|
|
|
- }}</var>
|
|
|
- </TTab>
|
|
|
- </TTabs>
|
|
|
- </TTabView>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 功能区 -->
|
|
|
- <div class="main-box md:mb-0">
|
|
|
- <RouterView :key="$route.fullPath"></RouterView>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 底部 -->
|
|
|
- <div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
|
|
|
- v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length == 0">
|
|
|
- <a class="item" title="点击进入检查版本更新页面">{{ ctx.teaName }} v{{ ctx.teaVersion }}</a>
|
|
|
- </div>
|
|
|
- <div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
|
|
|
- v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length > 0" v-html="ctx.teaPageFooterHTML"></div>
|
|
|
- </div>
|
|
|
- </BasicLayout>
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ <template #end>
|
|
|
+ <div class="flex flex-wrap items-center">
|
|
|
+ <a
|
|
|
+ href="/messages"
|
|
|
+ class="item"
|
|
|
+ :class="{ active: ctx.teaMenu == 'message' }"
|
|
|
+ ><span
|
|
|
+ :class="{ blink: ctx.globalMessageBadge > 0 }"
|
|
|
+ class="flex items-center gap-0.5"
|
|
|
+ ><i class="icon bell mr-1"></i
|
|
|
+ ><span class="hidden sm:inline-block"
|
|
|
+ >消息({{ ctx.globalMessageBadge }})
|
|
|
+ </span></span
|
|
|
+ ></a
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ href="/settings/profile"
|
|
|
+ class="item"
|
|
|
+ :class="{ active: ctx.teaMenu == 'settings' }"
|
|
|
+ >
|
|
|
+ <i class="icon setting mr-1"></i
|
|
|
+ ><span class="hidden sm:inline-block">设置</span>
|
|
|
+ </a>
|
|
|
+ <a href="/" class="item" v-show="ctx.teaShowIndexPage">
|
|
|
+ <i class="icon home"></i
|
|
|
+ ><span class="hidden sm:inline-block"> 首页</span>
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ href="/docs"
|
|
|
+ class="item"
|
|
|
+ :class="{ active: ctx.teaMenu == 'docs' }"
|
|
|
+ ><i class="icon file mr-1"></i
|
|
|
+ ><span class="hidden sm:inline-block">文档</span></a
|
|
|
+ >
|
|
|
+ <a href="/settings/profile" class="item">
|
|
|
+ <i
|
|
|
+ class="icon user mr-1"
|
|
|
+ v-if="ctx.teaUserAvatar.length == 0"
|
|
|
+ ></i>
|
|
|
+ <img
|
|
|
+ class="avatar"
|
|
|
+ alt=""
|
|
|
+ :src="ctx.teaUserAvatar"
|
|
|
+ v-if="ctx.teaUserAvatar.length > 0"
|
|
|
+ />
|
|
|
+ <span class="hidden sm:inline-block">{{
|
|
|
+ ctx.teaCommon.teaUsername
|
|
|
+ }}</span>
|
|
|
+ </a>
|
|
|
+ <!-- color scheme -->
|
|
|
+ <a
|
|
|
+ href=""
|
|
|
+ class="item"
|
|
|
+ v-tooltip.bottom="'切换亮色/暗色风格'"
|
|
|
+ @click.prevent="ctx.changeColorScheme()"
|
|
|
+ >
|
|
|
+ <i class="pi pi-moon" v-if="ctx.currentColorScheme == 'dark'"></i>
|
|
|
+ <i class="pi pi-sun" v-if="ctx.currentColorScheme == 'light'"></i>
|
|
|
+ <span
|
|
|
+ class="hidden sm:inline-block"
|
|
|
+ v-if="ctx.currentColorScheme == 'dark'"
|
|
|
+ >暗色</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="hidden sm:inline-block"
|
|
|
+ v-if="ctx.currentColorScheme == 'light'"
|
|
|
+ >亮色</span
|
|
|
+ >
|
|
|
+ </a>
|
|
|
+ <a :href="ctx.$url('logout')" class="item" title="安全退出登录"
|
|
|
+ ><i class="icon sign out mr-1"></i
|
|
|
+ ><span class="hidden sm:inline-block">退出</span></a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </TMenubar>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 左侧主菜单 -->
|
|
|
+ <div class="main-menu">
|
|
|
+ <div>
|
|
|
+ <div class="pb-20">
|
|
|
+ <TMenuAccordion
|
|
|
+ :items="ctx.menuItems"
|
|
|
+ style="width: 11em"
|
|
|
+ ></TMenuAccordion>
|
|
|
+ </div>
|
|
|
+ <TDivider layout="vertical" class="divider"></TDivider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧主操作栏 -->
|
|
|
+ <div class="main" :class="{ 'opacity-30': mainMenuVisible }">
|
|
|
+ <!-- 操作菜单 -->
|
|
|
+ <SettingMenu :ctx="ctx" class=""></SettingMenu>
|
|
|
+
|
|
|
+ <div class="mt-3">
|
|
|
+ <TTabView
|
|
|
+ v-if="ctx.teaTabbar.length > 1"
|
|
|
+ code="RANDOM"
|
|
|
+ :value="ctx.tabValue"
|
|
|
+ @change="ctx.changeTab"
|
|
|
+ >
|
|
|
+ <TTabs>
|
|
|
+ <TTab
|
|
|
+ v-for="(item, index) in ctx.teaTabbar"
|
|
|
+ :code="item.url"
|
|
|
+ @click="ctx.clickTab($event, item)"
|
|
|
+ :disabled="item.isDisabled && !item.isActive"
|
|
|
+ >
|
|
|
+ <!-- TODO, right, title, icon, subName -->
|
|
|
+ <!-- right:item.isRight, title: item.isTitle, icon: item.icon != null && item.icon.length > 0-->
|
|
|
+
|
|
|
+ <var class="not-italic">
|
|
|
+ <i v-if="index > 0 && item.icon === 'setting'" class="pi pi-cog ">
|
|
|
+ </i>
|
|
|
+ <i v-else-if="index > 0 && item.icon === 'chart area'" class="pi pi-chart-pie ">
|
|
|
+ </i>
|
|
|
+ <svg v-else-if="index > 0 && item.icon === 'history'" width="16" height="16" viewBox="0 0 16 16" fill="none" class="inline-block" style="margin-top: -2px;" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path d="M13.6666 3.33325H4.33325V14.6666H13.6666V3.33325Z" stroke="#657080" stroke-linejoin="round"/>
|
|
|
+ <path d="M11.6666 3.33325V1.33325H2.66659C2.48249 1.33325 2.33325 1.48249 2.33325 1.66659V12.6666H4.33325" stroke="#657080" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
+ <path d="M7 7.33325H11" stroke="#657080" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
+ <path d="M7 10H11" stroke="#657080" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ <i
|
|
|
+ class="icon small"
|
|
|
+ :class="item.icon"
|
|
|
+ v-else-if="index == 0 && item.icon != null && item.icon.length > 0"
|
|
|
+ ></i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span v-if="item.subName.length > 0">({{ item.subName }})</span>
|
|
|
+
|
|
|
+ </var>
|
|
|
+ <var
|
|
|
+ class="not-italic"
|
|
|
+ v-if="item.isTitle && typeof ctx.node == 'object'"
|
|
|
+ >{{ ctx.node.name }}</var
|
|
|
+ >
|
|
|
+ </TTab>
|
|
|
+ </TTabs>
|
|
|
+ </TTabView>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 功能区 -->
|
|
|
+ <div class="main-box md:mb-0">
|
|
|
+ <RouterView :key="$route.fullPath"></RouterView>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div
|
|
|
+ class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
|
|
|
+ v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length == 0"
|
|
|
+ >
|
|
|
+ <a class="item" title="点击进入检查版本更新页面"
|
|
|
+ >{{ ctx.teaName }} v{{ ctx.teaVersion }}</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
|
|
|
+ v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length > 0"
|
|
|
+ v-html="ctx.teaPageFooterHTML"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </BasicLayout>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="postcss">
|
|
|
+:deep(.p-tablist-tab-list){
|
|
|
+ padding: 15px ;
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
.title-icon {
|
|
|
- width: 1em;
|
|
|
- height: 1em;
|
|
|
- mask-image: var(--svg);
|
|
|
- --svg: url(@/assets/icon/title.svg);
|
|
|
- background-color: currentColor;
|
|
|
- display: inline-block;
|
|
|
- -webkit-mask-size: 100% 100%;
|
|
|
- mask-size: 100% 100%;
|
|
|
- -webkit-mask-repeat: no-repeat;
|
|
|
- mask-repeat: no-repeat;
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ mask-image: var(--svg);
|
|
|
+ --svg: url(@/assets/icon/title.svg);
|
|
|
+ background-color: currentColor;
|
|
|
+ display: inline-block;
|
|
|
+ -webkit-mask-size: 100% 100%;
|
|
|
+ mask-size: 100% 100%;
|
|
|
+ -webkit-mask-repeat: no-repeat;
|
|
|
+ mask-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
:deep(td a),
|
|
|
:deep(.comment a),
|
|
|
:deep(form a) {
|
|
|
- color: var(--p-primary-color);
|
|
|
+ color: var(--p-primary-color);
|
|
|
}
|
|
|
|
|
|
:deep(td a:hover),
|
|
|
:deep(.comment a:hover),
|
|
|
:deep(.form a:hover) {
|
|
|
- color: var(--p-primary-700);
|
|
|
+ color: var(--p-primary-700);
|
|
|
}
|
|
|
|
|
|
.top-nav {
|
|
|
- border-radius: 0 !important;
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- z-index: 1000;
|
|
|
- overflow-x: auto;
|
|
|
- border: 0 !important;
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
-
|
|
|
- .red {
|
|
|
- color: var(--p-red-500) !important;
|
|
|
- }
|
|
|
-
|
|
|
- .hover-span {
|
|
|
- span {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- font-size: 0.8em;
|
|
|
- }
|
|
|
-
|
|
|
- .hover-span:hover {
|
|
|
- span {
|
|
|
- display: inline;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- @apply flex items-center gap-0.5;
|
|
|
- }
|
|
|
+ border-radius: 0 !important;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1000;
|
|
|
+ overflow-x: auto;
|
|
|
+ border: 0 !important;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: var(--p-red-500) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hover-span {
|
|
|
+ span {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-size: 0.8em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hover-span:hover {
|
|
|
+ span {
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ @apply flex items-center gap-0.5;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.top-nav .p-menubar {
|
|
|
- border-top: 0;
|
|
|
- border-radius: 0;
|
|
|
+ border-top: 0;
|
|
|
+ border-radius: 0;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
- .top-nav {
|
|
|
- position: relative !important;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .main {
|
|
|
- position: relative !important;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- top: auto;
|
|
|
- padding-left: 1em;
|
|
|
- padding-right: 1em;
|
|
|
- }
|
|
|
-
|
|
|
- .main-menu {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ .top-nav {
|
|
|
+ position: relative !important;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ position: relative !important;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: auto;
|
|
|
+ padding-left: 1em;
|
|
|
+ padding-right: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-menu {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.main-menu {
|
|
|
- position: fixed;
|
|
|
- left: 0.8em;
|
|
|
- top: 5.6em;
|
|
|
- bottom: 0;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- z-index: 10;
|
|
|
- width: 13em;
|
|
|
- background: #edeff4;
|
|
|
-
|
|
|
- .divider {
|
|
|
- position: fixed;
|
|
|
- top: 4em;
|
|
|
- bottom: 1em;
|
|
|
- left: 11.5em;
|
|
|
- }
|
|
|
+ position: fixed;
|
|
|
+ left: 0.8em;
|
|
|
+ top: 5.6em;
|
|
|
+ bottom: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ z-index: 10;
|
|
|
+ width: 13em;
|
|
|
+ background: #edeff4;
|
|
|
+
|
|
|
+ .divider {
|
|
|
+ position: fixed;
|
|
|
+ top: 4em;
|
|
|
+ bottom: 1em;
|
|
|
+ left: 11.5em;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.dark .main-menu {
|
|
|
- background: black;
|
|
|
+ background: black;
|
|
|
}
|
|
|
|
|
|
.top-nav a {
|
|
|
- @apply px-4 py-2;
|
|
|
+ @apply px-4 py-2;
|
|
|
}
|
|
|
|
|
|
.top-nav a:hover {
|
|
|
- @apply bg-gray-100 dark:bg-gray-700 rounded-md;
|
|
|
+ @apply bg-gray-100 dark:bg-gray-700 rounded-md;
|
|
|
}
|
|
|
|
|
|
.hover-span,
|
|
|
.hover-span a {
|
|
|
- @apply flex items-center gap-2;
|
|
|
+ @apply flex items-center gap-2;
|
|
|
}
|
|
|
|
|
|
:deep(.p-panelmenu) {
|
|
|
- width: 10em;
|
|
|
+ width: 10em;
|
|
|
}
|
|
|
|
|
|
p.comment em,
|
|
|
div.comment em {
|
|
|
- font-style: italic;
|
|
|
+ font-style: italic;
|
|
|
}
|
|
|
|
|
|
:deep(.p-message) {
|
|
|
- @apply py-1;
|
|
|
+ @apply py-1;
|
|
|
}
|
|
|
|
|
|
:deep(th.width6) {
|
|
|
- width: 6em !important;
|
|
|
+ width: 6em !important;
|
|
|
}
|
|
|
|
|
|
:deep(th.width10) {
|
|
|
- width: 10em !important;
|
|
|
+ width: 10em !important;
|
|
|
}
|
|
|
|
|
|
:deep(span.disabled) {
|
|
|
- @apply text-gray-500;
|
|
|
+ @apply text-gray-500;
|
|
|
}
|
|
|
|
|
|
/** footer **/
|
|
|
.footer a,
|
|
|
.footer :deep(a) {
|
|
|
- @apply text-white;
|
|
|
+ @apply text-white;
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
- padding-bottom: 1em;
|
|
|
- font-family: Source Han Sans SC;
|
|
|
- margin-top: .6em;
|
|
|
+ padding-bottom: 1em;
|
|
|
+ font-family: Source Han Sans SC;
|
|
|
+ margin-top: 0.6em;
|
|
|
}
|
|
|
|
|
|
.main-box {
|
|
|
- background-color: var(--p-content-background);
|
|
|
- padding: 30px;
|
|
|
- min-height: calc(100vh - 100px);
|
|
|
+ background-color: var(--p-content-background);
|
|
|
+ padding: 30px;
|
|
|
+ padding-top: 15px;
|
|
|
+ min-height: calc(100vh - 100px);
|
|
|
}
|
|
|
|
|
|
:deep(.p-menu-item-link) {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 14px;
|
|
|
- color: rgba(49, 49, 49, 1);
|
|
|
- padding: 12px 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: rgba(49, 49, 49, 1);
|
|
|
+ padding: 12px 20px;
|
|
|
}
|
|
|
|
|
|
:deep(.p-menu-list) {
|
|
|
- padding: 10px 10px;
|
|
|
+ padding: 10px 10px;
|
|
|
}
|
|
|
|
|
|
:deep(.p-menu-item-link.on) {
|
|
|
- text-decoration: none;
|
|
|
+ text-decoration: none;
|
|
|
}
|
|
|
|
|
|
:deep(.t-active-item) {
|
|
|
- color: rgba(30, 101, 255, 1) !important;
|
|
|
+ color: rgba(30, 101, 255, 1) !important;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="postcss">
|
|
|
.dark {
|
|
|
-
|
|
|
- td a:hover,
|
|
|
- .comment a:hover,
|
|
|
- .form a:hover {
|
|
|
- color: var(--p-primary-200);
|
|
|
- }
|
|
|
+ td a:hover,
|
|
|
+ .comment a:hover,
|
|
|
+ .form a:hover {
|
|
|
+ color: var(--p-primary-200);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
jcq