Skip to content

V
video-monitoring
Commit c66eb58e authored by 拾柒's avatar 拾柒
Browse files
Options

修改样式

parent 2b706f4b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1432 additions and 1130 deletions
src/App.vue
View file @ c66eb58e
......@@ -24,6 +24,11 @@ export default {
<style scoped>
#app .theme-picker {
display: none;
//position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
src/assets/styles/index.scss
View file @ c66eb58e
......@@ -121,7 +121,15 @@ aside {
//main-container全局样式
.app-container {
padding: 20px;
width: 100vw; /* 视口宽度 */
height: 100vh; /* 视口高度 */
margin: 0;
//padding: 0;
overflow: hidden; /* 防止内容溢出 */
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
background-color: #D4D9E5;
}
.components-container {
......
src/components/TopNav/index.vue
View file @ c66eb58e
......@@ -2,11 +2,13 @@
<el-menu
:default-active="activeMenu"
mode="horizontal"
active-text-color="#ffd04b"
@select="handleSelect"
>
<template v-for="(item, index) in newTopNev">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index"
<el-menu-item class="menuStyle" style="font-size: medium;background-color: #F6F6FA;border-top-right-radius: 30%;border-top-left-radius: 30%;text-align: center" :index="item.path" :key="index"
>
<i :class="item.icon" style="width: 10px;height: 10px;margin-top: -12px"></i>
{{ item.name }}</el-menu-item
>
</template>
......@@ -31,24 +33,30 @@
<script>
import { constantRoutes } from "@/router";
import Menu from "@/views/system/menu/index.vue";
// 隐藏侧边栏路由
const hideList = ['/index', '/user/profile'];
export default {
components: {Menu},
data() {
return {
newTopNev: [
{
path: '/',
name: '首页',
}, {
path: '/monitoring/video',
name: '视频监控',
icon: 'el-icon-house',
name: '首页',
},
{
path: '/',
icon: 'el-icon-user',
name: '员工信息',
},
{
path: '/user/profile',
name: '个人中心',
icon: 'el-icon-view',
name: '历史记录',
}
],
// 顶部栏初始数
......@@ -135,6 +143,7 @@ export default {
},
// 菜单选择事件
handleSelect(key, keyPath) {
console.info('key',key)
this.currentIndex = key;
const route = this.routers.find(item => item.path === key);
if (this.ishttp(key)) {
......@@ -180,27 +189,62 @@ export default {
</script>
<style lang="scss">
.topmenu-container.el-menu--horizontal > .el-menu-item {
float: left;
height: 50px !important;
line-height: 50px !important;
color: #999093 !important;
padding: 0 5px !important;
margin: 0 10px !important;
//.topmenu-container.el-menu--horizontal > .el-menu-item {
// float: left;
// height: 50px !important;
// line-height: 70px !important;
// color: #999093 !important;
// padding: 5px 5px !important;
// //margin: 0 10px !important;
// background-color: #F6F6FA;
// border-top-left-radius: 30%;
// border-top-right-radius: 30%;
// font-size: medium;
//}
//
//.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
// border-bottom: 2px solid transparent !important;
// background-color: #D4D9E5;
// color: #303133;
//}
//
///* submenu item */
//.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
// float: left;
// height: 50px !important;
// line-height: 50px !important;
// color: #999093 !important;
// padding: 0 5px !important;
// margin: 0 10px !important;
//}
.menuStyle{
box-shadow: 0 0 8px #D4D9E5;
height: 30px;
border-bottom: transparent;
}
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 2px solid #{'var(--theme)'} !important;
color: #303133;
.menuStyle:hover{
color: #30B08F;
border-bottom: 0px transparent;
}
/* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
float: left;
height: 50px !important;
line-height: 50px !important;
color: #999093 !important;
padding: 0 5px !important;
margin: 0 10px !important;
::v-deep .el-menu::before{
color: transparent;
}
::v-deep .el-submenu{
height: 30px;
}
.el-menu-item.is-active{
color: white !important;
background-color: #0D8EEE !important;
}
.el-menu-item {
width: 130px;
color: #2E2E2E !important;
background-color:#F6F6FA !important;
}
.el-menu--horizontal > .el-submenu{
height: 10px;
}
.el-menu--horizontal > .el-submenu.is-active{
height: 80px;
}
</style>
src/layout/components/Navbar.vue
View file @ c66eb58e
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" v-if = "false"/>
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
<img src="../../assets/images/titlePic.png" alt="" style="width: 200px;height: 80px;">
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="right-menu">
<!-- <template v-if="device!=='mobile'">-->
<!-- <search id="header-search" class="right-menu-item" />-->
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
<!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
<!-- </template>-->
<div class="right-menu" style="margin-top: 20px">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
......@@ -113,13 +93,12 @@ export default {
<style lang="scss" scoped>
.navbar {
display: flex;
height: 50px;
height: 80px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
justify-content: space-between;
.hamburger-container {
line-height: 46px;
height: 100%;
......@@ -138,6 +117,9 @@ export default {
}
.topmenu-container {
margin-top:30px ;
//margin-left: -10px;
//height: 80px;
//position: absolute;
//left: 50px;
}
......
src/layout/index.vue
View file @ c66eb58e
......@@ -108,6 +108,6 @@ export default {
width: 100%;
}
.app-wrapper{
background: gray;
background: #D4D9E5;
}
</style>
src/views/employee/index.vue 0 → 100644
View file @ c66eb58e
This diff is collapsed.
src/views/index.vue
View file @ c66eb58e
This diff is collapsed.
src/views/login.vue
View file @ c66eb58e
......@@ -193,7 +193,7 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 500px;
height: 490px;
border-radius: 8px;
overflow: hidden;
display: flex;
......@@ -204,7 +204,8 @@ export default {
width: 375px;
height: 500px;
background: #388fff;
background-image: url("../../src/assets/images/bgImg.png");
background-size: contain;
}
.login-right {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment