iopProject

src/.browserslistrc

@@ -0,0 +1,4 @@
+last 2 versions
+> 1%
+iOS 7
+last 3 iOS versions

src/App.vue

@@ -0,0 +1,83 @@
+<template >
+  <el-config-provider :locale="store.localeLang">
+    <div class="login">
+      <router-view />
+    </div>
+  </el-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, ref, onBeforeMount } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+import { ipoStore } from "@/stores/ipo"
+const store = ipoStore();
+onBeforeMount(() => {
+  setFontSize()
+})
+const setFontSize = () => {
+  // 以ipone6手机为例,1rem=1px;   以后就在ipone6手机模拟器开发，把rem当作px用就行了
+  var font = document.documentElement.clientWidth / 375;
+  document.documentElement.style.fontSize = font + "px";
+}
+// export default defineComponent({
+//   components: {
+//     ElConfigProvider,
+//   },
+//   setup() {
+
+//     // store.setLocale(2)
+//     console.log(store.$state.locale, store.localeLang)
+//     console.log(document.documentElement.clientWidth)
+//     return {
+//       store
+//     }
+//   },
+
+// })
+
+</script>
+
+<style lang="scss" >
+// @import url(./vars.scss);
+// $bg-color: red;
+@media (max-width: 767px) {
+  .login {
+    width: 100vw;
+    height: fit-content;
+    background-color: blue;
+  }
+}
+
+@media (min-width: 768px) {
+  .login {
+    width: 100vw;
+    height: 100vh;
+    // background-color: blue;
+  }
+}
+
+@media (min-width: 992px) {
+  .login {
+    height: 100%;
+    width: 100%;
+    // background-color: pink;
+  }
+}
+
+@media (min-width: 1200px) {
+  .login {
+    height: 1100px;
+    width: 100%;
+    // background-color: pink;
+  }
+}
+
+.login {
+  background-image: url("@/assets/1x/beijingtu.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+ // height: 100%;
+  width: 100%;
+
+}
+</style>

src/api/mock/home.ts

@@ -0,0 +1,13 @@
+import requestMock from "@/utils/request-mock";
+
+enum Api {
+  getHomeDataUrl = "/home/data",
+}
+
+export const getHomeDataApi = () => {
+  return requestMock.get<any, any>(Api.getHomeDataUrl);
+};
+
+export const getDataFromId = (id:number|string) => {
+  return requestMock.get<any, any>(Api.getHomeDataUrl+id);
+};

src/api/product/sku.ts

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+enum Api {
+  addSkuUrl = "/admin/product/saveSkuInfo",
+}
+
+/**
+ * 添加SKU
+ * @param data SkuItem
+ * @returns null
+ */
+// export const addSkuApi = (data: SkuItem) => {
+//   return request.post<any, null>(Api.addSkuUrl, data);
+// };
+
+// export const addSkuApi2 = () => {
+//   return request.post<any, null>(Api.addSkuUrl);
+// };

src/api/reqIpo/ipo.ts

@@ -0,0 +1,39 @@
+import request from "@/utils/request";
+
+enum Api {
+  addReferenceUrl = "/api/ipo/refdata/v1",
+  //昨天的数据
+  addhomelist = "/api/ipos/listv2",
+  //今天的数据
+  addhomelist1 = "/api/ipos/listv1",
+
+  offeringsUrl="/api/ipo/refdata/offering",
+  EventData="/api/ipos/listingData",
+  TypeofList="/api/ipo/refdata/typeOfListing",
+  searchUrl="/api/ipo/refdata/search"
+}
+//获取ipo详情页的数据
+export const getIpo = (ipoID:string) => {
+  return request.get<any, null>(Api.addReferenceUrl+`?ipoID=${ipoID}`);
+};
+//获取ipo首页数据
+export const getHomeIpo = (size:number) => {
+  return request.get<any, null>(Api.addhomelist1+`?size=${size}`);
+};
+//获取ipo的offerings数据
+export const getOfferings = (ipoID:string) => {
+  return request.get<any, null>(Api.offeringsUrl+`?ipoID=${ipoID}`);
+};
+//获取首页的getEventData数据
+export const getEventData = (dateString:string) => {
+  return request.get<any, null>(Api.EventData+`?dateString=${dateString}`);
+};
+//获取ipo的typeofListing数据
+export const getTypeofListing = (ipoID:string) => {
+  return request.get<any, null>(Api.TypeofList+`?ipoID=${ipoID}`);
+};
+//获取首页的搜索数据
+export const getSearchListing = (keyword:string) => {
+  return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
+};
+

src/assets/CALIBRI/版权说明.txt

@@ -0,0 +1,28 @@
+字体家网站关于字体版权说明
+
+付费下载字体：
+
+是指在字体家平台上通过付费下载的个人版非商业用途的字体，字体家平台上所有付费下载的
+字体，均是各大字体厂商与字体家平台建立了发布合作的字体品牌，有仅限于付费下载个人版；
+以及可以提供个人版付费下载和正版授权购买的字体，具体以网站实际发布为准。
+
+免费下载的字体：
+
+是指在字体家网站不需要通过任何付费即可下载到的字体文件，该类字体文件是本站收集于网
+络，本站不享有任何版权，仅提供给本站网友进行字体爱好交流，如您想通过免费下载的字体
+进行商业用途使用，本站强烈提醒您联系对应厂商或原作者进行版权授权购买，如因为使用了
+免费下载的字体引起了版权诉讼纠纷，本站不承担任何责任；当然，您如果是这些免费下载的
+字体原作者，如不愿意通过本站发布字体作品的话，请提供有效版权证明，我们将在48小时之
+内删除下载链接以及字体产品。
+
+关于字体家网站：
+
+字体家网站是专业发布字体的网站，是杭州贤书阁文化创意有限公司旗下网站平台。
+我们的业务：字体授权、企业字体定制、字体冠名、书法家字体制作等。
+网址：www.zitijia.com
+
+在字体家网站，您可以下载到各种各样的字体产品，同时也可以以特惠的价格购买到各种原创
+字体的版权使用权。每日更新，免费下载和付费下载的优质字体供您选择。
+
+联系QQ：942481760
+字体家群号：275221323

src/assets/css/reset.css

@@ -0,0 +1,55 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	/* font-size: 100%; */
+	/* font: inherit; */
+	vertical-align: baseline;
+
+}
+ @font-face{
+	font-family: 'Calibri';
+	src:url("@/assets/CALIBRI/CALIBRI.ttf");
+	font-weight: normal;
+	font-size: 20px;
+} 
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+	font-family: "Calibri"
+}
+ol, ul,li {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+.w{
+	width: 1400px;
+	margin: 0 auto;
+}

src/assets/eye-open.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>

src/assets/eye.svg

@@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>

src/components/SvgIcon/ElSvg.ts

@@ -0,0 +1,19 @@
+import type { App} from 'vue'
+import * as svg from '@element-plus/icons-vue';
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+export default function (app: App) {
+  app.component('svg-icon', SvgIcon)
+
+  // import.meta.glob('./svg/*.svg')
+  // import.meta.globEager('./svg/*.svg')
+
+  const icons = svg as any;
+	for (const i in icons) {
+		app.component(`ele-${icons[i].name}`, icons[i]);
+	}
+	app.component('SvgIcon', SvgIcon);
+}
+
+
+

src/components/SvgIcon/index.vue

@@ -0,0 +1,73 @@
+<template>
+	<i v-if="isShowIconSvg" class="el-icon" :style="setIconSvgStyle">
+		<component :is="getIconName" />
+	</i>
+	<div v-else-if="isShowIconImg" :style="setIconImgOutStyle">
+		<img :src="getIconName" :style="setIconSvgInsStyle" />
+	</div>
+	<i v-else :class="getIconName" :style="setIconSvgStyle" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'svgIcon',
+	props: {
+		// svg 图标组件名字
+		name: {
+			type: String,
+		},
+		// svg 大小
+		size: {
+			type: Number,
+			default: () => 14,
+		},
+		// svg 颜色
+		color: {
+			type: String,
+		},
+	},
+	setup(props) {
+		// 在线链接、本地引入地址前缀
+		const linesString = ['https', 'http', '/src', '/assets'];
+
+		// 获取 icon 图标名称
+		const getIconName = computed(() => {
+			return props?.name;
+		});
+		// 用于判断 element plus 自带 svg 图标的显示、隐藏
+		const isShowIconSvg = computed(() => {
+			return props?.name?.startsWith('ele-');
+		});
+		// 用于判断在线链接、本地引入等图标显示、隐藏
+		const isShowIconImg = computed(() => {
+			return linesString.find((str) => props.name?.startsWith(str));
+		});
+		// 设置图标样式
+		const setIconSvgStyle = computed(() => {
+			return `font-size: ${props.size}px;color: ${props.color};`;
+		});
+		// 设置图片样式
+		const setIconImgOutStyle = computed(() => {
+			return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
+		});
+		// 设置图片样式
+		// https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0
+		const setIconSvgInsStyle = computed(() => {
+			const filterStyle: string[] = [];
+			const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
+			compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
+			return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
+		});
+		return {
+			getIconName,
+			isShowIconSvg,
+			isShowIconImg,
+			setIconSvgStyle,
+			setIconImgOutStyle,
+			setIconSvgInsStyle,
+		};
+	},
+});
+</script>

src/hooks/useResize.ts

@@ -0,0 +1,48 @@
+import { watch, onMounted, onBeforeMount, onBeforeUnmount } from "vue";
+import { useRoute } from "vue-router";
+import { useAppStore } from "@/stores/app";
+
+const { body } = document;
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+export function useResize() {
+  const route = useRoute();
+  const appStore = useAppStore();
+
+  watch(route, () => {
+    if (appStore.device === "mobile" && appStore.sidebar.opened) {
+      appStore.closeSidebar(false);
+    }
+  });
+
+  const isMobile = () => {
+    const rect = body.getBoundingClientRect();
+    return rect.width - 1 < WIDTH;
+  };
+
+  const resizeHandler = () => {
+    if (!document.hidden) {
+      const mobile = isMobile();
+      appStore.toggleDevice(mobile ? "mobile" : "desktop");
+      if (mobile) {
+        appStore.closeSidebar(true);
+      }
+    }
+  };
+
+  onBeforeMount(() => {
+    window.addEventListener("resize", resizeHandler);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", resizeHandler);
+  });
+
+  onMounted(() => {
+    const mobile = isMobile();
+    if (mobile) {
+      appStore.toggleDevice("mobile");
+      appStore.closeSidebar(true);
+    }
+  });
+}

src/locales/en.ts

@@ -0,0 +1,156 @@
+export default {
+    home:{
+        IPOcalendar:'IPO Calendar',
+        offerpricerange:'Offer Price Range',
+        finalofferprice:'Final Offer Price',
+        CommencementofTradeDate:'Commencement of Trade Date',
+        ExpectedPriceDeterminationDate:'Expected Price Determination Date',
+        DealInitiated:'Deal Initiated',
+        PublicOfferClosed:'Public Offer Closed',
+        ApplicationValidated:'Application Validated',
+        AllotmentConfirmed:'Allotment Confirmed',
+        MoneySettlement:'Money Settlement',
+        AllocationConfirmed:'Allocation Confirmed',
+        placingApproved:'Placing Approved',
+        AllotmentResultsApproved:'Allotment Results Approved',
+        TradingStarted:'Trading Started',
+        Suspended:'Suspended',
+        Cancelled:'Cancelled',
+        Mainboard:'Main board',
+        GEM:'GEM',
+        new:'New'
+    },
+    dashboard:{
+        Home:'Home',
+        Dashboard:'Dashboard',
+        IPOReferenceData:'IPO Reference Data',
+        Milestones:'Milestones',
+        PublicOfferSubscription:'Public Offer Subscription',
+        PublicOfferFundingConfirmation:'Public Offer Funding Confirmation',
+        AllocationAdjustment:'Allocation Adjustment',
+        PublicOfferAllotment:'Public Offer Allotment',
+        PublicOfferMoneySettlement:'Public Offer Money Settlement',
+        PublicOffer :'Public Offer',
+        SubscriptionRatio:'Subscription Ratio',
+        ApplicationQuantity:'Application Quantity (Shares)',
+        InitialShares:'Initial Shares',
+        FinalShares:'Final Shares',
+        LastUpadated:'Last Upadated',
+        InitialAllocation:'Initial Allocation',
+        Public:'Public',
+        Institutional:'Institutional',
+        TotalOfferShares:'Total Offer Shares',
+        FinalAllocation:'Final Allocation',
+        Listingdate:'Listing date'
+    },
+    ipo:{
+        report:'Report',
+        CompanyInformation:'Company Information',
+        CompanyNameEnglishFull:'Company Name (English Full)',
+        CompanyNameEnglishShort:'Company Name (English Short)',
+        CompanyNameChineseFull:'Company Name (Chinese Full)',
+        CompanyNameChineseShort:'Company Name (Chinese Short)',
+        STockCode:'Stock Code',
+        ISIN:'ISIN',
+        PlaceofIncorporation:'Place of Incorporation',
+        PrincipalPlaceofBussineseeinHongKong:'Principal Place of Bussinesee in Hong Kong',
+        CompanyLogo:'Company Logo',
+        Bermuda:'Bermuda',
+        CaymanIslands:'Cayman Islands',
+        HongKongChina:'Hong Kong, China',
+        PeoplesRepublicofChina:"People's Republic of China",
+        Australia:'Australia',
+        BritishVirginIslands:'British Virgin Islands',
+        CanadaAlberta:'Canada-Alberta',
+        CanadaBritishColumbia:'Canada-British Columbia',
+        CanadaOntario:'Canada-Ontario',
+        England:'England',
+        Israel:'Israel',
+        Italy:'Italy',
+        Japan:'Japan',
+        Jersey:'Jersey',
+        Luxembourg:'Luxembourg',
+        Singapore:'Singapore',
+        USDelaware:'US - Delaware',
+        Others:'Others',
+        TypeofListing:{
+            TypeofListing:'Type of Listing',
+            OfferingType:'Offering Type',
+            SecuritiestobeListed:'Securities to be Listed',
+            NominalValueperShare:'Nominal Value per Share',
+            ListingPlatform:'Listing Platform',
+            ListingType:'Listing Type',
+            ListingCategories:'Listing Categories',
+            Ordinaryshares:'Ordinary shares',
+            OrdinarysharesHshares:'Ordinary shares (H shares)',
+            OrdinarysharesconversionfromBtoHshares:'Ordinary shares (conversion from B to H shares)',
+            Preferenceshares:'Preference shares',
+            RealEstateInvestmentTrust:'Real Estate Investment Trust',
+            ExchangeTradedProduct:'Exchange Traded Product',
+            DepositaryReceipts:'Depositary Receipts',
+            ShareStapledUnits:'Share Stapled Units',
+            Other:'Other',
+            Globalofferplacingandpublicoffer:'Global offer (placing and public offer)',
+            Byplacingonly:'By placing only',
+            Bypublicofferonly:'By public offer only',
+            Byintroduction:'By introduction',
+            TransferfromGEM:'Transfer from GEM'
+        },
+        Offering:{
+            Offering:'Offering',
+            TradingCurrency:'Trading Currency',
+            DownwardPriceFlexibility:'Downward Price Flexibility (%)',
+            OfferPriceRange:'Offer Price Range',
+            TradingBoardLot:'Trading Board Lot',
+            PublicOfferReallocationCap:'Public Offer Reallocation Cap (%)',
+            NumberofSharesHeldbyExistingShareholders:'Number of Shares Held by Existing Shareholders',
+            NumberofOfferShares:'Number of Offer Shares',
+             InititalandClawbackThrehold:'Initital and Clawback Threhold',
+            PublicOfferAllocation:'Public Offer Allocation (%)',
+            NumberofPublicOfferShares:'Number of Public Offer Shares',
+            NumberofInsitutionalOfferShares:'Number of Insitutional Offer Shares',
+            OfferSizeAdjustmentOption:'Offer Size Adjustment Option (%)',
+            OverallotmentOptionInclusiveofOfferSizeAdjustmentOption:'Over-allotment Option Inclusive of Offer Size Adjustment Option',
+            OverallotmentOption:'Over-allotment Option (%)',
+            DenominationTable:'Denomination Table',
+            ApplicationQuantity:'Application Quantity',
+            MaximumPayableonApplication:'Maximum Payable on Application'
+        },
+        advisers:{
+            DesignatedSponsor:'Designated Sponsor',
+            Sponsor:'Sponsor(s)',
+            HKLegalAdviserforSponsor:'HK Legal Adviser (for Sponsor)',
+            HKLegalAdviser:'HK Legal Adviser (for Issuer)',
+            Underwriter:'Underwriter(s)',
+            Adviser:'Advisers',
+            OverallCoordinator:'Overall Coordinator(s)',
+            Distributor:'Distributor(s)',
+            HKShareRegistrar:'HK Share Registrar'
+        },
+        Timetable:{
+            Timetable:'Timetable',
+            CommencementofTradingDate:'Commencement of Trading Date',
+            Time:'Time',
+            Date:'Date',
+            DealPublicOfferStartDate:'Deal / Public Offer Start Date',
+            PublicOfferEndDate:'Public Offer End Date',
+            ExpectedPriceDeterminationDate:'Expected Price Determination Date',
+            AllotmentAnnouncementSharePostingCertificateDispatchDate:"Allotment Announcement / Share Posting / \n Certificate Dispatch Date",
+            SettlementInstructionsInputDate:'Settlement Instructions Input Date',
+            PredepositPlacingSharesDeliveryDate:'Pre-deposit / Placing Shares Delivery Date',
+
+        },
+        Documents:{
+            Documents:'Documents',
+            ListingDocumentEnglish:'Listing Document (English)',
+            ListingDocumentChinese:'Listing Document (Chinese)'
+        },
+        TransactionCosts:{
+            TransactionCosts:'Transaction Costs',
+            Brokerage:'Brokerage',
+            SFCTransactionLevy:'SFC Transaction Levy',
+            SrockExchangeTradingFee:'Srock Exchange Trading Fee',
+            AFRCTransactionLevy:'AFRC Transaction Levy'
+        }
+    }
+  }

