From 2311aedbeb7e50bf25133f1b97c73d641cd8754b Mon Sep 17 00:00:00 2001
From: victor <769540698@qq.com>
Date: Fri, 30 Apr 2021 21:36:07 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=A4=A7=E8=87=B4=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/menu.html | 162 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 webapp/menu.html
diff --git a/webapp/menu.html b/webapp/menu.html
new file mode 100644
index 0000000..8e69ec2
--- /dev/null
+++ b/webapp/menu.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="Keywords" content="">
+    <meta name="Description" content="">
+    <title>侧边下拉导航栏</title>
+</head>
+<style type="text/css">
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    html,body{
+        height: 100%;
+    }
+    .wrap{
+        width: 260px;
+        height: 100%;
+        background-color: #363a45;
+    }
+    .header{
+        width: 100%;
+        height: 65px;
+        background-color: #44495a;
+        font-size: 24px;
+        color: #fff;
+        text-align: center;
+        line-height: 65px;
+    }
+    .nav{
+        width:250px;
+        margin: 10px 5px 0;
+    }
+    .list{
+        margin-bottom: 5px;
+    }
+    .list h2{
+        position: relative;
+        padding: 15px 0;
+        background-color: #3889d4;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        transition: .5s;
+    }
+    .list h2.on{
+        background-color: #393c4a;
+    }
+    .list i{
+        position: absolute;
+        right: 10px;
+        top: 16px;
+        border: 8px solid transparent;
+        border-left-color: #fff;/*triangle*/
+        transform:rotate(0deg);
+        transform-origin: 1px 8px;
+        transition: .5s;
+    }
+    .list i.on{
+        transform:rotate(90deg);
+    }
+    .hide{
+        overflow: hidden;
+        height: 0;
+        transition: .5s;
+    }
+    .hide h5{
+        padding: 10px 0;
+        background-color: #282c3a;
+        text-align: center;
+        color:#fff;
+        border-bottom:#42495d;
+    }
+</style>
+<body>
+    <div class="wrap">
+        <div class="header">菜单</div>
+        <div class="nav">
+            <ul>
+                <li class="list">
+                    <h2><i></i>num</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num1</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num2</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num3</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <script>
+        (function () {
+            var oList = document.querySelectorAll('.list h2'),
+                oHide = document.querySelectorAll('.hide'),
+                oIcon = document.querySelectorAll('.list i'),
+                lastIndex = 0;
+            for(var i=0;i<oList.length;i++){
+                oList[i].index = i;//自定义属性
+                oList[i].isClick = false;
+                oList[i].initHeight = oHide[i].clientHeight;
+                oHide[i].style.height = '0';
+                oList[i].onclick = function () {
+                    if(this.isClick){
+                        oHide[this.index].style.height = '0';
+                        oIcon[this.index].className = '';
+                        oList[this.index].className = '';
+                        oList[this.index].isClick = false;
+                    }
+                    else{
+                        oHide[lastIndex].style.height = '0';
+                        oIcon[lastIndex].className = '';
+                        oList[lastIndex].className = '';
+                        oHide[this.index].style.height = '220px';
+                        oIcon[this.index].className = 'on';
+                        oList[this.index].className = 'on';
+                        oList[lastIndex].isClick = false;
+                        oList[this.index].isClick = true;
+                        lastIndex = this.index;
+                    }
+                }
+            }
+        })();
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


From 9e111af5108a6dcb686d817a1a553735110911e0 Mon Sep 17 00:00:00 2001
From: victor <769540698@qq.com>
Date: Fri, 30 Apr 2021 23:18:26 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/manage.html | 224 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 195 insertions(+), 29 deletions(-)

