diff --git a/UI2.0/src/assets/offline-tuning/delete-default.png b/UI2.0/src/assets/offline-tuning/delete-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..f693e2900142cc32dbc46a106e679c7f68a60719
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/delete-default.png differ
diff --git a/UI2.0/src/assets/offline-tuning/delete-highlight.png b/UI2.0/src/assets/offline-tuning/delete-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..5426904472e8900c5d1b06981958125ef6c6ccff
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/delete-highlight.png differ
diff --git a/UI2.0/src/assets/offline-tuning/fail.png b/UI2.0/src/assets/offline-tuning/fail.png
new file mode 100644
index 0000000000000000000000000000000000000000..698496c2d67d1dc9ed32dd096c689bd5d4f852c9
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/fail.png differ
diff --git a/UI2.0/src/assets/offline-tuning/finish.png b/UI2.0/src/assets/offline-tuning/finish.png
new file mode 100644
index 0000000000000000000000000000000000000000..68f55b9e55aca31dfeec9fe88f9d261399ff7149
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/finish.png differ
diff --git a/UI2.0/src/assets/offline-tuning/in-progress.png b/UI2.0/src/assets/offline-tuning/in-progress.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a453302bb4670539ccbb92aa045fa3b75dab39c
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/in-progress.png differ
diff --git a/UI2.0/src/assets/offline-tuning/sort-default.png b/UI2.0/src/assets/offline-tuning/sort-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a5e63ceeedf544e2255243cdac0c69a62044c51
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/sort-default.png differ
diff --git a/UI2.0/src/assets/offline-tuning/sort-highlight.png b/UI2.0/src/assets/offline-tuning/sort-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..a85ceaef1931d304bd4b7b7dd138ab6c9a5f1dad
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/sort-highlight.png differ
diff --git a/UI2.0/src/assets/offline-tuning/spread-default.png b/UI2.0/src/assets/offline-tuning/spread-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b59af44f56416863d4ed371d9035ff404105dbd
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/spread-default.png differ
diff --git a/UI2.0/src/assets/offline-tuning/spread-highlight.png b/UI2.0/src/assets/offline-tuning/spread-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9a9993f760d98fbc548f914518d396f63ccd6aa
Binary files /dev/null and b/UI2.0/src/assets/offline-tuning/spread-highlight.png differ
diff --git a/UI2.0/src/assets/personal-background.png b/UI2.0/src/assets/personal-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..c323258ae7759409f6ee62511a179b481920d5e9
Binary files /dev/null and b/UI2.0/src/assets/personal-background.png differ
diff --git a/UI2.0/src/assets/personal/close-default.png b/UI2.0/src/assets/personal/close-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..661020565789f4622408485f38dc8d02da366701
Binary files /dev/null and b/UI2.0/src/assets/personal/close-default.png differ
diff --git a/UI2.0/src/assets/personal/close-highlight.png b/UI2.0/src/assets/personal/close-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..6985c68f7a38bb4a6635f19da5aeed7fe5798c9b
Binary files /dev/null and b/UI2.0/src/assets/personal/close-highlight.png differ
diff --git a/UI2.0/src/assets/personal/head.jpg b/UI2.0/src/assets/personal/head.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a2ba6680ce0b2fe282028787e7e42b8a8a2bf2e3
Binary files /dev/null and b/UI2.0/src/assets/personal/head.jpg differ
diff --git a/UI2.0/src/assets/realtime-information/no-information.png b/UI2.0/src/assets/realtime-information/no-information.png
new file mode 100644
index 0000000000000000000000000000000000000000..62dfee913d5a27a81d41031090560d8d41d75e1e
Binary files /dev/null and b/UI2.0/src/assets/realtime-information/no-information.png differ
diff --git a/UI2.0/src/css/command-record.css b/UI2.0/src/css/command-record.css
index d31a477d4df0b297448d7fb4cb8fec942de502af..2537d46d3c1edf06fa290446b837e7e6a0d85b9d 100644
--- a/UI2.0/src/css/command-record.css
+++ b/UI2.0/src/css/command-record.css
@@ -6,9 +6,8 @@
   width: 85px;
   border-radius: 0px;
   cursor: pointer;
-  margin: 32px 0px 32px 0px;
+  margin: 32px 0px 16px 0px;
 }
