修改项目树问题 绘制稳态治理分析页面
This commit is contained in:
guanj
@@ -1,79 +1,79 @@
|
||||
<template>
|
||||
<div class="layout-logo">
|
||||
<img v-if="!config.layout.menuCollapse" class="logo-img" :src="getTheme.logoUrl" />
|
||||
<!-- <div-->
|
||||
<!-- v-if="!config.layout.menuCollapse"-->
|
||||
<!-- :style="{ color: config.getColorVal('menuActiveColor') }"-->
|
||||
<!-- class="website-name"-->
|
||||
<!-- >-->
|
||||
<!-- 灿能-->
|
||||
<!-- </div>-->
|
||||
<Icon
|
||||
v-if="config.layout.layoutMode != 'Streamline'"
|
||||
@click="onMenuCollapse"
|
||||
:name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="config.layout.menuCollapse ? 'unfold' : ''"
|
||||
:color="config.getColorVal('menuActiveColor')"
|
||||
style="margin: 15px;"
|
||||
size="18"
|
||||
class="fold"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { closeShade } from '@/utils/pageShade'
|
||||
import { Session } from '@/utils/storage'
|
||||
import { setNavTabsWidth } from '@/utils/layout'
|
||||
|
||||
const config = useConfig()
|
||||
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
|
||||
const onMenuCollapse = function () {
|
||||
if (config.layout.shrink && !config.layout.menuCollapse) {
|
||||
closeShade()
|
||||
}
|
||||
|
||||
config.setLayout('menuCollapse', !config.layout.menuCollapse)
|
||||
|
||||
// 等待侧边栏动画结束后重新计算导航栏宽度
|
||||
setTimeout(() => {
|
||||
setNavTabsWidth()
|
||||
}, 350)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-logo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
background: v-bind(
|
||||
'config.layout.layoutMode != "Streamline" ? config.getColorVal("menuTopBarBackground"):"transparent"'
|
||||
);
|
||||
}
|
||||
.logo-img {
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
margin: auto;
|
||||
}
|
||||
.website-name {
|
||||
display: block;
|
||||
width: 180px;
|
||||
padding-left: 4px;
|
||||
font-size: var(--el-font-size-extra-large);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.fold {
|
||||
margin-left: auto;
|
||||
}
|
||||
.unfold {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="layout-logo">
|
||||
<img v-if="!config.layout.menuCollapse" class="logo-img" :src="getTheme.logoUrl" />
|
||||
<!-- <div-->
|
||||
<!-- v-if="!config.layout.menuCollapse"-->
|
||||
<!-- :style="{ color: config.getColorVal('menuActiveColor') }"-->
|
||||
<!-- class="website-name"-->
|
||||
<!-- >-->
|
||||
<!-- 灿能-->
|
||||
<!-- </div>-->
|
||||
<!-- <Icon
|
||||
v-if="config.layout.layoutMode != 'Streamline'"
|
||||
@click="onMenuCollapse"
|
||||
:name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="config.layout.menuCollapse ? 'unfold' : ''"
|
||||
:color="config.getColorVal('menuActiveColor')"
|
||||
style="margin: 15px;"
|
||||
size="18"
|
||||
class="fold"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { closeShade } from '@/utils/pageShade'
|
||||
import { Session } from '@/utils/storage'
|
||||
import { setNavTabsWidth } from '@/utils/layout'
|
||||
|
||||
const config = useConfig()
|
||||
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
|
||||
const onMenuCollapse = function () {
|
||||
if (config.layout.shrink && !config.layout.menuCollapse) {
|
||||
closeShade()
|
||||
}
|
||||
|
||||
config.setLayout('menuCollapse', !config.layout.menuCollapse)
|
||||
|
||||
// 等待侧边栏动画结束后重新计算导航栏宽度
|
||||
setTimeout(() => {
|
||||
setNavTabsWidth()
|
||||
}, 350)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-logo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
background: v-bind(
|
||||
'config.layout.layoutMode != "Streamline" ? config.getColorVal("menuTopBarBackground"):"transparent"'
|
||||
);
|
||||
}
|
||||
.logo-img {
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
margin: auto;
|
||||
}
|
||||
.website-name {
|
||||
display: block;
|
||||
width: 180px;
|
||||
padding-left: 4px;
|
||||
font-size: var(--el-font-size-extra-large);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.fold {
|
||||
margin-left: auto;
|
||||
}
|
||||
.unfold {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,111 +1,111 @@
|
||||
<template>
|
||||
<div class="nav-bar">
|
||||
<div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
|
||||
<Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')"
|
||||
size="18" />
|
||||
</div>
|
||||
<span class="nav-bar-title">{{ getTheme.name }} <span style="font-size: 14px;" v-if="Version?.versionName">
|
||||
({{ Version?.versionName }})
|
||||
</span></span>
|
||||
<NavMenus />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
|
||||
import NavMenus from '../navMenus.vue'
|
||||
import { showShade } from '@/utils/pageShade'
|
||||
import { onMounted } from 'vue'
|
||||
import { getLastData } from '@/api/systerm'
|
||||
const config = useConfig()
|
||||
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
|
||||
const Version: any = ref({})
|
||||
const onMenuCollapse = () => {
|
||||
showShade('ba-aside-menu-shade', () => {
|
||||
config.setLayout('menuCollapse', true)
|
||||
})
|
||||
config.setLayout('menuCollapse', false)
|
||||
}
|
||||
onMounted(() => {
|
||||
getLastData({ versionType: 'WEB' }).then(res => {
|
||||
Version.value = res.data
|
||||
|
||||
})
|
||||
document.title = getTheme.name
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background-color: v-bind('config.getColorVal("headerBarBackground")');
|
||||
|
||||
.nav-bar-title {
|
||||
color: v-bind('config.getColorVal("headerBarTabColor")');
|
||||
font-size: 24px;
|
||||
margin-left: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
:deep(.nav-tabs) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.ba-nav-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
color: v-bind('config.getColorVal("headerBarTabColor")');
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
|
||||
.close-icon {
|
||||
padding: 2px;
|
||||
margin: 2px 0 0 4px;
|
||||
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
||||
|
||||
.close-icon {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
||||
background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
|
||||
|
||||
.close-icon {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs-active-box {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unfold {
|
||||
align-self: center;
|
||||
padding-left: var(--ba-main-space);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="nav-bar">
|
||||
<div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
|
||||
<!-- <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')"
|
||||
size="18" /> -->
|
||||
</div>
|
||||
<span class="nav-bar-title">{{ getTheme.name }} <span style="font-size: 14px;" v-if="Version?.versionName">
|
||||
({{ Version?.versionName }})
|
||||
</span></span>
|
||||
<NavMenus />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
|
||||
import NavMenus from '../navMenus.vue'
|
||||
import { showShade } from '@/utils/pageShade'
|
||||
import { onMounted } from 'vue'
|
||||
import { getLastData } from '@/api/systerm'
|
||||
const config = useConfig()
|
||||
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
|
||||
const Version: any = ref({})
|
||||
const onMenuCollapse = () => {
|
||||
showShade('ba-aside-menu-shade', () => {
|
||||
config.setLayout('menuCollapse', true)
|
||||
})
|
||||
config.setLayout('menuCollapse', false)
|
||||
}
|
||||
onMounted(() => {
|
||||
getLastData({ versionType: 'WEB' }).then(res => {
|
||||
Version.value = res.data
|
||||
|
||||
})
|
||||
document.title = getTheme.name
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background-color: v-bind('config.getColorVal("headerBarBackground")');
|
||||
|
||||
.nav-bar-title {
|
||||
color: v-bind('config.getColorVal("headerBarTabColor")');
|
||||
font-size: 24px;
|
||||
margin-left: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
:deep(.nav-tabs) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.ba-nav-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
color: v-bind('config.getColorVal("headerBarTabColor")');
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
|
||||
.close-icon {
|
||||
padding: 2px;
|
||||
margin: 2px 0 0 4px;
|
||||
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
||||
|
||||
.close-icon {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
|
||||
background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
|
||||
|
||||
.close-icon {
|
||||
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs-active-box {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unfold {
|
||||
align-self: center;
|
||||
padding-left: var(--ba-main-space);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user