صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
Allen
/
CloudSQLAdminPanel
دنبال کردن 1
ستاره دار 0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

完成首页抽屉样式

Zy-Winter 8 سال پیش
والد
59578828c7
کامیت
6036b7a17b
5فایلهای تغییر یافته به همراه295 افزوده شده و 0 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 195 0
      public/scr/index/css/Default.css
  2. BIN
      public/scr/index/css/MaterialIcons-Regular.woff2
  3. 80 0
      public/scr/index/index.html
  4. 18 0
      public/scr/index/js/Default.js
  5. 2 0
      public/scr/index/js/jquery-3.3.1.min.js

+ 195 - 0
public/scr/index/css/Default.css
مشاهده فایل 

@@ -0,0 +1,195 @@
 
+a{
 
+	text-decoration: none;/*去除a标签下划线*/
 
+}
 
+
 
+/*顶部导航栏样式*/
 
+.container{
 
+    position: fixed;
 
+    top: 0;
 
+    right: 0;
 
+    left: 0;
 
+}
 
+.header{
 
+	display: flex;
 
+	height: 64px;
 
+	background-color: #2196f3;
 
+	box-shadow: 0 4 5 #c4c0bd;
 
+	box-shadow: 0px 4px 5px #c4c0bd;/*边框阴影*/
 
+	align-items: baseline;
 
+}
 
+.header i{
 
+    width: 24px;
 
+    height: 24px;
 
+    font-size: 24px;
 
+    color: #fff;
 
+}
 
+.header_column{
 
+    display: flex;
 
+    flex: 1;
 
+    width: 275px;
 
+    height: 22px;
 
+    margin: auto 0;
 
+}
 
+.header_column i{
 
+	margin-left: 40px;
 
+	cursor: pointer;
 
+}
 
+.img_left{
 
+	flex-direction: row;
 
+	width: 25px;
 
+	height: 25px;
 
+}
 
+.header_column a{
 
+	font-size: 24px;
 
+	font-family: Roboto,Noto,Helvetica,Arial,sans-serif;/*字体样式*/
 
+	color: #fff;
 
+	margin-left: 34px;
 
+}
 
+.header_icon{
 
+	display: flex;
 
+    flex: 1;
 
+    justify-content: flex-end;
 
+    margin: auto;
 
+    margin-right: 25px;
 
+}
 
+
 
+/*左侧导航栏样式*/
 
+.body{
 
+	display: flex;
 
+}
 
+#sidebar{
 
+	width: 225px;
 
+    height: 500px;
 
+    flex: 1;
 
+    flex-direction: column;
 
+    position: relative;
 
+	top: 0px;
 
+    left: -225px;
 
+}
 
+.row{
 
+    height: 49px;
 
+    display: flex;
 
+    width: 225px;
 
+    margin: 0 auto;
 
+    justify-content: flex-start;
 
+    align-items: center;
 
+}
 
+.row i{
 
+	width: 24px;
 
+	height: 24px;
 
+	font-size: 24px;
 
+	color: #757474;
 
+	margin-left: 18px;
 
+}
 
+.row p{
 
+    color: #333;
 
+    margin-left: 35px;
 
+}
 
+
 
+/*页面导航样式*/
 
+.main{
 
+	width: 100%;
 
+    height: auto!important;
 
+    color: black;
 
+    display: flex;
 
+    flex: 5;
 
+}
 
+.main_row{
 
+	width: 1125px;
 
+	height: 140px;
 
+	padding: 10px;
 
+	position: relative;
 
+	top: 47px;
 
+}
 
+.icon{
 
+	float: left;
 
+}
 
+.col_user{
 
+    float: left;
 
+    width: 330px;
 
+    height: 74px;
 
+    padding: 10px;
 
+}
 
+.col_database{
 
+	float: left;
 
+	width: 330px;
 
+	height: 74px;
 
+	padding: 10px;
 
+}
 
+.col_service{
 
+	float: left;
 
+	width: 330px;
 
+	height: 74px;
 
+	padding: 10px;
 
+}
 
+.main_row i{
 
+	width: 74px;
 
+	height: 74px;
 
+	font-size: 74px;
 
+	color: #757474;
 
+}
 
+
 
+/*文本和数字样式*/
 
+.col_text{
 
+	float: left;
 
+}
 
+.user_text{
 
+	padding: 10px 5px;
 
+	font-size: 18px;
 
+	color: #333;
 
+}
 
+.database_text{
 
+	padding: 10px 5px;
 
+	font-size: 18px;
 
+	color: #333;
 
+}
 
+.service_text{
 
+	padding: 10px 5px;
 
+	font-size: 18px;
 
+	color: #333;
 
+}
 
+.user_number{
 
+	padding: 0px 5px;
 
+	font-size: 24px;
 
+	color: #333;
 
+	line-height: 0.7;
 
+}
 
+.database_number{
 
+	padding: 0px 5px;
 
+	font-size: 24px;
 
+	color: #333;
 
+	line-height: 0.7;
 
+}
 