src/locales/index.ts

@@ -0,0 +1,21 @@
+import { createI18n } from 'vue-i18n'
+import zhCn from './zh-cn'
+import en from './en'
+import zhCt from './zh-ct'
+ //import locale from 'element-plus/lib/locale'
+// import localeZH from 'element-plus/lib/locale/lang/zh-cn'
+// import localeEN from 'element-plus/lib/locale/lang/en'
+// import localePL from 'element-plus/lib/locale/lang/zh-tw'
+// 创建 i18n
+const i18n = createI18n({
+  legacy: false,
+  globalInjection: true, // 全局模式，可以直接使用 $t
+  locale: 'en',
+  messages: {
+    zhCn,
+    en,
+    zhCt
+  }
+})
+
+export default i18n

src/locales/zh-cn.ts

@@ -0,0 +1,156 @@
+export default {
+    home:{
+        IPOcalendar:'首次公开招股日历',
+        offerpricerange:'发售价范围',
+        finalofferprice:'最终发售价',
+        CommencementofTradeDate:'交易开始日期',
+        ExpectedPriceDeterminationDate:'预期定价日期',
+        DealInitiated:'启动交易',
+        PublicOfferClosed:'结束公开发售',
+        ApplicationValidated:'已验证的申请',
+        AllotmentConfirmed:'确认配发',
+        MoneySettlement:'结算款项',
+        AllocationConfirmed:'确认分配',
+        placingApproved:'获批配售',
+        AllotmentResultsApproved:'获批配发结果',
+        TradingStarted:'开始交易',
+        Suspended:'暂停',
+        Cancelled:'取消',
+        Mainboard:'主板上市',
+        GEM:'创业板',
+        new:'新上市'
+    },
+    dashboard:{
+        Home:'主页',
+        Dashboard:'仪表板',
+        IPOReferenceData:'首次公开招股参考数据',
+        Milestones:'上市里程',
+        PublicOfferSubscription:'公开认购',
+        PublicOfferFundingConfirmation:'公开招募基金确认书',
+        AllocationAdjustment:'分配调整',
+        PublicOfferAllotment:'公开发售配发',
+        PublicOfferMoneySettlement:'公开发售款项结算',
+        PublicOffer :'公开招股',
+        SubscriptionRatio:'认购比率',
+        ApplicationQuantity:'申请数量（股）',
+        InitialShares:'初始股份',
+        FinalShares:'最终股份',
+        LastUpadated:'最后更新',
+        InitialAllocation:'初始分配',
+        Public:'公开',
+        Institutional:'机构',
+        TotalOfferShares:'总发售股份',
+        FinalAllocation:'最后配额分配',
+        Listingdate:'上市日期'
+    },
+    ipo:{
+        report:'报告',
+        CompanyInformation:'公司资讯',
+        CompanyNameEnglishFull:'公司名称(英文全名)',
+        CompanyNameEnglishShort:'公司名称(英文简称)',
+        CompanyNameChineseFull:'公司名称(中文全名)',
+        CompanyNameChineseShort:'公司名称(中文简称)',
+        STockCode:'股票编号',
+        ISIN:'国际证券号码',
+        PlaceofIncorporation:'注册地点',
+        PrincipalPlaceofBussineseeinHongKong:'香港主要营业地点',
+        CompanyLogo:'公司标志',
+        Bermuda:'百慕达',
+        CaymanIslands:'开曼群岛',
+        HongKongChina:'中国香港',
+        PeoplesRepublicofChina:"中华人民共和国",
+        Australia:'澳大利亞',
+        BritishVirginIslands:'英属维尔京群岛',
+        CanadaAlberta:'加拿大 - 艾伯塔省',
+        CanadaBritishColumbia:'加拿大 - 不列颠哥伦比亚省',
+        CanadaOntario:'加拿大 - 安大略省',
+        England:'英格兰',
+        Israel:'以色列',
+        Italy:'意大利',
+        Japan:'日本',
+        Jersey:'泽西',
+        Luxembourg:'卢森堡',
+        Singapore:'新加坡',
+        USDelaware:'美国 - 特拉华州',
+        Others:'其他',
+        TypeofListing:{
+            TypeofListing:'上市种类',
+            OfferingType:'招股类型',
+            SecuritiestobeListed:'拟上市证券',
+            NominalValueperShare:'每股面值',
+            ListingPlatform:'上市平台',
+            ListingType:'上市类型',
+            ListingCategories:'上市类别',
+            Ordinaryshares:'普通股',
+            OrdinarysharesHshares:'普通股（H股）',
+            OrdinarysharesconversionfromBtoHshares:'普通股（由B股转换为H股）',
+            Preferenceshares:'优先股',
+            RealEstateInvestmentTrust:'房地产投资信托基金',
+            ExchangeTradedProduct:'交易所交易产品',
+            DepositaryReceipts:'存托凭证',
+            ShareStapledUnits:'合订证券',
+            Other:'其他',
+            Globalofferplacingandpublicoffer:'全球发售（配售及公开发售）',
+            Byplacingonly:'限于配售',
+            Bypublicofferonly:'限于公开发售',
+            Byintroduction:'以介绍形式上市',
+            TransferfromGEM:'转由创业板'
+        },
+        Offering:{
+            Offering:'招股',
+            TradingCurrency:'交易货币',
+            DownwardPriceFlexibility:'下调灵活定价(%)',
+            OfferPriceRange:'发售价范围',
+            TradingBoardLot:'交易单位',
+            PublicOfferReallocationCap:'首次公开募股分配(%)',
+            NumberofSharesHeldbyExistingShareholders:'现有股东持股数',
+            NumberofOfferShares:'发售股份数目',
+             InititalandClawbackThrehold:'初始和回扣',
+            PublicOfferAllocation:'公开发售分配(%)',
+            NumberofPublicOfferShares:'公开发售股份数目',
+            NumberofInsitutionalOfferShares:'机构发售股份数目',
+            OfferSizeAdjustmentOption:'Offer Size 调整选项 (%)',
+            OverallotmentOptionInclusiveofOfferSizeAdjustmentOption:'超额配股权包括发售量调整期权',
+            OverallotmentOption:'超额配股权(%)',
+            DenominationTable:'面額表',
+            ApplicationQuantity:'申请数量',
+            MaximumPayableonApplication:'申请时应付的最高金额'
+        },
+        advisers:{
+            DesignatedSponsor:'指定保荐人',
+            Sponsor:'保荐人',
+            HKLegalAdviserforSponsor:'香港法律顾问（保荐人）',
+            HKLegalAdviser:'香港法律顾问（发行人）',
+            Underwriter:'包销商',
+            Adviser:'顾问',
+            OverallCoordinator:'总协调员',
+            Distributor:'分销商',
+            HKShareRegistrar:'过户登记处'
+        },
+        Timetable:{
+            Timetable:'时间表',
+            CommencementofTradingDate:'上市日期',
+            Time:'时间',
+            Date:'日期',
+            DealPublicOfferStartDate:'招股开始日期',
+            PublicOfferEndDate:'招股截止日期',
+            ExpectedPriceDeterminationDate:'预计定价日',
+            AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配结果公布/###/寄发股票日期',
+            SettlementInstructionsInputDate:'结算指示输入日期',
+            PredepositPlacingSharesDeliveryDate:'预存/配售股份交割日',
+
+        },
+        Documents:{
+            Documents:'文件',
+            ListingDocumentEnglish:'上市文件（英文）',
+            ListingDocumentChinese:'上市文件（中文）'
+        },
+        TransactionCosts:{
+            TransactionCosts:'交易费用',
+            Brokerage:'佣金',
+            SFCTransactionLevy:'证监会交易征费',
+            SrockExchangeTradingFee:'交易费',
+            AFRCTransactionLevy:'财务汇报局交易征费'
+        }
+    }
+  }

src/locales/zh-ct.ts

@@ -0,0 +1,156 @@
+export default {
+    home:{
+        IPOcalendar:'首次公開招股日曆',
+        offerpricerange:'發售價範圍',
+        finalofferprice:'最終發售價',
+        CommencementofTradeDate:'交易開始日期',
+        ExpectedPriceDeterminationDate:'預期定價日期',
+        DealInitiated:'啟動交易',
+        PublicOfferClosed:'結束公開發售',
+        ApplicationValidated:'已驗證的申請',
+        AllotmentConfirmed:'確認配發',
+        MoneySettlement:'結算款項',
+        AllocationConfirmed:'確認分配',
+        placingApproved:'獲批配售',
+        AllotmentResultsApproved:'獲批配發結果',
+        TradingStarted:'開始交易',
+        Suspended:'暫停',
+        Cancelled:'取消',
+        Mainboard:'主板上市',
+        GEM:'創業板',
+        new:'新上市'                    
+    },
+    dashboard:{
+        Home:'主頁',
+        Dashboard:'儀表板',
+        IPOReferenceData:'首次公開招股參考數據',
+        Milestones:'上市里程',
+        PublicOfferSubscription:'公開認購',
+        PublicOfferFundingConfirmation:'公開招募基金確認書',
+        AllocationAdjustment:'分配調整',
+        PublicOfferAllotment:'公開發售配發',
+        PublicOfferMoneySettlement:'公開發售款項結算',
+        PublicOffer :'公開招股',
+        SubscriptionRatio:'認購比率',
+        ApplicationQuantity:'申請數量（股）',
+        InitialShares:'初始股份',
+        FinalShares:'最終股份',
+        LastUpadated:'最後更新',
+        InitialAllocation:'初始分配',
+        Public:'公開',
+        Institutional:'機構',
+        TotalOfferShares:'總發售股份',
+        FinalAllocation:'最後配額分配',
+        Listingdate:'上市日期'
+    },
+    ipo:{
+        report:'報告',
+        CompanyInformation:'公司資訊',
+        CompanyNameEnglishFull:'公司名稱(英文全名)',
+        CompanyNameEnglishShort:'公司名稱(英文簡稱)',
+        CompanyNameChineseFull:'公司名稱(中文全名)',
+        CompanyNameChineseShort:'公司名稱(中文簡稱)',
+        STockCode:'股票編號',
+        ISIN:'國際證券號碼',
+        PlaceofIncorporation:'註冊地點',
+        PrincipalPlaceofBussineseeinHongKong:'香港主要營業地點',
+        CompanyLogo:'公司標誌',
+        Bermuda:'百慕達',
+        CaymanIslands:'開曼群島',
+        HongKongChina:'中國香港',
+        PeoplesRepublicofChina:"中華人民共和國",
+        Australia:'澳大利亞',
+        BritishVirginIslands:'英屬維爾京群島',
+        CanadaAlberta:'加拿大 - 艾伯塔省',
+        CanadaBritishColumbia:' 加拿大 - 不列顛哥倫比亞省',
+        CanadaOntario:'加拿大 - 安大略省',
+        England:'英格蘭',
+        Israel:'以色列',
+        Italy:'意大利',
+        Japan:'日本',
+        Jersey:'澤西',
+        Luxembourg:'盧森堡',
+        Singapore:'新加坡',
+        USDelaware:'美國 - 特拉華州',
+        Others:'其他',
+        TypeofListing:{
+            TypeofListing:'上市種類',
+            OfferingType:'招股類型',
+            SecuritiestobeListed:'擬上市證券',
+            NominalValueperShare:'每股面值',
+            ListingPlatform:'上市平台',
+            ListingType:'上市類型',
+            ListingCategories:'上市類別',
+            Ordinaryshares:'普通股',
+            OrdinarysharesHshares:'普通股（H股）',
+            OrdinarysharesconversionfromBtoHshares:'普通股（由B股轉换為H股）',
+            Preferenceshares:'優先股',
+            RealEstateInvestmentTrust:'房地產投資信託基金',
+            ExchangeTradedProduct:'交易所交易產品',
+            DepositaryReceipts:'存託憑證',
+            ShareStapledUnits:'合訂證券',
+            Other:'其他',
+            Globalofferplacingandpublicoffer:'全球發售（配售及公開發售）',
+            Byplacingonly:'限於配售',
+            Bypublicofferonly:'限於公開發售',
+            Byintroduction:'以介紹形式上市',
+            TransferfromGEM:'轉由創業板'
+        },
+        Offering:{
+            Offering:'招股',
+            TradingCurrency:'交易貨幣',
+            DownwardPriceFlexibility:'下調靈活定價(%)',
+            OfferPriceRange:'發售價範圍',
+            TradingBoardLot:'交易單位',
+            PublicOfferReallocationCap:'首次公開募股分配(%)',
+            NumberofSharesHeldbyExistingShareholders:'現有股東持股數',
+            NumberofOfferShares:'發售股份數目',
+             InititalandClawbackThrehold:'初始和回扣',
+            PublicOfferAllocation:'公開發售分配(%)',
+            NumberofPublicOfferShares:'公開發售股份數目',
+            NumberofInsitutionalOfferShares:'機構發售股份數目',
+            OfferSizeAdjustmentOption:'Offer Size 調整選項 (%)',
+            OverallotmentOptionInclusiveofOfferSizeAdjustmentOption:'超額配股權包括發售量調整期權',
+            OverallotmentOption:'超額配股權(%)',
+            DenominationTable:'面額表',
+            ApplicationQuantity:'申請數量',
+            MaximumPayableonApplication:'申請時應付的最高金額'
+        },
+        advisers:{
+            DesignatedSponsor:'指定保薦人',
+            Sponsor:'保薦人',
+            HKLegalAdviserforSponsor:'香港法律顧問（保薦人）',
+            HKLegalAdviser:'香港法律顧問（發行人）',
+            Underwriter:'包銷商',
+            Adviser:'顧問',
+            OverallCoordinator:'總協調員',
+            Distributor:'分銷商',
+            HKShareRegistrar:'過戶登記處'
+        },
+        Timetable:{
+            Timetable:'時間表',
+            CommencementofTradingDate:'上市日期',
+            Time:'時間',
+            Date:'日期',
+            DealPublicOfferStartDate:'招股開始日期',
+            PublicOfferEndDate:'招股截止日期',
+            ExpectedPriceDeterminationDate:'預計定價日',
+            AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配結果公佈/###/寄發股票日期',
+            SettlementInstructionsInputDate:'結算指示輸入日期',
+            PredepositPlacingSharesDeliveryDate:'預存/配售股份交割日',
+
+        },
+        Documents:{
+            Documents:'文件',
+            ListingDocumentEnglish:'上市文件（英文）',
+            ListingDocumentChinese:'上市文件（中文）'
+        },
+        TransactionCosts:{
+            TransactionCosts:'交易費用',
+            Brokerage:'佣金',
+            SFCTransactionLevy:'證監會交易徵費',
+            SrockExchangeTradingFee:'交易費',
+            AFRCTransactionLevy:'財務匯報局交易徵費'
+        }
+    }
+  }

src/main.ts

@@ -0,0 +1,44 @@
+import { createApp } from "vue";
+// import pinia from "./stores";
+import ElementPlus from "element-plus";
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import "element-plus/dist/index.css";
+import App from "./App.vue";
+import router from "./router";
+// import "./styles/index.scss";
+import ElSvg from "./components/SvgIcon/ElSvg";
+// import "./permission";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import '@/assets/css/reset.css'
+import i18n from "./locales";
+import store from './stores'
+import 'amfe-flexible' 
+import '@/rem.js'
+import VueLazyload from 'vue-lazyload'
+import logo from '@/assets/Snipaste.png'
+
+// import "./mock/index.js"
+// import { setupI18n } from '@/locales/setupI18n';
+
+const app = createApp(App);
+// setupI18n(app);
+ElSvg(app);
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+app.config.warnHandler = (msg, instance, trace) => {}
+app
+  // .use(pinia)
+  .use(router)
+  .use(ElementPlus)
+  .use(i18n)
+  .use(ElementPlus, {
+     locale: zhCn,
+   })
+  .use(store)
+  .use(VueLazyload,{
+    loading: logo,
+    error:logo
+  })
+  .mount("#app");

src/postcss.config.js

@@ -0,0 +1,14 @@
+const px2rem = require("postcss-px2rem");
+const postcss = px2rem({
+  remUnit: 16, //基准大小 baseSize，需要和rem.js中相同
+});
+
+module.exports = {
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [postcss],
+      },
+    },
+  },
+};

src/rem.js

@@ -0,0 +1,17 @@
+// 基准大小
+const baseSize = 16;
+
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。
+  const scale = document.documentElement.clientWidth / 375;
+  // 设置页面根节点字体大小,Math.min(scal,2)表示最大缩放比例为2
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
+}
+
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+  setRem();
+};

src/router/index.ts

@@ -0,0 +1,46 @@
+import { createRouter, createWebHistory ,createWebHashHistory} from "vue-router";
+import { staticRoutes } from "@/router/routes";
+import {modelRoutes} from "./routesModel"
+let shouRoute=[] as any;
+function setRoutes(){
+  IsMobile();
+  window.addEventListener('resize', function() {
+    IsMobile2()
+  })
+}
+function IsMobile(){
+  if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
+    shouRoute=modelRoutes;
+  }else{
+    shouRoute=staticRoutes;
+  }
+}
+function IsMobile2(){
+  if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
+     window.location.reload()
+  }else{
+  }
+}
+
+
+setRoutes();
+
+
+var router = createRouter({
+  history: createWebHashHistory(),
+  routes:staticRoutes ,
+  // 滚动行为：当路由组件切换时滚动条的位置
+  scrollBehavior() {
+    return { top: 0, left: 0 };
+  },
+});
+// router.beforeEach((to, from, next) => {
+//   if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
+//     window.location.href = '/move.html/'
+//     return
+//   }
+//   next()
+// })
+
+// 导出路由
+export default router;

src/router/routes.ts