-
 .btn-grp:after {
   content: "";
   clear: both;
@@ -17,14 +16,13 @@
 .btn-grp button:not(:last-child) {
   border-right: none;
 }
-
-.btn-grp button:hover {
+.btn-grp button:hover,
+.btn-grp button:focus {
   background-color: #3781de;
   color: #fff;
   border: 1px solid #3781de;
 }
 .container {
-  height: 70px;
   width: 300px;
   margin-top: 32px;
   margin-right: 32px;
@@ -35,11 +33,14 @@
 .search {
   width: 300px;
   height: 32px;
-  border-radius: 18px;
+  border-radius: 4px;
   outline: none;
   border: 1px solid #ccc;
   padding-left: 20px;
 }
+.search::-webkit-input-placeholder {
+  color: #cccccc;
+}
 .btn {
   height: 35px;
   width: 35px;
@@ -50,6 +51,87 @@
   border: none;
   cursor: pointer;
 }
-.btn:hover{
+.btn:hover {
   background: url("../assets/layout/search-2.png") no-repeat;
 }
+.record-list {
+  width: 1792px;
+  margin: 0px 32px;
+  border-collapse: collapse;
+}
+.record-list td {
+  font-size: 14px;
+  border-bottom: 1px solid #cfcfcf;
+  height: 48px;
+  padding-left: 24px;
+}
+.record-list th {
+  font-size: 14px;
+  text-align: left;
+  background-color: #f5f5f5;
+  color: #bcbcbc;
+  height: 32px;
+}
+.record-list img {
+  margin-left: 8px;
+}
+ul.pagination {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+}
+ul.pagination li {
+  display: inline;
+}
+ul.pagination li a {
+  color: black;
+  float: left;
+  padding: 5px 12px;
+  text-decoration: none;
+  border-radius: 4px;
+}
+ul.pagination li a.active {
+  background-color: #3781de;
+  color: white;
+}
+ul.pagination li a:hover:not(.active) {
+  background-color: #ddd;
+}
+ul.pagination li a.active {
+  background-color: #3781de;
+  color: white;
+}
+ul.pagination li a:hover:not(.active) {
+  background-color: #ddd;
+}
+.select_page {
+  width: 90px;
+  height: 32px;
+  margin-right: 32px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  outline: none;
+}
+.state-icon {
+  border-radius: 4px;
+  margin-right: 8px;
+  margin-top: 6px;
+  width: 8px;
+  height: 8px;
+}
+.table-button {
+  background-color: #fff;
+  border: none;
+  color: #3781de;
+  font-size: 14px;
+  padding: 1px 0px;
+  margin: 0px 16px 0px 0px;
+  cursor: pointer;
+}
+.record-list > tr > td > input {
+  border: 0;
+  outline: none;
+}
+.record-list > tr > td > input::-webkit-input-placeholder {
+  color: #bcbcbc;
+}
diff --git a/UI2.0/src/css/contact-us.css b/UI2.0/src/css/contact-us.css
new file mode 100644
index 0000000000000000000000000000000000000000..cbdecbe6151710d7188ca240aa835940a3dd2671
--- /dev/null
+++ b/UI2.0/src/css/contact-us.css
@@ -0,0 +1,90 @@
+.col-module {
+  background-color: #f1f2f6;
+}
+.contact-input {
+  margin: 32px 0px 0px 96px;
+  border-radius: 4px;
+  outline: none;
+  border: 1px solid #ccc;
+  padding-left: 8px;
+  height: 32px;
+}
+.contact-input::-webkit-input-placeholder {
+  color: #cccccc;
+}
+.contact-textbox {
+  margin: 32px 0px 0px 82px;
+  overflow: auto;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  width: 500px;
+  height: 100px;
+  outline: none;
+}
+.numLimit {
+  margin-left: -90px;
+  margin-top: 140px;
+}
+.btn-submit {
+  margin: 32px 0px 0px 144.04px;
+  border-radius: 4px;
+  height: 32px;
+  width: 110px;
+  background-color: #3781de;
+  color: #ffffff;
+  font-size: 14px;
+  border: 1px solid #3781de;
+  cursor: pointer;
+}
+.submit-alert {
+  display: none;
+  position: absolute;
+  top: 30%;
+  left: 35%;
+  width: 472px;
+  height: 240px;
+  border: 1px solid #fff;
+  background-color: white;
+  overflow: auto;
+  border-radius: 4px;
+}
+.close-card {
+  height: 24px;
+  width: 24px;
+  margin-top: 18px;
+  background: url(../assets/contact-us/close-default.png) no-repeat;
+}
+.close-card:hover {
+  background: url(../assets/contact-us/close-highlight.png) no-repeat;
+}
+.button-submit-no {
+  background: #fff;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #cfcfcf;
+  width: 96px;
+  height: 32px;
+  margin: 8px 8px 24px 0px;
+}
+.button-submit-yes {
+  background: #3781de;
+  color: white;
+  font-size: 14px;
+  border: 0;
+  border-radius: 4px;
+  width: 96px;
+  height: 32px;
+  margin: 8px 0px 24px 0px;
+}
+::-webkit-scrollbar {
+  width: 12px;
+  padding-right: 8px;
+}
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  padding-right: 8px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+}
diff --git a/UI2.0/src/css/control-panel.css b/UI2.0/src/css/control-panel.css
index 5fb4a7689784191327e7a6ba35e7a1eaea4e4544..7674a3cf3a3a47bdd0dc8c11be447e54af0f6f4c 100644
--- a/UI2.0/src/css/control-panel.css
+++ b/UI2.0/src/css/control-panel.css
@@ -27,7 +27,6 @@
 .control-add-a:hover,
 .control-add-b:hover {
   background: url(../assets/control-panel/add-highlight.png) no-repeat;
-  /* background-color: antiquewhite; */
 }
 .control-delete {
   background: url(../assets/control-panel/delete-default.png) no-repeat;
@@ -51,7 +50,6 @@
   border-radius: 4px;
   padding: 0;
 }
-
 .task-list {
   width: 1310px;
   margin: 0px 32px;
@@ -81,7 +79,6 @@
   padding: 1px 0px;
   margin: 0px 16px 0px 0px;
 }
-
 .rate-table {
   margin: 0px 32px;
   width: 388px;
@@ -111,7 +108,7 @@
   display: none;
   position: absolute;
   top: 35%;
-  left: 30%;
+  left: 38%;
   width: 472px;
   height: 440px;
   border: 1px solid #fff;
@@ -160,11 +157,9 @@ ul.pagination {
   padding: 0;
   margin: 0;
 }
-
 ul.pagination li {
   display: inline;
 }
-
 ul.pagination li a {
   color: black;
   float: left;
@@ -172,12 +167,10 @@ ul.pagination li a {
   text-decoration: none;
   border-radius: 4px;
 }
-
 ul.pagination li a.active {
   background-color: #3781de;
   color: white;
 }
-
 ul.pagination li a:hover:not(.active) {
   background-color: #ddd;
 }
@@ -214,7 +207,8 @@ ul.pagination li a:hover:not(.active) {
   background-color: #fff;
   padding: 0;
 }
-.card-button:hover {
+.card-button:hover,
+.card-button:focus {
   color: #3781de;
 }
 .input-Taskname::-webkit-input-placeholder {
@@ -243,4 +237,11 @@ ul.pagination li a:hover:not(.active) {
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: #cccccc;
-}
\ No newline at end of file
+}
+.state-icon {
+  border-radius: 4px;
+  margin-right: 8px;
+  margin-top: 6px;
+  width: 8px;
+  height: 8px;
+}
diff --git a/UI2.0/src/css/execute-command.css b/UI2.0/src/css/execute-command.css
index 8bae597e7c354d1ca1a7322980eddbbb15321b51..bb469db3b9d3ab80bde6169da50ebd0e466d0fa5 100644
--- a/UI2.0/src/css/execute-command.css
+++ b/UI2.0/src/css/execute-command.css
@@ -8,7 +8,6 @@
   cursor: pointer;
   margin-bottom: 24px;
 }
-
 .btn-group:after {
   content: "";
   clear: both;
@@ -17,8 +16,8 @@
 .btn-group button:not(:last-child) {
   border-right: none;
 }
-
-.btn-group button:hover {
+.btn-group button:hover,
+.btn-group button:focus {
   background-color: #3781de;
   color: #fff;
   border: 1px solid #3781de;
@@ -114,7 +113,6 @@
   border: none;
   border-radius: 4px;
 }
-
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 12px;
@@ -129,4 +127,4 @@
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: #cccccc;
-}
\ No newline at end of file
+}
diff --git a/UI2.0/src/css/home.css b/UI2.0/src/css/home.css
index 3c68c1a06a251b966f7a7ce0e48f02aa40191ed8..3986bd4014c24a09ba90256f88c6ab8c2814febe 100644
--- a/UI2.0/src/css/home.css
+++ b/UI2.0/src/css/home.css
@@ -25,4 +25,4 @@
 .q-table th,
 .q-table td {
   padding: 7px 10px;
-}
\ No newline at end of file
+}
diff --git a/UI2.0/src/css/login.css b/UI2.0/src/css/login.css
new file mode 100644
index 0000000000000000000000000000000000000000..3e09e64a46f57093c90738e6cf924ea00a417ad3
--- /dev/null
+++ b/UI2.0/src/css/login.css
@@ -0,0 +1,16 @@
+.col-modu-a {
+  background-color: #f1f2f6;
+}
+.login-Interface {
+  height: 300px;
+  width: 200px;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 2px 2px 5px 2px #c2d9f8;
+  margin: 40px 80px;
+}
+.login-card {
+  width: 400px;
+  height: 440px;
+  margin: 180px 250px;
+}
diff --git a/UI2.0/src/css/loginlayout.css b/UI2.0/src/css/loginlayout.css
new file mode 100644
index 0000000000000000000000000000000000000000..2593cf293f9315adbb26775536a5da9e30a72101
--- /dev/null
+++ b/UI2.0/src/css/loginlayout.css
@@ -0,0 +1,12 @@
+.button-group {
+  position: absolute;
+  right: 0%;
+}
+.select-lang {
+  height: 32px;
+  outline: none;
+  border: 0;
+  font-size: 16px;
+  color: #222222;
+  margin-top: 6px;
+}
diff --git a/UI2.0/src/css/mainlayout.css b/UI2.0/src/css/mainlayout.css
index 5caac489b99d0d48b3c5db1a54cb9e2d6b0724d6..fc235324961173f60f4cb802fc6f0296b6fc0b9b 100644
--- a/UI2.0/src/css/mainlayout.css
+++ b/UI2.0/src/css/mainlayout.css
@@ -4,7 +4,6 @@
 .button-group {
   position: absolute;
   right: 0%;
-  /* background-color: antiquewhite; */
 }
 .search-input {
   border-radius: 20px;
@@ -23,4 +22,12 @@
 }
 .search-img:hover {
   background: url(../assets/layout/search-2.png) no-repeat;
-}
\ No newline at end of file
+}
+.select-lang {
+  height: 32px;
+  outline: none;
+  border: 0;
+  font-size: 16px;
+  color: #222222;
+  margin-top: 4px;
+}
diff --git a/UI2.0/src/css/offline-tuning.css b/UI2.0/src/css/offline-tuning.css
new file mode 100644
index 0000000000000000000000000000000000000000..ff15f9a8952cb93d1985b2f89a824d2f9285e87f
--- /dev/null
+++ b/UI2.0/src/css/offline-tuning.css
@@ -0,0 +1,140 @@
+.select_offline {
+  border: 1px solid #cccccc;
+  outline: none;
+  height: 32px;
+  width: 316px;
+  margin-top: 31px;
+  margin-right: 32px;
+  padding-left: 16px;
+}
+.select_para {
+  border: 1px solid #cccccc;
+  outline: none;
+  height: 32px;
+  width: 200px;
+  margin-top: 31px;
+  margin-right: 32px;
+  padding-left: 16px;
+}
+.btn-query {
+  margin: 32px 32px 0px 0px;
+  border-radius: 4px;
+  height: 32px;
+  width: 100px;
+  background-color: #3781de;
+  color: #ffffff;
+  font-size: 14px;
+  border: 1px solid #3781de;
+  cursor: pointer;
+}
+.offline-list {
+  width: 1792px;
+  margin: 0px 32px;
+  border-collapse: collapse;
+}
+.offline-list td {
+  font-size: 14px;
+  border-bottom: 1px solid #cfcfcf;
+  height: 48px;
+  padding-left: 24px;
+}
+.offline-list th {
+  font-size: 14px;
+  text-align: left;
+  background-color: #f5f5f5;
+  color: #bcbcbc;
+  height: 32px;
+}
+.offline-list img {
+  margin-left: 8px;
+}
+.select_page {
+  width: 90px;
+  height: 32px;
+  margin-right: 32px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  outline: none;
+}
+ul.pagination {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+}
+ul.pagination li {
+  display: inline;
+}
+ul.pagination li a {
+  color: black;
+  float: left;
+  padding: 5px 12px;
+  text-decoration: none;
+  border-radius: 4px;
+}
+ul.pagination li a.active {
+  background-color: #3781de;
+  color: white;
+}
+ul.pagination li a:hover:not(.active) {
+  background-color: #ddd;
+}
+ul.pagination li a.active {
+  background-color: #3781de;
+  color: white;
+}
+ul.pagination li a:hover:not(.active) {
+  background-color: #ddd;
+}
+.icon {
+  background: url("../assets/offline-tuning/sort-default.png") no-repeat;
+  height: 14px;
+  width: 14px;
+  margin: 2px 0px 0px 8px;
+}
+.icon:hover {
+  background: url("../assets/offline-tuning/sort-highlight.png") no-repeat;
+}
+.control-delete {
+  background: url(../assets/offline-tuning/delete-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin: 39px 32px 0px 0px;
+}
+.control-delete:hover {
+  background: url(../assets/offline-tuning/delete-highlight.png) no-repeat;
+}
+.control-spread {
+  background: url(../assets/offline-tuning/spread-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin: 39px 8px 0px 0px;
+}
+.control-spread:hover {
+  background: url(../assets/offline-tuning/spread-highlight.png) no-repeat;
+}
+.offline-modelstyle {
+  justify-content: space-between;
+  border: 1px solid #cccccc;
+  height: 400px;
+  width: 888px;
+}
+.model-title {
+  color: #222222;
+  font-size: 20px;
+  margin-left: 32px;
+  margin-top: 32px;
+  margin-bottom: 24px;
+  font-weight: bold;
+}
+.text-first {
+  margin: 30px 32px 10px 32px;
+  color: #999999;
+  font-size: 14px;
+}
+.text-second {
+  margin-right: 32px;
+  float: right;
+  color: #222222;
+  font-weight: bolder;
+  font-size: 20px;
+}
diff --git a/UI2.0/src/css/online-tuning.css b/UI2.0/src/css/online-tuning.css
new file mode 100644
index 0000000000000000000000000000000000000000..59e3da58d0e6ec27c43d571555af3c70ab7205f0
--- /dev/null
+++ b/UI2.0/src/css/online-tuning.css
@@ -0,0 +1,144 @@
+.select_offline {
+  border: 1px solid #cccccc;
+  outline: none;
+  height: 32px;
+  width: 316px;
+  margin-top: 31px;
+  margin-right: 32px;
+  padding-left: 16px;
+}
+.select_para {
+  border: 1px solid #cccccc;
+  outline: none;
+  height: 32px;
+  width: 200px;
+  margin-top: 31px;
+  margin-right: 32px;
+  padding-left: 16px;
+}
+.btn-query {
+  margin: 32px 32px 0px 0px;
+  border-radius: 4px;
+  height: 32px;
+  width: 100px;
+  background-color: #3781de;
+  color: #ffffff;
+  font-size: 14px;
+  border: 1px solid #3781de;
+  cursor: pointer;
+}
+.offline-list {
+  width: 1792px;
+  margin: 0px 32px;
+  border-collapse: collapse;
+}
+.offline-list td {
+  font-size: 14px;
+  border-bottom: 1px solid #cfcfcf;
+  height: 48px;
+  padding-left: 24px;
+}
+.offline-list th {
+  font-size: 14px;
+  text-align: left;
+  background-color: #f5f5f5;
+  color: #bcbcbc;
+  height: 32px;
+}
+.offline-list img {
+  margin-left: 8px;
+}
+.select_page {
+  width: 90px;
+  height: 32px;
+  margin-right: 32px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  outline: none;
+}
+ul.pagination {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+}
+ul.pagination li {
+  display: inline;
+}
+ul.pagination li a {
+  color: black;
+  float: left;
+  padding: 5px 12px;
+  text-decoration: none;
+  border-radius: 4px;
+}
+ul.pagination li a.active {
+  background-color: #3781de;
+  color: white;
+}
+ul.pagination li a:hover:not(.active) {
+  background-color: #ddd;
+}
+ul.pagination li a.active {
+  background-color: #3781de;
+  color: white;
+}
+ul.pagination li a:hover:not(.active) {
+  background-color: #ddd;
+}
+.icon {
+  background: url("../assets/offline-tuning/sort-default.png") no-repeat;
+  height: 14px;
+  width: 14px;
+  margin: 2px 0px 0px 8px;
+}
+.icon:hover {
+  background: url("../assets/offline-tuning/sort-highlight.png") no-repeat;
+}
+.control-delete {
+  background: url(../assets/offline-tuning/delete-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin: 39px 32px 0px 0px;
+}
+.control-delete:hover {
+  background: url(../assets/offline-tuning/delete-highlight.png) no-repeat;
+}
+.control-spread {
+  background: url(../assets/offline-tuning/spread-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin: 39px 8px 0px 0px;
+}
+.control-spread:hover {
+  background: url(../assets/offline-tuning/spread-highlight.png) no-repeat;
+}
+.configuration {
+  border-left: 1px solid #bcbcbc;
+  width: 448px;
+  height: 200px;
+}
+.online-input {
+  border: 1px solid #bcbcbc;
+  outline: none;
+  margin: 0px 16px;
+  height: 32px;
+  padding-left: 16px;
+  border-radius: 4px;
+}
+.online-input::-webkit-input-placeholder {
+  color: #cccccc;
+}
+.model-title {
+  color: #222222;
+  font-size: 20px;
+  margin-left: 32px;
+  margin-top: 32px;
+  margin-bottom: 24px;
+  font-weight: bold;
+}
+.online-modelstyle {
+  justify-content: space-between;
+  border: 1px solid #cccccc;
+  height: 400px;
+  width: 586.6px;
+}
diff --git a/UI2.0/src/css/personal.css b/UI2.0/src/css/personal.css
new file mode 100644
index 0000000000000000000000000000000000000000..09366710eabe96a8fa86e3bc5f8256733e9107be
--- /dev/null
+++ b/UI2.0/src/css/personal.css
@@ -0,0 +1,192 @@
+.model-personal {
+  justify-content: flex-start;
+  width: 1920px;
+  background-color: #f1f2f6;
+}
+.model-personal > a,
+.IP-record {
+  color: #222222;
+  font-size: 20px;
+  margin: 24px 0px 16px 32px;
+  font-weight: bold;
+}
+.model-personal-a {
+  margin: 0px 32px 16px 32px;
+  background: url(../assets/personal-background.png) no-repeat;
+}
+.select-first {
+  margin: 0px 32px 32px 16px;
+  padding: 0px 16px;
+  height: 32px;
+  width: 200px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  color: #222222;
+  font-size: 14px;
+  outline: none;
+}
+.control-delete {
+  background: url(../assets/control-panel/delete-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin: 39px 32px 0px 0px;
+}
+.control-delete:hover {
+  background: url(../assets/control-panel/delete-highlight.png) no-repeat;
+}
+.picture-alignment {
+  justify-content: space-between;
+}
+.title {
+  color: #222222;
+  font-size: 20px;
+  margin-left: 32px;
+  margin-top: 32px;
+  margin-bottom: 24px;
+  font-weight: bold;
+}
+.module-size {
+  width: 436px;
+  height: 300px;
+  border: 2px solid #e6e6e6;
+  margin-right: 16px;
+}
+.echarts-element {
+  margin-right: 16px;
+  width: 452px;
+  height: 262px;
+  margin-top: -44px;
+}
+.IP-model {
+  margin: 0px 32px 32px 32px;
+  background-color: #ffffff;
+}
+.IP-model > a {
+  color: #222222;
+  font-size: 20px;
+  font-weight: bold;
+}
+.setup-btn {
+  background: #3781de;
+  color: white;
+  font-size: 14px;
+  margin-right: 24px;
+  margin-top: 32px;
+  height: 32px;
+  width: 90px;
+  border: none;
+  border-radius: 4px;
+  padding: 0;
+  cursor: pointer;
+}
+.task-list {
+  width: 1792px;
+  margin: 0px 32px;
+  border-collapse: collapse;
+}
+.task-list td {
+  font-size: 14px;
+  border-bottom: 1px solid #cfcfcf;
+  height: 48px;
+  padding-left: 24px;
+}
+.task-list th {
+  font-size: 14px;
+  text-align: left;
+  background-color: #f5f5f5;
+  color: #bcbcbc;
+  height: 32px;
+}
+.table-button {
+  background-color: #fff;
+  border: none;
+  color: #3781de;
+  font-size: 14px;
+  padding: 1px 0px;
+  margin: 0px 16px 0px 0px;
+}
+.remarks {
+  border: 0;
+  outline: none;
+}
+.remarks::-webkit-input-placeholder,
+.info-input::-webkit-input-placeholder,
+.info-password::-webkit-input-placeholder {
+  color: #cccccc;
+}
+.pop-win {
+  display: none;
+  position: absolute;
+  top: 35%;
+  left: 38%;
+  width: 472px;
+  height: 440px;
+  border: 1px solid #fff;
+  background-color: white;
+  overflow: auto;
+  border-radius: 4px;
+}
+.black_overlay {
+  display: none;
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(185, 184, 184);
+  opacity: 0.5;
+}
+.close-card {
+  height: 24px;
+  width: 24px;
+  margin-top: 18px;
+  background: url(../assets/personal/close-default.png) no-repeat;
+}
+.close-card:hover {
+  background: url(../assets/personal/close-highlight.png) no-repeat;
+}
+.essential-info > a {
+  margin-left: 31px;
+}
+.info-input {
+  border: 1px solid #e6e6e6;
+  outline: none;
+  margin-left: 16px;
+  padding-left: 16px;
+  width: 350px;
+  height: 32px;
+}
+.info-password {
+  border: 1px solid #e6e6e6;
+  outline: none;
+  margin-left: 16px;
+  padding-left: 16px;
+  width: 320px;
+  height: 32px;
+  margin-top: 16px;
+}
+.button-add-chart-no {
+  background: #fff;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #cfcfcf;
+  width: 96px;
+  height: 32px;
+  margin: 24px 8px 24px 0px;
+}
+.button-add-chart-yes {
+  background: #3781de;
+  color: white;
+  font-size: 14px;
+  border: 0;
+  border-radius: 4px;
+  width: 96px;
+  height: 32px;
+  margin: 24px 0px 24px 0px;
+}
+.card-title {
+  color: #222222;
+  font-size: 20px;
+  font-weight: bolder;
+  padding: 14px 0px 8px 14px;
+}
diff --git a/UI2.0/src/css/realtime-information.css b/UI2.0/src/css/realtime-information.css
new file mode 100644
index 0000000000000000000000000000000000000000..85ee232d70b2941f22775d936921f647f76deb30
--- /dev/null
+++ b/UI2.0/src/css/realtime-information.css
@@ -0,0 +1,62 @@
+.model-realtime {
+  justify-content: flex-start;
+  width: 1920px;
+  background-color: #f1f2f6;
+}
+.model-realtime > a {
+  color: #222222;
+  font-size: 20px;
+  margin: 24px 0px 16px 32px;
+  font-weight: bold;
+}
+.model-realtime-a {
+  margin: 0px 32px 16px 32px;
+  background-color: #ffffff;
+}
+.select-first {
+  margin: 0px 32px 32px 16px;
+  padding: 0px 16px;
+  height: 32px;
+  width: 200px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  color: #222222;
+  font-size: 14px;
+  outline: none;
+}
+.control-delete {
+  background: url(../assets/control-panel/delete-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin: 39px 8px 0px 0px;
+}
+.control-delete:hover {
+  background: url(../assets/control-panel/delete-highlight.png) no-repeat;
+}
+.picture-alignment {
+  justify-content: space-between;
+}
+.title {
+  color: #222222;
+  font-size: 20px;
+  margin-left: 32px;
+  margin-top: 32px;
+  margin-bottom: 24px;
+  font-weight: bold;
+}
+.module-size {
+  width: 436px;
+  height: 300px;
+  border: 2px solid #e6e6e6;
+  margin-right: 16px;
+}
+.echarts-element {
+  margin-right: 16px;
+  width: 452px;
+  height: 262px;
+  margin-top: -44px;
+}
+.echarts-model {
+  margin: 0px 32px 32px 32px;
+  background-color: #ffffff;
+}
diff --git a/UI2.0/src/css/register.css b/UI2.0/src/css/register.css
new file mode 100644
index 0000000000000000000000000000000000000000..42150e3ca1bf90244c4879c67758a80225d86b48
--- /dev/null
+++ b/UI2.0/src/css/register.css
@@ -0,0 +1,16 @@
+.col-mod-a {
+  background-color: #f1f2f6;
+}
+.login-Interface {
+  height: 300px;
+  width: 200px;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 2px 2px 5px 2px #c2d9f8;
+  margin: 40px 80px;
+}
+.register-card {
+  width: 400px;
+  height: 440px;
+  margin: 180px 250px;
+}
diff --git a/UI2.0/src/css/userlayout.css b/UI2.0/src/css/userlayout.css
index 952abd49d6cef8a8620785bb6a24a6a8b46bb160..501b14a7fc686eb6acad74c1b67f577098c0307d 100644
--- a/UI2.0/src/css/userlayout.css
+++ b/UI2.0/src/css/userlayout.css
@@ -1,39 +1,52 @@
 .q-toolbar {
-    padding: 16px 0px;
-  }
-  .menu-group {
-    text-align: center;
-  }
-  .menu-btn {
-    color: #222222;
-    font-size: 16px;
-    margin: 0px 24px;
-    padding: 0px;
-    height: 48px;
-    border: 0px;
-    background-color: #ffffff;
-    border-radius: 0px;
-  }
-  .menu-btn:hover {
-    color: #3781de;
-    background-color: #ffffff;
-    border-bottom: 2px solid #3781de;
-  }
-  .search-input {
-    border-radius: 20px;
-    height: 32px;
-    border: 1px solid #cccccc;
-    padding-left: 10px;
-    display: none;
-    outline: none;
-  }
-  .search-img {
-    background: url(../assets/layout/search-1.png) no-repeat;
-    width: 24px;
-    height: 24px;
-    margin-right: 24px;
-    margin-top: 3px;
-  }
-  .search-img:hover {
-    background: url(../assets/layout/search-2.png) no-repeat;
-  }
\ No newline at end of file
+  padding: 16px 0px;
+}
+.menu-group {
+  text-align: center;
+}
+.menu-btn {
+  color: #222222;
+  font-size: 16px;
+  margin: 0px 24px;
+  padding: 0px;
+  height: 48px;
+  border: 0px;
+  background-color: #ffffff;
+  border-radius: 0px;
+}
+.menu-btn:hover,
+.menu-btn:focus {
+  color: #3781de;
+  background-color: #ffffff;
+  border-bottom: 2px solid #3781de;
+}
+.search-input {
+  border-radius: 20px;
+  height: 32px;
+  border: 1px solid #cccccc;
+  padding-left: 10px;
+  display: none;
+  outline: none;
+}
+.search-img {
+  background: url(../assets/layout/search-1.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin-right: 24px;
+  margin-top: 3px;
+}
+.search-img:hover {
+  background: url(../assets/layout/search-2.png) no-repeat;
+}
+.select-language {
+  height: 32px;
+  outline: none;
+  border: 0;
+  font-size: 16px;
+  color: #222222;
+  margin-top: 4px;
+}
+.q-btn .q-icon,
+.q-btn .q-spinner {
+  font-size: 34px;
+}
diff --git a/UI2.0/src/js/command-record.js b/UI2.0/src/js/command-record.js
index 747587adb3aba3b7ac741c708d096391f26af3bf..842002f8f7c27025984f38c4ddc1d4c29b6f469a 100644
--- a/UI2.0/src/js/command-record.js
+++ b/UI2.0/src/js/command-record.js
@@ -1,126 +1,16 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  data() {
-    return {
-      columns: [
-        {
-          name: "order",
-          required: true,
-          label: "序号",
-          align: "left",
-          field: (row) => row.order,
-          format: (val) => `${val}`,
-          sortable: true,
-        },
-        {
-          name: "name",
-          align: "center",
-          label: "任务名称",
-          field: "name",
-        },
-        { name: "IP", label: "IP地址", field: "IP" },
-        { name: "command", label: "命令", field: "command" },
-        { name: "state", label: "任务状态", field: "state" },
-        { name: "time", label: "开始时间", field: "time" },
-        {
-          name: "operation",
-          label: "操作",
-          field: "operation",
-        },
-      ],
-      data: [
-        {
-          order: 1,
-          name: "Test1",
-          IP: "9.10.33.13",
-          command: "在线调优",
-          state: "运行中",
-          time: 87,
-          operation: "14%",
-        },
-        {
-          order: 2,
-          name: "Test2",
-          IP: "9.10.33.13",
-          command: "离线调优",
-          state: "运行中",
-          time: 129,
-          operation: "8%",
-        },
-        {
-          order: 3,
-          name: "Test3",
-          IP: "9.10.33.13",
-          command: "在线调优",
-          state: "已完成",
-          time: 337,
-          operation: "6%",
-        },
-        {
-          order: 4,
-          name: "Test4",
-          IP: "9.10.33.13",
-          command: "离线调优",
-          state: "运行中",
-          time: 413,
-          operation: "3%",
-        },
-        {
-          order: 5,
-          name: "Test5",
-          IP: "9.10.33.13",
-          command: "离线调优",
-          state: "已完成",
-          time: 327,
-          operation: "7%",
-        },
-        {
-          order: 6,
-          name: "Test6",
-          IP: "9.10.33.13",
-          command: "在线调优",
-          state: "已完成",
-          time: 50,
-          operation: "0%",
-        },
-        {
-          order: 7,
-          name: "Test7",
-          IP: "9.10.33.13",
-          command: "在线调优",
-          state: "运行中",
-          time: 38,
-          operation: "0%",
-        },
-        {
-          order: 8,
-          name: "Test8",
-          IP: "9.10.33.13",
-          command: "离线调优",
-          state: "运行中",
-          time: 562,
-          operation: "0%",
-        },
-        {
-          order: 9,
-          name: "Test9",
-          IP: "9.10.33.13",
-          command: "在线调优",
-          state: "失败",
-          time: 326,
-          operation: "2%",
-        },
-        {
-          order: 10,
-          name: "Test10",
-          IP: "9.10.33.13",
-          command: "在线调优",
-          state: "已完成",
-          time: 54,
-          operation: "12%",
-        },
-      ],
-    };
+  methods: {
+    onOfflineClick() {
+      this.$router.push({
+        path: "/offline",
+      });
+    },
+    onOnlineClick() {
+      this.$router.push({
+        path: "/online",
+      });
+    },
   },
 });
\ No newline at end of file
diff --git a/UI2.0/src/js/contact-us.js b/UI2.0/src/js/contact-us.js
new file mode 100644
index 0000000000000000000000000000000000000000..444322447f899b32a9518296e2423a9a6d114b45
--- /dev/null
+++ b/UI2.0/src/js/contact-us.js
@@ -0,0 +1,21 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    data() {
+        return {
+            num: 0,
+        };
+    },
+    methods: {
+        descInput() {
+            var txtVal = this.desc.length;
+            this.num = 0 + txtVal;
+        },
+        openAlert() {
+            document.getElementById("submit-alert").style.display = "block";
+        },
+        closeAlert() {
+            document.getElementById("submit-alert").style.display = "none";
+        },
+    },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/control-panel.js b/UI2.0/src/js/control-panel.js
index 6004166988ee75c0879af46bde3d3341b54d6c57..48faac88046c1b3c1c358563f020680318736a52 100644
--- a/UI2.0/src/js/control-panel.js
+++ b/UI2.0/src/js/control-panel.js
@@ -1,4 +1,3 @@
-{/* <script> */}
 import { defineComponent } from "vue";
 
 export default defineComponent({
@@ -21,7 +20,7 @@ export default defineComponent({
       document.getElementById("history").style.display = "block";
     },
     addCardColumn() {
-      document.getElementById("add-cardcolumn").style.display = "block";  
+      document.getElementById("add-cardcolumn").style.display = "block";
     },
   },
   mounted() {
@@ -83,7 +82,6 @@ export default defineComponent({
         },
       ],
     };
-
     var option2 = {
       color: ["#5ce59d", "#559ff8"],
       grid: {
@@ -112,15 +110,6 @@ export default defineComponent({
           color: "#999999",
         },
       },
-      toolbox: {
-        show: false,
-        feature: {
-          dataView: { show: true, readOnly: false },
-          magicType: { show: true, type: ["line", "bar"] },
-          restore: { show: true },
-          saveAsImage: { show: true },
-        },
-      },
       calculable: true,
       xAxis: [
         {
@@ -141,7 +130,7 @@ export default defineComponent({
             color: "#999999",
             padding: [0, 0, 0, -21],
           },
-          nameGap: 15, //kb/s与坐标轴的距离
+          nameGap: 15, //"kb/s"与坐标轴的距离
           type: "value",
           max: 60,
           min: 0,
@@ -182,7 +171,6 @@ export default defineComponent({
         },
       ],
     };
-
     var option3 = {
       title: [
         {
@@ -230,7 +218,6 @@ export default defineComponent({
             borderWidth: 2,
             borderType: "solid",
           },
-
           avoidLabelOverlap: false,
           label: {
             show: true,
@@ -238,7 +225,6 @@ export default defineComponent({
             formatter: " {@name}({d}%) ",
             fontSize: 14,
             color: "#222222",
-            // padding: [32, 0, 0, -30],
           },
           labelLine: {
             show: false, //数据显示地方的引线
@@ -259,5 +245,4 @@ export default defineComponent({
     myChart2.setOption(option2);
     myChart3.setOption(option3);
   },
-});
-// </script>
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/login.js b/UI2.0/src/js/login.js
new file mode 100644
index 0000000000000000000000000000000000000000..4f77fd79e8180b83b393dd326f289943fb9f825d
--- /dev/null
+++ b/UI2.0/src/js/login.js
@@ -0,0 +1,17 @@
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+    methods: {
+        onSubmit() { },
+        onUserClick() {
+            this.$router.push({
+                path: "/user",
+            });
+        },
+        onRegisterClick() {
+            this.$router.push({
+                path: "/register",
+            });
+        },
+    },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/loginlayout.js b/UI2.0/src/js/loginlayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c729bb3868832c53e778b284b4bbc4c11998303
--- /dev/null
+++ b/UI2.0/src/js/loginlayout.js
@@ -0,0 +1,16 @@
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "LoginLayout",
+  components: {},
+  methods: {
+    onItemClick() {
+    },
+    onMainClick() {
+      this.$router.push({
+        path: "/",
+      });
+    },
+  },
+  setup() { },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/mainlayout.js b/UI2.0/src/js/mainlayout.js
index e234da2346a0d3c5c60aff0b2b7ebb76d6b89c09..47414cc384067afba3d188f75f20bd1745432b6f 100644
--- a/UI2.0/src/js/mainlayout.js
+++ b/UI2.0/src/js/mainlayout.js
@@ -1,4 +1,5 @@
 import EssentialLink from "components/EssentialLink.vue";
+import { defineComponent, ref } from "vue";
 
 const linksList = [
   {
@@ -7,53 +8,12 @@ const linksList = [
     icon: "school",
     link: "https://quasar.dev",
   },
-//   {
-//     title: "Github",
-//     caption: "github.com/quasarframework",
-//     icon: "code",
-//     link: "https://github.com/quasarframework",
-//   },
-//   {
-//     title: "Discord Chat Channel",
-//     caption: "chat.quasar.dev",
-//     icon: "chat",
-//     link: "https://chat.quasar.dev",
-//   },
-//   {
-//     title: "Forum",
-//     caption: "forum.quasar.dev",
-//     icon: "record_voice_over",
-//     link: "https://forum.quasar.dev",
-//   },
-//   {
-//     title: "Twitter",
-//     caption: "@quasarframework",
-//     icon: "rss_feed",
-//     link: "https://twitter.quasar.dev",
-//   },
-//   {
-//     title: "Facebook",
-//     caption: "@QuasarFramework",
-//     icon: "public",
-//     link: "https://facebook.quasar.dev",
-//   },
-//   {
-//     title: "Quasar Awesome",
-//     caption: "Community Quasar projects",
-//     icon: "favorite",
-//     link: "https://awesome.quasar.dev",
-//   },
 ];
-
-import { defineComponent, ref } from "vue";
-
 export default defineComponent({
   name: "MainLayout",
-
   components: {
     EssentialLink,
   },
-
   methods: {
     onItemClick() {
       console.log("Clicked.");
@@ -82,10 +42,8 @@ export default defineComponent({
       document.getElementById("search-input").style.display = "block";
     },
   },
-
   setup() {
     const leftDrawerOpen = ref(false);
-
     return {
       essentialLinks: linksList,
       leftDrawerOpen,
diff --git a/UI2.0/src/js/offline-tuning.js b/UI2.0/src/js/offline-tuning.js
new file mode 100644
index 0000000000000000000000000000000000000000..15ee7c9755a4fe4043b82e46001cddc6cc7d41df
--- /dev/null
+++ b/UI2.0/src/js/offline-tuning.js
@@ -0,0 +1,256 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    methods: {
+
+    },
+    mounted() {
+        var echarts = require("echarts");
+        var myChart1 = echarts.init(document.getElementById("offline1"));
+        var myChart2 = echarts.init(document.getElementById("offline2"));
+        var myChart3 = echarts.init(document.getElementById("offline3"));
+        var myChart4 = echarts.init(document.getElementById("offline4"));
+        var option1 = {
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "30",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                data: ['before', 'after'],
+                axisLine: {
+                    lineStyle: {
+                        color: "#999999",
+                    },
+                },
+            },
+            yAxis: {
+                type: 'value',
+                max: 50,
+                min: 0,
+                minInterval: 10,
+                interval: 10, //每次增加几个
+                axisLine: {
+                    lineStyle: {
+                        color: "#999999",
+                    },
+                },
+            },
+            series: [
+                {
+                    data: [
+                        {
+                            value: 28,
+                            itemStyle: {
+                                color: '#559ff8'
+                            }
+                        },
+                        {
+                            value: 19,
+                            itemStyle: {
+                                color: '#5ce59d'
+                            }
+                        }
+                    ],
+                    type: 'bar',
+                    barWidth: 10,
+                    itemStyle: {
+                        normal: {
+                            barBorderRadius: [10, 10, 10, 10] //柱形图圆角，初始化效果
+                        }
+                    }
+                }
+            ],
+        };
+        var option2 = {
+            color: ['#5ce59d', '#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: [
+                    { name: 'key_parameters_select-1637120248097', icon: 'circle' },
+                    { name: 'compress-1627891392963', icon: 'circle' }
+                ],
+                right: "32",
+                top: "0",
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "30",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40'],
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 125000,
+                interval: 25000,
+                axisLabel: {
+                    formatter: '{value}b'
+                }
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        60000, 62000, 60000, 70000, 68000, 72000, 61000, 60000, 66000, 58000,
+                        60000, 58000, 70000, 64000, 70000, 73000, 74000, 68000, 75000, 74000,
+                        120000, 75000, 74500, 68000, 110000, 75000, 68000, 59000, 83000, 88000,
+                        75000, 60000, 80000, 80000, 60000, 58000, 110000, 80000, 120000, 65000,
+                    ]
+                },
+                {
+                    name: 'compress-1627891392963',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        50000, 40000, 75000, 50000, 52000, 70000, 40000, 45000, 40000, 51000,
+                        35000, 60000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 38000,
+                        37000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 42000, 43000,
+                        53000, 45000, 43000, 54000, 47000, 45000, 58000, 55000, 38000, 40000
+                    ]
+                }
+            ],
+        };
+        var option3 = {
+            color: ['#5ce59d', '#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: [
+                    { name: 'key_parameters_select-1637120248097', icon: 'circle' },
+                    { name: 'compress-1627891392963', icon: 'circle' }
+                ],
+                right: "32",
+                top: "0",
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "30",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40'],
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 0.1,
+                interval: 0.02,
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        0.060, 0.062, 0.060, 0.070, 0.068, 0.072, 0.061, 0.060, 0.066, 0.058,
+                        0.060, 0.058, 0.070, 0.064, 0.070, 0.073, 0.040, 0.068, 0.075, 0.049,
+                        0.020, 0.075, 0.074, 0.068, 0.011, 0.075, 0.068, 0.059, 0.083, 0.088,
+                        0.075, 0.080, 0.080, 0.078, 0.060, 0.058, 0.011, 0.080, 0.012, 0.065,
+                    ]
+                },
+                {
+                    name: 'compress-1627891392963',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        0.050, 0.040, 0.075, 0.050, 0.052, 0.070, 0.040, 0.045, 0.040, 0.051,
+                        0.035, 0.060, 0.043, 0.060, 0.066, 0.058, 0.060, 0.058, 0.070, 0.038,
+                        0.037, 0.043, 0.060, 0.066, 0.058, 0.060, 0.058, 0.070, 0.042, 0.043,
+                        0.053, 0.045, 0.043, 0.054, 0.047, 0.045, 0.058, 0.055, 0.038, 0.040
+                    ]
+                }
+            ],
+        };
+        var option4 = {
+            color: ['#5ce59d', '#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: [
+                    { name: 'key_parameters_select-1637120248097', icon: 'circle' },
+                    { name: 'compress-1627891392963', icon: 'circle' }
+                ],
+                right: "32",
+                top: "0",
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "30",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40'],
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 125000,
+                interval: 25000,
+                axisLabel: {
+                    formatter: '{value}b'
+                }
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        60000, 62000, 60000, 70000, 68000, 72000, 61000, 60000, 66000, 58000,
+                        60000, 58000, 70000, 64000, 70000, 73000, 74000, 68000, 75000, 74000,
+                        120000, 75000, 74500, 68000, 110000, 75000, 68000, 59000, 83000, 88000,
+                        75000, 60000, 80000, 80000, 60000, 58000, 110000, 80000, 120000, 65000,
+                    ]
+                },
+                {
+                    name: 'compress-1627891392963',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        50000, 40000, 75000, 50000, 52000, 70000, 40000, 45000, 40000, 51000,
+                        35000, 60000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 38000,
+                        37000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 42000, 43000,
+                        53000, 45000, 43000, 54000, 47000, 45000, 58000, 55000, 38000, 40000
+                    ]
+                }
+            ],
+        };
+        myChart1.setOption(option1);
+        myChart2.setOption(option2);
+        myChart3.setOption(option3);
+        myChart4.setOption(option4);
+    },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/online-tuning.js b/UI2.0/src/js/online-tuning.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ae30db9602522427b41ebb1e4ddff903c67a313
--- /dev/null
+++ b/UI2.0/src/js/online-tuning.js
@@ -0,0 +1,416 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    methods: {
+
+    },
+    mounted() {
+        var echarts = require("echarts");
+        var circleChart1 = echarts.init(document.getElementById("percentage1"));
+        var circleChart2 = echarts.init(document.getElementById("percentage2"));
+        var circleChart3 = echarts.init(document.getElementById("percentage3"));
+        var circleChart4 = echarts.init(document.getElementById("percentage4"));
+        var myChart1 = echarts.init(document.getElementById("online1"));
+        var myChart2 = echarts.init(document.getElementById("online2"));
+        var myChart3 = echarts.init(document.getElementById("online3"));
+        var myChart4 = echarts.init(document.getElementById("online4"));
+        var myChart5 = echarts.init(document.getElementById("online5"));
+        var myChart6 = echarts.init(document.getElementById("online6"));
+        var circle1 = {
+            title: {
+                text: '12.24%',
+                left: 'center',
+                top: 75,
+                subtext: 'CPU',
+            },
+            visualMap: {
+                show: false,
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['50%', '70%'],
+                    center: ['50%', '50%'],
+                    data: [
+                        //itemSyle是单项的背景颜色设置。
+                        { value: 87.76, itemStyle: { color: '#f1f1f1' } },
+                        { value: 12.24, itemStyle: { color: '#5ce59d' } },
+                    ],
+                    label: {
+                        //将视觉引导图关闭
+                        show: false,
+                    },
+                    itemStyle: {
+                        //设置的是每项之间的留白
+                        borderWidth: 6,
+                        borderColor: '#fff'
+                    },
+                    // 初始化echarts的动画效果
+                    animationType: 'scale',
+                    animationEasing: 'elasticOut',
+                    animationDelay: function (idx) {
+                        return Math.random() * 200;
+                    }
+                }
+            ],
+        };
+        var circle2 = {
+            title: {
+                text: '9.32%',
+                left: 'center',
+                top: 75,
+                subtext: 'STORAGE',
+            },
+            visualMap: {
+                show: false,
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['50%', '70%'],
+                    center: ['50%', '50%'],
+                    data: [
+                        { value: 90.68, itemStyle: { color: '#f1f1f1' } },
+                        { value: 9.32, itemStyle: { color: '#5ce59d' } },
+                    ],
+                    label: {
+                        show: false,
+                    },
+                    itemStyle: {
+                        borderWidth: 6,
+                        borderColor: '#fff'
+                    },
+                    animationType: 'scale',
+                    animationEasing: 'elasticOut',
+                    animationDelay: function (idx) {
+                        return Math.random() * 200;
+                    }
+                }
+            ],
+        };
+        var circle3 = {
+            title: {
+                text: '20%',
+                left: 'center',
+                top: 75,
+                subtext: 'NET',
+            },
+            visualMap: {
+                show: false,
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['50%', '70%'],
+                    center: ['50%', '50%'],
+                    data: [
+                        { value: 80, itemStyle: { color: '#f1f1f1' } },
+                        { value: 20, itemStyle: { color: '#5ce59d' } },
+                    ],
+                    label: {
+                        show: false,
+                    },
+                    itemStyle: {
+                        borderWidth: 6,
+                        borderColor: '#fff'
+                    },
+                    animationType: 'scale',
+                    animationEasing: 'elasticOut',
+                    animationDelay: function (idx) {
+                        return Math.random() * 200;
+                    }
+                }
+            ],
+        };
+        var circle4 = {
+            title: {
+                text: '10%',
+                left: 'center',
+                top: 75,
+                subtext: 'MEM',
+            },
+            visualMap: {
+                show: false,
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['50%', '70%'],
+                    center: ['50%', '50%'],
+                    data: [
+                        { value: 90, itemStyle: { color: '#f1f1f1' } },
+                        { value: 10, itemStyle: { color: '#5ce59d' } },
+                    ],
+                    label: {
+                        show: false,
+                    },
+                    itemStyle: {
+                        borderWidth: 6,
+                        borderColor: '#fff'
+                    },
+                    animationType: 'scale',
+                    animationEasing: 'elasticOut',
+                    animationDelay: function (idx) {
+                        return Math.random() * 200;
+                    }
+                }
+            ],
+        };
+        var option1 = {
+            color: ['#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "10",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30'],
+                axisLabel: {
+                    interval: 0,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 50,
+                interval: 10,
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        6, 2, 6, 7, 8, 12, 16, 26, 12, 35, 6, 2, 6, 7, 8, 12, 16, 26, 12, 35,
+                        6, 2, 6, 7, 8, 12, 16, 26, 12, 35, 6, 2, 6, 7, 8, 12, 16, 26, 12, 35,
+                    ]
+                },
+            ],
+        };
+        var option2 = {
+            color: ['#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "10",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30'],
+                axisLabel: {
+                    interval: 0,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 15,
+                interval: 3,
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        6, 2, 6, 7, 8, 7, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5,
+                        6, 2, 9, 7, 8, 6, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5,
+                        6, 2, 6, 7, 8, 7, 1, 6, 5, 5, 6, 2, 3, 7, 3, 9, 1, 6, 7, 5,
+                    ]
+                },
+            ],
+        };
+        var option3 = {
+            color: ['#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "10",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30'],
+                axisLabel: {
+                    interval: 0,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 1,
+                interval: 0.2,
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5,
+                        0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4,
+                        0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8,
+                    ]
+                },
+            ],
+        };
+        var option4 = {
+            color: ['#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "10",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30',],
+                axisLabel: {
+                    interval: 0,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 1,
+                interval: 0.2,
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5,
+                        0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4,
+                        0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8,
+                    ]
+                },
+
+            ],
+        };
+        var option5 = {
+            color: ['#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "10",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30'],
+                axisLabel: {
+                    interval: 0,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 1,
+                interval: 0.2,
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5,
+                        0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4,
+                        0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8,
+                    ]
+                },
+            ],
+        };
+        var option6 = {
+            color: ['#559ff8'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: "32",
+                right: "32",
+                bottom: "32",
+                top: "10",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
+                    '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
+                    '28', '29', '30'],
+                axisLabel: {
+                    interval: 0,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 1,
+                interval: 0.2,
+            },
+            series: [
+                {
+                    name: 'key_parameters_select-1637120248097',
+                    type: 'line',
+                    symbol: 'none',
+                    data: [
+                        0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5,
+                        0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4,
+                        0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8,
+                    ]
+                },
+            ],
+        };
+        circleChart1.setOption(circle1);
+        circleChart2.setOption(circle2);
+        circleChart3.setOption(circle3);
+        circleChart4.setOption(circle4);
+        myChart1.setOption(option1);
+        myChart2.setOption(option2);
+        myChart3.setOption(option3);
+        myChart4.setOption(option4);
+        myChart5.setOption(option5);
+        myChart6.setOption(option6);
+    },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/personal.js b/UI2.0/src/js/personal.js
new file mode 100644
index 0000000000000000000000000000000000000000..612d7c2a3b1c8db63d0901cd1c9a66e53af20e74
--- /dev/null
+++ b/UI2.0/src/js/personal.js
@@ -0,0 +1,26 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "PageIndex",
+  methods: {
+    popWin() {
+      document.getElementById("light").style.display = "block";
+      document.getElementById("fade").style.display = "block";
+    },
+    closeWin() {
+      document.getElementById("light").style.display = "none";
+      document.getElementById("fade").style.display = "none";
+    },
+    popWinpass() {
+      document.getElementById("card-password").style.display = "block";
+      document.getElementById("fade").style.display = "block";
+    },
+    closeWinpass() {
+      document.getElementById("card-password").style.display = "none";
+      document.getElementById("fade").style.display = "none";
+    },
+  },
+  mounted() {
+
+  },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/realtime-information.js b/UI2.0/src/js/realtime-information.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0eca9e805d914456dd6bbd79b48df670fecd598
--- /dev/null
+++ b/UI2.0/src/js/realtime-information.js
@@ -0,0 +1,297 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "PageIndex",
+  methods: {
+
+  },
+  mounted() {
+    var echarts = require("echarts");
+    var myChart1 = echarts.init(document.getElementById("main1"));
+    var myChart2 = echarts.init(document.getElementById("main2"));
+    var myChart3 = echarts.init(document.getElementById("main3"));
+    var myChart4 = echarts.init(document.getElementById("main4"));
+    // 指定图表的配置项和数据
+    var option1 = {
+      grid: {
+        left: "30",
+        right: "30",
+        bottom: "30",
+        top: "22%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"],
+        axisLine: {
+          lineStyle: {
+            color: "#999999",
+          },
+        },
+      },
+      yAxis: {
+        name: "kb/s",
+        nameLocation: "end",
+        nameTextStyle: {
+          color: "#999999",
+          padding: [0, 0, 0, -21],
+        },
+        nameGap: 15, //"kb/s"与坐标轴的距离
+        type: "value",
+        max: 60,
+        min: 0,
+        minInterval: 15,
+        interval: 15, //每次增加几个
+        axisLine: {
+          lineStyle: {
+            color: "#999999",
+          },
+        },
+      },
+      series: [
+        {
+          data: [25, 35, 22, 32, 50, 40, 20],
+          type: "line",
+          symbol: "none", //拐点样式
+          // symbolSize: 8,//拐点大小
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                // width:3,//折线宽度
+                color: "#559ff8", //折线颜色
+              },
+            },
+          },
+        },
+      ],
+    };
+    var option2 = {
+      color: ["#5ce59d", "#559ff8"],
+      grid: {
+        left: "30",
+        right: "30",
+        bottom: "30",
+        // top: "30%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: "axis",
+      },
+      legend: {
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 10,
+        data: [
+          { name: "Test1", icon: "circle" },
+          { name: "Test2", icon: "circle" },
+        ],
+        right: "32",
+        top: "25",
+        textStyle: {
+          fontSize: 14,
+          color: "#999999",
+        },
+      },
+      toolbox: {
+        show: false,
+        feature: {
+          dataView: { show: true, readOnly: false },
+          magicType: { show: true, type: ["line", "bar"] },
+          restore: { show: true },
+          saveAsImage: { show: true },
+        },
+      },
+      calculable: true,
+      xAxis: [
+        {
+          type: "category",
+          data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"],
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+            },
+          },
+        },
+      ],
+      yAxis: [
+        {
+          name: "kb/s",
+          nameLocation: "end",
+          nameTextStyle: {
+            color: "#999999",
+            padding: [0, 0, 0, -21],
+          },
+          nameGap: 15,
+          type: "value",
+          max: 60,
+          min: 0,
+          minInterval: 15,
+          interval: 15, //每次增加几个
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "Test1",
+          type: "bar",
+          data: [40.0, 48.0, 37.0, 23.0, 25.6, 46.7, 35.6],
+          barWidth: 10, // 柱图宽度
+          barGap: "50%",// 多个并排柱子设置柱子之间的间距
+          itemStyle: {
+            normal: {
+              barBorderRadius: [10, 10, 10, 10], //柱形图圆角，初始化效果
+            },
+          },
+        },
+        {
+          name: "Test2",
+          type: "bar",
+          data: [32.0, 40.0, 35.0, 26.4, 28.7, 30.7, 45.6],
+          barWidth: 10,
+          barGap: "50%",
+          itemStyle: {
+            normal: {
+              barBorderRadius: [10, 10, 10, 10],
+            },
+          },
+        },
+      ],
+    };
+    var option3 = {
+      title: [
+        {
+          text: "2530",
+          subtext: "总计(G)",
+          x: "center",
+          y: "center",
+          top: "35%",
+          itemGap: 8,
+          textStyle: {
+            fontSize: 30,
+            color: "#222222",
+            align: "center",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 14,
+            color: "#222222",
+          },
+        },
+      ],
+      color: ["#6766ff", "#559ff8", "#5ce59d", "#f8a758"],
+      tooltip: {
+        trigger: "item",
+      },
+      legend: {
+        left: "center",
+        bottom: "30",
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 20,
+        icon: "circle",
+        textStyle: {
+          fontSize: 14,
+          color: "#999999",
+        },
+      },
+      series: [
+        {
+          name: "Access From",
+          type: "pie",
+          radius: ["40%", "45%"],
+          center: ["50%", "45%"],
+          itemStyle: {
+            borderColor: "#ffffff",
+            borderWidth: 2,
+            borderType: "solid",
+          },
+
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            position: "outside",
+            formatter: " {@name}({d}%) ",
+            fontSize: 14,
+            color: "#222222",
+          },
+          labelLine: {
+            show: false, //数据显示地方的引线
+            length: 1,
+            length2: 3,
+          },
+          data: [
+            { value: 1000, name: "Test1" },
+            { value: 900, name: "Test2" },
+            { value: 490, name: "Test3" },
+            { value: 140, name: "Test4" },
+          ],
+        },
+      ],
+    };
+    var option4 = {
+      grid: {
+        left: "32",
+        right: "32",
+        bottom: "32",
+        top: "22%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"],
+        axisLine: {
+          lineStyle: {
+            color: "#999999",
+          },
+        },
+      },
+      yAxis: {
+        name: "kb/s",
+        nameLocation: "end",
+        nameTextStyle: {
+          color: "#999999",
+          padding: [0, 0, 0, -21],
+        },
+        nameGap: 15,
+        type: "value",
+        max: 60,
+        min: 0,
+        minInterval: 15,
+        interval: 15,
+        axisLine: {
+          lineStyle: {
+            color: "#999999",
+          },
+        },
+      },
+      series: [
+        {
+          data: [12, 16, 5, 15, 10, 20, 10],
+          type: "line",
+          symbol: "none",
+          areaStyle: {
+            normal: {
+              color: '#FAEFE5' //改变区域颜色
+            }
+          },
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: "#f8a758",
+              },
+            },
+          },
+        },
+      ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart1.setOption(option1);
+    myChart2.setOption(option2);
+    myChart3.setOption(option3);
+    myChart4.setOption(option4);
+  },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/register.js b/UI2.0/src/js/register.js
new file mode 100644
index 0000000000000000000000000000000000000000..21711a18b5b8c3fd613d2cfb3172154712da69b8
--- /dev/null
+++ b/UI2.0/src/js/register.js
@@ -0,0 +1,12 @@
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+    methods: {
+        onSubmit() { },
+        onLoginClick() {
+            this.$router.push({
+                path: "/login",
+            });
+        },
+    },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/userlayout.js b/UI2.0/src/js/userlayout.js
index 81da730a01242869a7814f8747222627448e296b..52adf1e87377e4afb4adc04c42bc4edfef8e4255 100644
--- a/UI2.0/src/js/userlayout.js
+++ b/UI2.0/src/js/userlayout.js
@@ -44,20 +44,18 @@ export default defineComponent({
         path: "/login",
       });
     },
+    onPersonalClick() {
+      this.$router.push({
+        path: "/personal",
+      });
+    },
     showSearchInput() {
       document.getElementById("search-input").style.display = "block";
     },
   },
-
   setup() {
-    // const leftDrawerOpen = ref(false);
-
-    return {
-      // essentialLinks: linksList,
-      // leftDrawerOpen,
-      // toggleLeftDrawer() {
-      //   leftDrawerOpen.value = !leftDrawerOpen.value;
-      // },
+     return {
+     
     };
   },
 });
\ No newline at end of file
diff --git a/UI2.0/src/layouts/LoginLayout.vue b/UI2.0/src/layouts/LoginLayout.vue
index 8e364bf2cc3739611c42877e8b07217c4bb070b3..e0e97e0064052e059a49599c0a835aafd6dc23a4 100644
--- a/UI2.0/src/layouts/LoginLayout.vue
+++ b/UI2.0/src/layouts/LoginLayout.vue
@@ -12,31 +12,21 @@
         <div class="button-group">
           <q-btn
             flat
-            style="color: #222222; font-size: 14px; margin: 0px; padding: 0px 24px; height: 32px"
+            style="
+              color: #222222;
+              font-size: 16px;
+              margin: 0px;
+              padding: 0px 24px;
+              height: 32px;
+            "
             label="首页"
             size="sm"
             @click="onMainClick"
           ></q-btn>
