ipo页面移动端适配
This commit is contained in:
zhuzhuxia233
+170
-162
@@ -1,45 +1,43 @@
|
||||
<template>
|
||||
|
||||
<div class="right">
|
||||
<div class="right-top">
|
||||
<img src="@/assets/1x/source13.png" class="icon1"/>
|
||||
<img src="@/assets/1x/1x/source1.png" class="icon2"/>
|
||||
<h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
|
||||
</div>
|
||||
<div class="right-bottom">
|
||||
<div class="right-top">
|
||||
<img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
|
||||
<img src="@/assets/1x/1x/source1.png" class="icon2" />
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "ipocalendar",
|
||||
name: "ipocalendar",
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -50,6 +48,7 @@ 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()
|
||||
@@ -82,84 +81,92 @@ const setEventdata = (EventD: any) => {
|
||||
|
||||
})
|
||||
}
|
||||
const backRouter = () => {
|
||||
proxy.$router.go(-1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 768px){
|
||||
@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;
|
||||
}
|
||||
.icon1{
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
margin-left: 30rem;
|
||||
}
|
||||
.icon2{
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
margin-left: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
width: 100vw;
|
||||
background-color: #ffffff;
|
||||
height: 400px;
|
||||
margin-top: 25px;
|
||||
// margin-left: 20px;
|
||||
// transform: translateX(-50rem);
|
||||
.month {
|
||||
font-size: 25rem;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
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;
|
||||
}
|
||||
|
||||
.icon1 {
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
margin-left: 30rem;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
margin-left: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
width: 100vw;
|
||||
background-color: #ffffff;
|
||||
height: 400px;
|
||||
margin-top: 25px;
|
||||
|
||||
// margin-left: 20px;
|
||||
// transform: translateX(-50rem);
|
||||
.month {
|
||||
font-size: 25rem;
|
||||
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 {
|
||||
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;
|
||||
@@ -182,71 +189,72 @@ const setEventdata = (EventD: any) => {
|
||||
color: #000000
|
||||
}
|
||||
}
|
||||
:deep(.el-button--small) {
|
||||
border: none
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
|
||||
: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>
|
||||
Reference in New Issue
Block a user