柱状图

src/views/dashBoard/Header/index.vue

@@ -9,12 +9,18 @@
                 <div class="menu">
                     <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
                 </div>
-            <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+             <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
             </div>
             
             <div class="search" @click="handlesearch">
                 <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="right">
             <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
@@ -35,11 +41,28 @@ export default {
 <script lang="ts" setup>
 import { ref } from 'vue'
 import i18n from '@/locales'
-import { getCurrentInstance } 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';
 const { proxy } = (getCurrentInstance() as any)
 const value = ref(true)
 const drawer = ref(false)
+const lang = ref()
+const handleShowLang=(e:any)=>{
+console.log(1111)
+  e.stopPropagation()
+    lang.value.showLang = !lang.value.showLang
+}
+onMounted(() => {
+    document.documentElement.onclick = function () {
+        if (!lang.value.showLang) return
+        lang.value.showLang = false
+    }
+})
+onUnmounted(() => {
+    document.documentElement.onclick = null
+})
 const props = defineProps({
     time: [String, Number]
 })
@@ -55,6 +78,30 @@ const openDrawer = () => {
 </script>
 
 <style lang="scss" scoped>
+.langWrap{
+    //   position: absolute;
+    // //   top:-20px;
+    //   left: 260px;
+    //   display: flex;
+    //   align-items: end;
+    position: relative;
+    margin-left: 15px;
+      .second {
+      
+            width: 32px;
+            height: 36px;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+    }
+    .lang{
+        position: absolute;
+        top:50px;
+        left: -50px;
+    }
+ 
 .headerWrap {
     display: flex;
     justify-content: space-between;
@@ -71,6 +118,7 @@ const openDrawer = () => {
     }
     .left {
         display: flex;
+        position: relative;
         @media screen and (max-width: 768px){
             justify-content: space-between;
             width: 100vw;