@@ -0,0 +1,75 @@
+import type { RouteRecordRaw } from "vue-router";
+/**
+ * 路由meta对象参数说明
+ * meta: {
+ *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
+ *      hidden：        是否隐藏此路由
+ *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
+ * }
+ */
+
+/**
+ * 静态路由（默认路由）
+ */
+export const staticRoutes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    redirect: "/home",
+    component:()=> import("@/views/login/index.vue"),
+    meta: {
+      hidden: true,
+    },
+  },
+  {
+    path: "/home",
+    name: "XLogin",
+    component: () => import("@/views/login/index.vue"),
+    meta: {
+      hidden: true,
+    },
+  },
+  {
+    path: "/dashboard",
+    name: "Xdashboard",
+    component: () => import("@/views/dashBoard/index.vue"),
+  },
+  {
+    path: "/IPO",
+    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: "/404",
+    name: "404",
+    component: () => import("@/views/error/404.vue"),
+    meta: {
+      hidden: true,
+    },
+  },
+  
+  /* 匹配任意的路由 必须最后注册 */
+  {
+    path: "/:pathMatch(.*)",
+    name: "Any",
+    redirect: "/404",
+    meta: {
+      hidden: true,
+    },
+  },
+];
+
+
+/**
+ * 定义动态路由
+ */
+// export const allAsyncRoutes: Array<RouteRecordRaw> = [];

src/router/routesModel.ts

@@ -0,0 +1,65 @@
+import type { RouteRecordRaw } from "vue-router";
+/**
+ * 路由meta对象参数说明
+ * meta: {
+ *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
+ *      hidden：        是否隐藏此路由
+ *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
+ * }
+ */
+
+/**
+ * 静态路由（默认路由）
+ */
+export const modelRoutes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    redirect: "/home",
+    component:()=> import("@/viewsModel/Home/index.vue"),
+    meta: {
+      hidden: true,
+    },
+  },
+  {
+    path: "/home",
+    name: "XHome",
+    component: () => import("@/viewsModel/Home/index.vue"),
+    meta: {
+      hidden: true,
+    },
+  },
+  // {
+  //   path: "/dashboard",
+  //   name: "Xdashboard",
+  //   component: () => import("@/views/dashBoard/index.vue"),
+  // },
+  // {
+  //   path: "/IPO",
+  //   name: "XIPO",
+  //   component: () => import("@/views/IPO/index.vue")
+  // },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("@/views/error/404.vue"),
+    meta: {
+      hidden: true,
+    },
+  },
+  
+  /* 匹配任意的路由 必须最后注册 */
+  {
+    path: "/:pathMatch(.*)",
+    name: "Any",
+    redirect: "/404",
+    meta: {
+      hidden: true,
+    },
+  },
+];
+
+
+/**
+ * 定义动态路由
+ */
+// export const allAsyncRoutes: Array<RouteRecordRaw> = [];

src/settings.ts

@@ -0,0 +1,19 @@
+/* 
+应用的一些默认设置信息
+*/
+export default {
+  /* 
+  主界面左侧Logo标题
+  */
+  title: "fini",
+
+  /* 
+  是否固定主界面的Header部分
+  */
+  fixedHeader: false,
+
+  /* 
+  是否显示主界面左侧Logo部分
+  */
+  sidebarLogo: true,
+};

src/stores/app.ts

@@ -0,0 +1,36 @@
+import Cookies from 'js-cookie'
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore({
+  id: 'app',
+  state: () => ({
+    sidebar: {
+      opened: Cookies.get('sidebarStatus') ? !!+(Cookies.get('sidebarStatus') as string) : true,
+      withoutAnimation: false
+    },
+    device: 'desktop'
+  }),
+  
+  actions: {
+
+    toggleSidebar () {
+      this.sidebar.opened = !this.sidebar.opened
+      this.sidebar.withoutAnimation = false
+      if (this.sidebar.opened) {
+        Cookies.set('sidebarStatus', '1')
+      } else {
+        Cookies.set('sidebarStatus', '0')
+      }
+    },
+
+    closeSidebar(withoutAnimation: boolean) {
+      Cookies.set('sidebarStatus', '0')
+      this.sidebar.opened = false
+      this.sidebar.withoutAnimation = withoutAnimation
+    },
+
+    toggleDevice(device: string) {
+      this.device = device
+    }
+  }
+})

src/stores/index.ts

@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+
+export default pinia;

src/stores/interface/index.ts

@@ -0,0 +1,26 @@
+import type { RouteRecordRaw } from "vue-router";
+
+// 用户信息包括权限数据
+export interface UserInfoState {
+  token: string;
+  avatar: string;
+  name: string;
+
+  menuRoutes: RouteRecordRaw[]; // 用于生成导航菜单的路由列表
+}
+
+// 三级分类数据
+export interface CategoryState {
+  category1Id: undefined | number;
+  category2Id: undefined | number;
+  category3Id: undefined | number;
+}
+
+// // 三级分类数据
+// export interface AttrState {
+//   attrItem: AttrItem;
+// }
+
+// export interface SpuState {
+//   spuItem: AllSpuItem;
+// }

src/stores/ipo.ts

@@ -0,0 +1,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'
+export const ipoStore = defineStore({
+  id: 'app',
+  state: () => ({
+    //1代表英文 2代表繁体中文 3代表简体中文
+    locale:1
+  }),
+  getters: {
+    localeLang(state) {
+      return [en,zhTw,zhCn][state.locale-1];
+    },
+  },
+  actions: {
+    //更改语言的方法
+    setLocale(data: number) {
+      this.locale = data
+    }
+  }
+})

src/utils/get-page-title.ts

@@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle: string) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}

src/utils/request-mock.ts