-          <q-btn-dropdown
-            flat
-            round
-            style="color: #222222; font-size: 14px; padding: 0px; margin: 0px 32px 0px 0px"
-            label="简体中文"
-          >
-            <q-list>
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px">简体中文</q-item-label>
-                </q-item-section>
-              </q-item>
-
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px">英文</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-btn-dropdown>
+          <select class="select-lang">
+            <option selected>简体中文</option>
+            <option>English</option>
+          </select>
         </div>
       </q-toolbar>
     </q-header>
@@ -46,32 +36,8 @@
   </q-layout>
 </template>
 
-<script>
-import { defineComponent, ref } from "vue";
-
-export default defineComponent({
-  name: "LoginLayout",
-
-  components: {},
-
-  methods: {
-    onItemClick() {
-      // console.log('Clicked on an Item')
-    },
-    onMainClick() {
-      this.$router.push({
-        path: "/",
-      });
-    },
-  },
-
-  setup() {},
-});
-</script>
+<script src="../js/loginlayout.js" language="JavaScript" type="text/javascript"></script>
 
-<style>
-.button-group {
-  position: absolute;
-  right: 0%;
-}
+<style scoped>
+@import "../css/loginlayout.css";
 </style>
diff --git a/UI2.0/src/layouts/MainLayout.vue b/UI2.0/src/layouts/MainLayout.vue
index 882475f6faf85693ff021238b726ec8cf7f4b8dc..5aaf9d0bc8880d3f1e2e8b61d95941381c53ecae 100644
--- a/UI2.0/src/layouts/MainLayout.vue
+++ b/UI2.0/src/layouts/MainLayout.vue
@@ -1,13 +1,12 @@
 <template>
   <q-layout view="lHh Lpr lFf">
     <q-header style="height: 64px; width: 1920px">
