From f5a85c78bd0868b39cf4d3bf9a58081ab643d1fb Mon Sep 17 00:00:00 2001
From: zzy <1837289056@qq.com>
Date: Tue, 18 Apr 2023 10:09:32 +0800
Subject: [PATCH] 1

---
 src/App.vue                         |  18 ++-
 src/router/index.ts                 |  46 ++++----
 src/views/IPO/index.vue             |  15 ++-
 src/views/login/components/Main.vue |   8 +-
 src/views/login/index.vue           | 171 ++++++++++++++++++----------
 vite.config.ts                      |   3 +-
 6 files changed, 166 insertions(+), 95 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6b8e0c2..85ff42d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,13 +7,17 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, onBeforeMount } from 'vue'
+import { defineComponent, ref, onBeforeMount,onMounted, watch } from 'vue'
 import { ElConfigProvider } from 'element-plus'
 import { ipoStore } from "@/stores/ipo"
 const store = ipoStore();
 onBeforeMount(() => {
   setFontSize()
 })
+function isMobileFn() {
+  return 768 >= document.documentElement.clientWidth;
+}
+const isMobile = ref(isMobileFn() ? true : false);
 const setFontSize = () => {
   // 以ipone6手机为例,1rem=1px;   以后就在ipone6手机模拟器开发，把rem当作px用就行了
   var font = document.documentElement.clientWidth / 375;
@@ -34,7 +38,17 @@ const setFontSize = () => {
 //   },
 
 // })
-
+onMounted(() => {
+  window.addEventListener('resize', function () {
+    isMobile.value = isMobileFn();
+    if (isMobile.value) {
+      window.location.reload()
+    }
+  })
+})
+watch(isMobile, (newValue) => {
+  window.location.reload()
+})
 </script>
 
 <style lang="scss" >
diff --git a/src/router/index.ts b/src/router/index.ts
index ff03fff..1f638d2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,29 +1,31 @@
 import { createRouter, createWebHistory ,createWebHashHistory} from "vue-router";
 import { staticRoutes } from "@/router/routes";
-import {modelRoutes} from "./routesModel"
-let shouRoute=[] as any;
-function setRoutes(){
-  IsMobile();
-  window.addEventListener('resize', function() {
-    IsMobile2()
-  })
-}
-function IsMobile(){
-  if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
-    shouRoute=modelRoutes;
-  }else{
-    shouRoute=staticRoutes;
-  }
-}
-function IsMobile2(){
-  if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
-     window.location.reload()
-  }else{
-  }
-}
+// import {modelRoutes} from "./routesModel"
+// let shouRoute=[] as any;
+// function setRoutes(){
+//   window.addEventListener('resize', function() {
+//     // IsMobile3()
+//   })
+// }
+// function IsMobile(){
+//   if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
+//     shouRoute=modelRoutes;
+//   }else{
+//     shouRoute=staticRoutes;
+//   }
+// }
+// function IsMobile2(){
+//   if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
+//      window.location.reload()
+//   }else{
+//   }
+// }
+// function IsMobile3(){
+
+// }
 
 
-setRoutes();
+// setRoutes();
 
 
 var router = createRouter({
diff --git a/src/views/IPO/index.vue b/src/views/IPO/index.vue
index fa3e78c..0c6903a 100644
--- a/src/views/IPO/index.vue
+++ b/src/views/IPO/index.vue
@@ -154,8 +154,8 @@ const Offerings = ref([
         name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
         info2: "10,000,000",
         table: {
-            title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: 50, align: "right" },
-            { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: 50, align: "right" }],
+            title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel()?33:50, align: "right" },
+            { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel()?38:50, align: "right" }],
             lists: [
                 {
                     number: '1',
@@ -194,7 +194,7 @@ const Offerings = ref([
     {
         name: proxy.$t('ipo.Offering.DenominationTable'),
         table: {
-            title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: 50, align: "right" },
+            title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel()?35:50, align: "right" },
             { header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
             lists: [
                 {
@@ -273,10 +273,10 @@ const Timetable = ref([
         info2: "09:00",
         table: {
             title: [
-                { header: " ", content: "des", width: 43, align: "left" },
+                { header: " ", content: "des",width: isMobel()?49: 43, align: "left" },
                 { width: 12 },  //通过加一段空结构来调整表头的位置
-                { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: 25, align: "left" },
-                { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: 20, align: "left" }],
+                { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel()?49: 43, align: "left" },
+                { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel()?49: 43, align: "left" }],
             lists: [
                 {
                     des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
@@ -364,6 +364,9 @@ const getreferencedata = async () => {
     setTransaction((res as any).data[0])
     setTimeTable((res as any).data[0])
 }
+function isMobel(){
+    return 768 >= document.documentElement.clientWidth;
+}
 function setInformation(mockRes: any) {
     const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
     const placeOfincorporation = ref('')
diff --git a/src/views/login/components/Main.vue b/src/views/login/components/Main.vue
index 0bcfe71..f7737e3 100644
--- a/src/views/login/components/Main.vue
+++ b/src/views/login/components/Main.vue
@@ -181,8 +181,8 @@ const handleclick = (item: any) => {
 
     width: 270px;
     // height: 360px;
-    height: fit-content;
-    min-height: 350px;
+    // height: fit-content;
+    // min-height: 350px;
     margin-top: 30px;
     margin-left: 20px;
     background-color: #e7efec;
@@ -290,8 +290,8 @@ const handleclick = (item: any) => {
     .bigbox {
 
         width: 76vw;
-        min-height: 310rem;
-        height: fit-content;
+        // min-height: 310rem;
+        // height: fit-content;
 
         margin-top: 14rem !important;
         cursor: pointer;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4b4606f..396a0d6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -490,6 +490,25 @@ const showMounth = (date: any) => {
 // .el-calendar{
 //     font-family: "Calibri"
 // }
+// @media screen and (max-width: 768px){
+//     .left{
+//         width: 100vw;
+
+// * {
+//     margin: 0;
+//     padding: 0;
+// }
+//     }
+//     .header{
+//         height: 60rem;
+//     }
+//     .menuicon{
+//         display: block;
+//                 margin-left: 5rem;
+//                 width: 25rem;
+//                 height: 20rem;
+//     }
+// }
 .login2 {
     background-image: url("@/assets/1x/beijingtu.png");
     background-repeat: no-repeat;
@@ -500,31 +519,22 @@ const showMounth = (date: any) => {
 .box {
     display: flex;
     justify-content: space-between;
-    // background-image: url("@/assets/1x/beijingtu.png");
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
-    //height: 100%;
-    // font-family: "Calibri";
-    // width: 100%;
-    // background-color: gray;
 }
 
 .left {
 
     width: 70%;
+    // @media screen and (max-width: 768px) {
+    //     width: 100vw;
 
-    // height: 100vh;
-    // float: left;
-    // background-color: red;
-    @media screen and (max-width: 768px) {
-        width: 100vw;
-
-        * {
-            margin: 0;
-            padding: 0;
-        }
-    }
+    //     * {
+    //         margin: 0;
+    //         padding: 0;
+    //     }
+    // }
 
     .header {
         display: flex;
@@ -532,47 +542,48 @@ const showMounth = (date: any) => {
         // padding-left: 35px;
         height: 80px;
 
-        @media screen and (max-width: 768px) {
-            height: 60rem;
-            //    background-color: red;
-        }
+        // @media screen and (max-width: 768px) {
+        //     height: 60rem;
+        //     //    background-color: red;
+        // }
 
         .menuicon {
             display: none;
 
-            @media screen and (max-width: 768px) {
-                display: block;
-                margin-left: 5rem;
-
-            }
+            // @media screen and (max-width: 768px) {
+            //     display: block;
+            //     margin-left: 5rem;
+            //     width: 25rem;
+            //     height: 20rem;
+            // }
         }
 
-        .menu {
-            @media screen and (max-width: 768px) {
-                img {
-                    width: 25rem;
-                    height: 20rem;
+        // .menu {
+        //     @media screen and (max-width: 768px) {
+        //         img {
+        //             width: 25rem;
+        //             height: 20rem;
 
-                }
+        //         }
 
-            }
-        }
+        //     }
+        // }
 
-        .inline-input w-50 {
-            width: 200px;
-            height: 50px;
+        // .inline-input w-50 {
+        //     width: 200px;
+        //     height: 50px;
 
-            @media screen and (max-width: 768px) {
-                display: none;
+        //     @media screen and (max-width: 768px) {
+        //         display: none;
 
-                :deep(.imgSearch123) {
-                    width: 10rem;
-                    height: 10rem;
-                }
-            }
+        //         :deep(.imgSearch123) {
+        //             width: 10rem;
+        //             height: 10rem;
+        //         }
+        //     }
 
 
-        }
+        // }
 
         .my-autocomplete li {
             line-height: normal;
@@ -619,9 +630,9 @@ const showMounth = (date: any) => {
             position: relative;
 
 
-            @media screen and (max-width: 768px) {
-                display: none;
-            }
+            // @media screen and (max-width: 768px) {
+            //     display: none;
+            // }
 
             .alert {
                 position: absolute;
@@ -646,12 +657,12 @@ const showMounth = (date: any) => {
                 transform: scale(1.2);
             }
 
-            @media screen and (max-width: 768px) {
-                width: 24rem;
-                height: 28rem;
-                margin-top: 6rem;
-                margin-left: 10rem;
-            }
+            // @media screen and (max-width: 768px) {
+            //     width: 24rem;
+            //     height: 28rem;
+            //     margin-top: 6rem;
+            //     margin-left: 10rem;
+            // }
         }
 
         .second {
@@ -787,14 +798,14 @@ const showMounth = (date: any) => {
 
 }
 
-:deep(.header .el-input__wrapper) {
-    @media screen and (max-width: 768px) {
-        // margin-left: 13vw;
-        // height: 5vh;
-        // background-color: #000000;
-    }
+// :deep(.header .el-input__wrapper) {
+//     @media screen and (max-width: 768px) {
+//         // margin-left: 13vw;
+//         // height: 5vh;
+//         // background-color: #000000;
+//     }
 
-}
+// }
 
 :deep(.el-calendar-table td) {
     border: none;
@@ -852,6 +863,46 @@ const showMounth = (date: any) => {
 :deep(.is-selected) {
     color: red;
 }
+@media screen and (max-width: 768px){
+    .left{
+        width: 100vw;
+
+* {
+    margin: 0;
+    padding: 0;
+}
+.header{
+        height: 60rem;
+        .menuicon{
+                display: block ;
+                margin-left: 5rem;
+                width: 25rem;
+                height: 20rem;
+    }
+    .menu{
+        
+                img {
+                    width: 25rem;
+                    height: 20rem;
+
+                }
+
+            
+    }
+    .dropdown1{
+        display: none;
+    }
+    .first{
+                width: 24rem;
+                height: 28rem;
+                margin-top: 6rem;
+                margin-left: 10rem;
+    }
+    }
+    
+    }
+    
+}
 </style>
 <style>
 .header .el-input__wrapper {
diff --git a/vite.config.ts b/vite.config.ts
index 4f02166..6400f2f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -60,11 +60,12 @@ export default defineConfig((mode: ConfigEnv) => {
       // 配置代理服务器
       proxy: {
         "/api": {
-          target: "http://192.168.2.11:8080",
+          target: "http://192.168.2.10:8080",
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ""),
         },
       },
+      host: '0.0.0.0'
     },
     // pages:{
     //   move: {