github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 09:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

portal style

Browse Source
This commit is contained in:
Brandon Fergerson 2022-04-30 07:40:43 +02:00
parent b316c27219
commit a865e6babc
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/layout/components/AppMain.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<section class="app-main flex-v"> <section class="app-main flex-v" :style="portalStyle">
<router-view v-slot="{ Component }" :key="$route.fullPath"> <router-view v-slot="{ Component }" :key="$route.fullPath">
<keep-alive> <keep-alive>
<component :is="Component" /> <component :is="Component" />
@ -24,6 +24,19 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useRoute } from "vue-router";
const { query } = useRoute();
// eslint-disable-next-line no-undef
let portalStyle = reactive({});
if (query["portal"] === "true") {
// eslint-disable-next-line no-undef
portalStyle = reactive({
"max-height": "375px",
"max-width": "800px",
});
}
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
if (!appStore.utc) { if (!appStore.utc) {
@ -37,8 +50,6 @@ if (!appStore.utc) {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
height: 100%; height: 100%;
max-height: 375px;
max-width: 800px;
background: #f7f9fa; background: #f7f9fa;
} }
</style> </style>

25
src/layout/components/SideBar.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="side-bar" v-if="isFullview === false"> <div class="side-bar" v-if="isFullview === false" :style="portalStyle">
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'"> <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon <Icon
:size="isCollapse ? 'xl' : 'logo'" :size="isCollapse ? 'xl' : 'logo'"
@ -110,7 +110,19 @@ import { useRouter, RouteRecordRaw, useRoute } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import Icon from "@/components/Icon.vue"; import Icon from "@/components/Icon.vue";
const { path } = useRoute(); const { path, query } = useRoute();
// eslint-disable-next-line no-undef
let portalStyle = reactive({});
if (query["portal"] === "true") {
// eslint-disable-next-line no-undef
portalStyle = reactive({
"min-height": "unset",
"overflow-y": "scroll",
"overflow-x": "hidden",
});
}
const isFullview = computed(() => { const isFullview = computed(() => {
return path.includes("fullview"); return path.includes("fullview");
}); });
@ -120,7 +132,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
? ref("light") ? ref("light")
: ref("black"); : ref("black");
const routes = ref<any>(useRouter().options.routes); const routes = ref<any>(useRouter().options.routes);
const isCollapse = ref(true); const isCollapse = ref(query["portal"] === "true");
const controlMenu = () => { const controlMenu = () => {
isCollapse.value = !isCollapse.value; isCollapse.value = !isCollapse.value;
}; };
@ -138,14 +150,9 @@ const filterMenus = (menus: any[]) => {
.side-bar { .side-bar {
background: #252a2f; background: #252a2f;
height: 100%; height: 100%;
//min-height: 700px; min-height: 700px;
position: relative; position: relative;
margin-bottom: 100px; margin-bottom: 100px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
} }
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {