mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
feat(web): 初始化主页面和监控页面
- 新增 MainView 组件,包含 header、menu 和 page 区域 - 新增 monitor 子页面组件 - 更新路由配置,添加主页面和监控页面路由 - 新增全局样式文件,统一颜色和样式 - 优化 App.vue 样式,移除最小宽高限制
This commit is contained in:
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="header"></div>
|
||||
<div class="menu"></div>
|
||||
<div class="header"></div>
|
||||
<div class="page">
|
||||
<router-view/>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div v-for="menu in menuList" :key="menu.name" class="menu-item">
|
||||
<i :class="menu.icon"></i>
|
||||
{{ menu.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +17,75 @@
|
||||
// @ is an alias to /src
|
||||
|
||||
export default {
|
||||
name: "MainView",
|
||||
name: 'MainView',
|
||||
components: {},
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
menuList: [
|
||||
{
|
||||
name: '系统总览',
|
||||
icon: 'icon-xitongguanli'
|
||||
},
|
||||
{
|
||||
name: '系统管理',
|
||||
icon: 'icon-xitongguanli',
|
||||
children: [
|
||||
{
|
||||
name: '用户管理',
|
||||
icon: 'icon-yonghuguanli',
|
||||
children: [
|
||||
{
|
||||
name: '用户列表',
|
||||
icon: 'icon-yonghuguanli',
|
||||
path: '/user/list'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/mainBg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
.page{
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 80px - 15px - 47px - 60px);
|
||||
margin: 40px 10px 20px 10px;
|
||||
border-radius: 20px;
|
||||
background: #052F4D;
|
||||
|
||||
}
|
||||
.menu {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 15px;
|
||||
// height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.menu-item {
|
||||
width: 120px;
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
background: #04608e;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
27
web/src/views/sub/monitor.vue
Normal file
27
web/src/views/sub/monitor.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="monitor">
|
||||
<div class="search">
|
||||
<div class="left">
|
||||
<div class="search-item">
|
||||
<span>场站切换</span>
|
||||
<a-cascader v-model:value="value" :options="options" placeholder="Please select" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.monitor{
|
||||
padding: 10px;
|
||||
.search{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user