移动端日历页

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/views/IpoCalendar/index.vue

@@ -0,0 +1,241 @@
+<template>
+ 
+    <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-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
+        }
+
+    })
+}
+</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;
+        }
+    }
+
+    .right-bottom {
+        width: 100vw;
+        background-color: #ffffff;
+        height: 400px;
+        margin-top: 40px;
+        // margin-left: 20px;
+        // transform: translateX(-50rem);
+        .month {
+            font-size: 28px;
+            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/index.vue

@@ -258,17 +258,20 @@ const setBarRight = async () => {
 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;
-  });
-
-
+  // console.log(ipoID,(result as any).data[0]);
+  console.log(ipoID,(result as any).data[0]);
+  
+  //  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 + "%";
 
@@ -276,8 +279,8 @@ const setBar = async () => {
   init();
 }
 onMounted(() => {
-  // setBarRight();//假的bar接口
-  setBar()//真的接口
+  // setBarRight();
+  setBar()
 })
 const getdatatime = async () => {
   const res = await getHomeIpo(1)

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

@@ -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;