初始化
This commit is contained in:
砂糖
235
frontend/packages/Layout/BigScreenHomeLayout/index.vue
Normal file
235
frontend/packages/Layout/BigScreenHomeLayout/index.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="big-screen-home-wrap">
|
||||
<header class="big-screen-home-wrap-top">
|
||||
<div class="logo-title">
|
||||
<img
|
||||
class="logo"
|
||||
:src="logo"
|
||||
>
|
||||
<span>{{ title }}</span><span style="font-size: 18px;margin-left: 8px">2.x</span>
|
||||
</div>
|
||||
|
||||
<div class="big-screen-nav-container">
|
||||
<Nav
|
||||
:navs="tabList"
|
||||
@change="changeTab"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
v-if="giteeSvg && giteeHref"
|
||||
class="fork-me-on-gitee"
|
||||
:href="giteeHref"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
:src="giteeSvg"
|
||||
alt="Fork me on Gitee"
|
||||
>
|
||||
</a>
|
||||
</header>
|
||||
<div class="big-screen-router-view-wrap">
|
||||
<keep-alive>
|
||||
<router-view />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Nav from './NavTop.vue'
|
||||
// import Nav from './Nav.vue'
|
||||
export default {
|
||||
name: 'BigScreenHome',
|
||||
components: {
|
||||
Nav
|
||||
},
|
||||
props: [],
|
||||
data () {
|
||||
return {
|
||||
// 和此处路由保持一致，将会激活tab，请按需更改
|
||||
giteeHref: '',
|
||||
giteeSvg: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title () {
|
||||
if (this.$route.query.edit) return '大屏设计器'
|
||||
return window?.BS_CONFIG?.starter?.title ?? 'DataRoom大屏设计器'
|
||||
},
|
||||
logo () {
|
||||
return window?.BS_CONFIG?.starter?.logo ?? require('./images/logo.png')
|
||||
},
|
||||
tabList () {
|
||||
if (this.$route.query.edit) {
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
name: '资源库',
|
||||
path: window?.BS_CONFIG?.routers?.sourceUrl || '/big-screen-source',
|
||||
icon: 'icon-tupian'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '组件库',
|
||||
path: window?.BS_CONFIG?.routers?.componentUrl || '/big-screen-components',
|
||||
icon: 'icon-zujian1'
|
||||
}
|
||||
]
|
||||
}
|
||||
return [
|
||||
{
|
||||
id: 0,
|
||||
name: '大屏管理',
|
||||
path: window?.BS_CONFIG?.routers?.pageListUrl || '/big-screen-list',
|
||||
icon: 'icon-icon-shujudaping'
|
||||
},
|
||||
// {
|
||||
// id: 1,
|
||||
// name: '模版管理',
|
||||
// path: window?.BS_CONFIG?.routers?.templateListUrl || '/big-screen-template',
|
||||
// icon: 'icon-xiangmuwenjianmobanku_mobanku'
|
||||
// },
|
||||
{
|
||||
id: 1,
|
||||
name: '资源库',
|
||||
path: window?.BS_CONFIG?.routers?.sourceUrl || '/big-screen-source',
|
||||
icon: 'icon-tupian'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '组件库',
|
||||
path: window?.BS_CONFIG?.routers?.componentUrl || '/big-screen-components',
|
||||
icon: 'icon-zujian1'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '数据源管理',
|
||||
path:
|
||||
window?.BS_CONFIG?.routers?.dataSourceUrl ||
|
||||
'/big-screen-dataSource',
|
||||
icon: 'icon-datafull'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '数据集管理',
|
||||
path: window?.BS_CONFIG?.routers?.dataSetUrl || '/big-screen-dataSet',
|
||||
icon: 'icon-data'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '地图数据管理',
|
||||
path: '/big-screen-map-data',
|
||||
icon: 'icon-data'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
document.title = this.title
|
||||
},
|
||||
mounted () {
|
||||
this.giteeHref = 'https://gitee.com/gcpaas/DataRoom'
|
||||
this.giteeSvg = 'https://gitee.com/gcpaas/DataRoom/widgets/widget_1.svg?color=007bff'
|
||||
},
|
||||
methods: {
|
||||
changeTab (tab) {
|
||||
if (this.$route.query.edit) {
|
||||
this.$router.push({
|
||||
path: tab.path,
|
||||
query: { edit: 1 }
|
||||
})
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: tab.path
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.big-screen-home-wrap > * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.big-screen-home-wrap {
|
||||
height: 100%;
|
||||
|
||||
.big-screen-home-wrap-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-image: url('./images/nav_img.png');
|
||||
background-size: 100% 150px;
|
||||
background-color: #0D0F12;
|
||||
background-position: center right;
|
||||
|
||||
.logo-title {
|
||||
// 禁用可选
|
||||
user-select: none;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
z-index: 23;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--bs-el-color-primary);
|
||||
|
||||
.logo {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
padding-left: 8px;
|
||||
-webkit-background-clip: text;
|
||||
background-size: 400% 400%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.big-screen-router-view-wrap {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
overflow: hidden;
|
||||
// padding-top: 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 150px);
|
||||
background-color: var(--bs-background-1);
|
||||
box-sizing: border-box;
|
||||
padding-top: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text-animate {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 0 0;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
}
|
||||
.fork-me-on-gitee{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
img{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user