diff --git a/webapp/manage.html b/webapp/manage.html
index 2901dcfdc7b66a4a7b928389f8deba0693d86bc5..403cde6008cd666cde22760526cf9abb9b85bdfc 100644
--- a/webapp/manage.html
+++ b/webapp/manage.html
@@ -1,31 +1,188 @@
 <!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>
+<html>
+<head>
+  <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 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>
+  <div class="rightcolumn">
+    <div class="card">
+      <h2>About</h2>
+      <div class="fakeimg" style="height:100px;">Image</div>
+      <p>可视化结果：</p>
+    </div>
+    <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到表单格式 -->
+    <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
