点击菜单切换语言菜单自动弹回

src/App.vue

@@ -10,51 +10,22 @@
 import { defineComponent, ref, onBeforeMount, onMounted, watch } from 'vue'
 import { ElConfigProvider } from 'element-plus'
 import { ipoStore } from "@/stores/ipo"
+function isMobileFn() {
+  return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
+}
+const isMobile = ref(isMobileFn() ? true : false);
 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;
   document.documentElement.style.fontSize = font + "px";
 }
-// export default defineComponent({
-//   components: {
-//     ElConfigProvider,
-//   },
-//   setup() {
 
-//     // store.setLocale(2)
-//     console.log(store.$state.locale, store.localeLang)
-//     console.log(document.documentElement.clientWidth)
-//     return {
-//       store
-//     }
-//   },
 
-// })
+
-// onMounted(() => {
-//   window.addEventListener('resize', function () {
-//     isMobile.value = isMobileFn();
-//     if (isMobile.value) {
-//       window.location.reload()
-//     }
-//   })
-// })
-// watch(isMobile, (newValue) => {
-//   window.location.reload()
-// })
-onMounted(() => {
-  window.addEventListener('resize', function () {
-    var font = document.documentElement.clientWidth / 375;
-      document.documentElement.style.fontSize = font + "px";
-  })
-})
 </script>
 
 <style lang="scss" >

src/main.ts

@@ -28,6 +28,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 app.config.warnHandler = (msg, instance, trace) => {}
+app.config.errorHandler = (msg, instance, trace) => {}//错误捕获，不报给浏览器
 app
   // .use(pinia)
   .use(router)

src/views/IPO/components/IpoContent.vue