-      <q-toolbar class="row" style="justify-content:space-between;">
+      <q-toolbar class="row" style="justify-content: space-between">
         <img
           alt="A-Tune logo"
           src="~assets/layout/logo_03.png"
           style="padding-left: 32px"
         />
-
         <div class="button-group row">
           <input
             id="search-input"
@@ -16,31 +15,19 @@
             placeholder="请输入..."
           />
           <div class="search-img" @click="showSearchInput"></div>
-
-          <q-btn-dropdown
-            flat
-            round
-            style="color: #000000; font-size: 12px; padding: 0px"
-            label="简体中文"
-          >
-            <q-list>
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px">简体中文</q-item-label>
-                </q-item-section>
-              </q-item>
-
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px">英文</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-btn-dropdown>
-
+          <select class="select-lang">
+            <option selected>简体中文</option>
+            <option>English</option>
+          </select>
           <q-btn
             flat
-            style="color: #000000; margin: 0px; padding: 0px 24px; height: 32px"
+            style="
+              color: #000000;
+              font-size: 16px;
+              margin: 0px;
+              padding: 0px 24px;
+              height: 32px;
+            "
             label="登录"
             size="sm"
             @click="onLoginClick"
@@ -53,6 +40,7 @@
               margin-right: 32px;
               height: 32px;
               width: 64px;
+              font-size: 16px;
             "
             label="注册"
             size="sm"
@@ -70,5 +58,5 @@
 <script src="../js/mainlayout.js" language="JavaScript" type="text/javascript"></script>
 
 <style scoped>
-@import "../css/userlayout.css";
+@import "../css/mainlayout.css";
 </style>
\ No newline at end of file
diff --git a/UI2.0/src/layouts/UserLayout.vue b/UI2.0/src/layouts/UserLayout.vue
index f040cbff59b860a227d5e72044c3ea96684367fd..f321e1122a790beadc0c7db4246c56c21db83ece 100644
--- a/UI2.0/src/layouts/UserLayout.vue
+++ b/UI2.0/src/layouts/UserLayout.vue
@@ -10,7 +10,6 @@
           />
         </div>
         <div class="menu-group">
-          <!-- style="margin-left: 306.5px" -->
           <button class="menu-btn" label="控制面板" @click="onUserClick">
             控制面板
           </button>
@@ -20,77 +19,66 @@
           <button class="menu-btn" label="实时信息" @click="onInformationClick">
             实时信息
           </button>
-          <button class="menu-btn" label="命令记录" @click="onRecordClick">命令记录</button>
-          <button class="menu-btn" label="联系我们" @click="onContactClick">联系我们</button>
+          <button class="menu-btn" label="命令记录" @click="onRecordClick">
+            命令记录
+          </button>
+          <button class="menu-btn" label="联系我们" @click="onContactClick">
+            联系我们
+          </button>
           <button class="menu-btn" label="关于A-Tune">关于A-Tune</button>
         </div>
         <div>
-        <div class="row">
-          <input
-            id="search-input"
-            class="search-input"
-            type="text"
-            placeholder="请输入..."
-          />
-          <div class="search-img" @click="showSearchInput"></div>
-
-          <q-btn-dropdown
-            flat
-            round
-            style="color: #222222; font-size: 16px; padding: 0px"
-            label="简体中文"
-          >
-            <q-list>
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px">简体中文</q-item-label>
-                </q-item-section>
-              </q-item>
-
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px">英文</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-btn-dropdown>
-
-          <q-avatar size="26px" style="margin: 5px 8px 0px 24px">
-            <img src="https://cdn.quasar.dev/img/avatar.png" />
-          </q-avatar>
-
-          <q-btn-dropdown
-            flat
-            round
-            style="
-              color: #222222;
-              font-size: 16px;
-              padding: 0px;
-              padding-right: 32px;
-            "
-            label="zhangsan"
-          >
-            <q-list>
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px">个人中心</q-item-label>
-                </q-item-section>
-              </q-item>
-
-              <q-item clickable v-close-popup @click="onItemClick">
-                <q-item-section>
-                  <q-item-label style="font-size: 12px" @click="onMainClick"
-                    >退出登录</q-item-label
-                  >
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-btn-dropdown>
-        </div>
+          <div class="row">
+            <input
+              id="search-input"
+              class="search-input"
+              type="text"
+              placeholder="请输入..."
+            />
+            <div class="search-img" @click="showSearchInput"></div>
+            <select class="select-language">
+              <option selected>简体中文</option>
+              <option>English</option>
+            </select>
+            <q-avatar size="26px" style="margin: 5px 8px 0px 24px">
+              <img src="https://cdn.quasar.dev/img/avatar.png" />
+            </q-avatar>
+            <q-btn-dropdown
+              flat
+              round
+              no-caps
+              style="
+                color: #222222;
+                font-size: 16px;
+                padding: 0px;
+                padding-right: 32px;
+              "
+              label="zhangsan"
+              dropdown-icon="expand_more"
+            >
+              <q-list>
+                <q-item clickable v-close-popup @click="onItemClick">
+                  <q-item-section>
+                    <q-item-label
+                      style="font-size: 12px"
+                      @click="onPersonalClick"
+                      >个人中心</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="onItemClick">
+                  <q-item-section>
+                    <q-item-label style="font-size: 12px" @click="onMainClick"
+                      >退出登录</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div>
         </div>
       </q-toolbar>
     </q-header>
-
     <q-page-container>
       <router-view />
     </q-page-container>
diff --git a/UI2.0/src/pages/Command-record.vue b/UI2.0/src/pages/Command-record.vue
index 8bfefaacaadf3429732a11082d58a30dfb372b29..437d45297b9e3bc22887216f9e2b143605351d43 100644
--- a/UI2.0/src/pages/Command-record.vue
+++ b/UI2.0/src/pages/Command-record.vue
@@ -26,7 +26,7 @@
           background-color: #ffffff;
         "
       >
-        <div class="row" style="justify-content:space-between;">
+        <div class="row" style="justify-content: space-between">
           <div class="btn-grp">
             <button
               style="
@@ -49,13 +49,374 @@
           </div>
           <div class="container">
             <form action="" class="parent">
-              <input type="text" class="search" placeholder="请输入" />
+              <input type="text" class="search" placeholder="搜索" />
               <input type="button" name="" id="" class="btn" />
             </form>
           </div>
         </div>
