ipo页面移动端适配

This commit is contained in:
zhuzhuxia233 2023-04-16 20:51:53 +08:00
parent f569b35229
commit 9c231fc2c3
5 changed files with 377 additions and 244 deletions

View File

@ -4,43 +4,67 @@
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<ul> <ul>
<li v-for="(item, index) in data.info" :key="index"> <li v-for="(item, index) in data.info" :key="index">
<div class="name"> <div class="llrr">
<div v-if="item.name">{{ item.name }}</div> <div class="left">
<div v-if="item.name2" class="name2">{{ item.name2 }}</div> <div class="name">
<div v-if="item.name">{{ item.name }}</div>
</div>
<div v-if="item.infos">
<div class="info" v-if="item.infos.length" v-for="(t, index) in item.infos" :key="index">{{ t }} </div>
<div v-if="item.infos">
<div class="info" v-if="item.infos.length" v-for="(t, index) in item.infos" :key="index">{{ t }}
</div>
<div class="info" v-else>-</div>
</div>
<div v-if="item.info || item.info2 || item.info2s">
<div class="info" :style="{
height: item.info2s && '30px',
}">
<div v-if="item.info">
<a :href="item.href" v-if="item.href">{{ item.info }}</a>
<span v-else>{{ item.info }}</span>
</div>
</div>
</div>
</div> </div>
<div class="info" v-else>-</div> <div class="right" v-if="item.name2 || item.info2 || item.info2s">
<div class="name">
</div> <div v-if="item.name2" class="name2">{{ item.name2 }}</div>
<div v-if="item.info || item.info2 || item.info2s">
<div class="info" :style="{
height: item.info2s && '30px',
}">
<div v-if="item.info">
<a :href="item.href" v-if="item.href">{{ item.info }}</a>
<span v-else>{{ item.info }}</span>
</div> </div>
<div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }"> <div v-if="item.info2 || item.info2s">
<a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a> <div class="info" :style="{
<span v-else>{{ item.info2 }}</span> height: item.info2s && '30px',
</div> }">
<div v-if="item.info2s" class="info2"> <div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }">
<div v-for="(t, index) in item.info2s" :key="index">{{ t }}</div> <a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a>
<span v-else>{{ item.info2 }}</span>
</div>
<div v-if="item.info2s" class="info2">
<div v-for="(t, index) in item.info2s" :key="index">{{ t }}</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="table" v-if="item.table"> <div class="table" v-if="item.table">
<el-table :data="item.table.lists" stripe style="width: 100%;"> <el-table :data="item.table.lists" stripe style="width: 100%;">
<el-table-column v-for="(title, index) in item.table.title" :prop="title.content" <el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
:label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px; color:red" :label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px;"
:align="title.align" :key="index" /> :align="title.align" :key="index" />
</el-table> </el-table>
</div> </div>
<div class="Modeltable" v-if="item.table">
<el-table :data="item.table.lists" stripe style="width: 100%;">
<el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
:label="title.header" :width="320 * (title.width / 100)" :align="title.align" :key="index" />
</el-table>
</div>
</li> </li>
@ -84,6 +108,38 @@ const data = defineProps<{ info: obj[], title: string }>()
border-left: 15px solid #98C2F2; border-left: 15px solid #98C2F2;
margin-bottom: 20px; margin-bottom: 20px;
@media screen and (max-width: 768px) {
overflow: hidden;
}
.Modeltable {
display: none;
@media screen and (max-width: 768px) {
display: block;
margin-top: 10rem;
:deep(.el-table) {
color: #355D80;
}
:deep(.el-table thead) {
color: #355D80;
}
:deep(.cell) {
font-family: 'Calibri';
}
}
}
@media screen and (max-width: 768px) {
margin: 0 15rem 0 15rem;
// overflow: hidden;
}
// height: 600px; // height: 600px;
.title { .title {
font-size: 27px; font-size: 27px;
@ -99,19 +155,40 @@ const data = defineProps<{ info: obj[], title: string }>()
// flex-direction: column; // flex-direction: column;
margin-top: 15px; margin-top: 15px;
li { li {
margin-bottom: 25px; margin-bottom: 25px;
.llrr {
display: flex;
@media screen and (max-width: 768px) {
flex-direction: column;
}
}
.left {
width: 450px;
}
.right {
width: 200px;
@media screen and (max-width: 768px) {
margin-top: 10rem;
}
}
.name { .name {
color: #8AA1B6; color: #8AA1B6;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
.name2 { .name2 {}
position: absolute;
top: 0px;
left: 450px;
}
} }
@ -125,21 +202,22 @@ const data = defineProps<{ info: obj[], title: string }>()
position: relative; position: relative;
font-family: "Calibri"; font-family: "Calibri";
a { a {
color: #355D80; color: #355D80;
} }
.info2 { .info2 {}
position: absolute;
top: 0px;
left: 450px;
}
} }
.table { .table {
width: 800px; width: 800px;
margin-top: 20px; margin-top: 20px;
@media screen and (max-width: 768px) {
display: none;
}
:deep(.el-table) { :deep(.el-table) {
color: #355D80; color: #355D80;
} }
@ -149,8 +227,7 @@ const data = defineProps<{ info: obj[], title: string }>()
} }
:deep(.cell) { :deep(.cell) {
// max-width: 310px;
// color: red;
font-family: 'Calibri'; font-family: 'Calibri';
} }
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="headerWrap"> <div class="headerWrap">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer" <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false" > style="background-color: #1C3F56;" :with-header="false">
<Drawer /> <Drawer />
</el-drawer> </el-drawer>
<div class="hleft"> <div class="hleft">
@ -9,16 +9,16 @@
<div class="menu"> <div class="menu">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer"> <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
</div> </div>
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div> <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
</div> </div>
<div class="search" @click="handlesearch"> <div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片"> <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
</div> </div>
<div class="langWrap"> <div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second"> <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang"/> <Lang ref="lang" class="lang" />
</div> </div>
</div> </div>
<!-- <div class="downLoad"> <!-- <div class="downLoad">
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div> <div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
@ -35,14 +35,14 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance ,onMounted,onUnmounted} from 'vue' import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue' import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { ref } from 'vue' import { ref } from 'vue'
import Lang from "@/views/login/components/Lang.vue"; import Lang from "@/views/login/components/Lang.vue";
const lang = ref() const lang = ref()
const drawer = ref(false) const drawer = ref(false)
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const handlesearch = ()=>{ const handlesearch = () => {
proxy.$router.push("/home") proxy.$router.push("/home")
} }
const handleDrawer = (done: () => void) => { const handleDrawer = (done: () => void) => {
@ -51,9 +51,9 @@ const handleDrawer = (done: () => void) => {
const openDrawer = () => { const openDrawer = () => {
drawer.value = true; drawer.value = true;
} }
const handleShowLang=(e:any)=>{ const handleShowLang = (e: any) => {
console.log(1111) console.log(1111)
e.stopPropagation() e.stopPropagation()
lang.value.showLang = !lang.value.showLang lang.value.showLang = !lang.value.showLang
} }
onMounted(() => { onMounted(() => {
@ -68,7 +68,7 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.langWrap{ .langWrap {
// position: absolute; // position: absolute;
// // top:-20px; // // top:-20px;
// left: 260px; // left: 260px;
@ -76,51 +76,65 @@ onUnmounted(() => {
// align-items: end; // align-items: end;
position: relative; position: relative;
margin-left: 15px; margin-left: 15px;
.second {
width: 32px; @media screen and (max-width: 768px) {
height: 36px; display: none;
margin-top: 4px; }
&:hover {
transform: scale(1.2); .second {
}
width: 32px;
height: 36px;
margin-top: 4px;
&:hover {
transform: scale(1.2);
} }
} }
.lang{ }
position: absolute;
top:50px; .lang {
left: -50px; position: absolute;
} top: 50px;
left: -50px;
}
.headerWrap { .headerWrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media screen and (max-width: 768px){
.left-1{ @media screen and (max-width: 768px) {
.left-1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 80vw; width: 80vw;
} }
} }
.hleft { .hleft {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: fit-content; width: fit-content;
position: relative; position: relative;
.menu{
display: none; .menu {
@media screen and (max-width: 768px){ display: none;
display: block;
@media screen and (max-width: 768px) {
display: block;
}
}
}
}
.title { .title {
color: #2B4A60; color: #2B4A60;
font-size: 45px; font-size: 45px;
font-weight:bolder; font-weight: bolder;
@media screen and (max-width: 768px){
font-size: 26rem; @media screen and (max-width: 768px) {
transform: translateX(-60rem); font-size: 26rem;
transform: translateX(-60rem);
} }
} }
@ -141,7 +155,8 @@ onUnmounted(() => {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
transform: translateY(-0.5vh); transform: translateY(-0.5vh);
} }
} }
@ -151,6 +166,7 @@ onUnmounted(() => {
display: flex; display: flex;
height: 30px; height: 30px;
align-items: center; align-items: center;
.report { .report {
font-size: 28px; font-size: 28px;
color: #1C3F56; color: #1C3F56;

View File

@ -28,9 +28,13 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
.item { .item {
margin-top: 18px; margin-top: 18px;
display: flex; display: flex;
// @media screen and (max-width: 768px){
// width: 100vw; @media screen and (max-width: 768px) {
// } margin-top: 0px;
width: 100vw;
overflow-x: scroll;
}
a { a {
// margin-left: 5px; // margin-left: 5px;
padding: 5px 10px; padding: 5px 10px;
@ -39,6 +43,8 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
font-weight: 700; font-weight: 700;
border-radius: 30px; border-radius: 30px;
text-decoration: none; text-decoration: none;
width: fit-content;
white-space: nowrap;
&:hover { &:hover {
background-color: #1C3F56; background-color: #1C3F56;

View File

@ -341,8 +341,8 @@ const content = ref()
onMounted( onMounted(
() => { () => {
data.value = JSON.parse(localStorage.getItem('itemData') as string) data.value = JSON.parse(localStorage.getItem('itemData') as string)
getreferencedata() // getreferencedata()
// text(); text();
} }
) )
async function text() { async function text() {
@ -687,11 +687,23 @@ function setTimeTable(mockRes: any) {
} }
] ]
Timetable.value = Timetable.value.map(item => { Timetable.value = Timetable.value.map(item => {
const isMobel = 768 >= document.documentElement.clientWidth;
item.table.lists = item.table.lists.map((item, index) => { item.table.lists = item.table.lists.map((item, index) => {
const { number, persent } = arr[0].table.lists[index] const { number, persent } = arr[0].table.lists[index]
return { ...item, number, persent } return { ...item, number, persent }
}) })
if (isMobel) {
item.table.title = item.table.title.filter((element: any) => element.header)
item.table.title = item.table.title.map((element: any, index: number) => {
if (index == 0) {
element.width = 55;
}
return element
})
}
return { ...item, info: arr[0].info, info2: arr[0].info2 } return { ...item, info: arr[0].info, info2: arr[0].info2 }
}) })
function timeTo(time: string | null | undefined) { function timeTo(time: string | null | undefined) {
if (time) { if (time) {
@ -762,6 +774,13 @@ function setDownLoad() {
padding-top: 30px; padding-top: 30px;
height: 100%; height: 100%;
@media screen and (max-width: 768px) {
padding-top: 10rem;
width: 100vw;
overflow: hidden;
}
.leftbox { .leftbox {
width: 22%; width: 22%;
height: 100%; height: 100%;
@ -776,6 +795,13 @@ function setDownLoad() {
width: 78%; width: 78%;
height: 100%; height: 100%;
padding-left: 20px; padding-left: 20px;
@media screen and (max-width: 768px) {
padding-top: 0px;
padding-left: 0px;
width: 100vw;
overflow: hidden;
}
} }
.content { .content {

View File

@ -1,45 +1,43 @@
<template> <template>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
<img src="@/assets/1x/source13.png" class="icon1"/> <img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
<img src="@/assets/1x/1x/source1.png" class="icon2"/> <img src="@/assets/1x/1x/source1.png" class="icon2" />
<h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3> <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
</div> </div>
<div class="right-bottom"> <div class="right-bottom">
<el-calendar ref="calendar" v-model="dayValue"> <el-calendar ref="calendar" v-model="dayValue">
<template #header="{ date }"> <template #header="{ date }">
<el-button size="small" @click="selectDate('prev-month')"> <el-button size="small" @click="selectDate('prev-month')">
<img src="@/assets/1x/source11.png"> <img src="@/assets/1x/source11.png">
</el-button> </el-button>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> --> <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ showMounth(date) }}</span> <span class="month">{{ showMounth(date) }}</span>
<el-button size="small" @click="selectDate('next-month')"> <el-button size="small" @click="selectDate('next-month')">
<img src="@/assets/1x/source12.png"> <img src="@/assets/1x/source12.png">
</el-button> </el-button>
</template> </template>
<!-- <template #date-cell="{ data }"> <!-- <template #date-cell="{ data }">
</template> --> </template> -->
</el-calendar> </el-calendar>
</div> </div>
<div class="right-bottom1"> <div class="right-bottom1">
<Event v-if="Eventdata.length" :data="Eventdata" /> <Event v-if="Eventdata.length" :data="Eventdata" />
<div v-else class="right-bottom-title1">No event</div> <div v-else class="right-bottom-title1">No event</div>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: "ipocalendar", name: "ipocalendar",
}; };
</script> </script>
@ -50,6 +48,7 @@ import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue'; import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo"; import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date()) const dayValue = ref(new Date())
const calendar = ref() const calendar = ref()
@ -82,84 +81,92 @@ const setEventdata = (EventD: any) => {
}) })
} }
const backRouter = () => {
proxy.$router.go(-1)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
.right { .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; width: 100vw;
background-color: #ffffff; box-sizing: border-box;
height: 400px; height: 100%;
margin-top: 25px; padding-bottom: 80px;
// margin-left: 20px; background-color: #1f4055;
// transform: translateX(-50rem); z-index: 1;
.month { border: #1f4055 1px solid;
font-size: 25rem;
color: #000000; .right-top {
font-weight: bold; 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 { .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; width: 420px;
background-color: #ffffff; background-color: #ffffff;
height: 50vh; height: 50vh;
@ -182,71 +189,72 @@ const setEventdata = (EventD: any) => {
color: #000000 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> </style>