ipostatus弹窗

src/views/dashBoard/index.vue

@@ -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()
@@ -184,7 +184,7 @@ 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;
+    data.value = obj;
     getreferencedata()
     getdatatime()
   },
@@ -217,55 +217,55 @@ const LineData = reactive({
   lines: [] as lineObje[],
   ids: [] as any
 })
-const PublicOfferX1=ref<string[]>([])
+const PublicOfferX1 = ref<string[]>([])
-const PublicOfferY1=ref<string[]>([])
+const PublicOfferY1 = ref<string[]>([])
-const PublicOfferZ1=ref<string[]>([])
+const PublicOfferZ1 = ref<string[]>([])
-const PublicOfferX=ref<string[]>([])
+const PublicOfferX = ref<string[]>([])
-const PublicOfferY=ref<string[]>([])
+const PublicOfferY = ref<string[]>([])
-const InitialAllocationPublic=ref('')
+const InitialAllocationPublic = ref('')
-const FinalAllocationPublic=ref('')
+const FinalAllocationPublic = ref('')
-const InitialAllocationInstitutional=ref('')
+const InitialAllocationInstitutional = ref('')
 const FinalAllocationInstitutional = ref('')
-// const setBarRight=async ()=>{
+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);
-//   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(()=>{
+const setBar = async () => {
-  //setBarRight();//假的bar接口
+  const ipoID = localStorage.getItem('ipoID')
-  setBar()//真的接口
+  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 + "%";
+  init();
+}
+onMounted(() => {
+  setBarRight();//假的bar接口
+  // setBar()//真的接口
 })
 const getdatatime = async () => {
   const res = await getHomeIpo(1)
@@ -274,15 +274,15 @@ 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;
+  const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;
 
 
   startDate.value = bookOpenDate;
@@ -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 + "%";
+  FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
-  FinalAllocationInstitutional.value=Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
+  FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
   quantity.value = res.overallIpoShares
   init1()
   init2()
@@ -405,7 +405,7 @@ function init() {
     },
     xAxis: {
       // data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
-      data:PublicOfferX1.value
+      data: PublicOfferX1.value
     },
     yAxis: [
       {
@@ -457,9 +457,9 @@ function init() {
         // }
       },
       {
-        name:proxy.$t('dashboard.QuantityMillion'),
+        name: proxy.$t('dashboard.QuantityMillion'),
-        type:'bar',
+        type: 'bar',
-        data:PublicOfferY1.value,
+        data: PublicOfferY1.value,
         barWidth: '40%',
         itemStyle: {
           color: '#f6caae'
@@ -469,7 +469,7 @@ function init() {
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
-  window.onresize=()=>{
+  window.onresize = () => {
     myChart.resize();
   }
 }
@@ -497,13 +497,13 @@ function init1() {
           borderWidth: 5,
           borderColor: '#fff'
         },
-        cursor:'default'
+        cursor: 'default'
       }
     ]
   }
   myChart1.setOption(option1);
   //屏幕自适应
-  window.onresize=()=>{
+  window.onresize = () => {
     myChart1.resize();
   }
 };
@@ -530,12 +530,12 @@ function init2() {
           borderWidth: 5,
           borderColor: '#fff'
         },
-         cursor:'default'
+        cursor: 'default'
       }
     ]
   };
   myChart2.setOption(option2);
-  window.onresize=()=>{
+  window.onresize = () => {
     myChart2.resize();
   }
 }
@@ -625,7 +625,8 @@ const showMounth = (date: any) => {
   background-size: cover;
   height: 1200px;
   font-family: "Calibri";
-  @media screen and (max-width: 768px){
+
+  @media screen and (max-width: 768px) {
     height: 2500px;
   }
 }
@@ -633,11 +634,13 @@ const showMounth = (date: any) => {
 .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;
     }
 
@@ -647,43 +650,55 @@ const showMounth = (date: any) => {
   .rightbox {
     width: 78%;
     height: 100%;
-    @media screen and (max-width: 768px){
+
+    @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,11 +761,13 @@ const showMounth = (date: any) => {
         background-color: #2f5597;
         border-radius: 50%;
       }
-.yuan-title{
+
+      .yuan-title {
         font-size: 19px;
         font-family: 'Calibri';
         color: #8e9eaa;
-}
+      }
+
       .yuan-title3 {
         margin-left: 75px;
         color: #5c6063;
@@ -758,12 +777,14 @@ const showMounth = (date: any) => {
         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;
@@ -773,12 +794,14 @@ const showMounth = (date: any) => {
         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;
@@ -842,8 +865,8 @@ const showMounth = (date: any) => {
 
       .bottomleft-bouttom {
         transform: translateY(-150px);
-        // display: flex;
+        padding-right: 40px;
-        // flex-direction: column;
+        padding-left: 30px;
       }
 
       .topright-p {
@@ -857,21 +880,25 @@ 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){
+
+        @media screen and (max-width: 768px) {
           font-size: 20rem;
         }
+
         // }
       }
 
@@ -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,6 +963,7 @@ const showMounth = (date: any) => {
         font-size: 23px;
         color: #2a4a5e;
         font-family: 'Calibri';
+
         @media screen and (max-width: 768px) {
           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;
 
         }
+
         // 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,7 +1024,8 @@ const showMounth = (date: any) => {
         width: 490px;
         height: 432px;
         background-color: #fff;
-        @media screen and (max-width: 768px){
+
+        @media screen and (max-width: 768px) {
           width: 90vw;
           margin-left: 5vw;
           margin-top: 2vh;
@@ -1001,7 +1038,8 @@ const showMounth = (date: any) => {
         height: 432px;
         background-color: #fff;
         margin-left: 20px;
-        @media screen and (max-width: 768px){
+
+        @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,7 +1119,8 @@ 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);
 

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>

src/views/login/index.vue

@@ -26,7 +26,8 @@
 
                         <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
                         <Lang class="alert" ref="lang" />
-                    <SearchCup ref="SearchCupDom" class="searchCup" />
+                        <Select ref="selectR" />
+                        <!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
                     </div>
 
                 </div>
@@ -70,7 +71,6 @@
             </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) {
+        // if (SearchCupDom.value.showLang) {
-            SearchCupDom.value.showLang = false
+        //     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;
 
 }
+
 .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;