-        <div class="q-pa-md" style="width: 1856px">
-          <q-table :rows="data" :columns="columns" row-key="name"></q-table>
+        <div style="width: 1792px; height: 750px">
+          <table class="record-list">
+            <tr>
+              <th style="padding-left: 24px">序号</th>
+              <th style="padding-left: 13px; width: 300px">
+                <a style="margin-right: 8px">|</a>命令/ID
+              </th>
+              <th style="padding-left: 13px">
+                <a style="margin-right: 8px">|</a>IP地址
+              </th>
+              <th style="padding-left: 13px">
+                <a style="margin-right: 8px">|</a>任务状态
+                <img src="../assets/control-panel/filter-default.png" />
+              </th>
+              <th style="padding-left: 13px">
+                <a style="margin-right: 8px">|</a>开始时间
+                <q-icon
+                  name="unfold_more"
+                  style="font-size: 17px; margin-left: 2px"
+                ></q-icon>
+              </th>
+              <th style="padding-left: 13px; width: 600px">
+                <a style="margin-right: 8px">|</a>描述
+              </th>
+              <th style="padding-left: 13px; width: 150px">
+                <a style="margin-right: 8px">|</a>操作
+              </th>
+            </tr>
+            <tr>
+              <td>1</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392965</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #3781de"
+                  ></div>
+                  <div>运行中</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button" @click="onOfflineClick">
+                  详情
+                </button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr class="alt">
+              <td>2</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392964</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #5ce59d"
+                  ></div>
+                  <div>已完成</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button" @click="onOnlineClick">
+                  详情
+                </button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392963</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #f8a758"
+                  ></div>
+                  <div>失败</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392962</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #3781de"
+                  ></div>
+                  <div>运行中</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392961</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #5ce59d"
+                  ></div>
+                  <div>已完成</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>6</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392960</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #f8a758"
+                  ></div>
+                  <div>失败</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>7</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392959</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #3781de"
+                  ></div>
+                  <div>运行中</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr class="alt">
+              <td>8</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392958</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #5ce59d"
+                  ></div>
+                  <div>已完成</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>9</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392957</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #f8a758"
+                  ></div>
+                  <div>失败</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>10</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392956</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #3781de"
+                  ></div>
+                  <div>运行中</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr class="alt">
+              <td>11</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392955</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #5ce59d"
+                  ></div>
+                  <div>已完成</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>12</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392954</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #f8a758"
+                  ></div>
+                  <div>失败</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>13</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392953</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #f8a758"
+                  ></div>
+                  <div>失败</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>14</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392952</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #3781de"
+                  ></div>
+                  <div>运行中</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+            <tr>
+              <td>15</td>
+              <td><q-icon name="edit"></q-icon>compress-1627891392951</td>
+              <td>9.10.33.13</td>
+              <td>
+                <div class="row">
+                  <div
+                    class="state-icon"
+                    style="background-color: #f8a758"
+                  ></div>
+                  <div>失败</div>
+                </div>
+              </td>
+              <td>2021-11-22 11:23:00</td>
+              <td><input type="text" placeholder="--双击输入描述信息--" /></td>
+              <td>
+                <button class="table-button">详情</button>
+                <button class="table-button">删除</button>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div
+          class="row"
+          style="justify-content: space-between; margin: 24px 32px 32px 32px"
+        >
+          <div style="padding-top: 8px">共100条数据</div>
+          <div>
+            <div style="float: left">
+              <select class="select_page">
+                <option>5条/页</option>
+                <option>10条/页</option>
+                <option selected>15条/页</option>
+              </select>
+            </div>
+            <div style="float: left">
+              <ul class="pagination">
+                <li>
+                  <a href=""><q-icon name="chevron_left"></q-icon></a>
+                </li>
+                <li><a class="active" href="">1</a></li>
+                <li><a href="">2</a></li>
+                <li><a href="">3</a></li>
+                <li><a href="">4</a></li>
+                <li><a href="">5</a></li>
+                <li>
+                  <a href=""><q-icon name="chevron_right"></q-icon></a>
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/UI2.0/src/pages/Contact-us.vue b/UI2.0/src/pages/Contact-us.vue
index f7dfa3e07c0677ca5aa5de7a9460786f6027ec6f..a92c26954f8af386c7ad585d0288a4908481837f 100644
--- a/UI2.0/src/pages/Contact-us.vue
+++ b/UI2.0/src/pages/Contact-us.vue
@@ -81,17 +81,21 @@
                   font-size: 20px;
                   padding: 14px 0px 8px 14px;
                 "
-              ><q-icon name="check_circle" style="color:green;font-size: 26px"></q-icon>
+              >
+                <q-icon
+                  name="check_circle"
+                  style="color: green; font-size: 26px"
+                ></q-icon>
                 提交成功
               </div>
               <div class="close-card" @click="closeAlert"></div>
             </q-card-section>
-            <a style="margin-left:32px">我们将以邮件的形式，对您提交的问题进行反馈。</a>
+            <a style="margin-left: 32px"
+              >我们将以邮件的形式，对您提交的问题进行反馈。</a
+            >
             <!-- --------------------------- -->
             <div class="row" style="position: absolute; bottom: 0px; left: 30%">
-              <button class="button-submit-no" @click="closeAlert">
-                取消
-              </button>
+              <button class="button-submit-no" @click="closeAlert">取消</button>
               <button class="button-submit-yes">确定</button>
             </div>
           </q-card>
@@ -101,124 +105,9 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  data() {
-    return {
-      num: 0,
-    };
-  },
-
-  methods: {
-    descInput() {
-      var txtVal = this.desc.length;
-      this.num = 0 + txtVal;
-    },
-    openAlert() {
-      document.getElementById("submit-alert").style.display = "block";
-    },
-    closeAlert() {
-      document.getElementById("submit-alert").style.display = "none";
-    },
-  },
-});
-</script>
+<script src="../js/contact-us.js" language="JavaScript" type="text/javascript"></script>
 
 <style scoped>
-.col-module {
-  background-color: #f1f2f6;
-}
-.contact-input {
-  margin: 32px 0px 0px 96px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid #ccc;
-  padding-left: 8px;
-  height: 32px;
-}
-.contact-input::-webkit-input-placeholder {
-  color: #cccccc;
-}
-.contact-textbox {
-  margin: 32px 0px 0px 82px;
-  overflow: auto;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  width: 500px;
-  height: 100px;
-  outline: none;
-}
-.numLimit {
-  margin-left: -90px;
-  margin-top: 140px;
-}
-.btn-submit {
-  margin: 32px 0px 0px 144.04px;
-  border-radius: 4px;
-  height: 32px;
-  width: 110px;
-  background-color: #3781de;
-  color: #ffffff;
-  font-size: 14px;
-  border: 1px solid #3781de;
-  cursor: pointer;
-}
-.submit-alert {
-  display: none;
-  position: absolute;
-  top: 30%;
-  left: 35%;
-  width: 472px;
-  height: 240px;
-  border: 1px solid #fff;
-  background-color: white;
-  overflow: auto;
-  border-radius: 4px;
-}
-.close-card {
-  height: 24px;
-  width: 24px;
-  margin-top: 18px;
-  background: url(../assets/contact-us/close-default.png) no-repeat;
-}
-.close-card:hover {
-  background: url(../assets/contact-us/close-highlight.png) no-repeat;
-}
-.button-submit-no {
-  background: #fff;
-  font-size: 14px;
-  border-radius: 4px;
-  border: 1px solid #cfcfcf;
-  width: 96px;
-  height: 32px;
-  margin: 8px 8px 24px 0px;
-}
-.button-submit-yes {
-  background: #3781de;
-  color: white;
-  font-size: 14px;
-  border: 0;
-  border-radius: 4px;
-  width: 96px;
-  height: 32px;
-  margin: 8px 0px 24px 0px;
-}
-/* 设置滚动条的样式 */
-::-webkit-scrollbar {
-  width: 12px;
-  padding-right: 8px;
-}
-/* 滚动槽 */
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-  padding-right: 8px;
-}
-/* 滚动条滑块 */
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background: #cccccc;
-}
+@import "../css/contact-us.css";
 </style>
     
\ No newline at end of file
diff --git a/UI2.0/src/pages/Control-panel.vue b/UI2.0/src/pages/Control-panel.vue
index 22bdb0236fbdf011f0d70ef856f71f0240d36fb2..ecd3d644f775829acf1e58fd83d542c376c0a254 100644
--- a/UI2.0/src/pages/Control-panel.vue
+++ b/UI2.0/src/pages/Control-panel.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page>
     <div class="row" style="width: 1920px; background-color: #f1f2f6">
-      <div class="col-12 col-mod-a" style="width: 1920px; height:108px;">
+      <div class="col-12 col-mod-a" style="width: 1920px; height: 108px">
         <div style="padding-left: 204px; float: left">
           <div
             style="
@@ -142,17 +142,24 @@
             <div style="float: left">
               <button class="new-command-btn">新建命令</button>
             </div>
-            <div style="overflow: auto; width: 1356px; height: 400px">
+            <div
+              style="
+                overflow-y: auto;
+                overflow-x: hidden;
+                width: 1356px;
+                height: 400px;
+              "
+            >
               <table class="task-list">
                 <tr>
-                  <th style="padding-left: 24px">序号</th>
-                  <th style="padding-left: 13px">
+                  <th style="padding-left: 24px; width: 90px">序号</th>
+                  <th style="padding-left: 13px; width: 150px">
                     <a style="margin-right: 8px">|</a>任务名称
                   </th>
-                  <th style="padding-left: 13px">
+                  <th style="padding-left: 13px; width: 150px">
                     <a style="margin-right: 8px">|</a>IP地址
                   </th>
-                  <th style="padding-left: 13px">
+                  <th style="padding-left: 13px; width: 150px">
                     <a style="margin-right: 8px">|</a>命令
                     <q-icon
                       name="help"
@@ -168,51 +175,31 @@
                     </q-icon>
                     <!-- <img src="../assets/默认-帮助.png" /> -->
                   </th>
-                  <th style="padding-left: 13px">
+                  <th style="padding-left: 13px; width: 150px">
                     <a style="margin-right: 8px">|</a>任务状态
                     <img src="../assets/control-panel/filter-default.png" />
                   </th>
-                  <th style="padding-left: 13px">
+                  <th style="padding-left: 13px; width: 180px">
                     <a style="margin-right: 8px">|</a>开始时间
                     <q-icon
                       name="unfold_more"
                       style="font-size: 17px; margin-left: 2px"
                     ></q-icon>
                   </th>
-                  <th style="padding-left: 13px; width: 150px">
+                  <th style="padding-left: 13px; width: 100px">
                     <a style="margin-right: 8px">|</a>操作
                   </th>
                 </tr>
                 <tr>
                   <td>1</td>
-                  <td>
-                    <q-icon name="edit"></q-icon>Test1
-                    <!-- <input
-                      class="input-Taskname"
-                      type="text"
-                      placeholder="输入任务名称"
-                      style="
-                        outline: none;
-                        border-radius: 4px;
-                        border: 1px solid #cccccc;
-                        padding-left: 16px;
-                        height:32px;
-                      "
-                    /> -->
-                  </td>
+                  <td><q-icon name="edit"></q-icon>Test1</td>
                   <td>9.10.33.13</td>
                   <td style="color: #559ff8">在线调优</td>
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #3781de;
-                        "
+                        class="state-icon"
+                        style="background-color: #3781de"
                       ></div>
                       <div>运行中</div>
                     </div>
@@ -231,14 +218,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #5ce59d;
-                        "
+                        class="state-icon"
+                        style="background-color: #5ce59d"
                       ></div>
                       <div>已完成</div>
                     </div>
@@ -257,14 +238,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #f8a758;
-                        "
+                        class="state-icon"
+                        style="background-color: #f8a758"
                       ></div>
                       <div>失败</div>
                     </div>
@@ -283,14 +258,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #3781de;
-                        "
+                        class="state-icon"
+                        style="background-color: #3781de"
                       ></div>
                       <div>运行中</div>
                     </div>
@@ -309,14 +278,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #5ce59d;
-                        "
+                        class="state-icon"
+                        style="background-color: #5ce59d"
                       ></div>
                       <div>已完成</div>
                     </div>
@@ -335,14 +298,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #f8a758;
-                        "
+                        class="state-icon"
+                        style="background-color: #f8a758"
                       ></div>
                       <div>失败</div>
                     </div>
@@ -361,14 +318,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #3781de;
-                        "
+                        class="state-icon"
+                        style="background-color: #3781de"
                       ></div>
                       <div>运行中</div>
                     </div>
@@ -387,14 +338,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #5ce59d;
-                        "
+                        class="state-icon"
+                        style="background-color: #5ce59d"
                       ></div>
                       <div>已完成</div>
                     </div>
@@ -413,14 +358,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #f8a758;
-                        "
+                        class="state-icon"
+                        style="background-color: #f8a758"
                       ></div>
                       <div>失败</div>
                     </div>
@@ -439,14 +378,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #3781de;
-                        "
+                        class="state-icon"
+                        style="background-color: #3781de"
                       ></div>
                       <div>运行中</div>
                     </div>
@@ -465,14 +398,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #5ce59d;
-                        "
+                        class="state-icon"
+                        style="background-color: #5ce59d"
                       ></div>
                       <div>已完成</div>
                     </div>
@@ -491,14 +418,8 @@
                   <td>
                     <div class="row">
                       <div
-                        style="
-                          border-radius: 4px;
-                          margin-right: 8px;
-                          margin-top: 6px;
-                          width: 8px;
-                          height: 8px;
-                          background-color: #f8a758;
-                        "
+                        class="state-icon"
+                        style="background-color: #f8a758"
                       ></div>
                       <div>失败</div>
                     </div>
@@ -774,7 +695,6 @@
           </div>
         </div>
       </div>
-
       <!-- 第四栏 -->
       <div
         class="col-12 col-module row"
diff --git a/UI2.0/src/pages/Execute-command.vue b/UI2.0/src/pages/Execute-command.vue
index 449139d2868df0ac6c2df7d87fd112e84ee8f15e..7ec5b132dfce78a68eb6f22604c2bdb411c22472 100644
--- a/UI2.0/src/pages/Execute-command.vue
+++ b/UI2.0/src/pages/Execute-command.vue
@@ -75,7 +75,6 @@
               </button>
             </div>
           </div>
-
           <!-- 第二行 -->
           <div id="click-mode" style="display: block">
             <div class="row" style="margin-left: 248px">
@@ -143,7 +142,6 @@
               </div>
             </div>
           </div>
-
           <!-- 第三行 -->
           <div class="row">
             <a
@@ -231,7 +229,6 @@
                 placeholder="请输入"
               />
             </div>
-
             <!-- 第六行 -->
             <div class="row">
               <input
diff --git a/UI2.0/src/pages/Home.vue b/UI2.0/src/pages/Home.vue
index 0c9cf299a80c138c2f50809ae958ad58ce0fec26..3b253dcbb1bda638591965f5ba231755521debea 100644
--- a/UI2.0/src/pages/Home.vue
+++ b/UI2.0/src/pages/Home.vue
@@ -209,7 +209,8 @@
             "
             >具体部署方法请参考</span
           >
-          <a href="http://gitee.com/openeuler/A-Tune/blob/master/README.md"
+          <a
+            href="http://gitee.com/openeuler/A-Tune/blob/master/README.md"
             style="
               font-size: 14px;
               color: #3781de;
diff --git a/UI2.0/src/pages/Login.vue b/UI2.0/src/pages/Login.vue
index 238948a7159b3a684093e72eac121cc2e572de42..ad233a9e0c0563ff41605481df13e15848ff33ac 100644
--- a/UI2.0/src/pages/Login.vue
+++ b/UI2.0/src/pages/Login.vue
@@ -1,7 +1,6 @@
 <template>
   <q-page>
     <div class="row">
-      <!-- style="height: 150px" -->
       <div class="col-12 col-modu-a row" style="height: 800px; width: 1920px">
         <div class="col">
           <img
@@ -10,22 +9,13 @@
             style="width: 800px; height: 700px; margin-top: 60px; margin-left: 200px"
           />
         </div>
-
-
         <q-card class="login-card">
           <q-card-section>
             <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
               <div class="text-center text-h5 q-py-md">登录</div>
               <q-input outlined placeholder="请输入账号" />
               <q-input outlined placeholder="请输入密码" />
-              <!-- lazy-rules :rules="[(val) => (val && val.length > 0) || '请输入密码']" -->
               <div class="row" style="justify-content: flex-end">
-                <!-- <q-checkbox
-                  size="xs"
-                  class="login-tips"
-                  val="xs"
-                  label="记住密码"
-                /> -->
                 <input style="margin: 3px 8px" type="checkbox" value="" />记住密码
                 <div
                   class="login-tips"
