FINI
/
fini-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

最终版

This commit is contained in:
zzy 2023-04-28 14:33:16 +08:00
parent 00bb0d8346
commit d3f48625c8
20 changed files with 400 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/src/assets/logo111.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Vite App</title> <title>Website - FINI</title>
</head> </head>

BIN
src/assets/logo111.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 811 B

3
src/locales/en.ts
View File

@ -111,7 +111,8 @@ export default {
Byplacingonly:'By placing only', Byplacingonly:'By placing only',
Bypublicofferonly:'By public offer only', Bypublicofferonly:'By public offer only',
Byintroduction:'By introduction', Byintroduction:'By introduction',
TransferfromGEM:'Transfer from GEM' TransferfromGEM:'Transfer from GEM',
NominalCurrency:'Nominal Currency'
}, },
Offering:{ Offering:{
Offering:'Offering', Offering:'Offering',

5
src/locales/zh-cn.ts
View File

@ -111,7 +111,8 @@ export default {
Byplacingonly:'限于配售', Byplacingonly:'限于配售',
Bypublicofferonly:'限于公开发售', Bypublicofferonly:'限于公开发售',
Byintroduction:'以介绍形式上市', Byintroduction:'以介绍形式上市',
TransferfromGEM:'转由创业板' TransferfromGEM:'转由创业板',
NominalCurrency:'面值货币'
}, },
Offering:{ Offering:{
Offering:'招股', Offering:'招股',
@ -152,7 +153,7 @@ export default {
DealPublicOfferStartDate:'招股开始日期', DealPublicOfferStartDate:'招股开始日期',
PublicOfferEndDate:'招股截止日期', PublicOfferEndDate:'招股截止日期',
ExpectedPriceDeterminationDate:'预计定价日', ExpectedPriceDeterminationDate:'预计定价日',
AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配结果公布/###/寄发股票日期', AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配结果公布/股份过户/寄发股票日期',
SettlementInstructionsInputDate:'结算指示输入日期', SettlementInstructionsInputDate:'结算指示输入日期',
PredepositPlacingSharesDeliveryDate:'预存/配售股份交割日', PredepositPlacingSharesDeliveryDate:'预存/配售股份交割日',

5
src/locales/zh-ct.ts
View File

@ -111,7 +111,8 @@ export default {
Byplacingonly:'限於配售', Byplacingonly:'限於配售',
Bypublicofferonly:'限於公開發售', Bypublicofferonly:'限於公開發售',
Byintroduction:'以介紹形式上市', Byintroduction:'以介紹形式上市',
TransferfromGEM:'轉由創業板' TransferfromGEM:'轉由創業板',
NominalCurrency:'面值貨幣'
}, },
Offering:{ Offering:{
Offering:'招股', Offering:'招股',
@ -152,7 +153,7 @@ export default {
DealPublicOfferStartDate:'招股開始日期', DealPublicOfferStartDate:'招股開始日期',
PublicOfferEndDate:'招股截止日期', PublicOfferEndDate:'招股截止日期',
ExpectedPriceDeterminationDate:'預計定價日', ExpectedPriceDeterminationDate:'預計定價日',
AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配結果公佈/###/寄發股票日期', AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配結果公佈/股份過戶/寄發股票日期',
SettlementInstructionsInputDate:'結算指示輸入日期', SettlementInstructionsInputDate:'結算指示輸入日期',
PredepositPlacingSharesDeliveryDate:'預存/配售股份交割日', PredepositPlacingSharesDeliveryDate:'預存/配售股份交割日',

2
src/main.ts
View File

@ -28,7 +28,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component)
} }
app.config.warnHandler = (msg, instance, trace) => {} app.config.warnHandler = (msg, instance, trace) => {}
// app.config.errorHandler = (msg, instance, trace) => {}//错误捕获，不报给浏览器 app.config.errorHandler = (msg, instance, trace) => {}//错误捕获，不报给浏览器
app app
// .use(pinia) // .use(pinia)
.use(router) .use(router)

3
src/views/IPO/components/IpoHeader.vue
View File

@ -113,7 +113,8 @@ onUnmounted(() => {
.headerWrap { .headerWrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 50px;
width: 1000px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.left-1 { .left-1 {

174
src/views/IPO/index.vue
View File

@ -57,12 +57,12 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event) console.log(tab, event)
} }
const data = ref({ const data = ref({
title: "FINI TESTING COMP", title: "-",
number: 10000, number: 10000,
HKD: "HKD 148.000", HKD: "-",
price: "final offer Price", price: "-",
time: "2023-03-31 09:00", time: "-",
trading: "Commencement of trading date" trading: "-"
},) },)
const information = ref([ const information = ref([
{ {
@ -71,7 +71,7 @@ const information = ref([
}, },
{ {
name: proxy.$t('ipo.CompanyNameEnglishShort'), name: proxy.$t('ipo.CompanyNameEnglishShort'),
info: "FINI TESTING" info: "-"
}, },
{ {
name: proxy.$t('ipo.CompanyNameChineseFull'), name: proxy.$t('ipo.CompanyNameChineseFull'),
@ -83,43 +83,43 @@ const information = ref([
}, },
{ {
name: proxy.$t('ipo.STockCode'), name: proxy.$t('ipo.STockCode'),
info: "10000" info: "-"
}, },
{ {
name: proxy.$t('ipo.ISIN'), name: proxy.$t('ipo.ISIN'),
info: "!11" info: "-"
}, },
{ {
name: proxy.$t('ipo.PlaceofIncorporation'), name: proxy.$t('ipo.PlaceofIncorporation'),
info: "Hong Kong,China" info: "-"
}, },
{ {
name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'), name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'),
infos: ["FINI TESTING COMP", "8/F,Two Exchange Square", "8 Connaught Place,Central,Hong Kong", "-"] infos: ["-", "-", "-", "-"]
} }
]) ])
const TypeOfListing = ref([ const TypeOfListing = ref([
{ {
name: proxy.$t('ipo.TypeofListing.OfferingType'), name: proxy.$t('ipo.TypeofListing.OfferingType'),
info: "Global offer (placing and public offer)" info: "-"
}, },
{ {
name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'), name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'),
info: "Ordinary shares" info: "-"
}, },
{ {
name: proxy.$t('ipo.TypeofListing.NominalValueperShare'), name: proxy.$t('ipo.TypeofListing.NominalValueperShare'),
info: "150", info: "-",
name2: "Nominal Currency", name2: proxy.$t('ipo.TypeofListing.NominalCurrency'),
info2: "HKD" info2: "-"
}, },
{ {
name: proxy.$t('ipo.TypeofListing.ListingPlatform'), name: proxy.$t('ipo.TypeofListing.ListingPlatform'),
info: "Main board" info: "-"
}, },
{ {
name: proxy.$t('ipo.TypeofListing.ListingType'), name: proxy.$t('ipo.TypeofListing.ListingType'),
info: "Primary" info: "-"
}, },
// { // {
// name: proxy.$t('ipo.TypeofListing.ListingCategories'), // name: proxy.$t('ipo.TypeofListing.ListingCategories'),
@ -129,25 +129,25 @@ const TypeOfListing = ref([
const Offerings = ref([ const Offerings = ref([
{ {
name: proxy.$t('ipo.Offering.TradingCurrency'), name: proxy.$t('ipo.Offering.TradingCurrency'),
info: "Global offer (placing and public offer)" info: "-"
}, },
{ {
name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'), name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
info: "Ordinary shares" info: "-"
}, },
{ {
name: proxy.$t('ipo.Offering.OfferPriceRange'), name: proxy.$t('ipo.Offering.OfferPriceRange'),
info: "140.000 to 160.000", info: "-",
name2: proxy.$t('home.finalofferprice'), name2: proxy.$t('home.finalofferprice'),
info2: "148.000", info2: "-",
}, },
{ {
name: proxy.$t('ipo.Offering.TradingBoardLot'), name: proxy.$t('ipo.Offering.TradingBoardLot'),
info: "100" info: "-"
}, },
{ {
name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'), name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
info: "100" info: "-"
}, },
{ {
// name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'), // name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
@ -155,36 +155,36 @@ const Offerings = ref([
name: "", name: "",
info: "", info: "",
name2: proxy.$t('ipo.Offering.NumberofOfferShares'), name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
info2: "10,000,000", info2: "-",
table: { table: {
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" }, title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" },
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }], { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }],
lists: [ lists: [
{ {
number: '1', number: '-',
persent: '10%', persent: '-',
}, },
{ {
number: '15', number: '-',
persent: '30%', persent: '-',
}, { }, {
number: '50', number: '-',
persent: '40%', persent: '-',
}, { }, {
number: '100', number: '-',
persent: '50%', persent: '-',
}] }]
} }
}, },
{ {
name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'), name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
info: "1,000,000", info: "-",
name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'), name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
info2: "9,000,000" info2: "-"
}, },
{ {
name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'), name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
info: "5.00%" info: "-"
}, },
// {暂时不暂时的字段-------- // {暂时不暂时的字段--------
// name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'), // name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
@ -201,24 +201,24 @@ const Offerings = ref([
{ header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }], { header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
lists: [ lists: [
{ {
number: '100', number: '-',
persent: '16,161,35', persent: '-',
}, },
{ {
number: '200', number: '-',
persent: '32.322.72', persent: '-',
}, },
{ {
number: '300', number: '-',
persent: '16,161,35', persent: '-',
}, },
{ {
number: '400', number: '-',
persent: '16,161,35', persent: '-',
}, },
{ {
number: '500', number: '-',
persent: '16,161,35', persent: '-',
}] }]
} }
} }
@ -226,7 +226,7 @@ const Offerings = ref([
const Advisers = ref([ const Advisers = ref([
{ {
name: proxy.$t('ipo.advisers.DesignatedSponsor'), name: proxy.$t('ipo.advisers.DesignatedSponsor'),
info: "HKEX FINI SUPPORT", info: "-",
// info2: "IBD-TEAM01" // info2: "IBD-TEAM01"
}, },
{ {
@ -239,7 +239,7 @@ const Advisers = ref([
}, },
{ {
name: proxy.$t('ipo.advisers.HKLegalAdviser'), name: proxy.$t('ipo.advisers.HKLegalAdviser'),
info: "HKEX FINI SUPPORT 3", info: "-",
// info2: "LEG_TEAM05" // info2: "LEG_TEAM05"
}, },
{ {
@ -264,16 +264,16 @@ const Advisers = ref([
}, },
{ {
name: proxy.$t('ipo.advisers.HKShareRegistrar'), name: proxy.$t('ipo.advisers.HKShareRegistrar'),
info: "HKEX FINI SUPPORT 3", info: "-",
}, },
]) ])
const Timetable = ref([ const Timetable = ref([
{ {
name: proxy.$t('ipo.Timetable.CommencementofTradingDate'), name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
info: "2023-03-31", info: "-",
name2: proxy.$t('ipo.Timetable.Time'), name2: proxy.$t('ipo.Timetable.Time'),
info2: "09:00", info2: "-",
table: { table: {
title: [ title: [
{ header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" }, { header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
@ -283,32 +283,32 @@ const Timetable = ref([
lists: [ lists: [
{ {
des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'), des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
number: '2023-02-22', number: '-',
persent: '15:35' persent: '-'
}, },
{ {
des: proxy.$t('ipo.Timetable.PublicOfferEndDate'), des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
number: '2023-02-22', number: '-',
persent: '12:00' persent: '-'
}, },
{ {
des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'), des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
number: '2023-02-22', number: '-',
persent: '', persent: '',
}, },
{ {
des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'), des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'),
number: '2023-02-22', number: '-',
persent: '', persent: '',
}, },
{ {
des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'), des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
number: '2023-02-22', number: '-',
persent: '', persent: '',
}, },
{ {
des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'), des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
number: '2023-02-22', number: '-',
persent: '', persent: '',
} }
] ]
@ -349,15 +349,15 @@ onMounted(
// text(); // text();
} }
) )
async function text() { // async function text() {
const res = await getDataFromId(1); // const res = await getDataFromId(1);
setInformation((res as any)[0]) // setInformation((res as any)[0])
setTypeofListing((res as any)[0]) // setTypeofListing((res as any)[0])
setOfferings((res as any)[0]) // setOfferings((res as any)[0])
setAdvisers((res as any)[0]) // setAdvisers((res as any)[0])
setTransaction((res as any)[0]) // setTransaction((res as any)[0])
setTimeTable((res as any)[0]) // setTimeTable((res as any)[0])
} // }
const getreferencedata = async () => { const getreferencedata = async () => {
const ipoID = localStorage.getItem('ipoID') const ipoID = localStorage.getItem('ipoID')
const res = await getIpo(ipoID as string) const res = await getIpo(ipoID as string)
@ -428,11 +428,8 @@ function setOfferings(mockRes: any) {
{ info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback }, { info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
{ info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), }, { info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
{ info: has_data(upsizeOption?.toFixed(2), "%") }, { info: has_data(upsizeOption?.toFixed(2), "%") },
// { info: "-" },
// { info: "-" },
{ table: denomTable } { table: denomTable }
] ]
// info2s: [has_data(ipoShares) , has_data(poSharesFinal) , has_data(ioOfferSharesFinal)],
Offerings.value = Offerings.value.map((item, index) => { Offerings.value = Offerings.value.map((item, index) => {
const name = item.name; const name = item.name;
const info = dataObj[index].info; const info = dataObj[index].info;
@ -448,13 +445,14 @@ function setOfferings(mockRes: any) {
filterObj.table = { title: item.table?.title, lists: [] } filterObj.table = { title: item.table?.title, lists: [] }
filterObj.table.lists = dataObj[index].table.map((element: any) => { filterObj.table.lists = dataObj[index].table.map((element: any) => {
if (index == 8) { if (index == 8) {
//加逗号的函数
function formatNumber(num: number | string) { function formatNumber(num: number | string) {
return num.toString().replace(/\d+/, function (n: string) { return num.toString().replace(/\d+/, function (n: string) {
return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
}) })
} }
const { shares: number, value: persent } = element; const { shares: number, value: persent } = element;
return { number: formatNumber(number), persent: formatNumber(persent) } return { number:formatNumber(number) , persent:formatNumber(persent?.toFixed(2)) }
} else { } else {
const { threshold: number, allocation: persent } = element; const { threshold: number, allocation: persent } = element;
@ -465,11 +463,6 @@ function setOfferings(mockRes: any) {
} }
return filterObj 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) => { const keepTwoDecimalStr = (num: number) => {
if (num) { if (num) {
@ -590,9 +583,6 @@ function setTypeofListing(mockRes: any) {
): key is keyof typeof object { ): key is keyof typeof object {
return key in object; return key in object;
} }
//没找到的字段ListingType listingCategories
// const ListingType = "-";
// const listingCategories = "-";
const arr = [ const arr = [
{ info: offerType }, { info: offerType },
{ info: listSecurities }, { info: listSecurities },
@ -785,13 +775,16 @@ async function setDownLoad() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .login2 { .login2 {
// background-image: url("@/assets/1x/beijingtu.png"); background-image: url("@/assets/1x/beijingtu.png");
// background-repeat: no-repeat; background-repeat: no-repeat;
// background-size: cover; background-size: cover;
// height: 1100px; width: 1700px;
// // font-family: "Calibri"; // font-family: "Calibri";
// } @media screen and (max-width: 768px){
width: auto;
}
}
//取消滚动条样式 //取消滚动条样式
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -836,12 +829,13 @@ async function setDownLoad() {
.content { .content {
width: 100%; width: 100%;
//height: 550px; //height: 550px;
height: 800px; height: 660px;
margin-top: 25px; margin-top: 25px;
overflow: scroll; overflow: scroll;
// @media screen and (max-width: 768px){
// width: 100vw; @media screen and (max-width: 768px) {
// } height: 90vh;
}
} }
.demo-tabs>.el-tabs__content { .demo-tabs>.el-tabs__content {

25
src/views/IpoCalendar/index.vue
View File

@ -47,7 +47,7 @@ import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue'; import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo"; import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date()) const dayValue = ref(new Date())
const calendar = ref() const calendar = ref()
@ -55,6 +55,11 @@ const Eventdata = ref([])
const selectDate = (val: string) => { const selectDate = (val: string) => {
calendar.value.selectDate(val) calendar.value.selectDate(val)
} }
watch(dayValue, async (ne, ol) => {
const day = moment(ne).format("YYYY-MM-DD")
const result = await getEventData(day);
setEventdata((result as any).data)
})
const showMounth = (date: any) => { const showMounth = (date: any) => {
const arr = date.split(" ") const arr = date.split(" ")
if (arr.length == 3) { if (arr.length == 3) {
@ -101,6 +106,7 @@ const backRouter = () => {
// margin-left: 40px; // margin-left: 40px;
margin-top: 20px; margin-top: 20px;
transform: translateX(-10px); transform: translateX(-10px);
.top-title { .top-title {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
@ -125,7 +131,7 @@ const backRouter = () => {
.right-bottom { .right-bottom {
width: 100vw; width: 100vw;
background-color: #ffffff; background-color: #ffffff;
height: 400px; height: fit-content;
margin-top: 25px; margin-top: 25px;
// margin-left: 20px; // margin-left: 20px;
@ -143,7 +149,7 @@ const backRouter = () => {
width: 90vw; width: 90vw;
background-color: #ffffff; background-color: #ffffff;
height: 40vh; height: 40vh;
margin-top: 20vh; margin-top: 40px;
// margin-left: 20px; // margin-left: 20px;
// text-align: center; // text-align: center;
// line-height: 500px; // line-height: 500px;
@ -195,17 +201,22 @@ const backRouter = () => {
:deep(.el-calendar__body) { :deep(.el-calendar__body) {
background-color: #e8ebee; background-color: #e8ebee;
height: 50vh; height: fit-content;
padding: 12px 20px 18px
} }
:deep(.el-calendar-table thead th) { :deep(.el-calendar-table thead th) {
padding:2px 0; // padding: 2px 0;
font-weight: 550; font-weight: 550;
} }
:deep(.el-calendar-table) { :deep(.el-calendar-table) {
margin-top: 20px; //margin-top: 20px;
width: 100vw; width: 100vw;
transform: translateX(-19px); transform: translateX(-19px);
table-layout: fixed;
} }
:deep(.el-calendar) { :deep(.el-calendar) {
width: 100vw; width: 100vw;
font-family: "Calibri"; font-family: "Calibri";
@ -224,7 +235,7 @@ const backRouter = () => {
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
height: 33px; height: 33px;
border: none; border: none;
margin-top: 25px; margin-top: 18px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

75
src/views/dashBoard/Header/index.vue
View File

@ -20,10 +20,10 @@
</div> </div>
<div class="right"> <div class="right">
<li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li> <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
<li class="show"> <!-- <li class="show">
<span>Show Value</span> <span>Show Value</span>
<el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" /> <el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
</li> </li> -->
</div> </div>
</div> </div>
</template> </template>
@ -123,13 +123,20 @@ const drawShow = () => {
padding-top: 40px; padding-top: 40px;
transform: translateY(-20px); transform: translateY(-20px);
height: 50px; height: 50px;
width: 1000px;
//background-color: red;
li{
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
flex-direction: column; flex-direction: column;
.left-1 { .left-1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 40vw; width: 240px;
margin-left: 15px; margin-left: 15px;
} }
@ -143,8 +150,9 @@ const drawShow = () => {
.left { .left {
display: flex; display: flex;
position: relative; // position: relative;
width: 400px;
//background-color: gray;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
justify-content: space-between; justify-content: space-between;
width: 100vw; width: 100vw;
@ -165,7 +173,9 @@ const drawShow = () => {
color: #2B4A60; color: #2B4A60;
font-size: 45px; font-size: 45px;
font-weight: 900; font-weight: 900;
display: inline-block;
min-width: 200px;
// background-color: red;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 25px; font-size: 25px;
// margin-top: 4px; // margin-top: 4px;
@ -193,13 +203,17 @@ const drawShow = () => {
.right { .right {
font-size: 20px; font-size: 20px;
min-width: 50px;
//background-color: green;
margin-top: 7px;
//background-color: #2B4A60;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
// width: 100vw; // width: 100vw;
color: red; //color: red;
margin-top: 10px; margin-top: 10px;
transform: translateX(-10px); transform: translateX(-10px);
width: 250px;
margin-left: 100px;
} }
.time { .time {
@ -208,30 +222,31 @@ const drawShow = () => {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
float: right; float: right;
font-size: 15px; font-size: 15px;
}
}
.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: 15px;
margin-top: 13px;
transform: translateX(175px);
} }
} }
// .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: 15px;
// margin-top: 13px;
// transform: translateX(175px);
// }
// }
} }
} }
</style> </style>

36
src/views/dashBoard/Main.vue
View File

@ -17,15 +17,13 @@
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon"> <el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" /> <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"> <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
</el-icon> </el-icon>
</h5> </h5>
</div> </div>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5> <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
<h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h4 >HKD {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) : <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange')) $t(i18n.global.t('home.offerpricerange'))
}}</h6> }}</h6>
@ -45,14 +43,14 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { size } from 'lodash'; import { size } from 'lodash';
import { ref, onMounted, onUpdated } from 'vue' import { ref, onMounted, onUpdated,watch } from 'vue'
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png' import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { computed } from '@vue/reactivity'; import { computed } from '@vue/reactivity';
import Aimage from "./image1/index.vue"; import Aimage from "@/views/login/components/a-image/index.vue";
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const store = ipoStore(); const store = ipoStore();
const currentDate = ref(new Date()) const currentDate = ref(new Date())
@ -108,20 +106,23 @@ const props = defineProps({
logolinks: "", logolinks: "",
status: 0, status: 0,
listingDate: "", listingDate: "",
ipoID:0 ipoID:0,
tradeCurrency:""
} }
} }
} }
}) })
const code22 = ref('') const code22 = ref('')
// onMounted(()=>{ onMounted(()=>{
// if(props.data.status == 80){ setCodefn()
})
// } watch(props,(newValue:any, oldValue:any)=>{
// }) setCodefn();
onUpdated(() => { },{deep:true})
function setCodefn(){
// console.log('修改了data',newValue,oldValue);
var obj = { var obj = {
25: proxy.$t('home.DealInitiated'), 25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'), 30: proxy.$t('home.PublicOfferClosed'),
@ -135,10 +136,8 @@ onUpdated(() => {
80: proxy.$t('home.Suspended'), 80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'), 90: proxy.$t('home.Cancelled'),
} }
console.log('&&&&', props.data.status) // console.log('&&&&', props.data.status)
const stron = props.data.status const stron = props.data.status
if (isValidKey(stron, obj)) { if (isValidKey(stron, obj)) {
code22.value = obj[stron]; code22.value = obj[stron];
// console.log('kkkk',stron,obj[stron]) // console.log('kkkk',stron,obj[stron])
@ -154,6 +153,7 @@ onUpdated(() => {
return { ...item, icon: 0 } return { ...item, icon: 0 }
} }
}) })
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错 // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
function isValidKey( function isValidKey(
key: string | number | symbol, key: string | number | symbol,
@ -162,11 +162,13 @@ onUpdated(() => {
return key in object; return key in object;
} }
}) }
const cardDetail = (e: any) => { const cardDetail = (e: any) => {
e.stopPropagation(); e.stopPropagation();
expand.value = !expand.value; expand.value = !expand.value;
} }
//路由传参 //路由传参
const handleclick = (item: any) => { const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.ipoID) localStorage.setItem('ipoID', item.ipoID)

13
src/views/dashBoard/box/index.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<div class="box"> <div class="box">
<div class="left" :style="{width: leftWidth}" >{{ leftNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }} <div class="left" :style="{width: leftWidth}" >
<div class="number">{{ leftNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</div>
</div> </div>
<div class="right" :style="{width: rightWidth}"> <div class="right" :style="{width: rightWidth}">
{{ rightNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }} <div class="number">{{ rightNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</div>
</div> </div>
</div> </div>
</template> </template>
@ -43,6 +44,7 @@ const rightWidth = computed(()=>{
justify-content: space-between; justify-content: space-between;
height: 28px; height: 28px;
width: 400px; width: 400px;
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
width: 80vw; width: 80vw;
} }
@ -56,7 +58,9 @@ const rightWidth = computed(()=>{
background-color:#ee4040 ; background-color:#ee4040 ;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
.number{
z-index: 1;
}
} }
.right { .right {
display: flex; display: flex;
@ -66,6 +70,9 @@ const rightWidth = computed(()=>{
background-color:#98c2f2 ; background-color:#98c2f2 ;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
.number{
z-index: 1;
}
} }
/* .left { /* .left {

102
src/views/dashBoard/index.vue
View File

@ -68,7 +68,7 @@
<p>{{ $t(i18n.global.t('dashboard.FinalShares')) }}</p> <p>{{ $t(i18n.global.t('dashboard.FinalShares')) }}</p>
</div> </div>
<div class="p-4"> <div class="p-4">
<Box :leftNumber=Number(initialinstituational) :rightNumber=Number(code44)></Box> <Box :leftNumber=Number(initialpublic) :rightNumber=Number(code44)></Box>
</div> </div>
<div class="p-5"> <div class="p-5">
{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ datatime }} {{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ datatime }}
@ -174,6 +174,8 @@ import { ipoStore } from "@/stores/ipo"
import { getCurrentInstance, onUnmounted } from 'vue' import { getCurrentInstance, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue' import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { getDataFromId } from "@/api/mock/home"; import { getDataFromId } from "@/api/mock/home";
const drawer = ref(false) const drawer = ref(false)
const handleDrawer = (done: () => void) => { const handleDrawer = (done: () => void) => {
done(); done();
@ -231,30 +233,16 @@ const LineData = reactive({
}) })
const PublicOfferX1 = ref<string[]>([]) const PublicOfferX1 = ref<string[]>([])
const PublicOfferY1 = ref<any[]>([]) const PublicOfferY1 = ref<any[]>([])
const PublicOfferY1max = ref<number>()
const PublicOfferZ1 = ref<any[]>([]) const PublicOfferZ1 = ref<any[]>([])
const PublicOfferZ1max = ref<number>()
const interval = ref()
const PublicOfferX = ref<string[]>([]) const PublicOfferX = ref<string[]>([])
const PublicOfferY = ref<string[]>([]) const PublicOfferY = ref<string[]>([])
const InitialAllocationPublic = ref('') const InitialAllocationPublic = ref('')
const FinalAllocationPublic = ref('') const FinalAllocationPublic = ref('')
const InitialAllocationInstitutional = ref('') const InitialAllocationInstitutional = ref('')
const FinalAllocationInstitutional = ref('') const FinalAllocationInstitutional = ref('')
const setBarRight = async () => {
// const result = await getDataFromId('bar')
// const ipoID = '00314';
// const index = result.findIndex((item: any) => item.ipoID == ipoID);
// const graph = result[index].graph;
// PublicOfferX.value = graph.map((item: any) => {
// return moment(item.dateTime).format('MM-DD')
// })
// PublicOfferY.value = graph.map((item: any) => {
// return item.poApplicationQuantity;
// });
// const amount = Number(initialpublic.value) + Number(initialinstituational.value);
// InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
// InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
// init();
}
const setBar = async () => { const setBar = async () => {
const ipoID = localStorage.getItem('ipoID') const ipoID = localStorage.getItem('ipoID')
const result = await getIpo(ipoID as string) const result = await getIpo(ipoID as string)
@ -266,16 +254,23 @@ const setBar = async () => {
PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => { PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
return item.poApplicationQuantity / 1000000; return item.poApplicationQuantity / 1000000;
}); });
PublicOfferY1max.value = Math.floor(PublicOfferY1.value.slice().sort((a,b)=>a-b)[PublicOfferY1.value.length-1] *2),
PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => { PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
const number = (item.poApplicationQuantity) / item.poSharesInitial const number = (item.poApplicationQuantity) / item.poSharesInitial
return number.toFixed(2); console.log(number);
});
return number.toFixed(2);
});
PublicOfferZ1max.value = Math.floor(PublicOfferZ1.value.slice().sort((a,b)=>a-b)[PublicOfferZ1.value.length-1] *2)
} }
console.log(PublicOfferZ1max.value);
const amount = Number(initialpublic.value) + Number(initialinstituational.value); const amount = Number(initialpublic.value) + Number(initialinstituational.value);
InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%"; InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%"; InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
//interval.value = Math.ceil((PublicOfferZ1max.value as number)/9)
init(); init();
} }
onMounted(() => { onMounted(() => {
@ -441,7 +436,7 @@ function init() {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
max: Math.floor(PublicOfferY1.value.sort().reverse()[0]*2), max:PublicOfferY1max.value,
min: 0, min: 0,
splitNumber: 9, splitNumber: 9,
boundaryGap: [0.2, 0.2], boundaryGap: [0.2, 0.2],
@ -449,16 +444,28 @@ function init() {
lineStyle: { lineStyle: {
width: 1, width: 1,
type: 'solid', type: 'solid',
},
axisLabel: {
formatter: function (value: any, index: any) {
return value.toFixed(1)
}
} }
}, },
{ {
type: 'value', type: 'value',
name: proxy.$t('dashboard.Ratio'), name: proxy.$t('dashboard.Ratio'),
min: 0, min: 0,
max: Math.floor(PublicOfferZ1.value.sort().reverse()[0]*1.5), max: PublicOfferZ1max.value,
// max:20,
splitNumber: 9, splitNumber: 9,
alignTicks: true, alignTicks: true,
scale:true scale: true,
// interval: Math.ceil(20/9),
axisLabel: {
formatter: function (value: any, index: any) {
return value.toFixed(1)
}
}
} }
], ],
@ -469,26 +476,6 @@ function init() {
type: 'line', type: 'line',
data: PublicOfferZ1.value, data: PublicOfferZ1.value,
yAxisIndex: 1, yAxisIndex: 1,
// data:PublicOfferY.value,
// markLine:{
// symbol:['none','none'],
// label:{
// show:false
// },
// itemStyle:{
// normal:{
// lineStyle:{
// type:'solid',
// color:'#ee3238'
// }
// }
// },
// data:[{
// yAxis:9
// }]
// }
}, },
{ {
name: proxy.$t('dashboard.QuantityMillion'), name: proxy.$t('dashboard.QuantityMillion'),
@ -587,8 +574,6 @@ const selectDate = (val: string) => {
calendar.value.selectDate(val) calendar.value.selectDate(val)
setTimeout(() => { setTimeout(() => {
// calendarLine(startDate.value, endDate.value, '#65FABF'),
// calendarLine(allotmentDate.value, allotmentDate.value, '#9bc3f1')
calendarAddLine() calendarAddLine()
}) })
} }
@ -667,11 +652,12 @@ drawer.value = data
background-size: cover; background-size: cover;
height: 1200px; height: 1200px;
font-family: "Calibri"; font-family: "Calibri";
width: 1900px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
height: fit-content; height: fit-content;
width: 100vw; width: 100vw;
overflow-x: hidden; overflow-x: hidden;
} }
} }
@ -704,6 +690,8 @@ drawer.value = data
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
width: 100vw; width: 100vw;
transform: translateY(-30px); transform: translateY(-30px);
height: fit-content;
overflow: hidden;
} }
.content { .content {
@ -735,6 +723,7 @@ drawer.value = data
justify-content: space-between; justify-content: space-between;
margin-left: 55px; margin-left: 55px;
align-items: flex-end; align-items: flex-end;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
margin-left: 21px; margin-left: 21px;
} }
@ -746,6 +735,7 @@ drawer.value = data
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
margin-left: 35px; margin-left: 35px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
margin-left: 0px; margin-left: 0px;
} }
@ -757,8 +747,9 @@ drawer.value = data
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
margin-left: 5px; margin-left: 5px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
margin-left: -25px; margin-left: -20px;
width: 85vw; width: 85vw;
} }
} }
@ -829,7 +820,7 @@ drawer.value = data
} }
.yuan-title3 { .yuan-title3 {
margin-left: 75px; margin-left: 63px;
color: #5c6063; color: #5c6063;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
@ -846,7 +837,7 @@ drawer.value = data
} }
.yuan-title2 { .yuan-title2 {
margin-left: 31px; margin-left: 20px;
color: #5c6063; color: #5c6063;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
@ -856,7 +847,7 @@ drawer.value = data
} }
.yuan-title2-1 { .yuan-title2-1 {
margin-left: 53px; margin-left: 23px;
color: #5c6063; color: #5c6063;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
@ -869,6 +860,7 @@ drawer.value = data
font-size: 25px; font-size: 25px;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
// background-color: #20b109; // background-color: #20b109;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 20px; font-size: 20px;
@ -930,10 +922,17 @@ drawer.value = data
transform: translateY(-150px); transform: translateY(-150px);
padding-right: 40px; padding-right: 40px;
padding-left: 30px; padding-left: 30px;
@media screen and (max-width: 768px) {
padding-right: 10px;
}
} }
.topright-p { .topright-p {
transform: translateY(-165%); transform: translateY(-164%);
@media screen and (max-width: 768px) {
transform: translateY(-160%);
}
} }
.p-1 { .p-1 {
@ -985,6 +984,7 @@ drawer.value = data
margin-top: 3px; margin-top: 3px;
margin-left: 50px; margin-left: 50px;
font-size: 19px; font-size: 19px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
width: 80vw; width: 80vw;
transform: translateX(-6vw); transform: translateX(-6vw);

8
src/views/login/components/Lang.vue
View File

@ -25,15 +25,17 @@ const { proxy } = (getCurrentInstance() as any)
const showLang = ref(false) const showLang = ref(false)
const reflashRouter=inject('reflashRouter') as Function const reflashRouter=inject('reflashRouter') as Function
const IpoReflash=()=>{ const IpoReflash=()=>{
if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){ // if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
// reflashRouter()
// }
reflashRouter() reflashRouter()
} }
}
const handleLang1 = () => { const handleLang1 = () => {
if (proxy.$i18n.locale = 'en') { if (proxy.$i18n.locale = 'en') {
proxy.$i18n.locale = 'en' proxy.$i18n.locale = 'en'
} }
store.setLocale(1) store.setLocale(1)
IpoReflash() IpoReflash()
} }
@ -41,8 +43,6 @@ const handleLang1 = () => {
const handleLang2 = () => { const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') { if (proxy.$i18n.locale = 'zhCt') {
proxy.$i18n.locale = 'zhCt' proxy.$i18n.locale = 'zhCt'
} }
store.setLocale(2) store.setLocale(2)
IpoReflash() IpoReflash()

24
src/views/login/components/Main.vue
View File

@ -23,8 +23,7 @@
</div> </div>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5> <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
<h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h4 >HKD {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) : <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange')) $t(i18n.global.t('home.offerpricerange'))
}}</h6> }}</h6>
@ -107,21 +106,25 @@ const props = defineProps({
logolinks: "", logolinks: "",
status: 0, status: 0,
listingDate: "", listingDate: "",
ipoID:0 ipoID:0,
tradeCurrency:""
} }
} }
} }
}) })
// console.log(props.data.tradeCurrency);
const code22 = ref('') const code22 = ref('')
// onMounted(()=>{ onMounted(()=>{
// if(props.data.status == 80){ setCodefn()
})
// }
// })
watch(props,(newValue:any, oldValue:any)=>{ watch(props,(newValue:any, oldValue:any)=>{
console.log('修改了data',newValue,oldValue); setCodefn();
},{deep:true})
function setCodefn(){
// console.log('修改了data',newValue,oldValue);
var obj = { var obj = {
25: proxy.$t('home.DealInitiated'), 25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'), 30: proxy.$t('home.PublicOfferClosed'),
@ -161,8 +164,7 @@ watch(props,(newValue:any, oldValue:any)=>{
return key in object; return key in object;
} }
},{deep:true}) }
const cardDetail = (e: any) => { const cardDetail = (e: any) => {
e.stopPropagation(); e.stopPropagation();

62
src/views/login/components/Select.vue
View File

@ -99,7 +99,7 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineExpose, reactive ,inject} from 'vue'; import { ref, defineExpose, reactive ,inject,onMounted} from 'vue';
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import { getSelectList } from "@/api/reqIpo/ipo" import { getSelectList } from "@/api/reqIpo/ipo"
@ -109,6 +109,9 @@ const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false) const showSelect = ref(false)
const checkedAll = ref(0) const checkedAll = ref(0)
const selectCards=inject('selectCards') as Function const selectCards=inject('selectCards') as Function
onMounted(()=>{
console.log('select组件挂载');
})
const confirm = async () => { const confirm = async () => {
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',] var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
var reqeustObj = { var reqeustObj = {
@ -148,11 +151,11 @@ const obj = reactive({
{ {
key: "30", key: "30",
value: proxy.$t('home.PublicOfferClosed'), value: proxy.$t('home.PublicOfferClosed'),
isSelcted: true isSelcted: false
}, { }, {
key: "35", key: "35",
value: proxy.$t('home.ApplicationValidated'), value: proxy.$t('home.ApplicationValidated'),
isSelcted: true isSelcted: false
}, { }, {
key: "45", key: "45",
value: proxy.$t('home.AllotmentConfirmed'), value: proxy.$t('home.AllotmentConfirmed'),
@ -195,7 +198,7 @@ const obj = reactive({
{ {
key: 'CNY', key: 'CNY',
value: proxy.$t('home.ChineseYuan'), value: proxy.$t('home.ChineseYuan'),
isSelcted: true isSelcted: false
}, },
{ {
key: 'USD', key: 'USD',
@ -223,7 +226,7 @@ const obj = reactive({
{ {
key: '5', key: '5',
value: proxy.$t('ipo.TypeofListing.TransferfromGEM'), value: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
isSelcted: true isSelcted: false
} }
], ],
SecuritiestobeListed: [{ SecuritiestobeListed: [{
@ -246,22 +249,22 @@ const obj = reactive({
{ {
key: '5', key: '5',
value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'), value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
isSelcted: true isSelcted: false
}, },
{ {
key: '6', key: '6',
value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'), value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
isSelcted: true isSelcted: false
}, },
{ {
key: '7', key: '7',
value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'), value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
isSelcted: true isSelcted: false
}, },
{ {
key: '8', key: '8',
value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'), value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
isSelcted: true isSelcted: false
}, },
{ {
key: '99', key: '99',
@ -298,7 +301,7 @@ const obj = reactive({
// { // {
// key: '5', // key: '5',
// value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'), // value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
// isSelcted: true // isSelcted: false
// }, // },
// { // {
// key: '6', // key: '6',
@ -336,9 +339,7 @@ const checkAll = (number: number) => {
} else { } else {
checkedAll.value = number; checkedAll.value = number;
selectAll(number as 1 | 2) selectAll(number as 1 | 2)
} }
} }
function selectAll(all: 1 | 2) { function selectAll(all: 1 | 2) {
var boolean1 = all == 1 ? true : false; var boolean1 = all == 1 ? true : false;
@ -356,7 +357,7 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
.selectWrap { .selectWrap {
width: 800px; width: 800px;
height: 820px; height: 620px;
background-color: #fff; background-color: #fff;
border-radius: 20px; border-radius: 20px;
position: fixed; position: fixed;
@ -364,7 +365,14 @@ defineExpose({
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 10; z-index: 10;
@media screen and (max-width: 768px){
width: 90vw;
height: 93vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
}
.box { .box {
box-sizing: border-box; box-sizing: border-box;
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
@ -380,12 +388,22 @@ defineExpose({
font-size: 18px; font-size: 18px;
color: #879db2; color: #879db2;
margin-top: 10px; margin-top: 10px;
// @media screen and (max-width: 768px){
// font-size: 12px;
// }
} }
li { li {
display: flex; display: flex;
font-size: 18px; font-size: 18px;
flex-wrap: wrap; flex-wrap: wrap;
@media screen and (max-width: 768px){
flex-direction: column;
flex-wrap:nowrap;
//font-size: 12px;
width: fit-content;
}
.word { .word {
margin-right: 10px; margin-right: 10px;
@ -399,12 +417,22 @@ defineExpose({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
@media screen and (max-width: 768px){
height: fit-content;
width: fit-content;
}
&:hover {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
.check { .check {
width: 30px; width: 30px;
span { span {
line-height: 35px; line-height: 35px;
} }
} }
} }
@ -426,6 +454,11 @@ defineExpose({
background-color: #fff; background-color: #fff;
color: #557795; color: #557795;
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
@media screen and (max-width: 768px){
margin:0;
// font-size: 12px;
}
&:hover { &:hover {
background-color: #0F426F; background-color: #0F426F;
@ -435,4 +468,5 @@ defineExpose({
} }
} }
} }
</style> </style>

143
src/views/login/index.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="login2"> <div class="login2">
<Select ref="selectR" />
<div class="box w"> <div class="box w">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer" <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false"> style="background-color: #1C3F56;" :with-header="false">
@ -12,7 +13,6 @@
</div> </div>
<!-- <input class="search" /> --> <!-- <input class="search" /> -->
<div class="searchWrap"> <div class="searchWrap">
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false"
clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect" clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect"
:enterkeyhint="'search'" :enterkeyhint="'search'"
@ -32,7 +32,7 @@
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second"> <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang class="alert" ref="lang" /> <Lang class="alert" ref="lang" />
<Select ref="selectR" />
<!-- <SearchCup ref="SearchCupDom" class="searchCup" /> --> <!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
</div> </div>
@ -93,7 +93,7 @@ import { useRouter } from 'vue-router';
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance, provide } from 'vue' import { getCurrentInstance, provide } from 'vue'
import Event from './components/Event.vue'; import Event from './components/Event.vue';
import { getEventData, getSearchListing,getSelectList } from "@/api/reqIpo/ipo"; import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home" import { getDataFromId } from "@/api/mock/home"
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import SearchCup from "./components/SearchCup.vue"; import SearchCup from "./components/SearchCup.vue";
@ -112,11 +112,9 @@ const selectCards=async (res:any)=>{
throw ("222") throw ("222")
} }
const data = (res as any).data.map((item: any) => { const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate,tradeCurrency } = item;
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
console.log('status',status);
return { return {
logolinks: logoLink?logoLink:"", logolinks: logoLink,
title: companyEngFull + ";" + companyChiFull, title: companyEngFull + ";" + companyChiFull,
status: status, status: status,
number: stkCode, number: stkCode,
@ -124,7 +122,8 @@ const selectCards=async (res:any)=>{
time: listingDate ? listingDate : pricingDate, time: listingDate ? listingDate : pricingDate,
ipoID: ipoID, ipoID: ipoID,
price: priceFinal, price: priceFinal,
listingDate: listingDate listingDate: listingDate,
tradeCurrency:tradeCurrency
} }
function priceMinMax() { function priceMinMax() {
if (priceMin && priceMax) { if (priceMin && priceMax) {
@ -174,8 +173,11 @@ const router = useRouter()
watch(dayValue, async (ne, ol) => { watch(dayValue, async (ne, ol) => {
const day = moment(ne).format("YYYY-MM-DD") const day = moment(ne).format("YYYY-MM-DD")
const result = await getEventData(day); const result = await getEventData(day);
console.log(result);
setEventdata((result as any).data) setEventdata((result as any).data)
// const result = await getDataFromId('event');
// console.log('@@@@', result);
// setEventdata((result as any))
}) })
const Eventdata = ref([ const Eventdata = ref([
// { // {
@ -263,7 +265,8 @@ const getHomeIpoList = async () => {
// const res = await getDataFromId('home'); // const res = await getDataFromId('home');
// const data = (res as any).map((item: any) => { // const data = (res as any).map((item: any) => {
const data = (res as any).data.map((item: any) => { const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item; let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate,tradeCurrency } = item;
return { return {
logolinks: logoLink, logolinks: logoLink,
title: companyEngFull + ";" + companyChiFull, title: companyEngFull + ";" + companyChiFull,
@ -273,7 +276,8 @@ const getHomeIpoList = async () => {
time: listingDate ? listingDate : pricingDate, time: listingDate ? listingDate : pricingDate,
ipoID: ipoID, ipoID: ipoID,
price: priceFinal, price: priceFinal,
listingDate: listingDate listingDate: listingDate,
tradeCurrency:tradeCurrency
} }
function priceMinMax() { function priceMinMax() {
if (priceMin && priceMax) { if (priceMin && priceMax) {
@ -312,7 +316,6 @@ onMounted(async () => {
const getSearchIpoList = async (keyword: string) => { const getSearchIpoList = async (keyword: string) => {
async function demo() { async function demo() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
const res = await getSearchListing(keyword) const res = await getSearchListing(keyword)
if (!(res as any).data.length) { if (!(res as any).data.length) {
@ -320,7 +323,8 @@ const getSearchIpoList = async (keyword: string) => {
throw ("222") throw ("222")
} }
const data = (res as any).data.map((item: any) => { const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item; let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate,tradeCurrency } = item;
// console.log(companyEngFull,companyChiFull);
return { return {
logolinks: logoLink, logolinks: logoLink,
title: companyEngFull + ";" + companyChiFull, title: companyEngFull + ";" + companyChiFull,
@ -330,7 +334,8 @@ const getSearchIpoList = async (keyword: string) => {
time: listingDate ? listingDate : pricingDate, time: listingDate ? listingDate : pricingDate,
ipoID: ipoID, ipoID: ipoID,
price: priceFinal, price: priceFinal,
listingDate: listingDate listingDate: listingDate,
tradeCurrency:tradeCurrency
} }
function priceMinMax() { function priceMinMax() {
if (priceMin && priceMax) { if (priceMin && priceMax) {
@ -478,16 +483,16 @@ const handleShowCup = (e: any) => {
selectR.value.showSelect = !selectR.value.showSelect selectR.value.showSelect = !selectR.value.showSelect
} }
//路由传参 //路由传参
const handleclick = (item: any) => { // const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.number) // localStorage.setItem('ipoID', item.number)
localStorage.setItem('itemData', JSON.stringify(item)) // localStorage.setItem('itemData', JSON.stringify(item))
router.push({ // router.push({
name: 'Xdashboard', // name: 'Xdashboard',
params: { data: JSON.stringify(item) } // params: { data: JSON.stringify(item) }
}, // },
) // )
} // }
onMounted(() => { onMounted(() => {
@ -521,30 +526,6 @@ drawer.value = data
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// @import '../../styles';
// .el-calendar{
// font-family: "Calibri"
// }
// @media screen and (max-width: 768px){
// .left{
// width: 100vw;
// * {
// margin: 0;
// padding: 0;
// }
// }
// .header{
// height: 60rem;
// }
// .menuicon{
// display: block;
// margin-left: 5rem;
// width: 25rem;
// height: 20rem;
// }
// }
.login2 { .login2 {
background-image: url("@/assets/1x/beijingtu.png"); background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -553,6 +534,7 @@ drawer.value = data
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
width: 100vw; width: 100vw;
overflow-x: hidden; overflow-x: hidden;
height: 100vh;
} }
} }
@ -594,41 +576,9 @@ drawer.value = data
.menuicon { .menuicon {
display: none; display: none;
// @media screen and (max-width: 768px) {
// display: block;
// margin-left: 5rem;
// width: 25rem;
// height: 20rem;
// }
} }
// .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 { .my-autocomplete li {
line-height: normal; line-height: normal;
@ -648,13 +598,6 @@ drawer.value = data
.my-autocomplete li .highlighted .addr { .my-autocomplete li .highlighted .addr {
color: #ddd; color: #ddd;
} }
// .example-showcase .el-dropdown-link {
// cursor: pointer;
// color: var(--el-color-primary);
// display: flex;
// align-items: center;
// }
.dropdown { .dropdown {
position: relative; position: relative;
@ -772,7 +715,7 @@ drawer.value = data
.right-bottom { .right-bottom {
width: 420px; width: 420px;
background-color: #ffffff; background-color: #ffffff;
height: 400px; height: fit-content;
margin-top: 40px; margin-top: 40px;
// margin-left: 20px; // margin-left: 20px;
@ -788,7 +731,7 @@ drawer.value = data
width: 420px; width: 420px;
background-color: #ffffff; background-color: #ffffff;
height: 500px; height: 500px;
margin-top: 130px; margin-top: 40px;
// margin-left: 20px; // margin-left: 20px;
// text-align: center; // text-align: center;
// line-height: 500px; // line-height: 500px;
@ -811,9 +754,9 @@ drawer.value = data
} }
:deep(.el-calendar-table) { :deep(.el-calendar-table) {
width: 420px; width: 380px;
transform: translateX(-20px); // transform: translateX(-20px);
margin-top: 20px; // margin-top: 20px;
} }
:deep(.el-button--small) { :deep(.el-button--small) {
@ -823,7 +766,7 @@ drawer.value = data
:deep(.el-calendar__body) { :deep(.el-calendar__body) {
background-color: #e8ebee; background-color: #e8ebee;
height: fit-content; height: fit-content;
padding: 12px 20px 0px; padding: 12px 20px 18px;
} }
:deep(.el-calendar) { :deep(.el-calendar) {
@ -845,16 +788,6 @@ drawer.value = data
} }
} }
// :deep(.header .el-input__wrapper) {
// @media screen and (max-width: 768px) {
// // margin-left: 13vw;
// // height: 5vh;
// // background-color: #000000;
// }
// }
:deep(.el-calendar-table td) { :deep(.el-calendar-table td) {
border: none; border: none;
text-align: center; text-align: center;
@ -862,7 +795,7 @@ drawer.value = data
} }
:deep(.el-calendar-table thead th) { :deep(.el-calendar-table thead th) {
padding: 2px; //padding: 2px;
font-weight: 550px; font-weight: 550px;
} }
@ -874,7 +807,7 @@ drawer.value = data
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
height: 33px; height: 33px;
border: none; border: none;
margin-top: 30px; margin-top: 18px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -882,7 +815,7 @@ drawer.value = data
} }
:deep(.el-calendar-table thead) { :deep(.el-calendar-table thead) {
margin-top: 20px; //margin-top: 20px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);

8
src/views/login/modelComponents/Drawer.vue
View File

@ -18,14 +18,14 @@
<img src="@/assets/1x/source2.png" alt="menu"> <img src="@/assets/1x/source2.png" alt="menu">
<span>IPO Reference Data</span> <span>IPO Reference Data</span>
</div> </div>
<div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }"> <!-- <div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
<img src="@/assets/1x/source11.png" alt="" class="icon"> <img src="@/assets/1x/source11.png" alt="" class="icon">
</div> -->
</div> </div>
</div> <!-- <div class="report" v-if="state == 3">
<div class="report" v-if="state == 3">
<span>report</span> <span>report</span>
<img src="@/assets/1x/source3.png" alt=""> <img src="@/assets/1x/source3.png" alt="">
</div> </div> -->
</li> </li>

2
vite.config.ts
View File

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