diff --git a/webapp/manage.html b/webapp/manage.html
index 2901dcf..1b25cf5 100644
--- a/webapp/manage.html
+++ b/webapp/manage.html
@@ -1,31 +1,197 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>数据可视化</title>
-		<link rel="stylesheet" href="css/components.css" />
-	</head>
-	<body>
-		<div id="app">
-			<!-- 页头 -->
-			<div class="header">
-				<div id="logo">
-					<h2>数据可视化项目</h2>
-					<div class="header-right">
-						<a href="#" @click="onLogout">注销</a>
-					</div>
-				</div>
-			</div>
-			<h1>数据可视化</h1>
-		</div>
-		<!-- Vue.js框架 -->
-		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-		<!-- Axios库，提供AjaxHttp请求 -->
-		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-		<!-- 用于转换Json到表单格式 -->
-		<script src="https://cdn.jsdelivr.net/npm/qs@6.9.4/dist/qs.min.js"></script>
-		<script src="js/manage.js"></script>
-	</body>
-</html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>数据可视化</title>
+    <link rel="stylesheet" href="css/components.css" />
+    <meta name="Keywords" content="">
+    <meta name="Description" content="">
+    <title>侧边下拉导航栏</title>
+</head>
+<style type="text/css">
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    html,body{
+        height: 100%;
+    }
+    .wrap{
+        width: 240px;
+        height: 100%;
+        background-color: #a0b1df;
+    }
+    .header{
+        width: 100%;
+        height: 65px;
+        background-color: #b3bbd4;
+        font-size: 24px;
+        color: rgb(10, 9, 9);
+        text-align: center;
+        line-height: 65px;
+
+    }
+    .header-right{
+            white-space: nowrap;
+            /* 自动向右对齐 */
+            margin-left: auto;
+			font-size: 16px;
+            float:none
+        }
+    .nav{
+        width:220px;
+        margin: 10px 5px 0;
+    }
+    .list{
+        margin-bottom: 5px;
+    }
+    .list h2{
+        position: relative;
+        padding: 20px 0;
+        background-color: #486886;
+        text-align: center;
+        font-size: 16px;
+        color: rgb(252, 248, 248);
+        transition: .5s;
+    }
+    .list h2.on{
+        background-color: #9099c4;
+    }
+    .list i{
+        position: absolute;
+        right: 10px;
+        top: 16px;
+        border: 8px solid transparent;
+        border-left-color: rgb(15, 13, 13);/*triangle*/
+        transform:rotate(0deg);
+        transform-origin: 1px 8px;
+        transition: .5s;
+    }
+    .list i.on{
+        transform:rotate(90deg);
+    }
+    .hide{
+        overflow: hidden;
+        height: 0;
+        transition: .5s;
+    }
+    .hide h5{
+        padding: 10px 0;
+        background-color: #39365e;
+        text-align: center;
+        color:#fff;
+        border-bottom:#6087e7;
+    }
+</style>
+<body>
+    <div id="app">
+        <!-- 页头 -->
+        <div class="header">
+            <div id="logo">
+                <h2>数据可视化项目</h2>
+                <div class="header-right">
+                    <a href="#" @click="onLogout">注销</a>
+                    <div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+    </div>
+    <div class="wrap">
+        <div class="header">数据可视化</div>
+        <div class="nav">
+            <ul>
+                <li class="list">
+                    <h2><i></i>num</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num1</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num2</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num3</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <script>
+        (function () {
+            var oList = document.querySelectorAll('.list h2'),
+                oHide = document.querySelectorAll('.hide'),
+                oIcon = document.querySelectorAll('.list i'),
+                lastIndex = 0;
+            for(var i=0;i<oList.length;i++){
+                oList[i].index = i;//自定义属性
+                oList[i].isClick = false;
+                oList[i].initHeight = oHide[i].clientHeight;
+                oHide[i].style.height = '0';
+                oList[i].onclick = function () {
+                    if(this.isClick){
+                        oHide[this.index].style.height = '0';
+                        oIcon[this.index].className = '';
+                        oList[this.index].className = '';
+                        oList[this.index].isClick = false;
+                    }
+                    else{
+                        oHide[lastIndex].style.height = '0';
+                        oIcon[lastIndex].className = '';
+                        oList[lastIndex].className = '';
+                        oHide[this.index].style.height = '220px';
+                        oIcon[this.index].className = 'on';
+                        oList[this.index].className = 'on';
+                        oList[lastIndex].isClick = false;
+                        oList[this.index].isClick = true;
+                        lastIndex = this.index;
+                    }
+                }
+            }
+        })();
+        
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <!-- Axios库，提供AjaxHttp请求 -->
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <!-- 用于转换Json到表单格式 -->
+    <script src="https://cdn.jsdelivr.net/npm/qs@6.9.4/dist/qs.min.js"></script>
+    <script src="js/manage.js"></script>
+
+    
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