@@ -58,13 +48,6 @@
                   <div style="font-size: 14px">还没账号？</div>
                   <div style="color: #3781de; font-size: 14px" @click="onRegisterClick">点击注册</div>
                 </div>
-                <!-- <q-btn
-                  label="Reset"
-                  type="reset"
-                  color="primary"
-                  flat
-                  class="q-ml-sm"
-                /> -->
               </div>
             </q-form>
           </q-card-section>
@@ -74,44 +57,10 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent, ref } from "vue";
-
-export default defineComponent({
-  methods: {
-    onSubmit() {},
-    onUserClick() {
-      this.$router.push({
-        path: "/user",
-      });
-    },
-    onRegisterClick() {
-      this.$router.push({
-        path: "/register",
-      });
-    },
-  },
-});
-</script>
+<script src="../js/login.js" language="JavaScript" type="text/javascript"></script>
 
 <style>
-.col-modu-a {
-  background-color: #f1f2f6;
-  /* #F3F4F8 */
-}
-.login-Interface {
-  height: 300px;
-  width: 200px;
-  background-color: #fff;
-  border-radius: 3px;
-  box-shadow: 2px 2px 5px 2px #c2d9f8;
-  margin: 40px 80px;
-}
-.login-card {
-  width: 400px;
-  height: 440px;
-  margin: 180px 250px;
-}
+@import "../css/login.css";
 </style>
           
     
\ No newline at end of file
diff --git a/UI2.0/src/pages/Offline-tuning.vue b/UI2.0/src/pages/Offline-tuning.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6edc8977c938a48f3f11484bd4509e6e42471f3e
--- /dev/null
+++ b/UI2.0/src/pages/Offline-tuning.vue
@@ -0,0 +1,341 @@
+<template>
+  <q-page>
+    <div
+      class="row"
+      style="
+        justify-content: flex-start;
+        width: 1920px;
+        background-color: #f1f2f6;
+      "
+    >
+      <a style="color: #999999; font-size: 14px; margin: 16px 0px 24px 32px"
+        >命令记录</a
+      >
+      <a style="color: #222222; font-size: 14px; margin: 16px 0px 24px 0px"
+        >/key_parameters_select-1637120248097</a
+      >
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          margin: 0px 32px 16px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div class="row" style="justify-content: space-between">
+          <div class="row">
+            <img
+              alt="offline-tuning"
+              src="~assets/offline-tuning/finish.png"
+              style="margin: 32px 32px 32px 32px; width: 56px; height: 56px"
+            />
+            <div>
+              <div
+                style="
+                  margin: 24px 0px 16px 0px;
+                  color: #222222;
+                  font-size: 20px;
+                  font-weight: bolder;
+                "
+              >
+                已完成
+              </div>
+              <div>key_parameters_select-1637120248097</div>
+            </div>
+          </div>
+          <div class="row">
+            <div>
+              <div class="text-first">调优算法</div>
+              <div class="text-second">gbrt</div>
+            </div>
+            <a style="color: #999999; font-size: 20px; margin-top: 30px">|</a>
+            <div>
+              <div class="text-first">迭代次数</div>
+              <div class="text-second">100</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          margin: 0px 32px 16px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div class="row" style="justify-content: space-between">
+          <a
+            style="
+              color: #222222;
+              font-size: 20px;
+              margin: 31px 0px 24px 32px;
+              font-weight: bold;
+            "
+            >各命令性能对比</a
+          >
+          <div>
+            <a style="margin-right: 16px">选择命令</a>
+            <select class="select_offline">
+              <option disabled selected hidden>--请选择--</option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+            <button class="btn-query">查 询</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="offline-modelstyle" style="margin: 0px 16px 16px 32px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">基线vs最优性能</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="offline1"
+              class="col"
+              style="width: 888px; height: 314px"
+            ></div>
+          </div>
+          <div class="offline-modelstyle" style="margin: 0px 32px 16px 0px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">最优性能统计</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="offline2"
+              class="col"
+              style="width: 888px; height: 314px"
+            ></div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="offline-modelstyle" style="margin: 0px 16px 32px 32px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">时间统计</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="offline3"
+              class="col"
+              style="width: 888px; height: 314px"
+            ></div>
+          </div>
+          <div class="offline-modelstyle" style="margin: 0px 32px 32px 0px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">性能统计</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="offline4"
+              class="col"
+              style="width: 888px; height: 314px"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <!-- 参数详情 -->
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          margin: 0px 32px 32px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div class="row" style="justify-content: space-between">
+          <a
+            style="
+              color: #222222;
+              font-size: 20px;
+              margin: 31px 0px 24px 32px;
+              font-weight: bold;
+            "
+            >参数详情</a
+          >
+          <div>
+            <select class="select_para">
+              <option disabled selected hidden>Columns</option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div style="width: 1792px; height: 514px">
+          <table class="offline-list">
+            <tr>
+              <th style="padding-left: 24px; padding-top: 6px">
+                <div class="row">
+                  <a>序号</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>IP地址</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>任务名称</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8pxpadding-top: 6px;">|</a>
+                  <a>任务状态</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>开始时间</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>开始时间</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+            </tr>
+            <tr>
+              <td>1</td>
+              <td>9</td>
+              <td>bz2</td>
+              <td>16.22</td>
+              <td>3.45</td>
+              <td>2.27</td>
+            </tr>
+            <tr class="alt">
+              <td>2</td>
+              <td>6</td>
+              <td>bz2</td>
+              <td>15.25</td>
+              <td>3.37</td>
+              <td>1.67</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>1</td>
+              <td>zlib</td>
+              <td>2.31</td>
+              <td>2.36</td>
+              <td>88.79</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>8</td>
+              <td>zlib</td>
+              <td>8.82</td>
+              <td>2.74</td>
+              <td>-0.93</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>7</td>
+              <td>gzi</td>
+              <td>8.34</td>
+              <td>2.71</td>
+              <td>1.22</td>
+            </tr>
+            <tr>
+              <td>6</td>
+              <td>5</td>
+              <td>bz2</td>
+              <td>6.27</td>
+              <td>2.53</td>
+              <td>13.21</td>
+            </tr>
+            <tr>
+              <td>7</td>
+              <td>3</td>
+              <td>bz2</td>
+              <td>3.74</td>
+              <td>2.553</td>
+              <td>41.78</td>
+            </tr>
+            <tr class="alt">
+              <td>8</td>
+              <td>3</td>
+              <td>zlib</td>
+              <td>3.47</td>
+              <td>2.74</td>
+              <td>48.65</td>
+            </tr>
+            <tr>
+              <td>9</td>
+              <td>8</td>
+              <td>zlib</td>
+              <td>8.98</td>
+              <td>2.71</td>
+              <td>-1.60</td>
+            </tr>
+            <tr>
+              <td>10</td>
+              <td>8</td>
+              <td>gzipp</td>
+              <td>9.5</td>
+              <td>3.01</td>
+              <td>-1.35</td>
+            </tr>
+          </table>
+        </div>
+        <div
+          class="row"
+          style="justify-content: space-between; margin: 24px 32px 32px 32px"
+        >
+          <div style="padding-top: 8px">共100条数据</div>
+          <div>
+            <div style="float: left">
+              <select class="select_page">
+                <option>5条/页</option>
+                <option selected>10条/页</option>
+                <option>15条/页</option>
+              </select>
+            </div>
+            <div style="float: left">
+              <ul class="pagination">
+                <li>
+                  <a href=""><q-icon name="chevron_left"></q-icon></a>
+                </li>
+                <li><a class="active" href="">1</a></li>
+                <li><a href="">2</a></li>
+                <li><a href="">3</a></li>
+                <li><a href="">4</a></li>
+                <li><a href="">5</a></li>
+                <li>
+                  <a href=""><q-icon name="chevron_right"></q-icon></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script src="../js/offline-tuning.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/offline-tuning.css";
+</style>
\ No newline at end of file
diff --git a/UI2.0/src/pages/Online-tuning.vue b/UI2.0/src/pages/Online-tuning.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f43a548eb4e97d1991a7dad8757859a85abe88f7
--- /dev/null
+++ b/UI2.0/src/pages/Online-tuning.vue
@@ -0,0 +1,373 @@
+<template>
+  <q-page>
+    <div
+      class="row"
+      style="
+        justify-content: space-between;
+        width: 1920px;
+        background-color: #f1f2f6;
+      "
+    >
+      <div class="row">
+        <div
+          style="color: #999999; font-size: 14px; margin: 16px 0px 24px 32px"
+        >
+          在线调优
+        </div>
+        <div style="color: #222222; font-size: 14px; margin: 16px 0px 24px 0px">
+          /key_parameters_select-1637120248097
+        </div>
+      </div>
+      <div>
+        <a>workload:</a>
+        <input class="online-input" type="text" placeholder="default" />
+        <a>VS</a>
+        <input class="online-input" type="text" placeholder="请输入" />
+        <button class="btn-query" style="margin: 16px 48px 24px 32px">
+          查 询
+        </button>
+      </div>
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          margin: 0px 32px 16px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div>
+          <div
+            style="
+              color: #222222;
+              font-size: 20px;
+              margin: 31px 0px 24px 32px;
+              font-weight: bold;
+            "
+          >
+            配置利用率
+          </div>
+          <div class="row" style="margin: 0px 32px 16px 32px">
+            <div class="configuration" style="border: 0" id="percentage1"></div>
+            <div class="configuration" id="percentage2"></div>
+            <div class="configuration" id="percentage3"></div>
+            <div class="configuration" id="percentage4"></div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          margin: 0px 32px 16px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div class="row" style="justify-content: space-between">
+          <a
+            style="
+              color: #222222;
+              font-size: 20px;
+              margin: 31px 0px 24px 32px;
+              font-weight: bold;
+            "
+            >各命令性能对比</a
+          >
+          <div>
+            <a style="margin-right: 16px">选择配置</a>
+            <select class="select_offline">
+              <option disabled selected hidden>--请选择--</option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+            <a style="margin-right: 16px">选择命令</a>
+            <select class="select_offline">
+              <option disabled selected hidden>--请选择--</option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+            <button class="btn-query">查 询</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="online-modelstyle" style="margin: 0px 16px 16px 32px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">CPU</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="online1"
+              class="col"
+              style="width: 586.6px; height: 314px"
+            ></div>
+          </div>
+          <div class="online-modelstyle" style="margin: 0px 16px 16px 0px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">STORAGE</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="online2"
+              class="col"
+              style="width: 586.6px; height: 314px"
+            ></div>
+          </div>
+          <div class="online-modelstyle" style="margin: 0px 0px 16px 0px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">NET</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="online3"
+              class="col"
+              style="width: 586.6px; height: 314px"
+            ></div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="online-modelstyle" style="margin: 0px 16px 32px 32px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">MEM</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="online4"
+              class="col"
+              style="width: 586.6px; height: 314px"
+            ></div>
+          </div>
+          <div class="online-modelstyle" style="margin: 0px 16px 32px 0px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">PERF</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="online5"
+              class="col"
+              style="width: 586.6px; height: 314px"
+            ></div>
+          </div>
+          <div class="online-modelstyle" style="margin: 0px 32px 32px 0px">
+            <div class="row" style="justify-content: space-between">
+              <div class="model-title">SYS</div>
+              <div class="row">
+                <div class="control-spread"></div>
+                <div class="control-delete"></div>
+              </div>
+            </div>
+            <div
+              id="online6"
+              class="col"
+              style="width: 586.6px; height: 314px"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <!-- 参数详情 -->
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          margin: 0px 32px 32px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div class="row" style="justify-content: space-between">
+          <a
+            style="
+              color: #222222;
+              font-size: 20px;
+              margin: 31px 0px 24px 32px;
+              font-weight: bold;
+            "
+            >参数详情</a
+          >
+          <div>
+            <select class="select_para">
+              <option disabled selected hidden>Columns</option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div style="width: 1792px; height: 514px">
+          <table class="offline-list">
+            <tr>
+              <th style="padding-left: 24px; padding-top: 6px">
+                <div class="row">
+                  <a>序号</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>IP地址</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>任务名称</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8pxpadding-top: 6px;">|</a>
+                  <a>任务状态</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>开始时间</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+              <th style="padding-left: 13px; padding-top: 6px">
+                <div class="row">
+                  <a style="margin-right: 8px">|</a>
+                  <a>开始时间</a>
+                  <div class="icon"></div>
+                </div>
+              </th>
+            </tr>
+            <tr>
+              <td>1</td>
+              <td>9</td>
+              <td>bz2</td>
+              <td>16.22</td>
+              <td>3.45</td>
+              <td>2.27</td>
+            </tr>
+            <tr class="alt">
+              <td>2</td>
+              <td>6</td>
+              <td>bz2</td>
+              <td>15.25</td>
+              <td>3.37</td>
+              <td>1.67</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>1</td>
+              <td>zlib</td>
+              <td>2.31</td>
+              <td>2.36</td>
+              <td>88.79</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>8</td>
+              <td>zlib</td>
+              <td>8.82</td>
+              <td>2.74</td>
+              <td>-0.93</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>7</td>
+              <td>gzi</td>
+              <td>8.34</td>
+              <td>2.71</td>
+              <td>1.22</td>
+            </tr>
+            <tr>
+              <td>6</td>
+              <td>5</td>
+              <td>bz2</td>
+              <td>6.27</td>
+              <td>2.53</td>
+              <td>13.21</td>
+            </tr>
+            <tr>
+              <td>7</td>
+              <td>3</td>
+              <td>bz2</td>
+              <td>3.74</td>
+              <td>2.553</td>
+              <td>41.78</td>
+            </tr>
+            <tr class="alt">
+              <td>8</td>
+              <td>3</td>
+              <td>zlib</td>
+              <td>3.47</td>
+              <td>2.74</td>
+              <td>48.65</td>
+            </tr>
+            <tr>
+              <td>9</td>
+              <td>8</td>
+              <td>zlib</td>
+              <td>8.98</td>
+              <td>2.71</td>
+              <td>-1.60</td>
+            </tr>
+            <tr>
+              <td>10</td>
+              <td>8</td>
+              <td>gzipp</td>
+              <td>9.5</td>
+              <td>3.01</td>
+              <td>-1.35</td>
+            </tr>
+          </table>
+        </div>
+        <div
+          class="row"
+          style="justify-content: space-between; margin: 24px 32px 32px 32px"
+        >
+          <div style="padding-top: 8px">共100条数据</div>
+          <div>
+            <div style="float: left">
+              <select class="select_page">
+                <option>5条/页</option>
+                <option selected>10条/页</option>
+                <option>15条/页</option>
+              </select>
+            </div>
+            <div style="float: left">
+              <ul class="pagination">
+                <li>
+                  <a href=""><q-icon name="chevron_left"></q-icon></a>
+                </li>
+                <li><a class="active" href="">1</a></li>
+                <li><a href="">2</a></li>
+                <li><a href="">3</a></li>
+                <li><a href="">4</a></li>
+                <li><a href="">5</a></li>
+                <li>
+                  <a href=""><q-icon name="chevron_right"></q-icon></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script src="../js/online-tuning.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/online-tuning.css";
+</style>
\ No newline at end of file
diff --git a/UI2.0/src/pages/Personal.vue b/UI2.0/src/pages/Personal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..470b1aa9ba71ffd2ecb565947ecdd5c8a2a68306
--- /dev/null
+++ b/UI2.0/src/pages/Personal.vue
@@ -0,0 +1,192 @@
+<template>
+  <q-page>
+    <div class="row model-personal">
+      <a>个人中心</a>
+      <div class="col-12 model-personal-a" style="width: 1856px">
+        <div
+          class="row"
+          style="margin-top: 32px; justify-content: space-between"
+        >
+          <div class="row">
+            <q-avatar
+              size="100px"
+              style="margin-left: 32px; margin-bottom: 32px; margin-right: 32px"
+            >
+              <img src="../assets/personal/head.jpg" />
+            </q-avatar>
+            <div>
+              <div
+                style="
+                  color: #1d68c4;
+                  font-size: 20px;
+                  margin-bottom: 16px;
+                  margin-top: 16px;
+                "
+              >
+                zhangsan
+              </div>
+              <div style="color: #1d68c4; font-size: 14px">
+                长风破浪会有时，直挂云帆济沧海
+              </div>
+            </div>
+          </div>
+          <div>
+            <button class="setup-btn" @click="popWin">基本设置</button>
+            <button
+              class="setup-btn"
+              style="margin-right: 32px"
+              @click="popWinpass"
+            >
+              密码修改
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 IP-model" style="width: 1856px; height: 900px">
+        <div class="row">
+          <a class="IP-record" style="margin-top: 32px">IP记录</a>
+        </div>
+        <table class="task-list">
+          <tr>
+            <th style="padding-left: 24px; width: 100px">序号</th>
+            <th style="padding-left: 13px; width: 220px">
+              <a style="margin-right: 8px">|</a>IP地址
+            </th>
+            <th style="padding-left: 13px">
+              <a style="margin-right: 8px">|</a>备注
+            </th>
+            <th style="padding-left: 13px; width: 200px">
+              <a style="margin-right: 8px">|</a>操作
+            </th>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>9.10.33.13</td>
+            <td><input class="remarks" placeholder="请输入备注" /></td>
+            <td>
+              <button class="table-button">删除</button>
+            </td>
+          </tr>
+          <tr class="alt">
+            <td>2</td>
+            <td>9.10.33.13</td>
+            <td><input class="remarks" placeholder="请输入备注" /></td>
+            <td>
+              <button class="table-button">删除</button>
+            </td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>9.10.33.13</td>
+            <td><input class="remarks" placeholder="请输入备注" /></td>
+            <td>
+              <button class="table-button">删除</button>
+            </td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>9.10.33.13</td>
+            <td><input class="remarks" placeholder="请输入备注" /></td>
+            <td>
+              <button class="table-button">删除</button>
+            </td>
+          </tr>
+          <tr>
+            <td>5</td>
+            <td>9.10.33.13</td>
+            <td><input class="remarks" placeholder="请输入备注" /></td>
+            <td>
+              <button class="table-button">删除</button>
+            </td>
+          </tr>
+          <tr>
+            <td>6</td>
+            <td>9.10.33.13</td>
+            <td><input class="remarks" placeholder="请输入备注" /></td>
+            <td>
+              <button class="table-button">删除</button>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </q-page>
+  <div id="fade" class="black_overlay"></div>
+  <div>
+    <q-card id="light" class="pop-win">
+      <q-card-section class="row" style="justify-content: space-between">
+        <div class="card-title">基本信息</div>
+        <div class="close-card" @click="closeWin"></div>
+      </q-card-section>
+      <div>
+        <div class="essential-info">
+          <a>头像：</a>
+          <q-avatar size="100px" style="margin-left: 16px">
+            <img src="../assets/personal/head.jpg" />
+          </q-avatar>
+        </div>
+        <div class="essential-info">
+          <a>昵称：</a>
+          <input
+            class="info-input"
+            placeholder="请输入"
+            style="margin-top: 24px; margin-bottom: 16px"
+          />
+        </div>
+        <div class="essential-info row">
+          <a>签名：</a>
+          <textarea
+            class="info-input"
+            placeholder="请输入"
+            style="height: 100px"
+          ></textarea>
+        </div>
+      </div>
+      <!-- --------------------------- -->
+      <div class="row" style="position: absolute; bottom: 0px; left: 30%">
+        <button class="button-add-chart-no" @click="closeWin">取消</button>
+        <button class="button-add-chart-yes">确定</button>
+      </div>
+    </q-card>
+    <q-card id="card-password" class="pop-win" style="height: 320px">
+      <q-card-section class="row" style="justify-content: space-between">
+        <div class="card-title">修改密码</div>
+        <div class="close-card" @click="closeWinpass"></div>
+      </q-card-section>
+      <div>
+        <div class="essential-info">
+          <a>旧密码</a>
+          <input
+            class="info-password"
+            placeholder="--请输入--"
+            style="margin-top: 24px; margin-left: 44px"
+          />
+        </div>
+        <div class="essential-info">
+          <a>新密码</a>
+          <input
+            class="info-password"
+            placeholder="--请输入--"
+            style="margin-left: 44px"
+          />
+        </div>
+        <div class="essential-info">
+          <a>确认新密码</a>
+          <input class="info-password" placeholder="--请输入--" />
+        </div>
+      </div>
+      <!-- --------------------------- -->
+      <div class="row" style="position: absolute; bottom: 0px; left: 30%">
+        <button class="button-add-chart-no" @click="closeWinpass">取消</button>
+        <button class="button-add-chart-yes">确定</button>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script src="../js/personal.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/personal.css";
+</style>
+    
\ No newline at end of file
diff --git a/UI2.0/src/pages/Realtime-information.vue b/UI2.0/src/pages/Realtime-information.vue
index d6f42407b1c82e32759a146605e0f2b20b15e3e6..ccb0a98deaf97ca4a753497f62b081b5a1746763 100644
--- a/UI2.0/src/pages/Realtime-information.vue
+++ b/UI2.0/src/pages/Realtime-information.vue
@@ -1,37 +1,17 @@
 <template>
   <q-page>