+.service_number{
 
+	padding: 0px 5px;
 
+	font-size: 24px;
 
+	color: #333;
 
+    line-height: 0.7;
 
+}
 
+
 
+
 
+/*font-icon替换矢量图*/
 
+@font-face {
 
+        font-family: 'Material Icons';
 
+        font-style: normal;
 
+        font-weight: 400;
 
+        src: local('Material Icons'),
 
+        local('MaterialIcons-Regular'),
 
+        url(MaterialIcons-Regular.woff2) format('woff2'),
 
+        url(MaterialIcons-Regular.woff) format('woff');
 
+    }
 
+
 
+    .material-icons {
 
+    	font-style: normal;
 
+        font-family: 'Material Icons';
 
+        /* Support for all WebKit browsers. */
 
+        -webkit-font-smoothing: antialiased;
 
+        /* Support for Safari and Chrome. */
 
+        text-rendering: optimizeLegibility;
 
+        /* Support for Firefox. */
 
+        -moz-osx-font-smoothing: grayscale;
 
+        /* Support for IE. */
 
+        -webkit-font-feature-settings: 'liga';
 
+        -moz-font-feature-settings: 'liga';
 
+        font-feature-settings: 'liga';
 
+    }

BIN
public/scr/index/css/MaterialIcons-Regular.woff2
مشاهده فایل


+ 80 - 0
public/scr/index/index.html
مشاهده فایل 

@@ -0,0 +1,80 @@
 
+<!DOCTYPE html>
 
+<html lang = "en">
 
+<head>
 
+	<meta charset = "UTF-8">
 
+	<title>CloudSql_首页</title>
 
+</head>
 
+<link rel = "stylesheet" type = "text/css" href = "css/Default.css">
 
+<body>
 
+	<div class = "container">
 
+		<!-- 顶部导航栏 -->
 
+		<div class = "header">
 
+			<div class = "header_column">
 
+				<i class = "mdui-icon material-icons" id="icon">menu</i>
 
+				<a href = "">CloudSQL Admin Panel</a>
 
+			</div>
 
+			<div class = 'header_icon'>
 
+				<a href = ""><i class = "mdui-icon material-icons">exit_to_app</i></a>
 
+		    </div>
 
+		</div>
 
+
 
+		<!-- body -->
 
+		<div class = 'body'>
 
+			<!-- 左侧导航栏 -->
 
+			<div id="sidebar">
 
+				<div class = 'row'>
 
+					<i class = "mdui-list-item-icon mdui-icon material-icons">view_list</i>
 
+					<p class = 'p_database'>数据库列表</p>
 
+				</div>
 
+				<div class = 'row'>
 
+					<i class = "mdui-list-item-icon mdui-icon material-icons">person</i>
 
+					<p class = 'p_user'>用户列表</p>
 
+				</div>
 
+				<div class = 'row'>
 
+					<i class = "mdui-list-item-icon mdui-icon material-icons">info</i>
 
+					<p class = 'p_about'>关于</p>
 
+				</div>
 
+			</div>
 
+
 
+			<!-- 页面导航 -->
 
+			<div class = "main">
 
+				<div class = "main_row">
 
+					<!-- 用户列表导航 -->
 
+					<div class = "col_user">
 
+						<div class = "icon">
 
+							<i class = "mdui-list-item-icon mdui-icon material-icons">person</i>
 
+						</div>
 
+						<div class = "col_text">
 
+							<div class = "user_text">用户数量</div>
 
+							<div class = "user_number">244</div>
 
+						</div>
 
+					</div>
 
+					<!-- 数据库列表导航 -->
 
+					<div class = "col_database">
 
+						<div class = "icon">
 
+							<i class = "mdui-list-item-icon mdui-icon material-icons">view_list</i>
 
+						</div>
 
+						<div class = "col_text">
 
+							<div class = "database_text">数据库数量</div>
 
+							<div class = "database_number">1360</div>
 
+						</div>
 
+					</div>
 
+					<!-- 服务状态导航 -->
 
+					<div class = "col_service">
 
+						<div class = "icon">
 
+							<i class = "mdui-list-item-icon mdui-icon material-icons">cloud</i>
 
+						</div>
 
+						<div class = "col_text">
 
+							<div class = "service_text">服务状态</div>
 
+							<div class = "service_number">正常</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
+
 
+	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 
+	<script src="js/Default.js" type="text/javascript"></script>
 
+</body>
 
+</html>

+ 18 - 0
public/scr/index/js/Default.js
مشاهده فایل 

@@ -0,0 +1,18 @@
 
+
 
+// 左导航栏点击事件
 
+$(function(){
 
+    var count = 0;
 
+    $("#icon").click(function() {
 
+        if(count == 0){
 
+            count++;
 
+            $('#sidebar').animate({
 
+                left : 0,
 
+            },800)
 
+        }else if (count == 1) {
 
+            count = 0;
 
+            $('#sidebar').animate({
 
+                left : '-225px',
 
+            },800)
 
+        }
 
+    });
 
+})

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 2 - 0
public/scr/index/js/jquery-3.3.1.min.js