diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 984af6dc91df6d99ec0e2962b2182ed3dd26b777..7a7c40726a79712670ced63f5f41aaf2edb7e42b 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,7 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="2b2cbb05-f1b7-4878-a9c5-72d6d216251a" name="Default Changelist" comment="" />
+    <list default="true" id="2b2cbb05-f1b7-4878-a9c5-72d6d216251a" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/webapp/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/webapp/index.html" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
diff --git a/webapp/css/style.css b/webapp/css/style.css
index 5eb1b3a3687b7d3246577695cc78da0c0616cddb..958467f51de56b1b4386bf1ec6eb4c723a12e333 100644
--- a/webapp/css/style.css
+++ b/webapp/css/style.css
@@ -1,17 +1,83 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+body {
+    background-color: #f3f5f7;
+}
+
+a {
+	text-decoration: none;
+}
+
+
+#app {
+    width: 1200px;
+    margin: auto;
+}
+
 .header {
 	width: 100%;
 	height: 50px;
 	line-height: 50px;
-	border-bottom: gray;
+	background-color: white;
+	border-bottom: rgb(117, 74, 74);
 	border-style: solid;
-	border-width: 0 0 1px 0;
+	border-width: 0 0 3px 0;
 }
 
-.header h2 {
+.header logo h2 {
 	margin: 0;
 	margin-left: 10px;
 }
 
+.main {
+	width: 100%;
+	min-height: 500px;
+	margin-top: 2em;
+
+}
+
+.main .main-left {
+	float: left;
+	width: 65%;
+}
+
+
+.main .main-left .content{
+    float: none;
+    display: block;
+    background-color: white;
+    height: 500px;	
+}
+
+.main .main-left .content p {
+	text-align: center;
+	line-height: 500px;
+}
+
+
+
+.main .main-right {
+	float:right;
+	width: 30%;
+	background-color: rgb(225, 241, 247);
+}
+
+/* .main-left {
+	float: left;
+	width: calc(100% - 300px - 1px);
+    border-right-width: 1px;
+	border-right-style: solid;
+	border-right-color: gray;
+}
+.main-right {
+	float: right;
+	width: 300px;
+	height: 100%;
+} */
+
+
 .login-row {
 	margin: 10px auto;
 	text-align: center;
@@ -32,24 +98,12 @@
 	text-align: center;
 }
 
-#codebtn {
+/*#codebtn {
 	width: 100px;
 	height: 25px;
-}
+}*/
+
+
+
+
 
-.main {
-	width: 100%;
-	min-height: 500px;
-}
-.main-left {
-	float: left;
-	width: calc(100% - 300px - 1px);
-    border-right-width: 1px;
-	border-right-style: solid;
-	border-right-color: gray;
-}
-.main-right {
-	float: right;
-	width: 300px;
-	height: 100%;
-}
diff --git a/webapp/index.html b/webapp/index.html
index 53eab73b90cb5d9c08dc4f1ae65904947e3d73b6..34a4c0f40d3f3b8f54294f55e58ae066ae6691d8 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -12,14 +12,16 @@
 		<div id="app">
 			<!-- 页头 -->
 			<div class="header">
-				<h2>数据可视化项目</h2>
+				<div id="logo">
+					<h2>数据可视化项目</h2>
+				</div>
 			</div>
 			<!-- 内容主体 -->
 			<div class="main">
 				<div class="main-left">
-					<div
-						style="float: none; display: block; height: 500px"
-					></div>
+					<div class="content">
+						<p>这个区域是显示图形（折线图，饼图...)</p>
+					</div>
 				</div>
 				<div class="main-right" id="login">
 					<h2>登&nbsp;录</h2>
@@ -53,9 +55,9 @@
 						<button type="button" id="login-btn" @click="onLogin">
 							登录
 						</button>
-						<button type="button" id="login-btn" @click="onTest">
-							HelloWorld
-						</button>
+<!--						<button type="button" id="login-btn" @click="onTest">-->
+<!--							HelloWorld-->
+<!--						</button>-->
 					</div>
 					<div class="login-row" id="login-font">
 						<span>还没有账号？</span>