-    <div
-      class="row"
-      style="
-        justify-content: flex-start;
-        width: 1920px;
-        background-color: #f1f2f6;
-      "
-    >
-      <a
-        style="
-          color: #222222;
-          font-size: 20px;
-          margin: 24px 0px 16px 32px;
-          font-weight: bold;
-        "
-        >数据实时监控</a
-      >
-      <div
-        class="col-12 col-module"
-        style="
-          width: 1856px;
-          height: 108px;
-          margin: 0px 32px 32px 32px;
-          background-color: #ffffff;
-        "
-      >
-        <div class="row" style="margin-top: 32px;justify-content:space-between;">
+    <div class="row model-realtime">
+      <a>数据实时监控</a>
+      <div class="col-12 model-realtime-a" style="width: 1856px">
+        <div
+          class="row"
+          style="margin-top: 32px; justify-content: space-between"
+        >
           <div class="row" style="margin-left: 32px">
             <div>
               <a>分类:</a>
               <select class="select-first">
-                <option disabled selected hidden>--请选择--</option>
+                <option disabled selected hidden>Item1</option>
                 <option>选项1</option>
                 <option>选项2</option>
                 <option>选项3</option>
@@ -40,7 +20,7 @@
             <div>
               <a>参数:</a>
               <select class="select-first">
-                <option disabled selected hidden>--请选择--</option>
+                <option disabled selected hidden>Item1</option>
                 <option>选项1</option>
                 <option>选项2</option>
                 <option>选项3</option>
@@ -49,7 +29,7 @@
             <div>
               <a>区间:</a>
               <select class="select-first">
-                <option disabled selected hidden>--请选择--</option>
+                <option disabled selected hidden>Item1</option>
                 <option>选项1</option>
                 <option>选项2</option>
                 <option>选项3</option>
@@ -58,68 +38,68 @@
             <div>
               <a>周期:</a>
               <select class="select-first">
-                <option disabled selected hidden>--请选择--</option>
+                <option disabled selected hidden>Item1</option>
                 <option>选项1</option>
                 <option>选项2</option>
                 <option>选项3</option>
               </select>
             </div>
             <div>
-              <a>图表样式:</a>
+              <a>图标样式:</a>
               <select class="select-first">
-                <option disabled selected hidden>--请选择--</option>
+                <option disabled selected hidden>Item1</option>
                 <option>选项1</option>
                 <option>选项2</option>
                 <option>选项3</option>
               </select>
             </div>
           </div>
-          <button class="btn-submit">提交</button>
         </div>
       </div>
-      <div
-        class="col-12 col-module"
-        style="
-          width: 1856px;
-          height: 900px;
-          margin: 0px 32px 32px 32px;
-          background-color: #ffffff;
-        "
-      >
-        <div style="margin-top: 32px">暂无数据</div>
+      <div class="col-12 echarts-model" style="width: 1856px; height: 900px">
+        <div class="row" style="margin: 32px 16px 0px 32px">
+          <div class="module-size">
+            <div class="row picture-alignment">
+              <div class="title">图1</div>
+              <div class="control-delete"></div>
+            </div>
+            <div id="main2" class="col echarts-element"></div>
+          </div>
+          <div class="module-size">
+            <div class="row picture-alignment">
+              <div class="title">图2</div>
+              <div class="control-delete"></div>
+            </div>
+            <div id="main4" class="col echarts-element"></div>
+          </div>
+          <div class="module-size">
+            <div class="row picture-alignment">
+              <div class="title">图3</div>
+              <div class="control-delete"></div>
+            </div>
+            <div id="main1" class="col echarts-element"></div>
+          </div>
+          <div class="module-size">
+            <div class="row picture-alignment">
+              <div class="title">图4</div>
+              <div class="control-delete"></div>
+            </div>
+            <div id="main3" class="col echarts-element"></div>
+          </div>
+        </div>
+        <img
+          alt="No information"
+          src="../assets/realtime-information/no-information.png"
+          style="margin-top: 20%; margin-left: 42%; display: none"
+        />
       </div>
     </div>
   </q-page>
 </template>
 
-<script>
-</script>
+<script src="../js/realtime-information.js" language="JavaScript" type="text/javascript"></script>
 
 <style scoped>
-.col-module {
-  background-color: #f1f2f6;
-}
-.select-first {
-  margin: 0px 32px 0px 8px;
-  padding: 0px 16px;
-  height: 32px;
-  width: 210px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  color: #222222;
-  font-size: 14px;
-  outline: none;
-}
-.btn-submit {
-  border-radius: 4px;
-  margin-right: 32px;
-  height: 32px;
-  width: 110px;
-  background-color: #3781de;
-  color: #ffffff;
-  font-size: 14px;
-  border: 1px solid #3781de;
-  cursor: pointer;
-}
+@import "../css/realtime-information.css";
 </style>
     
\ No newline at end of file
diff --git a/UI2.0/src/pages/Register.vue b/UI2.0/src/pages/Register.vue
index 6cfe74b85649b237ca0239052f5e11cdd87959d7..5edfcfa377b90fa9f97edb8dca2129a0c3ce5c40 100644
--- a/UI2.0/src/pages/Register.vue
+++ b/UI2.0/src/pages/Register.vue
@@ -1,25 +1,26 @@
 <template>
   <q-page>
     <div class="row">
-      <!-- style="height: 150px" -->
       <div class="col-12 col-mod-a row" style="height: 800px; width: 1920px">
         <div class="col">
           <img
             alt="A-Tune piciure"
             src="~assets/login-picture.jpg"
-            style="width: 800px; height: 700px; margin-top: 60px; margin-left: 200px"
+            style="
+              width: 800px;
+              height: 700px;
+              margin-top: 60px;
+              margin-left: 200px;
+            "
           />
         </div>
-
-        <q-card class="login-card">
+        <q-card class="register-card">
           <q-card-section>
             <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
               <div class="text-center text-h5 q-py-md">注册</div>
               <q-input outlined placeholder="请输入邮箱" />
               <q-input outlined placeholder="请输入用户名" />
               <q-input outlined placeholder="请输入密码" />
-              <!-- lazy-rules :rules="[(val) => (val && val.length > 0) || '请输入密码']" -->
-              
               <div>
                 <q-btn
                   unelevated
@@ -37,15 +38,13 @@
                   style="margin-top: 20px; justify-content: flex-end"
                 >
                   <div style="font-size: 14px">已有账号？</div>
-                  <div style="color: #3781de; font-size: 14px" @click="onLoginClick">点击登录</div>
+                  <div
+                    style="color: #3781de; font-size: 14px"
+                    @click="onLoginClick"
+                  >
+                    点击登录
+                  </div>
                 </div>
-                <!-- <q-btn
-                  label="Reset"
-                  type="reset"
-                  color="primary"
-                  flat
-                  class="q-ml-sm"
-                /> -->
               </div>
             </q-form>
           </q-card-section>
@@ -55,40 +54,8 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent, ref } from "vue";
-
-export default defineComponent({
-  methods: {
-    onSubmit() {},
-    onLoginClick() {
-      this.$router.push({
-        path: "/login",
-      });
-    },
-    
-  },
-});
-</script>
+<script src="../js/register.js" language="JavaScript" type="text/javascript"></script>
 
-<style>
-.col-mod-a {
-  background-color: #f1f2f6;
-  /* #F3F4F8 */
-}
-.login-Interface {
-  height: 300px;
-  width: 200px;
-  background-color: #fff;
-  border-radius: 3px;
-  box-shadow: 2px 2px 5px 2px #c2d9f8;
-  margin: 40px 80px;
-}
-.login-card {
-  width: 400px;
-  height: 440px;
-  margin: 180px 250px;
-}
+<style scoped>
+@import "../css/register.css";
 </style>
-          
-    
\ No newline at end of file
diff --git a/UI2.0/src/router/routes.js b/UI2.0/src/router/routes.js
index 71d6ab3622fb195c54b0bef23db0956f633d1bed..5bb174f82c5ee3c23b2050b82e484260ef1dc504 100644
--- a/UI2.0/src/router/routes.js
+++ b/UI2.0/src/router/routes.js
@@ -56,7 +56,27 @@ const routes = [
       { path: '', component: () => import('pages/Contact-us.vue') }
     ]
   },
-
+  {
+    path: '/personal',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Personal.vue') }
+    ]
+  },
+  {
+    path: '/offline',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Offline-tuning.vue') }
+    ]
+  },
+  {
+    path: '/online',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Online-tuning.vue') }
+    ]
+  },
   // Always leave this as last one,
   // but you can also remove it
   {