From 27492163c18af2529435c79a5956272e753fd297 Mon Sep 17 00:00:00 2001
From: victor <769540698@qq.com>
Date: Sat, 8 May 2021 11:12:04 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/manage.html | 355 ++++++++++++++++++++++-----------------------
 webapp/menu.html   | 162 ---------------------
 2 files changed, 173 insertions(+), 344 deletions(-)
 delete mode 100644 webapp/menu.html

diff --git a/webapp/manage.html b/webapp/manage.html
index 1b25cf5..403cde6 100644
--- a/webapp/manage.html
+++ b/webapp/manage.html
@@ -1,191 +1,182 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>数据可视化</title>
-    <link rel="stylesheet" href="css/components.css" />
-    <meta name="Keywords" content="">
-    <meta name="Description" content="">
-    <title>侧边下拉导航栏</title>
-</head>
-<style type="text/css">
-    *{
-        padding: 0;
-        margin: 0;
-    }
-    html,body{
-        height: 100%;
-    }
-    .wrap{
-        width: 240px;
-        height: 100%;
-        background-color: #a0b1df;
-    }
-    .header{
-        width: 100%;
-        height: 65px;
-        background-color: #b3bbd4;
-        font-size: 24px;
-        color: rgb(10, 9, 9);
-        text-align: center;
-        line-height: 65px;
-
-    }
-    .header-right{
-            white-space: nowrap;
-            /* 自动向右对齐 */
-            margin-left: auto;
-			font-size: 16px;
-            float:none
-        }
-    .nav{
-        width:220px;
-        margin: 10px 5px 0;
-    }
-    .list{
-        margin-bottom: 5px;
-    }
-    .list h2{
-        position: relative;
-        padding: 20px 0;
-        background-color: #486886;
-        text-align: center;
-        font-size: 16px;
-        color: rgb(252, 248, 248);
-        transition: .5s;
-    }
-    .list h2.on{
-        background-color: #9099c4;
-    }
-    .list i{
-        position: absolute;
-        right: 10px;
-        top: 16px;
-        border: 8px solid transparent;
-        border-left-color: rgb(15, 13, 13);/*triangle*/
-        transform:rotate(0deg);
-        transform-origin: 1px 8px;
-        transition: .5s;
-    }
-    .list i.on{
-        transform:rotate(90deg);
-    }
-    .hide{
-        overflow: hidden;
-        height: 0;
-        transition: .5s;
-    }
-    .hide h5{
-        padding: 10px 0;
-        background-color: #39365e;
-        text-align: center;
-        color:#fff;
-        border-bottom:#6087e7;
-    }
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>数据可视化</title>
+  <link rel="stylesheet" href="css/components.css" />
+  <meta name="Keywords" content="">
+  <meta name="Description" content="">
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial;
+  padding: 10px;
+  background: #f1f1f1;
+}
+
+/* 页眉/Blog 标题 */
+.header {
+  padding: 30px;
+  text-align: center;
+  background: white;
+}
+.header-right{
+  white-space: nowrap;
+  /* 自动向右对齐 */
+  margin-left: auto;
+  font-size: 16px;
+  float:none
+}
+
+.header h1 {
+  font-size: 50px;
+}
+
+/* 设置上导航栏的样式 */
+.topnav {
+  overflow: hidden;
+  background-color: #333;
+}
+
+/* 设置 topnav 链接的样式 */
+.topnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+/* 改变鼠标悬停时的颜色 */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* 创建两个不相等的彼此并排的浮动列 */
+/* 左列 */
+.leftcolumn {   
+  float: left;
+  width: 75%;
+}
+
+/* 右列 */
+.rightcolumn {
+  float: left;
+  width: 25%;
+  background-color: #f1f1f1;
+  padding-left: 20px;
+}
+
+/* 伪图像 */
+.fakeimg {
+  background-color: #aaa;
+  width: 100%;
+  padding: 20px;
+}
+
+/* 为文章添加卡片效果 */
+.card {
+  background-color: white;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+/* 清除列之后的浮动 */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* 页脚 */
+.footer {
+  padding: 20px;
+  text-align: center;
+  background: #ddd;
+  margin-top: 20px;
+}
+
+/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
+@media screen and (max-width: 800px) {
+  .leftcolumn, .rightcolumn {   
+    width: 100%;
+    padding: 0;
+  }
+}
+
+/* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
+@media screen and (max-width: 400px) {
+  .topnav a {
+    float: none;
+    width: 100%;
+  }
+}
 </style>
+</head>
 <body>
-    <div id="app">
-        <!-- 页头 -->
-        <div class="header">
-            <div id="logo">
-                <h2>数据可视化项目</h2>
-                <div class="header-right">
-                    <a href="#" @click="onLogout">注销</a>
-                    <div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    
+
+<div class="header">
+  <h1>数据可视化项目</h1>
+  <p>数据可视化</p>
+  
+</div>
+
+<div class="topnav">
+  <a href="#">1</a>
+  <a href="#">2</a>
+  <a href="#">3</a>
+  <div>
+    <span style="float:left" id="ORGNAME"></span>
+    <a style="float:right" href="#" @click="onLogout">注销</a>
+</div>
+</div>
+
+<div class="row">
+  <div class="leftcolumn">
+    <div class="card">
+      <h2>数据1</h2>
+      <h5>Title description, 2021</h5>
+      <div class="fakeimg" style="height:200px;">Image</div>
+      <p>Some..</p>
+      <p>bala</p>
+    </div>
+    <div class="card">
+      <h2></h2>
+      <h5>Title description,2021</h5>
+      <div class="fakeimg" style="height:200px;">Image</div>
+      <p>Some..</p>
+      <p>balabala</p>
     </div>
-    <div class="wrap">
-        <div class="header">数据可视化</div>
-        <div class="nav">
-            <ul>
-                <li class="list">
-                    <h2><i></i>num</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-                <li class="list">
-                    <h2><i></i>num1</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-                <li class="list">
-                    <h2><i></i>num2</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-                <li class="list">
-                    <h2><i></i>num3</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-            </ul>
-        </div>
+  </div>
+  <div class="rightcolumn">
+    <div class="card">
+      <h2>About</h2>
+      <div class="fakeimg" style="height:100px;">Image</div>
+      <p>可视化结果：</p>
     </div>
-    <script>
-        (function () {
-            var oList = document.querySelectorAll('.list h2'),
-                oHide = document.querySelectorAll('.hide'),
-                oIcon = document.querySelectorAll('.list i'),
-                lastIndex = 0;
-            for(var i=0;i<oList.length;i++){
-                oList[i].index = i;//自定义属性
-                oList[i].isClick = false;
-                oList[i].initHeight = oHide[i].clientHeight;
-                oHide[i].style.height = '0';
-                oList[i].onclick = function () {
-                    if(this.isClick){
-                        oHide[this.index].style.height = '0';
-                        oIcon[this.index].className = '';
-                        oList[this.index].className = '';
-                        oList[this.index].isClick = false;
-                    }
-                    else{
-                        oHide[lastIndex].style.height = '0';
-                        oIcon[lastIndex].className = '';
-                        oList[lastIndex].className = '';
-                        oHide[this.index].style.height = '220px';
-                        oIcon[this.index].className = 'on';
-                        oList[this.index].className = 'on';
-                        oList[lastIndex].isClick = false;
-                        oList[this.index].isClick = true;
-                        lastIndex = this.index;
-                    }
-                }
-            }
-        })();
-        
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <div class="card">
+      <h3>pic</h3>
+      <div class="fakeimg"><p>Image</p></div>
+      <div class="fakeimg"><p>Image</p></div>
+      <div class="fakeimg"><p>Image</p></div>
+    </div>
+    <div class="card">
+      <h3>Follow</h3>
+      <p>Some..</p>
+    </div>
+  </div>
+</div>
+
+<div class="footer">
+  <h2>Footer</h2>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- Axios库，提供AjaxHttp请求 -->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <!-- 用于转换Json到表单格式 -->
diff --git a/webapp/menu.html b/webapp/menu.html
deleted file mode 100644
index 8e69ec2..0000000
--- a/webapp/menu.html
+++ /dev/null
@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="Keywords" content="">
-    <meta name="Description" content="">
-    <title>侧边下拉导航栏</title>
-</head>
-<style type="text/css">
-    *{
-        padding: 0;
-        margin: 0;
-    }
-    html,body{
-        height: 100%;
-    }
-    .wrap{
-        width: 260px;
-        height: 100%;
-        background-color: #363a45;
-    }
-    .header{
-        width: 100%;
-        height: 65px;
-        background-color: #44495a;
-        font-size: 24px;
-        color: #fff;
-        text-align: center;
-        line-height: 65px;
-    }
-    .nav{
-        width:250px;
-        margin: 10px 5px 0;
-    }
-    .list{
-        margin-bottom: 5px;
-    }
-    .list h2{
-        position: relative;
-        padding: 15px 0;
-        background-color: #3889d4;
-        text-align: center;
-        font-size: 16px;
-        color: #fff;
-        transition: .5s;
-    }
-    .list h2.on{
-        background-color: #393c4a;
-    }
-    .list i{
-        position: absolute;
-        right: 10px;
-        top: 16px;
-        border: 8px solid transparent;
-        border-left-color: #fff;/*triangle*/
-        transform:rotate(0deg);
-        transform-origin: 1px 8px;
-        transition: .5s;
-    }
-    .list i.on{
-        transform:rotate(90deg);
-    }
-    .hide{
-        overflow: hidden;
-        height: 0;
-        transition: .5s;
-    }
-    .hide h5{
-        padding: 10px 0;
-        background-color: #282c3a;
-        text-align: center;
-        color:#fff;
-        border-bottom:#42495d;
-    }
-</style>
-<body>
-    <div class="wrap">
-        <div class="header">菜单</div>
-        <div class="nav">
-            <ul>
-                <li class="list">
-                    <h2><i></i>num</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-                <li class="list">
-                    <h2><i></i>num1</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-                <li class="list">
-                    <h2><i></i>num2</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-                <li class="list">
-                    <h2><i></i>num3</h2>
-                    <div class="hide">
-                        <h5>1</h5>
-                        <h5>2</h5>
-                        <h5>3</h5>
-                        <h5>4</h5>
-                        <h5>5</h5>
-                        <h5>6</h5>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <script>
-        (function () {
-            var oList = document.querySelectorAll('.list h2'),
-                oHide = document.querySelectorAll('.hide'),
-                oIcon = document.querySelectorAll('.list i'),
-                lastIndex = 0;
-            for(var i=0;i<oList.length;i++){
-                oList[i].index = i;//自定义属性
-                oList[i].isClick = false;
-                oList[i].initHeight = oHide[i].clientHeight;
-                oHide[i].style.height = '0';
-                oList[i].onclick = function () {
-                    if(this.isClick){
-                        oHide[this.index].style.height = '0';
-                        oIcon[this.index].className = '';
-                        oList[this.index].className = '';
-                        oList[this.index].isClick = false;
-                    }
-                    else{
-                        oHide[lastIndex].style.height = '0';
-                        oIcon[lastIndex].className = '';
-                        oList[lastIndex].className = '';
-                        oHide[this.index].style.height = '220px';
-                        oIcon[this.index].className = 'on';
-                        oList[this.index].className = 'on';
-                        oList[lastIndex].isClick = false;
-                        oList[this.index].isClick = true;
-                        lastIndex = this.index;
-                    }
-                }
-            }
-        })();
-    </script>
-</body>
-</html>
\ No newline at end of file
-- 
Gitee

