Skip to content

F
founder_vue
Commit 3c3e0660 by liuguorong93
Options

样式修改02

parent 94b05acb
Showing with 133 additions and 67 deletions
src/assets/styles/leftMenu.scss
@import './main.scss';
.leftMenu{
.leftMenu {
width: 220px;
height: 100%;
// background: #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
opacity: 1;
font-size: $ns-font-size-sm;
.iconfont{margin-right:18px;margin-left:7px;}
/deep/ .el-submenu ul>li{background-color: #1C1D27 !important;}
/deep/ .el-menu /deep/ .el-submenu__title:hover{background-color: #2F313D !important;}
/deep/ .el-menu-item.is-active{
background-color: #2F313D !important;border-left:3px solid #3670FF;color:#fff;
i{
color:#2962FF;
}
background: #111827;
// background: #111827 url("../assets/img/bsh_tb.png") no-repeat center bottom;
// background-size: 179px 190px;
.iconfont {
margin-right: 18px;
margin-left: 7px;
}
/deep/ .el-submenu ul>li {
background-color: #1C1D27 !important;
}
/deep/ .el-menu /deep/ .el-submenu__title:hover {
background-color: #2F313D !important;
}
/deep/ .el-menu-item,/deep/ .el-submenu{border-left:3px solid transparent;}
/deep/ .el-menu-item,/deep/ .el-submenu__title{height:52px;line-height: 52px;}
/deep/ .el-divider--horizontal{
/deep/ .el-menu-item,
/deep/ .el-submenu {
border-left: 3px solid transparent;
}
/deep/ .el-menu-item,
/deep/ .el-submenu__title {
height: 52px;
line-height: 52px;
}
/deep/ .el-divider--horizontal {
width: 70%;
margin: 10px 0 10px 30px;
background-color: #12131B;
}
/deep/ .el-scrollbar {
.el-scrollbar__wrap {
overflow-x: hidden;
.el-menu{
.el-menu {
/*margin-top:10px;*/
width:100%;
height:100%;
.el-submenu:not(.is-opened){
.el-submenu__icon-arrow{
width: 100%;
height: 100%;
.el-submenu:not(.is-opened) {
.el-submenu__icon-arrow {
transform: rotateZ(-90deg);
}
}
.el-submenu.is-opened{
.el-submenu__icon-arrow{
.el-submenu.is-opened {
.el-submenu__icon-arrow {
transform: rotateZ(180deg);
}
}
.el-menu-item.is-active{
color:$base-color;
/*background:$-left-active-background !important;*/
font-weight:bold;
/*border-right:$-left-active-background-border;*/
// .el-menu-item.is-active {
// color: $base-color;
// /*background:$-left-active-background !important;*/
// font-weight: bold;
// /*border-right:$-left-active-background-border;*/
// }
.el-menu-item,
.el-submenu__title {
font-size: $ns-font-size-sm;
}
.el-menu-item,.el-submenu__title{font-size: $ns-font-size-sm;}
/*/deep/ .el-submenu__title:hover{
background-color:#ecf5ff !important;
}*/
.el-menu.el-menu--inline li{padding-left:59px !important;}
.el-submenu__icon-arrow{font-size:15px;}
.el-menu .el-menu-item {
background: #111827 !important;
padding-left: 49px !important;
}
.el-submenu__icon-arrow {
font-size: 15px;
}
.el-menu-item.is-active {
position: relative;
background: #242A38 !important;
border-left: 3px solid #00BFFF;
// ::after {
// content: "";
// position: absolute;
// width: 5px;
// height: 5px;
// left: 0;
// top: 50%;
// transform: translateY(-50%);
// background-color: #00BFFF;
// border-radius: 50%;
// }
}
}
}
}
}
}
\ No newline at end of file
src/components/leftMenu_components.vue
......@@ -12,9 +12,9 @@
id="leftMenuClass"
:collapse="isCollapse"
:unique-opened="isOpenOnly"
active-text-color="#FFFFFF"
background-color="#252733"
text-color="#B2B5C8"
active-text-color="#11BDFD"
background-color="#111827"
text-color="#D0D5DC"
ref="menu"
>
<div
......
src/config/defaultSettings.js
......@@ -20,24 +20,23 @@
* storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
*
*/
export default {
primaryColor: '#1890FF', // primary color of ant design
navTheme: 'dark', // theme for nav menu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: true, // sticky header
fixSiderbar: true, // sticky siderbar
autoHideHeader: false, // auto hide header
colorWeak: false,
multiTab: false,
production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
// vue-ls options
storageOptions: {
namespace: 'pro__',
name: 'ls',
storage: 'local'
},
windowWidth: 1920,
windowHeight: 1080
}
\ No newline at end of file
export default {
primaryColor: '#1890FF', // primary color of ant design
navTheme: 'dark', // theme for nav menu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: true, // sticky header
fixSiderbar: true, // sticky siderbar
autoHideHeader: false, // auto hide header
colorWeak: false,
multiTab: false,
production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
// vue-ls options
storageOptions: {
namespace: 'pro__',
name: 'ls',
storage: 'local'
},
windowWidth: 1920,
windowHeight: 1080
}
src/views/sjfx/sjfx.vue
......@@ -7,7 +7,10 @@
* @LastEditTime: 2022-01-20 19:07:40
-->
<template>
<div class="boxDiv" id="boxDiv">
<div
class="boxDiv"
id="boxDiv"
>
<div class="header">
<!-- 全国警犬数量 -->
<div class="box1 box">
......@@ -21,7 +24,11 @@
</div>
</div>
<div class="zxt">
<img :src="zxt1" alt="" class="zxtimg" />
<img
:src="zxt1"
alt=""
class="zxtimg"
/>
</div>
</div>
<!-- 警犬出勤率 -->
......@@ -77,7 +84,11 @@
</div>
</div>
<div class="zxt">
<img :src="zxt2" alt="" class="zxtimg" />
<img
:src="zxt2"
alt=""
class="zxtimg"
/>
</div>
</div>
</div>
......@@ -90,7 +101,11 @@
<div id="four"></div>
<div class="topfive">
<div class="fiveheader">获奖排行 Top5</div>
<div class="Pro" v-for="(item, idx) in topFiveList" :key="idx">
<div
class="Pro"
v-for="(item, idx) in topFiveList"
:key="idx"
>
<!-- <div class="idx">
{{ item.xzqh }}
</div> -->
......@@ -101,7 +116,10 @@
effect="light"
>
</el-tooltip> -->
<div class="idx" :title="item.xzqh">
<div
class="idx"
:title="item.xzqh"
>
{{ item.xzqh }}
</div>
<div
......@@ -716,7 +734,7 @@ export default {
padding: 0 20px;
}
.header {
margin-top: 15px;
margin-top: 24px;
display: flex;
justify-content: space-between;
.box {
......
src/views/sy/index.vue
......@@ -315,13 +315,13 @@ export default {
}
.headerTitle {
height: 60px;
height: 64px;
width: 240px;
background: #252733;
background: #1e2636;
font-size: 18px;
color: #fff;
font-weight: 600;
line-height: 60px;
line-height: 64px;
img {
// width: 36px;
......@@ -624,12 +624,11 @@ export default {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background: #252733;
}
}
.leftMenu {
height: calc(100% - 60px);
height: calc(100% - 64px);
}
.tzggDialogs {
......
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