ipo页面移动端适配

src/views/IPO/components/IpoContent.vue

@@ -4,43 +4,67 @@
         <div class="title">{{ title }}</div>
         <ul>
             <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 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 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 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

@@ -1,7 +1,7 @@
 <template>
     <div class="headerWrap">
         <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 />
         </el-drawer>
         <div class="hleft">
@@ -9,16 +9,16 @@
                 <div class="menu">
                     <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
                 </div>
-            <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
+                <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
             </div>
 
             <div class="search" @click="handlesearch">
                 <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
             </div>
             <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 class="downLoad">
             <div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
@@ -35,14 +35,14 @@ export default {
 
 <script lang="ts" setup>
 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 { ref } from 'vue'
 import Lang from "@/views/login/components/Lang.vue";
 const lang = ref()
 const drawer = ref(false)
 const { proxy } = (getCurrentInstance() as any)
-const handlesearch = ()=>{
+const handlesearch = () => {
     proxy.$router.push("/home")
 }
 const handleDrawer = (done: () => void) => {
@@ -51,9 +51,9 @@ const handleDrawer = (done: () => void) => {
 const openDrawer = () => {
     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
 }
 onMounted(() => {
@@ -68,7 +68,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
- .langWrap{
+.langWrap {
     //   position: absolute;
     // //   top:-20px;
     //   left: 260px;
@@ -76,51 +76,65 @@ onUnmounted(() => {
     //   align-items: end;
     position: relative;
     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 {
     display: flex;
     justify-content: space-between;
-    @media screen and (max-width: 768px){
 
-        .left-1{
+    @media screen and (max-width: 768px) {
+
+        .left-1 {
             display: flex;
             justify-content: space-between;
             width: 80vw;
         }
     }
+
     .hleft {
         display: flex;
         justify-content: space-between;
         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 {
             color: #2B4A60;
             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;
                 height: 18px;
             }
-            @media screen and (max-width: 768px){
+
+            @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,45 +1,43 @@
 <template>
- 
     <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> -->
-                    </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>
 
 <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;
+        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 {
-        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>