github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 01:33:54 +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
limitations under the License. -->
<template>
<section class="app-main flex-v">
<section class="app-main flex-v" :style="portalStyle">
<router-view v-slot="{ Component }" :key="$route.fullPath">
<keep-alive>
<component :is="Component" />
@ -24,6 +24,19 @@ limitations under the License. -->
<script lang="ts" setup>
import { ElMessage } from "element-plus";
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();
if (!appStore.utc) {
@ -37,8 +50,6 @@ if (!appStore.utc) {
<style lang="scss" scoped>
.app-main {
height: 100%;
max-height: 375px;
max-width: 800px;
background: #f7f9fa;
}
</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
limitations under the License. -->
<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'">
<Icon
:size="isCollapse ? 'xl' : 'logo'"
@ -110,7 +110,19 @@ import { useRouter, RouteRecordRaw, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
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(() => {
return path.includes("fullview");
});
@ -120,7 +132,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
? ref("light")
: ref("black");
const routes = ref<any>(useRouter().options.routes);
const isCollapse = ref(true);
const isCollapse = ref(query["portal"] === "true");
const controlMenu = () => {
isCollapse.value = !isCollapse.value;
};
@ -138,14 +150,9 @@ const filterMenus = (menus: any[]) => {
.side-bar {
background: #252a2f;
height: 100%;
//min-height: 700px;
min-height: 700px;
position: relative;
margin-bottom: 100px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
.el-menu-vertical:not(.el-menu--collapse) {