feat(web): 初始化主页面和监控页面

- 新增 MainView 组件,包含 header、menu 和 page 区域
- 新增 monitor 子页面组件
- 更新路由配置,添加主页面和监控页面路由
- 新增全局样式文件,统一颜色和样式
- 优化 App.vue 样式,移除最小宽高限制
This commit is contained in:
zhoumengru
2025-08-29 15:48:33 +08:00
parent 7aad6b6598
commit 4af4e670d2
10 changed files with 146 additions and 16 deletions

View File

@@ -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>

View 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>