scd_tools_go/service/static/menu_top.html

<style type="text/css">
	.spinner {
		width: 50px;
	    height: 10px;
	    text-align: center;
	    font-size: 10px;
	    display: inline-block;
	}
	.spinner > div {
		vertical-align: middle;
		background-color: #67CF22;
		height: 100%;
		width: 6px;
		display: inline-block;	   
		-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
		animation: stretchdelay 1.2s infinite ease-in-out;
	}
	 
	.spinner .rect2 {
	  -webkit-animation-delay: -1.1s;
	  animation-delay: -1.1s;
	}
	 
	.spinner .rect3 {
	  -webkit-animation-delay: -1.0s;
	  animation-delay: -1.0s;
	}
	 
	.spinner .rect4 {
	  -webkit-animation-delay: -0.9s;
	  animation-delay: -0.9s;
	}
	 
	.spinner .rect5 {
	  -webkit-animation-delay: -0.8s;
	  animation-delay: -0.8s;
	}
	 
	@-webkit-keyframes stretchdelay {
	  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
	  20% { -webkit-transform: scaleY(1.0) }
	}
	 
	@keyframes stretchdelay {
	  0%, 40%, 100% {
	    transform: scaleY(0.4);
	    -webkit-transform: scaleY(0.4);
	  }  20% {
	    transform: scaleY(1.0);
	    -webkit-transform: scaleY(1.0);
	  }
	}
</style>
<!-- BEGIN: Horizontal Menu -->
<div id="m_header_menu"
	class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark " style="width: 100%;">
		<div class="m-subheader" style="padding: 0;text-align: center;">
	        <div class="m-subheader__title m--font-info" style="font-size: 1.5rem;font-weight: bold;margin: 0;padding: 5px;">
	        	欢迎使用局放重症监测系统
	        </div>
		</div>
		<div id="m_header_taskinfo" class="m-header-menu hidden" style="padding: 0;text-align: center;width: 100%;margin: 0;height: auto;">
			<div class="startdatetime hidden" style="display: inline-block;color: #8c8a8a;vertical-align: middle;">开始时间</div>
			<div class="enddatetime hidden" style="display: inline-block;color: #8c8a8a;vertical-align: middle;margin-left: 1rem;">结束时间</div>
			<div class="spinner">
							  <div class="rect1"></div>
							  <div class="rect2"></div>
							  <div class="rect3"></div>
							  <div class="rect4"></div>
							  <div class="rect5"></div>
			</div>
			<div class="statetext" style="display: inline-block;color: #67CF22;vertical-align: middle;margin-left: 1rem;">监测中</div>
			<div class="stateicon" style="display: inline-block;color: #67CF22;vertical-align: middle;margin-left: 1rem;" title="停止监测任务"><i class="fa fa-stop-circle-o" style="font-size: 1.5rem;color: red;cursor: pointer;vertical-align: middle;"></i></div>
		</div>
</div>
<!-- END: Horizontal Menu -->
<!-- BEGIN: Topbar -->
<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general" style="position: absolute;top: 0;right: 0px;">
	<div class="m-stack__item m-topbar__nav-wrapper">
		<ul class="m-topbar__nav m-nav m-nav--inline">
			<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click" aria-expanded="true"><a href="#" class="m-nav__link m-dropdown__toggle" title="" data-toggle="m-tooltip" data-placement="bottom" data-original-title="当前登录用户信息"> <span class="m-topbar__userpic">
					<img src="/static/images/user-photo.png" class="m--img-rounded m--marginless m--img-centered" alt="">
				</span> <span class="m-topbar__username m--hide">  </span>
			</a>
				<div class="m-dropdown__wrapper">
					<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 12.5px;"></span>
					<div class="m-dropdown__inner" style="background-color:#0d1118">
						<div class="m-dropdown__header m--align-center" style="background: url(/static/assets/backend/images/misc/user_profile_bg.jpg); background-size: cover;">
							<div class="m-card-user m-card-user--skin-dark">
								<div class="m-card-user__pic" style="border: 1px solid #ccc;border-radius: 10px;">
								    <!--<img src="/assets/backend/images/users/user1.jpg" class="m--img-rounded m--marginless" alt="">-->
								    <i class="m-nav__link-icon la la-user-secret" style="font-size: 48px;color: #e0e0e9;margin-left: 5px;"></i>
								</div>
								<div class="m-card-user__details">
									<span id="user_card_name" class="m-card-user__name m--font-weight-500">-</span> <a id="user_card_dept" href="#" class="m-card-user__email m--font-weight-300 m-link">-</a>
								</div>
							</div>
						</div>
						<div class="m-dropdown__body">
							<div class="m-dropdown__content">
								<ul class="m-nav m-nav--skin-light" style="line-height: 30px;font-size: 12px;color: #5c7bc5;">
									<li class="m-nav__section m--hide"><span class="m-nav__section-text">  </span></li>
									<li class="m-nav__item"><i class="m-nav__link-icon la la-sitemap"></i> 单位： 
									<span class="m-nav__link-text" id="user_card_org">-</span>
									</li>
									<!--
									<li class="m-nav__item"><i class="m-nav__link-icon la la-mobile-phone"></i> 手机： <span id="user_card_mobile" class="m-nav__link-text">-</span>
									</li>
									<li class="m-nav__item"><i class="m-nav__link-icon la la-phone-square"></i> 座机： <span id="user_card_officephone" class="m-nav__link-text">-</span>
									</li>
									<li class="m-nav__item"><i class="m-nav__link-icon la la-tty"></i> 备用电话： <span id="user_card_backphone" class="m-nav__link-text"> -</span>
									</li>
									<li class="m-nav__item"><i class="m-nav__link-icon la la-envelope"></i> 邮箱： <span id="user_card_mail" class="m-nav__link-text">-</span>
									</li>
									<li class="m-nav__separator m-nav__separator--fit" style="border-bottom: 1px solid #3c486a;"></li>
									<li class="m-nav__item"><i class="m-nav__link-icon la la-chain"></i> 人员状态： <span class="m-nav__link-text">正常 </span>
									</li>	-->								
									<li class="m-nav__separator m-nav__separator--fit" style="border-bottom: 1px solid #3c486a;"></li>
									<li class="m-nav__item"><a style="color: #fff;" id="btn_logout" href="/logout" class="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">退出登录</a> <a style="color: #fff;" id="btn_logout" href="#" class="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder hidden">修改密码</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div></li>
				<li class="m-nav__item hidden" id="nav_help_menu">
					<a href="javascript:void(0)" onclick="Global.navigationTo('/static/module/help.html');" class="m-nav__link m-dropdown__toggle" title="" data-toggle="m-tooltip" data-placement="bottom" data-original-title="帮助">
						<span class="m-nav__link-icon">
							<i class="flaticon-info"></i>
						</span>
					</a>
				</li>
		</ul>
	</div>
</div>
<!-- END: Topbar -->