iopProject
This commit is contained in:
zhuzhuxia233
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user