Skip to content

liangzhen / framework-tools-web

Go to a project
Commit dedd7eee by 史敦盼
Options

菜单样式修改

1 parent 4e22ebfa
Inline Side-by-side
Showing with 240 additions and 173 deletions
src/views/Main/index.scss 0 → 100644
.isActive {
color: $color-primary !important;
}
.goBack {
cursor: pointer;
}
.main {
height: 100%;
}
.top_menu_container {
/* margin-bottom: 20px; */
height: 125px;
}
.left_menu_and_drawio_container {
display: flex;
height: calc(100% - 178px);
width: calc(100% - 40px);
margin: 30px 20px 20px 20px;
border-top: 6px solid #0d867f;
box-shadow: 10px 10px 30px 30px rgba(201, 226, 225, 1);
}
.el-breadcrumb {
height: 30px;
margin-left: 20px;
line-height: 30px;
}
/* .left_menu_container{
width: 6%;
} */
.logo_title_container {
height: 64px;
display: flex;
align-items: center;
background-color: rgb(13, 134, 127);
color: #fff;
justify-content: space-between;
}
.left_container {
display: flex;
align-items: center;
}
.logo_title {
font-weight: bold;
font-size: 25px;
}
.system_logo {
width: 42px;
margin-left: 20px;
margin-right: 20px;
}
.operate_menu {
width: 350px;
height: 35px;
font-size: 14px;
font-weight: 500;
display: flex;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 19px 19px 19px 19px;
margin-right: 24px;
justify-content: space-around;
align-items: center;
}
.line {
height: 16px;
border: 0.5px solid #fff;
}
.operate_title {
margin-left: 6px;
}
.menu_title {
font-size: 18px;
font-weight: bold;
color: #666;
position: relative;
&::before {
content: '';
position: absolute;
// background: url('@/assets/main/4icon_default.png') no-repeat center;
background-size: cover;
width: 20px;
height: 20px;
position: absolute;
left: -25px;
top: 9%;
}
&:hover {
color: $color-primary;
}
&_0::before {
background: url('@/assets/main/4icon_default.png') no-repeat center;
background-size: cover;
}
&_0:hover {
&::before {
background: url('@/assets/main/4icon_press.png') no-repeat center;
background-size: cover;
}
}
&_1::before {
background: url('@/assets/main/1icon_default.png') no-repeat center;
background-size: cover;
}
&_1:hover {
&::before {
background: url('@/assets/main/1icon_press.png') no-repeat center;
background-size: cover;
}
}
&_2::before {
background: url('@/assets/main/2icon_default.png') no-repeat center;
background-size: cover;
}
&_2:hover {
&::before {
background: url('@/assets/main/2icon_press.png') no-repeat center;
background-size: cover;
}
}
&_3::before {
background: url('@/assets/main/3icon_default.png') no-repeat center;
background-size: cover;
}
&_3:hover {
&::before {
background: url('@/assets/main/3icon_press.png') no-repeat center;
background-size: cover;
}
}
&_4::before {
background: url('@/assets/main/5icon_default.png') no-repeat center;
background-size: cover;
}
&_4:hover {
&::before {
background: url('@/assets/main/5icon_press.png') no-repeat center;
background-size: cover;
}
}
&.isActive {
&::after {
content: '';
position: absolute;
bottom: -17px;
left: -20px;
width: calc(100% + 20px);
height: 4px;
background-color: $color-primary;
}
}
&_0.isActive::before {
background: url('@/assets/main/4icon_press.png') no-repeat center;
background-size: cover;
}
&_1.isActive::before {
background: url('@/assets/main/1icon_press.png') no-repeat center;
background-size: cover;
}
&_2.isActive::before {
background: url('@/assets/main/2icon_press.png') no-repeat center;
background-size: cover;
}
&_3.isActive::before {
background: url('@/assets/main/3icon_press.png') no-repeat center;
background-size: cover;
}
&_4.isActive::before {
background: url('@/assets/main/5icon_press.png') no-repeat center;
background-size: cover;
}
}
.under_line {
position: absolute;
bottom: -25px;
left: 0;
width: 100%;
height: 6px;
background-color: #0d867f;
display: none;
}
.operate_menu_item {
display: flex;
align-items: center;
cursor: pointer;
}
/deep/ .is-leaf {
background-color: rgb(245, 246, 250) !important;
}
.menu_icon {
width: 20px;
height: 20px;
position: absolute;
left: -25px;
top: 9%;
}
.menu_icon_active {
width: 20px;
height: 20px;
position: absolute;
left: -25px;
top: 9%;
display: none;
}
.menu_container {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
}
.menu_1_container {
display: flex;
justify-content: space-around;
}
.menu_1_item_line {
width: 1px;
height: 240px;
}
.menu_1_item_title {
color: #666;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.menu_1_item_subtitle {
display: flex;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
}
.menu_1_item_subtitle:hover {
color: #0d867f;
}
src/views/Main/index.vue
...@@ -48,7 +48,10 @@ ...@@ -48,7 +48,10 @@
/> --> /> -->
<span <span
class="menu_title" class="menu_title"
:class="{ isActive: isTopMenuActive(index) }" :class="[
{ isActive: isTopMenuActive(index) },
`menu_title_${index}`,
]"
>{{ item.name }}</span >{{ item.name }}</span
> >
<!-- <p class="under_line"></p> --> <!-- <p class="under_line"></p> -->
...@@ -106,7 +109,7 @@ ...@@ -106,7 +109,7 @@
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item <el-breadcrumb-item
v-for="(item, index) in breadcrumbList" v-for="(item, index) in breadcrumbList"
:key="index" :key="item.name"
class="flex" class="flex"
> >
<div <div
...@@ -491,175 +494,5 @@ export default { ...@@ -491,175 +494,5 @@ export default {
@import '@/styles/common.scss'; @import '@/styles/common.scss';
@import '@/styles/transition.scss'; @import '@/styles/transition.scss';
@import '@/styles/elementui.scss'; @import '@/styles/elementui.scss';
.isActive { @import './index.scss';
color: $color-primary !important;
}
.goBack {
cursor: pointer;
}
.main {
height: 100%;
}
.top_menu_container {
/* margin-bottom: 20px; */
height: 125px;
}
.left_menu_and_drawio_container {
display: flex;
height: calc(100% - 178px);
width: calc(100% - 40px);
margin: 30px 20px 20px 20px;
border-top: 6px solid #0d867f;
box-shadow: 10px 10px 30px 30px rgba(201, 226, 225, 1);
}
.el-breadcrumb {
height: 30px;
margin-left: 20px;
line-height: 30px;
}
/* .left_menu_container{
width: 6%;
} */
.logo_title_container {
height: 64px;
display: flex;
align-items: center;
background-color: rgb(13, 134, 127);
color: #fff;
justify-content: space-between;
}
.left_container {
display: flex;
align-items: center;
}
.logo_title {
font-weight: bold;
font-size: 25px;
}
.system_logo {
width: 42px;
margin-left: 20px;
margin-right: 20px;
}
.operate_menu {
width: 350px;
height: 35px;
font-size: 14px;
font-weight: 500;
display: flex;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 19px 19px 19px 19px;
margin-right: 24px;
justify-content: space-around;
align-items: center;
}
.line {
height: 16px;
border: 0.5px solid #fff;
}
.operate_title {
margin-left: 6px;
}
.menu_title {
font-size: 18px;
font-weight: bold;
color: #666;
position: relative;
&::before {
content: '';
position: absolute;
background: url('@/assets/main/4icon_default.png') no-repeat center;
background-size: cover;
width: 20px;
height: 20px;
position: absolute;
left: -25px;
top: 9%;
}
&:hover {
color: $color-primary;
&::before {
background: url('@/assets/main/4icon_press.png') no-repeat center;
background-size: cover;
}
}
&.isActive {
&::before {
background: url('@/assets/main/4icon_press.png') no-repeat center;
background-size: cover;
}
&::after {
content: '';
position: absolute;
bottom: -17px;
left: -20px;
width: calc(100% + 20px);
height: 4px;
background-color: $color-primary;
}
}
}
.under_line {
position: absolute;
bottom: -25px;
left: 0;
width: 100%;
height: 6px;
background-color: #0d867f;
display: none;
}
.operate_menu_item {
display: flex;
align-items: center;
cursor: pointer;
}
/deep/ .is-leaf {
background-color: rgb(245, 246, 250) !important;
}
.menu_icon {
width: 20px;
height: 20px;
position: absolute;
left: -25px;
top: 9%;
}
.menu_icon_active {
width: 20px;
height: 20px;
position: absolute;
left: -25px;
top: 9%;
display: none;
}
.menu_container {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
}
.menu_1_container {
display: flex;
justify-content: space-around;
}
.menu_1_item_line {
width: 1px;
height: 240px;
}
.menu_1_item_title {
color: #666;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.menu_1_item_subtitle {
display: flex;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
}
.menu_1_item_subtitle:hover {
color: #0d867f;
}
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!