ipo页面移动端适配

src/views/IPO/components/IpoContent.vue

@@ -4,13 +4,14 @@
         <div class="title">{{ title }}</div>
         <ul>
             <li v-for="(item, index) in data.info" :key="index">
+                <div class="llrr">
+                    <div class="left">
                         <div class="name">
                             <div v-if="item.name">{{ item.name }}</div>
-                    <div v-if="item.name2" class="name2">{{ item.name2 }}</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 class="info" v-else>-</div>
@@ -25,6 +26,20 @@
                                     <span v-else>{{ item.info }}</span>
 
                                 </div>
+
+                            </div>
+                        </div>
+                    </div>
+                    <div class="right" v-if="item.name2 || item.info2 || item.info2s">
+                        <div class="name">
+
+                            <div v-if="item.name2" class="name2">{{ item.name2 }}</div>
+
+                        </div>
+                        <div v-if="item.info2 || item.info2s">
+                            <div class="info" :style="{
+                                height: item.info2s && '30px',
+                            }">
                                 <div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }">
                                     <a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a>
                                     <span v-else>{{ item.info2 }}</span>
@@ -34,13 +49,22 @@
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </div>
+
                 <div class="table" 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="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" />
                     </el-table>
                 </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>
@@ -84,6 +108,38 @@ const data = defineProps<{ info: obj[], title: string }>()
     border-left: 15px solid #98C2F2;
     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;
     .title {
         font-size: 27px;
@@ -99,19 +155,40 @@ const data = defineProps<{ info: obj[], title: string }>()
         // flex-direction: column;
         margin-top: 15px;
 
+
+
         li {
             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 {
                 color: #8AA1B6;
                 font-size: 12px;
                 position: relative;
 
-                .name2 {
+                .name2 {}
-                    position: absolute;
+
-                    top: 0px;
-                    left: 450px;
-                }
 
 
             }
@@ -125,21 +202,22 @@ const data = defineProps<{ info: obj[], title: string }>()
                 position: relative;
                 font-family: "Calibri";
 
+
                 a {
                     color: #355D80;
                 }
 
-                .info2 {
+                .info2 {}
-                    position: absolute;
-                    top: 0px;
-                    left: 450px;
-                }
             }
 
             .table {
                 width: 800px;
                 margin-top: 20px;
 
+                @media screen and (max-width: 768px) {
+                    display: none;
+                }
+
                 :deep(.el-table) {
                     color: #355D80;
                 }
@@ -149,8 +227,7 @@ const data = defineProps<{ info: obj[], title: string }>()
                 }
 
                 :deep(.cell) {
-                    // max-width: 310px;
+
-                    // color: red;
                     font-family: 'Calibri';
                 }
             }

src/views/IPO/components/IpoHeader.vue

@@ -76,24 +76,33 @@ onUnmounted(() => {
     //   align-items: end;
     position: relative;
     margin-left: 15px;
+
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
+
     .second {
 
         width: 32px;
         height: 36px;
         margin-top: 4px;
+
         &:hover {
             transform: scale(1.2);
         }
     }
 }
+
 .lang {
     position: absolute;
     top: 50px;
     left: -50px;
 }
+
 .headerWrap {
     display: flex;
     justify-content: space-between;
+
     @media screen and (max-width: 768px) {
 
         .left-1 {
@@ -102,22 +111,27 @@ onUnmounted(() => {
             width: 80vw;
         }
     }
+
     .hleft {
         display: flex;
         justify-content: space-between;
         width: fit-content;
         position: relative;
+
         .menu {
             display: none;
+
             @media screen and (max-width: 768px) {
                 display: block;
 
             }
         }
+
         .title {
             color: #2B4A60;
             font-size: 45px;
             font-weight: bolder;
+
             @media screen and (max-width: 768px) {
                 font-size: 26rem;
                 transform: translateX(-60rem);
@@ -141,6 +155,7 @@ onUnmounted(() => {
                 width: 18px;
                 height: 18px;
             }
+
             @media screen and (max-width: 768px) {
                 transform: translateY(-0.5vh);
             }
@@ -151,6 +166,7 @@ onUnmounted(() => {
         display: flex;
         height: 30px;
         align-items: center;
+
         .report {
             font-size: 28px;
             color: #1C3F56;

src/views/IPO/components/IpoNav.vue

@@ -28,9 +28,13 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
 .item {
     margin-top: 18px;
     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 {
         // margin-left: 5px;
         padding: 5px 10px;
@@ -39,6 +43,8 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
         font-weight: 700;
         border-radius: 30px;
         text-decoration: none;
+        width: fit-content;
+        white-space: nowrap;
 
         &:hover {
             background-color: #1C3F56;

src/views/IPO/index.vue

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

src/views/IpoCalendar/index.vue

@@ -1,8 +1,7 @@
 <template>
- 
     <div class="right">
         <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" />
             <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
         </div>
@@ -34,7 +33,6 @@
 
         </div>
     </div>
-
 </template>
 
 <script lang="ts">
@@ -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,6 +81,9 @@ const setEventdata = (EventD: any) => {
 
     })
 }
+const backRouter = () => {
+    proxy.$router.go(-1)
+}
 </script>
 
 <style lang="scss"  scoped>
@@ -94,6 +96,7 @@ const setEventdata = (EventD: any) => {
         background-color: #1f4055;
         z-index: 1;
         border: #1f4055 1px solid;
+
         .right-top {
             display: flex;
             // margin-left: 40px;
@@ -106,11 +109,13 @@ const setEventdata = (EventD: any) => {
                 color: #ffffff;
                 margin-left: 10px;
             }
+
             .icon1 {
                 width: 25rem;
                 height: 25rem;
                 margin-left: 30rem;
             }
+
             .icon2 {
                 width: 25rem;
                 height: 25rem;
@@ -123,6 +128,7 @@ const setEventdata = (EventD: any) => {
             background-color: #ffffff;
             height: 400px;
             margin-top: 25px;
+
             // margin-left: 20px;
             // transform: translateX(-50rem);
             .month {
@@ -159,6 +165,7 @@ const setEventdata = (EventD: any) => {
         }
 
     }
+
     .right-bottom1 {
         width: 420px;
         background-color: #ffffff;
@@ -182,6 +189,7 @@ const setEventdata = (EventD: any) => {
             color: #000000
         }
     }
+
     :deep(.el-button--small) {
         border: none
     }
@@ -195,6 +203,7 @@ const setEventdata = (EventD: any) => {
         width: 100vw;
         font-family: "Calibri";
     }
+
     :deep(.el-calendar-table td) {
         border: none;
         text-align: center;
@@ -248,5 +257,4 @@ const setEventdata = (EventD: any) => {
         color: red;
     }
 }
-
 </style>