点击菜单切换语言菜单自动弹回

src/views/dashBoard/Header/index.vue

@@ -2,23 +2,21 @@
     <div class="headerWrap">
         <div class="left">
             <div class="left-1">
-                <div class="menu">
-                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="drawShow" >
-                </div>
-             <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+                    <img src="@/assets/1x/1x/source5.png" alt="menu"  @click="drawShow" class="menu">
+                <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
             </div>
             <div class="left-right">
                 <div class="search" @click="handlesearch">
-                <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
+                    <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
+                </div>
+
+                <div class="langWrap">
+                    <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
+                    <Lang ref="lang" class="lang" />
+                </div>
             </div>
 
-            <div class="langWrap">
-               <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
-               <Lang  ref="lang" class="lang"/>
-             </div>
-            </div>
-            
-       
+
         </div>
         <div class="right">
             <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
@@ -39,7 +37,7 @@ export default {
 <script lang="ts" setup>
 import { ref } from 'vue'
 import i18n from '@/locales'
-import { getCurrentInstance,onMounted,onUnmounted} from 'vue'
+import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
 import Drawer from '@/views/login/modelComponents/Drawer.vue'
 import Lang from "@/views/login/components/Lang.vue";
 import { conforms } from 'lodash';
@@ -47,9 +45,9 @@ const { proxy } = (getCurrentInstance() as any)
 const value = ref(true)
 
 const lang = ref()
-const handleShowLang=(e:any)=>{
-console.log(1111)
-  e.stopPropagation()
+const handleShowLang = (e: any) => {
+    console.log(1111)
+    e.stopPropagation()
     lang.value.showLang = !lang.value.showLang
 }
 onMounted(() => {
@@ -63,12 +61,12 @@ onUnmounted(() => {
 })
 const props = defineProps({
     time: [String, Number],
-    openDrawer:{
-        required:true,
-        type:Function
+    openDrawer: {
+        required: true,
+        type: Function
     }
 })
-const handlesearch = ()=>{
+const handlesearch = () => {
     proxy.$router.push("/home")
 }
 const handleDrawer = (done: () => void) => {
@@ -81,7 +79,7 @@ const drawShow = () => {
 </script>
 
 <style lang="scss" scoped>
-.langWrap{
+.langWrap {
     //   position: absolute;
     // //   top:-20px;
     //   left: 260px;
@@ -89,70 +87,89 @@ const drawShow = () => {
     //   align-items: end;
     position: relative;
     margin-left: 15px;
-      .second {
-      
-            width: 32px;
-            height: 36px;
-            margin-top: 4px;
-            &:hover {
-                transform: scale(1.2);
-            }
+
+    .second {
+
+        width: 32px;
+        height: 36px;
+        margin-top: 4px;
+
+        &:hover {
+            transform: scale(1.2);
         }
     }
-    .lang{
-        position: absolute;
-        top:50px;
-        left: -50px;
+}
+
+.lang {
+    position: absolute;
+    top: 50px;
+    left: -50px;
+
+    @media screen and (max-width: 768px) {
+        left: -120px;
+
     }
-    .left-right{
-            display: flex;
-            justify-content: space-between;
-            width: 6vw;
-            margin-right: 10rem;
-        }
- 
+}
+
+.left-right {
+    display: flex;
+    justify-content: space-between;
+    width: 6vw;
+    margin-right: 10rem;
+}
+
 .headerWrap {
     display: flex;
     justify-content: space-between;
     padding-top: 40px;
     transform: translateY(-20px);
 
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
         flex-direction: column;
-        .left-1{
+
+        .left-1 {
             display: flex;
             justify-content: space-between;
             width: 40vw;
             margin-left: 15px;
         }
-        .left-right{
+
+        .left-right {
             display: flex;
             justify-content: space-between;
             width: 25vw;
             margin-right: 10px;
         }
     }
+
     .left {
         display: flex;
         position: relative;
-        @media screen and (max-width: 768px){
+
+        @media screen and (max-width: 768px) {
             justify-content: space-between;
             width: 100vw;
-            align-items:center;
+            align-items: center;
         }
-.menu{
-    display: none;
-    @media screen and (max-width: 768px){
-        display: block;
-        margin-top: 3px;
-    }
-}
+
+        .menu {
+            display: none;
+
+            @media screen and (max-width: 768px) {
+                display: block;
+                // margin-top: 3px;
+                vertical-align: middle;
+            }
+        }
+
         span {
             color: #2B4A60;
             font-size: 45px;
             font-weight: 900;
-            @media screen and (max-width: 768px){
-                font-size: 26px;
+
+            @media screen and (max-width: 768px) {
+                font-size: 25px;
+                // margin-top: 4px;
             }
         }
 
@@ -167,6 +184,7 @@ const drawShow = () => {
             margin-left: 15px;
             margin-top: 6px;
             cursor: pointer;
+
             img {
                 width: 18px;
                 height: 18px;
@@ -176,14 +194,19 @@ const drawShow = () => {
 
     .right {
         font-size: 20px;
-        @media screen and (max-width: 768px){
-                width: 100vw;
-                margin-top: 10px;
-                 transform: translateX(-10px);
-            }
+
+        @media screen and (max-width: 768px) {
+            // width: 100vw;
+            color: red;
+            margin-top: 10px;
+             transform: translateX(-10px);
+    
+        }
+
         .time {
             color: #435F70;
-            @media screen and (max-width: 768px){
+
+            @media screen and (max-width: 768px) {
                 float: right;
                 font-size: 15px;
             }
@@ -194,6 +217,7 @@ const drawShow = () => {
             text-align: right;
             color: #27485E;
             font-weight: 600;
+
             span {
                 margin-right: 15px;
             }
@@ -201,10 +225,12 @@ const drawShow = () => {
             :deep(.el-switch__action) {
                 background-color: #E86666;
             }
-            @media screen and (max-width: 768px){
+
+            @media screen and (max-width: 768px) {
                 font-size: 15px;
                 margin-top: 13px;
-                transform: translateX(200px);
+                transform: translateX(175px);
+                
             }
         }
     }