ipo页面移动端适配

src/router/routes.ts

@@ -48,6 +48,11 @@ export const staticRoutes: Array<RouteRecordRaw> = [
     name: "Xsearchipo",
     component: () => import("@/views/searchipo/index.vue")
   },
+  {
+    path: "/IPOcalendar",
+    name: "Xsearchipo",
+    component: () => import("@/views/IpoCalendar/index.vue")
+  },
   {
     path: "/404",
     name: "404",

src/stores/ipo.ts

@@ -7,7 +7,8 @@ export const ipoStore = defineStore({
   id: 'app',
   state: () => ({
     //1代表英文 2代表繁体中文 3代表简体中文
-    locale:1
+    locale:1,
+
   }),
   getters: {
     localeLang(state) {

src/views/IPO/components/IpoContent.vue

@@ -4,13 +4,14 @@
         <div class="title">{{ title }}</div>
         <ul>
             <li v-for="(item, index) in data.info" :key="index">
+                <div class="llrr">
+                    <div class="left">
                         <div class="name">
                             <div v-if="item.name">{{ item.name }}</div>
-                    <div v-if="item.name2" class="name2">{{ item.name2 }}</div>
+
 
                         </div>
                         <div v-if="item.infos">
-
                             <div class="info" v-if="item.infos.length" v-for="(t, index) in item.infos" :key="index">{{ t }}
                             </div>
                             <div class="info" v-else>-</div>
@@ -25,6 +26,20 @@
                                     <span v-else>{{ item.info }}</span>
 
                                 </div>
+
+                            </div>
+                        </div>
+                    </div>
+                    <div class="right" v-if="item.name2 || item.info2 || item.info2s">
+                        <div class="name">
+
+                            <div v-if="item.name2" class="name2">{{ item.name2 }}</div>
+
+                        </div>
+                        <div v-if="item.info2 || item.info2s">
+                            <div class="info" :style="{
+                                height: item.info2s && '30px',
+                            }">
                                 <div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }">
                                     <a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a>
                                     <span v-else>{{ item.info2 }}</span>
@@ -34,13 +49,22 @@
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </div>
+
                 <div class="table" v-if="item.table">
                     <el-table :data="item.table.lists" stripe style="width: 100%;">
                         <el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
-                            :label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px; color:red"
+                            :label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px;"
                             :align="title.align" :key="index" />
                     </el-table>
                 </div>
+                <div class="Modeltable" v-if="item.table">
+                    <el-table :data="item.table.lists" stripe style="width: 100%;">
+                        <el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
+                            :label="title.header" :width="320 * (title.width / 100)" :align="title.align" :key="index" />
+                    </el-table>
+                </div>
 
 
             </li>
@@ -84,6 +108,38 @@ const data = defineProps<{ info: obj[], title: string }>()
     border-left: 15px solid #98C2F2;
     margin-bottom: 20px;
 
+    @media screen and (max-width: 768px) {
+        overflow: hidden;
+    }
+
+    .Modeltable {
+        display: none;
+
+        @media screen and (max-width: 768px) {
+            display: block;
+            margin-top: 10rem;
+
+            :deep(.el-table) {
+                color: #355D80;
+            }
+
+            :deep(.el-table thead) {
+                color: #355D80;
+            }
+
+            :deep(.cell) {
+
+                font-family: 'Calibri';
+            }
+
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+        margin: 0 15rem 0 15rem;
+        // overflow: hidden;
+    }
+
     // height: 600px;
     .title {
         font-size: 27px;
@@ -99,19 +155,40 @@ const data = defineProps<{ info: obj[], title: string }>()
         // flex-direction: column;
         margin-top: 15px;
 
+
+
         li {
             margin-bottom: 25px;
 
+            .llrr {
+                display: flex;
+
+
+                @media screen and (max-width: 768px) {
+                    flex-direction: column;
+                }
+            }
+
+            .left {
+                width: 450px;
+            }
+
+            .right {
+                width: 200px;
+
+                @media screen and (max-width: 768px) {
+                    margin-top: 10rem;
+                }
+
+            }
+
             .name {
                 color: #8AA1B6;
                 font-size: 12px;
                 position: relative;
 
-                .name2 {
+                .name2 {}
-                    position: absolute;
+
-                    top: 0px;
-                    left: 450px;
-                }
 
 
             }
@@ -125,21 +202,22 @@ const data = defineProps<{ info: obj[], title: string }>()
                 position: relative;
                 font-family: "Calibri";
 
+
                 a {
                     color: #355D80;
                 }
 
-                .info2 {
+                .info2 {}
-                    position: absolute;
-                    top: 0px;
-                    left: 450px;
-                }
             }
 
             .table {
                 width: 800px;
                 margin-top: 20px;
 
+                @media screen and (max-width: 768px) {
+                    display: none;
+                }
+
                 :deep(.el-table) {
                     color: #355D80;
                 }
@@ -149,8 +227,7 @@ const data = defineProps<{ info: obj[], title: string }>()
                 }
 
                 :deep(.cell) {
-                    // max-width: 310px;
+
-                    // color: red;
                     font-family: 'Calibri';
                 }
             }

src/views/IPO/components/IpoHeader.vue

@@ -76,24 +76,33 @@ onUnmounted(() => {
     //   align-items: end;
     position: relative;
     margin-left: 15px;
+
+    @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;
 }
+
 .headerWrap {
     display: flex;
     justify-content: space-between;
+
     @media screen and (max-width: 768px) {
 
         .left-1 {
@@ -102,22 +111,27 @@ onUnmounted(() => {
             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;
 
             }
         }
+
         .title {
             color: #2B4A60;
             font-size: 45px;
             font-weight: bolder;
+
             @media screen and (max-width: 768px) {
                 font-size: 26rem;
                 transform: translateX(-60rem);
@@ -141,6 +155,7 @@ onUnmounted(() => {
                 width: 18px;
                 height: 18px;
             }
+
             @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;

src/views/IPO/components/IpoNav.vue

@@ -28,9 +28,13 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
 .item {
     margin-top: 18px;
     display: flex;
-    // @media screen and (max-width: 768px){
+
-    //     width: 100vw;
+    @media screen and (max-width: 768px) {
-    // }
+        margin-top: 0px;
+        width: 100vw;
+        overflow-x: scroll;
+    }
+
     a {
         // margin-left: 5px;
         padding: 5px 10px;
@@ -39,6 +43,8 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
         font-weight: 700;
         border-radius: 30px;
         text-decoration: none;
+        width: fit-content;
+        white-space: nowrap;
 
         &:hover {
             background-color: #1C3F56;

src/views/IPO/index.vue

@@ -341,8 +341,8 @@ const content = ref()
 onMounted(
     () => {
         data.value = JSON.parse(localStorage.getItem('itemData') as string)
-        getreferencedata()
+        // getreferencedata()
-        // text();
+        text();
     }
 )
 async function text() {
@@ -687,11 +687,23 @@ function setTimeTable(mockRes: any) {
         }
     ]
     Timetable.value = Timetable.value.map(item => {
+        const isMobel = 768 >= document.documentElement.clientWidth;
         item.table.lists = item.table.lists.map((item, index) => {
             const { number, persent } = arr[0].table.lists[index]
             return { ...item, number, persent }
         })
+        if (isMobel) {
+            item.table.title = item.table.title.filter((element: any) => element.header)
+            item.table.title = item.table.title.map((element: any, index: number) => {
+                if (index == 0) {
+                    element.width = 55;
+                }
+                return element
+            })
+
+        }
         return { ...item, info: arr[0].info, info2: arr[0].info2 }
+
     })
     function timeTo(time: string | null | undefined) {
         if (time) {
@@ -762,6 +774,13 @@ function setDownLoad() {
     padding-top: 30px;
     height: 100%;
 
+    @media screen and (max-width: 768px) {
+
+        padding-top: 10rem;
+        width: 100vw;
+        overflow: hidden;
+    }
+
     .leftbox {
         width: 22%;
         height: 100%;
@@ -776,6 +795,13 @@ function setDownLoad() {
         width: 78%;
         height: 100%;
         padding-left: 20px;
+
+        @media screen and (max-width: 768px) {
+            padding-top: 0px;
+            padding-left: 0px;
+            width: 100vw;
+            overflow: hidden;
+        }
     }
 
     .content {

src/views/IpoCalendar/index.vue

@@ -0,0 +1,260 @@
+<template>
+    <div class="right">
+        <div class="right-top">
+            <img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
+            <img src="@/assets/1x/1x/source1.png" class="icon2" />
+            <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
+        </div>
+        <div class="right-bottom">
+
+            <el-calendar ref="calendar" v-model="dayValue">
+                <template #header="{ date }">
+
+                    <el-button size="small" @click="selectDate('prev-month')">
+                        <img src="@/assets/1x/source11.png">
+                    </el-button>
+
+                    <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
+                    <span class="month">{{ showMounth(date) }}</span>
+
+                    <el-button size="small" @click="selectDate('next-month')">
+                        <img src="@/assets/1x/source12.png">
+                    </el-button>
+
+                </template>
+                <!-- <template #date-cell="{ data }">
+
+                    </template> -->
+            </el-calendar>
+        </div>
+        <div class="right-bottom1">
+            <Event v-if="Eventdata.length" :data="Eventdata" />
+            <div v-else class="right-bottom-title1">No event</div>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "ipocalendar",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import moment from "moment"
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import Event from '@/views/login/components/Event.vue';
+import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
+
+const { proxy } = (getCurrentInstance() as any)
+const dayValue = ref(new Date())
+const calendar = ref()
+const Eventdata = ref([])
+const selectDate = (val: string) => {
+    calendar.value.selectDate(val)
+}
+const showMounth = (date: any) => {
+    const arr = date.split(" ")
+    if (arr.length == 3) {
+        return arr[2]
+    } else if (arr.length == 4) {
+        return arr[2] + " " + arr[3]
+    }
+}
+onMounted(async () => {
+    var day = moment(Date.now()).format("YYYY-MM-DD")
+    const result = await getEventData(day);
+    setEventdata((result as any).data)
+})
+const setEventdata = (EventD: any) => {
+    Eventdata.value = EventD.map((item: any) => {
+        const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
+        return {
+            logo: '-',
+            listPlatform1: listPlatform,
+            name: companyEngFull + ";" + companyChiFull,
+            number: stkCode
+        }
+
+    })
+}
+const backRouter = () => {
+    proxy.$router.go(-1)
+}
+</script>
+
+<style lang="scss"  scoped>
+@media screen and (max-width: 768px) {
+    .right {
+        width: 100vw;
+        box-sizing: border-box;
+        height: 100%;
+        padding-bottom: 80px;
+        background-color: #1f4055;
+        z-index: 1;
+        border: #1f4055 1px solid;
+
+        .right-top {
+            display: flex;
+            // margin-left: 40px;
+            margin-top: 20rem;
+
+            .top-title {
+                text-align: center;
+                display: inline-block;
+                font-size: 25rem;
+                color: #ffffff;
+                margin-left: 10px;
+            }
+
+            .icon1 {
+                width: 25rem;
+                height: 25rem;
+                margin-left: 30rem;
+            }
+
+            .icon2 {
+                width: 25rem;
+                height: 25rem;
+                margin-left: 10rem;
+            }
+        }
+
+        .right-bottom {
+            width: 100vw;
+            background-color: #ffffff;
+            height: 400px;
+            margin-top: 25px;
+
+            // margin-left: 20px;
+            // transform: translateX(-50rem);
+            .month {
+                font-size: 25rem;
+                color: #000000;
+                font-weight: bold;
+            }
+
+        }
+
+        .right-bottom1 {
+            margin-left: 5vw;
+            width: 90vw;
+            background-color: #ffffff;
+            height: 40vh;
+            margin-top: 150px;
+            // margin-left: 20px;
+            // text-align: center;
+            // line-height: 500px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .right-bottom-title1 {
+
+                color: #1f4055;
+                font-size: 20px;
+                align-items: center;
+            }
+
+            li {
+                color: #000000
+            }
+        }
+
+    }
+
+    .right-bottom1 {
+        width: 420px;
+        background-color: #ffffff;
+        height: 50vh;
+        margin-top: 150px;
+        // margin-left: 20px;
+        // text-align: center;
+        // line-height: 500px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .right-bottom-title1 {
+
+            color: #1f4055;
+            font-size: 20px;
+            align-items: center;
+        }
+
+        li {
+            color: #000000
+        }
+    }
+
+    :deep(.el-button--small) {
+        border: none
+    }
+
+    :deep(.el-calendar__body) {
+        background-color: #e8ebee;
+
+    }
+
+    :deep(.el-calendar) {
+        width: 100vw;
+        font-family: "Calibri";
+    }
+
+    :deep(.el-calendar-table td) {
+        border: none;
+        text-align: center;
+    }
+
+    :deep(.el-calendar .el-calendar-table .el-calendar-day) {
+        padding: 0px;
+        text-align: center;
+        line-height: 33px;
+        font: 13px 'Poppins-Regular';
+        background-color: rgb(255, 255, 255);
+        height: 33px;
+        border: none;
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        // font-family: "Calibri"
+    }
+
+    :deep(.el-calendar-table thead) {
+        margin-top: 20px;
+        font-size: 16px;
+        font-weight: bold;
+        background-color: rgb(255, 255, 255);
+        border: none;
+        font-family: "Calibri"
+    }
+
+    :deep(.el-calendar-table td.is-selected) {
+        background-color: #e8ebee;
+    }
+
+    :deep(.el-calendar-table td.is-today .el-calendar-day) {
+        color: black;
+        background-color: #e36466;
+    }
+
+    :deep(.el-calendar-table td.is-selected .el-calendar-day) {
+        // background-color: #e36466;
+        border: 5px solid #e36466;
+    }
+
+    :deep(.el-calendar-table td.is-selected .el-calendar-day span) {
+        color: black;
+    }
+
+
+
+    :deep(.is-selected) {
+        color: red;
+    }
+}
+</style>

src/views/dashBoard/Header/index.vue

@@ -1,13 +1,9 @@
 <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"  >
-            <Drawer />
-        </el-drawer>
         <div class="left">
             <div class="left-1">
                 <div class="menu">
-                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
+                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="drawShow" >
                 </div>
              <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
             </div>
@@ -47,7 +43,7 @@ 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)
@@ -64,7 +60,11 @@ onUnmounted(() => {
     document.documentElement.onclick = null
 })
 const props = defineProps({
-    time: [String, Number]
+    time: [String, Number],
+    openDrawer:{
+        required:true,
+        type:Function
+    }
 })
 const handlesearch = ()=>{
     proxy.$router.push("/home")
@@ -72,8 +72,9 @@ const handlesearch = ()=>{
 const handleDrawer = (done: () => void) => {
     done();
 }
-const openDrawer = () => {
+const drawShow = () => {
-    drawer.value = true;
+    console.log(1111);
+    props.openDrawer();
 }
 </script>
 

src/views/dashBoard/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="login1">
+    <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
+            style="background-color: #1C3F56;" :with-header="false"  >
+            <Drawer />
+        </el-drawer>
     <div class="wrap w">
       <div class="leftbox">
         <Item :data="data" />
         <Nav />
-
       </div>
       <div class="rightbox">
-        <Header :time="datatime" />
+        <Header :time="datatime" :openDrawer="openDrawer"/>
         <div class="content">
           <div class="content-topleft">
             <p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
@@ -148,6 +151,7 @@
 
       </div>
     </div>
+   
   </div>
 </template>
 <script lang="ts">
@@ -168,11 +172,19 @@ import moment from 'moment';
 import i18n from '@/locales'
 import { ipoStore } from "@/stores/ipo"
 import { getCurrentInstance, onUnmounted } from 'vue'
-
+import Drawer from '@/views/login/modelComponents/Drawer.vue'
 import { getDataFromId } from "@/api/mock/home";
+const drawer = ref(false)
+const handleDrawer = (done: () => void) => {
+    done();
+}
+const openDrawer = () => {
+    drawer.value = true;
+}
 const { proxy } = (getCurrentInstance() as any)
 // console.log('getCurrentInstance()中的proxy:', proxy)
 const store = ipoStore()
+
 const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
 const main1 = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
 const main2 = ref();
@@ -227,36 +239,39 @@ const FinalAllocationPublic = ref('')
 const InitialAllocationInstitutional = ref('')
 const FinalAllocationInstitutional = ref('')
 const setBarRight = async () => {
-  const result = await getDataFromId('bar')
+  // const result = await getDataFromId('bar')
-  const ipoID = '00314';
+  // const ipoID = '00314';
-  const index = result.findIndex((item: any) => item.ipoID == ipoID);
+  // const index = result.findIndex((item: any) => item.ipoID == ipoID);
-  const graph = result[index].graph;
+  // const graph = result[index].graph;
-  PublicOfferX.value = graph.map((item: any) => {
+  // PublicOfferX.value = graph.map((item: any) => {
-    return moment(item.dateTime).format('MM-DD')
+  //   return moment(item.dateTime).format('MM-DD')
-  })
+  // })
-  PublicOfferY.value = graph.map((item: any) => {
+  // PublicOfferY.value = graph.map((item: any) => {
-    return item.poApplicationQuantity;
+  //   return item.poApplicationQuantity;
-  });
+  // });
-  const amount = Number(initialpublic.value) + Number(initialinstituational.value);
+  // const amount = Number(initialpublic.value) + Number(initialinstituational.value);
-  InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
+  // InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
 
-  InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
+  // InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
-  init();
+  // init();
 }
 const setBar = async () => {
   const ipoID = localStorage.getItem('ipoID')
   const result = await getIpo(ipoID as string)
-  PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => {
+  // console.log(ipoID,(result as any).data[0]);
-    return moment(item.dateTime).format('MM/DD')
+  console.log(ipoID,(result as any).data[0]);
-  })
-  PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
-    return item.poApplicationQuantity / 1000000;
-  });
-  PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
-    return (item.poApplicationQuantity) / item.poSharesInitial;
-  });
-
   
+  //  if((result as any).data[0].graph!=null){
+  //   PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => {
+  //   return moment(item.dateTime).format('MM/DD')
+  // })
+  // PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
+  //   return item.poApplicationQuantity / 1000000;
+  // });
+  // PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
+  //   return (item.poApplicationQuantity) / item.poSharesInitial;
+  // });
+  // }
   const amount = Number(initialpublic.value) + Number(initialinstituational.value);
   InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
 
@@ -264,8 +279,8 @@ const setBar = async () => {
   init();
 }
 onMounted(() => {
-  setBarRight();//假的bar接口
+  // setBarRight();
-  // setBar()//真的接口
+  setBar()
 })
 const getdatatime = async () => {
   const res = await getHomeIpo(1)
@@ -274,13 +289,13 @@ const getdatatime = async () => {
 }
 const getreferencedata = async () => {
   //---mock测试接口
-  const result1 = await getDataFromId('bar');
+  // const result1 = await getDataFromId('bar');
-  const res = result1[0];
+  // const res = result1[0];
   //---mock测试接口结束
 
   const ipoID = localStorage.getItem('ipoID')
-  // const result = await getIpo(ipoID as string)
+  const result = await getIpo(ipoID as string)
-  // const res=(result as any).data[0];
+  const res = (result as any).data[0];
   // console.log(res);
   const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;
 

src/views/login/components/Main.vue

@@ -107,12 +107,14 @@ const props = defineProps({
                 trading: "",
                 logolinks: "",
                 status: 0,
-                listingDate: ""
+                listingDate: "",
+                ipoID:0
             }
         }
     }
 })
 
+
 const code22 = ref('')
 onUpdated(() => {
     var obj = {
@@ -161,7 +163,9 @@ const cardDetail = (e: any) => {
 }
 //路由传参
 const handleclick = (item: any) => {
-    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('ipoID', item.ipoID)
+    console.log(item);
+    
     localStorage.setItem('itemData', JSON.stringify(item))
     router.push({
         name: 'Xdashboard',

src/views/login/modelComponents/Drawer.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="wrap">
+    <div class="wrapddd">
-        <div class="imgWrap">
+        <div class="imgWrap22222">
             <img src="@/assets/1x/1x/source8.png" alt="menu" >
         </div>
         <div class="nav">
@@ -62,10 +62,24 @@ export default {
 
 <script lang="ts" setup>
 import { ref } from "vue"
+import { getCurrentInstance, onUnmounted } from 'vue'
+const { proxy } = (getCurrentInstance() as any)
 const state = ref(1)
 // const drawer = ref(true)
 const setState = (number: number) => {
     state.value = number;
+    if(number == 1){
+        proxy.$router.push("/home")
+    }
+    if(number == 2){
+        proxy.$router.push("/dashboard")
+    }
+    if(number == 3){
+        proxy.$router.push("/IPO")
+    }
+    if(number == 4){
+        proxy.$router.push("/IPOcalendar")
+    }
 }
 // const openDrawer = () => {
 //     drawer.value = false;
@@ -73,18 +87,16 @@ const setState = (number: number) => {
 </script>
 
 <style lang="scss" scoped>
-.wrap {
+.wrapddd {
     width: 80vw;
     transform: translateX(-20rem);
-
+    display: flex;
-    .imgWrap {
+    flex-direction: column;
+    .imgWrap22222 {
         margin-top: 30rem;
         width: 25rem;
         height: 20rem;
-        margin-left: 15rem;
+        // margin-left: 15rem;
-
-
-
         img {
             width: 100%;
             height: 100%;