@@ -0,0 +1,65 @@
+import axios from "axios";
+import { ElMessage, ElMessageBox } from "element-plus";
+import pinia from "@/stores/index";
+// import { useUserInfoStore } from "../stores/userInfo";
+
+// 配置新建一个 axios 实例
+const service = axios.create({
+  // 请求前缀
+  baseURL: import.meta.env.VITE_MOCK_API_URL,
+  timeout: 20000, // 超时时间
+});
+
+// 添加请求拦截器
+service.interceptors.request.use((config) => {
+  // 将来添加token参数
+
+  return config;
+});
+
+// 添加响应拦截器
+service.interceptors.response.use(
+  /* 约束一下response */
+  async (response) => {
+    // 对响应数据做点什么
+    const res = response.data;
+    console.log(11,res)
+    if (res.code !== 20000 && res.code !== 200) {
+      /* 成功数据的code值为20000/200 */
+      // 统一的错误提示
+      ElMessage({
+        message:
+          (typeof res.data == "string" && res.data) || res.message || "Error",
+        type: "error",
+        duration: 5 * 1000,
+      });
+
+      // `token` 过期或者账号已在别处登录
+      if (response.status === 401) {
+        // const storeUserInfo = useUserInfoStore(pinia);
+        // await storeUserInfo.reset();
+        window.location.href = "/"; // 去登录页
+        ElMessageBox.alert("你已被登出，请重新登录", "提示", {});
+        // .then(() => {})
+        // .catch(() => {});
+      }
+      return Promise.reject(service.interceptors.response);
+    } else {
+      return res.data; /* 返回成功响应数据中的data属性数据 */
+    }
+  },
+  (error) => {
+    // 对响应错误做点什么
+    if (error.message.indexOf("timeout") != -1) {
+      ElMessage.error("网络超时");
+    } else if (error.message == "Network Error") {
+      ElMessage.error("网络连接错误");
+    } else {
+      if (error.response.data) ElMessage.error(error.response.statusText);
+      else ElMessage.error("接口路径找不到");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default service;

src/utils/request.ts

@@ -0,0 +1,69 @@
+import axios from "axios";
+import { ElMessage, ElMessageBox } from "element-plus";
+import pinia from "@/stores/index";
+// import { useUserInfoStore } from "../stores/userInfo";
+
+// 配置新建一个 axios 实例
+const service = axios.create({
+  // 请求前缀
+  // import.meta.env读取环境变量，开发模式下 /app-dev, 生产模式下 /app-prod
+  baseURL: import.meta.env.VITE_API_URL, // 基础路径，将来使用实例发送请求，请求地址会自动添加baseURL
+  timeout: 20000, // 超时时间
+});
+
+// 添加请求拦截器
+service.interceptors.request.use((config) => {
+  // 将来添加token参数
+
+  return config;
+});
+
+// 添加响应拦截器
+service.interceptors.response.use(
+  /* 约束一下response */
+  async (response) => {
+    // 对响应数据做点什么
+    const res = response.data;
+
+    if(res.code == 200){
+      return Promise.resolve(res)
+    }
+    if (res.code !== 20000 && res.code !== 200) {
+      /* 成功数据的code值为20000/200 */
+      // 统一的错误提示
+      ElMessage({
+        message:
+          (typeof res.data == "string" && res.data) || res.message || "Error",
+        type: "error",
+        duration: 5 * 1000,
+      });
+
+      // `token` 过期或者账号已在别处登录
+      if (response.status === 401) {
+        // const storeUserInfo = useUserInfoStore(pinia);
+        // await storeUserInfo.reset();
+        window.location.href = "/"; // 去登录页
+        ElMessageBox.alert("你已被登出，请重新登录", "提示", {})
+          .then(() => {})
+          .catch(() => {});
+      }
+      return Promise.reject(service.interceptors.response);
+    } else {
+      return res.data; /* 返回成功响应数据中的data属性数据 */
+    }
+  },
+  (error) => {
+    // 对响应错误做点什么
+    if (error.message.indexOf("timeout") != -1) {
+      ElMessage.error("网络超时");
+    } else if (error.message == "Network Error") {
+      ElMessage.error("网络连接错误");
+    } else {
+      if (error.response.data) ElMessage.error(error.response.statusText);
+      else ElMessage.error("接口路径找不到");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default service;

src/utils/token-utils.ts

@@ -0,0 +1,13 @@
+const TokenKey = 'vue_admin_template_token'
+
+export function getToken() {
+  return localStorage.getItem(TokenKey)
+}
+
+export function setToken(token: string) {
+  return localStorage.setItem(TokenKey, token)
+}
+
+export function removeToken() {
+  return localStorage.removeItem(TokenKey)
+}

src/utils/tools.ts

@@ -0,0 +1,22 @@
+import { ElMessage } from "element-plus";
+import type { UploadProps } from "element-plus";
+
+export const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
+  /*
+    rawFile 上传图片文件
+      type 图片类型
+      size 图片大小
+  */
+  const validImageTypes = ["image/jpeg", "image/png"];
+
+  if (!validImageTypes.includes(rawFile.type)) {
+    ElMessage.error("图片只能是jpg或png格式!");
+    // 返回值false，就会中止上传
+    return false;
+  } else if (rawFile.size > 250 * 1024) {
+    ElMessage.error("图片大小不能超过250kb!");
+    return false;
+  }
+  // 返回值true，就会继续上传
+  return true;
+};

src/utils/validate.ts

@@ -0,0 +1,8 @@
+/**
+ * 判断是否是外链
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternalFn(path: string) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}

src/vars.scss

@@ -0,0 +1,8 @@
+
+//这里的css变量所有组件可用
+$bg-color:red;
+$screen:99.1vw;
+@font-face {
+    font-family: 'Calibri';    // 自定义字体名称
+    src: url("@/assets/CALIBRI/CALIBRI.ttf");    // 字体的路径，后缀 ttf 一定能要小写，否则可能找不到字体文件
+  }

src/views/IPO/components/IpoContent.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="wrap22">
+
+        <div class="title">{{ title }}</div>
+        <ul>
+            <li v-for="(item, index) in data.info" :key="index">
+                <div class="name">
+                    <div v-if="item.name">{{ item.name }}</div>
+                    <div v-if="item.name2" class="name2">{{ item.name2 }}</div>
+
+                </div>
+                <div v-if="item.infos">
+
+                    <div class="info" v-if="item.infos.length" v-for="(t, index) in item.infos" :key="index">{{ t }}
+                    </div>
+                    <div class="info" v-else>-</div>
+
+                </div>
+                <div v-if="item.info || item.info2 || item.info2s">
+                    <div class="info" :style="{
+                        height: item.info2s && '30px',
+                    }">
+                        <div v-if="item.info">
+                            <a :href="item.href" v-if="item.href">{{ item.info }}</a>
+                            <span v-else>{{ item.info }}</span>
+
+                        </div>
+                        <div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }">
+                            <a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a>
+                            <span v-else>{{ item.info2 }}</span>
+                        </div>
+                        <div v-if="item.info2s" class="info2">
+                            <div v-for="(t, index) in item.info2s" :key="index">{{ t }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="table" v-if="item.table">
+                    <el-table :data="item.table.lists" stripe style="width: 100%;">
+                        <el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
+                            :label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px; color:red"
+                            :align="title.align" :key="index" />
+                    </el-table>
+                </div>
+
+
+            </li>
+
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "Ipocontent",
+};
+</script>
+
+<script lang="ts" setup>
+
+interface obj {
+    name: string
+    info?: string | null | undefined
+    href?: string;
+    href2?: string;
+    infos?: Array<string>
+    name2?: string
+    info2?: string | null | undefined
+    info2s?: Array<string>
+    info2Top?: string
+    table?: {
+        title: { header?: string, content?: string, width: number, align?: string }[],
+        lists: { des?: string, number?: string, persent?: string }[]
+    }
+}
+// width值传1-100 代表的是表头宽度的百分比
+const data = defineProps<{ info: obj[], title: string }>()
+
+</script>
+
+<style lang="scss" scoped>
+.wrap22 {
+    background-color: #fff;
+    padding: 15px;
+    border-left: 15px solid #98C2F2;
+    margin-bottom: 20px;
+
+    // height: 600px;
+    .title {
+        font-size: 27px;
+        line-height: 24px;
+        font-weight: 700;
+        color: #1C3F56;
+        font-family: "Calibri";
+    }
+
+    ul {
+
+        // display: flex;
+        // flex-direction: column;
+        margin-top: 15px;
+
+        li {
+            margin-bottom: 25px;
+
+            .name {
+                color: #8AA1B6;
+                font-size: 12px;
+                position: relative;
+
+                .name2 {
+                    position: absolute;
+                    top: 0px;
+                    left: 450px;
+                }
+
+
+            }
+
+            .info {
+                font-size: 18px;
+                line-height: 16px;
+                color: #355D80;
+                font-weight: 500;
+                margin-top: 8px;
+                position: relative;
+                font-family: "Calibri";
+     
+                a {
+                    color: #355D80;
+                }
+
+                .info2 {
+                    position: absolute;
+                    top: 0px;
+                    left: 450px;
+                }
+            }
+
+            .table {
+                width: 800px;
+                margin-top: 20px;
+
+                :deep(.el-table) {
+                    color: #355D80;
+                }
+
+                :deep(.el-table thead) {
+                    color: #355D80;
+                }
+
+                :deep(.cell) {
+                    // max-width: 310px;
+                    // color: red;
+                    font-family: 'Calibri';
+                }
+            }
+        }
+    }
+}
+</style>

src/views/IPO/components/IpoHeader.vue

@@ -0,0 +1,127 @@
+<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"  >
+            <Drawer />
+        </el-drawer>
+        <div class="hleft">
+            <div class="left-1">
+                <div class="menu">
+                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
+                </div>
+            <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
+            </div>
+            
+            <div class="search" @click="handlesearch">
+                <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
+            </div>
+        </div>
+        <!-- <div class="downLoad">
+            <div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
+            <img src="@/assets/1x/source3.png" alt="找不到图片">
+        </div> -->
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "IPOHeader",
+};
+</script>
+
+<script lang="ts" setup>
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import Drawer from '@/views/login/modelComponents/Drawer.vue'
+import { ref } from 'vue'
+const drawer = ref(false)
+const { proxy } = (getCurrentInstance() as any)
+const handlesearch = ()=>{
+    proxy.$router.push("/home")
+}
+const handleDrawer = (done: () => void) => {
+    done();
+}
+const openDrawer = () => {
+    drawer.value = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.headerWrap {
+    display: flex;
+    justify-content: space-between;
+    @media screen and (max-width: 768px){
+       
+        .left-1{
+            display: flex;
+            justify-content: space-between;
+            width: 80vw;
+        }
+    }
+    .hleft {
+        display: flex;
+        justify-content: space-between;
+        width: fit-content;
+        .menu{
+    display: none;
+    @media screen and (max-width: 768px){
+        display: block;
+        
+    }
+}
+        .title {
+            color: #2B4A60;
+            font-size: 45px;
+            font-weight:bolder;
+            @media screen and (max-width: 768px){
+              font-size: 26rem;
+              transform: translateX(-60rem);
+            }
+        }
+
+        .search {
+            margin-top: 5px;
+            background-color: #fff;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 15px;
+            transform: translateY(5px);
+            cursor: pointer;
+
+            img {
+                width: 18px;
+                height: 18px;
+            }
+            @media screen and (max-width: 768px){
+                transform: translateY(-0.5vh);
+            }
+        }
+    }
+
+    .downLoad {
+        display: flex;
+        height: 30px;
+        align-items: center;
+        .report {
+            font-size: 28px;
+            color: #1C3F56;
+            margin-right: 10px;
+        }
+
+        img {
+            width: 20px;
+            margin-top: 2px;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+
+    }
+}
+</style>

src/views/IPO/components/IpoNav.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="item">
+        <a @click="scrollto(index)" v-for="(item, index) in list" :key="index">{{ item }}</a>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "IpoNav",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, defineProps } from "vue"
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+const { proxy } = (getCurrentInstance() as any)
+const props = defineProps<{ scroll: Function }>()
+const scrollto = (index: number) => {
+    const ref11 = "i" + index + "TOP"
+    console.log(ref11)
+    props.scroll(ref11)
+}
+const list = ref([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>
+
+<style lang="scss" scoped>
+.item {
+    margin-top: 18px;
+    display: flex;
+    // @media screen and (max-width: 768px){
+    //     width: 100vw;
+    // }
+    a {
+        // margin-left: 5px;
+        padding: 5px 10px;
+        font-size: 20px;
+        color: #738B9B;
+        font-weight: 700;
+        border-radius: 30px;
+        text-decoration: none;
+
+        &:hover {
+            background-color: #1C3F56;
+            color: #fff;
+            cursor: pointer;
+        }
+    }
+}
+</style>

src/views/IPO/index.vue

@@ -0,0 +1,807 @@
+<template>
+    <div class="login2">
+        <div class="wrap w">
+            <div class="leftbox">
+                <Item :data="data" />
+                <Nav :scroll="scrollTo" />
+            </div>
+            <div class="rightbox">
+                <IpoHeader />
+                <IpoNav :scroll="scrollTo" />
+                <div class="content" ref="content">
+                    <IpoContent ref="i0" :info="information" :title="$t('ipo.CompanyInformation')" />
+                    <IpoContent ref="i1" :info="TypeOfListing" :title="$t('ipo.TypeofListing.TypeofListing')" />
+                    <IpoContent ref="i2" :info="Offerings" :title="$t('ipo.Offering.Offering')" />
+                    <IpoContent ref="i3" :info="Advisers" :title="$t('ipo.advisers.Adviser')" />
+                    <IpoContent ref="i4" :info="Timetable" :title="$t('ipo.Timetable.Timetable')" />
+                    <IpoContent ref="i5" :info="Documents" :title="$t('ipo.Documents.Documents')" />
+                    <IpoContent ref="i6" :info="Transaction" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: "XIPO"
+}
+</script>
+<script setup lang="ts">
+import Item from '@/views/dashBoard/Main.vue';
+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 type { TabsPaneContext } from 'element-plus'
+import { ipoStore } from "@/stores/ipo"
+import { useRoute } from 'vue-router'
+import { getIpo, getOfferings, getTypeofListing } from '@/api/reqIpo/ipo'
+import { getDataFromId } from "@/api/mock/home"
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import moment from 'moment';
+const store = ipoStore();
+const { proxy } = (getCurrentInstance() as any)
+const activeName = ref('first')
+const i0 = ref()
+const i1 = ref()
+const i2 = ref()
+const i3 = ref()
+const i4 = ref()
+const i5 = ref()
+const i6 = ref()
+const route = useRoute()
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+    console.log(tab, event)
+}
+const data = ref({
+    title: "FINI TESTING COMP",
+    number: 10000,
+    HKD: "HKD 148.000",
+    price: "final offer Price",
+    time: "2023-03-31 09:00",
+    trading: "Commencement of trading date"
+},)
+const information = ref([
+    {
+        name: proxy.$t('ipo.CompanyNameEnglishFull'),
+        info: "-"
+    },
+    {
+        name: proxy.$t('ipo.CompanyNameEnglishShort'),
+        info: "FINI TESTING"
+    },
+    {
+        name: proxy.$t('ipo.CompanyNameChineseFull'),
+        info: "-"
+    },
+    {
+        name: proxy.$t('ipo.CompanyNameChineseShort'),
+        info: "-"
+    },
+    {
+        name: proxy.$t('ipo.STockCode'),
+        info: "10000"
+    },
+    {
+        name: proxy.$t('ipo.ISIN'),
+        info: "!11"
+    },
+    {
+        name: proxy.$t('ipo.PlaceofIncorporation'),
+        info: "Hong Kong,China"
+    },
+    {
+        name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'),
+        infos: ["FINI TESTING COMP", "8/F,Two Exchange Square", "8 Connaught Place,Central,Hong Kong", "-"]
+    }
+])
+const TypeOfListing = ref([
+    {
+        name: proxy.$t('ipo.TypeofListing.OfferingType'),
+        info: "Global offer (placing and public offer)"
+    },
+    {
+        name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'),
+        info: "Ordinary shares"
+    },
+    {
+        name: proxy.$t('ipo.TypeofListing.NominalValueperShare'),
+        info: "150",
+        name2: "Nominal Currency",
+        info2: "HKD"
+    },
+    {
+        name: proxy.$t('ipo.TypeofListing.ListingPlatform'),
+        info: "Main board"
+    },
+    {
+        name: proxy.$t('ipo.TypeofListing.ListingType'),
+        info: "Primary"
+    },
+    {
+        name: proxy.$t('ipo.TypeofListing.ListingCategories'),
+        info: "-"
+    }
+])
+const Offerings = ref([
+    {
+        name: proxy.$t('ipo.Offering.TradingCurrency'),
+        info: "Global offer (placing and public offer)"
+    },
+    {
+        name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
+        info: "Ordinary shares"
+    },
+    {
+        name: proxy.$t('ipo.Offering.OfferPriceRange'),
+        info: "140.000 to 160.000",
+        name2: proxy.$t('home.finalofferprice'),
+        info2: "148.000",
+    },
+    {
+        name: proxy.$t('ipo.Offering.TradingBoardLot'),
+        info: "100"
+    },
+    {
+        name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
+        info: "100"
+    },
+    {
+        name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
+        info: "100,000",
+        name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
+        info2: "10,000,000",
+        table: {
+            title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: 50, align: "right" },
+            { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: 50, align: "right" }],
+            lists: [
+                {
+                    number: '1',
+                    persent: '10%',
+                },
+                {
+                    number: '15',
+                    persent: '30%',
+                }, {
+                    number: '50',
+                    persent: '40%',
+                }, {
+                    number: '100',
+                    persent: '50%',
+                }]
+        }
+    },
+    {
+        name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
+        info: "1,000,000",
+        name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
+        info2: "9,000,000"
+    },
+    {
+        name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
+        info: "5.00%"
+    },
+    {
+        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: 50, align: "right" },
+            { header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
+            lists: [
+                {
+                    number: '100',
+                    persent: '16,161,35',
+                },
+                {
+                    number: '200',
+                    persent: '32.322.72',
+                },
+                {
+                    number: '300',
+                    persent: '16,161,35',
+                },
+                {
+                    number: '400',
+                    persent: '16,161,35',
+                },
+                {
+                    number: '500',
+                    persent: '16,161,35',
+                }]
+        }
+    }
+])
+const Advisers = ref([
+    {
+        name: proxy.$t('ipo.advisers.DesignatedSponsor'),
+        info: "HKEX FINI SUPPORT",
+        // info2: "IBD-TEAM01"
+    },
+    {
+        name: proxy.$t('ipo.advisers.Sponsor'),
+        info: "-"
+    },
+    {
+        name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
+        infos: ["-"]
+    },
+    {
+        name: proxy.$t('ipo.advisers.HKLegalAdviser'),
+        info: "HKEX FINI SUPPORT 3",
+        // info2: "LEG_TEAM05"
+    },
+    {
+        name: proxy.$t('ipo.advisers.Underwriter'),
+        info: "-"
+    },
+    {
+        name: proxy.$t('ipo.advisers.Adviser'),
+        info: "-"
+    },
+    {
+        name: proxy.$t('ipo.advisers.OverallCoordinator'),
+        infos: ["-"],
+        // info2: "PLA_SYN_TEAM03",
+        info2Top: ""
+    },
+    {
+        name: proxy.$t('ipo.advisers.Distributor'),
+        infos: ["-"],
+        info2Top: "",
+        // info2: "PLA_SYN_TEAM04"
+    },
+    {
+        name: proxy.$t('ipo.advisers.HKShareRegistrar'),
+        info: "HKEX FINI SUPPORT 3",
+
+    },
+])
+const Timetable = ref([
+    {
+        name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
+        info: "2023-03-31",
+        name2: proxy.$t('ipo.Timetable.Time'),
+        info2: "09:00",
+        table: {
+            title: [
+                { header: " ", content: "des", width: 43, align: "left" },
+                { width: 12 },  //通过加一段空结构来调整表头的位置
+                { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: 25, align: "left" },
+                { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: 20, align: "left" }],
+            lists: [
+                {
+                    des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
+                    number: '2023-02-22',
+                    persent: '15:35'
+                },
+                {
+                    des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
+                    number: '2023-02-22',
+                    persent: '12:00'
+                },
+                {
+                    des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
+                    number: '2023-02-22',
+                    persent: '',
+                },
+                {
+                    des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'),
+                    number: '2023-02-22',
+                    persent: '',
+                },
+                {
+                    des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
+                    number: '2023-02-22',
+                    persent: '',
+                },
+                {
+                    des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
+                    number: '2023-02-22',
+                    persent: '',
+                }
+            ]
+        }
+    }
+
+])
+const Documents = ref([
+    {
+        name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
+        info: "ipo.pdf",
+        name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
+        info2: "ipo.pdf",
+        href: setDownLoad()[0],
+        href2: setDownLoad()[1]
+    },
+])
+const Transaction = ref([
+    {
+        name: proxy.$t('ipo.TransactionCosts.Brokerage'),
+        info: "1.0000%",
+        name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
+        info2: "0.00270%"
+    },
+    {
+        name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
+        info: "0.00565%",
+        name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
+        info2: "0.00015%"
+    },
+])
+const content = ref()
+onMounted(
+    () => {
+        data.value = JSON.parse(localStorage.getItem('itemData') as string)
+        getreferencedata()
+        // text();
+    }
+)
+async function text() {
+    const res = await getDataFromId(1);
+    setInformation((res as any)[0])
+    setTypeofListing((res as any)[0])
+    setOfferings((res as any)[0])
+    setAdvisers((res as any)[0])
+    setTransaction((res as any)[0])
+    setTimeTable((res as any)[0])
+}
+const getreferencedata = async () => {
+    const ipoID = localStorage.getItem('ipoID')
+    const res = await getIpo(ipoID as string)
+    setInformation((res as any).data[0])
+    setTypeofListing((res as any).data[0])
+    setOfferings((res as any).data[0])
+    setAdvisers((res as any).data[0])
+    setTransaction((res as any).data[0])
+    setTimeTable((res as any).data[0])
+}
+function setInformation(mockRes: any) {
+    const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
+    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];
+
+    information.value = information.value.map((item: any, index: number) => {
+        if (item.info) {
+            return { ...item, info: arr[index] }
+        } else {
+            arr[index].__proto__ = Array.prototype
+            let infos = arr[index].map((obj: any) => {
+                return obj.line
+            })
+            return { ...item, infos }
+        }
+    })
+}
+function setOfferings(mockRes: any) {
+    const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = mockRes;
+    var dataObj = [
+        { info: has_data(tradeCurrency) },
+        { info: keepTwoDecimalStr(downwardPriceFlex) },
+        { info: has_data(priceMin) + "-" + has_data(priceMax), info2: has_data(priceFinal) },
+        { info: has_data(boardLot) },
+        { info: keepTwoDecimalStr(poReallocationCap) },
+        { info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(poSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(ioOfferSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
+        { info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
+        { info: has_data(upsizeOption) },
+        { info: "-" },
+        { info: keepTwoDecimalStr(overallotOption) },
+        { table: denomTable }
+    ]
+    // info2s: [has_data(ipoShares) , has_data(poSharesFinal) , has_data(ioOfferSharesFinal)],
+    Offerings.value = 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 == 10) {
+                    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;
+                    return { number: formatNumber(number), persent: formatNumber(persent) }
+                } else {
+                    const { threshold: number, allocation: persent } = element;
+
+                    return { number, persent: keepTwoDecimalStr(persent) }
+                }
+
+            })
+        }
+        return filterObj
+    })
+    //找不到的字段
+    // `Number of Shares Held by Existing Shareholders
+    //  Offer Size-Adjustment Option (%)
+    //  Over-allotment Option inclusive of Offer Size Adjustment Option
+    // `
+}
+const keepTwoDecimalStr = (num: number) => {
+    if (num) {
+        const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
+        let s = result.toString();
+        let rs = s.indexOf(".");
+        if (rs < 0) {
+            rs = s.length;
+            s += ".";
+        }
+        while (s.length <= rs + 2) {
+            s += "0";
+        }
+        return s + "%";
+    } else {
+        return "-"
+    }
+
+};
+
+function setTypeofListing(mockRes: any) {
+    let { offerType, listSecurities, nomValue, nomCur, listPlatform, } = mockRes;
+    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;
+    }
+    //没找到的字段ListingType listingCategories
+    // const ListingType = "-";
+    const listingCategories = "-";
+    const arr = [
+        { info: offerType },
+        { info: listSecurities },
+        { info: has_data(nomValue), info2: nomCur as any },
+        { info: listPlatform },
+        { info: has_data(listSecurities) },
+        { info: has_data(listingCategories) }]
+    TypeOfListing.value = TypeOfListing.value.map((item, index) => {
+        if (arr[index].info2) {
+            return { ...item, info: arr[index].info, info2: arr[index].info2 }
+        } else {
+            return { ...item, info: arr[index].info }
+        }
+
+    })
+}
+
+function setAdvisers(mockRes: any) {
+    let { designatedSponsor, sponsors, legalSponsor, legalIssuer, underwriters, advisers, overallCoordinators, distributors, hkSharereg } = mockRes;
+    const arr = [
+        { info: has_data(designatedSponsor) },
+        { infos: filter(sponsors) },
+        { infos: filter(legalSponsor) },
+        { info: has_data(legalIssuer) },
+        { infos: 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 "-";
+        }
+
+    }
+
+    Advisers.value = 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 }
+            }
+
+        }
+    })
+}
+function setTransaction(mockRes: any) {
+    const { brokerage, sfcLevy, sehkTradingFee, afrcTransactionLevy } = mockRes;
+    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), "%") },
+    ]
+    Transaction.value = 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 }
+        }
+    })
+}
+function setTimeTable(mockRes: any) {
+    const { listingDate, bookOpenDate, bookCloseDate, pricingDate, allotmentDate, siInputDate, placingSharesDeliveryDate } = mockRes;
+
+    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]
+                }]
+            }
+        }
+    ]
+    Timetable.value = Timetable.value.map(item => {
+        item.table.lists = item.table.lists.map((item, index) => {
+            const { number, persent } = arr[0].table.lists[index]
+            return { ...item, number, persent }
+        })
+        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"), moment(time).format("HH:mm")]
+        } else {
+            return ["-", "-"]
+        }
+    }
+}
+
+function has_data(str: string | null | undefined, str2: string = "") {
+    console.log('$$', str)
+    if (str) {
+        return str ? str + str2 : "-"
+    } else {
+        return str ? str : "-"
+    }
+
+}
+//滑动到指定列表
+function scrollTo(stron: string) {
+    var obj = {
+        i0TOP: i0.value.$el.offsetTop,
+        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 (isValidKey(stron, obj)) {
+        // 滑动
+        content.value.scrollTop = obj[stron] - obj.i0TOP;
+    }
+    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
+    function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+
+}
+function setDownLoad() {
+    const ipoID = localStorage.getItem('ipoID');
+    const enHref = `/api/file/download/EN?ipoID=${ipoID}`;
+    const chinaHref = `/api/file/download/TC?ipoID=${ipoID}`;
+    // return store.$state.locale == 1 ? enHref : chinaHref
+    return [enHref, chinaHref];
+}
+</script>
+<style lang="scss" scoped>
+// .login2 {
+//     background-image: url("@/assets/1x/beijingtu.png");
+//     background-repeat: no-repeat;
+//     background-size: cover;
+//     height: 1100px;
+//     // font-family: "Calibri";
+// }
+
+//取消滚动条样式
+::-webkit-scrollbar {
+    display: none;
+}
+
+.wrap {
+    display: flex;
+    padding-top: 30px;
+    height: 100%;
+
+    .leftbox {
+        width: 22%;
+        height: 100%;
+
+        @media screen and (max-width: 768px) {
+            display: none;
+        }
+    }
+
+    .rightbox {
+        padding-top: 30px;
+        width: 78%;
+        height: 100%;
+        padding-left: 20px;
+    }
+
+    .content {
+        width: 100%;
+        // height: 550px;
+        height: 800px;
+        margin-top: 25px;
+        overflow: scroll;
+        // @media screen and (max-width: 768px){
+        //     width: 100vw;
+        // }
+    }
+
+    .demo-tabs>.el-tabs__content {
+        padding: 32px;
+        color: #6b778c;
+        font-size: 32px;
+        font-weight: 600;
+    }
+}
+
+:deep(.el-table__header) {
+    font-size: 18px;
+}
+
+:deep(.el-table td.el-table__cell div) {
+    font-size: 18px;
+}
+</style>

src/views/dashBoard/Header/index.vue

@@ -0,0 +1,147 @@
+<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"  >
+            <Drawer />
+        </el-drawer>
+        <div class="left">
+            <div class="left-1">
+                <div class="menu">
+                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
+                </div>
+            <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+            </div>
+            
+            <div class="search" @click="handlesearch">
+                <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
+            </div>
+        </div>
+        <div class="right">
+            <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
+            <li class="show">
+                <span>Show Value</span>
+                <el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
+            </li>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XHeader",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import Drawer from '@/views/login/modelComponents/Drawer.vue'
+const { proxy } = (getCurrentInstance() as any)
+const value = ref(true)
+const drawer = ref(false)
+const props = defineProps({
+    time: [String, Number]
+})
+const handlesearch = ()=>{
+    proxy.$router.push("/home")
+}
+const handleDrawer = (done: () => void) => {
+    done();
+}
+const openDrawer = () => {
+    drawer.value = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.headerWrap {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 40px;
+    transform: translateY(-20px);
+
+    @media screen and (max-width: 768px){
+        flex-direction: column;
+        .left-1{
+            display: flex;
+            justify-content: space-between;
+            width: 40vw;
+        }
+    }
+    .left {
+        display: flex;
+        @media screen and (max-width: 768px){
+            justify-content: space-between;
+            width: 100vw;
+            align-items:center;
+        }
+.menu{
+    display: none;
+    @media screen and (max-width: 768px){
+        display: block;
+        
+    }
+}
+        span {
+            color: #2B4A60;
+            font-size: 45px;
+            font-weight: 900;
+            @media screen and (max-width: 768px){
+                font-size: 26rem;
+            }
+        }
+
+        .search {
+            background-color: #fff;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 15px;
+            margin-top: 6px;
+            cursor: pointer;
+            img {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+
+    .right {
+        font-size: 20px;
+        @media screen and (max-width: 768px){
+                width: 100vw;
+                margin-top: 10rem;
+            }
+        .time {
+            color: #435F70;
+            @media screen and (max-width: 768px){
+                float: right;
+                font-size: 15rem;
+            }
+        }
+
+        .show {
+            margin-top: 5px;
+            text-align: right;
+            color: #27485E;
+            font-weight: 600;
+            span {
+                margin-right: 15px;
+            }
+
+            :deep(.el-switch__action) {
+                background-color: #E86666;
+            }
+            @media screen and (max-width: 768px){
+                font-size: 15rem;
+                margin-top: 13rem;
+                transform: translateX(200rem);
+            }
+        }
+    }
+}
+</style>

src/views/dashBoard/Main.vue

@@ -0,0 +1,275 @@
+<template>
+    <div class="bigbox" @click="handleclick(props.data)">
+        <div class="title">
+            <img :src="props.data.logolinks" />
+        </div>
+        <div class="list">
+            <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">
+                        <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">
+                        <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>{{ code22 }}</h5>
+               
+                <h4>HKD {{ props.data.HKD }}</h4>
+                <h6>{{props.data.price? $t(i18n.global.t('home.finalofferprice')):$t(i18n.global.t('home.offerpricerange')) }}</h6>
+                <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>
+</template>
+<script lang="ts">
+export default {
+    name: 'XMain',
+};
+</script>
+<script lang="ts" setup>
+import { size } from 'lodash';
+import { ref, onMounted, onUpdated } 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';
+const { proxy } = (getCurrentInstance() as any)
+const store = ipoStore();
+const currentDate = ref(new Date())
+const expand=ref(false);
+
+const router = useRouter()
+const detailsItem=[
+    {
+        name:proxy.$t('home.DealInitiated'),
+        icon:1
+    },
+    {
+        name:proxy.$t('home.PublicOfferClosed'),
+        icon:1
+    },
+    {
+        name:proxy.$t('home.ApplicationValidated'),
+        icon:1
+    },
+    {
+        name:proxy.$t('home.AllotmentConfirmed'),
+        icon:2
+    }
+    , {
+        name:proxy.$t('home.MoneySettlement'),
+        icon:0
+    },
+    {
+        name:proxy.$t('home.AllocationConfirmed'),
+        icon:0
+    },{
+        name: proxy.$t('home.placingApproved'),
+        icon:0
+    },{
+        name:proxy.$t('home.AllotmentResultsApproved'),
+        icon:0
+    },{
+        name:proxy.$t('home.TradingStarted'),
+        icon:0
+    }
+]
+const props = defineProps({
+    data: {
+        type: Object,
+        default: function () {
+            return {
+                HKD: "",
+                number: 0,
+                price: "",
+                time: "",
+                title: "",
+                trading: "",
+                logolinks: "",
+                status: 0,
+                listingDate:""
+            }
+        }
+    }
+})
+
+const code22 = ref('')
+onUpdated(() => {
+    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'),
+    }
+    // console.log('&&&&', props.data.status)
+    const stron = props.data.status
+    if (isValidKey(stron, obj)) {
+        code22.value = obj[stron];
+        //   console.log('kkkk',stron,obj[stron])
+    }
+    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
+    function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+
+})
+const cardDetail=(e:any)=>{
+    e.stopPropagation();
+    expand.value=!expand.value;
+}
+//路由传参
+const handleclick = (item: any) => {
+    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('itemData', JSON.stringify(item))
+    router.push({
+        name: 'Xdashboard',
+        params: { data: JSON.stringify(item) }
+    },
+    )
+
+}
+</script>
+
+<style lang="scss" scoped>
+.bigbox {
+
+    width: 270px;
+    // height: 360px;
+    height:fit-content;
+    min-height: 350px;
+    margin-top: 30px;
+    margin-left: 20px;
+    background-color: #e7efec;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid #DDE2E6;
+    cursor: pointer;
+    // font-family: "Calibri";
+    // @media screen and (max-width: 768px){
+    //     width: 270rem;
+    // height: 360rem;
+    // }
+    .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%);
+        }
+    }
+
+    .list {
+        // height: 150px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        font-family: "Calibri";
+        .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;
+               
+
+            }
+            .icon{
+                @media screen and (max-width: 768px){
+                    width: 13rem;
+                    height: 13rem;
+                }
+                width: 13px;
+                height: 13px;
+            }
+        }
+    }
+}
+
+.bigbox:hover {
+    //   background-color: red;
+    box-shadow: 10px 15px 10px #9A9A9A;
+}
+@media screen and (max-width: 768px) {
+        
+.bigbox {
+
+width: 76vw;
+min-height: 310rem;
+height:fit-content;
+
+margin-top: 14rem !important;
+cursor: pointer;
+
+}
+
+
+}
+</style>

src/views/dashBoard/box/index.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="box">
+        <div class="left" :style="{width: leftWidth}" >{{ leftNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
+        </div>
+        <div class="right" :style="{width: rightWidth}">
+            {{ rightNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
+        </div>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: 'XBox',
+};
+</script>
+<script lang="ts" setup>
+import { computed } from '@vue/reactivity';
+
+const props = defineProps({
+    leftNumber: {
+             type: Number,
+             required: true,
+        },
+    rightNumber:
+         {
+             type: Number, required: true,
+         },
+    
+    }
+)
+const leftWidth = computed(()=>{
+    return (props.leftNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
+})
+const rightWidth = computed(()=>{
+   return  (props.rightNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
+})
+
+
+</script>
+<style scoped lang="scss">
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 20px;
+    width: 400px;
+    @media screen and (max-width: 768px){
+        width: 80vw;
+    }
+}
+
+.left{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color:#ee4040 ;
+    font-weight: bold; 
+    color: #fff;
+    
+}
+.right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color:#98c2f2 ;
+    font-weight: bold;
+    color: #fff;
+}
+
+/* .left {
+    border-radius: 5px 0 0 5px;
+}
+
+.right {
+    border-radius: 0 5px 5px 0;
+} */
+</style>

src/views/dashBoard/nav/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="navWrap">
+        <li @click="handleHome">
+            <img src="@/assets/1x/source10.png" />
+
+            <span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
+        </li>
+        <li @click="handDashBoard">
+            <img src="@/assets/1x/source5.png" />
+
+            <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+        </li>
+        <li @click="handleIpo">
+            <img src="@/assets/1x/source2.png" />
+
+            <span >{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
+        </li>
+
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XNav",
+};
+</script>
+
+<script lang="ts" setup>
+import router from '@/router';
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+const { proxy } = (getCurrentInstance() as any)
+
+// import { onMounted } from 'vue';
+// import { useRoute } from 'vue-router'
+// const route = useRoute()
+// onMounted(()=>{
+//     const item = route.params.data;
+// })
+
+const handleIpo = () => {
+    // localStorage.setItem('ipoID',item.ipoID)  
+    // router.push({
+    //     name: 'XIPO',
+    //     params: { data: JSON.stringify(item) }
+    //  },)
+    proxy.$router.push("/IPO")
+}
+const handleHome = () => {
+    proxy.$router.push("/home")
+}
+const handDashBoard = () => {
+    proxy.$router.push("/dashBoard")
+}
+</script>
+
+<style lang="scss" scoped>
+.navWrap {
+    width: 270px;
+
+    li {
+        width: 100%;
+        height: 56px;
+        border-radius: 10px;
+        margin-top: 10px;
+        margin-left: 20px;
+        background-color: #fff;
+        font-size: 24px;
+        display: flex;
+        align-items: center;
+        color: #2B4A60;
+        cursor: pointer;
+        img {
+            margin-left: 12px;
+            width: 30px;
+            height: 30px;
+        }
+
+        span {
+            font-weight: 700;
+            margin-left: 13px;
+        }
+    }
+
+}
+</style>

src/views/error/404.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">你访问的界面不存在!</div>
+        <div class="bullshit__headline">管理员说你不能进入此页面</div>
+        <div class="bullshit__info">请检查你的url是否正确, 或点击下面按钮回到首页</div>
+        <router-link class="bullshit__return-home" to="/home" replace>返回到首页</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'Page404',
+  }
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/login/components/Event.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="wrapEvent">
+        <div class="header">
+            <div class="c">
+
+            </div>
+            <div class="h">
+                <div class="font">
+                    <!-- <span :icon="Bell"></span> -->
+                    <el-icon>
+                        <Bell />
+                    </el-icon>
+                </div>
+                <div class="headertitle">
+                    <span class="new" v-if="store.$state.locale != 1">新上市</span>
+                    <span class="newEn" v-if="store.$state.locale == 1">New</span>
+                </div>
+            </div>
+
+        </div>
+        <div class="content">
+            <li v-for="(item, index) in data.data" :key="index">
+                <span>{{platformTo(item.listPlatform1) }}</span>
+                <span>{{ item.logo }}</span>
+                <span>{{ store.$state.locale == 1 ? item.name.split(";")[0] : item.name.split(";")[1] }} </span>
+                <span class="number">({{ item.number }})</span>
+            </li>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XEvent",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, defineProps, onUpdated } from "vue";
+import {
+    Bell
+} from '@element-plus/icons-vue'
+import { ipoStore } from "@/stores/ipo"
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+const { proxy } = (getCurrentInstance() as any)
+interface obj {
+    logo: string,
+    listPlatform1: string,
+    name: string,
+    number: string | number
+}
+const store = ipoStore();
+const data = defineProps<{ data: obj[] }>()
+// var obj = {
+//             1: proxy.$t('home.Mainboard'),
+//             2: proxy.$t('home.GEM')
+//         }
+//         data.data.forEach(function(item){
+//             if (isValidKey(item.listPlatform1, obj)) {
+//             item.listPlatform1 = obj[item.listPlatform1]
+//         }
+//         })
+        
+//         function isValidKey(
+//             key: string | number | symbol,
+//             object: object
+//         ): key is keyof typeof object {
+//             return key in object;
+//         }
+const platformTo=(listPlatform1:string)=>{
+    var str=""
+    var obj={
+        1: proxy.$t('home.Mainboard'),
+        2: proxy.$t('home.GEM')
+    }
+    if (isValidKey(listPlatform1, obj)) {
+      const code = obj[listPlatform1]
+
+      str = code;
+    }
+    function isValidKey(
+      key: string | number | symbol,
+      object: object
+    ): key is keyof typeof object {
+      return key in object;
+    }
+    return str
+}
+
+</script>
+
+<style lang="scss" scoped>
+.wrapEvent {
+    // margin-top: 20px;
+    padding-left: 0px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    border-top: 6px solid #D3DDE4;
+    border-right: 6px solid #D3DDE4;
+    border-left: 3px solid #D3DDE4;
+    border-bottom: 2px solid #D3DDE4;
+    box-sizing: border-box;
+
+    .header {
+        margin-top: 4px;
+        position: relative;
+        // background-color: red;
+        width: 100%;
+        height: 45px;
+
+        .c {
+            width: 30px;
+            height: 35px;
+            background-color: #DA8B2B;
+            transform: rotateX(26deg) rotateY(108deg);
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
+
+        .h {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            font-size: 14px;
+            // width: 80px;
+            padding-left: 10px;
+            padding-right: 10px;
+            height: 35px;
+            background-color: #F3B72B;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .font {
+                // color: #fff;
+                padding-top: 1.5px;
+                font-size: 14px;
+                // background-color: red;
+                width: 10px;
+                height: 10px;
+                transform: translateY(-3px);
+                margin-right: 5px;
+            }
+
+            .headertitle {
+                .new {
+                    font-size: 16px;
+                }
+
+                .newEn {
+                    font-size: 20px;
+                }
+            }
+        }
+
+    }
+
+    // /取消滚动条样式
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    .content {
+        margin-left: 22px;
+        border-left: 3px solid #EEEFF1;
+        height: 100%;
+        padding-left: 25px;
+        overflow: scroll;
+
+
+
+        li {
+            line-height: 50px;
+            color: #888F95;
+            border-bottom: 2px solid #EDEDED;
+            font-size: 19px;
+            .number {
+                color: #9FA4A7;
+                font-weight: 450;
+            }
+        }
+    }
+
+}
+</style>

src/views/login/components/Lang.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="wrap1" v-if="showLang">
+        <li @click="handleLang1">English</li>
+        <li @click="handleLang2">繁體中文</li>
+        <li @click="handleLang3">简体中文</li>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XLang",
+};
+</script>
+
+<script lang="ts" setup>
+
+import { ref, defineExpose } from 'vue';
+import { getCurrentInstance } from 'vue'
+import { ipoStore } from "@/stores/ipo"
+const store = ipoStore()
+const { proxy } = (getCurrentInstance() as any)
+const showLang = ref(false)
+const handleLang1 = () => {
+    if (proxy.$i18n.locale = 'en') {
+        proxy.$i18n.locale = 'en'
+    }
+    store.setLocale(1)
+}
+const handleLang2 = () => {
+    if (proxy.$i18n.locale = 'zhCt') {
+        proxy.$i18n.locale = 'zhCt'
+
+
+    }
+    store.setLocale(2)
+}
+const handleLang3 = () => {
+    if (proxy.$i18n.locale = 'zhCn') {
+        proxy.$i18n.locale = 'zhCn'
+    }
+    store.setLocale(3)
+}
+defineExpose({
+    showLang
+})
+
+</script>
+
+<style lang="scss" scoped>
+.wrap1 {
+    width: 140px;
+    // height: 150px;
+    background-color: #fff;
+    border: 1px solid #A1A1A1;
+    border-radius: 8px;
+    color: #20435B;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    position: relative;
+    z-index: 1;
+
+    li {
+        text-align: center;
+        line-height: 50px;
+    }
+
+    li:hover {
+        color: blue;
+        cursor: pointer;
+    }
+}
+</style>

src/views/login/components/Main.vue

@@ -0,0 +1,299 @@
+<template>
+    <div class="bigbox" @click="handleclick(props.data)">
+        <div class="title">
+            <img v-lazy="props.data.logolinks" />
+        </div>
+        <div class="list">
+            <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">
+                        <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">
+                        <span>{{ item.name }}</span>
+                        <el-icon class="icon1" v-if="item.icon">
+                            <Check v-if="item.icon == 1" />
+                            <!-- <Filter v-if="item.icon==2" /> -->
+                            <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
+                        </el-icon>
+                    </h5>
+
+                </div>
+                <h5 v-else>{{ code22 }}</h5>
+
+                <h4>HKD {{ 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>
+</template>
+<script lang="ts">
+export default {
+    name: 'XMain',
+};
+</script>
+<script lang="ts" setup>
+import { size } from 'lodash';
+import { ref, onMounted, onUpdated } 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';
+const { proxy } = (getCurrentInstance() as any)
+const store = ipoStore();
+const currentDate = ref(new Date())
+const expand = ref(false);
+
+const router = useRouter()
+const detailsItem = ref([
+    {
+        name: proxy.$t('home.DealInitiated'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.PublicOfferClosed'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.ApplicationValidated'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.AllotmentConfirmed'),
+        icon: 0
+    }
+    , {
+        name: proxy.$t('home.MoneySettlement'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.AllocationConfirmed'),
+        icon: 0
+    }, {
+        name: proxy.$t('home.placingApproved'),
+        icon: 0
+    }, {
+        name: proxy.$t('home.AllotmentResultsApproved'),
+        icon: 0
+    }, {
+        name: proxy.$t('home.TradingStarted'),
+        icon: 0
+    }
+])
+const props = defineProps({
+    data: {
+        type: Object,
+        default: function () {
+            return {
+                HKD: "",
+                number: 0,
+                price: "",
+                time: "",
+                title: "",
+                trading: "",
+                logolinks: "",
+                status: 0,
+                listingDate: ""
+            }
+        }
+    }
+})
+
+const code22 = ref('')
+onUpdated(() => {
+    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'),
+    }
+    // console.log('&&&&', props.data.status)
+    const stron = props.data.status
+
+    if (isValidKey(stron, obj)) {
+        code22.value = obj[stron];
+        // console.log('kkkk',stron,obj[stron])
+    }
+    var tag = true;
+    detailsItem.value = detailsItem.value.map(item => {
+        if (code22.value == item.name && tag) {
+            tag = false;
+            return { ...item, icon: 2 }
+        } else if (tag) {
+            return { ...item, icon: 1 }
+        } else {
+            return { ...item, icon: 0 }
+        }
+    })
+    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
+    function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+
+})
+const cardDetail = (e: any) => {
+    e.stopPropagation();
+    expand.value = !expand.value;
+}
+//路由传参
+const handleclick = (item: any) => {
+    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('itemData', JSON.stringify(item))
+    router.push({
+        name: 'Xdashboard',
+        params: { data: JSON.stringify(item) }
+    },
+    )
+
+}
+</script>
+
+<style lang="scss" scoped>
+.bigbox {
+
+    width: 270px;
+    // height: 360px;
+    height: fit-content;
+    min-height: 350px;
+    margin-top: 30px;
+    margin-left: 20px;
+    background-color: #e7efec;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid #DDE2E6;
+    cursor: pointer;
+
+    // font-family: "Calibri";
+    // @media screen and (max-width: 768px){
+    //     width: 270rem;
+    // height: 360rem;
+    // }
+    .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%);
+        }
+    }
+
+    .list {
+        // height: 150px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        font-family: "Calibri";
+
+        .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;
+            }
+
+            .icon {
+                @media screen and (max-width: 768px) {
+                    width: 13rem;
+                    height: 13rem;
+                }
+
+                width: 13px;
+                height: 13px;
+            }
+        }
+    }
+}
+
+.bigbox:hover {
+    //   background-color: red;
+    box-shadow: 10px 15px 10px #9A9A9A;
+}
+
+@media screen and (max-width: 768px) {
+
+    .bigbox {
+
+        width: 76vw;
+        min-height: 310rem;
+        height: fit-content;
+
+        margin-top: 14rem !important;
+        cursor: pointer;
+
+    }
+
+
+}
+</style>

src/views/login/components/SearchCup.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="wrap1" v-if="showLang" @click="fn" >
+        <li >
+            <el-checkbox v-model="checked1" label="IPO Status" text-color="blue" />
+         </li>
+         <li >
+            <el-checkbox v-model="checked2" label="Trading Currency" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked3" label="Offering Type" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked4" label="Securities to be Listed" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked5" label="Relaunch" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked6" label="Listing Platform" /> 
+         </li>
+         <li >
+
+            <el-checkbox v-model="checked7" label="Listing Type" /> 
+         </li>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XSearchCup",
+};
+</script>
+
+<script lang="ts" setup>
+
+import { ref, defineExpose } from 'vue';
+
+const showLang = ref(false)
+const checked1 = ref(false)
+const checked2 = ref(false)
+const checked3 = ref(true)
+const checked4 = ref(true)
+const checked5 = ref(false)
+const checked6 = ref(true)
+const checked7 = ref(true)
+defineExpose({
+    showLang
+})
+const fn=(e:any)=>{
+    console.log('阻止')
+    e.stopPropagation();
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap1 {
+    width: fit-content;
+    // height: 150px;
+    background-color: #fff;
+    border: 1px solid #A1A1A1;
+    border-radius: 4px;
+
+
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-right: 5px;
+    padding-bottom: 10px;
+    position: relative;
+    z-index: 1;
+    li {
+        line-height: 50px;
+        display: flex;
+        :deep(.el-checkbox__label){
+            display: block ;
+            font-family: "Calibri";
+            color: #1C3F56;
+            font-weight: 580;
+            font-size: 12px;
+            width: 90px;
+            white-space:pre-wrap;
+            overflow: hidden;
+        }
+        :deep(.el-checkbox__inner:hover){
+            border-color:#000000;
+        }
+        :deep(.el-checkbox__input.is-checked .el-checkbox__inner ){
+             background-color: #000000;
+             border-color:#000000;
+        }
+        span{
+            font-size: 12px;
+        }
+    }
+
+
+}
+</style>

src/views/login/index.vue

@@ -0,0 +1,882 @@
+<template>
+    <div class="login2">
+        <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 />
+        </el-drawer>
+        <div class="left">
+            <div class="header">
+                <div class="menu">
+                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
+                </div>
+                <!-- <input class="search" /> -->
+                <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
+                    class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
+                    <template #prefix>
+                        <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
+                    </template>
+                </el-autocomplete>
+
+                <div class="dropdown">
+                    <img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
+
+                </div>
+                <div class="dropdown1">
+
+                    <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
+                    <Lang class="alert" ref="lang" />
+                    <SearchCup ref="SearchCupDom" class="searchCup" />
+                </div>
+
+            </div>
+            <div class="bigger">
+                <Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
+            </div>
+
+        </div>
+        <div class="right">
+            <div class="right-top">
+                <img src="@/assets/1x/1x/source1.png" />
+                <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
+            </div>
+            <div class="right-bottom">
+
+                <el-calendar ref="calendar" v-model="dayValue">
+                    <template #header="{ date }">
+
+                        <el-button size="small" @click="selectDate('prev-month')">
+                            <img src="@/assets/1x/source11.png">
+                        </el-button>
+
+                        <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
+                        <span class="month">{{ showMounth(date) }}</span>
+
+                        <el-button size="small" @click="selectDate('next-month')">
+                            <img src="@/assets/1x/source12.png">
+                        </el-button>
+
+                    </template>
+                    <!-- <template #date-cell="{ data }">
+
+                    </template> -->
+                </el-calendar>
+            </div>
+            <div class="right-bottom1">
+                <Event v-if="Eventdata.length" :data="Eventdata" />
+                <div v-else class="right-bottom-title1">No event</div>
+
+            </div>
+        </div>
+    </div>
+    </div>
+   
+</template>
+<script lang="ts">
+export default {
+    name: 'Xlogin',
+};
+</script>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import Lang from "./components/Lang.vue";
+import Main from './components/Main.vue';
+import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
+import moment from "moment"
+import { useRouter } from 'vue-router';
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import Event from './components/Event.vue';
+import { getEventData, getSearchListing } 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";
+const dayValue = ref(new Date())
+const drawer = ref(false)
+const handleDrawer = (done: () => void) => {
+    done();
+}
+const openDrawer = () => {
+    drawer.value = true;
+}
+const { proxy } = (getCurrentInstance() as any)
+const handleSelect = () => {
+    //  console.log('@@@', state.value)
+    getSearchIpoList(state.value)
+}
+const router = useRouter()
+watch(dayValue, async (ne, ol) => {
+    const day = moment(ne).format("YYYY-MM-DD")
+    const result = await getEventData(day);
+    console.log(result);
+    setEventdata((result as any).data)
+})
+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: "力高健康生活有限公司",
+    //     number: 2380
+    // }, {
+    //     listPlatform1:"主板",
+    //     logo:"-",
+    //     name: "力高健康生活有限公司",
+    //     number: 2381
+    // }
+])
+const setEventdata = (EventD: any) => {
+    Eventdata.value = EventD.map((item: any) => {
+        const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
+        return {
+            logo: '-',
+            listPlatform1: listPlatform,
+            name: companyEngFull + ";" + companyChiFull,
+            number: stkCode
+        }
+
+    })
+}
+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, companyEngShort, companyChiShort, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
+                return {
+                    logolinks: logoLink,
+                    title: companyEngShort + ";" + companyChiShort,
+                    status: status,
+                    number: stkCode,
+                    HKD: priceFinal ? priceFinal : priceMinMax(),
+                    time: listingDate ? listingDate : pricingDate,
+                    ipoID: ipoID,
+                    price: priceFinal,
+                    listingDate: listingDate
+                }
+                function priceMinMax() {
+                    if (priceMin && priceMax) {
+                        return `${priceMin}-${priceMax}`
+                    } else if (priceMin) {
+                        return `${priceMin}-`
+                    } else if (priceMax) {
+                        return ` -${priceMax}`
+                    } else {
+                        return " - "
+                    }
+                }
+            })
+            resolve(data)
+        }
+        )
+    }
+    const result = await demo();
+    (result as objType[]).sort((a: any, b: any) => {
+        const preTime = new Date(a.time).getTime();
+        const nextTime = new Date(b.time).getTime();
+        if (preTime == nextTime) {
+            return Number(a.number) - Number(b.number);
+        } else {
+            return preTime - nextTime;
+        }
+    })
+    logos.value = result as objType[]
+}
+onMounted(async () => {
+    getHomeIpoList();
+    var day = moment(Date.now()).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)
+                if (!(res as any).data.length) {
+                    ElMessage.warning('No relevant search data')
+                    throw ("222")
+                }
+                const data = (res as any).data.map((item: any) => {
+                    let { stkCode, dateTime, status, ipoID, companyEngShort, companyChiShort, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
+                    return {
+                        logolinks: logoLink,
+                        title: companyEngShort + ";" + companyChiShort,
+                        status: status,
+                        number: stkCode,
+                        HKD: priceFinal ? priceFinal : priceMinMax(),
+                        time: listingDate ? listingDate : pricingDate,
+                        ipoID: ipoID,
+                        price: priceFinal,
+                        listingDate: listingDate
+                    }
+                    function priceMinMax() {
+                        if (priceMin && priceMax) {
+                            return `${priceMin}-${priceMax}`
+                        } else if (priceMin) {
+                            return `${priceMin}-`
+                        } else if (priceMax) {
+                            return ` -${priceMax}`
+                        } else {
+                            return " - "
+                        }
+                    }
+                })
+                resolve(data)
+            } catch (error) {
+                reject()
+            }
+
+        }
+        )
+    }
+    const result = await demo();
+    (result as objType[]).sort((a: any, b: any) => {
+        const preTime = new Date(a.number).getTime();
+        const nextTime = new Date(b.number).getTime();
+        if (preTime == nextTime) {
+            return Number(a.number) - Number(b.number);
+        } else {
+            return preTime - nextTime;
+        }
+    })
+
+    logos.value = result as objType[]
+
+}
+//测试功能----------------------------------------------------------
+onMounted(async () => {
+    // const result=await getDataFromId("home");
+    // console.log('@@',result);
+    // 测试event
+    // const result = await getDataFromId(101);
+    // setEventdata(result);
+})
+interface objType {
+    title: string,
+    number: string,
+    HKD: string,
+    price: string,
+    time: string,
+    trading: string
+
+}
+const logos = ref<objType[]>([
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 148.000",
+        price: "final offer Price",
+        time: "2023-03-31 09:00",
+        trading: "Commencement of trading date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    }
+])
+
+const jsonData = {
+    "code": null,
+    "msg": null,
+    "data": {
+        "exception": null,
+        "nextCursor": "11",
+        "exceptionStr": "[]",
+        "dataStr": "[IPOList.DataIn(ipoID=1234, stkCode=9988, isin=KYG017191142, status=25), IPOList.DataIn(ipoID=1235, stkCode=9633, isin=CNE100004272, status=30), IPOList.DataIn(ipoID=1236, stkCode=9618, isin=KYG8208B1014, status=45), IPOList.DataIn(ipoID=1237, stkCode=6618, isin=KYG5074A1004, status=60), IPOList.DataIn(ipoID=1238, stkCode=1024, isin=KYG532631028, status=70)]",
+        "code": "0",
+        "totalSize": 5,
+        "data": null,
+        "id": 1635457757501956097,
+        "message": "",
+        "timestamp": null
+    }
+}
+// console.log(jsonData);
+// console.log(jsonData.data.dataStr.);
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('')//搜索框数据
+const links = ref<LinkItem[]>([])
+//搜索框组件自带js
+const querySearch = (queryString: string, cb: (arg0: { value: string; link: string; }[]) => void) => {
+    // console.log('search', queryString, value, link, cb)
+    const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value
+    // call callback function to return suggestion objects
+    const result11 = cb(results)
+}
+const createFilter = (queryString: string) => {
+    return (restaurant: { value: string; }) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+//测试12313123
+//搜索提示框信息
+const loadAll = () => {
+    return [
+        { value: '北京', link: 'https://github.com/babel/babel' },
+        { value: '淮北', link: 'https://github.com/babel/babel' },
+    ]
+}
+
+
+const handleIconClick = (ev: Event) => {
+    // console.log(ev)
+
+}
+
+onMounted(() => {
+    links.value = loadAll()
+
+})//自动搜索框自带js结束
+
+const calendar = ref()
+const selectDate = (val: string) => {
+    console.log(val)
+    calendar.value.selectDate(val)
+}//日历自带js结束
+
+//通过ref获取子组件实例，语言转换功能js
+const lang = ref()
+const SearchCupDom = ref()
+const handleShowLang = (e: any) => {
+    e.stopPropagation()
+    SearchCupDom.value.showLang = false;
+    lang.value.showLang = !lang.value.showLang
+}
+const handleShowCup = (e: any) => {
+    e.stopPropagation()
+    lang.value.showLang = false;
+    SearchCupDom.value.showLang = !SearchCupDom.value.showLang
+}
+//路由传参
+const handleclick = (item: any) => {
+    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('itemData', JSON.stringify(item))
+    router.push({
+        name: 'Xdashboard',
+        params: { data: JSON.stringify(item) }
+    },
+    )
+
+}
+
+
+onMounted(() => {
+    document.documentElement.onclick = function () {
+
+        if (SearchCupDom.value.showLang) {
+            SearchCupDom.value.showLang = false
+        }
+        if (lang.value.showLang) {
+            lang.value.showLang = false
+        }
+    }
+})
+onUnmounted(() => {
+    document.documentElement.onclick = null
+})
+
+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]
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+// @import '../../styles';
+// .el-calendar{
+//     font-family: "Calibri"
+// }
+.login2{
+    background-image: url("@/assets/1x/beijingtu.png");
+     background-repeat: no-repeat;
+     background-size: cover;
+
+}
+.box {
+    display: flex;
+    justify-content: space-between;
+    // background-image: url("@/assets/1x/beijingtu.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+    //height: 100%;
+    // font-family: "Calibri";
+    // width: 100%;
+    // background-color: gray;
+}
+
+.left {
+
+    width: 70%;
+
+    // height: 100vh;
+    // float: left;
+    // background-color: red;
+    @media screen and (max-width: 768px) {
+        width: 100vw;
+
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        // padding-left: 35px;
+        height: 80px;
+
+        @media screen and (max-width: 768px) {
+            height: 60rem;
+            //    background-color: red;
+        }
+
+        .menuicon {
+            display: none;
+
+            @media screen and (max-width: 768px) {
+                display: block;
+                margin-left: 5rem;
+
+            }
+        }
+
+        .menu {
+            @media screen and (max-width: 768px) {
+                img {
+                    width: 25rem;
+                    height: 20rem;
+
+                }
+
+            }
+        }
+
+        .inline-input w-50 {
+            width: 200px;
+            height: 50px;
+
+            @media screen and (max-width: 768px) {
+                display: none;
+
+                :deep(.imgSearch123) {
+                    width: 10rem;
+                    height: 10rem;
+                }
+            }
+
+
+        }
+
+        .my-autocomplete li {
+            line-height: normal;
+            padding: 7px;
+        }
+
+        .my-autocomplete li .name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .my-autocomplete li .addr {
+            font-size: 12px;
+            color: #b4b4b4;
+        }
+
+        .my-autocomplete li .highlighted .addr {
+            color: #ddd;
+        }
+
+        // .example-showcase .el-dropdown-link {
+        //     cursor: pointer;
+        //     color: var(--el-color-primary);
+        //     display: flex;
+        //     align-items: center;
+        // }
+        .dropdown {
+            position: relative;
+
+            .dropdown-menu {
+                width: 80px;
+                height: 700px;
+                position: absolute;
+                background-color: #ffffff;
+                border: 1px solid black;
+                z-index: 1;
+                max-height: 200px;
+
+            }
+
+        }
+
+        .dropdown1 {
+            position: relative;
+
+
+            @media screen and (max-width: 768px) {
+                display: none;
+            }
+
+            .alert {
+                position: absolute;
+                top: 70px;
+                left: -60px;
+            }
+
+            .searchCup {
+                position: absolute;
+                top: 70px;
+                left: -50px;
+            }
+        }
+
+        .first {
+            width: 32px;
+            height: 35px;
+            margin-top: 25px;
+            margin-left: 25px;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+
+            @media screen and (max-width: 768px) {
+                width: 24rem;
+                height: 28rem;
+                margin-top: 6rem;
+                margin-left: 10rem;
+            }
+        }
+
+        .second {
+            width: 32px;
+            height: 36px;
+            margin-top: 25px;
+            margin-left: 5px;
+            margin-right: 10px;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+    }
+}
+
+.bigger {
+    // margin-top: 40px;
+    display: flex;
+    flex-wrap: wrap;
+
+    // margin-left: 120px;
+    // width: 1250px;
+    // background-color: pink;
+    @media screen and (max-width: 768px) {
+        width: 100vw;
+        justify-content: center;
+    }
+
+}
+
+.right {
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
+
+    box-sizing: border-box;
+    // width: 900px;
+    // height: 100vh;
+    height: 100%;
+    padding-bottom: 80px;
+    background-color: #1f4055;
+    padding-left: 40px;
+    padding-right: 40px;
+    z-index: 1;
+    // float: right;
+
+    .right-top {
+        display: flex;
+        // margin-left: 40px;
+        margin-top: 20px;
+
+        .top-title {
+            text-align: center;
+            display: inline-block;
+            font-size: 38px;
+            color: #ffffff;
+            margin-left: 10px;
+        }
+    }
+
+    .right-bottom {
+        width: 420px;
+        background-color: #ffffff;
+        height: 400px;
+        margin-top: 40px;
+        // margin-left: 20px;
+
+        .month {
+            font-size: 28px;
+            color: #000000;
+            font-weight: bold;
+        }
+
+    }
+
+    .right-bottom1 {
+        width: 420px;
+        background-color: #ffffff;
+        height: 500px;
+        margin-top: 150px;
+        // margin-left: 20px;
+        // text-align: center;
+        // line-height: 500px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .right-bottom-title1 {
+
+            color: #1f4055;
+            font-size: 20px;
+            align-items: center;
+        }
+
+        li {
+            color: #000000
+        }
+    }
+
+}
+
+:deep(.el-button--small) {
+    border: none
+}
+
+:deep(.el-calendar__body) {
+    background-color: #e8ebee;
+
+}
+
+:deep(.el-calendar) {
+    width: 420px;
+    font-family: "Calibri"
+}
+
+:deep(.el-input) {
+    width: 750px;
+
+    @media screen and (max-width: 768px) {
+        width: fit-content;
+        height: fit-content;
+        // background-color: red;
+        margin-left: 10rem;
+        padding: 0;
+
+        // display: flex;
+    }
+
+}
+
+:deep(.header .el-input__wrapper) {
+    @media screen and (max-width: 768px) {
+        // margin-left: 13vw;
+        // height: 5vh;
+        // background-color: #000000;
+    }
+
+}
+
+:deep(.el-calendar-table td) {
+    border: none;
+    text-align: center;
+}
+
+:deep(.el-calendar .el-calendar-table .el-calendar-day) {
+    padding: 0px;
+    text-align: center;
+    line-height: 33px;
+    font: 13px 'Poppins-Regular';
+    background-color: rgb(255, 255, 255);
+    height: 33px;
+    border: none;
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // font-family: "Calibri"
+}
+
+:deep(.el-calendar-table thead) {
+    margin-top: 20px;
+    font-size: 16px;
+    font-weight: bold;
+    background-color: rgb(255, 255, 255);
+    border: none;
+    font-family: "Calibri"
+}
+
+:deep(.el-calendar-table td.is-selected) {
+    background-color: #e8ebee;
+}
+
+:deep(.el-calendar-table td.is-selected .el-calendar-day) {
+    background-color: #e36466;
+}
+
+:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
+    color: black;
+}
+
+:deep(.el-calendar-table td.is-today .el-calendar-day) {
+    color: black;
+    background-color: #e36466;
+}
+
+:deep(.is-selected) {
+    color: red;
+}
+</style>
+<style>
+.header .el-input__wrapper {
+    margin-top: 20px;
+    margin-left: 20px;
+    padding-left: 50px;
+    width: 50vw;
+    height: 50px;
+    border-radius: 25px;
+    font-size: 25px;
+    border: none;
+    outline: none;
+
+}
+
+.el-input__prefix-inner {
+    transform: translateX(-35px);
+}
+
+@media screen and (max-width: 768px) {
+    .header .el-input__wrapper {
+        margin-top: 0;
+        margin-left: 0;
+        padding-left: 50rem;
+        width: 61vw;
+        height: 30rem;
+        border-radius: 25rem;
+        font-size: 16rem;
+        border: none;
+        outline: none;
+
+    }
+
+
+    .el-input__inner {
+        margin: -35rem;
+        padding: 0;
+    }
+
+    .imgSearch123 {
+        width: 15rem;
+        height: 15rem;
+        transform: translateX(-7rem);
+    }
+}
+</style>

