diff --git a/src/App.vue b/src/App.vue
index 8e886b3..0b5a581 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,6 +53,10 @@ export default {
   font-family: 'DIN-Bold';
   src: url('@/assets/fonts/DIN-Bold.otf') format('opentype');
 }
+@font-face {
+  font-family: 'YouSheBiaoTiHei';
+  src: url('@/assets/fonts/YouSheBiaoTiHei.ttf') format('opentype');
+}
 
 .numFont {
   font-family: 'DIN-Bold';
@@ -63,7 +67,7 @@ export default {
   text-decoration: none;
   list-style: none;
   color: #fff;
-  font-family: Microsoft YaHei;
+  font-family: 'YouSheBiaoTiHei', Microsoft YaHei;
 }
 .app {
   width: 100%;
diff --git a/src/assets/fonts/YouSheBiaoTiHei.ttf b/src/assets/fonts/YouSheBiaoTiHei.ttf
new file mode 100644
index 0000000..3729151
Binary files /dev/null and b/src/assets/fonts/YouSheBiaoTiHei.ttf differ
diff --git a/src/assets/fonts/iconfont.css b/src/assets/fonts/iconfont.css
new file mode 100644
index 0000000..9576da4
--- /dev/null
+++ b/src/assets/fonts/iconfont.css
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1701073554125') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-youjiantou:before {
+  content: "\e619";
+}
+
diff --git a/src/assets/fonts/iconfont.ttf b/src/assets/fonts/iconfont.ttf
new file mode 100644
index 0000000..d6d1bd8
Binary files /dev/null and b/src/assets/fonts/iconfont.ttf differ
diff --git a/src/assets/scss/pxtovh.scss b/src/assets/scss/pxtovh.scss
new file mode 100644
index 0000000..11f90f5
--- /dev/null
+++ b/src/assets/scss/pxtovh.scss
@@ -0,0 +1,3 @@
+@function vh($px) {
+  @return $px/1080 * 100vh;
+}
\ No newline at end of file
diff --git a/src/assets/svg/blueBox.svg b/src/assets/svg/blueBox.svg
new file mode 100644
index 0000000..1726fd0
--- /dev/null
+++ b/src/assets/svg/blueBox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="142" height="162" viewBox="0 0 142 162"><defs><linearGradient x1="0.5" y1="1" x2="0.5" y2="0" id="master_svg0_134_09601"><stop offset="0%" stop-color="#000000" stop-opacity="0.10196078568696976"/><stop offset="100%" stop-color="#23FFFC" stop-opacity="0.10196078568696976"/></linearGradient></defs><g><g transform="matrix(-1,0,0,1,282,0)"><path d="M141,161L273.473,161L281,152.695L281,1L195.1936,1L189.4229,7.36678L183.6523,13.7336L150.03226,13.7336L141,26.4671L141,161Z" fill="url(#master_svg0_134_09601)" fill-opacity="1"/><path d="M194.9719,0.5L189.0525,7.031L183.4307,13.2336L149.77391,13.2336L140.5,26.3078L140.5,161.5L273.695,161.5L281.5,152.888L281.5,0.5L194.9719,0.5ZM183.874,14.2336L189.7934,7.70256L195.4152,1.5L280.5,1.5L280.5,152.503L273.251,160.5L141.5,160.5L141.5,26.6265L150.29061,14.2336L183.874,14.2336Z" fill-rule="evenodd" fill="#094277" fill-opacity="1"/></g><g><g><path d="M97,1C97,1,102,1,102,1C102,1,109,8.15967,109,8.15967C109,8.15967,104,8.15967,104,8.15967C104,8.15967,97,1,97,1Z" fill="#0592FF" fill-opacity="1"/></g><g><path d="M106,1C106,1,111,1,111,1C111,1,118,8.15967,118,8.15967C118,8.15967,113,8.15967,113,8.15967C113,8.15967,106,1,106,1Z" fill="#0592FF" fill-opacity="1"/></g><g><path d="M115,1C115,1,120,1,120,1C120,1,127,8.15967,127,8.15967C127,8.15967,122,8.15967,122,8.15967" fill="#0592FF" fill-opacity="1"/></g></g><g><g><path d="M2,2L13,2L13,0L0,0L0,13L2,13L2,2Z" fill-rule="evenodd" fill="#0592FF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,282,322)"><path d="M142,162L153,162L153,160L140,160L140,173L142,173L142,162Z" fill-rule="evenodd" fill="#0592FF" fill-opacity="1"/></g><g><path d="M8.08579,162L16.5,162L16.5,160L8.91421,160L2,153.08579L2,145L0,145L0,153.91421L8.08579,162Z" fill-rule="evenodd" fill="#0592FF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/blueTriangle.svg b/src/assets/svg/blueTriangle.svg
new file mode 100644
index 0000000..afe1aa4
--- /dev/null
+++ b/src/assets/svg/blueTriangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="22" viewBox="0 0 20 22"><defs><linearGradient x1="0.02499999664723873" y1="0.04545453190803528" x2="0.9749999642372131" y2="0.9999999403953552" id="master_svg0_134_10672"><stop offset="0%" stop-color="#3C88E3" stop-opacity="1"/><stop offset="100%" stop-color="#9FDAF8" stop-opacity="1"/></linearGradient><linearGradient x1="0.02499999664723873" y1="0.04545453563332558" x2="0.875" y2="1" id="master_svg1_134_10669"><stop offset="0%" stop-color="#002F60" stop-opacity="1"/><stop offset="100%" stop-color="#62B3EE" stop-opacity="1"/></linearGradient></defs><g><g><path d="M0,0C0,0,20,11,20,11C20,11,7,11,7,11C7,11,0,0,0,0C0,0,0,0,0,0Z" fill="url(#master_svg0_134_10672)" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,44)"><path d="M0,22C0,22,20,33,20,33C20,33,7,33,7,33C7,33,0,22,0,22C0,22,0,22,0,22Z" fill="url(#master_svg1_134_10669)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/endIcon.svg b/src/assets/svg/endIcon.svg
new file mode 100644
index 0000000..9634728
--- /dev/null
+++ b/src/assets/svg/endIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_117_09893"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#67C23A" stop-opacity="0.1899999976158142"/><stop offset="99.28571581840515%" stop-color="#67C23A" stop-opacity="0.6200000047683716"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_117_06339"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#67C23A" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_06825"><stop offset="0%" stop-color="#67C23A" stop-opacity="0.6600000262260437"/><stop offset="100%" stop-color="#37A700" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_117_06331"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#67C23A" stop-opacity="1"/></linearGradient><filter id="master_svg4_134_13653" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="18.399999618530273" height="17.310344696044922"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_117_07967"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#D8FFC5" stop-opacity="1"/><stop offset="100%" stop-color="#67C23A" stop-opacity="1"/></linearGradient></defs><g><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_117_09893)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_117_06339)" fill-opacity="1"/></g><g><path d="M13.000025183563233,3.888885498046875C13.000025183563233,3.888885498046875,22.629695183563232,9.444465498046874,22.629695183563232,9.444465498046874C22.629695183563232,9.444465498046874,22.629695183563232,20.555585498046874,22.629695183563232,20.555585498046874C22.629695183563232,20.555585498046874,13.000025183563233,26.111085498046876,13.000025183563233,26.111085498046876C13.000025183563233,26.111085498046876,3.3703951835632324,20.555585498046874,3.3703951835632324,20.555585498046874C3.3703951835632324,20.555585498046874,3.3703951835632324,9.444465498046874,3.3703951835632324,9.444465498046874C3.3703951835632324,9.444465498046874,13.000025183563233,3.888885498046875,13.000025183563233,3.888885498046875Z" fill="url(#master_svg2_117_06825)" fill-opacity="1"/><path d="M22.629695183563232,20.555585498046874L22.629695183563232,9.444465498046874L13.000025183563233,3.888885498046875L3.3703951835632324,9.444465498046874L3.3703951835632324,20.555585498046874L13.000025183563233,26.111085498046876L22.629695183563232,20.555585498046874ZM4.370395183563232,10.022025498046876L13.000025183563233,5.043375498046875L21.629695183563232,10.022025498046876L21.629695183563232,19.977985498046873L13.000025183563233,24.956585498046874L4.370395183563232,19.977985498046873L4.370395183563232,10.022025498046876Z" fill-rule="evenodd" fill="url(#master_svg3_117_06331)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_134_13653)"><path d="M15.961836082000733,18.29884817626953L16.80236608200073,19.084878176269534L16.05717608200073,19.78174817626953L16.47493608200073,20.17240817626953L18.38306608200073,18.38800817626953L17.96530608200073,17.99851817626953L17.265286082000735,18.646108176269532L16.429776082000732,17.86594817626953L15.961836082000733,18.29884817626953ZM8.940267082000732,10.862068176269531L8.940267082000732,11.73256617626953L10.379206082000731,13.078198176269531L10.243716082000732,14.514168176269532L11.079226082000732,15.30137817626953L11.682656082000733,14.73590817626953L12.010086082000733,15.036238176269531L11.406656082000733,15.60170817626953L11.740366082000733,15.919638176269531L12.345046082000732,15.354168176269532L12.672476082000731,15.66153817626953L12.069046082000732,16.22583817626953L12.402756082000732,16.537908176269532L13.012446082000732,15.973608176269531L13.333606082000731,16.279808176269533L12.730186082000731,16.84410817626953L13.070156082000732,17.15734817626953L13.674836082000732,16.591868176269532L13.995996082000733,16.898068176269533L13.392576082000733,17.46354817626953L13.732546082000733,17.78147817626953L14.335976082000732,17.211308176269533L14.663406082000733,17.51750817626953L14.053706082000733,18.081808176269533L14.566806082000731,18.56280817626953L14.053706082000733,19.04263817626953L14.425046082000733,19.39107817626953L17.592716082000734,16.429968176269533L17.220126082000732,16.081538176269532L16.70702608200073,16.56254817626953L12.383936082000734,12.513908176269531L10.848396082000733,12.645298176269531L8.940267082000732,10.862068176269531ZM7.983066082000732,16.189468176269532C7.983066082000732,16.682208176269533,8.413368082000732,17.084608176269533,8.940267082000732,17.084608176269533C9.467166082000732,17.084608176269533,9.897466082000733,16.682208176269533,9.897466082000733,16.189468176269532C9.897466082000733,15.69673817626953,9.287766082000733,14.772268176269531,8.940267082000732,14.177468176269532C8.567674082000732,14.772268176269531,7.983066082000732,15.69673817626953,7.983066082000732,16.189468176269532Z" fill="url(#master_svg5_117_07967)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/endRoom.svg b/src/assets/svg/endRoom.svg
new file mode 100644
index 0000000..72b510c
--- /dev/null
+++ b/src/assets/svg/endRoom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="137" height="107" viewBox="0 0 137 107"><defs><filter id="master_svg0_134_13667" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="136.002197265625" height="106"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.40392157435417175 0 0 0 0 0.7607843279838562 0 0 0 0 0.22745098173618317 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_123_00043"><stop offset="0%" stop-color="#004880" stop-opacity="0"/><stop offset="99.98999834060669%" stop-color="#004A80" stop-opacity="0.3499999940395355"/><stop offset="100%" stop-color="#004A80" stop-opacity="0.3499999940395355"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_00562"><stop offset="0%" stop-color="#006DAB" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#00669F" stop-opacity="1"/></linearGradient><linearGradient x1="-2.032271242567371e-14" y1="0.9999873042106628" x2="0.9840425848960876" y2="0.9999790191650391" id="master_svg3_117_02771"><stop offset="0%" stop-color="#006DAB" stop-opacity="0"/><stop offset="51.5625%" stop-color="#006DAB" stop-opacity="1"/><stop offset="100%" stop-color="#006DAB" stop-opacity="0"/></linearGradient></defs><g><g filter="url(#master_svg0_134_13667)"><path d="M136.356,0.5C136.356,0.5,0.5,0.5,0.5,0.5C0.5,0.5,0.50219727,101.133,0.50219727,101.133C0.50219727,101.133,8.5022,106.5,8.5022,106.5C8.5022,106.5,17.482,106.5,17.482,106.5C17.482,106.5,34.4641,106.5,34.4641,106.5C34.4641,106.5,68.4282,106.5,68.4282,106.5C68.4282,106.5,102.392,106.5,102.392,106.5C102.392,106.5,119.374,106.5,119.374,106.5C119.374,106.5,127.502,106.5,127.502,106.5C127.502,106.5,136.502,101.133,136.502,101.133C136.502,101.133,136.356,0.5,136.356,0.5Z" fill="url(#master_svg1_123_00043)" fill-opacity="1"/><path d="M0.5,0.5L136.356,0.5L136.502,101.133L127.502,106.5L8.5022,106.5L0.50219727,101.133L0.5,2.5L0.5,0.5ZM134.359,2.5L134.501,99.998L126.951,104.5L9.11093,104.5L2.50217,100.0663L2.50004,2.5L134.359,2.5Z" fill-rule="evenodd" fill="url(#master_svg2_117_00562)" fill-opacity="1"/></g><g><g><path d="M1,1L8.5,1L8.5,0L0,0L0,8.5L1,8.5L1,1Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,213)"><path d="M9.65218,107L18.5,107L18.5,106L9.34782,106L0,112.27132L0,118.5759L1,118.5759L1,112.80463L5.27856,109.9342L9.65218,107Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,273,213)"><path d="M145.65218,107L154.5,107L154.5,106L145.34782,106L136,112.27132L136,118.5759L137,118.5759L137,112.80463L141.27856,109.9342L145.65218,107Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,273,0)"><path d="M137,1L144.5,1L144.5,0L136,0L136,8.5L137,8.5L137,1Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g></g><g><g transform="matrix(0,1,-1,0,54,35)"><path d="M14,44.5L17.897109999999998,51.25L10.102886,51.25L14,44.5Z" fill="#388764" fill-opacity="1"/></g><g><rect x="4.5" y="48.5" width="128" height="1" rx="0" fill="url(#master_svg3_117_02771)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,83,-83)"><path d="M132,44.5L135.89711,51.25L128.102886,51.25L132,44.5Z" fill="#388764" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/greenBox.svg b/src/assets/svg/greenBox.svg
new file mode 100644
index 0000000..3a3ead0
--- /dev/null
+++ b/src/assets/svg/greenBox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="490" height="162" viewBox="0 0 490 162"><defs><linearGradient x1="0.5" y1="1" x2="0.5" y2="0" id="master_svg0_134_09601"><stop offset="0%" stop-color="#000000" stop-opacity="0.10196078568696976"/><stop offset="100%" stop-color="#23FFFC" stop-opacity="0.10196078568696976"/></linearGradient></defs><g><g transform="matrix(-1,0,0,1,978,0)"><path d="M489,161L969.4649999999999,161L977,153.474L977,1L553.0531,1L547.2766,6.7699L541.5,12.5398L498.04149,12.5398L489,24.0796L489,161Z" fill="url(#master_svg0_134_09601)" fill-opacity="1"/><path d="M552.8462,0.5L546.9233,6.41614L541.2931,12.0398L497.79805,12.0398L488.5,23.907L488.5,161.5L969.672,161.5L977.5,153.681L977.5,0.5L552.8462,0.5ZM541.7069,13.0398L547.63,7.12366L553.26,1.5L976.5,1.5L976.5,153.267L969.258,160.5L489.5,160.5L489.5,24.2521L498.28493,13.0398L541.7069,13.0398Z" fill-rule="evenodd" fill="#055843" fill-opacity="1"/></g><g><g><path d="M434,1C434,1,439,1,439,1C439,1,446,8.15967,446,8.15967C446,8.15967,441,8.15967,441,8.15967C441,8.15967,434,1,434,1Z" fill="#67C23A" fill-opacity="1"/></g><g><path d="M443,1C443,1,448,1,448,1C448,1,455,8.15967,455,8.15967C455,8.15967,450,8.15967,450,8.15967C450,8.15967,443,1,443,1Z" fill="#67C23A" fill-opacity="1"/></g><g><path d="M461,1C461,1,466,1,466,1C466,1,473,8.15967,473,8.15967C473,8.15967,468,8.15967,468,8.15967C468,8.15967,461,1,461,1Z" fill="#67C23A" fill-opacity="1"/></g><g><path d="M452,1C452,1,457,1,457,1C457,1,464,8.15967,464,8.15967C464,8.15967,459,8.15967,459,8.15967" fill="#67C23A" fill-opacity="1"/></g></g><g><g transform="matrix(-1,0,0,-1,978,322)"><path d="M490,162L501,162L501,160L488,160L488,173L490,173L490,162Z" fill-rule="evenodd" fill="#67C23A" fill-opacity="1"/></g><g><path d="M2,2L13,2L13,0L0,0L0,13L2,13L2,2Z" fill-rule="evenodd" fill="#67C23A" fill-opacity="1"/></g><g><path d="M8.08579,162L16.5,162L16.5,160L8.91421,160L2,153.08579L2,145L0,145L0,153.91421L8.08579,162Z" fill-rule="evenodd" fill="#67C23A" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/greenPoint.svg b/src/assets/svg/greenPoint.svg
new file mode 100644
index 0000000..e05de87
--- /dev/null
+++ b/src/assets/svg/greenPoint.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="17" height="20.5" viewBox="0 0 17 20.5"><defs><filter id="master_svg0_134_13328" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-4" width="18" height="18"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_134_11765"><stop offset="0%" stop-color="#03F0B4" stop-opacity="1"/><stop offset="100%" stop-color="#6FB6FA" stop-opacity="0"/></linearGradient><filter id="master_svg2_134_13327" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-8" y="-4" width="21" height="21"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4" dx="0"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><g><g filter="url(#master_svg0_134_13328)"><ellipse cx="8.5" cy="8" rx="5" ry="5" fill="url(#master_svg1_134_11765)" fill-opacity="1"/></g><g filter="url(#master_svg2_134_13327)"><ellipse cx="8.5" cy="8" rx="2.5" ry="2.5" fill="#03F0B4" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/greenTriangle.svg b/src/assets/svg/greenTriangle.svg
new file mode 100644
index 0000000..7bc0570
--- /dev/null
+++ b/src/assets/svg/greenTriangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="22" viewBox="0 0 20 22"><defs><linearGradient x1="0.02499999664723873" y1="0.04545453190803528" x2="0.9749999642372131" y2="0.9999999403953552" id="master_svg0_134_12943"><stop offset="0%" stop-color="#42EABF" stop-opacity="1"/><stop offset="100%" stop-color="#9FF8EF" stop-opacity="1"/></linearGradient><linearGradient x1="0.02499999664723873" y1="0.04545453563332558" x2="0.875" y2="1" id="master_svg1_134_12937"><stop offset="0%" stop-color="#00694E" stop-opacity="1"/><stop offset="100%" stop-color="#62EEE9" stop-opacity="1"/></linearGradient></defs><g><g><path d="M0,0C0,0,20,11,20,11C20,11,7,11,7,11C7,11,0,0,0,0C0,0,0,0,0,0Z" fill="url(#master_svg0_134_12943)" fill-opacity="0.800000011920929"/></g><g transform="matrix(1,0,0,-1,0,44)"><path d="M0,22C0,22,20,33,20,33C20,33,7,33,7,33C7,33,0,22,0,22C0,22,0,22,0,22Z" fill="url(#master_svg1_134_12937)" fill-opacity="0.800000011920929"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/opreationIcon.svg b/src/assets/svg/opreationIcon.svg
new file mode 100644
index 0000000..3cc9230
--- /dev/null
+++ b/src/assets/svg/opreationIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_117_09825"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#FF8515" stop-opacity="0.2199999988079071"/><stop offset="100%" stop-color="#FF8515" stop-opacity="0.5099999904632568"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_117_10095"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#FF8515" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_10161"><stop offset="0.7142857182770967%" stop-color="#FFC895" stop-opacity="0.6200000047683716"/><stop offset="100%" stop-color="#FF8515" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_117_09249"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#FF8515" stop-opacity="1"/></linearGradient><filter id="master_svg4_134_13495" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="17.8799991607666" height="16.793103218078613"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_117_08635"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#FFECDB" stop-opacity="1"/><stop offset="100%" stop-color="#FF8515" stop-opacity="1"/></linearGradient><filter id="master_svg6_134_13494" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="16.31999969482422" height="16.275861740112305"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg7_117_08635"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#FFECDB" stop-opacity="1"/><stop offset="100%" stop-color="#FF8515" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_117_09825)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_117_10095)" fill-opacity="1"/></g><g><path d="M13.000025183563233,3.888885498046875C13.000025183563233,3.888885498046875,22.629695183563232,9.444465498046874,22.629695183563232,9.444465498046874C22.629695183563232,9.444465498046874,22.629695183563232,20.555585498046874,22.629695183563232,20.555585498046874C22.629695183563232,20.555585498046874,13.000025183563233,26.111085498046876,13.000025183563233,26.111085498046876C13.000025183563233,26.111085498046876,3.3703951835632324,20.555585498046874,3.3703951835632324,20.555585498046874C3.3703951835632324,20.555585498046874,3.3703951835632324,9.444465498046874,3.3703951835632324,9.444465498046874C3.3703951835632324,9.444465498046874,13.000025183563233,3.888885498046875,13.000025183563233,3.888885498046875Z" fill="url(#master_svg2_117_10161)" fill-opacity="1"/><path d="M22.629695183563232,20.555585498046874L22.629695183563232,9.444465498046874L13.000025183563233,3.888885498046875L3.3703951835632324,9.444465498046874L3.3703951835632324,20.555585498046874L13.000025183563233,26.111085498046876L22.629695183563232,20.555585498046874ZM4.370395183563232,10.022025498046876L13.000025183563233,5.043375498046875L21.629695183563232,10.022025498046876L21.629695183563232,19.977985498046873L13.000025183563233,24.956585498046874L4.370395183563232,19.977985498046873L4.370395183563232,10.022025498046876Z" fill-rule="evenodd" fill="url(#master_svg3_117_09249)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_134_13495)"><path d="M11.02333583404541,19.65400817626953L17.043425834045408,19.65400817626953L17.043425834045408,19.35173817626953L11.33131583404541,19.35173817626953L11.02333583404541,19.65400817626953ZM11.50349583404541,18.45677817626953L12.743885834045411,17.24531817626953L12.00910583404541,17.05447817626953L10.243695834045411,18.78037817626953C10.18196583404541,18.82911817626953,10.09256583404541,18.82446817626953,10.03645583404541,18.76961817626953C9.98035583404541,18.71476817626953,9.97560583404541,18.62736817626953,10.02544583404541,18.56701817626953L11.66475583404541,16.963198176269533L11.10700583404541,16.81739817626953L8.24306583404541,19.655188176269533L9.09181983404541,19.655188176269533C10.45467583404541,19.65281817626953,10.63654583404541,19.305508176269534,11.50349583404541,18.45677817626953ZM18.08860583404541,11.636119176269531C18.040975834045412,11.458936176269532,17.94598583404541,11.29733317626953,17.81336583404541,11.167895176269532C17.68719583404541,11.045224176269532,17.53176583404541,10.95519427626953,17.36110583404541,10.905927076269531C17.18441583404541,10.851823776269532,16.99566583404541,10.847714076269531,16.81668583404541,10.894073376269532C16.63606583404541,10.94235067626953,16.47168583404541,11.036400176269531,16.34017583404541,11.16671017626953L11.27432583404541,16.123958176269532C11.24555583404541,16.15194817626953,11.225395834045411,16.18726817626953,11.21612583404541,16.22589817626953C11.18293583404541,16.34603817626953,11.25569583404541,16.46971817626953,11.37860583404541,16.50208817626953L13.176745834045409,16.976238176269533C13.259655834045411,17.00182817626953,13.35023583404541,16.980378176269532,13.41197583404541,16.92052817626953L17.81457583404541,12.608128176269531C17.937355834045412,12.488248176269531,18.028485834045412,12.34097817626953,18.080115834045408,12.179018176269532C18.13433583404541,12.002318176269531,18.13727583404541,11.81436117626953,18.08860583404541,11.636119176269531Z" fill="url(#master_svg5_117_08635)" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,33.12613296508789,0)" filter="url(#master_svg6_134_13494)"><path d="M23.669226482543944,12.503478176269532C24.335116482543945,12.562848176269531,24.861866482543945,13.10710817626953,24.881746482543946,13.77011817626953C24.911556482543944,14.43311817626953,24.434506482543945,15.016958176269531,23.778546482543945,15.135708176269532C23.122596482543944,15.244558176269532,22.476586482543944,14.858628176269532,22.277806482543944,14.21541817626953L20.965906482543947,16.075788176269533C20.965906482543947,15.986728176269532,20.946026482543946,15.89766817626953,20.896336482543944,15.818508176269532L20.727376482543946,15.511738176269532L22.456706482543947,13.08731817626953C22.725046482543945,12.681598176269532,23.192166482543946,12.463898176269531,23.669226482543944,12.503478176269532ZM17.507241482543947,19.05436817626953C17.397915482543944,19.13352817626953,17.258774482543945,19.16321817626953,17.129571482543945,19.113738176269532C17.030184482543945,19.07415817626953,16.950675482543947,19.00488817626953,16.910920482543947,18.91582817626953C16.871165482543944,18.826768176269532,16.861226482543945,18.71791817626953,16.900981482543944,18.61895817626953C16.930797482543944,18.53979817626953,16.990429482543945,18.470528176269532,17.060000482543945,18.42104817626953L19.097426482543945,16.719008176269533L19.415466482543945,15.858088176269531L20.290076482543945,13.443558176269532C20.230436482543944,13.46334817626953,20.170806482543945,13.473248176269532,20.111176482543947,13.48313817626953C19.385656482543943,13.611788176269531,18.699886482543945,13.126898176269531,18.570676482543945,12.404518176269532C18.441476482543944,11.692037176269531,18.918536482543946,10.99934517626953,19.644056482543945,10.880597476269532C20.121116482543947,10.801432576269532,20.598166482543945,10.979553176269532,20.906266482543945,11.345691176269531C21.214366482543944,11.711828176269531,21.293876482543943,12.216508176269532,21.124916482543945,12.661808176269531L20.230436482543944,15.125808176269532L20.667746482543947,15.93724817626953C20.707496482543945,16.00651817626953,20.717436482543945,16.08568817626953,20.687616482543945,16.15495817626953L20.300006482543946,17.21378817626953C20.280136482543945,17.273158176269533,20.240376482543944,17.322638176269532,20.190686482543946,17.36221817626953L17.507241482543947,19.05436817626953ZM17.616566482543945,17.698668176269532L16.821472482543946,17.83720817626953C16.682330482543946,17.86689817626953,16.563066482543945,17.718458176269532,16.563066482543945,17.57991817626953C16.563066482543945,17.35232817626953,16.642575982543946,17.19399817626953,16.781717482543947,17.08513817626953C16.900981482543944,16.99607817626953,17.030184482543945,16.94660817626953,17.179264482543946,16.90701817626953L18.252646482543945,16.63983817626953L19.007986482543945,16.194538176269532L18.868836482543944,16.58046817626953L17.616566482543945,17.698668176269532ZM20.677676482543944,12.038388176269532C20.637926482543946,11.830576176269531,20.518666482543946,11.64255917626953,20.339766482543943,11.51391617626953C20.160866482543945,11.395169176269532,19.942216482543945,11.345691176269531,19.733506482543945,11.385273176269532C19.524796482543945,11.42485617626953,19.335956482543946,11.543603176269531,19.206756482543945,11.72172417626953C19.087486482543945,11.899848176269531,19.037796482543946,12.117548176269532,19.077556482543944,12.325358176269532C19.167006482543947,12.750868176269531,19.584426482543947,13.037838176269531,20.011786482543947,12.958678176269531C20.449096482543943,12.879508176269532,20.737316482543946,12.473788176269531,20.677676482543944,12.038388176269532ZM23.629466482543947,13.02794817626953C23.410816482543943,13.00814817626953,23.202106482543947,13.077418176269532,23.033146482543945,13.215958176269531C22.864186482543946,13.354498176269532,22.764806482543946,13.55240817626953,22.744926482543946,13.77011817626953C22.725046482543945,13.987818176269531,22.794616482543944,14.195628176269532,22.933766482543945,14.363848176269531C23.072906482543946,14.53207817626953,23.271676482543945,14.631028176269531,23.490326482543946,14.650828176269531C23.708976482543946,14.670618176269532,23.917686482543946,14.601348176269532,24.086646482543944,14.462808176269531C24.255606482543946,14.32426817626953,24.354996482543946,14.12635817626953,24.374866482543943,13.908658176269531C24.394746482543944,13.690948176269531,24.325176482543945,13.48313817626953,24.186036482543944,13.314918176269531C24.036956482543946,13.146688176269532,23.838176482543943,13.037838176269531,23.629466482543947,13.02794817626953ZM20.011786482543947,16.11536817626953C19.922336482543944,16.08568817626953,19.832896482543944,16.08568817626953,19.743446482543945,16.11536817626953L20.220496482543947,16.679418176269532C20.280136482543945,16.58046817626953,20.290076482543945,16.46171817626953,20.250316482543944,16.35286817626953C20.200626482543946,16.24401817626953,20.121116482543947,16.15495817626953,20.011786482543947,16.11536817626953ZM20.011786482543947,16.84764817626953L19.544666482543946,16.283598176269532C19.485036482543947,16.38255817626953,19.475096482543947,16.501298176269533,19.514856482543944,16.610158176269533C19.554606482543946,16.719008176269533,19.644056482543945,16.80806817626953,19.753386482543945,16.84764817626953C19.832896482543944,16.877338176269532,19.932276482543944,16.877338176269532,20.011786482543947,16.84764817626953Z" fill="url(#master_svg7_117_08635)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/opreationRoom.svg b/src/assets/svg/opreationRoom.svg
new file mode 100644
index 0000000..115ac5d
--- /dev/null
+++ b/src/assets/svg/opreationRoom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="137" height="107" viewBox="0 0 137 107"><defs><filter id="master_svg0_134_13483" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="136.002197265625" height="106"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.5215686559677124 0 0 0 0 0.08235294371843338 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_123_00043"><stop offset="0%" stop-color="#004880" stop-opacity="0"/><stop offset="99.98999834060669%" stop-color="#004A80" stop-opacity="0.3499999940395355"/><stop offset="100%" stop-color="#004A80" stop-opacity="0.3499999940395355"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_00562"><stop offset="0%" stop-color="#006DAB" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#00669F" stop-opacity="1"/></linearGradient><linearGradient x1="-2.032271242567371e-14" y1="0.9999873042106628" x2="0.9840425848960876" y2="0.9999790191650391" id="master_svg3_117_02771"><stop offset="0%" stop-color="#006DAB" stop-opacity="0"/><stop offset="51.5625%" stop-color="#006DAB" stop-opacity="1"/><stop offset="100%" stop-color="#006DAB" stop-opacity="0"/></linearGradient></defs><g><g filter="url(#master_svg0_134_13483)"><path d="M136.356,0.5C136.356,0.5,0.5,0.5,0.5,0.5C0.5,0.5,0.50219727,101.133,0.50219727,101.133C0.50219727,101.133,8.5022,106.5,8.5022,106.5C8.5022,106.5,17.482,106.5,17.482,106.5C17.482,106.5,34.4641,106.5,34.4641,106.5C34.4641,106.5,68.4282,106.5,68.4282,106.5C68.4282,106.5,102.392,106.5,102.392,106.5C102.392,106.5,119.374,106.5,119.374,106.5C119.374,106.5,127.502,106.5,127.502,106.5C127.502,106.5,136.502,101.133,136.502,101.133C136.502,101.133,136.356,0.5,136.356,0.5Z" fill="url(#master_svg1_123_00043)" fill-opacity="1"/><path d="M0.5,0.5L136.356,0.5L136.502,101.133L127.502,106.5L8.5022,106.5L0.50219727,101.133L0.5,2.5L0.5,0.5ZM134.359,2.5L134.501,99.998L126.951,104.5L9.11093,104.5L2.50217,100.0663L2.50004,2.5L134.359,2.5Z" fill-rule="evenodd" fill="url(#master_svg2_117_00562)" fill-opacity="1"/></g><g><g><path d="M1,1L8.5,1L8.5,0L0,0L0,8.5L1,8.5L1,1Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,213)"><path d="M9.65218,107L18.5,107L18.5,106L9.34782,106L0,112.27132L0,118.5759L1,118.5759L1,112.80463L5.27856,109.9342L9.65218,107Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,273,213)"><path d="M145.65218,107L154.5,107L154.5,106L145.34782,106L136,112.27132L136,118.5759L137,118.5759L137,112.80463L141.27856,109.9342L145.65218,107Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,273,0)"><path d="M137,1L144.5,1L144.5,0L136,0L136,8.5L137,8.5L137,1Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g></g><g><g transform="matrix(0,1,-1,0,54,35)"><path d="M14,44.5L17.897109999999998,51.25L10.102886,51.25L14,44.5Z" fill="#A57447" fill-opacity="1"/></g><g><rect x="4.5" y="48.5" width="128" height="1" rx="0" fill="url(#master_svg3_117_02771)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,83,-83)"><path d="M132,44.5L135.89711,51.25L128.102886,51.25L132,44.5Z" fill="#A57447" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/waitIcon.svg b/src/assets/svg/waitIcon.svg
new file mode 100644
index 0000000..a37f78d
--- /dev/null
+++ b/src/assets/svg/waitIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_117_5197"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#006EB3" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#2BADFF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_117_06100"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#0592FF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_8563"><stop offset="0%" stop-color="#5AC0FF" stop-opacity="0.7099999785423279"/><stop offset="100%" stop-color="#006EB3" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_123_04088"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#0592FF" stop-opacity="1"/></linearGradient><filter id="master_svg4_134_13691" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="18.007400512695312" height="17.000000953674316"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_117_05970"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#0592FF" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_117_5197)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_117_06100)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_117_8563)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_123_04088)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_134_13691)"><path d="M17.88514783630371,14.30326C17.88514783630371,14.30326,13.517567836303712,10.688013,13.517567836303712,10.688013C13.22025783630371,10.4424042,12.785027836303712,10.4364136,12.481607836303711,10.676033C12.481607836303711,10.676033,8.121705836303711,14.119060000000001,8.121705836303711,14.119060000000001C7.976120036303711,14.23288,7.954665236303711,14.441040000000001,8.071133436303711,14.58182C8.187601836303712,14.72409,8.40061683630371,14.745059999999999,8.544667836303711,14.63124C8.544667836303711,14.63124,8.88794383630371,14.36018,8.88794383630371,14.36018C8.88794383630371,14.36018,8.88794383630371,18.70627,8.88794383630371,18.70627C8.88794383630371,19.14356,9.252677836303711,19.5,9.700157836303712,19.5C9.700157836303712,19.5,11.14068783630371,19.5,11.14068783630371,19.5C11.58817783630371,19.5,11.95289783630371,19.14356,11.95289783630371,18.70627C11.95289783630371,18.70627,11.95289783630371,16.48978,11.95289783630371,16.48978C11.95289783630371,16.414920000000002,12.014207836303711,16.35502,12.09082783630371,16.35502C12.09082783630371,16.35502,13.761217836303711,16.35502,13.761217836303711,16.35502C13.837867836303712,16.35502,13.899137836303712,16.414920000000002,13.899137836303712,16.48978C13.899137836303712,16.48978,13.899137836303712,18.70627,13.899137836303712,18.70627C13.899137836303712,19.14356,14.263907836303712,19.5,14.711377836303711,19.5C14.711377836303711,19.5,16.10590783630371,19.5,16.10590783630371,19.5C16.55342783630371,19.5,16.91814783630371,19.14356,16.91814783630371,18.70627C16.91814783630371,18.70627,16.91814783630371,14.36766,16.91814783630371,14.36766C16.91814783630371,14.36766,17.448377836303713,14.806460000000001,17.448377836303713,14.806460000000001C17.511187836303712,14.85888,17.58938783630371,14.88434,17.66598783630371,14.88434C17.76097783630371,14.88434,17.85601783630371,14.8454,17.92342783630371,14.76753C18.044497836303712,14.62974,18.026097836303713,14.42158,17.88514783630371,14.30326C17.88514783630371,14.30326,17.88514783630371,14.30326,17.88514783630371,14.30326Z" fill="url(#master_svg5_117_05970)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/waitRoom.svg b/src/assets/svg/waitRoom.svg
new file mode 100644
index 0000000..04c7ddf
--- /dev/null
+++ b/src/assets/svg/waitRoom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="137" height="107" viewBox="0 0 137 107"><defs><filter id="master_svg0_134_13680" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="136.002197265625" height="106"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.5686274766921997 0 0 0 0 0.9843137264251709 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_123_00043"><stop offset="0%" stop-color="#004880" stop-opacity="0"/><stop offset="99.98999834060669%" stop-color="#004A80" stop-opacity="0.3499999940395355"/><stop offset="100%" stop-color="#004A80" stop-opacity="0.3499999940395355"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_00562"><stop offset="0%" stop-color="#006DAB" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#00669F" stop-opacity="1"/></linearGradient><linearGradient x1="-2.032271242567371e-14" y1="0.9999873042106628" x2="0.9840425848960876" y2="0.9999790191650391" id="master_svg3_117_02771"><stop offset="0%" stop-color="#006DAB" stop-opacity="0"/><stop offset="51.5625%" stop-color="#006DAB" stop-opacity="1"/><stop offset="100%" stop-color="#006DAB" stop-opacity="0"/></linearGradient></defs><g><g filter="url(#master_svg0_134_13680)"><path d="M136.356,0.5C136.356,0.5,0.5,0.5,0.5,0.5C0.5,0.5,0.50219727,101.133,0.50219727,101.133C0.50219727,101.133,8.5022,106.5,8.5022,106.5C8.5022,106.5,17.482,106.5,17.482,106.5C17.482,106.5,34.4641,106.5,34.4641,106.5C34.4641,106.5,68.4282,106.5,68.4282,106.5C68.4282,106.5,102.392,106.5,102.392,106.5C102.392,106.5,119.374,106.5,119.374,106.5C119.374,106.5,127.502,106.5,127.502,106.5C127.502,106.5,136.502,101.133,136.502,101.133C136.502,101.133,136.356,0.5,136.356,0.5Z" fill="url(#master_svg1_123_00043)" fill-opacity="1"/><path d="M0.5,0.5L136.356,0.5L136.502,101.133L127.502,106.5L8.5022,106.5L0.50219727,101.133L0.5,2.5L0.5,0.5ZM134.359,2.5L134.501,99.998L126.951,104.5L9.11093,104.5L2.50217,100.0663L2.50004,2.5L134.359,2.5Z" fill-rule="evenodd" fill="url(#master_svg2_117_00562)" fill-opacity="1"/></g><g><g><path d="M1,1L8.5,1L8.5,0L0,0L0,8.5L1,8.5L1,1Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,213)"><path d="M9.65218,107L18.5,107L18.5,106L9.34782,106L0,112.27132L0,118.5759L1,118.5759L1,112.80463L5.27856,109.9342L9.65218,107Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,273,213)"><path d="M145.65218,107L154.5,107L154.5,106L145.34782,106L136,112.27132L136,118.5759L137,118.5759L137,112.80463L141.27856,109.9342L145.65218,107Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,273,0)"><path d="M137,1L144.5,1L144.5,0L136,0L136,8.5L137,8.5L137,1Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g></g><g><g transform="matrix(0,1,-1,0,54,35)"><path d="M14,44.5L17.897109999999998,51.25L10.102886,51.25L14,44.5Z" fill="#006DAB" fill-opacity="1"/></g><g><rect x="4.5" y="48.5" width="128" height="1" rx="0" fill="url(#master_svg3_117_02771)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,83,-83)"><path d="M132,44.5L135.89711,51.25L128.102886,51.25L132,44.5Z" fill="#006DAB" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/views/pageMonitor/bottomLeft/index.vue b/src/views/pageMonitor/bottomLeft/index.vue
index e623723..5b54ef8 100644
--- a/src/views/pageMonitor/bottomLeft/index.vue
+++ b/src/views/pageMonitor/bottomLeft/index.vue
@@ -4,11 +4,11 @@
       <div class="chartsBox">
         <div class="chartItem">
           <p>手术等级</p>
-          <dv-charts :option="option1"></dv-charts>
+          <div class="echartsContainer" ref="echartsContainerLeft"></div>
         </div>
         <div class="chartItem">
           <p>ASA分级</p>
-          <dv-charts :option="option2"></dv-charts>
+          <div class="echartsContainer" ref="echartsContainerRight"></div>
         </div>
       </div>
     </dv-border-box-13>
@@ -16,83 +16,71 @@
 </template>
 
 <script>
+import * as echarts from 'echarts';
 export default {
   data() {
     return {
-      option1: {
+      nowIndex: 0,
+      chartOptionsLeft: {
         series: [
           {
             type: 'pie',
-            radius: ['32%', '44%'],
+            radius: ['32%', '50%'],
+            selectedMode: 'single',
             data: [
-              {
-                name: '一级',
-                value: 148,
-              },
-              {
-                name: '二级',
-                value: 87,
-              },
-              {
-                name: '三级',
-                value: 75,
-              },
-              {
-                name: '四级',
-                value: 40,
-              },
+              { name: '一级', value: 148, selected: true },
+              { name: '二级', value: 87, selected: false },
+              { name: '三级', value: 75, selected: false },
+              { name: '四级', value: 40, selected: false },
             ],
-            outsideLabel: {
-              formatter: '{name}{value}',
-              labelLineBendGap: '8%',
-              labelLineEndLength: 10,
-              style: {
-                fontSize: 16,
-              },
+            label: {
+              formatter: '{b}{c}',
+              color: 'inherit',
             },
           },
         ],
       },
-      option2: {
+      chartOptionsRight: {
         series: [
           {
             type: 'pie',
-            radius: ['32%', '44%'],
+            radius: ['32%', '50%'],
+            selectedMode: 'single',
             data: [
-              {
-                name: 'I级',
-                value: 137,
-              },
-              {
-                name: 'II级',
-                value: 105,
-              },
-              {
-                name: 'III级',
-                value: 58,
-              },
-              {
-                name: 'IV级',
-                value: 37,
-              },
-              {
-                name: 'V级',
-                value: 13,
-              },
+              { name: 'I级', value: 137, selected: true },
+              { name: 'II级', value: 105, selected: false },
+              { name: 'III级', value: 58, selected: false },
+              { name: 'IV级', value: 37, selected: false },
+              { name: 'V级', value: 13, selected: false },
             ],
-            outsideLabel: {
-              formatter: '{name}{value}',
-              labelLineBendGap: '8%',
-              labelLineEndLength: 10,
-              style: {
-                fontSize: 16,
-              },
+            label: {
+              formatter: '{b}{c}',
+              color: 'inherit',
             },
           },
         ],
       },
     };
   },
+  mounted() {
+    const echartsContainerLeft = this.$refs.echartsContainerLeft;
+    const chartLeft = echarts.init(echartsContainerLeft);
+    chartLeft.setOption(this.chartOptionsLeft);
+    const echartsContainerRight = this.$refs.echartsContainerRight;
+    const chartRight = echarts.init(echartsContainerRight);
+    chartRight.setOption(this.chartOptionsRight);
+    setInterval(() => {
+      let lastIndex = this.nowIndex++;
+      const leftData = this.chartOptionsLeft['series'][0]['data'];
+      leftData[lastIndex % 4]['selected'] = false;
+      leftData[this.nowIndex % 4]['selected'] = true;
+      chartLeft.setOption(this.chartOptionsLeft,true);
+      const rightData = this.chartOptionsRight['series'][0]['data'];
+      rightData[lastIndex % 5]['selected'] = false;
+      rightData[this.nowIndex % 5]['selected'] = true;
+      chartRight.setOption(this.chartOptionsRight,true);
+    }, 2000);
+  },
 };
 </script>
 
@@ -117,7 +105,7 @@ export default {
         text-align: center;
         letter-spacing: 0.1vh;
       }
-      :deep(.dv-charts-container) {
+      .echartsContainer {
         height: 90%;
       }
     }
diff --git a/src/views/pageMonitor/topLeft/index.vue b/src/views/pageMonitor/topLeft/index.vue
index e560836..7df43d8 100644
--- a/src/views/pageMonitor/topLeft/index.vue
+++ b/src/views/pageMonitor/topLeft/index.vue
@@ -1,25 +1,50 @@
 <template>
   <div class="topLeft">
     <dv-border-box-13>
-      <div class="box">
-        <dv-border-box-2 class="item">
-          <p class="active numFont">80%</p>
-          <p>首台准点率</p>
-        </dv-border-box-2>
-        <dv-border-box-2 class="item">
-          <p class="active numFont">86%</p>
-          <p>手术间利用率</p>
-        </dv-border-box-2>
-        <dv-border-box-2 class="item">
-          <p>总人数 <span class="numFont">350</span></p>
-          <p>进行中 <span class="numFont">50</span></p>
-          <p>待进行 <span class="numFont">220</span></p>
-        </dv-border-box-2>
-        <dv-border-box-2 class="item">
-          <p class="active numFont">50个</p>
-          <p>急诊患者</p>
-        </dv-border-box-2>
-      </div>
+      <section>
+        <nav>
+          <div>
+            <img src="@/assets/svg/blueTriangle.svg" />
+            <p>首台准点率</p>
+            <p>80<span>%</span></p>
+          </div>
+          <div>
+            <img src="@/assets/svg/blueTriangle.svg" />
+            <p>手术间利用率</p>
+            <p>86<span>%</span></p>
+          </div>
+          <div>
+            <img src="@/assets/svg/blueTriangle.svg" />
+            <p>急诊患者</p>
+            <p>180<span>个</span></p>
+          </div>
+        </nav>
+        <div class="bottomBox">
+          <section>
+            <div class="leftBox">
+              <img src="@/assets/svg/greenTriangle.svg" />
+              <p>总人数</p>
+            </div>
+            <div class="rightBox">
+              <div>
+                <img src="@/assets/svg/greenPoint.svg" />
+                <p>进行中</p>
+              </div>
+              <p>50<span>人</span></p>
+            </div>
+          </section>
+          <section class="numBox">
+            <div class="leftBox">350</div>
+            <div class="rightBox">
+              <div>
+                <img src="@/assets/svg/greenPoint.svg" />
+                <p>待进行</p>
+              </div>
+              <p>300<span>人</span></p>
+            </div>
+          </section>
+        </div>
+      </section>
     </dv-border-box-13>
   </div>
 </template>
@@ -33,52 +58,123 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/pxtovh.scss';
 .topLeft {
   flex-basis: 30%;
-  .box {
+  section {
     height: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-content: space-evenly;
-    padding: 2vh;
+    padding: vh(46) vh(32);
     box-sizing: border-box;
-    .item {
-      flex-basis: 45%;
-      flex-shrink: 0;
-      height: 40%;
+    nav {
+      display: flex;
+      justify-content: space-between;
+      div {
+        width: vh(140);
+        height: vh(160);
+        background-image: url('@/assets/svg/blueBox.svg');
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        padding: vh(10) vh(16);
+        box-sizing: border-box;
+        img {
+          width: vh(20);
+        }
+        p:first-of-type {
+          margin-top: vh(12);
+          margin-bottom: vh(18);
+          font-size: vh(16);
+          color: #fff;
+          font-family: Source Han Sans;
+          letter-spacing: 3px;
+          font-weight: normal;
+          white-space: nowrap;
+        }
+        p:last-of-type {
+          font-size: vh(46);
+          line-height: vh(46);
+          color: #0592ff;
+          span {
+            font-size: vh(24);
+            color: #0592ff;
+          }
+        }
+      }
+    }
+    .bottomBox {
+      margin-top: vh(48);
+      height: vh(182);
+      background-image: url('@/assets/svg/greenBox.svg');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      padding: vh(26) vh(32);
       box-sizing: border-box;
-      padding: 3%;
-      :deep(.border-box-content) {
+      section {
         display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
         align-items: center;
-        font-size: 2.3vh;
-        p {
-          height: 30%;
-          flex-shrink: 0;
+        justify-content: space-between;
+        padding: 0;
+        height: auto;
+        margin-bottom: vh(20);
+        margin-top: vh(10);
+        .leftBox {
+          img {
+            width: vh(20);
+            vertical-align: middle;
+          }
+          p {
+            display: inline-block;
+            margin-left: vh(12);
+            font-size: vh(20);
+            color: rgba(255, 255, 255, 0.8);
+            vertical-align: middle;
+            font-weight: normal;
+          }
+        }
+        .rightBox {
+          width: vh(240);
+          height: vh(44);
+          padding: 0 vh(24);
           display: flex;
+          justify-content: space-between;
+          align-content: space-between;
           align-items: center;
-          letter-spacing: 0.1vh;
-          font-size: 2.4vh;
-          span {
-            margin-left: 1vh;
-            color: aquamarine;
-            font-size: 2.6vh;
+          background: linear-gradient(271deg, rgba(85, 255, 212, 0.075) 2%, rgba(35, 150, 121, 0.11) 99%);
+          border: 1.5px solid;
+          border-image: linear-gradient(159deg, #a9d5ff -8%, rgba(169, 213, 255, 0) 38%) 1.5;
+          div {
+            img {
+              width: vh(14);
+              vertical-align: bottom;
+            }
+            p {
+              display: inline-block;
+              margin-left: vh(8);
+              font-size: vh(16);
+              font-family: Source Han Sans;
+              vertical-align: middle;
+              letter-spacing: 1px;
+            }
+          }
+          > p {
+            color: #67c23a;
+            font-size: vh(26);
+            span {
+              font-family: Source Han Sans;
+              color: #fff;
+              font-size: vh(12);
+              margin-left: vh(4);
+              vertical-align: middle;
+            }
           }
-        }
-        .active {
-          color: aquamarine;
-          font-size: 3.8vh;
-          letter-spacing: 0.3vh;
         }
       }
-    }
-    .item:nth-child(3) {
-      p {
-        min-width: 13vh;
-        text-align: left;
+      .numBox {
+        .leftBox {
+          font-size: vh(44);
+          color: #67c23a;
+        }
       }
     }
   }
diff --git a/src/views/pageMonitor/topRight/index.vue b/src/views/pageMonitor/topRight/index.vue
index 29a628a..9590966 100644
--- a/src/views/pageMonitor/topRight/index.vue
+++ b/src/views/pageMonitor/topRight/index.vue
@@ -1,18 +1,33 @@
 <template>
   <div class="topRight">
     <dv-border-box-13>
-      <el-carousel direction="vertical" :autoplay="true" :interval="5000">
+      <el-carousel direction="vertical" :autoplay="false" :interval="5000">
         <el-carousel-item v-for="item in 3" :key="item">
-          <template v-for="(item1, index) in 21">
-            <div class="item" :key="item1">
-              <dv-border-box-2>
-                <p class="numFont">{{ String(index + 1).padStart(3, '0') }}</p>
-                <p v-if="index % 3" style="color: #f00">手术中</p>
-                <p v-else-if="index % 5" style="color: #ff0">麻醉结束</p>
-                <p v-else style="color: #fff">空置中</p>
-              </dv-border-box-2>
-            </div>
-          </template>
+          <section>
+            <template v-for="(item1, index) in 24">
+              <div v-if="index % 3" class="item opreationRoom" :key="index">
+                <p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
+                <div>
+                  <img src="@/assets/svg/opreationIcon.svg" />
+                  <span>手术中</span>
+                </div>
+              </div>
+              <div v-else-if="index % 5" class="item endRoom" :key="index">
+                <p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
+                <div>
+                  <img src="@/assets/svg/endIcon.svg" />
+                  <span>麻醉结束</span>
+                </div>
+              </div>
+              <div v-else class="item waitRoom" :key="index">
+                <p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
+                <div>
+                  <img src="@/assets/svg/waitIcon.svg" />
+                  <span>空置中</span>
+                </div>
+              </div>
+            </template>
+          </section>
         </el-carousel-item>
       </el-carousel>
     </dv-border-box-13>
@@ -30,6 +45,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/pxtovh.scss';
 .topRight {
   flex-basis: 69%;
   :deep(.el-carousel) {
@@ -39,33 +55,94 @@ export default {
     }
     .el-carousel__item {
       height: 100%;
-      padding: 2vh;
       box-sizing: border-box;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-evenly;
       align-content: space-evenly;
-      .item {
-        flex-basis: 13%;
-        height: 11vh;
-        flex-shrink: 0;
-        > div {
-          width: 100%;
-          height: 100%;
-          .border-box-content {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: space-evenly;
-            letter-spacing: 0.1vh;
-            p:first-child {
-              font-size: 2.2vh;
+      section {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 96%;
+        display: grid;
+        grid-template-columns: repeat(8, minmax(vh(136), 1fr));
+        gap: vh(20);
+        grid-row-gap: vh(40);
+        .item {
+          width: vh(136);
+          height: vh(106);
+          // display: inline-block;
+          // margin: vh(16) vh(22) vh(16) 0;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center;
+          position: relative;
+          p {
+            width: vh(116);
+            margin: vh(8) auto 0;
+            text-align: center;
+            line-height: vh(30);
+            background: linear-gradient(
+              90deg,
+              rgba(0, 147, 255, 0) 0%,
+              rgba(0, 147, 255, 0.37) 44%,
+              rgba(0, 147, 255, 0) 99%
+            );
+            font-size: vh(20);
+            color: #fff;
+            position: relative;
+            &::after {
+              content: '';
+              display: block;
+              width: 100%;
+              height: 1px;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%);
             }
-            p:last-child {
-              font-size: 2.4vh;
+          }
+          div {
+            position: absolute;
+            bottom: 15%;
+            left: 50%;
+            transform: translateX(-50%);
+            white-space: nowrap;
+            img {
+              width: vh(28);
+              vertical-align: middle;
+            }
+            span {
+              margin-left: vh(8);
+              font-size: vh(20);
+              vertical-align: middle;
+              white-space: nowrap;
             }
           }
         }
+        .waitRoom {
+          background-image: url('@/assets/svg/waitRoom.svg');
+          span {
+            color: #0592ff;
+          }
+        }
+        .endRoom {
+          background-image: url('@/assets/svg/endRoom.svg');
+          span {
+            color: #67c23a;
+          }
+        }
+        .opreationRoom {
+          background-image: url('@/assets/svg/opreationRoom.svg');
+          span {
+            color: #ff8515;
+          }
+        }
+        .item:nth-child(8n) {
+          margin-right: 0;
+        }
       }
     }
   }