root/apt-nl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sov

Browse Source
This commit is contained in:
xiangxy
2023-05-25 18:37:01 +08:00
parent 8a6f9f8b59 d8d2702e9f
commit 91d73c483b
10 changed files with 139 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/pages/shells/index/index.vue
View File

@@ -2,25 +2,31 @@
<div class="index-container">
<div class="header-container">
<div class="title-container">
<span class="company-logo"></span>
<img src="../../../images/aio/logo_1.png" alt="诺力">
</div>
<div class="horizontal-menu-container">
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
</el-menu>
</div>
<div class="state-container">
<div class="state-item">运行</div>
<div class="state-line"></div>
<div class="state-item">自动</div>
<div class="state-line"></div>
<div class="state-item">中文<i class="icon_dropdown"></i></div>
</div>
<div class="user-container">
<div class="elec-qty-wrap">
<div class="elec-qty"></div>
<div class="header-wraper__right">
<div class="header_user_wraper">
<div class="header_user_wraper_inn">
<div class="state-item">运行</div>
<div class="state-line"></div>
<div class="state-item">自动</div>
<div class="state-line"></div>
<div class="state-item">中文&nbsp;<i class="icon_dropdown"></i></div>
</div>
</div>
<div class="header_user_wraper">
<div class="header_user_wraper_inn">
<div class="elec-qty-wrap">
<div class="elec-qty"></div>
</div>
<div class="elec-txt">90%</div>
</div>
</div>
<div class="elec-txt">90%</div>
<div class="header_user_wraper">
<div class="header_user_wraper_inn" @click="showDropdown">
<div class="iconfont icon_admin"></div>
@@ -34,9 +40,9 @@
<div class="popper__arrow"></div>
</div>
</div>
</div>
<div class="time-container">
<jxTime></jxTime>
<div class="time-container">
<jxTime></jxTime>
</div>
</div>
</div>
<router-view></router-view>
@@ -216,32 +222,35 @@ export default {
.index-container
_wh(100%, 100%)
.header-container
position fixed
left 0
top 0
z-index 150
_fj()
_wh(100%, 61px)
_wh(100%, 81px)
line-height 79px
padding 0 10px
border-bottom 2px solid #f1f1f1
border-bottom 1px solid #f1f1f1
background-color #fff
.title-container
_fj(center)
_wh(130px, 61px)
.company-logo
display block
_wh(100%, 100%)
background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
_wh(300px, 100%)
img
_wh(100%, auto)
.horizontal-menu-container
height 61px
>>>.el-menu-item
padding 0 7px
.state-container
_fj()
.user-container
_fj()
height 100%
padding 0 10px
>>>.el-menu--horizontal>.el-menu-item
line-height 79px
height 79px
font-size 18px
.time-container
_fj()
.state-item
border 1px solid #54C0B3
border-radius 4px
_font(15px,25px,#54C0B3,,center)
padding 0 7px
_font(18px,32px,#54C0B3,,center)
padding 0 15px
.state-line
_wh(2px,20px)
opacity 0.3
@@ -250,9 +259,9 @@ export default {
.elec-qty-wrap
position relative
width 15px
height 25px
height 32px
border 1px solid #dddddd
margin-right 2px
margin-right 5px
.elec-qty
position absolute
width 100%
@@ -262,16 +271,18 @@ export default {
background-color #54C0B3
// background-color #fa6400
.elec-txt
_font(15px, 25px, #909399,,left)
_font(18px, 32px, #909399,,left)
.icon_admin
_font(20px, 25px, #54C0B3,,left)
_font(20px, 32px, #54C0B3,,left)
margin-right 2px
>>>.el-menu
border-right none
.header-wraper__right
height 100%
_fj(flex-end)
.header_user_wraper
padding 0 10px
height 59px
margin 0 10px
height 100%
position relative
&:hover
background-color #f0f0f0
@@ -280,7 +291,7 @@ export default {
_wh(100%, 100%)
.header_dropdown_wraper
position absolute
top 52px
top 90%
left 0
z-index 1000
width 100%
@@ -324,4 +335,17 @@ export default {
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
@media only screen and (max-width: 1620px) {
.title-container {
width 150px
height 15px
}
>>>.el-menu--horizontal>.el-menu-item {
font-size 16px
}
>>>.el-menu-item {
padding 0 10px
}
}
</style>