移动端日历页

This commit is contained in:
zzy 2023-04-14 18:15:01 +08:00
parent 62d03da068
commit a68f3c92b9
6 changed files with 282 additions and 15 deletions

BIN
dist.zip

Binary file not shown.

View File

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

View File

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

View File

@ -258,17 +258,20 @@ const setBarRight = async () => {
const setBar = async () => { const setBar = async () => {
const ipoID = localStorage.getItem('ipoID') const ipoID = localStorage.getItem('ipoID')
const result = await getIpo(ipoID as string) 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); 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 + "%";
@ -276,8 +279,8 @@ const setBar = async () => {
init(); init();
} }
onMounted(() => { onMounted(() => {
// setBarRight();//bar // setBarRight();
setBar()// setBar()
}) })
const getdatatime = async () => { const getdatatime = async () => {
const res = await getHomeIpo(1) const res = await getHomeIpo(1)

View File

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

View File

@ -62,10 +62,24 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue" import { ref } from "vue"
import { getCurrentInstance, onUnmounted } from 'vue'
const { proxy } = (getCurrentInstance() as any)
const state = ref(1) const state = ref(1)
// const drawer = ref(true) // const drawer = ref(true)
const setState = (number: number) => { const setState = (number: number) => {
state.value = 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 = () => { // const openDrawer = () => {
// drawer.value = false; // drawer.value = false;