修复bug

README.md

@@ -5,4 +5,3 @@
 
   fini项目
 
-test

index.html

@@ -13,6 +13,12 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
   <style>
+    html{
 
+touch-action:none;
+
+touch-action:pan-y;
+
+}
   </style>
 </html>

package-lock.json

@@ -13,7 +13,7 @@
         "@element-plus/icons-vue": "^2.1.0",
         "amfe-flexible": "^2.2.1",
         "axios": "^0.27.2",
-        "echarts": "^5.4.1",
+        "echarts": "^5.4.2",
         "element-plus": "^2.3.0",
         "js-cookie": "^3.0.1",
         "moment": "^2.29.4",
@@ -25,6 +25,7 @@
         "pinia": "^2.0.33",
         "postcss-px2rem": "^0.3.0",
         "vue": "^3.2.36",
+        "vue-echarts": "^6.5.5",
         "vue-i18n": "^9.2.2",
         "vue-lazyload": "^3.0.0-rc.2",
         "vue-router": "^4.0.15"
@@ -4174,12 +4175,12 @@
       }
     },
     "node_modules/echarts": {
-      "version": "5.4.1",
+      "version": "5.4.2",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
-      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.4.1"
+        "zrender": "5.4.3"
       }
     },
     "node_modules/echarts/node_modules/tslib": {
@@ -9213,6 +9214,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -10537,6 +10543,48 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "node_modules/vue-echarts": {
+      "version": "6.5.5",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
+      "integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.2"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.5",
+        "echarts": "^5.4.1",
+        "vue": "^2.6.12 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -10877,9 +10925,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.4.1",
+      "version": "5.4.3",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
-      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
       "dependencies": {
         "tslib": "2.3.0"
       }
@@ -14471,12 +14519,12 @@
       }
     },
     "echarts": {
-      "version": "5.4.1",
+      "version": "5.4.2",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
-      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
       "requires": {
         "tslib": "2.3.0",
-        "zrender": "5.4.1"
+        "zrender": "5.4.3"
       },
       "dependencies": {
         "tslib": {
@@ -18321,6 +18369,11 @@
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -19375,6 +19428,23 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "vue-echarts": {
+      "version": "6.5.5",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
+      "integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.2"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -19635,9 +19705,9 @@
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
     },
     "zrender": {
-      "version": "5.4.1",
+      "version": "5.4.3",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
-      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
       "requires": {
         "tslib": "2.3.0"
       },

package.json

@@ -15,7 +15,7 @@
     "@element-plus/icons-vue": "^2.1.0",
     "amfe-flexible": "^2.2.1",
     "axios": "^0.27.2",
-    "echarts": "^5.4.1",
+    "echarts": "^5.4.2",
     "element-plus": "^2.3.0",
     "js-cookie": "^3.0.1",
     "moment": "^2.29.4",
@@ -27,6 +27,7 @@
     "pinia": "^2.0.33",
     "postcss-px2rem": "^0.3.0",
     "vue": "^3.2.36",
+    "vue-echarts": "^6.5.5",
     "vue-i18n": "^9.2.2",
     "vue-lazyload": "^3.0.0-rc.2",
     "vue-router": "^4.0.15"

src/App.vue

@@ -1,26 +1,43 @@
 <template >
   <el-config-provider :locale="store.localeLang">
     <div class="login">
-      <router-view v-if="showRouter"/>
+      <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" />
+      </el-drawer>
+      <!-- <router-view v-if="showRouter" /> -->
+      <router-view v-slot="{ Component }">
+        <keep-alive :exclude="route11">
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
     </div>
   </el-config-provider>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, onBeforeMount, onMounted, watch ,provide} from 'vue'
+import { defineComponent, ref, onBeforeMount, onMounted, watch, provide } from 'vue'
 import { ElConfigProvider } from 'element-plus'
+import Drawer from "./views/login/modelComponents/Drawer.vue";
 import { ipoStore } from "@/stores/ipo"
 import router from './router'
-import { getCurrentInstance} from 'vue'
+import { getCurrentInstance } from 'vue'
+const drawer = ref(false)
+const drawer1 = ref(false)
 const { proxy } = (getCurrentInstance() as any)
-const showRouter=ref(true)
+const showRouter = ref(true)
-const reflashRouter=()=>{
+const route11 = ref(["", "XIPO", "Xdashboard"])
-  showRouter.value=false;
+const reflashRouter = () => {
-  setTimeout(()=>{
+  showRouter.value = false;
-    showRouter.value=true
+  setTimeout(() => {
-  },1)
+    showRouter.value = true
+  }, 1)
 }
-provide('reflashRouter',reflashRouter);
+const handleOnDrwaer = (bool: boolean) => {
+  drawer.value = bool
+}
+provide('reflashRouter', reflashRouter);
+provide('handleOnDrwaer', handleOnDrwaer);
 function isMobileFn() {
   return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
 }
@@ -30,20 +47,20 @@ const store = ipoStore();
 onBeforeMount(() => {
   setFontSize()
 })
-onMounted(()=>{
+onMounted(() => {
-        const langHref = window.location.href.split("home")[1] 
+  const langHref = window.location.href.split("home")[1]
-        if (langHref == '?lang=en') {
+  if (langHref == '?lang=en') {
-            proxy.$i18n.locale = 'en'
+    proxy.$i18n.locale = 'en'
-            store.setLocale(1)
+    store.setLocale(1)
-        } else if (langHref == '?lang=tc') {
+  } else if (langHref == '?lang=tc') {
-            proxy.$i18n.locale = 'zhCt'
+    proxy.$i18n.locale = 'zhCt'
-            store.setLocale(2)
+    store.setLocale(2)
-        } else if (langHref == '?lang=sc') {
+  } else if (langHref == '?lang=sc') {
-            proxy.$i18n.locale = 'zhCn'
+    proxy.$i18n.locale = 'zhCn'
 
-            store.setLocale(3)
+    store.setLocale(3)
-        }
+  }
-        reflashRouter()
+  reflashRouter()
 
 
 })
@@ -52,50 +69,65 @@ const setFontSize = () => {
   var font = document.documentElement.clientWidth / 375;
   document.documentElement.style.fontSize = font + "px";
 }
+const handleDrawer = (done: () => void) => {
+  done();
+}
 
 </script>
 
 <style lang="scss" >
 // @import url(./vars.scss);
 // $bg-color: red;
-@media (max-width: 767px) {
+// @media (max-width: 767px) {
-  .login {
+//   .login {
-    width: 100vw;
+//     width: 100vw;
-    height: fit-content;
+//     height: fit-content;
-    background-color: blue;
+//     background-color: blue;
-  }
+//   }
-}
+// }
 
-@media (min-width: 768px) {
+// @media (min-width: 768px) {
-  .login {
+//   .login {
-    width: 100vw;
+//     width: 100vw;
-    height: 100vh;
+//     height: 100vh;
-    // background-color: blue;
+//     // background-color: blue;
-  }
+//   }
-}
+// }
 
-@media (min-width: 992px) {
+// @media (min-width: 992px) {
-  .login {
+//   .login {
-    height: 100%;
+//     height: 100%;
-    width: 100%;
+//     width: 100%;
-    // background-color: pink;
+//     // background-color: pink;
-  }
+//   }
-}
+// }
 
-@media (min-width: 1200px) {
+// @media (min-width: 1200px) {
-  .login {
+//   .login {
-    height: 1100px;
+//     height: 1100px;
-    width: 100%;
+//     width: 100%;
-    // background-color: pink;
+//     // background-color: pink;
-  }
+//   }
-}
+// }
 
 .login {
   background-image: url("@/assets/1x/beijingtu.png");
   background-repeat: no-repeat;
   background-size: cover;
-  // height: 100%;
+  height: 100%;
-  width: 100%;
+  width: 1900px;
-
+  height: 1300px;
+  //overflow: hidden;
+  //  position: fixed;
+  //   width: 100%;
+  //   height: 2000px;
+  //      background-size:100% 100%;
+  @media screen and (max-width: 768px) {
+    max-width: 100vw;
+    overflow: auto;
+    overflow-x: hidden;
+    height: 100%;
+  }
 }
+
 </style>

src/api/reqIpo/ipo.ts

@@ -11,7 +11,7 @@ enum Api {
   EventData="/api/ipos/listingData",
   TypeofList="/api/ipo/refdata/typeOfListing",
   searchUrl="/api/ipo/refdata/search",
-  selectUrl="/api/ipo/refdata/filter",
+  selectUrl="/api/ipo/refdata/searchAndFilter",
   findAllListingDate="/api/ipo/refdata/findAllListingDate"
 }
 //获取ipo详情页的数据
@@ -35,9 +35,11 @@ export const getTypeofListing = (ipoID:string) => {
   return request.get<any, null>(Api.TypeofList+`?ipoID=${ipoID}`);
 };
 //获取首页的搜索数据
-export const getSearchListing = (keyword:string) => {
+export const getSearchListing = (keyWord:string) => {
-  return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
+  // return request.post<any, null>(Api.selectUrl+`?keyWord=${keyWord}`);
-};
+
+  return request.post<any, null>(Api.selectUrl,{keyWord});
+}
 export const getDate = () => {
   return request.get<any, null>(Api.findAllListingDate);
 };
@@ -83,3 +85,6 @@ export const getSelectList = (body:selectObj) => {
   // var obj=JSON.stringify({status})
   return request.post<any, null>(Api.selectUrl,body);
 };
+// export const getSearchListing =(keyword:string)=>{
+//   return request.post<any, null>(Api.selectUrl,keyword);
+// }

src/locales/en.ts

@@ -39,7 +39,8 @@ export default {
         ChineseYuan:'Chinese Yuan',
         UnitedStatesDollar:'United States Dollar',
         noevent:'No event',
-        Norelevantselectdata:'No relevant select data'
+        Norelevantselectdata:'No relevant select data',
+        nodata:'No Data',
     },
     dashboard:{
         Home:'Home',
@@ -56,7 +57,7 @@ export default {
         ApplicationQuantity:'Application Quantity (Shares)',
         InitialShares:'Initial Shares',
         FinalShares:'Final Shares',
-        LastUpadated:'Last Upadated',
+        LastUpadated:'Last Updated',
         InitialAllocation:'Initial Allocation',
         Public:'Public',
         Institutional:'Institutional',

src/locales/zh-cn.ts

@@ -36,7 +36,8 @@ export default {
         ChineseYuan:'人民币',
         UnitedStatesDollar:'美元',
         noevent:'无事件',
-        Norelevantselectdata:'无相关选择数据'
+        Norelevantselectdata:'无相关选择数据',
+        nodata:'无数据',
     },
     dashboard:{
         Home:'主页',

src/locales/zh-ct.ts

@@ -36,7 +36,8 @@ export default {
         ChineseYuan:'人民幣',
         UnitedStatesDollar:'美元',
         noevent:'無事件',
-        Norelevantselectdata:'無相關選擇數據'
+        Norelevantselectdata:'無相關選擇數據',
+        nodata:'無數據',
     },
     dashboard:{
         Home:'主頁',

src/router/routes.ts

@@ -64,16 +64,6 @@ export const staticRoutes: Array<RouteRecordRaw> = [
     name: "XIPO",
     component: () => import("@/views/IPO/index.vue")
   },
-  {
-    path: "/searchdash",
-    name: "Xsearchdash",
-    component: () => import("@/views/searchdash/index.vue")
-  },
-  {
-    path: "/searchipo",
-    name: "Xsearchipo",
-    component: () => import("@/views/searchipo/index.vue")
-  },
   {
     path: "/IPOcalendar",
     name: "Xsearchipo",

src/stores/ipo.ts

@@ -3,12 +3,23 @@ import { defineStore } from 'pinia'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import en from 'element-plus/dist/locale/en.mjs'
 import zhTw from 'element-plus/dist/locale/zh-tw.mjs'
+import request from "@/utils/request";
+enum Api {
+  selectUrl="/api/ipo/refdata/searchAndFilter",
+
+}
 export const ipoStore = defineStore({
   id: 'app',
   state: () => ({
     //1代表英文 2代表繁体中文 3代表简体中文
     locale:1,
-
+    homeDay:new Date(),
+    mobileActiveShow:1,
+    mainExpand:-1,
+    filterObj:{},   //把过滤条件放在这里
+    keyWord:"",
+    selectedArr:{},
+    ipoIds:[] as any
   }),
   getters: {
     localeLang(state) {
@@ -19,6 +30,44 @@ export const ipoStore = defineStore({
     //更改语言的方法
     setLocale(data: number) {
       this.locale = data 
+
+    },
+    setHomeDay(day:string|Date){
+      this.homeDay=day as Date;
+    },
+    setMobileActiveShow(num:number){
+      this.mobileActiveShow=num;
+    },
+    setMainExpand(num:number){
+      this.mainExpand=num;
+    },
+    setFilterObje(obj:any){
+      this.filterObj=obj;
+    },
+    // reqSearchList(keyworld:string){
+
+    // }
+    setSelectedArr(data:any){
+      this.selectedArr=data;
+    },
+    setKeyWord(keyWord:string){
+      this.keyWord=keyWord;
+    },
+    getSearchSelectList(){
+      const keyWord=this.keyWord;
+      const selectedArr=this.selectedArr;
+      return request.post<any, null>(Api.selectUrl,{keyWord,...selectedArr});
+    },
+    setIpoIds(ipoId:string|number){
+      const arr=this.$state.ipoIds;
+      const hasId= arr.some((i:any)=>i==ipoId);
+        const index=arr.findIndex((i:any)=>i==ipoId);
+        hasId&&arr.splice(index,1)
+        !hasId&&arr.push(ipoId)
+    },
+    isExpand(ipoId:string|number){
+      return this.$state.ipoIds.some((i:any)=>i==ipoId);
     }
-  }
+  },
+
 })

src/views/IPO/components/IpoContent.vue

@@ -60,9 +60,9 @@
                     </el-table>
                 </div>
                 <div class="Modeltable" v-if="item.table">
-                    <el-table :data="item.table.lists" stripe style="width: 100%;">
+                    <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" />
+                            :label="title.header" :width="322 * (title.width / 100)" :align="title.align" :key="index" />
                     </el-table>
                 </div>
 

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" title="">
             <Drawer :drawer="drawer" @childfn="fn" />
         </el-drawer>
         <div class="hleft">
@@ -11,7 +11,7 @@
             </div>
 <div class="right" >
     <div class="search" @click="handlesearch">
-                <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
+                <img src="@/assets/1x/source10.png" alt="找不到图片">
             </div>
             <div class="langWrap">
                 <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
@@ -61,6 +61,13 @@ onMounted(() => {
         lang.value.showLang = false
     }
 })
+//const data1 =ref()
+// onMounted(() => {
+//     const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
+//    data1.value = obj
+//    console.log(data1.value);
+   
+// })
 function fn(data: any) {
     drawer.value = data
 }
@@ -78,6 +85,7 @@ onUnmounted(() => {
 .right{
     display: flex;
     margin-left: 10px;
+    margin-top: 5px;
     align-items: center;
     @media screen and (max-width: 768px) {
     margin-right: 8vw;
@@ -94,15 +102,15 @@ onUnmounted(() => {
     margin-left: 15px;
 
     @media screen and (max-width: 768px) {
-        // display: none;
+     display: none;
-        display: flex;
+       // display: flex;
     }
 
     .second {
 
         width: 25px;
         height: 30px;
-       // margin-top: 4px;
+        margin-top: 4px;
 
         &:hover {
             transform: scale(1.2);
@@ -165,18 +173,19 @@ onUnmounted(() => {
             font-weight: bolder;
 
             @media screen and (max-width: 768px) {
-                font-size: 20px;
+                font-size: 24px;
                 margin-left: 10px;
+                padding-top: 4px;
                 //transform: translateX(-60px);
                // display: inline;
             }
         }
 
         .search {
-            background-color: #fff;
+            //background-color: #fff;
-            width: 30px;
+          //  width: 30px;
-        height: 30px;
+       // height: 30px;
-            border-radius: 50%;
+          //  border-radius: 50%;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -187,6 +196,9 @@ onUnmounted(() => {
             img {
                 width: 25px;
                 height: 30px;
+                @media screen and (max-width: 768px) {
+               margin-top: -10px;
+            }
             }
             
         }

src/views/IPO/components/IpoNav.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="item">
-        <a @click="scrollto(index)" v-for="(item, index) in list" :key="index">{{ item }}</a>
+        <a @click="scrollto(index)" v-for="(item, index) in   list  " :class="ipoNavActive == index ? 'active' : ''"
+            :key="index">{{
+                item }}</a>
     </div>
 </template>
 
@@ -11,16 +13,21 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, defineProps ,computed} from "vue"
+import { ref, defineProps, computed, defineExpose } from "vue"
 import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 const { proxy } = (getCurrentInstance() as any)
 const props = defineProps<{ scroll: Function }>()
+const ipoNavActive = ref(0)
 const scrollto = (index: number) => {
     const ref11 = "i" + index + "TOP"
-    console.log(ref11)
+    //  console.log(ref11)
+    ipoNavActive.value = index
     props.scroll(ref11)
 }
+defineExpose({
+    ipoNavActive
+})
 const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')]))
 </script>
 
@@ -31,7 +38,7 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
 
     @media screen and (max-width: 768px) {
         margin-top: 0px;
-        width: 100vw;
+       // width: 100vw;
         overflow-x: scroll;
         margin-left: 15px;
     }
@@ -48,9 +55,14 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
         white-space: nowrap;
 
         &:hover {
+            // background-color: #1C3F56;
+            // color: #fff;
+            cursor: pointer;
+        }
+
+        &.active {
             background-color: #1C3F56;
             color: #fff;
-            cursor: pointer;
         }
     }
 }

src/views/IPO/index.vue

@@ -7,18 +7,23 @@
             </div>
             <div class="rightbox">
                 <IpoHeader />
-                <IpoNav :scroll="scrollTo" />
+                <IpoNav ref="ipoNav" :scroll="scrollTo" v-if="data != null" />
-                <div class="content" ref="content">
+                <div class="content" ref="content" @scroll="contentScroll" v-if="data != null">
-                    <IpoContent ref="i0" :info="information" :title="$t('ipo.CompanyInformation')" />
+                    <IpoContent ref="i0" :info="information11" :title="$t('ipo.CompanyInformation')" />
-                    <IpoContent ref="i1" :info="TypeOfListing" :title="$t('ipo.TypeofListing.TypeofListing')" />
+                    <IpoContent ref="i1" :info="TypeOfListing11" :title="$t('ipo.TypeofListing.TypeofListing')" />
-                    <IpoContent ref="i2" :info="Offerings" :title="$t('ipo.Offering.Offering')" />
+                    <IpoContent ref="i2" :info="Offerings11" :title="$t('ipo.Offering.Offering')" />
-                    <IpoContent ref="i3" :info="Advisers" :title="$t('ipo.advisers.Adviser')" />
+                    <IpoContent ref="i3" :info="Advisers11" :title="$t('ipo.advisers.Adviser')" />
-                    <IpoContent ref="i4" :info="Timetable" :title="$t('ipo.Timetable.Timetable')" />
+                    <IpoContent ref="i4" :info="Timetable11" :title="$t('ipo.Timetable.Timetable')" />
-                    <IpoContent ref="i5" :info="Documents" :title="$t('ipo.Documents.Documents')" />
+                    <IpoContent ref="i5" :info="Documents11" :title="$t('ipo.Documents.Documents')" />
-                    <IpoContent ref="i6" :info="Transaction" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
+                    <IpoContent ref="i6" :info="Transaction11" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
+                </div>
+                <div v-else style="display: flex;align-items: center;width: 100vw;height: 90vh;justify-content: center;">
+                    <div style="color:#1f4055 ;font-weight: bold;font-size: 25px;">{{ $t(i18n.global.t('home.nodata')) }}</div>
                 </div>
             </div>
+
         </div>
+
     </div>
 </template>
 <script lang="ts">
@@ -32,7 +37,7 @@ import Nav from '@/views/dashBoard/nav/index.vue'
 import IpoHeader from "./components/IpoHeader.vue"
 import IpoNav from "./components/IpoNav.vue"
 import IpoContent from "./components/IpoContent.vue"
-import { ref, onMounted, onUpdated } from "vue";
+import { ref, onMounted, onUpdated, computed } from "vue";
 import type { TabsPaneContext } from 'element-plus'
 import { ipoStore } from "@/stores/ipo"
 import { useRoute } from 'vue-router'
@@ -41,7 +46,565 @@ import { getDataFromId } from "@/api/mock/home"
 import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 import moment from 'moment';
+const MockRes = ref<any>('')
+const information11 = computed(() => {
+    const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = MockRes.value;
+    const placeOfincorporation = ref('')
+    var obj = {
+        1: proxy.$t('ipo.Bermuda'),
+        2: proxy.$t('ipo.CaymanIslands'),
+        3: proxy.$t('ipo.HongKongChina'),
+        4: proxy.$t('ipo.PeoplesRepublicofChina'),
+        5: proxy.$t('ipo.Australia'),
+        6: proxy.$t('ipo.BritishVirginIslands'),
+        7: proxy.$t('ipo.CanadaAlberta'),
+        8: proxy.$t('ipo.CanadaBritishColumbia'),
+        9: proxy.$t('ipo.CanadaOntario'),
+        10: proxy.$t('ipo.England'),
+        11: proxy.$t('ipo.Israel'),
+        12: proxy.$t('ipo.Italy'),
+        13: proxy.$t('ipo.Japan'),
+        14: proxy.$t('ipo.Jersey'),
+        15: proxy.$t('ipo.Luxembourg'),
+        16: proxy.$t('ipo.Singapore'),
+        17: proxy.$t('ipo.USDelaware'),
+        99: proxy.$t('ipo.Others'),
+    }
+    if (isValidKey(placeOfCorp, obj)) {
+        placeOfincorporation.value = obj[placeOfCorp]
+    }
+    function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+    const arr = [has_data(companyEngFull), has_data(companyEngShort), has_data(companyChiFull), has_data(companyChiShort), has_data(stkCode), has_data(isin), placeOfincorporation, hkAddress];
+    arr[7].__proto__ = Array.prototype
+    let infos = arr[7].map((obj: any) => {
+        return obj.line
+    })
+    return [
+        {
+            name: proxy.$t('ipo.CompanyNameEnglishFull'),
+            info: arr[0]
+        },
+        {
+            name: proxy.$t('ipo.CompanyNameEnglishShort'),
+            info: arr[1]
+        },
+        {
+            name: proxy.$t('ipo.CompanyNameChineseFull'),
+            info: arr[2]
+        },
+        {
+            name: proxy.$t('ipo.CompanyNameChineseShort'),
+            info: arr[3]
+        },
+        {
+            name: proxy.$t('ipo.STockCode'),
+            info: arr[4]
+        },
+        {
+            name: proxy.$t('ipo.ISIN'),
+            info: arr[5]
+        },
+        {
+            name: proxy.$t('ipo.PlaceofIncorporation'),
+            info: arr[6]
+        },
+        {
+            name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'),
+            infos: infos
+        }
+    ]
+})
+const TypeOfListing11 = computed(() => {
+    let { offerType, listSecurities, nomValue, nomCur, listPlatform, } = MockRes.value;
+    var obj3 = {
+        1: "HKD",
+        2: "CNY",
+        3: "USD",
+        4: "AED",
+        5: "ATS",
+        6: "AUD",
+        7: "BDT",
+        8: "BEC",
+        9: "BEL",
+        10: "BHD",
+        11: "BND",
+        12: "BRC",
+        13: "BRL",
+        14: "BUK",
+        15: "CAD",
+        16: "CHF",
+        17: "CYP",
+        18: "DEM",
+        19: "DKK",
+        20: "ECU",
+        21: "ESP",
+        22: "EUR",
+        23: "FIM",
+        24: "FJD",
+        25: "FRF",
+        26: "GBP",
+        27: "GGP",
+        28: "IDR",
+        29: "IEP",
+        30: "IMP",
+        31: "INR",
+        32: "ITL",
+        33: "JPY",
+        34: "KES",
+        35: "KRW",
+        36: "KWD",
+        37: "LBP",
+        38: "LKR",
+        39: "MOP",
+        40: "MUR",
+        41: "MYR",
+        42: "NGN",
+        43: "NIS",
+        44: "NLG",
+        45: "NOK",
+        46: "NZD",
+        47: "OMR",
+        48: "PHP",
+        49: "PKR",
+        50: "PTE",
+        51: "QAR",
+        52: "RUB",
+        53: "SAR",
+        54: "SCR",
+        99: "Others"
+    }
+    var obj2 = {
+        1: proxy.$t('home.Mainboard'),
+        2: proxy.$t('home.GEM')
+    }
+    var obj1 = {
+        1: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
+        2: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
+        3: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
+        4: proxy.$t('ipo.TypeofListing.Preferenceshares'),
+        5: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
+        6: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
+        7: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
+        8: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
+        99: proxy.$t('ipo.TypeofListing.Other'),
+    }
+    var obj = {
+        1: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
+        2: proxy.$t('ipo.TypeofListing.Byplacingonly'),
+        3: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
+        4: proxy.$t('ipo.TypeofListing.Byintroduction'),
+        5: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
+    }
 
+    if (isValidKey(offerType, obj)) {
+        offerType = obj[offerType]
+    }
+    if (isValidKey(listSecurities, obj1)) {
+        listSecurities = obj1[listSecurities]
+    }
+    if (isValidKey(listPlatform, obj2)) {
+        listPlatform = obj2[listPlatform]
+    }
+    if (isValidKey(nomCur, obj3)) {
+        nomCur = obj3[nomCur]
+    }
+    function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+    const arr = [
+        { info: offerType },
+        { info: listSecurities },
+        { info: has_data(nomValue), info2: nomCur as any },
+        { info: listPlatform },
+        { info: has_data(listSecurities) },]
+    return [
+        {
+            name: proxy.$t('ipo.TypeofListing.OfferingType'),
+            info: arr[0].info
+        },
+        {
+            name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'),
+            info: arr[1].info
+        },
+        {
+            name: proxy.$t('ipo.TypeofListing.NominalValueperShare'),
+            info: arr[2].info,
+            name2: proxy.$t('ipo.TypeofListing.NominalCurrency'),
+            info2: arr[2].info2
+        },
+        {
+            name: proxy.$t('ipo.TypeofListing.ListingPlatform'),
+            info: arr[3].info
+        },
+        {
+            name: proxy.$t('ipo.TypeofListing.ListingType'),
+            info: arr[4].info
+        },]
+})
+const Offerings11 = computed(() => {
+    const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = MockRes.value;
+    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(boardLot) },
+        { info: keepTwoDecimalStr(poReallocationCap) },
+        { info: "-", info2s: [has_data(ipoShares?.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), "%") },
+        { table: denomTable }
+    ]
+    const arr = Offerings.value.map((item, index) => {
+        const name = item.name;
+        const info = dataObj[index].info;
+        var filterObj = { name, info } as any;
+        if (dataObj[index].info2 || dataObj[index].info2s) {
+            filterObj.info2 = dataObj[index].info2
+            filterObj.name2 = item.name2;
+        }
+        if (dataObj[index]?.info2s) {
+            filterObj.info2s = dataObj[index].info2s
+        }
+        if (dataObj[index].table) {
+            filterObj.table = { title: item.table?.title, lists: [] }
+            filterObj.table.lists = dataObj[index].table.map((element: any) => {
+                if (index == 8) {
+                    //加逗号的函数 
+                    function formatNumber(num: number | string) {
+                        return num.toString().replace(/\d+/, function (n: string) {
+                            return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+                        })
+                    }
+                    const { shares: number, value: persent } = element;
+                    // console.log('ttttttttttttttttttt',persent);
+                    let per = Number(persent)
+                    return { number: formatNumber(number), persent: per && formatNumber(per.toFixed(2)) }
+                } else {
+                    const { threshold: number, allocation: persent } = element;
+
+                    return { number, persent: keepTwoDecimalStr(persent) }
+                }
+
+            })
+        }
+        return filterObj
+    })
+    return [
+        {
+            name: proxy.$t('ipo.Offering.TradingCurrency'),
+            info: arr[0].info
+        },
+        {
+            name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
+            info: arr[1].info
+        },
+        {
+            name: proxy.$t('ipo.Offering.OfferPriceRange'),
+            info: arr[2].info,
+            name2: proxy.$t('home.finalofferprice'),
+            info2: arr[2].info2
+        },
+        {
+            name: proxy.$t('ipo.Offering.TradingBoardLot'),
+            info: arr[3].info
+        },
+        {
+            name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
+            info: arr[4].info
+        },
+        {
+            // name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
+            // info: "100,000", 暂时不暂时的字段----
+            name: "",
+            info: "",
+            name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
+            info2: arr[5].info,
+            info2s: arr[5].info2s,
+            table: {
+                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: arr[5].table.lists,
+            }
+        },
+        {
+            name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
+            info: arr[6].info,
+            name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
+            info2: arr[6].info2,
+        },
+        {
+            name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
+            info: arr[7].info,
+        },
+        // {暂时不暂时的字段--------
+        //     name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
+        //     info: "inclusive"
+        // },
+        // {暂时不暂时的字段-------------
+        //     name: proxy.$t('ipo.Offering.OverallotmentOption'),
+        //     info: "5.00%"
+        // },
+        {
+            name: proxy.$t('ipo.Offering.DenominationTable'),
+            table: {
+                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: arr[8].table.lists,
+            }
+        }
+    ]
+})
+const Advisers11 = computed(() => {
+    let { designatedSponsor, sponsors, legalSponsor, legalIssuer, underwriters, advisers, overallCoordinators, distributors, hkSharereg } = MockRes.value;
+    const arr = [
+        { info: has_data(designatedSponsor) },
+        { infos: filter(sponsors) },
+        { infos: filter(legalSponsor) },
+        { info: has_data(legalIssuer) },
+        { infos: filter(underwriters) },
+        { infos: filter(advisers) },
+        { infos: filter(overallCoordinators) },
+        { infos: filter(distributors) },
+        { info: has_data(hkSharereg) }
+    ]
+    function filter(arr: any) {
+        if (arr) {
+            return arr.map((item: any) => item.member)
+        } else {
+            return "-";
+        }
+
+    }
+
+    const arrData = Advisers.value.map((item: any, index: number) => {
+        if (arr[index].info) {
+            return { ...item, info: arr[index].info }
+        } else {
+            if (arr[index].infos?.length - 1 > 0) {
+                let info2Top = -(arr[index].infos?.length * 22) + "px";
+                return { ...item, infos: arr[index].infos, info2Top }
+            } else {
+                return { ...item, infos: arr[index].infos }
+            }
+
+        }
+    })
+   // console.log('arrData', arrData)
+    return [
+        {
+            name: proxy.$t('ipo.advisers.DesignatedSponsor'),
+            info: arrData[0].info
+            // info2: "IBD-TEAM01"
+        },
+        {
+            name: proxy.$t('ipo.advisers.Sponsor'),
+            info: arrData[1].info,
+            infos: arrData[1].infos,
+        },
+        {
+            name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
+            infos: arrData[2].infos,
+            info2Top: arrData[2].info2Top
+        },
+        {
+            name: proxy.$t('ipo.advisers.HKLegalAdviser'),
+            info: arrData[3].info
+            // info2: "LEG_TEAM05"
+        },
+        {
+            name: proxy.$t('ipo.advisers.Underwriter'),
+            info: arrData[4].info,
+            infos: arrData[4].infos,
+        },
+        {
+            name: proxy.$t('ipo.advisers.Adviser'),
+            info: arrData[5].info,
+            infos: arrData[5].infos
+        },
+        {
+            name: proxy.$t('ipo.advisers.OverallCoordinator'),
+            infos: arrData[6].infos,
+            // info2: "PLA_SYN_TEAM03",
+            info2Top: arrData[6].info2Top,
+        },
+        {
+            name: proxy.$t('ipo.advisers.Distributor'),
+            infos: arrData[7].infos,
+            info2Top: arrData[7].info2Top,
+            // info2: "PLA_SYN_TEAM04"
+        },
+        {
+            name: proxy.$t('ipo.advisers.HKShareRegistrar'),
+            info: arrData[8].info,
+
+        },
+    ]
+})
+const Timetable11 = computed(() => {
+    const { listingDate, bookOpenDate, bookCloseDate, pricingDate, allotmentDate, siInputDate, placingSharesDeliveryDate } = MockRes.value;
+
+    const arr = [
+        {
+            info: timeTo(listingDate)[0], info2: timeTo(listingDate)[1],
+            table: {
+                lists: [{
+                    number: timeTo(bookOpenDate)[0],
+                    persent: timeTo(bookOpenDate)[1]
+                }, {
+                    number: timeTo(bookCloseDate)[0],
+                    persent: timeTo(bookCloseDate)[1]
+                }, {
+                    number: timeTo(pricingDate)[0],
+                    persent: timeTo(pricingDate)[1]
+                }, {
+                    number: timeTo(allotmentDate)[0],
+                    persent: timeTo(allotmentDate)[1]
+                }, {
+                    number: timeTo(siInputDate)[0],
+                    persent: timeTo(siInputDate)[1]
+                }, {
+                    number: timeTo(placingSharesDeliveryDate)[0],
+                    persent: timeTo(placingSharesDeliveryDate)[1]
+                }]
+            }
+        }
+    ]
+    const arrData = 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) {
+            return [moment(time).format("YYYY-MM-DD"), toEmpty(moment(time).format("HH:mm"))]
+        } else {
+            return ["-", "-"]
+        }
+        function toEmpty(time: string) {
+            //如果时间戳转换出来是00:00 就返回空
+            if (time == "00:00") {
+                return ""
+            } else {
+                return time
+            }
+        }
+    }
+    const lists = arrData[0].table.lists;
+    return [
+        {
+            name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
+            info: arrData[0].info,
+            name2: proxy.$t('ipo.Timetable.Time'),
+            info2: arrData[0].info2,
+            table: {
+                title: [
+                    { header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
+                    { width: isMobel() ? 1 : 12 },  //通过加一段空结构来调整表头的位置
+                    { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel() ? 30 : 20, align: "left" },
+                    { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel() ? 22 : 20, align: "left" }],
+                lists: [
+                    {
+                        des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
+                        number: lists[0].number,
+                        persent: lists[0].persent
+                    },
+                    {
+                        des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
+                        number: lists[1].number,
+                        persent: lists[1].persent,
+                    },
+                    {
+                        des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
+                        number: lists[2].number,
+                        persent: lists[2].persent,
+                    },
+                    {
+                        des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'),
+                        number: lists[3].number,
+                        persent: lists[3].persent,
+                    },
+                    {
+                        des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
+                        number: lists[4].number,
+                        persent: lists[4].persent,
+                    },
+                    {
+                        des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
+                        number: lists[5].number,
+                        persent: lists[5].persent,
+                    }
+                ]
+            }
+        }
+
+    ]
+})
+const Documents11 = computed(() => {
+    return [
+        {
+            name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
+            info: Documents.value[0].info,
+            name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
+            info2: Documents.value[0].info2,
+            href: Documents.value[0].href,
+            href2: Documents.value[0].href2
+        },
+    ]
+})
+const Transaction11 = computed(() => {
+    const { brokerage, sfcLevy, sehkTradingFee, afrcTransactionLevy } = MockRes.value;
+    //console.log('@@11123', afrcTransactionLevy)
+    const arr = [
+        { info: has_data(brokerage?.toFixed(5), "%"), info2: has_data(sfcLevy?.toFixed(5), "%") },
+        { info: has_data(sehkTradingFee?.toFixed(5), "%"), info2: has_data(afrcTransactionLevy?.toFixed(5), "%") },
+    ]
+    const arrData = Transaction.value.map((item, index) => {
+        // if(arr[index].info == undefined){return ('-' as any)}
+        // if(arr[index].info2 == null){return '-'}
+
+        if (arr[index].info2) {
+            return { ...item, info: arr[index].info, info2: arr[index].info2 }
+        } else {
+            return { ...item, info: arr[index].info }
+        }
+    })
+    return [
+        {
+            name: proxy.$t('ipo.TransactionCosts.Brokerage'),
+            info: arrData[0].info,
+            name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
+            info2: arrData[0].info2
+        },
+        {
+            name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
+            info: arrData[1].info,
+            name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
+            info2: arrData[1].info2
+        },
+    ]
+})
 const store = ipoStore();
 const { proxy } = (getCurrentInstance() as any)
 const activeName = ref('first')
@@ -52,6 +615,8 @@ const i3 = ref()
 const i4 = ref()
 const i5 = ref()
 const i6 = ref()
+const ipoNav = ref()
+const isClickScroll = ref(false)
 const route = useRoute()
 const handleClick = (tab: TabsPaneContext, event: Event) => {
     console.log(tab, event)
@@ -312,6 +877,7 @@ const Timetable = ref([
                     persent: '',
                 }
             ]
+
         }
     }
 
@@ -342,36 +908,53 @@ const Transaction = ref([
 ])
 const content = ref()
 onMounted(
+
     () => {
-        data.value = JSON.parse(localStorage.getItem('itemData') as string)
+        store.setMobileActiveShow(3);//设置移动端弹窗高亮
+        // data.value = JSON.parse(localStorage.getItem('itemData') as string)
+        const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
+        data.value = obj
+        console.log(data.value);
+
         getreferencedata()
         setDownLoad()
         // text();
     }
 )
-// async function text() {
+async function text() {
-//     const res = await getDataFromId(1);
+    const res = await getDataFromId(1);
-//     setInformation((res as any)[0])
+    MockRes.value = (res as any)[0]
-//     setTypeofListing((res as any)[0])
+    // setInformation((res as any)[0])
-//     setOfferings((res as any)[0])
+    // setTypeofListing((res as any)[0])
-//     setAdvisers((res as any)[0])
+    // setOfferings((res as any)[0])
-//     setTransaction((res as any)[0])
+    setAdvisers((res as any)[0])
-//     setTimeTable((res as any)[0])
+    setTransaction((res as any)[0])
-// }
+    setTimeTable((res as any)[0])
+
+}
 const getreferencedata = async () => {
-    const ipoID = localStorage.getItem('ipoID')
+    //const ipoID = localStorage.getItem('ipoID')
+    const ipoID = sessionStorage.getItem('ipoID')
     const res = await getIpo(ipoID as string)
-    setInformation((res as any).data[0])
+    MockRes.value = (res as any).data[0]
-    setTypeofListing((res as any).data[0])
+    // setInformation((res as any).data[0])
-    setOfferings((res as any).data[0])
+    // setTypeofListing((res as any).data[0])
-    setAdvisers((res as any).data[0])
+    // setOfferings((res as any).data[0])
-    setTransaction((res as any).data[0])
+    // setAdvisers((res as any).data[0])
-    setTimeTable((res as any).data[0])
+    // setTransaction((res as any).data[0])
+    // setTimeTable((res as any).data[0])
+
+
 }
 function isMobel() {
     return 768 >= document.documentElement.clientWidth;
 }
+// const setInformation1 = computed((mockRes: any)=>{
+//   console.log(mockRes);
+
+// })
 function setInformation(mockRes: any) {
+
     const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
     const placeOfincorporation = ref('')
     var obj = {
@@ -416,6 +999,8 @@ function setInformation(mockRes: any) {
             return { ...item, infos }
         }
     })
+    //console.log(information.value);
+
 }
 function setOfferings(mockRes: any) {
     const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = mockRes;
@@ -453,8 +1038,8 @@ function setOfferings(mockRes: any) {
                     }
                     const { shares: number, value: persent } = element;
                     // console.log('ttttttttttttttttttt',persent);
-                    let per=Number(persent)
+                    let per = Number(persent)
-                    return { number:formatNumber(number) , persent:per&&formatNumber(per.toFixed(2)) }
+                    return { number: formatNumber(number), persent: per && formatNumber(per.toFixed(2)) }
                 } else {
                     const { threshold: number, allocation: persent } = element;
 
@@ -733,6 +1318,7 @@ function has_data(str: string | null | undefined, str2: string = "") {
 }
 //滑动到指定列表
 function scrollTo(stron: string) {
+    isClickScroll.value = true;
     var obj = {
         i0TOP: i0.value.$el.offsetTop,
         i1TOP: i1.value.$el.offsetTop,
@@ -746,6 +1332,10 @@ function scrollTo(stron: string) {
         // 滑动
         content.value.scrollTop = obj[stron] - obj.i0TOP;
     }
+    setTimeout(() => {
+        isClickScroll.value = false;
+    })
+
     // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
     function isValidKey(
         key: string | number | symbol,
@@ -754,9 +1344,38 @@ function scrollTo(stron: string) {
         return key in object;
     }
 
+}
+function contentScroll(e: any) {
+    if (isClickScroll.value) return
+    var obj = {
+        i0TOP: i0.value.$el.offsetTop + 50,
+        i1TOP: i1.value.$el.offsetTop,
+        i2TOP: i2.value.$el.offsetTop,
+        i3TOP: i3.value.$el.offsetTop,
+        i4TOP: i4.value.$el.offsetTop,
+        i5TOP: i5.value.$el.offsetTop,
+        i6TOP: i6.value.$el.offsetTop
+    }
+    if (obj.i6TOP - obj.i0TOP < content.value.scrollTop) {
+        ipoNav.value.ipoNavActive = 6
+    } else if (obj.i5TOP - obj.i0TOP < content.value.scrollTop) {
+        ipoNav.value.ipoNavActive = 5
+    } else if (obj.i4TOP - obj.i0TOP < content.value.scrollTop) {
+        ipoNav.value.ipoNavActive = 4
+    } else if (obj.i3TOP - obj.i0TOP < content.value.scrollTop) {
+        ipoNav.value.ipoNavActive = 3
+    } else if (obj.i2TOP - obj.i0TOP < content.value.scrollTop) {
+        ipoNav.value.ipoNavActive = 2
+    } else if (obj.i1TOP - obj.i0TOP < content.value.scrollTop) {
+        ipoNav.value.ipoNavActive = 1
+    } else {
+        ipoNav.value.ipoNavActive = 0
+    }
+
 }
 async function setDownLoad() {
-    const ipoID = localStorage.getItem('ipoID');
+    //const ipoID = localStorage.getItem('ipoID');
+    const ipoID = sessionStorage.getItem('ipoID');
     const res = await getIpo(ipoID as string)
     const enHref = `${(res as any).data[0].pdfLink.eLink}`;
     const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
@@ -779,13 +1398,31 @@ async function setDownLoad() {
 </script>
 <style lang="scss" scoped>
 .login2 {
-    background-image: url("@/assets/1x/beijingtu.png");
+
-    background-repeat: no-repeat;
+    //     background-image: url("@/assets/1x/beijingtu.png");
-    background-size: cover;
+    //   background-repeat: no-repeat;
-    width: 1700px;
+    //   background-size: cover;
+    //   height: 100vh;
+    //   font-family: "Calibri";
+    //   width: 1900px;
+    //width: 1900px;
     // font-family: "Calibri";
-    @media screen and (max-width: 768px){
+    // @media screen and (max-width: 768px) {
-        width: auto;
+    //     position: fixed;
+    // top: 0;
+    // left: 0;
+    // width: 100%;
+    // height: 100%;
+    // }
+    @media screen and (max-width: 768px) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url("@/assets/1x/beijingtu.png");
+        background-repeat: no-repeat;
+        background-size: cover;
     }
 }
 

src/views/IpoCalendar/index.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="right">
+ 
+        <div class="right">
         <div class="right-top">
             <img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
             <img src="@/assets/1x/1x/source1.png" class="icon2" />
@@ -11,34 +12,40 @@
                 <template #header="{ date }">
 
                     <el-button size="small" @click="selectDate('prev-month')">
-                        <img src="@/assets/1x/source11.png">
+                        <img src="@/assets/1x/source14.png">
                     </el-button>
                     <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
-                    <span class="month">{{ showMounth(date) }}</span>
+                    <span class="month">{{ date }}</span>
 
                     <el-button size="small" @click="selectDate('next-month')">
-                        <img src="@/assets/1x/source12.png">
+                        <img src="@/assets/1x/source15.png">
                     </el-button>
 
                 </template>
-                <template #dateCell="{data}">
+                <template #dateCell="{ data }">
 
-               <p style="margin:0px" >
+                    <p style="margin:0px">
-                     {{ data.day.split('-').slice(2).join() }}
+                        {{ data.day.split('-').slice(2).join() * 1 }}
 
-                <div v-for="(i, index) in dayTime" :key="index">
+                    <div v-for="(i, index) in dayTime" :key="index">
-                   <div v-if="data.day==i" class="yuan"></div>
+                        <div v-if="i.split('-').slice(2).join() * 1<=9">
-               </div>
+                                  <div v-if="data.day == i" class="yuan1"></div> 
-              </p>
+                                </div>
-           </template>
+                               <div v-else>
+                                <div v-if="data.day == i" class="yuan"></div> 
+                               </div>
+                    </div>
+                    </p>
+                </template>
             </el-calendar>
         </div>
         <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">{{ $t(i18n.global.t('home.noevent')) }}</div>
+                </div>
        
-        </div>
     </div>
+   
 </template>
 
 <script lang="ts">
@@ -53,12 +60,15 @@ import moment from "moment"
 import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 import Event from '@/views/login/components/Event.vue';
-import { getEventData, getSearchListing,getDate } from "@/api/reqIpo/ipo";
+import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
 import { getDataFromId } from "@/api/mock/home"
+
 const { proxy } = (getCurrentInstance() as any)
 const dayValue = ref(new Date())
 const calendar = ref()
-const Eventdata = ref([])
+
+const emit = defineEmits(['close'])
+//const Eventdata = ref([])
 const selectDate = (val: string) => {
     calendar.value.selectDate(val)
 }
@@ -68,10 +78,10 @@ watch(dayValue, async (ne, ol) => {
     setEventdata((result as any).data)
 })
 const dayTime = ref()
-const getcalendar = async ()=>{
+const getcalendar = async () => {
     const res = await getDate()
-  dayTime.value = (res as any).data
+    dayTime.value = (res as any).data
-  console.log(dayTime.value);
+    console.log(dayTime.value);
 }
 const showMounth = (date: any) => {
     const arr = date.split(" ")
@@ -87,6 +97,72 @@ onMounted(async () => {
     setEventdata((result as any).data)
     getcalendar()
 })
+const Eventdata = ref([
+    // {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司",
+    //     number: 2370
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司",
+    //     number: 2370
+    // }, {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司",
+    //     number: 2372
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     name: "力高健康生活有限公司",
+    //     logo:"-",
+    //     number: 2373
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     name: "力高健康生活有限公司",
+    //     logo:"-",
+    //     number: 2374
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     name: "力高健康生活有限公司",
+    //     logo:"-",
+    //     number: 2375
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司",
+    //     number: 2378
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司",
+    //     number: 2374
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司",
+    //     number: 2378
+    // },
+    // {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司111111111111111111111111111",
+    //     number: 2380
+    // }, {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司1111111111111111111111111111",
+    //     number: 2381
+    // }
+])
 const setEventdata = (EventD: any) => {
     Eventdata.value = EventD.map((item: any) => {
         const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
@@ -101,44 +177,66 @@ const setEventdata = (EventD: any) => {
 }
 const backRouter = () => {
     proxy.$router.go(-1)
+    //const drawer2 = false
+//emit('close',false)
+
 }
 </script>
 
 <style lang="scss"  scoped>
 @media screen and (max-width: 768px) {
-    .yuan{
+    .login{
+        width: 100vw;
+        height: fit-content;
+        
+    }
+    .yuan {
         width: 12px;
-    height: 12px;
+        height: 12px;
-    background-color: #f7be39;
+        background-color: #f7be39;
-    position: absolute;
+        position: absolute;
-    //right: 20px;
+        //right: 20px;
-    //top: 36px;
+        //top: 36px;
-    transform: translateY(11px);
+        transform: translateY(11px);
-    //transform: translateX(3px);
+        //transform: translateX(3px);
-    margin-left: 3px;
+        margin-left: 2px;
-    border-radius: 10px;
+        border-radius: 10px;
+    }
+.yuan1{
+    width: 12px;
+        height: 12px;
+        background-color: #f7be39;
+        position: absolute;
+        //right: 20px;
+        //top: 36px;
+        transform: translateY(11px);
+        //transform: translateX(3px);
+        margin-left: -2px;
+        border-radius: 10px;
 }
     .right {
         width: 100vw;
         box-sizing: border-box;
-        height: 100%;
+       // height: 100%;
         padding-bottom: 80px;
         background-color: #1f4055;
         z-index: 1;
         border: #1f4055 1px solid;
-
+        height: 100%;
         .right-top {
             display: flex;
+            align-items: center;
             // margin-left: 40px;
             margin-top: 20px;
             transform: translateX(-10px);
-
+            height: 25px;
             .top-title {
                 text-align: center;
                 display: inline-block;
                 font-size: 25px;
                 color: #ffffff;
                 margin-left: 10px;
+                padding-top: 6px;
             }
 
             .icon1 {
@@ -182,9 +280,9 @@ const backRouter = () => {
             display: flex;
             justify-content: center;
             align-items: center;
-
+          //  overflow-y: scroll;
             .right-bottom-title1 {
-
+               // background-color: red;
                 color: #1f4055;
                 font-size: 20px;
                 align-items: center;
@@ -232,7 +330,7 @@ const backRouter = () => {
     }
 
     :deep(.el-calendar-table thead th) {
-       // padding: 2px 0;
+        // padding: 2px 0;
         font-weight: 550;
     }
 
@@ -295,6 +393,7 @@ const backRouter = () => {
     :deep(.el-calendar-table td.is-selected .el-calendar-day span) {
         color: black;
     }
+
     :deep(.is-selected) {
         color: red;
     }

src/views/dashBoard/Header/index.vue

@@ -7,7 +7,7 @@
             </div>
             <div class="left-right">
                 <div class="search" @click="handlesearch">
-                    <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
+                    <img src="@/assets/1x/source10.png" alt="找不到图片">
                 </div>
 
                 <div class="langWrap">
@@ -18,7 +18,7 @@
 
 
         </div>
-        <div class="right">
+        <div class="right" v-if="data1!=null">
             <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
             <!-- <li class="show">
                 <span>Show Value</span>
@@ -50,11 +50,15 @@ const handleShowLang = (e: any) => {
     e.stopPropagation()
     lang.value.showLang = !lang.value.showLang
 }
+const data1 = ref()
 onMounted(() => {
     document.documentElement.onclick = function () {
         if (!lang.value.showLang) return
         lang.value.showLang = false
     }
+    const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
+    // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
+   data1.value = obj
 })
 onUnmounted(() => {
     document.documentElement.onclick = null
@@ -90,6 +94,13 @@ const drawShow = () => {
     //background-color: black;
     position: relative;
     margin-left: 15px;
+    @media screen and (max-width: 768px) {
+      display: none;
+    //   position: fixed;
+    //   top:50px;
+    //   left: 0;
+    //   right: 0;
+    }
     .second {
 
         width: 25px;
@@ -130,7 +141,7 @@ const drawShow = () => {
     transform: translateY(-20px);
     height: 50px;
     width: 1000px;
-   // background-color: red;
+   //background-color: red;
     li{
         margin: 0;
         padding: 0;
@@ -139,7 +150,7 @@ const drawShow = () => {
     
     @media screen and (max-width: 768px) {
         flex-direction: column;
-       
+       position: relative;
         .left-1 {
             display: flex;
            // justify-content: space-between;
@@ -148,6 +159,7 @@ const drawShow = () => {
            // background-color: red;
            span{
             margin-left: 10px;
+            padding-top: 4px;
            }
            height: 30px;
            align-items: center;
@@ -179,6 +191,8 @@ const drawShow = () => {
                 display: block;
                 // margin-top: 3px;
                 vertical-align: middle;
+                width: 25px;
+                height: 20px;
             }
         }
 
@@ -190,14 +204,14 @@ const drawShow = () => {
             min-width: 200px;
             // background-color: red;
             @media screen and (max-width: 768px) {
-                font-size: 20px;
+                font-size: 24px;
                 // margin-top: 4px;
             }
         }
         
         
         .search {
-            background-color: #fff;
+            //background-color: #fff;
             width: 30px;
         height: 30px;
             border-radius: 50%;
@@ -211,6 +225,9 @@ const drawShow = () => {
             img {
                 width: 25px;
                 height: 30px;
+                @media screen and (max-width: 768px) {
+               margin-top: -8px;
+            }
             }
             
         }
@@ -221,22 +238,26 @@ const drawShow = () => {
         min-width: 50px;
         //background-color: green;
         margin-top: 7px;
-        //background-color: #2B4A60;
+       // background-color: #2B4A60;
         @media screen and (max-width: 768px) {
-            // width: 100vw;
+             width: 90vw;
             //color: red;
-            margin-top: 10px;
+            margin-top: 2vh;
-            transform: translateX(-10px);
+           // transform: translateX(-10px);
-            width: 250px;
+           // width: 250px;
-            margin-left: 100px;
+            margin-left: 5vw;
+           // background-color: black;
+            display: flex;
+            justify-content: end;
         }
 
         .time {
             color: #435F70;
 
             @media screen and (max-width: 768px) {
-                float: right;
+               // float: right;
                 font-size: 15px;
+//background-color: red;
 
             }
         }

src/views/dashBoard/Main.vue

@@ -6,14 +6,14 @@
                 <div class="top">
                     <h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
                     </h4>
-                    <el-icon class="icon1" @click="cardDetail">
+                    <el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
                         <ArrowUp v-if="expand" />
                         <ArrowDown v-else />
                     </el-icon>
                 </div>
                 <h4>{{ props.data.number }}</h4>
                 <div v-if="expand" class="details">
-                    <h5 v-for="(item, index) in detailsItem" :key="index">
+                    <h5 v-for="(item, index) in detailsItem33" :key="index">
                         <span>{{ item.name }}</span>
                         <el-icon class="icon1" v-if="item.icon">
                             <Check v-if="item.icon == 1" />
@@ -22,7 +22,7 @@
                     </h5>
 
                 </div>
-                <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
+                <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code33 }}</h5>
                 <h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
                 <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
                     $t(i18n.global.t('home.offerpricerange'))
@@ -43,14 +43,13 @@ export default {
 </script>
 <script lang="ts" setup>
 import { size } from 'lodash';
-import { ref, onMounted, onUpdated,watch } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { ipoStore } from "@/stores/ipo"
 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";
-import Aimage from "@/views/login/components/a-image/index.vue";
 const { proxy } = (getCurrentInstance() as any)
 const store = ipoStore();
 const currentDate = ref(new Date())
@@ -106,24 +105,89 @@ const props = defineProps({
                 logolinks: "",
                 status: 0,
                 listingDate: "",
-                ipoID:0,
+                ipoID: 0,
-                tradeCurrency:""
+                tradeCurrency: ""
 
             }
         }
     }
 })
 
+// console.log(props.data.tradeCurrency);
+
 const code22 = ref('')
-onMounted(()=>{
+onMounted(() => {
     setCodefn()
 })
-watch(props,(newValue:any, oldValue:any)=>{
+watch(props, (newValue: any, oldValue: any) => {
     setCodefn();
-},{deep:true})
+}, { deep: true })
-function setCodefn(){
+const code33 = computed(() => {
-      // console.log('修改了data',newValue,oldValue);
+    return {
-      var obj = {
+        25: proxy.$t('home.DealInitiated'),
+        30: proxy.$t('home.PublicOfferClosed'),
+        35: proxy.$t('home.ApplicationValidated'),
+        45: proxy.$t('home.AllotmentConfirmed'),
+        50: proxy.$t('home.MoneySettlement'),
+        55: proxy.$t('home.AllocationConfirmed'),
+        60: proxy.$t('home.placingApproved'),
+        65: proxy.$t('home.AllotmentResultsApproved'),
+        70: proxy.$t('home.TradingStarted'),
+        80: proxy.$t('home.Suspended'),
+        90: proxy.$t('home.Cancelled'),
+    }[props.data.status as number]
+})
+const detailsItem33 = computed(() => {
+    var tag = true;
+    const arr = 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 }
+        }
+    })
+    return [
+        {
+            name: proxy.$t('home.DealInitiated'),
+            icon: arr[0].icon
+        },
+        {
+            name: proxy.$t('home.PublicOfferClosed'),
+            icon: arr[1].icon
+        },
+        {
+            name: proxy.$t('home.ApplicationValidated'),
+            icon: arr[2].icon
+        },
+        {
+            name: proxy.$t('home.AllotmentConfirmed'),
+            icon: arr[3].icon
+        }
+        , {
+            name: proxy.$t('home.MoneySettlement'),
+            icon: arr[4].icon
+        },
+        {
+            name: proxy.$t('home.AllocationConfirmed'),
+            icon: arr[5].icon
+        }, {
+            name: proxy.$t('home.placingApproved'),
+            icon: arr[6].icon
+        }, {
+            name: proxy.$t('home.AllotmentResultsApproved'),
+            icon: arr[7].icon
+        }, {
+            name: proxy.$t('home.TradingStarted'),
+            icon: arr[8].icon
+        }
+    ]
+})
+function setCodefn() {
+    // console.log('修改了data',newValue,oldValue);
+    var obj = {
         25: proxy.$t('home.DealInitiated'),
         30: proxy.$t('home.PublicOfferClosed'),
         35: proxy.$t('home.ApplicationValidated'),
@@ -168,12 +232,18 @@ const cardDetail = (e: any) => {
     e.stopPropagation();
     expand.value = !expand.value;
 }
-
+// const cancelPop = (event:any)=>{
+//      let tp = document.querySelector(".details")
+//      if(tp){
+//         if(!tp.contains(event.target)){
+//             expand.value = false;
+//         }
+//      }
+// }
 //路由传参
 const handleclick = (item: any) => {
     localStorage.setItem('ipoID', item.ipoID)
-    console.log(item);
+    //console.log(item);
-    
     localStorage.setItem('itemData', JSON.stringify(item))
     router.push({
         name: 'Xdashboard',
@@ -204,39 +274,39 @@ const handleclick = (item: any) => {
     //     width: 270rem;
     // height: 360rem;
     // }
-    .imglogo{
+    // .imglogo{
-        background-color: #23445a;
+    //     background-color: #23445a;
-        height: 15vh;
+    //     height: 15vh;
-        line-height: 15vh;
+    //     line-height: 15vh;
-        text-align: center;
+    //     text-align: center;
-        overflow: hidden;
+    //     overflow: hidden;
-        font-size: 38px;
+    //     font-size: 38px;
-        font-weight: bold;
+    //     font-weight: bold;
-        font-family: "Calibri";
+    //     font-family: "Calibri";
-        color: #fff;
+    //     color: #fff;
-    }
+    // }
-    .title {
+    // .title {
-        background-color: #fff;
+    //     background-color: #fff;
-        height: 120px;
+    //     height: 120px;
-        line-height: 120px;
+    //     line-height: 120px;
-        font-size: 40px;
+    //     font-size: 40px;
-        color: #fff;
+    //     color: #fff;
-        overflow: hidden;
+    //     overflow: hidden;
-        position: relative;
+    //     position: relative;
-        font-family: "Calibri";
+    //     font-family: "Calibri";
 
-        // @media screen and (max-width: 768px){
+    //     // @media screen and (max-width: 768px){
-        //     font-size: 80px;
+    //     //     font-size: 80px;
-        // }
+    //     // }
-        img {
+    //     img {
-            max-height: 100%;
+    //         max-height: 100%;
-            max-width: 100%;
+    //         max-width: 100%;
-            position: absolute;
+    //         position: absolute;
-            top: 50%;
+    //         top: 50%;
-            left: 50%;
+    //         left: 50%;
-            transform: translate(-50%, -50%);
+    //         transform: translate(-50%, -50%);
-        }
+    //     }
-    }
+    // }
 
     .list {
         // height: 150px;

src/views/dashBoard/box/index.vue

@@ -29,10 +29,10 @@ const props = defineProps({
     }
 )
 const leftWidth = computed(()=>{
-    return (props.leftNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
+    return (props.leftNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
 })
 const rightWidth = computed(()=>{
-   return  (props.rightNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
+   return  (props.rightNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
 })
 
 
@@ -43,7 +43,7 @@ const rightWidth = computed(()=>{
     align-items: center;
     justify-content: space-between;
     height: 28px;
-    width: 400px;
+    width: 405px;
    
     @media screen and (max-width: 768px){
         width: 80vw;

src/views/dashBoard/image1/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="title" v-if="isImage">
-     <img   v-lazy="props.src" />
+     <img   :src="props.src" />
     </div>
     <div class="title2" v-else>
       {{props.number}}

src/views/login/components/Event.vue

@@ -86,14 +86,16 @@ const platformTo=(listPlatform1:string)=>{
     border-left: 3px solid #D3DDE4;
     border-bottom: 2px solid #D3DDE4;
     box-sizing: border-box;
-
+   // background-color: #DA8B2B;
     .header {
         margin-top: 4px;
         position: relative;
         // background-color: red;
         width: 100%;
         height: 45px;
-
+       // transform: translateY(-40px);
+       // margin-left: -30px;
+       // z-index: 1;
         .c {
             width: 30px;
             height: 35px;
@@ -151,11 +153,14 @@ const platformTo=(listPlatform1:string)=>{
     .content {
         margin-left: 22px;
         border-left: 3px solid #EEEFF1;
-        height: 100%;
+        height: 270px;
         padding-left: 25px;
-        overflow: scroll;
+       // overflow: scroll;
-
+        overflow-y: scroll;
-
+      //  background-color: red;
+      @media screen and (max-width: 768px) {
+        height: 30vh;
+    }
 
         li {
             line-height: 50px;

src/views/login/components/Lang.vue

@@ -14,22 +14,25 @@ export default {
 
 <script lang="ts" setup>
 
-import { ref, defineExpose ,inject} from 'vue';
+import { ref, defineExpose, inject } from 'vue';
 import { getCurrentInstance } from 'vue'
 import { ipoStore } from "@/stores/ipo"
 import { useRouter } from "vue-router";
 import router from '@/router';
 const store = ipoStore()
-const route=useRouter()
+const route = useRouter()
 const { proxy } = (getCurrentInstance() as any)
 
 const showLang = ref(false)
-const reflashRouter=inject('reflashRouter') as Function
+const reflashRouter = inject('reflashRouter') as Function
-const IpoReflash=()=>{
+const IpoReflash = () => {
     // if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
     //     reflashRouter()
     // }
-    reflashRouter()
+    //  reflashRouter()
+    //    if(route.options.history.location=="/home"){
+    //         reflashRouter()
+    //     }
 }
 
 const handleLang1 = () => {

src/views/login/components/Main.vue

@@ -1,38 +1,71 @@
 <template>
-    <div class="bigbox" @click="handleclick(props.data)">
+    <Aimage @click="handleclick(props.data)" :src="props.data.logolinks" :number="props.data.number" />
-        <Aimage :src="props.data.logolinks" :number="props.data.number"/>
+    <div class="listexpand" v-if="store.isExpand(props.data.ipoID)" @click="handleclick(props.data)">
-        <div class="list">
+        <div class="list-content">
-            <div class="list-content">
+            <div class="top">
-                <div class="top">
+                <h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
-                    <h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
+                </h4>
-                    </h4>
+                <el-icon class="icon1" @click="cardDetail">
-                    <el-icon class="icon1" @click="cardDetail">
+                    <ArrowUp v-if="store.isExpand(props.data.ipoID)" />
-                        <ArrowUp v-if="expand" />
+                    <ArrowDown v-else />
-                        <ArrowDown v-else />
+                </el-icon>
-                    </el-icon>
-                </div>
-                <h4>{{ props.data.number }}</h4>
-                <div v-if="expand" class="details">
-                    <h5 v-for="(item, index) in detailsItem" :key="index">
-                        <span>{{ item.name }}</span>
-                        <el-icon class="icon1" v-if="item.icon">
-                            <Check v-if="item.icon == 1" />
-                            <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
-                        </el-icon>
-                    </h5>
-
-                </div>
-                <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
-                <h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
-                <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>
             </div>
+            <h4>{{ props.data.number }}</h4>
+            <div v-if="store.isExpand(props.data.ipoID)" class="details">
+                <h5 v-for="(item, index) in detailsItem33" :key="index">
+                    <span>{{ item.name }}</span>
+                    <el-icon class="icon1" v-if="item.icon">
+                        <Check v-if="item.icon == 1" />
+                        <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
+                    </el-icon>
+                </h5>
+
+            </div>
+            <h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code22
+            }}</h5>
+            <h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
+            <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>
+        </div>
+    </div>
+    <div class="list" v-else @click="handleclick(props.data)">
+        <div class="list-content">
+            <div class="top">
+                <h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
+                </h4>
+                <el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
+                    <ArrowUp v-if="store.isExpand(props.data.ipoID)" />
+                    <ArrowDown v-else />
+                </el-icon>
+            </div>
+            <h4>{{ props.data.number }}</h4>
+            <div v-if="store.isExpand(props.data.ipoID)" class="details">
+                <h5 v-for="(item, index) in detailsItem33" :key="index">
+                    <span>{{ item.name }}</span>
+                    <el-icon class="icon1" v-if="item.icon">
+                        <Check v-if="item.icon == 1" />
+                        <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
+                    </el-icon>
+                </h5>
+
+            </div>
+            <h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code33
+            }}</h5>
+            <h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
+            <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>
         </div>
     </div>
 </template>
@@ -43,13 +76,12 @@ export default {
 </script>
 <script lang="ts" setup>
 import { size } from 'lodash';
-import { ref, onMounted, onUpdated,watch } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { ipoStore } from "@/stores/ipo"
 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();
@@ -92,40 +124,96 @@ const detailsItem = ref([
         icon: 0
     }
 ])
-const props = defineProps({
+interface dataType {
-    data: {
+    HKD: string,
-        type: Object,
+    number: string,
-        default: function () {
+    price: string,
-            return {
+    time: string,
-                HKD: "",
+    title: string,
-                number: 0,
+    trading: string,
-                price: "",
+    logolinks: string,
-                time: "",
+    status: string,
-                title: "",
+    listingDate: string,
-                trading: "",
+    ipoID: number,
-                logolinks: "",
+    tradeCurrency: string
-                status: 0,
+}
-                listingDate: "",
+const props = defineProps<{ data: dataType, index: number }>()
-                ipoID:0,
-                tradeCurrency:""
-        
-            }
-        }
-    }
-})
 
 // console.log(props.data.tradeCurrency);
 
 const code22 = ref('')
-onMounted(()=>{
+onMounted(() => {
     setCodefn()
 })
-watch(props,(newValue:any, oldValue:any)=>{
+watch(props, (newValue: any, oldValue: any) => {
     setCodefn();
-},{deep:true})
+}, { deep: true })
-function setCodefn(){
+const code33 = computed(() => {
-      // console.log('修改了data',newValue,oldValue);
+    return {
-      var obj = {
+        25: proxy.$t('home.DealInitiated'),
+        30: proxy.$t('home.PublicOfferClosed'),
+        35: proxy.$t('home.ApplicationValidated'),
+        45: proxy.$t('home.AllotmentConfirmed'),
+        50: proxy.$t('home.MoneySettlement'),
+        55: proxy.$t('home.AllocationConfirmed'),
+        60: proxy.$t('home.placingApproved'),
+        65: proxy.$t('home.AllotmentResultsApproved'),
+        70: proxy.$t('home.TradingStarted'),
+        80: proxy.$t('home.Suspended'),
+        90: proxy.$t('home.Cancelled'),
+    }[props.data.status as unknown as number]
+})
+const detailsItem33 = computed(() => {
+    var tag = true;
+    const arr = 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 }
+        }
+    })
+    return [
+        {
+            name: proxy.$t('home.DealInitiated'),
+            icon: arr[0].icon
+        },
+        {
+            name: proxy.$t('home.PublicOfferClosed'),
+            icon: arr[1].icon
+        },
+        {
+            name: proxy.$t('home.ApplicationValidated'),
+            icon: arr[2].icon
+        },
+        {
+            name: proxy.$t('home.AllotmentConfirmed'),
+            icon: arr[3].icon
+        }
+        , {
+            name: proxy.$t('home.MoneySettlement'),
+            icon: arr[4].icon
+        },
+        {
+            name: proxy.$t('home.AllocationConfirmed'),
+            icon: arr[5].icon
+        }, {
+            name: proxy.$t('home.placingApproved'),
+            icon: arr[6].icon
+        }, {
+            name: proxy.$t('home.AllotmentResultsApproved'),
+            icon: arr[7].icon
+        }, {
+            name: proxy.$t('home.TradingStarted'),
+            icon: arr[8].icon
+        }
+    ]
+})
+function setCodefn() {
+    // console.log('修改了data',newValue,oldValue);
+    var obj = {
         25: proxy.$t('home.DealInitiated'),
         30: proxy.$t('home.PublicOfferClosed'),
         35: proxy.$t('home.ApplicationValidated'),
@@ -168,15 +256,39 @@ function setCodefn(){
 
 const cardDetail = (e: any) => {
     e.stopPropagation();
-    expand.value = !expand.value;
+    store.setIpoIds(props.data.ipoID)
+    // expand.value = !expand.value;
+
+    // if (store.$state.mainExpand == props.index) {
+    //     store.setMainExpand(-1)
+    // } else {
+    //     store.setMainExpand(props.index)
+    // }
+
+    // let tp = document.querySelector(".icon1")
+
+    //     if(!(tp as any).contains(e.target)){
+    //          expand.value = false;
+    //     }
+
 }
+// const cancelPop = (event:any)=>{
+//      let tp = document.querySelector(".details")
+//      if(tp){
+//         if(!tp.contains(event.target)){
+//             expand.value = false;
+//         }
+//      }
+// }
 
 //路由传参
 const handleclick = (item: any) => {
-    localStorage.setItem('ipoID', item.ipoID)
+    // localStorage.setItem('ipoID', item.ipoID)
-    console.log(item);
+    //console.log(item);
+    // localStorage.setItem('itemData', JSON.stringify(item))
 
-    localStorage.setItem('itemData', JSON.stringify(item))
+    sessionStorage.setItem('ipoID', item.ipoID)
+    sessionStorage.setItem('itemData', JSON.stringify(item))
     router.push({
         name: 'Xdashboard',
         params: { data: JSON.stringify(item) }
@@ -187,6 +299,39 @@ const handleclick = (item: any) => {
 </script>
 
 <style lang="scss" scoped>
+//  .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;
+//         line-height: 120px;
+//         font-size: 40px;
+//         color: #fff;
+//         overflow: hidden;
+//         position: relative;
+//         font-family: "Calibri";
+
+//         // @media screen and (max-width: 768px){
+//         //     font-size: 80px;
+//         // }
+//         img {
+//             max-height: 100%;
+//             max-width: 100%;
+//             position: absolute;
+//             top: 50%;
+//             left: 50%;
+//             transform: translate(-50%, -50%);
+//         }
+//     }
 .bigbox {
 
     width: 270px;
@@ -206,97 +351,145 @@ 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;
-        line-height: 120px;
-        font-size: 40px;
-        color: #fff;
-        overflow: hidden;
-        position: relative;
-        font-family: "Calibri";
 
-        // @media screen and (max-width: 768px){
+}
-        //     font-size: 80px;
+
-        // }
+.listexpand {
-        img {
+    // height: 150px;
-            max-height: 100%;
+    width: 270px;
-            max-width: 100%;
+    display: flex;
-            position: absolute;
+    justify-content: center;
-            top: 50%;
+    font-family: "Calibri";
-            left: 50%;
+    background-color: #e7efec;
-            transform: translate(-50%, -50%);
+    overflow: hidden;
+    border: 1px solid #DDE2E6;
+    cursor: pointer;
+    margin-top: 120px;
+    margin-left: -271px;
+    border-radius: 0px 0px 20px 20px;
+    margin-right: 20px;
+    margin-bottom: 30px;
+    height: fit-content;
+
+    .list-content {
+        margin-top: 10px;
+        width: 230px;
+
+        // height: 100%;
+        .details {
+            .icon1 {
+                margin-left: 3px;
+                transform: translateY(2.5px);
+            }
+        }
+
+        h4 {
+            font-size: 20px;
+            color: #3b6181;
+            margin-bottom: 8px;
+            font-weight: 600;
+            font-family: "Calibri";
+        }
+
+        h5 {
+            font-size: 16px;
+            color: #4b6d8a;
+            margin-bottom: 8px;
+            font-weight: 400;
+            font-family: "Calibri";
+        }
+
+        h6 {
+            font-size: 12px;
+            color: #5e7e98;
+            margin-bottom: 8px;
+            // font-family: "Calibri";
+        }
+
+        .top {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 40px;
+        }
+
+        .icon {
+            @media screen and (max-width: 768px) {
+                width: 11px;
+                height: 13px;
+            }
+
+            width: 11px;
+            height: 13px;
         }
     }
+}
 
-    .list {
+.list {
-        // height: 150px;
+    // height: 150px;
-        width: 100%;
+    width: 270px;
-        display: flex;
+    display: flex;
-        justify-content: center;
+    justify-content: center;
-        margin-top: 20px;
+    font-family: "Calibri";
-        font-family: "Calibri";
+    background-color: #e7efec;
+    overflow: hidden;
+    border: 1px solid #DDE2E6;
+    cursor: pointer;
+    margin-top: 120px;
+    margin-left: -271px;
+    border-radius: 0px 0px 20px 20px;
+    margin-right: 20px;
+    margin-bottom: 30px;
+    height: 260px;
 
-        .list-content {
+    .list-content {
-            margin-top: 10px;
+        margin-top: 10px;
-            width: 230px;
+        width: 230px;
 
-            // height: 100%;
+        // height: 100%;
-            .details {
+        .details {
-                .icon1 {
+            .icon1 {
-                    margin-left: 3px;
+                margin-left: 3px;
-                    transform: translateY(2.5px);
+                transform: translateY(2.5px);
-                }
             }
+        }
 
-            h4 {
+        h4 {
-                font-size: 20px;
+            font-size: 20px;
-                color: #3b6181;
+            color: #3b6181;
-                margin-bottom: 8px;
+            margin-bottom: 8px;
-                font-weight: 600;
+            font-weight: 600;
-                font-family: "Calibri";
+            font-family: "Calibri";
-            }
+        }
 
-            h5 {
+        h5 {
-                font-size: 16px;
+            font-size: 16px;
-                color: #4b6d8a;
+            color: #4b6d8a;
-                margin-bottom: 8px;
+            margin-bottom: 8px;
-                font-weight: 400;
+            font-weight: 400;
-                font-family: "Calibri";
+            font-family: "Calibri";
-            }
+        }
 
-            h6 {
+        h6 {
-                font-size: 12px;
+            font-size: 12px;
-                color: #5e7e98;
+            color: #5e7e98;
-                margin-bottom: 8px;
+            margin-bottom: 8px;
-                // font-family: "Calibri";
+            // font-family: "Calibri";
-            }
+        }
 
-            .top {
+        .top {
-                display: flex;
+            display: flex;
-                justify-content: space-between;
+            justify-content: space-between;
-            }
+            margin-top: 40px;
-
+        }
-            .icon {
-                @media screen and (max-width: 768px) {
-                width: 11px;
-                height: 13px;
-                }
 
+        .icon {
+            @media screen and (max-width: 768px) {
                 width: 11px;
                 height: 13px;
             }
+
+            width: 11px;
+            height: 13px;
         }
     }
 }

src/views/login/components/Select.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="selectWrap" v-if="showSelect" @click="preVant">
+    <div class="selectWrap" @click="preVant">
         <div class="box">
             <div class="content">
                 <li>
-                    <div class="word" @click="checkAll(1)">
+                    <div class="word" :class="checkedAll == 1 && 'active'" @click="checkAll(1)">
                         {{ $t(i18n.global.t('home.title.All')) }}
                         <div class="check">
                             <el-icon v-if="checkedAll == 1">
@@ -11,7 +11,8 @@
                             </el-icon>
                         </div>
                     </div>
-                    <div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
+                    <div class="word" :class="checkedAll == 2 && 'active'" @click="checkAll(2)">{{
+                        $t(i18n.global.t('home.title.None')) }}
                         <div class="check">
                             <el-icon v-if="checkedAll == 2">
                                 <Check></Check>
@@ -22,7 +23,7 @@
                 </li>
                 <div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
                 <li>
-                    <div class="word" v-for="item in obj.ipoStatus" :key="item.key"
+                    <div class="word" v-for="item in obj.ipoStatus" :key="item.key" :class="item.isSelcted && 'active'"
                         @click="checkOne(item.key, 'ipoStatus')">
                         <div class="check">
                             <el-icon v-if="item.isSelcted">
@@ -35,7 +36,7 @@
                 <div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
                 <li>
                     <div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
-                        @click="checkOne(item.key, 'tradingCurrency')">
+                        :class="item.isSelcted && 'active'" @click="checkOne(item.key, 'tradingCurrency')">
                         <div class="check">
                             <el-icon v-if="item.isSelcted">
                                 <Check />
@@ -46,7 +47,7 @@
                 </li>
                 <div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
                 <li>
-                    <div class="word" v-for="item in obj.offeringType" :key="item.key"
+                    <div class="word" v-for="item in obj.offeringType" :key="item.key" :class="item.isSelcted && 'active'"
                         @click="checkOne(item.key, 'offeringType')">
                         <div class="check">
                             <el-icon v-if="item.isSelcted">
@@ -59,7 +60,7 @@
                 <div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
                 <li>
                     <div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key"
-                        @click="checkOne(item.key, 'SecuritiestobeListed')">
+                        :class="item.isSelcted && 'active'" @click="checkOne(item.key, 'SecuritiestobeListed')">
                         <div class="check">
                             <el-icon v-if="item.isSelcted">
                                 <Check />
@@ -68,18 +69,7 @@
                         <span>{{ item.value }}</span>
                     </div>
                 </li>
-                <!-- <div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
+
-                <li>
-                    <div class="word" v-for="item in obj.ListingPlatform" :key="item.key"
-                        @click="checkOne(item.key, 'ListingPlatform')">
-                        <div class="check">
-                            <el-icon v-if="item.isSelcted">
-                                <Check />
-                            </el-icon>
-                        </div>
-                        <span>{{ item.value }}</span>
-                    </div>
-                </li> -->
 
             </div>
             <div class="footer">
@@ -99,27 +89,95 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, defineExpose, reactive ,inject,onMounted} from 'vue';
+import { ref, defineExpose, reactive, inject, onMounted } from 'vue';
 import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 import { getSelectList } from "@/api/reqIpo/ipo"
-type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform' 
+import { ipoStore } from "@/stores/ipo"
-type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform' 
+import { getDataFromId } from "@/api/mock/home"
+const store = ipoStore()
+type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed'
+type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities'
 const { proxy } = (getCurrentInstance() as any)
 const showSelect = ref(false)
 const checkedAll = ref(0)
-const  selectCards=inject('selectCards') as Function
+const selectCards = inject('selectCards') as Function
-onMounted(()=>{
+//const status = inject('status')
-    console.log('select组件挂载');
+onMounted(() => {
+    //console.log('select组件挂载');
+    if ((store.$state.selectedArr as any).status) {
+        console.log('store', store.$state.selectedArr)
+        const storeData = store.$state.selectedArr as any;
+        if (storeData.status.length) {
+            obj.ipoStatus = obj.ipoStatus.map((item: any) => {
+                const j = storeData.status.some((i: string) => i == item.key)
+                if (j) {
+                    return { ...item, isSelcted: true }
+                } else {
+                    return item
+                }
+
+            })
+        }
+        if (storeData.trade_currency.length) {
+            obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
+                const j = storeData.trade_currency.some((i: string) => i == item.key)
+                if (j) {
+                    return { ...item, isSelcted: true }
+                } else {
+                    return item
+                }
+
+            })
+        }
+        if (storeData.offer_type.length) {
+            obj.offeringType = obj.offeringType.map((item: any) => {
+                const j = storeData.offer_type.some((i: string) => i == item.key)
+                if (j) {
+                    return { ...item, isSelcted: true }
+                } else {
+                    return item
+                }
+
+            })
+        }
+        if (storeData.list_securities.length) {
+            obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
+                const j = storeData.list_securities.some((i: string) => i == item.key)
+                if (j) {
+                    return { ...item, isSelcted: true }
+                } else {
+                    return item
+                }
+
+            })
+        }
+        // if (storeData.list_platform.length) {
+        //     obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
+        //         const j = storeData.list_platform.some((i: string) => i == item.key)
+        //         if (j) {
+        //             return { ...item, isSelcted: true }
+        //         } else {
+        //             return item
+        //         }
+
+        //     })
+        // }
+    }
 })
+const porps = defineProps<{ fn: Function }>()
 const confirm = async () => {
-    var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
+    if (checkedAll.value == 2) {
+        store.setSelectedArr({});
+        porps.fn()
+        return
+    }
+    var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities']
     var reqeustObj = {
         status: [] as string[],
         trade_currency: [] as string[],
         offer_type: [] as string[],
         list_securities: [] as string[],
-        list_platform: [] as string[],
 
     }
     Object.keys(obj).forEach((item: string, index: number) => {
@@ -129,15 +187,23 @@ const confirm = async () => {
             }
         })
     })
-    const result = await getSelectList(reqeustObj)
+    store.setSelectedArr(reqeustObj);
-    console.log('result',result);
+    const result = await store.getSearchSelectList()
+    // const result = await getSelectList(reqeustObj)
+    //mock数据测试-----------
+    // const data = await getDataFromId("Select")
+    // var result = {
+    //     data
+    // }
+    //mock数据测试-----------
     selectCards(result);
-    showSelect.value=false
+    showSelect.value = false
+    porps.fn()
 
 }
 const Cancel = () => {
-    showSelect.value = false;
+    // showSelect.value = false;
-
+    porps.fn()
 }
 const preVant = (e: any) => {
     e.stopPropagation();
@@ -165,7 +231,7 @@ const obj = reactive({
         value: proxy.$t('home.MoneySettlement'),
         isSelcted: false
     }, {
-        key: 55,
+        key: "55",
         value: proxy.$t('home.AllocationConfirmed'),
         isSelcted: false
     }, {
@@ -272,15 +338,15 @@ const obj = reactive({
         isSelcted: false
     }
     ],
-    ListingPlatform: [{
+    // ListingPlatform: [{
-        key: '1',
+    //     key: '1',
-        value: proxy.$t('home.Mainboard'),
+    //     value: proxy.$t('home.Mainboard'),
-        isSelcted: false
+    //     isSelcted: false
-    }, {
+    // }, {
-        key: '2',
+    //     key: '2',
-        value: proxy.$t('home.GEM'),
+    //     value: proxy.$t('home.GEM'),
-        isSelcted: false
+    //     isSelcted: false
-    }],
+    // }],
     // ListingType: [{
     //     key: '1',
     //     value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
@@ -349,9 +415,7 @@ function selectAll(all: 1 | 2) {
         })
     })
 }
-defineExpose({
+
-    showSelect
-})
 </script>
 
 <style lang="scss" scoped>
@@ -365,14 +429,16 @@ defineExpose({
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
-    @media screen and (max-width: 768px){
+
+    @media screen and (max-width: 768px) {
         width: 90vw;
-         height: 93vh;
+        height: 93vh;
-         top: 50%;
+        top: 50%;
-         left: 50%;
+        left: 50%;
         transform: translate(-50%, -50%);
-            overflow-y: scroll;
+        overflow-y: scroll;
-        }
+    }
+
     .box {
         box-sizing: border-box;
         padding: 10px 20px 20px 20px;
@@ -388,22 +454,23 @@ defineExpose({
             font-size: 18px;
             color: #879db2;
             margin-top: 10px;
-//             @media screen and (max-width: 768px){
+            //             @media screen and (max-width: 768px){
 
-//    font-size: 12px;
+            //    font-size: 12px;
-// }
+            // }
         }
 
         li {
             display: flex;
             font-size: 18px;
             flex-wrap: wrap;
-            @media screen and (max-width: 768px){
+
+            @media screen and (max-width: 768px) {
                 flex-direction: column;
-                flex-wrap:nowrap;
+                flex-wrap: nowrap;
-                 //font-size: 12px;
+                //font-size: 12px;
-                 width: fit-content;
+                width: fit-content;
-        }
+            }
 
             .word {
                 margin-right: 10px;
@@ -417,16 +484,25 @@ defineExpose({
                 display: flex;
                 justify-content: space-between;
                 cursor: pointer;
-                @media screen and (max-width: 768px){
-                height: fit-content;
-                width: fit-content;
-        }
-                &:hover {
-                background-color: #0F426F;
-                border-radius: 5px;
-                color: #fff;
 
-            }
+                @media screen and (max-width: 768px) {
+                    height: fit-content;
+                    width: fit-content;
+                }
+
+                &:hover {
+                    background-color: #0F426F;
+                    border-radius: 5px;
+                    color: #fff;
+
+                }
+
+                &.active {
+                    background-color: #0F426F;
+                    border-radius: 5px;
+                    color: #fff;
+                }
+
                 .check {
                     width: 30px;
 
@@ -454,11 +530,12 @@ defineExpose({
             background-color: #fff;
             color: #557795;
             padding: 10px 20px 10px 20px;
-            @media screen and (max-width: 768px){
+
-                margin:0;      
+            @media screen and (max-width: 768px) {
+                margin: 0;
                 // font-size: 12px;
 
-        }
+            }
 
             &:hover {
                 background-color: #0F426F;
@@ -468,5 +545,4 @@ defineExpose({
         }
     }
 }
-
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div >
     <div class="title" v-if="isImage">
      <img   v-lazy="props.src" />
     </div>
@@ -67,6 +67,9 @@ const checkImgExists=(imgurl:string) =>{
         overflow: hidden;
         position: relative;
         font-family: "Calibri";
+        width: 270px;
+        border-radius: 20px 20px 0px 0px;
+        margin-top: 30px;
         img {
             max-height: 100%;
             max-width: 100%;
@@ -83,5 +86,11 @@ const checkImgExists=(imgurl:string) =>{
         line-height: 120px;
         font-size: 40px;
       text-align: center;
+      width: 270px;
+      border-radius: 20px 20px 0px 0px;
+      margin-top: 30px;
+      overflow: hidden;
+      font-family: "Calibri";
+      position: relative;
     }
 </style>

src/views/login/index.vue

@@ -1,11 +1,10 @@
 <template>
+    <!-- <div class="login3">
+    </div> -->
     <div class="login2">
-        <Select ref="selectR" />
+        <Select ref="selectR" v-if="selectVisible" :fn="selectVisibleFn" />
         <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" @childfn="fn" />
-            </el-drawer>
             <div class="left">
                 <div class="header">
                     <div class="menu">
@@ -31,8 +30,9 @@
                         <!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
                     </div>
                 </div>
+
                 <div class="bigger">
-                    <Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
+                    <Main v-for="(item, index) in logos" :data="item" :index="index" :key="index"></Main>
                 </div>
 
             </div>
@@ -50,7 +50,6 @@
                                 <img src="@/assets/1x/source14.png">
                             </el-button>
 
-                            <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
                             <span class="month">{{ date }}</span>
 
                             <el-button size="small" @click="selectDate('next-month')">
@@ -58,16 +57,22 @@
                             </el-button>
 
                         </template>
-                        <template #dateCell="{data}">
+                        <template #dateCell="{ data }">
 
-        <p style="margin:0px" >
+                            <p style="margin:0px">
-              {{ data.day.split('-').slice(2).join() }}
+                                {{ data.day.split('-').slice(2).join() * 1 }}
+                            <div v-for="(i, index) in dayTime" :key="index">
 
-         <div v-for="(i, index) in dayTime" :key="index">
+                                <!-- <div v-if="data.day == i" class="yuan"></div> -->
-            <div v-if="data.day==i" class="yuan"></div>
+                                <div v-if="i.split('-').slice(2).join() * 1 <= 9">
-        </div>
+                                    <div v-if="data.day == i" class="yuan1"></div>
-       </p>
+                                </div>
-    </template>
+                                <div v-else>
+                                    <div v-if="data.day == i" class="yuan"></div>
+                                </div>
+                            </div>
+                            </p>
+                        </template>
 
 
                     </el-calendar>
@@ -95,24 +100,26 @@ import { useRouter } from 'vue-router';
 import i18n from '@/locales'
 import { getCurrentInstance, provide } from 'vue'
 import Event from './components/Event.vue';
-import { getEventData, getSearchListing ,getDate} from "@/api/reqIpo/ipo";
+import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
 import { getDataFromId } from "@/api/mock/home"
 import { ElMessage } from 'element-plus'
 import SearchCup from "./components/SearchCup.vue";
-import Drawer from "./modelComponents/Drawer.vue";
 import Select from "./components/Select.vue";
 import { ipoStore } from "@/stores/ipo"
 const { proxy } = (getCurrentInstance() as any)
 const reflashRouter = inject('reflashRouter') as Function
+const handleOnDrwaer = inject('handleOnDrwaer') as Function
 const router = useRouter()
 const store = ipoStore()
 const selectR = ref();
-const dayValue = ref(new Date())
+const dayValue = ref(store.homeDay)
-const drawer = ref(false)
+
+const selectVisible = ref(false)
 onMounted(() => {
+    store.setMobileActiveShow(1);//设置移动端弹窗高亮
     window.onhashchange = function () {
         const langHref = window.location.href.split("home")[1]
-        console.log(window.location.href,langHref);
+
 
         if (langHref == '?lang=en') {
             proxy.$i18n.locale = 'en'
@@ -130,15 +137,20 @@ onMounted(() => {
     };
     getcalendar()
 })
+const selectVisibleFn = () => {
+    selectVisible.value = false
+}
 //过滤
 const selectCards = async (res: any) => {
     async function demo() {
         return new Promise(async (resolve, reject) => {
             try {
                 if (!(res as any).data.length) {
+
                     ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
                     throw ("222")
                 }
+
                 const data = (res as any).data.map((item: any) => {
                     let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
                     return {
@@ -186,23 +198,26 @@ const selectCards = async (res: any) => {
     logos.value = result as objType[]
 }
 provide('selectCards', selectCards);
-const handleDrawer = (done: () => void) => {
+
-    done();
-}
 const openDrawer = () => {
-    drawer.value = true;
+    handleOnDrwaer(true)
 }
 
 const handleSelect = () => {
-    //  console.log('@@@', state.value)
+    // console.log('@@@', state.value)
+    if (!state.value) return
     getSearchIpoList(state.value)
+    // provide('state',state.value );
+   
 }
 
 watch(dayValue, async (ne, ol) => {
     const day = moment(ne).format("YYYY-MM-DD")
+    store.setHomeDay(day)
     const result = await getEventData(day);
     setEventdata((result as any).data)
 
+
     // const result = await getDataFromId('event');
     // console.log('@@@@', result);
     // setEventdata((result as any))
@@ -264,12 +279,12 @@ const Eventdata = ref([
     // {
     //     listPlatform1:"主板",
     //     logo:"-",
-    //     name: "力高健康生活有限公司",
+    //     name: "力高健康生活有限公司11111111111",
     //     number: 2380
     // }, {
     //     listPlatform1:"主板",
     //     logo:"-",
-    //     name: "力高健康生活有限公司",
+    //     name: "力高健康生活有限公司111111111111111111111111111111",
     //     number: 2381
     // }
 ])
@@ -286,21 +301,20 @@ const setEventdata = (EventD: any) => {
     })
 }
 const dayTime = ref()
-const getcalendar = async ()=>{
+const getcalendar = async () => {
     const res = await getDate()
-  dayTime.value = (res as any).data
+    dayTime.value = (res as any).data
-  console.log(dayTime.value);
+    console.log(dayTime.value);
 }
 const getHomeIpoList = async () => {
     async function demo() {
         return new Promise(async (resolve, reject) => {
-
             const res = await getHomeIpo(1)
             // const res = await getDataFromId('home');
             // const data = (res as any).map((item: any) => {
             const data = (res as any).data.map((item: any) => {
-                let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate,tradeCurrency } = item;
+                let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
-             
+                //  ? priceFinal.toFixed(3) : priceMinMax()
                 return {
                     logolinks: logoLink,
                     title: companyEngFull + ";" + companyChiFull,
@@ -343,21 +357,25 @@ const getHomeIpoList = async () => {
 }
 onMounted(async () => {
     getHomeIpoList();
-    var day = moment(Date.now()).format("YYYY-MM-DD")
+    // var day = moment(Date.now()).format("YYYY-MM-DD")
+    var day = moment(store.homeDay).format("YYYY-MM-DD")
     const result = await getEventData(day);
     setEventdata((result as any).data)
 })
 const getSearchIpoList = async (keyword: string) => {
+
     async function demo() {
         return new Promise(async (resolve, reject) => {
             try {
-                const res = await getSearchListing(keyword)
+                // const res = await getSearchListing(keyword)
+                store.setKeyWord(keyword)
+                const res = await store.getSearchSelectList()
                 if (!(res as any).data.length) {
                     ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
                     throw ("222")
                 }
                 const data = (res as any).data.map((item: any) => {
-                    let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate,tradeCurrency } = item;
+                    let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
                     // console.log(companyEngFull,companyChiFull);
                     return {
                         logolinks: logoLink,
@@ -414,13 +432,17 @@ onMounted(async () => {
     // setEventdata(result);
 })
 interface objType {
-    title: string,
-    number: string,
     HKD: string,
+    number: string,
     price: string,
     time: string,
-    trading: string
+    title: string,
-
+    trading: string,
+    logolinks: string,
+    status: string,
+    listingDate: string,
+    ipoID: number,
+    tradeCurrency: string
 }
 const logos = ref<objType[]>([
     // {
@@ -507,14 +529,16 @@ const lang = ref()
 const SearchCupDom = ref()
 const handleShowLang = (e: any) => {
     e.stopPropagation()
-    selectR.value.showSelect = false
+    console.log(111)
+    // selectR.value.showSelect = false
     lang.value.showLang = !lang.value.showLang
+    selectVisible.value = false
 }
 const handleShowCup = (e: any) => {
     e.stopPropagation()
     lang.value.showLang = false;
-    console.log(111)
+    //console.log(111)
-    selectR.value.showSelect = !selectR.value.showSelect
+    selectVisible.value = !selectVisible.value
 }
 //路由传参
 // const handleclick = (item: any) => {
@@ -531,18 +555,15 @@ const handleShowCup = (e: any) => {
 
 onMounted(() => {
     document.documentElement.onclick = function () {
+        store.setMainExpand(-1);
+        selectVisible.value = false
 
-        // if (SearchCupDom.value.showLang) {
-        //     SearchCupDom.value.showLang = false
-        // }
-        if (selectR.value.showSelect) {
-            selectR.value.showSelect = false
-        }
-        if (lang.value.showLang) {
-            lang.value.showLang = false
-        }
     }
-})
+    if (lang.value.showLang) {
+        lang.value.showLang = false
+    }
+}
+)
 onUnmounted(() => {
     document.documentElement.onclick = null
 })
@@ -555,13 +576,13 @@ const showMounth = (date: any) => {
         return arr[2] + " " + arr[3]
     }
 }
-function fn(data: any) {
+function fn(data: boolean) {
-    drawer.value = data
+    console.log('22222')
+    // drawer.value = data
 }
 </script>
 <style lang="scss" scoped>
-
+.yuan {
-.yuan{
     width: 12px;
     height: 12px;
     background-color: #f7be39;
@@ -573,15 +594,43 @@ function fn(data: any) {
     margin-left: 3px;
     border-radius: 10px;
 }
+
+.yuan1 {
+    width: 12px;
+    height: 12px;
+    background-color: #f7be39;
+    position: absolute;
+    border-radius: 10px;
+    transform: translateY(11px);
+    margin-left: -2px;
+}
+
+// .login3{
+
+//     background-image: url("@/assets/1x/beijingtu.png");
+//     width: 100%;
+//     height: 1500px;
+//     background-size: 100% 100%;
+//     position: fixed;
+// }
 .login2 {
     background-image: url("@/assets/1x/beijingtu.png");
-    background-repeat: no-repeat;
+    // background-repeat: no-repeat;
-    background-size: cover;
+    // background-size: cover;
+    // width: 1900px;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    font-family: "Calibri";
 
     @media screen and (max-width: 768px) {
-        width: 100vw;
+        position: fixed;
-        overflow-x: hidden;
+        top: 0;
-        height: 100vh;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow-y: hidden;
     }
 }
 
@@ -615,11 +664,16 @@ function fn(data: any) {
         align-items: center;
         // padding-left: 35px;
         height: 80px;
-
+        //position: fixed;
-        // @media screen and (max-width: 768px) {
+//background-color: red;
-        //     height: 60rem;
+        @media screen and (max-width: 768px) {
-        //     //    background-color: red;
+            //             position: fixed;
-        // }
+            //             top: 0;
+            //   left: 0;
+            //   width: 100%;
+            // background-color: #000000;
+            position: relative;
+        }
 
         .menuicon {
             display: none;
@@ -645,6 +699,7 @@ function fn(data: any) {
         .my-autocomplete li .highlighted .addr {
             color: #ddd;
         }
+
         .dropdown {
             position: relative;
 
@@ -718,6 +773,8 @@ function fn(data: any) {
     // margin-top: 40px;
     display: flex;
     flex-wrap: wrap;
+    height: 90vh;
+    overflow-y: scroll;
 
     // margin-left: 120px;
     // width: 1250px;
@@ -725,6 +782,16 @@ function fn(data: any) {
     @media screen and (max-width: 768px) {
         width: 100vw;
         justify-content: center;
+        overflow-y: scroll;
+        height: 90vh;
+        // height: calc(100vh-60'px');
+        // transform: translateY(60px);
+        //        position: absolute;
+        //        right: 0;
+        //   top: 60px;
+        //   bottom: 0;
+        //   overflow-y: scroll;
+        //background-color: #e36466;
     }
 
 }
@@ -737,7 +804,7 @@ function fn(data: any) {
     box-sizing: border-box;
     // width: 900px;
     // height: 100vh;
-    height: 100%;
+    height: 100vh;
     padding-bottom: 80px;
     background-color: #1f4055;
     padding-left: 40px;
@@ -777,8 +844,11 @@ function fn(data: any) {
     .right-bottom1 {
         width: 420px;
         background-color: #ffffff;
-        height: 500px;
+        // height: 350px;
+        height: 350px;
+        //height: fit-content;
         margin-top: 40px;
+       // position: relative;
         // margin-left: 20px;
         // text-align: center;
         // line-height: 500px;
@@ -786,6 +856,7 @@ function fn(data: any) {
         justify-content: center;
         align-items: center;
         
+
         .right-bottom-title1 {
 
             color: #1f4055;
@@ -897,6 +968,12 @@ function fn(data: any) {
     color: red;
 }
 
+// ::-webkit-scrollbar {
+//      width: 0 !important;
+//    }
+//    ::-webkit-scrollbar {
+//      width: 0 !important;height: 0;
+//    }
 @media screen and (max-width: 768px) {
     .left {
         width: 100vw;
@@ -908,7 +985,7 @@ function fn(data: any) {
 
         .header {
             height: 60px;
-
+//background-color: red;
             .menuicon {
                 display: block;
                 margin-left: 5px;
@@ -952,6 +1029,12 @@ function fn(data: any) {
 }
 </style>
 <style>
+/* ::-webkit-scrollbar {
+     width: 0 !important;
+   }
+   ::-webkit-scrollbar {
+     width: 0 !important;height: 0;
+   } */
 @media (min-width: 992px) {
     .header .el-input__wrapper {
         margin-top: 20px;

src/views/login/modelComponents/Drawer.vue

@@ -1,57 +1,63 @@
 <template>
-    <div class="wrapddd">
+    
+        <div class="wrapddd">
         <div class="imgWrap22222">
-            <img src="@/assets/1x/1x/source8.png" alt="menu" >
+            <img src="@/assets/1x/1x/source8.png" alt="menu">
+            <h4 v-if="data != null && store.$state.mobileActiveShow != 1">{{ store.$state.locale == 1 ?
+                data.title.split(";")[0] : data.title.split(";")[1] }}
+            </h4>
         </div>
         <div class="nav">
-            <li :class="state == 1 && 'active'" @click="setState(1)" >
+            <li :class="store.$state.mobileActiveShow == 1 && 'active'" @click="setState(1)">
                 <img src="@/assets/1x/source10.png" alt="menu">
-                 <span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
+                <span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
             </li>
-            <li :class="state == 2 && 'active'" @click="setState(2)">
+            <li :class="store.$state.mobileActiveShow == 2 && 'active'" @click="setState(2)">
                 <img src="@/assets/1x/source5.png" alt="menu">
-                 <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+                <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
             </li>
-            <li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
+            <li :class="store.$state.mobileActiveShow == 3 && 'active'" @click="setState(3)">
-                <div class="ipoWrap">
+                <!-- <div class="ipoWrap">
                     <div>
-                        <img src="@/assets/1x/source2.png" alt="menu">
+                     
-                        <span >{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
                     </div>
-                    <!-- <div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
+
-                        <img src="@/assets/1x/source11.png" alt="" class="icon">
-                    </div> -->
-                </div>
-                <!-- <div class="report" v-if="state == 3">
-                    <span>report</span>
-                    <img src="@/assets/1x/source3.png" alt="">
                 </div> -->
+                <img src="@/assets/1x/source2.png" alt="menu">
+                <span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
 
 
             </li>
-            <li :class="state == 4 && 'active'" @click="setState(4)">
+            <li :class="store.$state.mobileActiveShow == 4 && 'active'" @click="setState(4)">
                 <img src="@/assets/1x/source6.png" alt="menu">
                 <span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
+               
             </li>
-            <li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
+           
+            <li :class="store.$state.mobileActiveShow == 5 && 'active'" @click="setState2(5)" class="IPO">
                 <div class="ipoWrap">
-                    <div>
+                    <div class="icon">
                         <img src="@/assets/1x/1x/source6.png" alt="menu">
                         <span>{{ $t(i18n.global.t('home.Languages')) }}</span>
                     </div>
-                    <div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
+                    <div class="arrow" :style="{
-                        <img src="@/assets/1x/source11.png" alt="">
+                        transform: store.$state.mobileActiveShow == 5 && showalanguge ? 'rotateZ(90deg)' : 'rotateZ(-90deg)', marginRight: store.$state.mobileActiveShow == 5 && showalanguge ? '10px' : '28px'
+                    }
+                        ">
+                        <img src="@/assets/1x/source14.png" alt="">
                     </div>
                 </div>
-                <div class="lang" v-if="state == 5" >
+                <div class="lang" v-if="store.$state.mobileActiveShow == 5 && showalanguge">
-        <li @click="handleLang1">English</li>
+            <li @click="handleLang1">English</li>
-        <li @click="handleLang2">繁體中文</li>
+            <li @click="handleLang2">繁體中文</li>
-        <li @click="handleLang3">简体中文</li>
+            <li @click="handleLang3">简体中文</li>
         </div>
         </li>
 
     </div>
     </div>
+    
+ 
 </template>
 
 <script lang="ts">
@@ -61,45 +67,114 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref } from "vue"
+import { inject } from 'vue'
-import { getCurrentInstance, onUnmounted,inject } from 'vue'
 import { ipoStore } from "@/stores/ipo"
 import { useRouter } from "vue-router";
+//import calendar from '@/views/IpoCalendar/index.vue'
+import { ElMessageBox } from 'element-plus'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import moment from "moment"
 import i18n from '@/locales'
-const route=useRouter()
+import { getCurrentInstance } from 'vue'
-const store = ipoStore()
+import Event from '@/views/login/components/Event.vue';
+import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
+import { getDataFromId } from "@/api/mock/home"
 const { proxy } = (getCurrentInstance() as any)
-let emit = defineEmits(['childfn'])
+const dayValue = ref(new Date())
-const reflashRouter=inject('reflashRouter') as Function
+const calendar = ref()
-const IpoReflash=()=>{
+const handleDrawer = (done: () => void) => {
-    if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
+  done();
-        reflashRouter()
+}
+//const Eventdata = ref([])
+const selectDate = (val: string) => {
+    calendar.value.selectDate(val)
+}
+
+const dayTime = ref()
+const getcalendar = async () => {
+    const res = await getDate()
+    dayTime.value = (res as any).data
+    console.log(dayTime.value);
+}
+const showMounth = (date: any) => {
+    const arr = date.split(" ")
+    if (arr.length == 3) {
+        return arr[2]
+    } else if (arr.length == 4) {
+        return arr[2] + " " + arr[3]
     }
 }
-const props = defineProps({
-    drawer:Boolean
-})
 
+const drawer2 = ref(false)
+const radio1 = ref('Option 1')
+const handleClose = (done: () => void) => {
+  done()
+}
+//const drawer1 = ref(false)
+const setState = (number: number) => {
+    store.setMobileActiveShow(number)
+    if (number == 1) {
+        proxy.$router.push("/home")
+
+    }
+    if (number == 2) {
+        proxy.$router.push("/dashboard")
+    }
+    if (number == 3) {
+        proxy.$router.push("/IPO")
+       
+    }
+    if (number == 4) {
+        proxy.$router.push("/IPOcalendar")
+        store.setMobileActiveShow(1)
+      // emit('childfn', !drawer1)
+      // emit('childfn', !drawer)
+      // drawer1.value = true
+     
+      // console.log(drawer1.value);
+       
+    }
+    setTimeout(() => {
+        handleOnDrwaer(false)
+    })
+}
+//console.log(drawer1.value);
+
+const dialogVisible = ref(true)
+const route = useRouter()
+const store = ipoStore()
+const showalanguge = ref(false)
+//const { proxy } = (getCurrentInstance() as any)
+let emit = defineEmits(['childfn'])
+//let emit1 = defineEmits(['childfn1'])
+const reflashRouter = inject('reflashRouter') as Function
+const handleOnDrwaer = inject('handleOnDrwaer') as Function
+
+const props = defineProps({
+    drawer: Boolean,
+    drawer1:Boolean
+})
+const data = ref()
+onMounted(
+    () => {
+        // data.value = JSON.parse(localStorage.getItem('itemData') as string)
+        const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
+        data.value = obj
+        //  console.log(data.value);
+        // text();
+    }
+)
 let drawer = props.drawer
 
-console.log(props);
+let drawer1 = props.drawer1
+//console.log(props);
 
 const state = ref(1)
 // const drawer = ref(true)
-const setState = (number: number) => {
+
-    state.value = number;
+const setState2 = (number: number) => {
-    if(number == 1){
+    store.setMobileActiveShow(number)
-        proxy.$router.push("/home")
+    showalanguge.value = !showalanguge.value
-    }
-    if(number == 2){
-        proxy.$router.push("/dashboard")
-    }
-    if(number == 3){
-        proxy.$router.push("/IPO")
-    }
-    if(number == 4){
-        proxy.$router.push("/IPOcalendar")
-    }
 }
 const handleLang1 = () => {
 
@@ -107,26 +182,26 @@ const handleLang1 = () => {
         proxy.$i18n.locale = 'en'
     }
     store.setLocale(1)
-     emit('childfn',!drawer)
+    emit('childfn', !drawer)
-     IpoReflash()
+    // IpoReflash()
 }
 const handleLang2 = () => {
     if (proxy.$i18n.locale = 'zhCt') {
         proxy.$i18n.locale = 'zhCt'
-        IpoReflash()
+        // IpoReflash()
 
     }
     store.setLocale(2)
-    emit('childfn',!drawer)
+    emit('childfn', !drawer)
-    IpoReflash()
+    /// IpoReflash()
 }
 const handleLang3 = () => {
     if (proxy.$i18n.locale = 'zhCn') {
         proxy.$i18n.locale = 'zhCn'
     }
     store.setLocale(3)
-    emit('childfn',!drawer)
+    emit('childfn', !drawer)
-    IpoReflash()
+    // IpoReflash()
 }
 
 </script>
@@ -137,14 +212,27 @@ const handleLang3 = () => {
     transform: translateX(-20px);
     display: flex;
     flex-direction: column;
+
     .imgWrap22222 {
         margin-top: 20px;
-        width: 25px;
+        width: fit-content;
         height: 20px;
-         margin-left: 15px;
+        margin-left: 15px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        // background-color: black;
         img {
-            width: 100%;
+            width: 25px;
-            height: 100%;
+            height: 20px;
+        }
+
+        h4 {
+            font-size: 18px;
+            margin-left: 10px;
+            color: #fff;
+            font-weight: 400;
         }
     }
 
@@ -169,6 +257,7 @@ const handleLang3 = () => {
             img {
                 width: 22px;
                 height: 22px;
+                // background-color: red;
             }
 
             span {
@@ -176,6 +265,9 @@ const handleLang3 = () => {
                 font-size: 20px;
                 font-weight: 700;
                 color: #1C3F56;
+                display: block;
+                line-height: 50px;
+                padding-top: 6px;
             }
         }
 
@@ -208,6 +300,30 @@ const handleLang3 = () => {
                 align-items: center;
                 width: 100%;
 
+
+                .icon {
+                    min-height: 50px;
+                    display: flex;
+                    align-items: center;
+                    justify-self: center;
+
+                    img {
+                        width: 22px;
+                        height: 22px;
+                    }
+
+                    span {
+                        margin-left: 25px;
+                        font-size: 20px;
+                        font-weight: 700;
+                        color: #1C3F56;
+                        display: block;
+                        line-height: 50px;
+                        padding: 0;
+                        vertical-align: bottom;
+                    }
+                }
+
                 .arrow {
                     width: 12px;
                     height: 19px;
@@ -223,7 +339,7 @@ const handleLang3 = () => {
 
             span {
                 display: inline-block;
-                transform: translateY(-3px);
+                // transform: translateY(-3px);
             }
 
 
@@ -231,4 +347,10 @@ const handleLang3 = () => {
     }
 
 }
+
+</style>
+<style>
+/* .el-drawer__body{
+    padding: 0 
+} */
 </style>

vite.config.ts

@@ -61,7 +61,7 @@ export default defineConfig((mode: ConfigEnv) => {
       // 配置代理服务器
       proxy: {
         "/api": {
-          target: "http://192.168.2.86:8888",
+          target: "http://127.0.0.1:8080",
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ""),
         },