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

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">
-            <img v-lazy="props.data.logolinks" />
-        </div>
+        <Aimage :src="props.data.logolinks" :number="props.data.number"/>
+        
         <div class="list">
             <div class="list-content">
                 <div class="top">
@@ -25,9 +24,9 @@
                     </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>
+                <h4 >HKD {{ props.data.HKD }}</h4>
                 <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
                     $t(i18n.global.t('home.offerpricerange'))
                 }}</h6>
@@ -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>