diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e8b320..76f3e4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,91 @@
 # Changelog
 
+## [1.2.8](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.7...v1.2.8) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([bd5117f](https://github.com/School-of-Website-Engineering/TinyWaste/commit/bd5117ff2c6f471322e4e4e3e5df127af4c3292a))
+
+## [1.2.7](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.6...v1.2.7) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([f18f3a0](https://github.com/School-of-Website-Engineering/TinyWaste/commit/f18f3a0b9f4cd2ffd50f41207ae1075d9a4b0284))
+
+## [1.2.6](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.5...v1.2.6) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([126032f](https://github.com/School-of-Website-Engineering/TinyWaste/commit/126032f97173535c8473c341940e8dfe1ac058fe))
+* **contributor:** contrib-readme-action has updated readme ([899076f](https://github.com/School-of-Website-Engineering/TinyWaste/commit/899076f28fe1fd5d3f4b6b6c3f82851eb04227a2))
+* **contributor:** contrib-readme-action has updated readme ([f8aaab3](https://github.com/School-of-Website-Engineering/TinyWaste/commit/f8aaab3e809481244f4310386936fbdc272e8346))
+
+## [1.2.6](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.5...v1.2.6) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([899076f](https://github.com/School-of-Website-Engineering/TinyWaste/commit/899076f28fe1fd5d3f4b6b6c3f82851eb04227a2))
+* **contributor:** contrib-readme-action has updated readme ([f8aaab3](https://github.com/School-of-Website-Engineering/TinyWaste/commit/f8aaab3e809481244f4310386936fbdc272e8346))
+
+## [1.2.5](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.4...v1.2.5) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([5bc5576](https://github.com/School-of-Website-Engineering/TinyWaste/commit/5bc557646900e184cb86ccc0a0ef034e910a7e3c))
+* **contributor:** contrib-readme-action has updated readme ([5ee728a](https://github.com/School-of-Website-Engineering/TinyWaste/commit/5ee728a9ee1bae2c079ed36735ec14bce6af3880))
+* **contributor:** contrib-readme-action has updated readme ([628fa6f](https://github.com/School-of-Website-Engineering/TinyWaste/commit/628fa6f8092102a8cd64fc0f9f461638a9a250df))
+
+## [1.2.5](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.4...v1.2.5) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([5ee728a](https://github.com/School-of-Website-Engineering/TinyWaste/commit/5ee728a9ee1bae2c079ed36735ec14bce6af3880))
+* **contributor:** contrib-readme-action has updated readme ([628fa6f](https://github.com/School-of-Website-Engineering/TinyWaste/commit/628fa6f8092102a8cd64fc0f9f461638a9a250df))
+
+## [1.2.4](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.3...v1.2.4) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([9fe1841](https://github.com/School-of-Website-Engineering/TinyWaste/commit/9fe184135902afc99bcfc53e9617fc491eff9b48))
+* **contributor:** contrib-readme-action has updated readme ([16bd632](https://github.com/School-of-Website-Engineering/TinyWaste/commit/16bd6329c48812f71db524a03018d0fc7e5def99))
+
+## [1.2.3](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.2...v1.2.3) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([fc89a09](https://github.com/School-of-Website-Engineering/TinyWaste/commit/fc89a0903592dcbfc5fa467c34f76a090f029ec8))
+* **contributor:** contrib-readme-action has updated readme ([462f8bc](https://github.com/School-of-Website-Engineering/TinyWaste/commit/462f8bc266ba9ce625c7f4eacc02611bd1249083))
+* **contributor:** contrib-readme-action has updated readme ([5bd65c0](https://github.com/School-of-Website-Engineering/TinyWaste/commit/5bd65c01b33a71ac2f8b02b2ded63a0831687d84))
+
+## [1.2.2](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.1...v1.2.2) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([57d1515](https://github.com/School-of-Website-Engineering/TinyWaste/commit/57d1515cc74c3c7ace7733519d3d80ab425eca77))
+
+## [1.2.2](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.1...v1.2.2) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([57d1515](https://github.com/School-of-Website-Engineering/TinyWaste/commit/57d1515cc74c3c7ace7733519d3d80ab425eca77))
+
+## [1.2.1](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.2.0...v1.2.1) (2023-02-03)
+
+
+### Docs
+
+* **contributor:** contrib-readme-action has updated readme ([b7a3572](https://github.com/School-of-Website-Engineering/TinyWaste/commit/b7a357243b2b39511316fa86c1ec3a4b3e3729c5))
+
 ## [1.2.0](https://github.com/School-of-Website-Engineering/TinyWaste/compare/v1.1.2...v1.2.0) (2023-02-02)
 
 
diff --git a/README.md b/README.md
index ac3446a..2c44206 100644
--- a/README.md
+++ b/README.md
@@ -107,6 +107,13 @@ Progressive-Tune 遵循 [Contributor Covenant](http://contributor-covenant.org/v
             <sub><b>Mason</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/liusxs">
+            <img src="https://avatars.githubusercontent.com/u/101164913?v=4" width="100;" alt="liusxs"/>
+            <br />
+            <sub><b>Liuliu66</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/LingASDJ">
             <img src="https://avatars.githubusercontent.com/u/70191651?v=4" width="100;" alt="LingASDJ"/>
@@ -120,13 +127,6 @@ Progressive-Tune 遵循 [Contributor Covenant](http://contributor-covenant.org/v
             <br />
             <sub><b>Imgbot</b></sub>
         </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/liusxs">
-            <img src="https://avatars.githubusercontent.com/u/101164913?v=4" width="100;" alt="liusxs"/>
-            <br />
-            <sub><b>Liuliu66</b></sub>
-        </a>
     </td></tr>
 </table>
 <!-- readme: collaborators,contributors -end -->
diff --git a/package-lock.json b/package-lock.json
index 23f268d..88c8540 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "tinywaste",
-  "version": "1.2.0",
+  "version": "1.2.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "tinywaste",
-      "version": "1.2.0",
+      "version": "1.2.8",
       "dependencies": {
         "amfe-flexible": "^2.2.1",
         "axios": "^1.2.6",
diff --git a/package.json b/package.json
index 1ffb4d7..122f4aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tinywaste",
-  "version": "1.2.0",
+  "version": "1.2.8",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",
diff --git a/src/assets/scss/_media.scss b/src/assets/scss/_media.scss
index f55fb27..7d16585 100644
--- a/src/assets/scss/_media.scss
+++ b/src/assets/scss/_media.scss
@@ -1,8 +1,14 @@
-$bottomMenu-height: 30vh;
-$event-height: 34vh;
-$globalStatusBar-height: 12vh;
-$shortcutBar-height: 12vh;
-$textOutput-height: 12vh;
+$bottomMenu-height: 26vh;
+$Menu-height: 22vh;
+$eventMenu-height: 32vh;
+$event-height: 28vh;
+$globalStatusBar-height: 4vh;
+$shortcutBar-height: 8vh;
+$textOutput-height: 8vh;
+
+$body-width: 90%;
+$border-radius: 5px;
+$border: .5px;
 
 @media screen and (min-width: 480px) { // 移动设备
 }
diff --git a/src/views/index/bottomMenu/index.vue b/src/views/index/bottomMenu/index.vue
index fa82b11..52ba1bf 100644
--- a/src/views/index/bottomMenu/index.vue
+++ b/src/views/index/bottomMenu/index.vue
@@ -1,9 +1,21 @@
 <template>
 	<div>
 		<van-row type="flex" justify="space-around" class="bottomMenu">
-			<van-col span="12" class="textOutput">文本输出</van-col>
-			<van-col span="12" class="more">更多</van-col>
+			<van-col span="12" class="textOutput">
+				<div class="menu-head">文本输出</div>
+			</van-col>
+			<van-col span="12" class="more">
+				<div class="menu-head">更多</div>
+			</van-col>
 		</van-row>
+		<van-row type="flex" justify="space-around" class="bottomLine">
+			<div class="time-list">
+				11：45
+			</div>
+			<div class="pause">
+				暂停游戏
+			</div>
+	</van-row>
 	</div>
 
 </template>
@@ -14,20 +26,78 @@ export default {name: "bottomMenu"}
 
 <style lang="scss" scoped>
 @import "@/assets/scss/_media.scss";
-.textOutput {
-	background: #2b579a;
-	height: $bottomMenu-height;
-	text-align: center;
-}
+@import "@/assets/scss/_color.scss";
 
-.more {
-	background: #05a6f0;
-	height: $bottomMenu-height;
-	text-align: center;
+.bottomLine {
+	border: $border solid $tip-color;
+	border-radius: $border-radius;
+	width: $body-width;
+	height: 10vh;
+	margin: 0 auto;
+	top: 5px;
+	display: flex;
+	justify-content: space-around;
+	margin-top: 1px;
+	.time-list{
+		width: 0.5rem;
+		height: 5px;
+		font-size: .1rem;
+		margin: auto;
+		text-align: center;
+		border: $border solid $tip-color;
+		border-radius: 5px;
+		padding:0.1rem;
+		background-color: #fff;
+	}
+	.pause{
+		width: 0.5rem;
+		height: 5px;
+		font-size: .1rem;
+		margin: auto;
+		text-align: center;
+		border: $border solid $tip-color;
+		border-radius: 5px;
+		padding:0.1rem;
+		background-color: #fff;
+	}
 }
+
 .bottomMenu {
-	position: relative;
-	bottom: 0;
-	width: 100%;
+	border: $border solid $tip-color;
+	border-radius: $border-radius;
+	width: $body-width;
+	height: $bottomMenu-height;
+	margin: 0 auto;
+	display: flex;
+	justify-content: space-around;
+	margin-top: .125rem;
+	.textOutput {
+	    height: $Menu-height;
+		border: $border solid $tip-color;
+		border-radius: $border-radius;
+		position: relative;
+		width: 40%;
+		margin-top: .15rem;
+        }
+
+    .more {
+    	height: $Menu-height;
+		border: $border solid $tip-color;
+		border-radius: 5px;
+		position: relative;
+		width: 50%;
+		margin-top: .15rem;
+        }
+		.menu-head{
+			width: 1.5rem;
+		    font-size: .1rem;
+		    text-align: center;
+		    border: $border solid $tip-color;
+	        border-radius: 5px;
+		    position: absolute;
+		    top: -3px;
+		    left: 6px;
+			background-color: #fff;
+		}
 }
 </style>
diff --git a/src/views/index/event/index.vue b/src/views/index/event/index.vue
index 16a76b2..8ee6a97 100644
--- a/src/views/index/event/index.vue
+++ b/src/views/index/event/index.vue
@@ -1,26 +1,109 @@
 <template>
 	<div>
 		<van-row type="flex" class="eventMenu">
-			<van-col span="8" class="text">快捷栏</van-col>
-			<van-col span="16" class="event">文字栏</van-col>
+			<van-col span="8" class="text">
+				<div class="events-head">地图</div>
+			</van-col>
+			<van-col span="16" class="event">
+				<div class="events-head">文字栏(事件区)
+				</div>
+			<div class="mainflex">
+				<!-- 主菜单界面 -->
+				<div class="menu-main">
+					<!-- TODO 事件区 -->
+					<div class="menu-list">
+						制作物品
+					</div>
+					<div class="menu-list">
+						天赋加点
+					</div>
+					<div class="menu-list">
+						睡觉休息
+					</div>
+				</div>
+				
+			</div>
+			</van-col>
 		</van-row>
 	</div>
 </template>
 
+
 <script>
 export default {name: "event"}
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/scss/_media.scss";
-.event{
-	background: cadetblue;
-	height: $event-height;
+@import "@/assets/scss/_color.scss";
+//菜单模板
+.menu-list{
+	width: 0.5rem;
+	height: 5px;
+	font-size: .1rem;
+	margin: auto;
+	top: 1px;
+	margin-left: 128px;
+	margin-top: 1px;
 	text-align: center;
+	border: $border solid $tip-color;
+	border-radius: 5px;
+	padding:0.1rem;
+	background-color: #fff;
 }
-.text{
-	background: rgb(160, 95, 95);
-	height: $event-height;
-	text-align: center;
+
+.mainflex{
+	display: flex;
+}
+
+.menu-main{
+	border: $border solid $tip-color;
+	border-radius: $border-radius;
+	width: 100vh;
+	height: 23vh;
+	margin: 0 auto;
+	top: -3px;
+	left: 6px;
+	margin-top: .125rem;
+	margin-left: .125rem;
+	margin-right: .125rem;
+}
+
+.eventMenu{
+	border: $border solid $tip-color;
+	border-radius: $border-radius;
+	width: $body-width;
+	height: $eventMenu-height;
+	margin: 0 auto;
+	display: flex;
+	justify-content: space-around;
+	margin-top: .125rem;
+	.text{
+	    height: $event-height;
+		border: $border solid $tip-color;
+		border-radius: $border-radius;
+		position: relative;
+		width: 40%;
+		margin-top: .15rem;
+    }
+	.event{
+	    height: $event-height;
+		border: $border solid $tip-color;
+		border-radius: $border-radius;
+		position: relative;
+		width: 50%;
+		margin-top: .15rem;
+    }
+	.events-head{
+		    width: 1.5rem;
+		    font-size: .1rem;
+		    text-align: center;
+		    border: $border solid $tip-color;
+	        border-radius: 5px;
+		    position: absolute;
+		    top: -3px;
+		    left: 6px;
+			background-color: #fff;
+		}
 }
 </style>
diff --git a/src/views/index/globalStatusBar/index.vue b/src/views/index/globalStatusBar/index.vue
index ba70dde..215cd87 100644
--- a/src/views/index/globalStatusBar/index.vue
+++ b/src/views/index/globalStatusBar/index.vue
@@ -1,7 +1,13 @@
 <template>
 	<div>
 		<van-row type="flex" justify="space-around">
-			<van-col span="24" class="globalStatus">全局状态栏</van-col>
+			<van-col span="24" class="globalStatus">
+				<div class="property">
+					<!-- 动态定义这里的数据，而不是硬编码 -->
+					<div class="attribute-name">天气：<span>暴风雨</span></div>
+					<div class="attribute-name">生命：<span>100</span></div>
+				</div>
+			</van-col>
 		</van-row>
 	</div>
 </template>
@@ -12,9 +18,25 @@ export default {name: "globalStatusBar"}
 
 <style lang="scss" scoped>
 @import "@/assets/scss/_media.scss";
+@import "@/assets/scss/_color.scss";
 .globalStatus {
-	background: cadetblue;
 	height: $globalStatusBar-height;
-	text-align: center;
+	width: $body-width;
+	margin: 5px;
+	border-bottom: $border solid $tip-color;
+	.property{
+		.attribute-name{
+		    border: $border solid $tip-color;
+			border-radius: 2px;
+			text-align: center;
+			padding: .015rem 0;
+			margin: 0 .1rem;
+			font-size: .1rem;
+			float: left;
+			&:nth-child(6){
+				float: right;
+			}
+		}
+	}
 }
 </style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 3ae42e4..49fd766 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -33,5 +33,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+@import "@/assets/scss/_color.scss";
+    body{
+		background: $white;
+	}
 </style>
diff --git a/src/views/index/shortcutBar/index.vue b/src/views/index/shortcutBar/index.vue
index 63f5a1e..57c2434 100644
--- a/src/views/index/shortcutBar/index.vue
+++ b/src/views/index/shortcutBar/index.vue
@@ -1,7 +1,11 @@
 <template>
 	<div>
 		<van-row type="flex" justify="space-around">
-			<van-col span="24" class="quick">快捷栏</van-col>
+			<van-col span="24" class="quick">
+				<div class="quick_goods">
+					快捷栏
+				</div>
+			</van-col>
 		</van-row>
 	</div>
 </template>
@@ -12,9 +16,23 @@ export default {name: "shortcutBar"}
 
 <style lang="scss" scoped>
 @import "@/assets/scss/_media.scss";
+@import "@/assets/scss/_color.scss";
 .quick{
-	background: rgb(15, 90, 91);
 	height: $shortcutBar-height;
-	text-align: center;
+	border: $border solid $tip-color;
+	border-radius: $border-radius;
+	width: $body-width;
+	position: relative;
+	.quick_goods{
+		width: 1.5rem;
+		font-size: .1rem;
+		text-align: center;
+		border: $border solid $tip-color;
+	    border-radius: $border-radius;
+		position: absolute;
+		top: -3px;
+		left: 6px;
+		background-color: #fff;
+	}
 }
 </style>
diff --git a/src/views/index/textOutput/index.vue b/src/views/index/textOutput/index.vue
index 0aaff52..b9835dd 100644
--- a/src/views/index/textOutput/index.vue
+++ b/src/views/index/textOutput/index.vue
@@ -1,7 +1,11 @@
 <template>
 	<div>
 		<van-row type="flex" justify="space-around">
-			<van-col span="24" class="textOutput">文本输出</van-col>
+			<van-col span="24" class="textOutput">
+				<div class="textOut">
+					文本输出
+				</div>
+			</van-col>
 		</van-row>
 	</div>
 </template>
@@ -12,9 +16,24 @@ export default {name: "textOutput"}
 
 <style lang="scss" scoped>
 @import "@/assets/scss/_media.scss";
+@import "@/assets/scss/_color.scss";
 .textOutput{
-	background: rgb(82, 125, 126);
 	height: $textOutput-height;
-	text-align: center;
+	width: $body-width;
+	border: $border solid $tip-color;
+	border-radius: $border-radius;
+	position: relative;
+	margin-top: .125rem;
+	.textOut{
+		width: 1.5rem;
+		font-size: .1rem;
+		text-align: center;
+		border: $border solid $tip-color;
+	    border-radius: $border-radius;
+		position: absolute;
+		top: -3px;
+		left: 6px;
+		background-color: #fff;
+	}
 }
 </style>