diff --git a/src/views/dashBoard/index.vue b/src/views/dashBoard/index.vue
index 96a6c4d..fa63e95 100644
--- a/src/views/dashBoard/index.vue
+++ b/src/views/dashBoard/index.vue
@@ -4,7 +4,7 @@
       <div class="leftbox">
         <Item :data="data" />
         <Nav />
-     
+
       </div>
       <div class="rightbox">
         <Header :time="datatime" />
@@ -30,7 +30,7 @@
                 <p class="yuan3"></p>
                 <p class="calendar-title">{{ $t(i18n.global.t('dashboard.PublicOfferSubscription')) }}</p>
               </div>
-             
+
               <div class="topleft-bottom1">
                 <p class="yuan6"></p>
                 <p class="calendar-title">{{ $t(i18n.global.t('dashboard.PublicOfferAllotment')) }}</p>
@@ -80,20 +80,20 @@
               <div class="pulic">
                 <div class="public-left">
                   <p class="yuan1"></p>
-                  <p class="yuan-title"> 
-                   <span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
-                   <span class="persent">{{ InitialAllocationPublic }}</span>
+                  <p class="yuan-title">
+                    <span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
+                    <span class="persent">{{ InitialAllocationPublic }}</span>
                   </p>
                 </div>
-              
+
                 <p class="yuan-title3">{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
               </div>
               <div class="pulic1">
                 <div class="public-left1">
                   <p class="yuan2"></p>
                   <p class="yuan-title">
-                    
-                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>  
+
+                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
 
                     <span class="persent">{{ InitialAllocationInstitutional }}</span>
                   </p>
@@ -103,7 +103,7 @@
               <div class="pulic2">
                 <div class="public-left2">
                   <p class="yuan-title">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
-                  
+
                 </div>
                 <p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
               </div>
@@ -117,10 +117,10 @@
                 <div class="public-left">
                   <p class="yuan8"></p>
                   <p class="yuan-title">
-                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span> 
-                  <span class="persent">{{ FinalAllocationPublic  }}</span>
+                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
+                    <span class="persent">{{ FinalAllocationPublic }}</span>
                   </p>
-                  
+
                 </div>
                 <p class="yuan-title3-1">{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
               </div>
@@ -128,10 +128,10 @@
                 <div class="public-left1">
                   <p class="yuan9"></p>
                   <p class="yuan-title">
-                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span> 
- <span class="persent">{{ FinalAllocationInstitutional }}</span>
-                   </p>
-                 
+                    <span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
+                    <span class="persent">{{ FinalAllocationInstitutional }}</span>
+                  </p>
+
                 </div>
                 <p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
               </div>
@@ -167,9 +167,9 @@ import { getIpo, getHomeIpo } from '@/api/reqIpo/ipo'
 import moment from 'moment';
 import i18n from '@/locales'
 import { ipoStore } from "@/stores/ipo"
-import { getCurrentInstance,onUnmounted} from 'vue'
+import { getCurrentInstance, onUnmounted } from 'vue'
 
-import {getDataFromId} from "@/api/mock/home";
+import { getDataFromId } from "@/api/mock/home";
 const { proxy } = (getCurrentInstance() as any)
 // console.log('getCurrentInstance()中的proxy:', proxy)
 const store = ipoStore()
@@ -183,8 +183,8 @@ onMounted(
   () => {
 
     const obj = JSON.parse(localStorage.getItem('itemData') as string);
-      // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
-    data.value=obj;
+    // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
+    data.value = obj;
     getreferencedata()
     getdatatime()
   },
@@ -217,55 +217,55 @@ const LineData = reactive({
   lines: [] as lineObje[],
   ids: [] as any
 })
-const PublicOfferX1=ref<string[]>([])
-const PublicOfferY1=ref<string[]>([])
-const PublicOfferZ1=ref<string[]>([])
-const PublicOfferX=ref<string[]>([])
-const PublicOfferY=ref<string[]>([])
-const InitialAllocationPublic=ref('')
-const FinalAllocationPublic=ref('')
-const InitialAllocationInstitutional=ref('')
+const PublicOfferX1 = ref<string[]>([])
+const PublicOfferY1 = ref<string[]>([])
+const PublicOfferZ1 = ref<string[]>([])
+const PublicOfferX = ref<string[]>([])
+const PublicOfferY = ref<string[]>([])
+const InitialAllocationPublic = ref('')
+const FinalAllocationPublic = ref('')
+const InitialAllocationInstitutional = ref('')
 const FinalAllocationInstitutional = ref('')
-// const setBarRight=async ()=>{
-//  const result= await getDataFromId('bar')
-//   const ipoID='00314';
-//   const index=result.findIndex((item:any)=>item.ipoID==ipoID);
-//   const graph=result[index].graph;
-//   PublicOfferX.value=graph.map((item:any)=>{
-//     return moment(item.dateTime).format('MM-DD')
-//   })
-//   PublicOfferY.value=graph.map((item:any)=>{
-//     return item.poApplicationQuantity;
-//   });
-//   const amount=Number(initialpublic.value)+Number(initialinstituational.value);
-//   InitialAllocationPublic.value=Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
- 
-//   InitialAllocationInstitutional.value=Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
-//   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)=>{
-  return moment(item.dateTime).format('MM/DD')
-})
-PublicOfferY1.value=(result as any).data[0].graph.map((item:any)=>{
-    return item.poApplicationQuantity/1000000;
+const setBarRight = async () => {
+  const result = await getDataFromId('bar')
+  const ipoID = '00314';
+  const index = result.findIndex((item: any) => item.ipoID == ipoID);
+  const graph = result[index].graph;
+  PublicOfferX.value = graph.map((item: any) => {
+    return moment(item.dateTime).format('MM-DD')
+  })
+  PublicOfferY.value = graph.map((item: any) => {
+    return item.poApplicationQuantity;
   });
-  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 + "%";
+
+  InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
+  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) => {
+    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 + "%";
- 
-  InitialAllocationInstitutional.value=Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
+
+  const amount = Number(initialpublic.value) + Number(initialinstituational.value);
+  InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
+
+  InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
   init();
- }
-onMounted(()=>{
-  //setBarRight();//假的bar接口
-  setBar()//真的接口
+}
+onMounted(() => {
+  setBarRight();//假的bar接口
+  // setBar()//真的接口
 })
 const getdatatime = async () => {
   const res = await getHomeIpo(1)
@@ -274,17 +274,17 @@ const getdatatime = async () => {
 }
 const getreferencedata = async () => {
   //---mock测试接口
-  // const result1=await getDataFromId('bar');
-  // const res=result1[0];
+  const result1 = await getDataFromId('bar');
+  const res = result1[0];
   //---mock测试接口结束
 
   const ipoID = localStorage.getItem('ipoID')
-  const result = await getIpo(ipoID as string)
-  const res=(result as any).data[0];
+  // const result = await getIpo(ipoID as string)
+  // const res=(result as any).data[0];
   // console.log(res);
-  const { bookOpenDate, bookCloseDate, allotmentDate,siInputDate,listingDate } = res;
+  const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;
+
 
-  
   startDate.value = bookOpenDate;
   endDate.value = bookCloseDate
   // console.log('$$', allotmentDate, allotmentDate)
@@ -296,7 +296,7 @@ const getreferencedata = async () => {
   calendarAddLine()
   initialpublic.value = res.poSharesInitial
   ApplicationQuantity.value = res.poApplicationQuantity
-  subscriptionRatio.value= res.poApplicationQuantity/res.poSharesInitial
+  subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial
   subscriptionRatio.value = subscriptionRatio.value.toFixed(1)
   initialinstituational.value = res.ioSharesInitial
   // console.log('initialinstituational', (res as any).data[0].poSharesInitial);
@@ -305,8 +305,8 @@ const getreferencedata = async () => {
   code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
   finalpublic.value = res.poSharesFinal
   code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
-  FinalAllocationPublic.value=Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
-  FinalAllocationInstitutional.value=Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
+  FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
+  FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
   quantity.value = res.overallIpoShares
   init1()
   init2()
@@ -398,14 +398,14 @@ function init() {
       y2: 200
     },
     tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'cross'
-    }
-  },
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross'
+      }
+    },
     xAxis: {
       // data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
-      data:PublicOfferX1.value
+      data: PublicOfferX1.value
     },
     yAxis: [
       {
@@ -437,7 +437,7 @@ function init() {
         type: 'line',
         data: PublicOfferZ1.value,
         // data:PublicOfferY.value,
-        
+
         // markLine:{
         //   symbol:['none','none'],
         //   label:{
@@ -457,9 +457,9 @@ function init() {
         // }
       },
       {
-        name:proxy.$t('dashboard.QuantityMillion'),
-        type:'bar',
-        data:PublicOfferY1.value,
+        name: proxy.$t('dashboard.QuantityMillion'),
+        type: 'bar',
+        data: PublicOfferY1.value,
         barWidth: '40%',
         itemStyle: {
           color: '#f6caae'
@@ -469,9 +469,9 @@ function init() {
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
-  window.onresize=()=>{
+  window.onresize = () => {
     myChart.resize();
-    }
+  }
 }
 function init1() {
   var myChart1 = echarts.init(main1.value);
@@ -497,15 +497,15 @@ function init1() {
           borderWidth: 5,
           borderColor: '#fff'
         },
-        cursor:'default'
+        cursor: 'default'
       }
     ]
   }
   myChart1.setOption(option1);
   //屏幕自适应
-  window.onresize=()=>{
+  window.onresize = () => {
     myChart1.resize();
-    }
+  }
 };
 function init2() {
   var myChart2 = echarts.init(main2.value);
@@ -530,14 +530,14 @@ function init2() {
           borderWidth: 5,
           borderColor: '#fff'
         },
-         cursor:'default'
+        cursor: 'default'
       }
     ]
   };
   myChart2.setOption(option2);
-  window.onresize=()=>{
+  window.onresize = () => {
     myChart2.resize();
-    }
+  }
 }
 const data = ref({
   title: "FINI TESTING COMP",
@@ -625,65 +625,80 @@ const showMounth = (date: any) => {
   background-size: cover;
   height: 1200px;
   font-family: "Calibri";
-  @media screen and (max-width: 768px){
-      height: 2500px;
-    }
+
+  @media screen and (max-width: 768px) {
+    height: 2500px;
+  }
 }
 
 .wrap {
   display: flex;
   padding-top: 30px;
+
   .leftbox {
     width: 22%;
     height: 100%;
     position: relative;
-    @media screen and (max-width: 768px){
+
+    @media screen and (max-width: 768px) {
       display: none;
     }
-    
-    
+
+
   }
 
   .rightbox {
     width: 78%;
     height: 100%;
-    @media screen and (max-width: 768px){
-        width: 100vw;
-        transform: translateY(-30rem);
-      }
+
+    @media screen and (max-width: 768px) {
+      width: 100vw;
+      transform: translateY(-30rem);
+    }
+
     .content {
       width: 100%;
       // height: 100vh;
       display: flex;
       flex-wrap: wrap;
-      .persent{ 
-        color:#9FA0BF;
+
+      .persent {
+        color: #9FA0BF;
         font-weight: 400;
         font-size: 16px;
         font-family: 'Calibri';
         // margin-left: 14px;
       }
-      .desmidle{
+
+      .desmidle {
         margin: 0 10px 0 10px;
       }
-      @media screen and (max-width: 768px){
+
+      @media screen and (max-width: 768px) {
         flex-direction: column;
       }
+
       .pulic {
         display: flex;
-        justify-content: space-around;
+        // justify-content: space-around;
+        justify-content: space-between;
         margin-left: 55px;
+        align-items: flex-end;
       }
 
       .pulic1 {
         display: flex;
-        justify-content: space-around;
+        // justify-content: space-around;
+        justify-content: space-between;
+        align-items: flex-end;
         margin-left: 35px;
       }
 
       .pulic2 {
         display: flex;
-        justify-content: space-around;
+        // justify-content: space-around;
+        justify-content: space-between;
+        align-items: flex-end;
         margin-left: 5px;
       }
 
@@ -694,6 +709,8 @@ const showMounth = (date: any) => {
         min-width: 80px;
         justify-content: space-between;
         color: #647c8b;
+
+
       }
 
       .public-left1 {
@@ -744,49 +761,55 @@ const showMounth = (date: any) => {
         background-color: #2f5597;
         border-radius: 50%;
       }
-.yuan-title{
-  font-size: 19px;
-  font-family: 'Calibri';
-  color: #8e9eaa;
-}
+
+      .yuan-title {
+        font-size: 19px;
+        font-family: 'Calibri';
+        color: #8e9eaa;
+      }
+
       .yuan-title3 {
         margin-left: 75px;
         color: #5c6063;
         font-size: 18px;
         font-weight: 400;
         display: flex;
-      flex-direction: row-reverse;
-      // background-color: #20b109;
+        flex-direction: row-reverse;
+        // background-color: #20b109;
       }
+
       .yuan-title3-1 {
         margin-left: 52px;
         color: #5c6063;
         font-size: 18px;
         font-weight: 400;
       }
+
       .yuan-title2 {
         margin-left: 31px;
         color: #5c6063;
         font-size: 18px;
         font-weight: 400;
         display: flex;
-      flex-direction: row-reverse;
-      // background-color: #20b109;
+        flex-direction: row-reverse;
+        // background-color: #20b109;
       }
+
       .yuan-title2-1 {
         margin-left: 53px;
         color: #5c6063;
         font-size: 18px;
         font-weight: 400;
       }
+
       .yuan-title1 {
         margin-left: 55px;
         color: #516c7e;
         font-weight: bold;
         font-size: 25px;
         display: flex;
-      flex-direction: row-reverse;
-      // background-color: #20b109;
+        flex-direction: row-reverse;
+        // background-color: #20b109;
       }
 
       .yuan2 {
@@ -842,8 +865,8 @@ const showMounth = (date: any) => {
 
       .bottomleft-bouttom {
         transform: translateY(-150px);
-        // display: flex;
-        // flex-direction: column;
+        padding-right: 40px;
+        padding-left: 30px;
       }
 
       .topright-p {
@@ -857,22 +880,26 @@ const showMounth = (date: any) => {
         color: #415d6f;
         justify-content: space-between;
         width: 400px;
-        @media screen and (max-width: 768px){
+
+        @media screen and (max-width: 768px) {
           width: 80vw;
           transform: translateX(-6vw);
           font-size: 15rem;
         }
       }
-        .p-2-2 {
-          width: 28%; 
-          // margin-top: 20px;  
-          transform: translateY(5px); 
-          font-weight: 600;
-          font-size: 23px; 
-          @media screen and (max-width: 768px){
+
+      .p-2-2 {
+        width: 28%;
+        // margin-top: 20px;  
+        transform: translateY(5px);
+        font-weight: 600;
+        font-size: 23px;
+
+        @media screen and (max-width: 768px) {
           font-size: 20rem;
         }
-       // }
+
+        // }
       }
 
       .p-3 {
@@ -883,7 +910,8 @@ const showMounth = (date: any) => {
         margin-left: 50px;
         font-size: 20px;
         color: #415d6f;
-        @media screen and (max-width: 768px){
+
+        @media screen and (max-width: 768px) {
           width: 80vw;
           transform: translateX(-6vw);
           font-size: 16rem;
@@ -893,7 +921,8 @@ const showMounth = (date: any) => {
       .p-4 {
         margin-top: 3px;
         margin-left: 50px;
-        @media screen and (max-width: 768px){
+
+        @media screen and (max-width: 768px) {
           width: 80vw;
           transform: translateX(-6vw);
           font-size: 15rem;
@@ -906,7 +935,8 @@ const showMounth = (date: any) => {
         margin-right: 20px;
         color: #7e929f;
         font-size: 18px;
-        @media screen and (max-width: 768px){
+
+        @media screen and (max-width: 768px) {
           font-size: 14rem;
           transform: translateY(-2rem);
           margin-right: 4rem;
@@ -933,8 +963,9 @@ const showMounth = (date: any) => {
         font-size: 23px;
         color: #2a4a5e;
         font-family: 'Calibri';
+
         @media screen and (max-width: 768px) {
-        font-size: 20rem;
+          font-size: 20rem;
         }
       }
 
@@ -942,11 +973,13 @@ const showMounth = (date: any) => {
         width: 490px;
         height: 530px;
         background-color: #fff;
+
         @media screen and (max-width: 768px) {
-        width: 90vw;
-        margin-left: 5vw;
-       
+          width: 90vw;
+          margin-left: 5vw;
+
         }
+
         // background-color: red;
         .content-title {
           font-size: 25px;
@@ -956,7 +989,8 @@ const showMounth = (date: any) => {
           margin-left: 20px;
           margin-top: 15px;
           cursor: default;
-          @media screen and (max-width: 768px){
+
+          @media screen and (max-width: 768px) {
             font-size: 21rem;
           }
         }
@@ -967,12 +1001,14 @@ const showMounth = (date: any) => {
         height: 530px;
         background-color: #fff;
         margin-left: 20px;
-        @media screen and (max-width: 768px){
+
+        @media screen and (max-width: 768px) {
           width: 90vw;
           height: 60vh;
           margin-left: 5vw;
           margin-top: 2vh;
         }
+
         .topright-title {
           font-size: 25px;
           margin: 5px;
@@ -988,10 +1024,11 @@ const showMounth = (date: any) => {
         width: 490px;
         height: 432px;
         background-color: #fff;
-        @media screen and (max-width: 768px){
-        width: 90vw;
-        margin-left: 5vw;
-        margin-top: 2vh;
+
+        @media screen and (max-width: 768px) {
+          width: 90vw;
+          margin-left: 5vw;
+          margin-top: 2vh;
         }
       }
 
@@ -1001,10 +1038,11 @@ const showMounth = (date: any) => {
         height: 432px;
         background-color: #fff;
         margin-left: 20px;
-        @media screen and (max-width: 768px){
-        width: 90vw;
-        margin-left: 5vw;
-        margin-top: 2vh;
+
+        @media screen and (max-width: 768px) {
+          width: 90vw;
+          margin-left: 5vw;
+          margin-top: 2vh;
         }
       }
 
@@ -1041,7 +1079,8 @@ const showMounth = (date: any) => {
     font-size: 25px;
     color: #fff;
     font-weight: bold;
-    @media screen and (max-width: 768px){
+
+    @media screen and (max-width: 768px) {
       font-size: 20rem;
       font-weight: 400;
     }
@@ -1051,7 +1090,8 @@ const showMounth = (date: any) => {
 :deep(.el-calendar) {
   --el-calendar-border: none;
   cursor: default;
-  @media screen and (max-width: 768px){
+
+  @media screen and (max-width: 768px) {
     width: 80vw;
     margin-left: 5vw;
   }
@@ -1066,7 +1106,8 @@ const showMounth = (date: any) => {
   width: 410px;
   margin-left: 20px;
   font-family: "Calibri";
-  @media screen and (max-width: 768px){
+
+  @media screen and (max-width: 768px) {
     width: 71vw;
     transform: translate(-4vw);
   }
@@ -1078,10 +1119,11 @@ const showMounth = (date: any) => {
   background-color: red !important;
   padding-left: 10px 75px 27px !important;
   cursor: default;
-  @media screen and (max-width: 768px){
+
+  @media screen and (max-width: 768px) {
     width: 80vw;
     transform: translate(-4vw);
-   
+
   }
 }
 
diff --git a/src/views/login/components/Select.vue b/src/views/login/components/Select.vue
new file mode 100644
index 0000000..6b4d16c
--- /dev/null
+++ b/src/views/login/components/Select.vue
@@ -0,0 +1,222 @@
+<template>
+    <div class="selectWrap" v-if="showSelect" @click="preVant">
+        <div class="box">
+            <div class="content">
+                <div class="title">IPO Status</div>
+                <li>
+                    <div class="word" v-for="item in obj.ipoStatus" :key="item.key" @click="ipoStatusSlect(item.key)">
+                        <div class="check">
+                            <el-icon v-if="item.isSelcted">
+                                <Check />
+                            </el-icon>
+                        </div>
+                        <span>{{ item.value }}</span>
+                    </div>
+                </li>
+                <div class="title">tradingCurrency</div>
+                <li>
+                    <div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
+                        @click="tradingCurrencySlect(item.key)">
+                        <div class="check">
+                            <el-icon v-if="item.isSelcted">
+                                <Check />
+                            </el-icon>
+                        </div>
+                        <span>{{ item.value }}</span>
+                    </div>
+                </li>
+            </div>
+            <div class="footer">
+                <button @click="confirm">Apply</button>
+                <button @click="confirm">Cancel</button>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XSelect",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, defineExpose, reactive } from 'vue';
+const showSelect = ref(false)
+const confirm = () => {
+    showSelect.value = false;
+}
+const preVant = (e: any) => {
+    e.stopPropagation();
+}
+const obj = reactive({
+    ipoStatus: [{
+        key: 25,
+        value: 'Deal Initiated',
+        isSelcted: false
+    },
+    {
+        key: 30,
+        value: 'Public Offer Closed',
+        isSelcted: true
+    }, {
+        key: 35,
+        value: 'Application Validated',
+        isSelcted: true
+    }, {
+        key: 45,
+        value: 'Allotment Confirmed',
+        isSelcted: false
+    }, {
+        key: 50,
+        value: 'Money Settlement',
+        isSelcted: false
+    }, {
+        key: 55,
+        value: 'Allocation Confirmed',
+        isSelcted: false
+    }, {
+        key: 60,
+        value: 'Placing Approved',
+        isSelcted: false
+    }, {
+        key: 65,
+        value: 'Allotment Results Approved',
+        isSelcted: false
+    }, {
+        key: 70,
+        value: 'Trading Started',
+        isSelcted: false
+    }, {
+        key: 80,
+        value: 'Suspended',
+        isSelcted: false
+    }, {
+        key: 90,
+        value: 'Cancelled',
+        isSelcted: false
+    }],
+    tradingCurrency: [
+        {
+            key: 'HKD',
+            value: 'Hong Kong Dollar',
+            isSelcted: false
+        },
+        {
+            key: 'CNY',
+            value: 'Chinese Yuan',
+            isSelcted: true
+        },
+        {
+            key: 'USD',
+            value: 'United States Dollar',
+            isSelcted: false
+        }
+    ]
+})
+const ipoStatusSlect = (key: number) => {
+    obj.ipoStatus = obj.ipoStatus.map((item: any) => {
+        if (item.key == key) {
+            return { ...item, isSelcted: !item.isSelcted }
+        }
+        return item
+    })
+}
+const tradingCurrencySlect = (key: string) => {
+    obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
+        if (item.key == key) {
+            return { ...item, isSelcted: !item.isSelcted }
+        }
+        return item
+    })
+}
+defineExpose({
+    showSelect
+})
+</script>
+
+<style lang="scss" scoped>
+.selectWrap {
+    width: 800px;
+    height: 800px;
+    background-color: #fff;
+    border-radius: 20px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+
+    .box {
+        box-sizing: border-box;
+        padding: 10px 20px 20px 20px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .content {
+        .title {
+            font-size: 16px;
+            color: #8C979B;
+            margin-top: 10px;
+        }
+
+        li {
+            display: flex;
+            font-size: 18px;
+            flex-wrap: wrap;
+
+            .word {
+                margin-right: 10px;
+                margin-top: 5px;
+                border-radius: 20px;
+                // width: 50px;
+                height: 20px;
+                background-color: #F2F0F5;
+                padding: 5px 15px 5px 10px;
+                color: #6A7686;
+                display: flex;
+                justify-content: space-between;
+                cursor: pointer;
+
+                .check {
+                    width: 30px;
+
+                    span {
+                        line-height: 35px;
+                    }
+                }
+            }
+
+        }
+
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: row-reverse;
+        // margin-bottom: 20px;
+
+        button {
+            margin-right: 10px;
+            font-size: 18px;
+            border: none;
+            font-weight: 600;
+            background-color: #fff;
+            color: #334B57;
+            padding: 10px 20px 10px 20px;
+
+            &:hover {
+                background-color: #0F426F;
+                border-radius: 5px;
+                color: #fff;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 7da3238..fe33d7e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,76 +1,76 @@
 <template>
     <div class="login2">
         <div class="box w">
-        <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="header">
-                <div class="menu">
-                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
-                </div>
-                <!-- <input class="search" /> -->
-                <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
-                    class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
-                    <template #prefix>
-                        <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
-                    </template>
-                </el-autocomplete>
+            <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="header">
+                    <div class="menu">
+                        <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
+                    </div>
+                    <!-- <input class="search" /> -->
+                    <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
+                        class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
+                        <template #prefix>
+                            <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
+                        </template>
+                    </el-autocomplete>
 
-                <div class="dropdown">
-                    <img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
+                    <div class="dropdown">
+                        <img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
+
+                    </div>
+                    <div class="dropdown1">
+
+                        <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
+                        <Lang class="alert" ref="lang" />
+                        <Select ref="selectR" />
+                        <!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
+                    </div>
 
                 </div>
-                <div class="dropdown1">
-
-                    <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
-                    <Lang class="alert" ref="lang" />
-                    <SearchCup ref="SearchCupDom" class="searchCup" />
+                <div class="bigger">
+                    <Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
                 </div>
 
             </div>
-            <div class="bigger">
-                <Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
-            </div>
+            <div class="right">
+                <div class="right-top">
+                    <img src="@/assets/1x/1x/source1.png" />
+                    <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
+                </div>
+                <div class="right-bottom">
 
-        </div>
-        <div class="right">
-            <div class="right-top">
-                <img src="@/assets/1x/1x/source1.png" />
-                <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-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>
 
-                        <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>
 
-                        <!-- <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>
 
-                        <el-button size="small" @click="selectDate('next-month')">
-                            <img src="@/assets/1x/source12.png">
-                        </el-button>
-
-                    </template>
-                    <!-- <template #date-cell="{ data }">
+                        </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>
+                    </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>
         </div>
     </div>
-    </div>
-   
 </template>
 <script lang="ts">
 export default {
@@ -92,6 +92,8 @@ import { getDataFromId } from "@/api/mock/home"
 import { ElMessage } from 'element-plus'
 import SearchCup from "./components/SearchCup.vue";
 import Drawer from "./modelComponents/Drawer.vue";
+import Select from "./components/Select.vue";
+const selectR = ref();
 const dayValue = ref(new Date())
 const drawer = ref(false)
 const handleDrawer = (done: () => void) => {
@@ -433,13 +435,14 @@ const lang = ref()
 const SearchCupDom = ref()
 const handleShowLang = (e: any) => {
     e.stopPropagation()
-    SearchCupDom.value.showLang = false;
+    selectR.value.showSelect = false
     lang.value.showLang = !lang.value.showLang
 }
 const handleShowCup = (e: any) => {
     e.stopPropagation()
     lang.value.showLang = false;
-    SearchCupDom.value.showLang = !SearchCupDom.value.showLang
+    console.log(111)
+    selectR.value.showSelect = !selectR.value.showSelect
 }
 //路由传参
 const handleclick = (item: any) => {
@@ -457,8 +460,11 @@ const handleclick = (item: any) => {
 onMounted(() => {
     document.documentElement.onclick = function () {
 
-        if (SearchCupDom.value.showLang) {
-            SearchCupDom.value.showLang = false
+        // if (SearchCupDom.value.showLang) {
+        //     SearchCupDom.value.showLang = false
+        // }
+        if (selectR.value.showSelect) {
+            selectR.value.showSelect = false
         }
         if (lang.value.showLang) {
             lang.value.showLang = false
@@ -484,12 +490,13 @@ const showMounth = (date: any) => {
 // .el-calendar{
 //     font-family: "Calibri"
 // }
-.login2{
+.login2 {
     background-image: url("@/assets/1x/beijingtu.png");
-     background-repeat: no-repeat;
-     background-size: cover;
+    background-repeat: no-repeat;
+    background-size: cover;
 
 }
+
 .box {
     display: flex;
     justify-content: space-between;
@@ -817,10 +824,12 @@ const showMounth = (date: any) => {
 :deep(.el-calendar-table td.is-selected) {
     background-color: #e8ebee;
 }
+
 :deep(.el-calendar-table td.is-today .el-calendar-day) {
-    color: black ;
+    color: black;
     background-color: #e36466;
 }
+
 :deep(.el-calendar-table td.is-selected .el-calendar-day) {
     // background-color: #e36466;
     border: 5px solid #e36466;