@@ -117,7 +117,7 @@ const data = defineProps<{ info: obj[], title: string }>()
 
         @media screen and (max-width: 768px) {
             display: block;
-            margin-top: 10px;
+            margin-top: 21px;
 
             :deep(.el-table) {
                 color: #355D80;

src/views/IPO/components/IpoHeader.vue

@@ -2,13 +2,11 @@
     <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">
-            <Drawer />
+            <Drawer :drawer = "drawer" @childfn="fn"/>
         </el-drawer>
         <div class="hleft">
             <div class="left-1">
-                <div class="menu">
+                    <img src="@/assets/1x/1x/source5.png" alt="menu"  @click="openDrawer" 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>
 
@@ -62,6 +60,9 @@ onMounted(() => {
         lang.value.showLang = false
     }
 })
+function fn(data:any){
+drawer.value = data
+}
 onUnmounted(() => {
     document.documentElement.onclick = null
 })
@@ -128,7 +129,9 @@ onUnmounted(() => {
 
             @media screen and (max-width: 768px) {
                 display: block;
-                margin-top: 3px;
+                vertical-align: middle;
+                width: 25px;
+                height: 20px;
             }
         }
 
@@ -138,8 +141,9 @@ onUnmounted(() => {
             font-weight: bolder;
 
             @media screen and (max-width: 768px) {
-                font-size: 26px;
+                font-size: 20px;
                 transform: translateX(-60px);
+                display: inline;
             }
         }
 

src/views/IPO/index.vue

@@ -121,10 +121,10 @@ const TypeOfListing = ref([
         name: proxy.$t('ipo.TypeofListing.ListingType'),
         info: "Primary"
     },
-    {
+    // {
-        name: proxy.$t('ipo.TypeofListing.ListingCategories'),
+    //     name: proxy.$t('ipo.TypeofListing.ListingCategories'),
-        info: "-"
+    //     info: "-"
-    }
+    // }
 ])
 const Offerings = ref([
     {
@@ -344,7 +344,6 @@ onMounted(
         data.value = JSON.parse(localStorage.getItem('itemData') as string)
          getreferencedata()
          setDownLoad()
-        
        // text();
     }
 )
@@ -421,12 +420,12 @@ function setOfferings(mockRes: any) {
     var dataObj = [
         { info: has_data(tradeCurrency) },
         { info: keepTwoDecimalStr(downwardPriceFlex) },
-        { info: has_data(priceMin.toFixed(3)) + "-" + has_data(priceMax.toFixed(3)), info2: has_data(priceFinal.toFixed(3)) },
+        { info: has_data(priceMin?.toFixed(3)) + "-" + has_data(priceMax?.toFixed(3)), info2: has_data(priceFinal?.toFixed(3)) },
         { info: has_data(boardLot) },
         { info: keepTwoDecimalStr(poReallocationCap) },
         { info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(poSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(ioOfferSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
         { info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
-        { info: has_data(upsizeOption.toFixed(2),"%") },
+        { info: has_data(upsizeOption?.toFixed(2),"%") },
         { info: "-" },
         { info: keepTwoDecimalStr(overallotOption) },
         { table: denomTable }
@@ -591,14 +590,14 @@ function setTypeofListing(mockRes: any) {
     }
     //没找到的字段ListingType listingCategories
     // const ListingType = "-";
-    const listingCategories = "-";
+    // const listingCategories = "-";
     const arr = [
         { info: offerType },
         { info: listSecurities },
         { info: has_data(nomValue), info2: nomCur as any },
         { info: listPlatform },
-        { info: has_data(listSecurities) },
+        { info: has_data(listSecurities) },]
-        { info: has_data(listingCategories) }]
+        // { info: has_data(listingCategories) }]
     TypeOfListing.value = TypeOfListing.value.map((item, index) => {
         if (arr[index].info2) {
             return { ...item, info: arr[index].info, info2: arr[index].info2 }
@@ -756,12 +755,8 @@ function scrollTo(stron: string) {
  async function setDownLoad (){
     const ipoID = localStorage.getItem('ipoID');
     const res = await getIpo(ipoID as string)
-     console.log('@@1',(res as any).data[0].pdfLink.cLink);
-    
      const enHref = `${(res as any).data[0].pdfLink.eLink}`;
      const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
-     console.log(enHref);
-
    Documents.value= [
     {
         name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
@@ -772,8 +767,6 @@ function scrollTo(stron: string) {
         href2:chinaHref
     },
 ]
-    // return store.$state.locale == 1 ? enHref : chinaHref
-    //  return [enHref, chinaHref] as any;
 }
 
     

src/views/dashBoard/Header/index.vue

@@ -2,9 +2,7 @@
     <div class="headerWrap">
         <div class="left">
             <div class="left-1">
-                <div class="menu">
+                    <img src="@/assets/1x/1x/source5.png" alt="menu"  @click="drawShow" class="menu">
-                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="drawShow" >
-                </div>
                 <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
             </div>
             <div class="left-right">
@@ -89,21 +87,30 @@ const drawShow = () => {
     //   align-items: end;
     position: relative;
     margin-left: 15px;
+
     .second {
 
         width: 32px;
         height: 36px;
         margin-top: 4px;
+
         &:hover {
             transform: scale(1.2);
         }
     }
 }
+
 .lang {
     position: absolute;
     top: 50px;
     left: -50px;
+
+    @media screen and (max-width: 768px) {
+        left: -120px;
+
     }
+}
+
 .left-right {
     display: flex;
     justify-content: space-between;
@@ -119,12 +126,14 @@ const drawShow = () => {
 
     @media screen and (max-width: 768px) {
         flex-direction: column;
+
         .left-1 {
             display: flex;
             justify-content: space-between;
             width: 40vw;
             margin-left: 15px;
         }
+
         .left-right {
             display: flex;
             justify-content: space-between;
@@ -132,27 +141,35 @@ const drawShow = () => {
             margin-right: 10px;
         }
     }
+
     .left {
         display: flex;
         position: relative;
+
         @media screen and (max-width: 768px) {
             justify-content: space-between;
             width: 100vw;
             align-items: center;
         }
+
         .menu {
             display: none;
+
             @media screen and (max-width: 768px) {
                 display: block;
-        margin-top: 3px;
+                // margin-top: 3px;
+                vertical-align: middle;
             }
         }
+
         span {
             color: #2B4A60;
             font-size: 45px;
             font-weight: 900;
+
             @media screen and (max-width: 768px) {
-                font-size: 26px;
+                font-size: 25px;
+                // margin-top: 4px;
             }
         }
 
@@ -167,6 +184,7 @@ const drawShow = () => {
             margin-left: 15px;
             margin-top: 6px;
             cursor: pointer;
+
             img {
                 width: 18px;
                 height: 18px;
@@ -176,13 +194,18 @@ const drawShow = () => {
 
     .right {
         font-size: 20px;
+
         @media screen and (max-width: 768px) {
-                width: 100vw;
+            // width: 100vw;
+            color: red;
             margin-top: 10px;
              transform: translateX(-10px);
+    
         }
+
         .time {
             color: #435F70;
+
             @media screen and (max-width: 768px) {
                 float: right;
                 font-size: 15px;
@@ -194,6 +217,7 @@ const drawShow = () => {
             text-align: right;
             color: #27485E;
             font-weight: 600;
+
             span {
                 margin-right: 15px;
             }
@@ -201,10 +225,12 @@ const drawShow = () => {
             :deep(.el-switch__action) {
                 background-color: #E86666;
             }
+
             @media screen and (max-width: 768px) {
                 font-size: 15px;
                 margin-top: 13px;
-                transform: translateX(200px);
+                transform: translateX(175px);
+                
             }
         }
     }

src/views/dashBoard/Main.vue

@@ -1,8 +1,6 @@
 <template>
     <div class="bigbox" @click="handleclick(props.data)">
-        <div class="title">
+        <Aimage :src="props.data.logolinks" :number="props.data.number"/>
-            <img :src="props.data.logolinks" />
-        </div>
         <div class="list">
             <div class="list-content">
                 <div class="top">
@@ -19,17 +17,23 @@
                         <span>{{ item.name }}</span>
                         <el-icon class="icon1" v-if="item.icon">
                             <Check v-if="item.icon == 1" />
+                            <!-- <Filter v-if="item.icon==2" /> -->
                             <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
                         </el-icon>
                     </h5>
 
                 </div>
-                <h5 v-else>{{ code22 }}</h5>
+                <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
 
                 <h4 >HKD {{ props.data.HKD }}</h4>
-                <h6>{{props.data.price? $t(i18n.global.t('home.finalofferprice')):$t(i18n.global.t('home.offerpricerange')) }}</h6>
+                <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
+                    $t(i18n.global.t('home.offerpricerange'))
+                }}</h6>
                 <h5>{{ props.data.time }}</h5>
-                <h6>{{props.data.listingDate? $t(i18n.global.t('home.CommencementofTradeDate')):$t(i18n.global.t('home.ExpectedPriceDeterminationDate')) }}</h6>
+                <h6>{{ props.data.listingDate ?
+                    $t(i18n.global.t('home.CommencementofTradeDate')) :
+                    $t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
+                }}</h6>
             </div>
         </div>
     </div>
@@ -47,28 +51,30 @@ import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 import logo from '@/assets/Snipaste.png'
 import { useRouter } from 'vue-router';
+import { computed } from '@vue/reactivity';
+import Aimage from "./image1/index.vue";
 const { proxy } = (getCurrentInstance() as any)
 const store = ipoStore();
 const currentDate = ref(new Date())
 const expand = ref(false);
-
+const fontstyle = ref()
 const router = useRouter()
-const detailsItem=[
+const detailsItem = ref([
     {
         name: proxy.$t('home.DealInitiated'),
-        icon:1
+        icon: 0
     },
     {
         name: proxy.$t('home.PublicOfferClosed'),
-        icon:1
+        icon: 0
     },
     {
         name: proxy.$t('home.ApplicationValidated'),
-        icon:1
+        icon: 0
     },
     {
         name: proxy.$t('home.AllotmentConfirmed'),
-        icon:2
+        icon: 0
     }
     , {
         name: proxy.$t('home.MoneySettlement'),
@@ -87,7 +93,7 @@ const detailsItem=[
         name: proxy.$t('home.TradingStarted'),
         icon: 0
     }
-]
+])
 const props = defineProps({
     data: {
         type: Object,
@@ -101,13 +107,20 @@ const props = defineProps({
                 trading: "",
                 logolinks: "",
                 status: 0,
-                listingDate:""
+                listingDate: "",
+                ipoID:0
             }
         }
     }
 })
 
+
 const code22 = ref('')
+// onMounted(()=>{
+//     if(props.data.status == 80){
+
+//     }
+// })
 onUpdated(() => {
     var obj = {
         25: proxy.$t('home.DealInitiated'),
@@ -122,12 +135,25 @@ onUpdated(() => {
         80: proxy.$t('home.Suspended'),
         90: proxy.$t('home.Cancelled'),
     }
-    // console.log('&&&&', props.data.status)
+     console.log('&&&&', props.data.status)
     const stron = props.data.status
+
+
     if (isValidKey(stron, obj)) {
         code22.value = obj[stron];
         // console.log('kkkk',stron,obj[stron])
     }
+    var tag = true;
+    detailsItem.value = detailsItem.value.map(item => {
+        if (code22.value == item.name && tag) {
+            tag = false;
+            return { ...item, icon: 2 }
+        } else if (tag) {
+            return { ...item, icon: 1 }
+        } else {
+            return { ...item, icon: 0 }
+        }
+    })
     // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
     function isValidKey(
         key: string | number | symbol,
@@ -143,7 +169,9 @@ const cardDetail=(e:any)=>{
 }
 //路由传参
 const handleclick = (item: any) => {
-    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('ipoID', item.ipoID)
+    console.log(item);
+    
     localStorage.setItem('itemData', JSON.stringify(item))
     router.push({
         name: 'Xdashboard',
@@ -159,8 +187,8 @@ const handleclick = (item: any) => {
 
     width: 270px;
     // height: 360px;
-    height:fit-content;
+    // height: fit-content;
-    min-height: 350px;
+    // min-height: 350px;
     margin-top: 30px;
     margin-left: 20px;
     background-color: #e7efec;
@@ -168,11 +196,23 @@ const handleclick = (item: any) => {
     overflow: hidden;
     border: 1px solid #DDE2E6;
     cursor: pointer;
+
     // font-family: "Calibri";
     // @media screen and (max-width: 768px){
     //     width: 270rem;
     // height: 360rem;
     // }
+    .imglogo{
+        background-color: #23445a;
+        height: 15vh;
+        line-height: 15vh;
+        text-align: center;
+        overflow: hidden;
+        font-size: 38px;
+        font-weight: bold;
+        font-family: "Calibri";
+        color: #fff;
+    }
     .title {
         background-color: #fff;
         height: 120px;
@@ -182,6 +222,7 @@ const handleclick = (item: any) => {
         overflow: hidden;
         position: relative;
         font-family: "Calibri";
+
         // @media screen and (max-width: 768px){
         //     font-size: 80px;
         // }
@@ -202,9 +243,11 @@ const handleclick = (item: any) => {
         justify-content: center;
         margin-top: 20px;
         font-family: "Calibri";
+
         .list-content {
             margin-top: 10px;
             width: 230px;
+
             // height: 100%;
             .details {
                 .icon1 {
@@ -212,6 +255,7 @@ const handleclick = (item: any) => {
                     transform: translateY(2.5px);
                 }
             }
+
             h4 {
                 font-size: 20px;
                 color: #3b6181;
@@ -238,14 +282,14 @@ const handleclick = (item: any) => {
             .top {
                 display: flex;
                 justify-content: space-between;
-               
-
             }
+
             .icon {
                 @media screen and (max-width: 768px) {
                     width: 13rem;
                     height: 13rem;
                 }
+
                 width: 13px;
                 height: 13px;
             }
@@ -257,13 +301,14 @@ const handleclick = (item: any) => {
     //   background-color: red;
     box-shadow: 10px 15px 10px #9A9A9A;
 }
+
 @media screen and (max-width: 768px) {
 
     .bigbox {
 
         width: 76vw;
-min-height: 310px;
+        // min-height: 310rem;
-height:fit-content;
+        // height: fit-content;
 
         margin-top: 14px !important;
         cursor: pointer;

src/views/dashBoard/image1/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+      <div class="title" v-if="isImage">
+       <img   v-lazy="props.src" />
+      </div>
+      <div class="title2" v-else>
+        {{props.number}}
+      </div>
+    </div>
+   
+  </template>
+  <script lang="ts">
+  export default {
+      name: "XEvent",
+  };
+  </script>
+  
+  <script lang="ts" setup>
+  import {ref,onMounted,watch} from 'vue'
+  const props = defineProps({
+      src: {
+          type: String,
+          required:true
+      },
+      number: {
+          type: String,
+          required:true
+      }
+  })
+  const isImage=ref(false)
+  const checkImgExists=(imgurl:string) =>{
+    try{
+      var ImgObj = new Image();
+      ImgObj.src = imgurl;
+      ImgObj.onload = () => {
+        isImage.value = true;
+      };
+      ImgObj.onerror = () => {
+   
+        isImage.value= false;
+      };
+    }catch(error){
+      console.log('error')
+    }
+   
+    }
+    setTimeout(()=>{
+          checkImgExists(props.src)
+      },100)
+  
+  </script>
+  <style lang="scss" scoped>
+  .title {
+          background-color: #fff;
+          height: 120px;
+          line-height: 120px;
+          font-size: 40px;
+          color: #fff;
+          overflow: hidden;
+          position: relative;
+          font-family: "Calibri";
+          img {
+              max-height: 100%;
+              max-width: 100%;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+          }
+      }
+      .title2{
+          background-color: #23445a;
+          color: #fff;
+          height: 120px;
+          line-height: 120px;
+          font-size: 40px;
+        text-align: center;
+      }
+  </style>

src/views/dashBoard/index.vue

@@ -2,7 +2,7 @@
   <div class="login1">
     <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
       style="background-color: #1C3F56;" :with-header="false">
-            <Drawer />
+      <Drawer :drawer = "drawer" @childfn="fn"/>
     </el-drawer>
     <div class="wrap w">
       <div class="leftbox">
@@ -312,7 +312,7 @@ const getreferencedata = async () => {
   initialpublic.value = res.poSharesInitial
   ApplicationQuantity.value = res.poApplicationQuantity
   subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial
-  subscriptionRatio.value = subscriptionRatio.value.toFixed(1)
+  subscriptionRatio.value = subscriptionRatio?.value.toFixed(1)
   initialinstituational.value = res.ioSharesInitial
   // console.log('initialinstituational', (res as any).data[0].poSharesInitial);
   code44.value = res.poSharesFinal
@@ -628,7 +628,9 @@ const showMounth = (date: any) => {
   // }
   return date
 }
-
+function fn(data:any){
+drawer.value = data
+}
 
 
 
@@ -642,7 +644,9 @@ const showMounth = (date: any) => {
   font-family: "Calibri";
 
   @media screen and (max-width: 768px) {
-    height: 2500px;
+    height: fit-content;
+    width: 100vw;
+    overflow-x: hidden;
   }
 }
 
@@ -650,6 +654,12 @@ const showMounth = (date: any) => {
   display: flex;
   padding-top: 30px;
 
+  @media screen and (max-width: 768px) {
+    width: fit-content;
+    height: fit-content;
+    overflow-x: hidden;
+  }
+
   .leftbox {
     width: 22%;
     height: 100%;
@@ -1124,20 +1134,20 @@ const showMounth = (date: any) => {
 
   @media screen and (max-width: 768px) {
     width: 71vw;
-    transform: translate(-4vw);
+    margin-left: -4px;
   }
 }
 
 
 :deep(.el-calendar-table) {
   width: 450px;
-  // background-color: red !important;
   padding-left: 10px 75px 27px !important;
   cursor: default;
 
   @media screen and (max-width: 768px) {
     width: 80vw;
-    transform: translate(-4vw);
+    // transform: translate(-4vw);
+    margin-left: -10px;
 
   }
 }

src/views/login/components/Lang.vue

@@ -58,7 +58,13 @@ defineExpose({
     padding-top: 10px;
     padding-bottom: 10px;
     position: relative;
-    z-index: 1;
+    z-index: 99;
+
+    @media screen and (max-width: 768px) {
+        display: flex;
+        flex-direction: column;
+        z-index: 9999;
+    }
 
     li {
         text-align: center;

src/views/login/components/Main.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="bigbox" @click="handleclick(props.data)">
-        <div class="title">
+        <Aimage :src="props.data.logolinks" :number="props.data.number"/>
-            <img v-lazy="props.data.logolinks" />
+        
-        </div>
         <div class="list">
             <div class="list-content">
                 <div class="top">
@@ -25,7 +24,7 @@
                     </h5>
 
                 </div>
-                <h5 v-else>{{ code22 }}</h5>
+                <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
 
                 <h4 >HKD {{ props.data.HKD }}</h4>
                 <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
@@ -53,11 +52,13 @@ import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 import logo from '@/assets/Snipaste.png'
 import { useRouter } from 'vue-router';
+import { computed } from '@vue/reactivity';
+import Aimage from "./a-image/index.vue";
 const { proxy } = (getCurrentInstance() as any)
 const store = ipoStore();
 const currentDate = ref(new Date())
 const expand = ref(false);
-
+const fontstyle = ref()
 const router = useRouter()
 const detailsItem = ref([
     {
@@ -116,6 +117,11 @@ const props = defineProps({
 
 
 const code22 = ref('')
+// onMounted(()=>{
+//     if(props.data.status == 80){
+
+//     }
+// })
 onUpdated(() => {
     var obj = {
         25: proxy.$t('home.DealInitiated'),
@@ -130,9 +136,10 @@ onUpdated(() => {
         80: proxy.$t('home.Suspended'),
         90: proxy.$t('home.Cancelled'),
     }
-    // console.log('&&&&', props.data.status)
+     console.log('&&&&', props.data.status)
     const stron = props.data.status
 
+
     if (isValidKey(stron, obj)) {
         code22.value = obj[stron];
         // console.log('kkkk',stron,obj[stron])
@@ -161,6 +168,24 @@ const cardDetail = (e: any) => {
     e.stopPropagation();
     expand.value = !expand.value;
 }
+// const fontstyle = computed((status)=>{
+//     if(status == 80 ){
+//         return {'color':'red'}
+//     }
+//     if(status == 90){
+//         return {'color':'red'}
+//     }
+// })
+// function fontstyle(status:any){
+//     console.log(status);
+    
+//     if(status == 80 ){
+//         return {'color':'red'}
+//     }
+//     if(status == 90){
+//         return {'color':'red'}
+// }
+// }
 //路由传参
 const handleclick = (item: any) => {
     localStorage.setItem('ipoID', item.ipoID)
@@ -196,6 +221,17 @@ const handleclick = (item: any) => {
     //     width: 270rem;
     // height: 360rem;
     // }
+    .imglogo{
+        background-color: #23445a;
+        height: 15vh;
+        line-height: 15vh;
+        text-align: center;
+        overflow: hidden;
+        font-size: 38px;
+        font-weight: bold;
+        font-family: "Calibri";
+        color: #fff;
+    }
     .title {
         background-color: #fff;
         height: 120px;

src/views/login/components/a-image/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+      <div class="title" v-if="isImage">
+       <img   v-lazy="props.src" />
+      </div>
+      <div class="title2" v-else>
+        {{props.number}}
+      </div>
+    </div>
+   
+  </template>
+  <script lang="ts">
+  export default {
+      name: "XEvent",
+  };
+  </script>
+  
+  <script lang="ts" setup>
+  import {ref,onMounted,watch} from 'vue'
+  const props = defineProps({
+      src: {
+          type: String,
+          required:true
+      },
+      number: {
+          type: String,
+          required:true
+      }
+  })
+  const isImage=ref(false)
+  const checkImgExists=(imgurl:string) =>{
+    try{
+      var ImgObj = new Image();
+      ImgObj.src = imgurl;
+      ImgObj.onload = () => {
+        isImage.value = true;
+      };
+      ImgObj.onerror = () => {
+   
+        isImage.value= false;
+      };
+    }catch(error){
+      console.log('error')
+    }
+   
+    }
+    setTimeout(()=>{
+          checkImgExists(props.src)
+      },1000)
+  
+  </script>
+  <style lang="scss" scoped>
+  .title {
+          background-color: #fff;
+          height: 120px;
+          line-height: 120px;
+          font-size: 40px;
+          color: #fff;
+          overflow: hidden;
+          position: relative;
+          font-family: "Calibri";
+          img {
+              max-height: 100%;
+              max-width: 100%;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+          }
+      }
+      .title2{
+          background-color: #23445a;
+          color: #fff;
+          height: 120px;
+          line-height: 120px;
+          font-size: 40px;
+        text-align: center;
+      }
+  </style>

src/views/login/index.vue

@@ -3,7 +3,7 @@
         <div class="box w">
             <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
                 style="background-color: #1C3F56;" :with-header="false">
-                <Drawer />
+                <Drawer :drawer = "drawer" @childfn="fn"/>
             </el-drawer>
             <div class="left">
                 <div class="header">
@@ -11,12 +11,16 @@
                         <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
                     </div>
                     <!-- <input class="search" /> -->
-                    <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
+                    <div class="searchWrap">
-                        class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
+                        <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false"
+                            clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
                             <template #prefix>
-                            <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
+                                <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片"
+                                    @click="handleSelect">
                             </template>
                         </el-autocomplete>
+                    </div>
+
 
                     <div class="dropdown">
                         <img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
@@ -205,7 +209,7 @@ const getHomeIpoList = async () => {
                     title: companyEngFull + ";" + companyChiFull,
                     status: status,
                     number: stkCode,
-                    HKD: priceFinal.toFixed(3) ? priceFinal.toFixed(3) : priceMinMax(),
+                    HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
                     time: listingDate ? listingDate : pricingDate,
                     ipoID: ipoID,
                     price: priceFinal,
@@ -213,11 +217,11 @@ const getHomeIpoList = async () => {
                 }
                 function priceMinMax() {
                     if (priceMin && priceMax) {
-                        return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
+                        return `${priceMin?.toFixed(3)} - ${priceMax.toFixed(3)}`
                     } else if (priceMin) {
-                        return `${priceMin.toFixed(3)} - `
+                        return `${priceMin?.toFixed(3)} - `
                     } else if (priceMax) {
-                        return ` -${priceMax.toFixed(3)}`
+                        return ` -${priceMax?.toFixed(3)}`
                     } else {
                         return " - "
                     }
@@ -482,7 +486,9 @@ const showMounth = (date: any) => {
         return arr[2] + " " + arr[3]
     }
 }
-
+function fn(data:any){
+drawer.value = data
+}
 </script>
 <style lang="scss" scoped>
 // @import '../../styles';
@@ -513,6 +519,10 @@ const showMounth = (date: any) => {
     background-repeat: no-repeat;
     background-size: cover;
 
+    @media screen and (max-width: 768px) {
+        width: 100vw;
+        overflow-x: hidden;
+    }
 }
 
 .box {
@@ -521,6 +531,11 @@ const showMounth = (date: any) => {
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
+
+    @media screen and (max-width: 768px) {
+        width: 100vw;
+        overflow-x: hidden;
+    }
 }
 
 .left {
@@ -763,11 +778,13 @@ const showMounth = (date: any) => {
     }
 
 }
+
 :deep(.el-calendar-table) {
     width: 420px;
     transform: translateX(-20px);
     margin-top: 20px;
 }
+
 :deep(.el-button--small) {
     border: none
 }
@@ -811,10 +828,12 @@ const showMounth = (date: any) => {
     text-align: center;
     font-weight: 800;
 }
+
 :deep(.el-calendar-table thead th) {
     padding: 2px;
     font-weight: 550px;
 }
+
 :deep(.el-calendar .el-calendar-table .el-calendar-day) {
     padding: 0px;
     text-align: center;
@@ -862,6 +881,7 @@ const showMounth = (date: any) => {
 :deep(.is-selected) {
     color: red;
 }
+
 @media screen and (max-width: 768px) {
     .left {
         width: 100vw;
@@ -870,14 +890,17 @@ const showMounth = (date: any) => {
             margin: 0;
             padding: 0;
         }
+
         .header {
             height: 60px;
+
             .menuicon {
                 display: block;
                 margin-left: 5px;
                 width: 25px;
                 height: 20px;
             }
+
             .menu {
 
                 img {
@@ -888,18 +911,21 @@ const showMounth = (date: any) => {
 
 
             }
+
             .dropdown1 {
                 display: none;
             }
+
             .first {
                 width: 24px;
                 height: 28px;
                 margin-top: 6px;
-                margin-left: 10px;
+                margin-left: 1px;
             }
         }
 
     }
+
     // :deep(.el-drawer__body){
     //     background-color: red;
     //     width: 80vw;
@@ -911,6 +937,7 @@ const showMounth = (date: any) => {
 }
 </style>
 <style>
+@media (min-width: 992px) {
     .header .el-input__wrapper {
         margin-top: 20px;
         margin-left: 20px;
@@ -927,11 +954,25 @@ const showMounth = (date: any) => {
     .el-input__prefix-inner {
         transform: translateX(-35px);
     }
+}
+
 
 @media screen and (max-width: 768px) {
+
+
+
+    .el-input {
+        margin: 10px !important;
+    }
+
+
+    .el-input__prefix-inner {
+        transform: translateX(-35px);
+    }
+
     .header .el-input__wrapper {
-        margin-top: 0;
+        margin-top: 0 !important;
-        margin-left: 0;
+        margin-left: 0 !important;
         padding-left: 50px;
         width: 61vw;
         height: 30px;

src/views/login/modelComponents/Drawer.vue

@@ -66,6 +66,15 @@ import { getCurrentInstance, onUnmounted } from 'vue'
 import { ipoStore } from "@/stores/ipo"
 const store = ipoStore()
 const { proxy } = (getCurrentInstance() as any)
+let emit = defineEmits(['childfn'])
+
+const props = defineProps({
+    drawer:Boolean
+})
+
+let drawer = props.drawer
+
+console.log(props);
 
 const state = ref(1)
 // const drawer = ref(true)
@@ -85,10 +94,12 @@ const setState = (number: number) => {
     }
 }
 const handleLang1 = () => {
+    
     if (proxy.$i18n.locale = 'en') {
         proxy.$i18n.locale = 'en'
     }
     store.setLocale(1)
+     emit('childfn',!drawer)
 }
 const handleLang2 = () => {
     if (proxy.$i18n.locale = 'zhCt') {
@@ -97,16 +108,16 @@ const handleLang2 = () => {
 
     }
     store.setLocale(2)
+    emit('childfn',!drawer)
 }
 const handleLang3 = () => {
     if (proxy.$i18n.locale = 'zhCn') {
         proxy.$i18n.locale = 'zhCn'
     }
     store.setLocale(3)
+    emit('childfn',!drawer)
 }
-// const openDrawer = () => {
+
-//     drawer.value = false;
-// }
 </script>
 
 <style lang="scss" scoped>

vite.config.ts

@@ -55,17 +55,17 @@ export default defineConfig((mode: ConfigEnv) => {
       },
     },
     server: {
+      host:"0.0.0.0",
       port: +env.VITE_PORT,
       open: env.VITE_OPEN === "true",
       // 配置代理服务器
       proxy: {
         "/api": {
-          target: "http://192.168.2.6:8080",
+          target: "http://192.168.2.10:8080",
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ""),
         },
       },
-      host: '0.0.0.0'
     },
     // pages:{
     //   move: {