ipostatus弹窗

src/views/dashBoard/index.vue

@@ -226,23 +226,23 @@ const InitialAllocationPublic=ref('')
 const FinalAllocationPublic = 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);
+  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)
@@ -264,8 +264,8 @@ PublicOfferY1.value=(result as any).data[0].graph.map((item:any)=>{
   init();
 }
 onMounted(() => {
-  //setBarRight();//假的bar接口
+  setBarRight();//假的bar接口
-  setBar()//真的接口
+  // setBar()//真的接口
 })
 const getdatatime = async () => {
   const res = await getHomeIpo(1)
@@ -274,13 +274,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;
 
@@ -625,6 +625,7 @@ const showMounth = (date: any) => {
   background-size: cover;
   height: 1200px;
   font-family: "Calibri";
+
   @media screen and (max-width: 768px) {
     height: 2500px;
   }
@@ -633,10 +634,12 @@ const showMounth = (date: any) => {
 .wrap {
   display: flex;
   padding-top: 30px;
+
   .leftbox {
     width: 22%;
     height: 100%;
     position: relative;
+
     @media screen and (max-width: 768px) {
       display: none;
     }
@@ -647,15 +650,18 @@ const showMounth = (date: any) => {
   .rightbox {
     width: 78%;
     height: 100%;
+
     @media screen and (max-width: 768px) {
       width: 100vw;
       transform: translateY(-30rem);
     }
+
     .content {
       width: 100%;
       // height: 100vh;
       display: flex;
       flex-wrap: wrap;
+
       .persent {
         color: #9FA0BF;
         font-weight: 400;
@@ -663,27 +669,36 @@ const showMounth = (date: any) => {
         font-family: 'Calibri';
         // margin-left: 14px;
       }
+
       .desmidle {
         margin: 0 10px 0 10px;
       }
+
       @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 {
         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) {
           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) {
           font-size: 20rem;
         }
+
         // }
       }
 
@@ -883,6 +910,7 @@ const showMounth = (date: any) => {
         margin-left: 50px;
         font-size: 20px;
         color: #415d6f;
+
         @media screen and (max-width: 768px) {
           width: 80vw;
           transform: translateX(-6vw);
@@ -893,6 +921,7 @@ const showMounth = (date: any) => {
       .p-4 {
         margin-top: 3px;
         margin-left: 50px;
+
         @media screen and (max-width: 768px) {
           width: 80vw;
           transform: translateX(-6vw);
@@ -906,6 +935,7 @@ const showMounth = (date: any) => {
         margin-right: 20px;
         color: #7e929f;
         font-size: 18px;
+
         @media screen and (max-width: 768px) {
           font-size: 14rem;
           transform: translateY(-2rem);
@@ -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,6 +989,7 @@ const showMounth = (date: any) => {
           margin-left: 20px;
           margin-top: 15px;
           cursor: default;
+
           @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) {
           width: 90vw;
           height: 60vh;
           margin-left: 5vw;
           margin-top: 2vh;
         }
+
         .topright-title {
           font-size: 25px;
           margin: 5px;
@@ -988,6 +1024,7 @@ const showMounth = (date: any) => {
         width: 490px;
         height: 432px;
         background-color: #fff;
+
         @media screen and (max-width: 768px) {
           width: 90vw;
           margin-left: 5vw;
@@ -1001,6 +1038,7 @@ const showMounth = (date: any) => {
         height: 432px;
         background-color: #fff;
         margin-left: 20px;
+
         @media screen and (max-width: 768px) {
           width: 90vw;
           margin-left: 5vw;
@@ -1041,6 +1079,7 @@ const showMounth = (date: any) => {
     font-size: 25px;
     color: #fff;
     font-weight: bold;
+
     @media screen and (max-width: 768px) {
       font-size: 20rem;
       font-weight: 400;
@@ -1051,6 +1090,7 @@ const showMounth = (date: any) => {
 :deep(.el-calendar) {
   --el-calendar-border: none;
   cursor: default;
+
   @media screen and (max-width: 768px) {
     width: 80vw;
     margin-left: 5vw;
@@ -1066,6 +1106,7 @@ const showMounth = (date: any) => {
   width: 410px;
   margin-left: 20px;
   font-family: "Calibri";
+
   @media screen and (max-width: 768px) {
     width: 71vw;
     transform: translate(-4vw);
@@ -1078,6 +1119,7 @@ const showMounth = (date: any) => {
   background-color: red !important;
   padding-left: 10px 75px 27px !important;
   cursor: default;
+
   @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
@@ -490,6 +496,7 @@ const showMounth = (date: any) => {
     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;
     background-color: #e36466;
 }
+
 :deep(.el-calendar-table td.is-selected .el-calendar-day) {
     // background-color: #e36466;
     border: 5px solid #e36466;