306132416@qq.com 3 years ago
parent
commit
0ef7371ba7
5 changed files with 428 additions and 89 deletions
  1. 285 31
      assets/css/app.css
  2. BIN
      assets/img/self/bg.jpg
  3. 39 2
      data-center/quick_list.html
  4. 2 2
      index.html
  5. 102 54
      login.html

+ 285 - 31
assets/css/app.css

@@ -465,7 +465,7 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 
 .tpl-content-wrapper {
     padding-left: 255px;
-    padding-top: 10px;
+    /*padding-top: 10px;*/
 }
 
 .tpl-content-wrapper-hover {
@@ -507,7 +507,7 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
     margin: 1px 0 0;
     border: 0;
     padding: 12px 15px;
-    padding-top: 6px;
+    /*padding-top: 6px;*/
     text-decoration: none;
     color: #485a6a;
     font-size: 14px;
@@ -548,6 +548,7 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 .tpl-left-nav-item .nav-link:hover span,
 .tpl-left-nav-sub-menu a:hover span {
     color: #5b9bd1;
+    font-weight: bold;
 }
 
 .tpl-left-nav-item .nav-link.active {
@@ -1970,8 +1971,8 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 }
 
 .display-flex-start {
-	display: flex;
-	align-items: center;
+    display: flex!important;
+    align-items: center;
 }
 .display-flex-column {
     display: flex;
@@ -1980,11 +1981,14 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 .flex-space-evenly {
     justify-content: space-evenly;
 }
+.flex-space-between {
+    justify-content: space-between;
+}
 .items-center {
     align-items: center;
 }
 .justify-center {
-   justify-content: center;
+    justify-content: center;
 }
 .justify-end {
     justify-content: flex-end;
@@ -1996,51 +2000,83 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
     display: flex;
     justify-content: space-between;
 }
+.display-flex-around {
+    display: flex;
+    justify-content: space-around;
+}
+.display-flex-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
 .display-flex-wrap {
     display: flex;
     flex-wrap: wrap;
 }
+.margin-left-3px {
+    margin-left: 3px;
+}
+.margin-left-10 {
+    margin-left: 10px;
+}
+.margin-left-15 {
+    margin-left: 15px;
+}
 .margin-left-20 {
-	margin-left: 20px;
+    margin-left: 20px;
+}
+.margin-left-30 {
+    margin-left: 30px;
 }
 .margin-right-10 {
     margin-right: 10px;
 }
+.margin-right-15 {
+    margin-right: 15px;
+}
 .margin-top-10 {
     margin-top: 10px;
 }
+.margin-top-15 {
+    margin-top: 15px;
+}
 .margin-top-50 {
-	margin-top: 50px;
+    margin-top: 50px;
+}
+.margin-top-10per {
+    margin-top: 10%;
 }
 .padding-right-0 {
-	padding-right: 0!important;
+    padding-right: 0!important;
 }
 .padding-left-0 {
     padding-left: 0!important;
 }
+.padding-left-10 {
+    padding-left: 10px;
+}
 .date-box-self {
-	background: #fff;
-	width: 300px;
-	border-radius: 3px;
-	border: 1px solid #d7d7d7;
+    background: #fff;
+    width: 300px;
+    border-radius: 3px;
+    border: 1px solid #d7d7d7;
 }
 .date-input-self {
-	border: none;
-	background-color: #fff!important;
-	text-indent: 10px;
+    border: none;
+    background-color: #fff!important;
+    text-indent: 10px;
 }
 .date-button-self {
-	border: none;
-	background-color: #fff!important;
+    border: none;
+    background-color: #fff!important;
 }
 .am-btn-self {
-	color: #555;
-	background-color: #fff;
-	border-color: #d7d7d7;
+    color: #555;
+    background-color: #fff;
+    border-color: #d7d7d7;
 }
 .doc-js-btn-1 > .am-active {
-	color: #fff!important;
-	background-color: #409eff!important;
+    color: #fff!important;
+    background-color: #409eff!important;
 }
 .vis-hidden {
     visibility: hidden!important;
@@ -2048,24 +2084,57 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 .width-100{
     width: 100%!important;
 }
+.width-90{
+    width: 90%!important;
+}
+.width-80{
+    width: 80%!important;
+}
+.width-70 {
+    width: 70%!important;
+}
 .width-65 {
     width: 65%!important;
 }
+.width-60 {
+    width: 60%!important;
+}
 .width-40 {
     width: 40%!important;
 }
-.width-20 {
-    width: 20%!important;
+.width-35 {
+    width: 35%!important;
+}
+.width-30 {
+    width: 30%!important;
 }
 .width-25 {
     width: 25%!important;
 }
+.width-20 {
+    width: 20%!important;
+}
+.width-17 {
+    width: 17%!important;
+}
 .width-15 {
     width: 15%!important;
 }
+.width-13 {
+    width: 13%!important;
+}
+.width-12 {
+    width: 12%!important;
+}
 .width-10 {
     width: 10%!important;
 }
+.width-9 {
+    width: 9%!important;
+}
+.width-8 {
+    width: 8%!important;
+}
 .width-80px {
     width: 80px!important;
 }
@@ -2084,14 +2153,35 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 .margin-bottom-20 {
     margin-bottom:20px
 }
+.margin-bottom-10 {
+    margin-bottom:10px
+}
+.margin-bottom-5 {
+    margin-bottom:5px
+}
+.margin-right-5 {
+    margin-right: 5px;
+}
 .margin-right-20 {
     margin-right:20px;
 }
 .margin-right-30 {
     margin-right:30px;
 }
+.padding-top-0 {
+    padding-top: 0!important;
+}
+.padding-top-20 {
+    padding-top: 20px!important;
+}
+.font-size-10 {
+    font-size: 10px;
+}
+.font-size-12 {
+    font-size: 12px;
+}
 .font-size-13 {
-    font-size: 13px;
+    font-size: 13px!important;
 }
 .font-size-14 {
     font-size: 14px;
@@ -2102,6 +2192,12 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 .font-size-20 {
     font-size: 20px;
 }
+.font-size-24 {
+    font-size: 24px;
+}
+.font-size-32 {
+    font-size: 32px;
+}
 .font-family-cur {
     font-family: cursive;
 }
@@ -2120,6 +2216,9 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
 .border-bottom-d7 {
     border-bottom: 1px solid #d7d7d7;
 }
+.radius-4 {
+    border-radius: 5px;
+}
 .radio-box {
     position: absolute;
     top: 55px;
@@ -2137,15 +2236,32 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
     color: #40A9FF;
     cursor: pointer;
 }
+.color-555 {
+    color: #555;
+}
 .color-999 {
     color: #999;
 }
+.color-blue {
+    color: #40A9FF!important;
+}
+.color-gray {
+    color: #909D99;
+}
+.color-red {
+    color: #FF007F;
+}
 .default-input-class {
-    height: 35px;
-    border: 1px solid #d7d7d7;
-    border-radius: 2px;
+    height: 35px!important;
+    border: 1px solid #d7d7d7!important;
+    border-radius: 2px!important;
     width: 40%;
-    text-indent: 10px;
+    text-indent: 5px!important;
+    font-size: 14px!important;
+}
+.disabled-input-class {
+    background-color: #F5F7FA!important;
+    color: #6CC1EF!important;
 }
 .default-textArea-class {
     height: 100px;
@@ -2163,7 +2279,21 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
     height: 35px;
     border-radius: 5px;
 }
-
+.disabled-btn-class {
+    background-color: #909D99!important;
+    color: #ffffff!important;
+}
+.left-line-class {
+    width: 2px;
+    height: 330px;
+    background-color: #EEEFF2;
+    position: absolute;
+    left: -3px;
+    top: 45px;
+}
+.cursor-hand {
+    cursor: pointer;
+}
 .add-btn-default {
     background-color: #96BF48;
 }
@@ -2172,7 +2302,11 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
     color: #555;
     border:1px solid #d7d7d7;
 }
-
+.modal-bottom-btn {
+    position: fixed;
+    bottom: 50px;
+    right: 50px;
+}
 .header-title-class {
     color: #5a8dbb;
     font-weight: bold;
@@ -2203,9 +2337,129 @@ ul.tpl-dropdown-content li>a.tpl-dropdown-content-message:last-child {
     margin-right: 5px;
     border-radius: 5px;
 }
+.self-tabs-box {
+    height: 50px;
+    background-color: #f4f5f9;
+    margin: 15px 0 15px 0;
+}
+.self-tabs-box div {
+    height: 50px;
+    line-height: 50px;
+    padding: 0 15px 0 15px;
+}
+.tabs-active {
+    color: #1890ff;
+    border-bottom: 3px solid #1890ff;
+}
+.self-hide {
+    display: none;
+}
+.margin-top-60 {
+    margin-top: 60px;
+}
+
+.fff-btn-class {
+    background-color: #fff;
+    color: #555;
+    border: 1px solid #d7d7d7;
+    width: 100px;
+    height: 35px;
+    border-radius: 5px;
+}
+.pos-relative {
+    position: relative;
+}
+.build-img-box {
+    position: absolute;
+    top: 0;
+    right: 15%;
+}
+.build-img-box img {
+    border-radius: 3px;
+}
+@media screen and (max-width: 1600px) {
+    .date-box-self {
+        width:220px;
+    }
+}
+@media screen and (max-width: 1500px) {
+    .build-img-box {
+        position: absolute;
+        top: 0;
+        right: 7%;
+    }
+    .date-box-self {
+        width:200px;
+    }
+}
+.hidden-none {
+    display: none!important;
+}
+.upload-box{
+    width: 140px;
+    height:100px;
+    line-height: 50px;
+    background-color: #f5f7fa;
+    border-radius: 2px;
+    border: 1px dashed #d7d7d7;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+@media screen and (max-width: 1600px) {
+    .upload-box{
+        width: 120px;
+        height:80px;
+        line-height: 30px;
+    }
+}
+@media screen and (max-width: 1400px) {
+    .upload-box{
+        width: 100px;
+        height:60px;
+        line-height:15px;
+    }
+}
+.picModal {
+    position: absolute;
+    top: 0;
+    width:100%;
+    height:83%;
+    border-radius: 3px;
+    background-color: rgba(0,0,0,.5);
+    display:none;
+    z-index:99;
+}
+.picModal-box{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index:100;
+}
+
+.self-diamond-icon {
+    width: 5px;
+    height: 5px;
+    background-color: #000;
+    margin-right: 10px;
+    transform: rotate(45deg);
+}
+.input-unit-class{
+    position:absolute;
+    top: 6px;
+    right: 8px;
+}
 .am-table-striped>tbody>tr:nth-child(odd)>td, .am-table-striped>tbody>tr:nth-child(odd)>th {
     background: #fff;
 }
 .am-table>tbody>tr>td, .am-table>tbody>tr>th, .am-table>tfoot>tr>td, .am-table>tfoot>tr>th, .am-table>thead>tr>td, .am-table>thead>tr>th {
     color: #555;
 }
+.am-input-group .am-form-field, .am-input-group-btn>.am-btn {
+    height: 33px;
+}
+.am-table>tbody>tr>td, .am-table>tbody>tr>th, .am-table>tfoot>tr>td, .am-table>tfoot>tr>th, .am-table>thead>tr>td, .am-table>thead>tr>th {
+    vertical-align: middle;
+}

BIN
assets/img/self/bg.jpg


+ 39 - 2
data-center/quick_list.html

@@ -5,16 +5,53 @@
 		<title>快捷报表</title>
 	</head>
 	<body>
+	<div>建设中....</div>
+	<button onclick="debounceTask">testDebounce</button>
+	</body>
 
 
+	<script>
+     //防抖
+		function debounce (fn , delay) {
+			let timer;
+			return function (...args) {
+                if (timer) {
+                	clearTimeout(timer)
+				}
+                timer = setTimeout(()=>{
+                	fn.apply(this,args)
+				},delay)
+			}
+		}
 
+		//test
 
-	<div>建设中....</div>
+		function task() {
+			console.log('run')
+		}
 
+		const debounceTask = debounce(task,1000);
 
+    //节流
+		function throttle(fn , delay) {
+			let last = 0; //last time
+			return function (...args) {
+				const now  = Date.now();
+				if(now - last > delay){
+					last = now;
+					fn.apply(this,args)
+				}
+			}
+		}
 
+	function task2() {
+		console.log('run2')
+	}
 
+	const throttleTask = throttle(task2,1000)
+
+
+	</script>
 
 
-	</body>
 </html>

+ 2 - 2
index.html

@@ -73,9 +73,9 @@
                         <li>
                             <a href="#" class="tpl-dropdown-content-message">
                                 <span class="tpl-dropdown-content-photo">
-                      <img src="assets/img/user02.png" alt=""> </span>
+                                     <img src="assets/img/user02.png" alt=""> </span>
                                 <span class="tpl-dropdown-content-subject">
-                      <span class="tpl-dropdown-content-from"> 禁言小张 </span>
+                                  <span class="tpl-dropdown-content-from"> 禁言小张 </span>
                                 <span class="tpl-dropdown-content-time">10分钟前 </span>
                                 </span>
                                 <span class="tpl-dropdown-content-font"> Amaze UI 的诞生,依托于 GitHub 及其他技术社区上一些优秀的资源;Amaze UI 的成长,则离不开用户的支持。 </span>

+ 102 - 54
login.html

@@ -15,69 +15,117 @@
   <meta name="apple-mobile-web-app-title" content="Amaze UI" />
   <link rel="stylesheet" href="assets/css/amazeui.min.css" />
   <link rel="stylesheet" href="assets/css/admin.css">
-  <link rel="stylesheet" href="assets/css/app.css">
+  <link rel="stylesheet" href="assets/css/app.css?version=1.0">
 </head>
 
 <style>
+	.bg-login-box {
+		background-size: 100%;
+		height: 100%;
+		background-image: url("assets/img/self/bg.jpg");
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.login-box {
+		background-color: #F3FCFD;
+		width: 450px;
+		height: 400px;
+		border-radius: 30px;
+		margin-bottom: 8%;
+	}
+
+	.color-title-login {
+		color: #007AFF;
+	}
+	.login-title-box {
+		 margin-top: 30px;
+		 text-align: center;
+         color: #333333;
+		 font-size: 28px;
+  	}
+	.login-input-class-new {
+		width: 320px;
+		border: none;
+		background: transparent;
+		border-bottom: 1px solid #d7d7d7;
+		font-size: 16px;
+		padding-bottom: 10px;
+	}
+	.login-input-verCode {
+		border: none;
+		background: transparent;
+		border-bottom: 1px solid #d7d7d7;
+		font-size: 15px;
+		padding-bottom: 5px;
+
+	}
+
+	.login-btn-class {
+		background-color: #00C7F7;
+		width: 320px;
+		color: #fff;
+		border-radius: 5px;
+		height: 40px;
+		border: none;
+	}
+	   input:focus {
+			outline: 0;
+			border-width: none;
+	   }
+	   input::-webkit-input-placeholder{
+		   color:#d6d6dd;
+	   }
+	   input::-moz-placeholder{   /* Mozilla Firefox 19+ */
+		   color:#d6d6dd;
+	   }
+	   input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+		   color:#d6d6dd;
+	   }
+	   input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
+		   color:#d6d6dd;
+	   }
 
-.margin-top5 {
-	margin-top: 5%;
-}
-.margin-top10 {
-	margin-top: 10%;
-}
-.font-normal{
-	font-weight: normal;
-}
-.login-input-class {
-	border-radius: 0!important;
-	color: #fff!important;
-	background: #2b3a4d!important;
-	border: 1px solid #414f5f!important;
-	text-indent: 30px!important;
-	font-size: 14px!important;
-}
-.input-icon-class {
-	color: #889aa4;
-	font-size: 20px;
-}
-.footer-font {
-	font-size: 18px;
-	position: fixed;
-	bottom: 10%;
-}
 </style>
 
 
 <body data-type="login">
 
-  <div class="am-g myapp-login">
-	<div class="myapp-login-logo-block  tpl-login-max">
-		<div class="myapp-login-logo-text margin-top10">
-			<div class="myapp-login-logo-text font-normal">
-				西咸新区- 绿建能耗监测平台
-			</div>
-		</div>
-		<div class="am-u-sm-10 login-am-center">
-			<form class="am-form">
-				<fieldset>
-					<div class="am-form-group am-form-icon margin-top10">
-						<i class="am-icon-user input-icon-class"></i>
-						<input type="text" class="login-input-class" id="doc-ipt-email-1" placeholder="Administrator">
-					</div>
-					<div class="am-form-group am-form-icon margin-top5">
-						<i class="am-icon-lock input-icon-class"></i>
-						<input type="password" class="login-input-class" id="doc-ipt-pwd-1" placeholder="设置个密码吧">
-					</div>
-					<p class="margin-top10"><button type="button" class="am-btn am-btn-default" style="background-color: #1188ff;" id="loginBtn">立即登录</button></p>
-				</fieldset>
-			</form>
-		</div>
-	</div>
-	<div class="myapp-login-logo-text font-normal footer-font">
-		版权所有 © 西咸新区管委会 陕ICP备18025716号-2
-	</div>
-</div>
+  <div class="bg-login-box">
+
+
+	  <div class="login-box">
+
+		  <div class="login-title-box"><span class="color-title-login">西咸新区</span>绿色建筑能耗监测平台</div>
+
+		  <form  id="loginform" autocomplete="off">
+			  <div class="margin-top-50 am-text-center">
+				  <input type="text" placeholder="Username" class="login-input-class-new"  name="account" autocomplete="off">
+			  </div>
+			  <div class="margin-top-10 am-text-center">
+				  <input type="password" placeholder="Password" class="login-input-class-new" name="password" autocomplete="off">
+			  </div>
+			  <div class="am-form-icon margin-top-10 display-flex-start justify-center verCode-box">
+				  <div class="cu_code_input" style="width:37%">
+					  <input type="text" class="login-input-verCode" name="vercode" autocomplete="off" placeholder="验证码">
+				  </div>
+				  <div class="cu_code_img display-flex-start">
+					  <img src="vercode.php" class="vercode-img cursor-hand margin-right-5" height="30" alt="刷新换一张" id="vercodeimg"/>
+					  <div class="cu_code_tip display-flex-start items-center cursor-hand" id="vercode_refresh" >
+						  刷新<i class="am-icon-refresh cursor-hand" style="margin-left: 5px;margin-top: 0;position: static;"></i>
+					  </div>
+				  </div>
+			  </div>
+			  <div class="margin-top-10 am-text-center">
+				  <button type="button" class="login-btn-class margin-top-20 font-size-15" id="btn_login">登录</button>
+			  </div>
+		  </form>
+
+		  <div class="am-text-center font-size-15 margin-top-50"><a href="https://beian.miit.gov.cn" class="color-blue" target='_blank'>陕ICP备2022003083号-1</a></div>
+	  </div>
+
+  </div>
 
 
   <script src="assets/js/jquery-2.1.1.js"></script>