<style>
|
.head {
|
top:0px;
|
position:fixed;
|
width: 100%;
|
height: 44px;
|
background: #FFFFFF;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
box-shadow: 0 2px 8px 0 rgba(102,102,102,0.05);
|
}
|
.head_box {
|
width: 100%;
|
height: 100%;
|
padding: 0 15px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: relative;
|
}
|
.head_logo {
|
width: 98px;
|
height: 32px;
|
}
|
.head_menu {
|
width: 24px;
|
height: 24px;
|
}
|
.head_menus {
|
display:none;
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
height: calc(100vh - 44px);
|
position: absolute;
|
top: 44px;
|
left: 0;
|
z-index: 9;
|
background-color: #F5F5F5;
|
overflow-y: scroll;
|
}
|
.head_menus_item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
padding-bottom: 15px;
|
box-sizing: border-box;
|
border-bottom: 1px solid #DFE2E8;
|
margin-bottom: 20px;
|
}
|
.head_menus_item:last-child {
|
margin: 0 !important;
|
}
|
.menus_top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.menus_top_left {
|
display: flex;
|
align-items: center;
|
}
|
.menus_top_left_x {
|
width: 3px;
|
height: 15px;
|
background: #FF7900;
|
border-radius: 2px;
|
margin-right: 10px;
|
}
|
.menus_top_left span {
|
font-weight: 600;
|
font-size: 16px;
|
color: #191B1F;
|
}
|
.menus_top img {
|
width: 7px;
|
height: 14px;
|
}
|
.menus_list {
|
width: 100%;
|
margin-top: 15px;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
.menus_list_item {
|
width: 49%;
|
height: 47px;
|
background: #FFFFFF;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 400;
|
font-size: 14px;
|
color: #222222;
|
margin-top: 10px;
|
}
|
.menus_list_item:nth-child(1) {
|
margin-top: 0 !important;
|
}
|
.menus_list_item:nth-child(2) {
|
margin-top: 0 !important;
|
}
|
</style>
|
|
<div class="head">
|
<div class="head_box">
|
<img class="head_logo" src="${webDomain}/images/top_logo@2x.png" />
|
<img class="head_menu" id="head_menu_btn" src="${webDomain}/images/top_menu@2x.png" />
|
<div class="head_menus" id="head_menus_div">
|
<div class="head_menus_item">
|
<div class="menus_top">
|
<div class="menus_top_left">
|
<div class="menus_top_left_x"></div>
|
<span>首页</span>
|
</div>
|
<img src="${webDomain}/images/ic_ar@2x.png" />
|
</div>
|
</div>
|
<div class="head_menus_item">
|
<div class="menus_top">
|
<div class="menus_top_left">
|
<div class="menus_top_left_x"></div>
|
<span>智慧系统</span>
|
</div>
|
<img src="${webDomain}/images/ic_ar@2x.png" />
|
</div>
|
<div class="menus_list">
|
<div class="menus_list_item">智慧场馆运营系统</div>
|
<div class="menus_list_item">智慧场馆运维系统</div>
|
</div>
|
</div>
|
<div class="head_menus_item">
|
<div class="menus_top">
|
<div class="menus_top_left">
|
<div class="menus_top_left_x"></div>
|
<span>数智体育场馆</span>
|
</div>
|
<img src="${webDomain}/images/ic_ar@2x.png" />
|
</div>
|
<div class="menus_list">
|
<div class="menus_list_item">综合体育场馆</div>
|
<div class="menus_list_item">全民健身中心</div>
|
<div class="menus_list_item">校园体育场馆</div>
|
<div class="menus_list_item">冰雪体育场馆</div>
|
<div class="menus_list_item">游泳体育场馆</div>
|
<div class="menus_list_item">智慧体育公园</div>
|
</div>
|
</div>
|
<div class="head_menus_item">
|
<div class="menus_top">
|
<div class="menus_top_left">
|
<div class="menus_top_left_x"></div>
|
<span>24H智能场馆</span>
|
</div>
|
<img src="${webDomain}/images/ic_ar@2x.png" />
|
</div>
|
<div class="menus_list">
|
<div class="menus_list_item">24H智能场馆</div>
|
<div class="menus_list_item">无人值守场馆</div>
|
</div>
|
</div>
|
<div class="head_menus_item">
|
<div class="menus_top">
|
<div class="menus_top_left">
|
<div class="menus_top_left_x"></div>
|
<span>数智体育平台</span>
|
</div>
|
<img src="${webDomain}/images/ic_ar@2x.png" />
|
</div>
|
<div class="menus_list">
|
<div class="menus_list_item">体育连锁运营平台</div>
|
<div class="menus_list_item">省市级数智体育平台</div>
|
</div>
|
</div>
|
<div class="head_menus_item">
|
<div class="menus_top">
|
<div class="menus_top_left">
|
<div class="menus_top_left_x"></div>
|
<span>景区&游乐园</span>
|
</div>
|
<img src="${webDomain}/images/ic_ar@2x.png" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
