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>
|
||||
Reference in New Issue
Block a user