src/views/login/modelComponents/Drawer.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="wrap">
+        <div class="imgWrap">
+            <img src="@/assets/1x/1x/source8.png" alt="menu" >
+        </div>
+        <div class="nav">
+            <li :class="state == 1 && 'active'" @click="setState(1)" >
+                <img src="@/assets/1x/source10.png" alt="menu">
+                <span>Home</span>
+            </li>
+            <li :class="state == 2 && 'active'" @click="setState(2)">
+                <img src="@/assets/1x/source5.png" alt="menu">
+                <span>Dashboard</span>
+            </li>
+            <li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
+                <div class="ipoWrap">
+                    <div>
+                        <img src="@/assets/1x/source2.png" alt="menu">
+                        <span>IPO Reference Data</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>
+
+
+            </li>
+            <li :class="state == 4 && 'active'" @click="setState(4)">
+                <img src="@/assets/1x/source6.png" alt="menu">
+                <span>IPO Calendar</span>
+            </li>
+            <li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
+                <div class="ipoWrap">
+                    <div>
+                        <img src="@/assets/1x/1x/source6.png" alt="menu">
+                        <span>Languages</span>
+                    </div>
+                    <div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
+                        <img src="@/assets/1x/source11.png" alt="">
+                    </div>
+                </div>
+                <div class="lang" v-if="state == 5">
+            <li>English</li>
+            <li>简体中文</li>
+            <li>繁體中文</li>
+        </div>
+        </li>
+
+    </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "drawer",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+const state = ref(1)
+// const drawer = ref(true)
+const setState = (number: number) => {
+    state.value = number;
+}
+// const openDrawer = () => {
+//     drawer.value = false;
+// }
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+    width: 80vw;
+    transform: translateX(-20rem);
+
+    .imgWrap {
+        margin-top: 30rem;
+        width: 25rem;
+        height: 20rem;
+        margin-left: 15rem;
+
+
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .nav {
+        height: fit-content;
+        margin-top: 20rem;
+        width: 100%;
+
+        >li {
+            display: flex;
+            align-items: center;
+            justify-self: center;
+            min-height: 50rem;
+            padding-left: 15rem;
+            margin-top: 10rem;
+            background-color: #B4C0C7;
+
+            &.active {
+                background-color: #fff;
+            }
+
+            img {
+                width: 22rem;
+                height: 22rem;
+            }
+
+            span {
+                margin-left: 25rem;
+                font-size: 20rem;
+                font-weight: 700;
+                color: #1C3F56;
+            }
+        }
+
+        .IPO {
+            flex-direction: column;
+            justify-content: center;
+            height: fit-content;
+
+            .lang {
+                margin-left: -90rem;
+                color: #1C3F56;
+                font-size: 18rem;
+
+                >li {
+                    line-height: 24rem;
+                }
+            }
+
+            .report {
+                margin-left: -120rem;
+
+                span {
+                    margin-right: 10rem;
+                }
+            }
+
+            .ipoWrap {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+
+                .arrow {
+                    width: 12rem;
+                    height: 19rem;
+                    margin-right: 14rem;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+
+
+            span {
+                display: inline-block;
+                transform: translateY(-3rem);
+            }
+
+             
+        }
+    }
+}
+</style>

src/views/searchdash/index.vue

@@ -0,0 +1,151 @@
+<template>
+ <div class="login3">
+    <div class="box w">
+        <div class="bigger">
+        <Item v-for="(item, index) in logos" :data="item" :key="index" @click="handleclick(item)"></Item>
+    </div>
+    </div>
+ </div>
+</template>
+
+<script lang="ts">
+export default {
+ name: "Xsearchdash",
+};
+</script>
+
+<script lang="ts" setup>
+import Item from '@/views/login/components/Main.vue';
+import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
+import { onMounted,ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { getCurrentInstance } from 'vue'
+const { proxy } = (getCurrentInstance() as any)
+const router = useRouter()
+interface objType {
+    title: string,
+    number: string,
+    HKD: string,
+    price: string,
+    time: string,
+    trading: string
+
+}
+const logos = ref<objType[]>([
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 148.000",
+        price: "final offer Price",
+        time: "2023-03-31 09:00",
+        trading: "Commencement of trading date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    }
+])
+const getHomeIpoList = async () => {
+    async function demo() {
+        return new Promise(async (resolve, reject) => {
+
+            const res = await getHomeIpo(1)
+            // const res= await getDataFromId('home');
+             console.log('@@$',res);
+            // .data
+            const data = (res as any).data.map((item: any) => {
+                let { stkCode, dateTime, status, ipoID,companyEngShort,companyChiShort,priceFinal,logoLink,priceMin,priceMax,listingDate,pricingDate } = item;      
+                return {
+                    logolinks: logoLink,
+                    title: companyEngShort+ ";" +companyChiShort,
+                    status: status,
+                    number: stkCode,
+                    HKD: priceFinal?priceFinal:priceMinMax(),
+                    time:listingDate?listingDate:pricingDate,
+                    ipoID: ipoID,
+                    price:priceFinal,
+                    listingDate:listingDate
+                }
+                function priceMinMax(){
+                    if(priceMin&&priceMax){
+                        return `${priceMin}-${priceMax}`
+                    }else if(priceMin){
+                        return `${priceMin}-`
+                    }else if(priceMax){
+                        return ` -${priceMax}`
+                    }else{
+                        return " - "
+                    }
+                }
+            })
+            resolve(data)    
+        }
+        )
+    }
+    const result = await demo();
+    (result as objType[]).sort((a: any, b: any) => {
+        const preTime = new Date(a.time).getTime();
+        const nextTime = new Date(b.time).getTime();
+        if (preTime == nextTime) {
+            return Number(a.number) - Number(b.number);
+        } else {
+            return preTime - nextTime;
+        }
+    })
+    logos.value = result as objType[]
+}
+const handleclick = (item:any)=>{
+    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('itemData', JSON.stringify(item))
+    proxy.$router.push({
+        name: 'Xdashboard',
+        params: { data: JSON.stringify(item) }
+    },
+    )
+}
+onMounted(
+()=>{
+        getHomeIpoList();
+}
+)
+</script>
+
+<style scoped lang="scss" >
+.login3 {
+    background-image: url("@/assets/1x/beijingtu.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.bigger{
+    display: flex;
+    flex-wrap: wrap;
+}
+</style>

src/views/searchipo/index.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="login3">
+       <div class="box w">
+           <div class="bigger">
+           <Item v-for="(item, index) in logos" :data="item" :key="index" @click="handleclick(item)"></Item>
+       </div>
+       </div>
+    </div>
+   </template>
+   
+   <script lang="ts">
+   export default {
+    name: "Xsearchdash",
+   };
+   </script>
+   
+   <script lang="ts" setup>
+   import Item from '@/views/login/components/Main.vue';
+   import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
+   import { onMounted,ref } from 'vue';
+   import { useRouter } from 'vue-router';
+   import { getCurrentInstance } from 'vue'
+   const { proxy } = (getCurrentInstance() as any)
+   const router = useRouter()
+   interface objType {
+       title: string,
+       number: string,
+       HKD: string,
+       price: string,
+       time: string,
+       trading: string
+   
+   }
+   const logos = ref<objType[]>([
+       {
+           title: "bestCompany",
+           number: "09985",
+           HKD: "HKD 148.000",
+           price: "final offer Price",
+           time: "2023-03-31 09:00",
+           trading: "Commencement of trading date"
+       },
+       {
+           title: "bestCompany",
+           number: "09985",
+           HKD: "HKD 30.000-40.000",
+           price: "offer Price Range",
+           time: "2022-12-01 12:00:00",
+           trading: "Expected Price Determination Date"
+       },
+       {
+           title: "bestCompany",
+           number: "09985",
+           HKD: "HKD 30.000-40.000",
+           price: "offer Price Range",
+           time: "2022-12-01 12:00:00",
+           trading: "Expected Price Determination Date"
+       },
+       {
+           title: "bestCompany",
+           number: "09985",
+           HKD: "HKD 30.000-40.000",
+           price: "offer Price Range",
+           time: "2022-12-01 12:00:00",
+           trading: "Expected Price Determination Date"
+       },
+       {
+           title: "bestCompany",
+           number: "09985",
+           HKD: "HKD 30.000-40.000",
+           price: "offer Price Range",
+           time: "2022-12-01 12:00:00",
+           trading: "Expected Price Determination Date"
+       }
+   ])
+   const getHomeIpoList = async () => {
+       async function demo() {
+           return new Promise(async (resolve, reject) => {
+   
+               const res = await getHomeIpo(1)
+               // const res= await getDataFromId('home');
+                console.log('@@$',res);
+               // .data
+               const data = (res as any).data.map((item: any) => {
+                   let { stkCode, dateTime, status, ipoID,companyEngShort,companyChiShort,priceFinal,logoLink,priceMin,priceMax,listingDate,pricingDate } = item;      
+                   return {
+                       logolinks: logoLink,
+                       title: companyEngShort+ ";" +companyChiShort,
+                       status: status,
+                       number: stkCode,
+                       HKD: priceFinal?priceFinal:priceMinMax(),
+                       time:listingDate?listingDate:pricingDate,
+                       ipoID: ipoID,
+                       price:priceFinal,
+                       listingDate:listingDate
+                   }
+                   function priceMinMax(){
+                       if(priceMin&&priceMax){
+                           return `${priceMin}-${priceMax}`
+                       }else if(priceMin){
+                           return `${priceMin}-`
+                       }else if(priceMax){
+                           return ` -${priceMax}`
+                       }else{
+                           return " - "
+                       }
+                   }
+               })
+               resolve(data)    
+           }
+           )
+       }
+       const result = await demo();
+       (result as objType[]).sort((a: any, b: any) => {
+           const preTime = new Date(a.time).getTime();
+           const nextTime = new Date(b.time).getTime();
+           if (preTime == nextTime) {
+               return Number(a.number) - Number(b.number);
+           } else {
+               return preTime - nextTime;
+           }
+       })
+       logos.value = result as objType[]
+   }
+   const handleclick = (item:any)=>{
+       localStorage.setItem('ipoID', item.number)
+       localStorage.setItem('itemData', JSON.stringify(item))
+       proxy.$router.push({
+           name: 'XIPO',
+           params: { data: JSON.stringify(item) }
+       },
+       )
+   }
+   onMounted(
+   ()=>{
+           getHomeIpoList();
+   }
+   )
+   </script>
+   
+   <style scoped lang="scss" >
+   .login3 {
+       background-image: url("@/assets/1x/beijingtu.png");
+       background-repeat: no-repeat;
+       background-size: cover;
+   }
+   .bigger{
+       display: flex;
+       flex-wrap: wrap;
+   }
+   </style>

src/viewsModel/Home/components/Event.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="wrapEvent">
+        <div class="header">
+            <div class="c">
+
+            </div>
+            <div class="h">
+                <div class="font">
+                    <span :icon="Bell"></span>
+                </div>
+                <div class="headertitle">
+                    新上市
+                </div>
+            </div>
+
+        </div>
+        <div class="content">
+            <li v-for="(item, index) in data.data" :key="index">
+                <span>{{ item.listPlatform1 }}</span>
+                <span>{{ item.logo }}</span>
+                <span>{{ store.$state.locale == 1 ? item.name.split(";")[0] : item.name.split(";")[1] }} </span>
+                <span class="number">({{ item.number }})</span>
+            </li>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XEvent",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, defineProps, onUpdated } from "vue";
+import {
+    Bell
+} from '@element-plus/icons-vue'
+import { ipoStore } from "@/stores/ipo"
+interface obj {
+    logo:string,
+    listPlatform1:string,
+    name: string,
+    number: string | number
+}
+const store = ipoStore();
+const data = defineProps<{ data: obj[] }>()
+
+</script>
+
+<style lang="scss" scoped>
+.wrapEvent {
+    // margin-top: 20px;
+    padding-left: 0px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    border-top: 6px solid #D3DDE4;
+    border-right: 6px solid #D3DDE4;
+    border-left: 3px solid #D3DDE4;
+    border-bottom: 2px solid #D3DDE4;
+    box-sizing: border-box;
+
+    .header {
+        margin-top: 4px;
+        position: relative;
+        // background-color: red;
+        width: 100%;
+        height: 45px;
+
+        .c {
+            width: 30px;
+            height: 35px;
+            background-color: #DA8B2B;
+            transform: rotateX(26deg) rotateY(108deg);
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
+
+        .h {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            font-size: 16px;
+            width: 80px;
+            height: 35px;
+            background-color: #F3B72B;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .font {
+                color: #fff;
+                padding-top: 1.5px;
+            }
+        }
+
+    }
+
+    // /取消滚动条样式
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    .content {
+        margin-left: 22px;
+        border-left: 3px solid #EEEFF1;
+        height: 100%;
+        padding-left: 25px;
+        overflow: scroll;
+
+
+
+        li {
+            line-height: 50px;
+            color: #888F95;
+            border-bottom: 2px solid #EDEDED;
+
+            .number {
+                color: #9FA4A7;
+                font-weight: 450;
+            }
+        }
+    }
+
+}
+</style>

src/viewsModel/Home/components/Lang.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="wrap1" v-if="showLang">
+        <li @click="handleLang1">English</li>
+        <li @click="handleLang2">繁體中文</li>
+        <li @click="handleLang3">简体中文</li>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XLang",
+};
+</script>
+
+<script lang="ts" setup>
+
+import { ref, defineExpose } from 'vue';
+import { getCurrentInstance } from 'vue'
+import { ipoStore } from "@/stores/ipo"
+const store = ipoStore()
+const { proxy } = (getCurrentInstance() as any)
+const showLang = ref(false)
+const handleLang1 = () => {
+    if (proxy.$i18n.locale = 'en') {
+        proxy.$i18n.locale = 'en'
+    }
+    store.setLocale(1)
+}
+const handleLang2 = () => {
+    if (proxy.$i18n.locale = 'zhCt') {
+        proxy.$i18n.locale = 'zhCt'
+
+
+    }
+    store.setLocale(2)
+}
+const handleLang3 = () => {
+    if (proxy.$i18n.locale = 'zhCn') {
+        proxy.$i18n.locale = 'zhCn'
+    }
+    store.setLocale(3)
+}
+defineExpose({
+    showLang
+})
+
+</script>
+
+<style lang="scss" scoped>
+.wrap1 {
+    width: 140px;
+    // height: 150px;
+    background-color: #fff;
+    border: 1px solid #A1A1A1;
+    border-radius: 8px;
+    color: #20435B;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    position: relative;
+    z-index: 1;
+
+    li {
+        text-align: center;
+        line-height: 50px;
+    }
+
+    li:hover {
+        color: blue;
+        cursor: pointer;
+    }
+}
+</style>

src/viewsModel/Home/components/Main.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="bigbox">
+        <div class="title">
+            <img :src="props.data.logolinks" />
+        </div>
+        <div class="list">
+            <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">
+                        <ArrowDown />
+                    </el-icon>
+                </div>
+                <h4>{{ props.data.number }}</h4>
+                <h5>{{ code22 }}</h5>
+                <h4>HKD {{ props.data.HKD }}</h4>
+                <h6>{{ $t(i18n.global.t('home.finalofferprice')) }}</h6>
+                <h5>{{ props.data.time }}</h5>
+                <h6>{{ $t(i18n.global.t('home.CommencementofTradeDate')) }}</h6>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: 'XMain',
+};
+</script>
+<script lang="ts" setup>
+import { size } from 'lodash';
+import { ref, onMounted, onUpdated } from 'vue'
+import { ipoStore } from "@/stores/ipo"
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+const { proxy } = (getCurrentInstance() as any)
+const store = ipoStore();
+const currentDate = ref(new Date())
+const props = defineProps({
+    data: {
+        type: Object,
+        default: function () {
+            return {
+                HKD: "",
+                number: 0,
+                price: "",
+                time: "",
+                title: "",
+                trading: "",
+                logolinks: "",
+                status: 0
+            }
+        }
+    }
+})
+
+const code22 = ref('')
+onUpdated(() => {
+    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'),
+    }
+    // console.log('&&&&', props.data.status)
+    const stron = props.data.status
+    if (isValidKey(stron, obj)) {
+        code22.value = obj[stron];
+        //   console.log('kkkk',stron,obj[stron])
+    }
+    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
+    function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+
+})
+
+
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.bigbox {
+
+    width: 270px;
+    height: 360px;
+    margin-top: 30px;
+    margin-left: 20px;
+    background-color: #e7efec;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid #DDE2E6;
+    cursor: pointer;
+
+    .title {
+        background-color: #fff;
+        height: 120px;
+        line-height: 120px;
+        font-size: 40px;
+        color: #fff;
+        overflow: hidden;
+        position: relative;
+
+        img {
+            max-height: 100%;
+            max-width: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .list {
+        height: 150px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+
+        .list-content {
+            margin-top: 10px;
+            width: 230px;
+            height: 100%;
+
+            h4 {
+                font-size: 20px;
+                color: #2a5579;
+                margin-bottom: 8px;
+
+            }
+
+            h5 {
+                font-size: 16px;
+                color: #2a5579;
+                margin-bottom: 8px;
+            }
+
+            h6 {
+                font-size: 12px;
+                color: #2a5579;
+                margin-bottom: 8px;
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+
+
+            }
+        }
+    }
+}
+
+.bigbox:hover {
+    //   background-color: red;
+    box-shadow: 10px 15px 10px #9A9A9A;
+}
+</style>

src/viewsModel/Home/index.vue

@@ -0,0 +1,811 @@
+<template>
+    <div class="box w">
+        <div class="left">
+            <div class="header">
+                <!-- <input class="search" /> -->
+                <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
+                    class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect" placeholder="Please Input">
+                    <template #prefix>
+                        <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
+                    </template>
+                </el-autocomplete>
+
+                <div class="dropdown">
+                    <img src="@/assets/1x/source4.png" class="first ">
+                </div>
+                <div class="dropdown1">
+
+                    <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
+                    <Lang class="alert" ref="lang" />
+
+                </div>
+
+            </div>
+            <div class="bigger">
+                <Main v-for="(item, index) in logos" :data="item" :key="index" @click="handleclick(item)"></Main>
+            </div>
+
+        </div>
+        <div class="right">
+            <div class="right-top">
+                <img src="@/assets/1x/1x/source1.png" />
+                <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
+            </div>
+            <div class="right-bottom">
+
+                <el-calendar ref="calendar" v-model="dayValue">
+                    <template #header="{ date }">
+
+                        <el-button size="small" @click="selectDate('prev-month')">
+                            <img src="@/assets/1x/source11.png">
+                        </el-button>
+
+                        <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
+                        <span class="month">{{ showMounth(date) }}</span>
+
+                        <el-button size="small" @click="selectDate('next-month')">
+                            <img src="@/assets/1x/source12.png">
+                        </el-button>
+
+                    </template>
+                    <template #date-cell="{ data }">
+
+                    </template>
+                </el-calendar>
+            </div>
+            <div class="right-bottom1">
+                <!-- <div class="right-bottom-title1">No event</div> -->
+                <Event :data="Eventdata" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+ name: "mobilehome",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import Lang from "./components/Lang.vue";
+import Main from './components/Main.vue';
+import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
+import moment from "moment"
+import { useRouter } from 'vue-router';
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import Event from './components/Event.vue';
+import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
+import { getDataFromId } from "@/api/mock/home"
+import { ElMessage } from 'element-plus'
+const dayValue = ref(new Date())
+const { proxy } = (getCurrentInstance() as any)
+const handleSelect = () => {
+     console.log('@@@', state.value)
+    getSearchIpoList(state.value)
+}
+const router = useRouter()
+watch(dayValue, async (ne, ol) => {
+    const day = moment(ne).format("YYYY-MM-DD")
+    const result =await getEventData(day);
+    console.log(result);
+    setEventdata((result as any).data)
+})
+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: "力高健康生活有限公司",
+        number: 2380
+    }, {
+        listPlatform1:"主板",
+        logo:"-",
+        name: "力高健康生活有限公司",
+        number: 2381
+    }
+])
+const setEventdata = (EventD: any) => {
+    Eventdata.value = EventD.map((item: any) => {
+        const { stkCode,listPlatform,companyEngFull,companyChiFull } = item;
+         const listPlatform1 = ref('')
+        var obj={
+            1:proxy.$t('home.Mainboard'),
+            2:"GEM"
+        }
+         if (isValidKey(listPlatform, obj)) {
+            listPlatform1.value = obj[listPlatform]
+      }
+        function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+        return{
+            logo:'-',
+            listPlatform1:listPlatform1,
+            name:companyEngFull+";"+companyChiFull,
+            number:stkCode
+        }
+       
+    })
+}
+const getHomeIpoList = async () => {
+    async function demo() {
+        return new Promise(async (resolve, reject) => {
+            const res = await getHomeIpo(1)
+            const data = (res as any).data.map((item: any) => {
+                let { stkCode, dateTime, status, ipoID } = item;
+                return {
+                    logolinks: "logoLink",
+                    title: "bestCompany",
+                    status: status,
+                    number: stkCode,
+                    HKD: stkCode,
+                    price: proxy.$t('home.finalofferprice'),
+                    time: moment(dateTime).format("YYYY-MM-DD HH:mm:ss"),
+                    trading: proxy.$t('home.CommencementofTradeDate'),
+                    ipoID: ipoID
+                }
+
+            })
+            // console.log(data);
+            var stateNumber = 0;
+            for (var i = 0; i < data.length; i++) {
+                let ipoId = data[i].number;
+                //通过匿名函数自调用产生闭包 保存i
+                ((i: number) => {
+                    //根据ipoId请求companyEngFull
+                    getIpo(ipoId).then(res => {
+                        data[i].title = (res as any).data[0].companyEngShort + ";" + (res as any).data[0].companyChiShort;
+
+                        data[i].HKD = (res as any).data[0].priceFinal
+                        data[i].logolinks = (res as any).data[0].logoLink
+                        if ((res as any).data[0].priceFinal == null) {
+                            data[i].price = proxy.$t('home.offerpricerange')
+
+                            data[i].HKD = `${(res as any).data[0].priceMin}-${(res as any).data[0].priceMax}`
+                        }
+                        if ((res as any).data[0].listingDate !== null) {
+                            data[i].time = (res as any).data[0].listingDate
+                            data[i].trading = proxy.$t('home.CommencementofTradeDate')
+
+                        } else {
+                            data[i].time = (res as any).data[0].pricingDate
+                            data[i].trading = proxy.$t('home.ExpectedPriceDeterminationDate')
+
+                        }
+                        stateNumber++
+                        if (stateNumber == data.length) {
+                            resolve(data)
+                        }
+                    }).catch(error => {
+
+                    });
+                })(i)
+
+            }
+        }
+        )
+    }
+    const result = await demo();
+    (result as objType[]).sort((a: any, b: any) => {
+        const preTime = new Date(a.number).getTime();
+        const nextTime = new Date(b.number).getTime();
+        if (preTime == nextTime) {
+            return Number(a.number) - Number(b.number);
+        } else {
+            return preTime - nextTime;
+        }
+    })
+
+    logos.value = result as objType[]
+
+}
+onMounted(getHomeIpoList)
+const getSearchIpoList = async (keyword: string) => {
+    async function demo() {
+        return new Promise(async (resolve, reject) => {
+            try {
+
+                const res = await getSearchListing(keyword)
+                if (!(res as any).data.length) {
+                    ElMessage.warning('No relevant search data')
+                    throw ("222")
+                }
+                const data = (res as any).data.map((item: any) => {
+                    let { stkCode, dateTime, status, ipoID } = item;
+                    return {
+                        logolinks: "logoLink",
+                        title: "bestCompany",
+                        status: status,
+                        number: stkCode,
+                        HKD: stkCode,
+                        price: proxy.$t('home.finalofferprice'),
+                        time: moment(dateTime).format("YYYY-MM-DD HH:mm:ss"),
+                        trading: proxy.$t('home.CommencementofTradeDate'),
+                        ipoID: ipoID
+                    }
+
+                })
+                var stateNumber = 0;
+                for (var i = 0; i < data.length; i++) {
+                    let ipoId = data[i].number;
+                    //通过匿名函数自调用产生闭包 保存i
+                    ((i: number) => {
+                        //根据ipoId请求companyEngFull
+                        getIpo(ipoId).then(res => {
+                            data[i].title = (res as any).data[0].companyEngShort + ";" + (res as any).data[0].companyChiShort;
+
+                            data[i].HKD = (res as any).data[0].priceFinal
+                            data[i].logolinks = (res as any).data[0].logoLink
+                            if ((res as any).data[0].priceFinal == null) {
+                                data[i].price = proxy.$t('home.offerpricerange')
+
+                                data[i].HKD = `${(res as any).data[0].priceMin}-${(res as any).data[0].priceMax}`
+                            }
+                            if ((res as any).data[0].listingDate !== null) {
+                                data[i].time = (res as any).data[0].listingDate
+                                data[i].trading = proxy.$t('home.CommencementofTradeDate')
+
+                            } else {
+                                data[i].time = (res as any).data[0].pricingDate
+                                data[i].trading = proxy.$t('home.ExpectedPriceDeterminationDate')
+
+                            }
+                            stateNumber++
+                            if (stateNumber == data.length) {
+                                resolve(data)
+                            }
+                        }).catch(error => {
+
+                        });
+                    })(i)
+
+                }
+            } catch (error) {
+                reject()
+            }
+
+        }
+        )
+    }
+    const result = await demo();
+    (result as objType[]).sort((a: any, b: any) => {
+        const preTime = new Date(a.number).getTime();
+        const nextTime = new Date(b.number).getTime();
+        if (preTime == nextTime) {
+            return Number(a.number) - Number(b.number);
+        } else {
+            return preTime - nextTime;
+        }
+    })
+
+    logos.value = result as objType[]
+
+}
+//测试功能----------------------------------------------------------
+onMounted(async () => {
+    // const result=await getDataFromId("home");
+    // console.log('@@',result);
+    // 测试event
+    // const result = await getDataFromId(101);
+    // setEventdata(result);
+})
+interface objType {
+    title: string,
+    number: string,
+    HKD: string,
+    price: string,
+    time: string,
+    trading: string
+
+}
+const logos = ref<objType[]>([
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 148.000",
+        price: "final offer Price",
+        time: "2023-03-31 09:00",
+        trading: "Commencement of trading date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    },
+    {
+        title: "bestCompany",
+        number: "09985",
+        HKD: "HKD 30.000-40.000",
+        price: "offer Price Range",
+        time: "2022-12-01 12:00:00",
+        trading: "Expected Price Determination Date"
+    }
+])
+
+const jsonData = {
+    "code": null,
+    "msg": null,
+    "data": {
+        "exception": null,
+        "nextCursor": "11",
+        "exceptionStr": "[]",
+        "dataStr": "[IPOList.DataIn(ipoID=1234, stkCode=9988, isin=KYG017191142, status=25), IPOList.DataIn(ipoID=1235, stkCode=9633, isin=CNE100004272, status=30), IPOList.DataIn(ipoID=1236, stkCode=9618, isin=KYG8208B1014, status=45), IPOList.DataIn(ipoID=1237, stkCode=6618, isin=KYG5074A1004, status=60), IPOList.DataIn(ipoID=1238, stkCode=1024, isin=KYG532631028, status=70)]",
+        "code": "0",
+        "totalSize": 5,
+        "data": null,
+        "id": 1635457757501956097,
+        "message": "",
+        "timestamp": null
+    }
+}
+// console.log(jsonData);
+// console.log(jsonData.data.dataStr.);
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('')//搜索框数据
+const links = ref<LinkItem[]>([])
+//搜索框组件自带js
+const querySearch = (queryString: string, cb: (arg0: { value: string; link: string; }[]) => void) => {
+    // console.log('search', queryString, value, link, cb)
+    const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value
+    // call callback function to return suggestion objects
+    const result11 = cb(results)
+}
+const createFilter = (queryString: string) => {
+    return (restaurant: { value: string; }) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+//搜索提示框信息
+const loadAll = () => {
+    return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' },
+        { value: '北京', link: 'https://github.com/babel/babel' },
+        { value: '淮北', link: 'https://github.com/babel/babel' },
+    ]
+}
+// const handleSelect = (item: LinkItem) => {
+//     console.log(item)
+// }
+
+const handleIconClick = (ev: Event) => {
+    // console.log(ev)
+
+}
+
+onMounted(() => {
+    links.value = loadAll()
+
+})//自动搜索框自带js结束
+
+const calendar = ref()
+const selectDate = (val: string) => {
+    console.log(val)
+    calendar.value.selectDate(val)
+}//日历自带js结束
+
+//通过ref获取子组件实例，语言转换功能js
+const lang = ref()
+const handleShowLang = (e: any) => {
+    console.log(e)
+    e.stopPropagation()
+    lang.value.showLang = !lang.value.showLang
+}
+// const Arr = ref<string[]>([])
+// logos.value.forEach((item) => {
+//     Arr.value.push(item.number)
+// })
+// console.log(Arr.value);
+
+// const ipoId = Arr.value
+// console.log(ipoId);
+
+// console.log(logos.value);
+// const ipoId =logos.value.number 
+//路由传参
+const handleclick = (item: any) => {
+    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('itemData', JSON.stringify(item))
+    router.push({
+        name: 'Xdashboard',
+        params: { data: JSON.stringify(item) }
+    },
+    )
+
+}
+
+
+onMounted(() => {
+    document.documentElement.onclick = function () {
+        if (!lang.value.showLang) return
+        lang.value.showLang = false
+    }
+})
+
+
+
+onUnmounted(() => {
+    document.documentElement.onclick = null
+})
+
+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]
+    }
+}
+
+</script>
+
+<style lang="scss" scoped>
+// @import '../../styles';
+
+.box {
+    display: flex;
+    justify-content: space-between;
+    // background-image: url("@/assets/1x/beijingtu.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+    height: 100%;
+    // width: 100%;
+    // background-color: gray;
+}
+
+.left {
+     width: 70vw;
+    // width: 70%;
+    // height: 100vh;
+    // float: left;
+    // background-color: red;
+
+    .header {
+        display: flex;
+        align-items: center;
+        // padding-left: 35px;
+        height: 80px;
+
+        // .search {
+        //     margin-top: 20px;
+        //     margin-left: 20px;
+        //     padding-left: 50px;
+        //     width: 800px;
+        //     height: 50px;
+        //     border-radius: 25px;
+        //     font-size: 25px;
+        //     border: none;
+        //     outline: none;
+        //     background: url(@/assets/Search.png) #fff no-repeat 10px center/40px
+        // }
+        .inline-input w-50 {
+            width: 200px;
+            height: 50px;
+        }
+
+        .my-autocomplete li {
+            line-height: normal;
+            padding: 7px;
+        }
+
+        .my-autocomplete li .name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .my-autocomplete li .addr {
+            font-size: 12px;
+            color: #b4b4b4;
+        }
+
+        .my-autocomplete li .highlighted .addr {
+            color: #ddd;
+        }
+
+        // .example-showcase .el-dropdown-link {
+        //     cursor: pointer;
+        //     color: var(--el-color-primary);
+        //     display: flex;
+        //     align-items: center;
+        // }
+        .dropdown {
+            position: relative;
+
+            .dropdown-menu {
+                width: 80px;
+                height: 700px;
+                position: absolute;
+                background-color: #ffffff;
+                border: 1px solid black;
+                z-index: 1;
+                max-height: 200px;
+
+            }
+        }
+
+        .dropdown1 {
+            position: relative;
+
+
+            .alert {
+                position: absolute;
+                top: 70px;
+                left: -60px;
+            }
+        }
+
+        .first {
+            width: 32px;
+            height: 35px;
+            margin-top: 25px;
+            margin-left: 25px;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+
+        .second {
+            width: 32px;
+            height: 36px;
+            margin-top: 25px;
+            margin-left: 5px;
+            margin-right: 10px;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+    }
+}
+
+.bigger {
+    // margin-top: 40px;
+    display: flex;
+    flex-wrap: wrap;
+
+    // margin-left: 120px;
+    // width: 1250px;
+    // background-color: pink;
+    @media screen and (max-width: 768px) {}
+         transform: translateX(60rem);
+}
+
+.right {
+    display: none;
+    box-sizing: border-box;
+    // width: 900px;
+    // height: 100vh;
+    height: 100%;
+    padding-bottom: 80px;
+    background-color: #1f4055;
+    padding-left: 40px;
+    padding-right: 40px;
+    z-index: 1;
+    // float: right;
+
+    .right-top {
+        display: flex;
+        margin-left: 40px;
+        margin-top: 20px;
+
+        .top-title {
+            text-align: center;
+            display: inline-block;
+            font-size: 32px;
+            color: #ffffff;
+            margin-left: 10px;
+        }
+    }
+
+    .right-bottom {
+        width: 420px;
+        background-color: #ffffff;
+        height: 400px;
+        margin-top: 40px;
+        // margin-left: 20px;
+
+        .month {
+            font-size: 25px;
+            color: #000000;
+            font-weight: bold;
+        }
+
+    }
+
+    .right-bottom1 {
+        width: 420px;
+        background-color: #ffffff;
+        height: 500px;
+        margin-top: 150px;
+        // margin-left: 20px;
+        // text-align: center;
+        // line-height: 500px;
+        display: flex;
+        justify-content: center;
+
+        .right-bottom-title1 {
+
+            color: #1f4055;
+            font-size: 20px;
+            align-items: center;
+        }
+    }
+
+}
+
+:deep(.el-button--small) {
+    border: none
+}
+
+:deep(.el-calendar__body) {
+    background-color: #e8ebee;
+
+}
+
+:deep(.el-calendar) {
+    width: 420px;
+
+}
+
+:deep(.el-input) {
+    width: 750px;
+}
+
+:deep(.el-calendar-table td) {
+    border: none;
+    text-align: center;
+}
+
+:deep(.el-calendar .el-calendar-table .el-calendar-day) {
+    padding: 0px;
+    text-align: center;
+    line-height: 33px;
+    font: 13px 'Poppins-Regular';
+    background-color: rgb(255, 255, 255);
+    height: 33px;
+    border: none;
+    margin-top: 30px;
+
+}
+
+:deep(.el-calendar-table thead) {
+    margin-top: 20px;
+    font-size: 13px;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-weight: bold;
+    background-color: rgb(255, 255, 255);
+    border: none;
+}
+
+:deep(.el-calendar-table td.is-selected) {
+    background-color: #e8ebee;
+}
+
+:deep(.el-calendar-table td.is-selected .el-calendar-day) {
+    background-color: #e36466;
+}
+
+:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
+    color: black;
+}
+
+:deep(.el-calendar-table td.is-today .el-calendar-day) {
+    color: black;
+    background-color: #e36466;
+}
+
+:deep(.is-selected) {
+    color: red;
+}
+</style>
+<style>
+.header .el-input__wrapper {
+    margin-top: 20px;
+    margin-left: 20px;
+    padding-left: 50px;
+    width: 50vw;
+    height: 50px;
+    border-radius: 25px;
+    font-size: 25px;
+    border: none;
+    outline: none;
+
+}
+
+.el-input__prefix-inner {
+    transform: translateX(-35px);
+}
+</style>