最终版

src/views/dashBoard/Header/index.vue

@@ -20,10 +20,10 @@
         </div>
         <div class="right">
             <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
-            <li class="show">
+            <!-- <li class="show">
                 <span>Show Value</span>
                 <el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
-            </li>
+            </li> -->
         </div>
     </div>
 </template>
@@ -123,13 +123,20 @@ const drawShow = () => {
     padding-top: 40px;
     transform: translateY(-20px);
     height: 50px;
+    width: 1000px;
+    //background-color: red;
+    li{
+        margin: 0;
+        padding: 0;
+        
+    }
     @media screen and (max-width: 768px) {
         flex-direction: column;
        
         .left-1 {
             display: flex;
             justify-content: space-between;
-            width: 40vw;
+            width: 240px;
             margin-left: 15px;
         }
 
@@ -143,8 +150,9 @@ const drawShow = () => {
 
     .left {
         display: flex;
-        position: relative;
-
+        // position: relative;
+        width: 400px;
+        //background-color: gray;
         @media screen and (max-width: 768px) {
             justify-content: space-between;
             width: 100vw;
@@ -165,7 +173,9 @@ const drawShow = () => {
             color: #2B4A60;
             font-size: 45px;
             font-weight: 900;
-
+            display: inline-block;
+            min-width: 200px;
+            // background-color: red;
             @media screen and (max-width: 768px) {
                 font-size: 25px;
                 // margin-top: 4px;
@@ -193,13 +203,17 @@ const drawShow = () => {
 
     .right {
         font-size: 20px;
-
+        min-width: 50px;
+        //background-color: green;
+        margin-top: 7px;
+        //background-color: #2B4A60;
         @media screen and (max-width: 768px) {
             // width: 100vw;
-            color: red;
+            //color: red;
             margin-top: 10px;
-             transform: translateX(-10px);
-    
+            transform: translateX(-10px);
+            width: 250px;
+            margin-left: 100px;
         }
 
         .time {
@@ -208,30 +222,31 @@ const drawShow = () => {
             @media screen and (max-width: 768px) {
                 float: right;
                 font-size: 15px;
+
             }
         }
 
-        .show {
-            margin-top: 5px;
-            text-align: right;
-            color: #27485E;
-            font-weight: 600;
+        // .show {
+        //     margin-top: 5px;
+        //     text-align: right;
+        //     color: #27485E;
+        //     font-weight: 600;
 
-            span {
-                margin-right: 15px;
-            }
+        //     span {
+        //         margin-right: 15px;
+        //     }
 
-            :deep(.el-switch__action) {
-                background-color: #E86666;
-            }
+        //     :deep(.el-switch__action) {
+        //         background-color: #E86666;
+        //     }
 
-            @media screen and (max-width: 768px) {
-                font-size: 15px;
-                margin-top: 13px;
-                transform: translateX(175px);
+        //     @media screen and (max-width: 768px) {
+        //         font-size: 15px;
+        //         margin-top: 13px;
+        //         transform: translateX(175px);
                 
-            }
-        }
+        //     }
+        // }
     }
 }
 </style>