ipo页面移动端适配

src/views/IPO/components/IpoHeader.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="headerWrap">
         <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
-            style="background-color: #1C3F56;" :with-header="false"  >
+            style="background-color: #1C3F56;" :with-header="false">
             <Drawer />
         </el-drawer>
         <div class="hleft">
@@ -9,16 +9,16 @@
                 <div class="menu">
                     <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
                 </div>
-            <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
+                <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
             </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>
+                <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
+                <Lang ref="lang" class="lang" />
+            </div>
         </div>
         <!-- <div class="downLoad">
             <div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
@@ -35,14 +35,14 @@ export default {
 
 <script lang="ts" setup>
 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 { ref } from 'vue'
 import Lang from "@/views/login/components/Lang.vue";
 const lang = ref()
 const drawer = ref(false)
 const { proxy } = (getCurrentInstance() as any)
-const handlesearch = ()=>{
+const handlesearch = () => {
     proxy.$router.push("/home")
 }
 const handleDrawer = (done: () => void) => {
@@ -51,9 +51,9 @@ const handleDrawer = (done: () => void) => {
 const openDrawer = () => {
     drawer.value = true;
 }
-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(() => {
@@ -68,7 +68,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
- .langWrap{
+.langWrap {
     //   position: absolute;
     // //   top:-20px;
     //   left: 260px;
@@ -76,54 +76,68 @@ onUnmounted(() => {
     //   align-items: end;
     position: relative;
     margin-left: 15px;
-      .second {
-      
-            width: 32px;
-            height: 36px;
-            margin-top: 4px;
-            &:hover {
-                transform: scale(1.2);
-            }
+
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
+
+    .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;
+}
+
 .headerWrap {
     display: flex;
     justify-content: space-between;
-    @media screen and (max-width: 768px){
-       
-        .left-1{
+
+    @media screen and (max-width: 768px) {
+
+        .left-1 {
             display: flex;
             justify-content: space-between;
             width: 80vw;
         }
     }
+
     .hleft {
         display: flex;
         justify-content: space-between;
         width: fit-content;
-         position: relative;
-        .menu{
-    display: none;
-    @media screen and (max-width: 768px){
-        display: block;
-        
-    }
-}
+        position: relative;
+
+        .menu {
+            display: none;
+
+            @media screen and (max-width: 768px) {
+                display: block;
+
+            }
+        }
+
         .title {
             color: #2B4A60;
             font-size: 45px;
-            font-weight:bolder;
-            @media screen and (max-width: 768px){
-              font-size: 26rem;
-              transform: translateX(-60rem);
+            font-weight: bolder;
+
+            @media screen and (max-width: 768px) {
+                font-size: 26rem;
+                transform: translateX(-60rem);
             }
         }
-        
+
         .search {
             margin-top: 5px;
             background-color: #fff;
@@ -141,7 +155,8 @@ onUnmounted(() => {
                 width: 18px;
                 height: 18px;
             }
-            @media screen and (max-width: 768px){
+
+            @media screen and (max-width: 768px) {
                 transform: translateY(-0.5vh);
             }
         }
@@ -151,6 +166,7 @@ onUnmounted(() => {
         display: flex;
         height: 30px;
         align-items: center;
+
         .report {
             font-size: 28px;
             color: #1C3F56;