Compare commits

...
14 Commits
Author SHA1 Message Date
zzy b3112e27f9 修复bug 2023-06-16 16:02:24 +08:00
zzy 3da81b7b90 test 2023-06-16 15:53:06 +08:00
zzy 350f310c0d 通过地址栏切换语言 2023-05-12 09:57:37 +08:00
zzy 27cbe72e19 2 2023-05-04 10:34:47 +08:00
zzy be8db89a18 1 2023-05-04 10:24:45 +08:00
zzy d3f48625c8 最终版 2023-04-28 14:33:16 +08:00
zzy 00bb0d8346 筛选完成 2023-04-23 16:31:24 +08:00
zzy 8b6c10f1d5 ipo版面调整 2023-04-21 17:38:58 +08:00
zzy cd4544afb8 移动端dashbord调整 2023-04-21 16:54:59 +08:00
zzy 3eb07382ae 点击菜单切换语言菜单自动弹回 2023-04-19 17:41:10 +08:00
zzy 23fca53196 1 2023-04-18 17:04:41 +08:00
zzy f5a85c78bd 1 2023-04-18 10:09:32 +08:00
zzy 21c1ea7551 test1 2023-04-17 16:01:46 +08:00
zzy 7da913090d 1 2023-04-17 14:33:48 +08:00
43 changed files with 4243 additions and 1244 deletions
BIN
View File
Binary file not shown.
+8 -2
View File
@@ -2,9 +2,9 @@
<html lang="en">
<head>
<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">
<title>Vite App</title>
<title>Website - FINI</title>
</head>
@@ -13,6 +13,12 @@
<script type="module" src="/src/main.ts"></script>
</body>
<style>
html{
touch-action:none;
touch-action:pan-y;
}
</style>
</html>
+85 -15
View File
@@ -13,7 +13,7 @@
"@element-plus/icons-vue": "^2.1.0",
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"echarts": "^5.4.1",
"echarts": "^5.4.2",
"element-plus": "^2.3.0",
"js-cookie": "^3.0.1",
"moment": "^2.29.4",
@@ -25,6 +25,7 @@
"pinia": "^2.0.33",
"postcss-px2rem": "^0.3.0",
"vue": "^3.2.36",
"vue-echarts": "^6.5.5",
"vue-i18n": "^9.2.2",
"vue-lazyload": "^3.0.0-rc.2",
"vue-router": "^4.0.15"
@@ -4174,12 +4175,12 @@
}
},
"node_modules/echarts": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
"version": "5.4.2",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.4.1"
"zrender": "5.4.3"
}
},
"node_modules/echarts/node_modules/tslib": {
@@ -9213,6 +9214,11 @@
"node": ">=0.10.0"
}
},
"node_modules/resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"node_modules/resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -10537,6 +10543,48 @@
"@vue/shared": "3.2.37"
}
},
"node_modules/vue-echarts": {
"version": "6.5.5",
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
"integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
"hasInstallScript": true,
"dependencies": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.13.2"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.5",
"echarts": "^5.4.1",
"vue": "^2.6.12 || ^3.1.1"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-echarts/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -10877,9 +10925,9 @@
}
},
"node_modules/zrender": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
"version": "5.4.3",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"dependencies": {
"tslib": "2.3.0"
}
@@ -14471,12 +14519,12 @@
}
},
"echarts": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
"version": "5.4.2",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.4.1"
"zrender": "5.4.3"
},
"dependencies": {
"tslib": {
@@ -18321,6 +18369,11 @@
"resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
},
"resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -19375,6 +19428,23 @@
"@vue/shared": "3.2.37"
}
},
"vue-echarts": {
"version": "6.5.5",
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
"integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
"requires": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.13.2"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -19635,9 +19705,9 @@
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
},
"zrender": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
"version": "5.4.3",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"requires": {
"tslib": "2.3.0"
},
+2 -1
View File
@@ -15,7 +15,7 @@
"@element-plus/icons-vue": "^2.1.0",
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"echarts": "^5.4.1",
"echarts": "^5.4.2",
"element-plus": "^2.3.0",
"js-cookie": "^3.0.1",
"moment": "^2.29.4",
@@ -27,6 +27,7 @@
"pinia": "^2.0.33",
"postcss-px2rem": "^0.3.0",
"vue": "^3.2.36",
"vue-echarts": "^6.5.5",
"vue-i18n": "^9.2.2",
"vue-lazyload": "^3.0.0-rc.2",
"vue-router": "^4.0.15"
+98 -48
View File
@@ -1,83 +1,133 @@
<template >
<el-config-provider :locale="store.localeLang">
<div class="login">
<router-view />
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false">
<Drawer :drawer="drawer" />
</el-drawer>
<!-- <router-view v-if="showRouter" /> -->
<router-view v-slot="{ Component }">
<keep-alive :exclude="route11">
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</el-config-provider>
</template>
<script lang="ts" setup>
import { defineComponent, ref, onBeforeMount } from 'vue'
import { defineComponent, ref, onBeforeMount, onMounted, watch, provide } from 'vue'
import { ElConfigProvider } from 'element-plus'
import Drawer from "./views/login/modelComponents/Drawer.vue";
import { ipoStore } from "@/stores/ipo"
import router from './router'
import { getCurrentInstance } from 'vue'
const drawer = ref(false)
const drawer1 = ref(false)
const { proxy } = (getCurrentInstance() as any)
const showRouter = ref(true)
const route11 = ref(["", "XIPO", "Xdashboard"])
const reflashRouter = () => {
showRouter.value = false;
setTimeout(() => {
showRouter.value = true
}, 1)
}
const handleOnDrwaer = (bool: boolean) => {
drawer.value = bool
}
provide('reflashRouter', reflashRouter);
provide('handleOnDrwaer', handleOnDrwaer);
function isMobileFn() {
return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素,如果是返回true
}
const isMobile = ref(isMobileFn() ? true : false);
const store = ipoStore();
onBeforeMount(() => {
setFontSize()
})
onMounted(() => {
const langHref = window.location.href.split("home")[1]
if (langHref == '?lang=en') {
proxy.$i18n.locale = 'en'
store.setLocale(1)
} else if (langHref == '?lang=tc') {
proxy.$i18n.locale = 'zhCt'
store.setLocale(2)
} else if (langHref == '?lang=sc') {
proxy.$i18n.locale = 'zhCn'
store.setLocale(3)
}
reflashRouter()
})
const setFontSize = () => {
// 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发,把rem当作px用就行了
var font = document.documentElement.clientWidth / 375;
document.documentElement.style.fontSize = font + "px";
}
// export default defineComponent({
// components: {
// ElConfigProvider,
// },
// setup() {
// // store.setLocale(2)
// console.log(store.$state.locale, store.localeLang)
// console.log(document.documentElement.clientWidth)
// return {
// store
// }
// },
// })
const handleDrawer = (done: () => void) => {
done();
}
</script>
<style lang="scss" >
// @import url(./vars.scss);
// $bg-color: red;
@media (max-width: 767px) {
.login {
width: 100vw;
height: fit-content;
background-color: blue;
}
}
@media (min-width: 768px) {
.login {
width: 100vw;
height: 100vh;
// @media (max-width: 767px) {
// .login {
// width: 100vw;
// height: fit-content;
// background-color: blue;
}
}
// }
// }
@media (min-width: 992px) {
.login {
height: 100%;
width: 100%;
// background-color: pink;
}
}
// @media (min-width: 768px) {
// .login {
// width: 100vw;
// height: 100vh;
// // background-color: blue;
// }
// }
@media (min-width: 1200px) {
.login {
height: 1100px;
width: 100%;
// background-color: pink;
}
}
// @media (min-width: 992px) {
// .login {
// height: 100%;
// width: 100%;
// // background-color: pink;
// }
// }
// @media (min-width: 1200px) {
// .login {
// height: 1100px;
// width: 100%;
// // background-color: pink;
// }
// }
.login {
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
// height: 100%;
width: 100%;
height: 100%;
width: 1900px;
height: 1300px;
//overflow: hidden;
// position: fixed;
// width: 100%;
// height: 2000px;
// background-size:100% 100%;
@media screen and (max-width: 768px) {
max-width: 100vw;
overflow: auto;
overflow-x: hidden;
height: 100%;
}
}
</style>
+55 -4
View File
@@ -10,7 +10,9 @@ enum Api {
offeringsUrl="/api/ipo/refdata/offering",
EventData="/api/ipos/listingData",
TypeofList="/api/ipo/refdata/typeOfListing",
searchUrl="/api/ipo/refdata/search"
searchUrl="/api/ipo/refdata/search",
selectUrl="/api/ipo/refdata/searchAndFilter",
findAllListingDate="/api/ipo/refdata/findAllListingDate"
}
//获取ipo详情页的数据
export const getIpo = (ipoID:string) => {
@@ -33,7 +35,56 @@ export const getTypeofListing = (ipoID:string) => {
return request.get<any, null>(Api.TypeofList+`?ipoID=${ipoID}`);
};
//获取首页的搜索数据
export const getSearchListing = (keyword:string) => {
return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
};
export const getSearchListing = (keyWord:string) => {
// return request.post<any, null>(Api.selectUrl+`?keyWord=${keyWord}`);
return request.post<any, null>(Api.selectUrl,{keyWord});
}
export const getDate = () => {
return request.get<any, null>(Api.findAllListingDate);
};
type selectObj={
status?:string|string[]
tradeCurrency?:string|string[]
offerType?:string|string[]
listSecurities?:string|string[]
IPOs?:string|string[]
listPlatform?:string|string[]
}
// export const getSelectList = (body:selectObj) => {
// // return request.get<any, null>(Api.searchUrl,{body});
// const {status,tradeCurrency,offerType,listSecurities,IPOs,listPlatform}=body;
// var requestData='?'
// if(status){
// requestData+=`status=${status}&`
// }
// if(tradeCurrency){
// requestData+=`tradeCurrency=${status}&`
// }
// if(offerType){
// requestData+=`offerType=${offerType}&`
// }
// if(listSecurities){
// requestData+=`listSecurities=${listSecurities}&`
// }
// if(IPOs){
// requestData+=`IPOs=${IPOs}&`
// }
// if(listPlatform){
// requestData+=`listPlatform=${listPlatform}&`
// }
// requestData=requestData.substring(0, requestData.length - 1);
// return request.get<any, null>(Api.searchUrl+requestData);
// };
export const getSelectList = (body:selectObj) => {
// const {Status}=body;
const status=body.status;
// var obj=JSON.stringify({status})
return request.post<any, null>(Api.selectUrl,body);
};
// export const getSearchListing =(keyword:string)=>{
// return request.post<any, null>(Api.selectUrl,keyword);
// }
Binary file not shown.

Before

Width:  |  Height:  |  Size: 528 B

After

Width:  |  Height:  |  Size: 362 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 313 B

After

Width:  |  Height:  |  Size: 292 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 312 B

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 811 B

+27 -5
View File
@@ -1,6 +1,10 @@
export default {
home:{
IPOcalendar:'IPO Calendar',
Languages:'Languages',
English:'English',
ChineseTraditional:'Chinese Traditional',
ChineseSimplified:'Chinese Simplified',
offerpricerange:'Offer Price Range',
finalofferprice:'Final Offer Price',
CommencementofTradeDate:'Commencement of Trade Date',
@@ -19,7 +23,24 @@ export default {
Mainboard:'Main board',
GEM:'GEM',
new:'New',
title:{
All:'All',
None:'None',
IPOStatus:'IPO Status',
TradingCurrency:'Trading Currency',
OfferingType:'Offering Type',
SecuritiestobeListed:'Securities to be Listed',
ListingPlatform:'Listing Platform',
ListingType:'Listing Type',
APPLY:'Apply',
Cancel:'Cancel'
},
HongKongDollar:'Hong Kong Dollar',
ChineseYuan:'Chinese Yuan',
UnitedStatesDollar:'United States Dollar',
noevent:'No event',
Norelevantselectdata:'No relevant select data',
nodata:'No Data',
},
dashboard:{
Home:'Home',
@@ -36,13 +57,13 @@ export default {
ApplicationQuantity:'Application Quantity (Shares)',
InitialShares:'Initial Shares',
FinalShares:'Final Shares',
LastUpadated:'Last Upadated',
LastUpadated:'Last Updated',
InitialAllocation:'Initial Allocation',
Public:'Public',
Institutional:'Institutional',
TotalOfferShares:'Total Offer Shares',
FinalAllocation:'Final Allocation',
Listingdate:'Listing date',
Listingdate:'Listing Date',
QuantityMillion:'Quantity (Million)',
Ratio:'Ratio'
},
@@ -97,7 +118,8 @@ export default {
Byplacingonly:'By placing only',
Bypublicofferonly:'By public offer only',
Byintroduction:'By introduction',
TransferfromGEM:'Transfer from GEM'
TransferfromGEM:'Transfer from GEM',
NominalCurrency:'Nominal Currency'
},
Offering:{
Offering:'Offering',
@@ -138,7 +160,7 @@ export default {
DealPublicOfferStartDate:'Deal / Public Offer Start Date',
PublicOfferEndDate:'Public Offer End Date',
ExpectedPriceDeterminationDate:'Expected Price Determination Date',
AllotmentAnnouncementSharePostingCertificateDispatchDate:"Allotment Announcement / Share Posting / \n Certificate Dispatch Date",
AllotmentAnnouncementSharePostingCertificateDispatchDate:"Allotment Announcement / Share Posting / Certificate Dispatch Date",
SettlementInstructionsInputDate:'Settlement Instructions Input Date',
PredepositPlacingSharesDeliveryDate:'Pre-deposit / Placing Shares Delivery Date',
+23 -3
View File
@@ -1,6 +1,7 @@
export default {
home:{
IPOcalendar:'首次公开招股日历',
Languages:'语言',
offerpricerange:'发售价范围',
finalofferprice:'最终发售价',
CommencementofTradeDate:'交易开始日期',
@@ -18,7 +19,25 @@ export default {
Cancelled:'取消',
Mainboard:'主板上市',
GEM:'创业板',
new:'新上市'
new:'新上市',
title:{
All:'全选',
None:'全不选',
IPOStatus:'首次公开招股状况',
TradingCurrency:'交易货币',
OfferingType:'招股类型',
SecuritiestobeListed:'拟上市证券',
ListingPlatform:'上市平台',
ListingType:'上市类型',
APPLY:'提交',
Cancel:'取消'
},
HongKongDollar:'港元',
ChineseYuan:'人民币',
UnitedStatesDollar:'美元',
noevent:'无事件',
Norelevantselectdata:'无相关选择数据',
nodata:'无数据',
},
dashboard:{
Home:'主页',
@@ -96,7 +115,8 @@ export default {
Byplacingonly:'限于配售',
Bypublicofferonly:'限于公开发售',
Byintroduction:'以介绍形式上市',
TransferfromGEM:'转由创业板'
TransferfromGEM:'转由创业板',
NominalCurrency:'面值货币'
},
Offering:{
Offering:'招股',
@@ -137,7 +157,7 @@ export default {
DealPublicOfferStartDate:'招股开始日期',
PublicOfferEndDate:'招股截止日期',
ExpectedPriceDeterminationDate:'预计定价日',
AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配结果公布/###/寄发股票日期',
AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配结果公布/股份过户/寄发股票日期',
SettlementInstructionsInputDate:'结算指示输入日期',
PredepositPlacingSharesDeliveryDate:'预存/配售股份交割日',
+23 -3
View File
@@ -1,6 +1,7 @@
export default {
home:{
IPOcalendar:'首次公開招股日曆',
Languages:'語言',
offerpricerange:'發售價範圍',
finalofferprice:'最終發售價',
CommencementofTradeDate:'交易開始日期',
@@ -18,7 +19,25 @@ export default {
Cancelled:'取消',
Mainboard:'主板上市',
GEM:'創業板',
new:'新上市'
new:'新上市',
title:{
All:'全選',
None:'全不選',
IPOStatus:'首次公開招股狀況',
TradingCurrency:'交易貨幣',
OfferingType:'招股類型',
SecuritiestobeListed:'擬上市證券',
ListingPlatform:'上市平台',
ListingType:'上市類型',
APPLY:'提交',
Cancel:'取消'
},
HongKongDollar:'港元',
ChineseYuan:'人民幣',
UnitedStatesDollar:'美元',
noevent:'無事件',
Norelevantselectdata:'無相關選擇數據',
nodata:'無數據',
},
dashboard:{
Home:'主頁',
@@ -96,7 +115,8 @@ export default {
Byplacingonly:'限於配售',
Bypublicofferonly:'限於公開發售',
Byintroduction:'以介紹形式上市',
TransferfromGEM:'轉由創業板'
TransferfromGEM:'轉由創業板',
NominalCurrency:'面值貨幣'
},
Offering:{
Offering:'招股',
@@ -137,7 +157,7 @@ export default {
DealPublicOfferStartDate:'招股開始日期',
PublicOfferEndDate:'招股截止日期',
ExpectedPriceDeterminationDate:'預計定價日',
AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配結果公佈/###/寄發股票日期',
AllotmentAnnouncementSharePostingCertificateDispatchDate:'分配結果公佈/股份過戶/寄發股票日期',
SettlementInstructionsInputDate:'結算指示輸入日期',
PredepositPlacingSharesDeliveryDate:'預存/配售股份交割日',
+1
View File
@@ -28,6 +28,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.config.warnHandler = (msg, instance, trace) => {}
app.config.errorHandler = (msg, instance, trace) => {}//错误捕获,不报给浏览器
app
// .use(pinia)
.use(router)
+24 -22
View File
@@ -1,29 +1,31 @@
import { createRouter, createWebHistory ,createWebHashHistory} from "vue-router";
import { staticRoutes } from "@/router/routes";
import {modelRoutes} from "./routesModel"
let shouRoute=[] as any;
function setRoutes(){
IsMobile();
window.addEventListener('resize', function() {
IsMobile2()
})
}
function IsMobile(){
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
shouRoute=modelRoutes;
}else{
shouRoute=staticRoutes;
}
}
function IsMobile2(){
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
window.location.reload()
}else{
}
}
// import {modelRoutes} from "./routesModel"
// let shouRoute=[] as any;
// function setRoutes(){
// window.addEventListener('resize', function() {
// // IsMobile3()
// })
// }
// function IsMobile(){
// if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
// shouRoute=modelRoutes;
// }else{
// shouRoute=staticRoutes;
// }
// }
// function IsMobile2(){
// if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
// window.location.reload()
// }else{
// }
// }
// function IsMobile3(){
// }
setRoutes();
// setRoutes();
var router = createRouter({
+26 -10
View File
@@ -28,6 +28,32 @@ export const staticRoutes: Array<RouteRecordRaw> = [
hidden: true,
},
},
{
path: "/home?lang=en",
name: "XLogin1",
component: () => import("@/views/login/index.vue"),
meta: {
hidden: true,
},
},
{
path: "/home?lang=tc",
name: "XLogin2",
component: () => import("@/views/login/index.vue"),
meta: {
hidden: true,
},
},
{
path: "/home?lang=sc",
name: "XLogin3",
component: () => import("@/views/login/index.vue"),
meta: {
hidden: true,
},
},
{
path: "/dashboard",
name: "Xdashboard",
@@ -38,16 +64,6 @@ export const staticRoutes: Array<RouteRecordRaw> = [
name: "XIPO",
component: () => import("@/views/IPO/index.vue")
},
{
path: "/searchdash",
name: "Xsearchdash",
component: () => import("@/views/searchdash/index.vue")
},
{
path: "/searchipo",
name: "Xsearchipo",
component: () => import("@/views/searchipo/index.vue")
},
{
path: "/IPOcalendar",
name: "Xsearchipo",
+51 -2
View File
@@ -3,12 +3,23 @@ import { defineStore } from 'pinia'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import zhTw from 'element-plus/dist/locale/zh-tw.mjs'
import request from "@/utils/request";
enum Api {
selectUrl="/api/ipo/refdata/searchAndFilter",
}
export const ipoStore = defineStore({
id: 'app',
state: () => ({
//1代表英文 2代表繁体中文 3代表简体中文
locale:1,
homeDay:new Date(),
mobileActiveShow:1,
mainExpand:-1,
filterObj:{}, //把过滤条件放在这里
keyWord:"",
selectedArr:{},
ipoIds:[] as any
}),
getters: {
localeLang(state) {
@@ -19,6 +30,44 @@ export const ipoStore = defineStore({
//更改语言的方法
setLocale(data: number) {
this.locale = data
},
setHomeDay(day:string|Date){
this.homeDay=day as Date;
},
setMobileActiveShow(num:number){
this.mobileActiveShow=num;
},
setMainExpand(num:number){
this.mainExpand=num;
},
setFilterObje(obj:any){
this.filterObj=obj;
},
// reqSearchList(keyworld:string){
// }
setSelectedArr(data:any){
this.selectedArr=data;
},
setKeyWord(keyWord:string){
this.keyWord=keyWord;
},
getSearchSelectList(){
const keyWord=this.keyWord;
const selectedArr=this.selectedArr;
return request.post<any, null>(Api.selectUrl,{keyWord,...selectedArr});
},
setIpoIds(ipoId:string|number){
const arr=this.$state.ipoIds;
const hasId= arr.some((i:any)=>i==ipoId);
const index=arr.findIndex((i:any)=>i==ipoId);
hasId&&arr.splice(index,1)
!hasId&&arr.push(ipoId)
},
isExpand(ipoId:string|number){
return this.$state.ipoIds.some((i:any)=>i==ipoId);
}
}
},
})
+6 -6
View File
@@ -62,7 +62,7 @@
<div class="Modeltable" 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="320 * (title.width / 100)" :align="title.align" :key="index" />
:label="title.header" :width="322 * (title.width / 100)" :align="title.align" :key="index" />
</el-table>
</div>
@@ -117,7 +117,7 @@ const data = defineProps<{ info: obj[], title: string }>()
@media screen and (max-width: 768px) {
display: block;
margin-top: 10rem;
margin-top: 21px;
:deep(.el-table) {
color: #355D80;
@@ -136,7 +136,7 @@ const data = defineProps<{ info: obj[], title: string }>()
}
@media screen and (max-width: 768px) {
margin: 0 15rem 0 15rem;
margin: 0 15px 0 15px;
// overflow: hidden;
}
@@ -177,7 +177,7 @@ const data = defineProps<{ info: obj[], title: string }>()
width: 200px;
@media screen and (max-width: 768px) {
margin-top: 10rem;
margin-top: 10px;
}
}
@@ -187,7 +187,7 @@ const data = defineProps<{ info: obj[], title: string }>()
font-size: 12px;
position: relative;
.name2 {}
// .name2 {}
@@ -207,7 +207,7 @@ const data = defineProps<{ info: obj[], title: string }>()
color: #355D80;
}
.info2 {}
// .info2 {}
}
.table {
+70 -28
View File
@@ -1,24 +1,24 @@
<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 />
style="background-color: #1C3F56;" :with-header="false" title="">
<Drawer :drawer="drawer" @childfn="fn" />
</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>
<img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
</div>
<div class="right" >
<div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
<img src="@/assets/1x/source10.png" alt="找不到图片">
</div>
<div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang" />
</div>
</div>
</div>
<!-- <div class="downLoad">
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
@@ -52,7 +52,6 @@ const openDrawer = () => {
drawer.value = true;
}
const handleShowLang = (e: any) => {
console.log(1111)
e.stopPropagation()
lang.value.showLang = !lang.value.showLang
}
@@ -62,12 +61,37 @@ onMounted(() => {
lang.value.showLang = false
}
})
//const data1 =ref()
// onMounted(() => {
// const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
// data1.value = obj
// console.log(data1.value);
// })
function fn(data: any) {
drawer.value = data
}
onUnmounted(() => {
document.documentElement.onclick = null
})
</script>
<style lang="scss" scoped>
@media screen and (max-width: 768px) {
.headerWrap {
margin-left: 18px;
}
}
.right{
display: flex;
margin-left: 10px;
margin-top: 5px;
align-items: center;
@media screen and (max-width: 768px) {
margin-right: 8vw;
//background-color: red;
}
}
.langWrap {
// position: absolute;
// // top:-20px;
@@ -79,12 +103,13 @@ onUnmounted(() => {
@media screen and (max-width: 768px) {
display: none;
// display: flex;
}
.second {
width: 32px;
height: 36px;
width: 25px;
height: 30px;
margin-top: 4px;
&:hover {
@@ -97,18 +122,24 @@ onUnmounted(() => {
position: absolute;
top: 50px;
left: -50px;
@media screen and (max-width: 768px) {
left: -110px;
}
}
.headerWrap {
display: flex;
justify-content: space-between;
height: 50px;
width: 1000px;
@media screen and (max-width: 768px) {
.left-1 {
display: flex;
justify-content: space-between;
width: 80vw;
// background-color: red;
align-items: center;
height: 30px;
}
}
@@ -116,13 +147,22 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
width: fit-content;
position: relative;
align-items: center;
//position: relative;
//background-color: red;
@media screen and (max-width: 768px) {
width: 100vw;
// background-color: #1C3F56;
}
.menu {
display: none;
@media screen and (max-width: 768px) {
display: block;
vertical-align: middle;
width: 25px;
height: 20px;
}
}
@@ -133,32 +173,34 @@ onUnmounted(() => {
font-weight: bolder;
@media screen and (max-width: 768px) {
font-size: 26rem;
transform: translateX(-60rem);
font-size: 24px;
margin-left: 10px;
padding-top: 4px;
//transform: translateX(-60px);
// display: inline;
}
}
.search {
margin-top: 5px;
background-color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
//background-color: #fff;
// width: 30px;
// height: 30px;
// border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
transform: translateY(5px);
// margin-left: 15px;
// margin-top: 6px;
cursor: pointer;
img {
width: 18px;
height: 18px;
width: 25px;
height: 30px;
@media screen and (max-width: 768px) {
margin-top: -10px;
}
}
@media screen and (max-width: 768px) {
transform: translateY(-0.5vh);
}
}
}
+19 -6
View File
@@ -1,6 +1,8 @@
<template>
<div class="item">
<a @click="scrollto(index)" v-for="(item, index) in list" :key="index">{{ item }}</a>
<a @click="scrollto(index)" v-for="(item, index) in list " :class="ipoNavActive == index ? 'active' : ''"
:key="index">{{
item }}</a>
</div>
</template>
@@ -11,17 +13,22 @@ export default {
</script>
<script lang="ts" setup>
import { ref, defineProps } from "vue"
import { ref, defineProps, computed, defineExpose } from "vue"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
const { proxy } = (getCurrentInstance() as any)
const props = defineProps<{ scroll: Function }>()
const ipoNavActive = ref(0)
const scrollto = (index: number) => {
const ref11 = "i" + index + "TOP"
console.log(ref11)
// console.log(ref11)
ipoNavActive.value = index
props.scroll(ref11)
}
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')])
defineExpose({
ipoNavActive
})
const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')]))
</script>
<style lang="scss" scoped>
@@ -31,8 +38,9 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
@media screen and (max-width: 768px) {
margin-top: 0px;
width: 100vw;
// width: 100vw;
overflow-x: scroll;
margin-left: 15px;
}
a {
@@ -47,9 +55,14 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
white-space: nowrap;
&:hover {
// background-color: #1C3F56;
// color: #fff;
cursor: pointer;
}
&.active {
background-color: #1C3F56;
color: #fff;
cursor: pointer;
}
}
}
+805 -142
View File
File diff suppressed because it is too large Load Diff
+173 -31
View File
@@ -1,4 +1,5 @@
<template>
<div class="right">
<div class="right-top">
<img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
@@ -11,28 +12,40 @@
<template #header="{ date }">
<el-button size="small" @click="selectDate('prev-month')">
<img src="@/assets/1x/source11.png">
<img src="@/assets/1x/source14.png">
</el-button>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ showMounth(date) }}</span>
<span class="month">{{ date }}</span>
<el-button size="small" @click="selectDate('next-month')">
<img src="@/assets/1x/source12.png">
<img src="@/assets/1x/source15.png">
</el-button>
</template>
<!-- <template #date-cell="{ data }">
<template #dateCell="{ data }">
</template> -->
<p style="margin:0px">
{{ data.day.split('-').slice(2).join() * 1 }}
<div v-for="(i, index) in dayTime" :key="index">
<div v-if="i.split('-').slice(2).join() * 1<=9">
<div v-if="data.day == i" class="yuan1"></div>
</div>
<div v-else>
<div v-if="data.day == i" class="yuan"></div>
</div>
</div>
</p>
</template>
</el-calendar>
</div>
<div class="right-bottom1">
<Event v-if="Eventdata.length" :data="Eventdata" />
<div v-else class="right-bottom-title1">No event</div>
<div v-else class="right-bottom-title1">{{ $t(i18n.global.t('home.noevent')) }}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
@@ -47,15 +60,29 @@ import moment from "moment"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date())
const calendar = ref()
const Eventdata = ref([])
const emit = defineEmits(['close'])
//const Eventdata = ref([])
const selectDate = (val: string) => {
calendar.value.selectDate(val)
}
watch(dayValue, async (ne, ol) => {
const day = moment(ne).format("YYYY-MM-DD")
const result = await getEventData(day);
setEventdata((result as any).data)
})
const dayTime = ref()
const getcalendar = async () => {
const res = await getDate()
dayTime.value = (res as any).data
console.log(dayTime.value);
}
const showMounth = (date: any) => {
const arr = date.split(" ")
if (arr.length == 3) {
@@ -68,7 +95,74 @@ onMounted(async () => {
var day = moment(Date.now()).format("YYYY-MM-DD")
const result = await getEventData(day);
setEventdata((result as any).data)
getcalendar()
})
const Eventdata = ref([
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// number: 2370
// },
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// number: 2370
// }, {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// number: 2372
// },
// {
// listPlatform1:"主板",
// name: "力高健康生活有限公司",
// logo:"-",
// number: 2373
// },
// {
// listPlatform1:"主板",
// name: "力高健康生活有限公司",
// logo:"-",
// number: 2374
// },
// {
// listPlatform1:"主板",
// name: "力高健康生活有限公司",
// logo:"-",
// number: 2375
// },
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// number: 2378
// },
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// number: 2374
// },
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// number: 2378
// },
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司111111111111111111111111111",
// number: 2380
// }, {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司1111111111111111111111111111",
// number: 2381
// }
])
const setEventdata = (EventD: any) => {
Eventdata.value = EventD.map((item: any) => {
const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
@@ -83,56 +177,91 @@ const setEventdata = (EventD: any) => {
}
const backRouter = () => {
proxy.$router.go(-1)
//const drawer2 = false
//emit('close',false)
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 768px) {
.login{
width: 100vw;
height: fit-content;
}
.yuan {
width: 12px;
height: 12px;
background-color: #f7be39;
position: absolute;
//right: 20px;
//top: 36px;
transform: translateY(11px);
//transform: translateX(3px);
margin-left: 2px;
border-radius: 10px;
}
.yuan1{
width: 12px;
height: 12px;
background-color: #f7be39;
position: absolute;
//right: 20px;
//top: 36px;
transform: translateY(11px);
//transform: translateX(3px);
margin-left: -2px;
border-radius: 10px;
}
.right {
width: 100vw;
box-sizing: border-box;
height: 100%;
// height: 100%;
padding-bottom: 80px;
background-color: #1f4055;
z-index: 1;
border: #1f4055 1px solid;
height: 100%;
.right-top {
display: flex;
align-items: center;
// margin-left: 40px;
margin-top: 20rem;
margin-top: 20px;
transform: translateX(-10px);
height: 25px;
.top-title {
text-align: center;
display: inline-block;
font-size: 25rem;
font-size: 25px;
color: #ffffff;
margin-left: 10px;
padding-top: 6px;
}
.icon1 {
width: 25rem;
height: 25rem;
margin-left: 30rem;
width: 25px;
height: 25px;
margin-left: 30px;
}
.icon2 {
width: 25rem;
height: 25rem;
margin-left: 10rem;
width: 25px;
height: 25px;
margin-left: 10px;
}
}
.right-bottom {
width: 100vw;
background-color: #ffffff;
height: 400px;
height: fit-content;
margin-top: 25px;
// margin-left: 20px;
// transform: translateX(-50rem);
// transform: translateX(-50px);
.month {
font-size: 25rem;
font-size: 25px;
color: #000000;
font-weight: bold;
}
@@ -144,16 +273,16 @@ const backRouter = () => {
width: 90vw;
background-color: #ffffff;
height: 40vh;
margin-top: 150px;
margin-top: 40px;
// margin-left: 20px;
// text-align: center;
// line-height: 500px;
display: flex;
justify-content: center;
align-items: center;
// overflow-y: scroll;
.right-bottom-title1 {
// background-color: red;
color: #1f4055;
font-size: 20px;
align-items: center;
@@ -196,7 +325,20 @@ const backRouter = () => {
:deep(.el-calendar__body) {
background-color: #e8ebee;
height: fit-content;
padding: 12px 20px 18px
}
:deep(.el-calendar-table thead th) {
// padding: 2px 0;
font-weight: 550;
}
:deep(.el-calendar-table) {
//margin-top: 20px;
width: 100vw;
transform: translateX(-19px);
table-layout: fixed;
}
:deep(.el-calendar) {
@@ -217,10 +359,11 @@ const backRouter = () => {
background-color: rgb(255, 255, 255);
height: 33px;
border: none;
margin-top: 30px;
margin-top: 18px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
// font-family: "Calibri"
}
@@ -244,17 +387,16 @@ const backRouter = () => {
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
// background-color: #e36466;
border: 5px solid #e36466;
border: 3px solid #e36466;
}
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
color: black;
}
:deep(.is-selected) {
color: red;
}
}
</style>
+135 -43
View File
@@ -2,28 +2,28 @@
<div class="headerWrap">
<div class="left">
<div class="left-1">
<div class="menu">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="drawShow" >
</div>
<img src="@/assets/1x/1x/source5.png" alt="menu" @click="drawShow" class="menu">
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
</div>
<div class="left-right">
<div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
<img src="@/assets/1x/source10.png" alt="找不到图片">
</div>
<div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang" />
</div>
</div>
</div>
<div class="right">
<div class="right" v-if="data1!=null">
<li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
<li class="show">
<!-- <li class="show">
<span>Show Value</span>
<el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
</li>
</li> -->
</div>
</div>
</template>
@@ -50,11 +50,15 @@ console.log(1111)
e.stopPropagation()
lang.value.showLang = !lang.value.showLang
}
const data1 = ref()
onMounted(() => {
document.documentElement.onclick = function () {
if (!lang.value.showLang) return
lang.value.showLang = false
}
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
data1.value = obj
})
onUnmounted(() => {
document.documentElement.onclick = null
@@ -79,28 +83,55 @@ const drawShow = () => {
</script>
<style lang="scss" scoped>
.langWrap {
// position: absolute;
// // top:-20px;
// // top:-25px;
// left: 260px;
// display: flex;
// align-items: end;
//background-color: black;
position: relative;
margin-left: 15px;
@media screen and (max-width: 768px) {
display: none;
// position: fixed;
// top:50px;
// left: 0;
// right: 0;
}
.second {
width: 32px;
height: 36px;
width: 25px;
height: 30px;
margin-top: 4px;
&:hover {
transform: scale(1.2);
}
}
}
.lang {
position: absolute;
top: 50px;
left: -50px;
@media screen and (max-width: 768px) {
left: -120px;
}
}
.left-right {
display: flex;
//justify-content: space-between;
//width: 90px;
align-items: center;
// margin-right: 10rem;
// background-color: #2B4A60;
margin-left: 10px;
}
.headerWrap {
@@ -108,89 +139,150 @@ const drawShow = () => {
justify-content: space-between;
padding-top: 40px;
transform: translateY(-20px);
height: 50px;
width: 1000px;
//background-color: red;
li{
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
flex-direction: column;
position: relative;
.left-1 {
display: flex;
justify-content: space-between;
width: 40vw;
// justify-content: space-between;
// width: 240px;
margin-left: 5vw;
// background-color: red;
span{
margin-left: 10px;
padding-top: 4px;
}
height: 30px;
align-items: center;
}
.left-right {
display: flex;
// justify-content: space-between;
// width: 25vw;
margin-right: 5vw;
}
}
.left {
display: flex;
position: relative;
// position: relative;
width: fit-content;
// background-color: gray;
@media screen and (max-width: 768px) {
justify-content: space-between;
width: 100vw;
align-items: center;
}
.menu {
display: none;
@media screen and (max-width: 768px) {
display: block;
// margin-top: 3px;
vertical-align: middle;
width: 25px;
height: 20px;
}
}
}
}
span {
color: #2B4A60;
font-size: 45px;
font-weight: 900;
display: inline-block;
min-width: 200px;
// background-color: red;
@media screen and (max-width: 768px) {
font-size: 26rem;
font-size: 24px;
// margin-top: 4px;
}
}
.search {
background-color: #fff;
//background-color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
margin-top: 6px;
// margin-left: 15px;
// margin-top: 6px;
cursor: pointer;
img {
width: 18px;
height: 18px;
width: 25px;
height: 30px;
@media screen and (max-width: 768px) {
margin-top: -8px;
}
}
}
}
.right {
font-size: 20px;
min-width: 50px;
//background-color: green;
margin-top: 7px;
// background-color: #2B4A60;
@media screen and (max-width: 768px) {
width: 100vw;
margin-top: 10rem;
width: 90vw;
//color: red;
margin-top: 2vh;
// transform: translateX(-10px);
// width: 250px;
margin-left: 5vw;
// background-color: black;
display: flex;
justify-content: end;
}
.time {
color: #435F70;
@media screen and (max-width: 768px) {
float: right;
font-size: 15rem;
// float: right;
font-size: 15px;
//background-color: red;
}
}
.show {
margin-top: 5px;
text-align: right;
color: #27485E;
font-weight: 600;
span {
margin-right: 15px;
}
// .show {
// margin-top: 5px;
// text-align: right;
// color: #27485E;
// font-weight: 600;
:deep(.el-switch__action) {
background-color: #E86666;
}
@media screen and (max-width: 768px){
font-size: 15rem;
margin-top: 13rem;
transform: translateX(200rem);
}
}
// 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>
+165 -48
View File
@@ -1,21 +1,19 @@
<template>
<div class="bigbox" @click="handleclick(props.data)">
<div class="title">
<img :src="props.data.logolinks" />
</div>
<Aimage :src="props.data.logolinks" :number="props.data.number"/>
<div class="list">
<div class="list-content">
<div class="top">
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
</h4>
<el-icon class="icon1" @click="cardDetail">
<el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
<ArrowUp v-if="expand" />
<ArrowDown v-else />
</el-icon>
</div>
<h4>{{ props.data.number }}</h4>
<div v-if="expand" class="details">
<h5 v-for="(item,index) in detailsItem" :key="index">
<h5 v-for="(item, index) in detailsItem33" :key="index">
<span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" />
@@ -24,12 +22,16 @@
</h5>
</div>
<h5 v-else>{{ code22 }}</h5>
<h4>HKD {{ props.data.HKD }}</h4>
<h6>{{props.data.price? $t(i18n.global.t('home.finalofferprice')):$t(i18n.global.t('home.offerpricerange')) }}</h6>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code33 }}</h5>
<h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
<h5>{{ props.data.time }}</h5>
<h6>{{props.data.listingDate? $t(i18n.global.t('home.CommencementofTradeDate')):$t(i18n.global.t('home.ExpectedPriceDeterminationDate')) }}</h6>
<h6>{{ props.data.listingDate ?
$t(i18n.global.t('home.CommencementofTradeDate')) :
$t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
}}</h6>
</div>
</div>
</div>
@@ -41,34 +43,35 @@ export default {
</script>
<script lang="ts" setup>
import { size } from 'lodash';
import { ref, onMounted, onUpdated } from 'vue'
import { ref, onMounted, computed, watch } from 'vue'
import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router';
import Aimage from "./image1/index.vue";
const { proxy } = (getCurrentInstance() as any)
const store = ipoStore();
const currentDate = ref(new Date())
const expand = ref(false);
const fontstyle = ref()
const router = useRouter()
const detailsItem=[
const detailsItem = ref([
{
name: proxy.$t('home.DealInitiated'),
icon:1
icon: 0
},
{
name: proxy.$t('home.PublicOfferClosed'),
icon:1
icon: 0
},
{
name: proxy.$t('home.ApplicationValidated'),
icon:1
icon: 0
},
{
name: proxy.$t('home.AllotmentConfirmed'),
icon:2
icon: 0
}
, {
name: proxy.$t('home.MoneySettlement'),
@@ -87,7 +90,7 @@ const detailsItem=[
name: proxy.$t('home.TradingStarted'),
icon: 0
}
]
])
const props = defineProps({
data: {
type: Object,
@@ -101,14 +104,89 @@ const props = defineProps({
trading: "",
logolinks: "",
status: 0,
listingDate:""
listingDate: "",
ipoID: 0,
tradeCurrency: ""
}
}
}
})
// console.log(props.data.tradeCurrency);
const code22 = ref('')
onUpdated(() => {
onMounted(() => {
setCodefn()
})
watch(props, (newValue: any, oldValue: any) => {
setCodefn();
}, { deep: true })
const code33 = computed(() => {
return {
25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'),
45: proxy.$t('home.AllotmentConfirmed'),
50: proxy.$t('home.MoneySettlement'),
55: proxy.$t('home.AllocationConfirmed'),
60: proxy.$t('home.placingApproved'),
65: proxy.$t('home.AllotmentResultsApproved'),
70: proxy.$t('home.TradingStarted'),
80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'),
}[props.data.status as number]
})
const detailsItem33 = computed(() => {
var tag = true;
const arr = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
return [
{
name: proxy.$t('home.DealInitiated'),
icon: arr[0].icon
},
{
name: proxy.$t('home.PublicOfferClosed'),
icon: arr[1].icon
},
{
name: proxy.$t('home.ApplicationValidated'),
icon: arr[2].icon
},
{
name: proxy.$t('home.AllotmentConfirmed'),
icon: arr[3].icon
}
, {
name: proxy.$t('home.MoneySettlement'),
icon: arr[4].icon
},
{
name: proxy.$t('home.AllocationConfirmed'),
icon: arr[5].icon
}, {
name: proxy.$t('home.placingApproved'),
icon: arr[6].icon
}, {
name: proxy.$t('home.AllotmentResultsApproved'),
icon: arr[7].icon
}, {
name: proxy.$t('home.TradingStarted'),
icon: arr[8].icon
}
]
})
function setCodefn() {
// console.log('修改了data',newValue,oldValue);
var obj = {
25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
@@ -128,6 +206,18 @@ onUpdated(() => {
code22.value = obj[stron];
// console.log('kkkk',stron,obj[stron])
}
var tag = true;
detailsItem.value = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
function isValidKey(
key: string | number | symbol,
@@ -136,14 +226,24 @@ onUpdated(() => {
return key in object;
}
})
}
const cardDetail = (e: any) => {
e.stopPropagation();
expand.value = !expand.value;
}
// const cancelPop = (event:any)=>{
// let tp = document.querySelector(".details")
// if(tp){
// if(!tp.contains(event.target)){
// expand.value = false;
// }
// }
// }
//路由传参
const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.number)
localStorage.setItem('ipoID', item.ipoID)
//console.log(item);
localStorage.setItem('itemData', JSON.stringify(item))
router.push({
name: 'Xdashboard',
@@ -160,7 +260,7 @@ const handleclick = (item: any) => {
width: 270px;
// height: 360px;
height: fit-content;
min-height: 350px;
// min-height: 350px;
margin-top: 30px;
margin-left: 20px;
background-color: #e7efec;
@@ -168,32 +268,45 @@ const handleclick = (item: any) => {
overflow: hidden;
border: 1px solid #DDE2E6;
cursor: pointer;
// font-family: "Calibri";
// @media screen and (max-width: 768px){
// width: 270rem;
// height: 360rem;
// }
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
// @media screen and (max-width: 768px){
// font-size: 80px;
// .imglogo{
// background-color: #23445a;
// height: 15vh;
// line-height: 15vh;
// text-align: center;
// overflow: hidden;
// font-size: 38px;
// font-weight: bold;
// font-family: "Calibri";
// color: #fff;
// }
// .title {
// background-color: #fff;
// height: 120px;
// line-height: 120px;
// font-size: 40px;
// color: #fff;
// overflow: hidden;
// position: relative;
// font-family: "Calibri";
// // @media screen and (max-width: 768px){
// // font-size: 80px;
// // }
// img {
// max-height: 100%;
// max-width: 100%;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.list {
// height: 150px;
@@ -202,9 +315,11 @@ const handleclick = (item: any) => {
justify-content: center;
margin-top: 20px;
font-family: "Calibri";
.list-content {
margin-top: 10px;
width: 230px;
// height: 100%;
.details {
.icon1 {
@@ -212,6 +327,7 @@ const handleclick = (item: any) => {
transform: translateY(2.5px);
}
}
h4 {
font-size: 20px;
color: #3b6181;
@@ -238,14 +354,14 @@ const handleclick = (item: any) => {
.top {
display: flex;
justify-content: space-between;
}
.icon {
@media screen and (max-width: 768px) {
width: 13rem;
height: 13rem;
}
width: 13px;
height: 13px;
}
@@ -257,15 +373,16 @@ const handleclick = (item: any) => {
// background-color: red;
box-shadow: 10px 15px 10px #9A9A9A;
}
@media screen and (max-width: 768px) {
.bigbox {
width: 76vw;
min-height: 310rem;
height:fit-content;
// min-height: 310rem;
// height: fit-content;
margin-top: 14rem !important;
margin-top: 14px !important;
cursor: pointer;
}
+17 -9
View File
@@ -1,9 +1,10 @@
<template>
<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 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>
</template>
@@ -28,10 +29,10 @@ const props = defineProps({
}
)
const leftWidth = computed(()=>{
return (props.leftNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
return (props.leftNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
})
const rightWidth = computed(()=>{
return (props.rightNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
return (props.rightNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
})
@@ -41,8 +42,9 @@ const rightWidth = computed(()=>{
display: flex;
align-items: center;
justify-content: space-between;
height: 20px;
width: 400px;
height: 28px;
width: 405px;
@media screen and (max-width: 768px){
width: 80vw;
}
@@ -51,21 +53,27 @@ const rightWidth = computed(()=>{
.left{
display: flex;
align-items: center;
justify-content: center;
justify-content: start;
height: 100%;
background-color:#ee4040 ;
font-weight: bold;
color: #fff;
.number{
z-index: 1;
}
}
.right {
display: flex;
align-items: center;
justify-content: center;
justify-content: end;
height: 100%;
background-color:#98c2f2 ;
font-weight: bold;
color: #fff;
.number{
z-index: 1;
}
}
/* .left {
+87
View File
@@ -0,0 +1,87 @@
<template>
<div>
<div class="title" v-if="isImage">
<img :src="props.src" />
</div>
<div class="title2" v-else>
{{props.number}}
</div>
</div>
</template>
<script lang="ts">
export default {
name: "XEvent",
};
</script>
<script lang="ts" setup>
import {ref,onMounted,watch,onUpdated} from 'vue'
const props = defineProps({
src: {
type: String,
required:true
},
number: {
type: String,
required:true
}
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
isImage.value= false;
};
}catch(error){
console.log('error')
}
}
onUpdated(()=>{
setTimeout(()=>{
checkImgExists(props.src)
},1000)
})
onMounted(()=>{
setTimeout(()=>{
checkImgExists(props.src)
},1000)
})
</script>
<style lang="scss" scoped>
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.title2{
background-color: #23445a;
color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
text-align: center;
}
</style>
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -71,7 +71,7 @@ const handDashBoard = () => {
margin-top: 10px;
margin-left: 20px;
background-color: #fff;
font-size: 24px;
font-size: 21px;
display: flex;
align-items: center;
color: #2B4A60;
+11 -6
View File
@@ -86,14 +86,16 @@ const platformTo=(listPlatform1:string)=>{
border-left: 3px solid #D3DDE4;
border-bottom: 2px solid #D3DDE4;
box-sizing: border-box;
// background-color: #DA8B2B;
.header {
margin-top: 4px;
position: relative;
// background-color: red;
width: 100%;
height: 45px;
// transform: translateY(-40px);
// margin-left: -30px;
// z-index: 1;
.c {
width: 30px;
height: 35px;
@@ -151,11 +153,14 @@ const platformTo=(listPlatform1:string)=>{
.content {
margin-left: 22px;
border-left: 3px solid #EEEFF1;
height: 100%;
height: 270px;
padding-left: 25px;
overflow: scroll;
// overflow: scroll;
overflow-y: scroll;
// background-color: red;
@media screen and (max-width: 768px) {
height: 30vh;
}
li {
line-height: 50px;
+31 -4
View File
@@ -14,31 +14,52 @@ export default {
<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { ref, defineExpose, inject } from 'vue';
import { getCurrentInstance } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
import router from '@/router';
const store = ipoStore()
const route = useRouter()
const { proxy } = (getCurrentInstance() as any)
const showLang = ref(false)
const reflashRouter = inject('reflashRouter') as Function
const IpoReflash = () => {
// if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
// reflashRouter()
// }
// reflashRouter()
// if(route.options.history.location=="/home"){
// reflashRouter()
// }
}
const handleLang1 = () => {
if (proxy.$i18n.locale = 'en') {
proxy.$i18n.locale = 'en'
}
store.setLocale(1)
IpoReflash()
}
const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') {
proxy.$i18n.locale = 'zhCt'
}
store.setLocale(2)
IpoReflash()
}
const handleLang3 = () => {
if (proxy.$i18n.locale = 'zhCn') {
proxy.$i18n.locale = 'zhCn'
}
store.setLocale(3)
IpoReflash()
}
defineExpose({
showLang
@@ -58,7 +79,13 @@ defineExpose({
padding-top: 10px;
padding-bottom: 10px;
position: relative;
z-index: 1;
z-index: 99;
@media screen and (max-width: 768px) {
display: flex;
flex-direction: column;
z-index: 9999;
}
li {
text-align: center;
+285 -71
View File
@@ -1,33 +1,29 @@
<template>
<div class="bigbox" @click="handleclick(props.data)">
<div class="title">
<img v-lazy="props.data.logolinks" />
</div>
<div class="list">
<Aimage @click="handleclick(props.data)" :src="props.data.logolinks" :number="props.data.number" />
<div class="listexpand" v-if="store.isExpand(props.data.ipoID)" @click="handleclick(props.data)">
<div class="list-content">
<div class="top">
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
</h4>
<el-icon class="icon1" @click="cardDetail">
<ArrowUp v-if="expand" />
<ArrowUp v-if="store.isExpand(props.data.ipoID)" />
<ArrowDown v-else />
</el-icon>
</div>
<h4>{{ props.data.number }}</h4>
<div v-if="expand" class="details">
<h5 v-for="(item, index) in detailsItem" :key="index">
<div v-if="store.isExpand(props.data.ipoID)" class="details">
<h5 v-for="(item, index) in detailsItem33" :key="index">
<span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" />
<!-- <Filter v-if="item.icon==2" /> -->
<img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
</el-icon>
</h5>
</div>
<h5 v-else>{{ code22 }}</h5>
<h4>HKD {{ props.data.HKD }}</h4>
<h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code22
}}</h5>
<h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
@@ -38,6 +34,39 @@
}}</h6>
</div>
</div>
<div class="list" v-else @click="handleclick(props.data)">
<div class="list-content">
<div class="top">
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
</h4>
<el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
<ArrowUp v-if="store.isExpand(props.data.ipoID)" />
<ArrowDown v-else />
</el-icon>
</div>
<h4>{{ props.data.number }}</h4>
<div v-if="store.isExpand(props.data.ipoID)" class="details">
<h5 v-for="(item, index) in detailsItem33" :key="index">
<span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" />
<img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
</el-icon>
</h5>
</div>
<h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code33
}}</h5>
<h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
<h5>{{ props.data.time }}</h5>
<h6>{{ props.data.listingDate ?
$t(i18n.global.t('home.CommencementofTradeDate')) :
$t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
}}</h6>
</div>
</div>
</template>
<script lang="ts">
@@ -47,17 +76,18 @@ export default {
</script>
<script lang="ts" setup>
import { size } from 'lodash';
import { ref, onMounted, onUpdated } from 'vue'
import { ref, onMounted, computed, watch } from 'vue'
import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router';
import Aimage from "./a-image/index.vue";
const { proxy } = (getCurrentInstance() as any)
const store = ipoStore();
const currentDate = ref(new Date())
const expand = ref(false);
const fontstyle = ref()
const router = useRouter()
const detailsItem = ref([
{
@@ -94,29 +124,95 @@ const detailsItem = ref([
icon: 0
}
])
const props = defineProps({
data: {
type: Object,
default: function () {
return {
HKD: "",
number: 0,
price: "",
time: "",
title: "",
trading: "",
logolinks: "",
status: 0,
listingDate: "",
ipoID:0
interface dataType {
HKD: string,
number: string,
price: string,
time: string,
title: string,
trading: string,
logolinks: string,
status: string,
listingDate: string,
ipoID: number,
tradeCurrency: string
}
}
}
})
const props = defineProps<{ data: dataType, index: number }>()
// console.log(props.data.tradeCurrency);
const code22 = ref('')
onUpdated(() => {
onMounted(() => {
setCodefn()
})
watch(props, (newValue: any, oldValue: any) => {
setCodefn();
}, { deep: true })
const code33 = computed(() => {
return {
25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'),
45: proxy.$t('home.AllotmentConfirmed'),
50: proxy.$t('home.MoneySettlement'),
55: proxy.$t('home.AllocationConfirmed'),
60: proxy.$t('home.placingApproved'),
65: proxy.$t('home.AllotmentResultsApproved'),
70: proxy.$t('home.TradingStarted'),
80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'),
}[props.data.status as unknown as number]
})
const detailsItem33 = computed(() => {
var tag = true;
const arr = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
return [
{
name: proxy.$t('home.DealInitiated'),
icon: arr[0].icon
},
{
name: proxy.$t('home.PublicOfferClosed'),
icon: arr[1].icon
},
{
name: proxy.$t('home.ApplicationValidated'),
icon: arr[2].icon
},
{
name: proxy.$t('home.AllotmentConfirmed'),
icon: arr[3].icon
}
, {
name: proxy.$t('home.MoneySettlement'),
icon: arr[4].icon
},
{
name: proxy.$t('home.AllocationConfirmed'),
icon: arr[5].icon
}, {
name: proxy.$t('home.placingApproved'),
icon: arr[6].icon
}, {
name: proxy.$t('home.AllotmentResultsApproved'),
icon: arr[7].icon
}, {
name: proxy.$t('home.TradingStarted'),
icon: arr[8].icon
}
]
})
function setCodefn() {
// console.log('修改了data',newValue,oldValue);
var obj = {
25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
@@ -132,7 +228,6 @@ onUpdated(() => {
}
// console.log('&&&&', props.data.status)
const stron = props.data.status
if (isValidKey(stron, obj)) {
code22.value = obj[stron];
// console.log('kkkk',stron,obj[stron])
@@ -148,6 +243,7 @@ onUpdated(() => {
return { ...item, icon: 0 }
}
})
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
function isValidKey(
key: string | number | symbol,
@@ -156,17 +252,43 @@ onUpdated(() => {
return key in object;
}
})
}
const cardDetail = (e: any) => {
e.stopPropagation();
expand.value = !expand.value;
store.setIpoIds(props.data.ipoID)
// expand.value = !expand.value;
// if (store.$state.mainExpand == props.index) {
// store.setMainExpand(-1)
// } else {
// store.setMainExpand(props.index)
// }
// let tp = document.querySelector(".icon1")
// if(!(tp as any).contains(e.target)){
// expand.value = false;
// }
}
// const cancelPop = (event:any)=>{
// let tp = document.querySelector(".details")
// if(tp){
// if(!tp.contains(event.target)){
// expand.value = false;
// }
// }
// }
//路由传参
const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.ipoID)
console.log(item);
// localStorage.setItem('ipoID', item.ipoID)
//console.log(item);
// localStorage.setItem('itemData', JSON.stringify(item))
localStorage.setItem('itemData', JSON.stringify(item))
sessionStorage.setItem('ipoID', item.ipoID)
sessionStorage.setItem('itemData', JSON.stringify(item))
router.push({
name: 'Xdashboard',
params: { data: JSON.stringify(item) }
@@ -177,12 +299,45 @@ const handleclick = (item: any) => {
</script>
<style lang="scss" scoped>
// .imglogo{
// background-color: #23445a;
// height: 15vh;
// line-height: 15vh;
// text-align: center;
// overflow: hidden;
// font-size: 38px;
// font-weight: bold;
// font-family: "Calibri";
// color: #fff;
// }
// .title {
// background-color: #fff;
// height: 120px;
// line-height: 120px;
// font-size: 40px;
// color: #fff;
// overflow: hidden;
// position: relative;
// font-family: "Calibri";
// // @media screen and (max-width: 768px){
// // font-size: 80px;
// // }
// img {
// max-height: 100%;
// max-width: 100%;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
.bigbox {
width: 270px;
// height: 360px;
height: fit-content;
min-height: 350px;
// min-height: 350px;
margin-top: 30px;
margin-left: 20px;
background-color: #e7efec;
@@ -196,36 +351,25 @@ const handleclick = (item: any) => {
// width: 270rem;
// height: 360rem;
// }
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
// @media screen and (max-width: 768px){
// font-size: 80px;
// }
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.list {
.listexpand {
// height: 150px;
width: 100%;
width: 270px;
display: flex;
justify-content: center;
margin-top: 20px;
font-family: "Calibri";
background-color: #e7efec;
overflow: hidden;
border: 1px solid #DDE2E6;
cursor: pointer;
margin-top: 120px;
margin-left: -271px;
border-radius: 0px 0px 20px 20px;
margin-right: 20px;
margin-bottom: 30px;
height: fit-content;
.list-content {
margin-top: 10px;
@@ -265,17 +409,87 @@ const handleclick = (item: any) => {
.top {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.icon {
@media screen and (max-width: 768px) {
width: 13rem;
height: 13rem;
}
width: 13px;
width: 11px;
height: 13px;
}
width: 11px;
height: 13px;
}
}
}
.list {
// height: 150px;
width: 270px;
display: flex;
justify-content: center;
font-family: "Calibri";
background-color: #e7efec;
overflow: hidden;
border: 1px solid #DDE2E6;
cursor: pointer;
margin-top: 120px;
margin-left: -271px;
border-radius: 0px 0px 20px 20px;
margin-right: 20px;
margin-bottom: 30px;
height: 260px;
.list-content {
margin-top: 10px;
width: 230px;
// height: 100%;
.details {
.icon1 {
margin-left: 3px;
transform: translateY(2.5px);
}
}
h4 {
font-size: 20px;
color: #3b6181;
margin-bottom: 8px;
font-weight: 600;
font-family: "Calibri";
}
h5 {
font-size: 16px;
color: #4b6d8a;
margin-bottom: 8px;
font-weight: 400;
font-family: "Calibri";
}
h6 {
font-size: 12px;
color: #5e7e98;
margin-bottom: 8px;
// font-family: "Calibri";
}
.top {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.icon {
@media screen and (max-width: 768px) {
width: 11px;
height: 13px;
}
width: 11px;
height: 13px;
}
}
}
@@ -290,10 +504,10 @@ const handleclick = (item: any) => {
.bigbox {
width: 76vw;
min-height: 310rem;
height: fit-content;
// min-height: 310rem;
// height: fit-content;
margin-top: 14rem !important;
margin-top: 14px !important;
cursor: pointer;
}
+383 -57
View File
@@ -1,10 +1,30 @@
<template>
<div class="selectWrap" v-if="showSelect" @click="preVant">
<div class="selectWrap" @click="preVant">
<div class="box">
<div class="content">
<div class="title">IPO Status</div>
<li>
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" @click="ipoStatusSlect(item.key)">
<div class="word" :class="checkedAll == 1 && 'active'" @click="checkAll(1)">
{{ $t(i18n.global.t('home.title.All')) }}
<div class="check">
<el-icon v-if="checkedAll == 1">
<Check></Check>
</el-icon>
</div>
</div>
<div class="word" :class="checkedAll == 2 && 'active'" @click="checkAll(2)">{{
$t(i18n.global.t('home.title.None')) }}
<div class="check">
<el-icon v-if="checkedAll == 2">
<Check></Check>
</el-icon>
</div>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
<li>
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'ipoStatus')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -13,10 +33,10 @@
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">tradingCurrency</div>
<div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
<li>
<div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
@click="tradingCurrencySlect(item.key)">
:class="item.isSelcted && 'active'" @click="checkOne(item.key, 'tradingCurrency')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -25,10 +45,36 @@
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
<li>
<div class="word" v-for="item in obj.offeringType" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'offeringType')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
<li>
<div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key"
:class="item.isSelcted && 'active'" @click="checkOne(item.key, 'SecuritiestobeListed')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li>
</div>
<div class="footer">
<button @click="confirm">Apply</button>
<button @click="confirm">Cancel</button>
<button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
<button @click="Cancel">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>
</div>
</div>
@@ -43,104 +89,339 @@ export default {
</script>
<script lang="ts" setup>
import { ref, defineExpose, reactive } from 'vue';
import { ref, defineExpose, reactive, inject, onMounted } from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import { getSelectList } from "@/api/reqIpo/ipo"
import { ipoStore } from "@/stores/ipo"
import { getDataFromId } from "@/api/mock/home"
const store = ipoStore()
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities'
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const confirm = () => {
showSelect.value = false;
const checkedAll = ref(0)
const selectCards = inject('selectCards') as Function
//const status = inject('status')
onMounted(() => {
//console.log('select组件挂载');
if ((store.$state.selectedArr as any).status) {
console.log('store', store.$state.selectedArr)
const storeData = store.$state.selectedArr as any;
if (storeData.status.length) {
obj.ipoStatus = obj.ipoStatus.map((item: any) => {
const j = storeData.status.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.trade_currency.length) {
obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
const j = storeData.trade_currency.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.offer_type.length) {
obj.offeringType = obj.offeringType.map((item: any) => {
const j = storeData.offer_type.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.list_securities.length) {
obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
const j = storeData.list_securities.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
// if (storeData.list_platform.length) {
// obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
// const j = storeData.list_platform.some((i: string) => i == item.key)
// if (j) {
// return { ...item, isSelcted: true }
// } else {
// return item
// }
// })
// }
}
})
const porps = defineProps<{ fn: Function }>()
const confirm = async () => {
if (checkedAll.value == 2) {
store.setSelectedArr({});
porps.fn()
return
}
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities']
var reqeustObj = {
status: [] as string[],
trade_currency: [] as string[],
offer_type: [] as string[],
list_securities: [] as string[],
}
Object.keys(obj).forEach((item: string, index: number) => {
obj[item as keyType].forEach((element: any) => {
if (element.isSelcted) {
reqeustObj[keyArry[index] as requestType].push(element.key as string)
}
})
})
store.setSelectedArr(reqeustObj);
const result = await store.getSearchSelectList()
// const result = await getSelectList(reqeustObj)
//mock数据测试-----------
// const data = await getDataFromId("Select")
// var result = {
// data
// }
//mock数据测试-----------
selectCards(result);
showSelect.value = false
porps.fn()
}
const Cancel = () => {
// showSelect.value = false;
porps.fn()
}
const preVant = (e: any) => {
e.stopPropagation();
}
const obj = reactive({
ipoStatus: [{
key: 25,
value: 'Deal Initiated',
key: "25",
value: proxy.$t('home.DealInitiated'),
isSelcted: false
},
{
key: 30,
value: 'Public Offer Closed',
isSelcted: true
}, {
key: 35,
value: 'Application Validated',
isSelcted: true
}, {
key: 45,
value: 'Allotment Confirmed',
key: "30",
value: proxy.$t('home.PublicOfferClosed'),
isSelcted: false
}, {
key: 50,
value: 'Money Settlement',
key: "35",
value: proxy.$t('home.ApplicationValidated'),
isSelcted: false
}, {
key: 55,
value: 'Allocation Confirmed',
key: "45",
value: proxy.$t('home.AllotmentConfirmed'),
isSelcted: false
}, {
key: 60,
value: 'Placing Approved',
key: "50",
value: proxy.$t('home.MoneySettlement'),
isSelcted: false
}, {
key: 65,
value: 'Allotment Results Approved',
key: "55",
value: proxy.$t('home.AllocationConfirmed'),
isSelcted: false
}, {
key: 70,
value: 'Trading Started',
key: "60",
value: proxy.$t('home.placingApproved'),
isSelcted: false
}, {
key: 80,
value: 'Suspended',
key: "65",
value: proxy.$t('home.AllotmentResultsApproved'),
isSelcted: false
}, {
key: 90,
value: 'Cancelled',
key: "70",
value: proxy.$t('home.TradingStarted'),
isSelcted: false
}, {
key: "80",
value: proxy.$t('home.Suspended'),
isSelcted: false
}, {
key: "90",
value: proxy.$t('home.Cancelled'),
isSelcted: false
}],
tradingCurrency: [
{
key: 'HKD',
value: 'Hong Kong Dollar',
value: proxy.$t('home.HongKongDollar'),
isSelcted: false
},
{
key: 'CNY',
value: 'Chinese Yuan',
isSelcted: true
value: proxy.$t('home.ChineseYuan'),
isSelcted: false
},
{
key: 'USD',
value: 'United States Dollar',
value: proxy.$t('home.UnitedStatesDollar'),
isSelcted: false
}
]
],
offeringType: [{
key: '1',
value: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
isSelcted: false
}, {
key: '2',
value: proxy.$t('ipo.TypeofListing.Byplacingonly'),
isSelcted: false
}, {
key: '3',
value: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
isSelcted: false
}, {
key: '4',
value: proxy.$t('ipo.TypeofListing.Byintroduction'),
isSelcted: false
},
{
key: '5',
value: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
isSelcted: false
}
],
SecuritiestobeListed: [{
key: '1',
value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
isSelcted: false
}, {
key: '2',
value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
isSelcted: false
}, {
key: '3',
value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
isSelcted: false
}, {
key: '4',
value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
isSelcted: false
},
{
key: '5',
value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
isSelcted: false
},
{
key: '6',
value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
isSelcted: false
},
{
key: '7',
value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
isSelcted: false
},
{
key: '8',
value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
isSelcted: false
},
{
key: '99',
value: proxy.$t('ipo.TypeofListing.Other'),
isSelcted: false
}
],
// ListingPlatform: [{
// key: '1',
// value: proxy.$t('home.Mainboard'),
// isSelcted: false
// }, {
// key: '2',
// value: proxy.$t('home.GEM'),
// isSelcted: false
// }],
// ListingType: [{
// key: '1',
// value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
// isSelcted: false
// }, {
// key: '2',
// value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
// isSelcted: false
// }, {
// key: '3',
// value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
// isSelcted: false
// }, {
// key: '4',
// value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
// isSelcted: false
// },
// {
// key: '5',
// value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
// isSelcted: false
// },
// {
// key: '6',
// value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
// isSelcted: true
// },
// {
// key: '7',
// value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
// isSelcted: true
// },
// {
// key: '8',
// value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
// isSelcted: true
// },
// {
// key: '99',
// value: proxy.$t('ipo.TypeofListing.Other'),
// isSelcted: false
// }
// ]
})
const ipoStatusSlect = (key: number) => {
obj.ipoStatus = obj.ipoStatus.map((item: any) => {
const checkOne = (key: number | string, objKey: keyType) => {
obj[objKey] = obj[objKey].map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const tradingCurrencySlect = (key: string) => {
obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
const checkAll = (number: number) => {
if (checkedAll.value && checkedAll.value == number) {
checkedAll.value = 0;
} else {
checkedAll.value = number;
selectAll(number as 1 | 2)
}
return item
}
function selectAll(all: 1 | 2) {
var boolean1 = all == 1 ? true : false;
Object.keys(obj).forEach((item: string) => {
obj[item as keyType] = obj[item as keyType].map(element => {
return { ...element, isSelcted: boolean1 } as any;
})
})
}
defineExpose({
showSelect
})
</script>
<style lang="scss" scoped>
.selectWrap {
width: 800px;
height: 800px;
height: 620px;
background-color: #fff;
border-radius: 20px;
position: fixed;
@@ -149,6 +430,15 @@ defineExpose({
transform: translate(-50%, -50%);
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-sizing: border-box;
padding: 10px 20px 20px 20px;
@@ -161,9 +451,13 @@ defineExpose({
.content {
.title {
font-size: 16px;
color: #8C979B;
font-size: 18px;
color: #879db2;
margin-top: 10px;
// @media screen and (max-width: 768px){
// font-size: 12px;
// }
}
li {
@@ -171,24 +465,50 @@ defineExpose({
font-size: 18px;
flex-wrap: wrap;
@media screen and (max-width: 768px) {
flex-direction: column;
flex-wrap: nowrap;
//font-size: 12px;
width: fit-content;
}
.word {
margin-right: 10px;
margin-top: 5px;
border-radius: 20px;
// width: 50px;
height: 20px;
background-color: #F2F0F5;
background-color: #eff1f4;
padding: 5px 15px 5px 10px;
color: #6A7686;
color: #879db2;
display: flex;
justify-content: space-between;
cursor: pointer;
@media screen and (max-width: 768px) {
height: fit-content;
width: fit-content;
}
&:hover {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
&.active {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
.check {
width: 30px;
span {
line-height: 35px;
}
}
}
@@ -208,9 +528,15 @@ defineExpose({
border: none;
font-weight: 600;
background-color: #fff;
color: #334B57;
color: #557795;
padding: 10px 20px 10px 20px;
@media screen and (max-width: 768px) {
margin: 0;
// font-size: 12px;
}
&:hover {
background-color: #0F426F;
border-radius: 5px;
@@ -0,0 +1,96 @@
<template>
<div >
<div class="title" v-if="isImage">
<img v-lazy="props.src" />
</div>
<div class="title2" v-else>
{{props.number}}
</div>
</div>
</template>
<script lang="ts">
export default {
name: "XEvent",
};
</script>
<script lang="ts" setup>
import {ref,onMounted,watch,onUpdated} from 'vue'
const props = defineProps({
src: {
type: String,
required:true
},
number: {
type: String,
required:true
}
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
isImage.value= false;
};
}catch(error){
console.log('error')
}
}
onUpdated(()=>{
setTimeout(()=>{
checkImgExists(props.src)
},1000)
})
onMounted(()=>{
setTimeout(()=>{
checkImgExists(props.src)
},1000)
})
</script>
<style lang="scss" scoped>
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
width: 270px;
border-radius: 20px 20px 0px 0px;
margin-top: 30px;
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.title2{
background-color: #23445a;
color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
text-align: center;
width: 270px;
border-radius: 20px 20px 0px 0px;
margin-top: 30px;
overflow: hidden;
font-family: "Calibri";
position: relative;
}
</style>
+420 -216
View File
@@ -1,38 +1,38 @@
<template>
<!-- <div class="login3">
</div> -->
<div class="login2">
<Select ref="selectR" v-if="selectVisible" :fn="selectVisibleFn" />
<div class="box w">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false">
<Drawer />
</el-drawer>
<div class="left">
<div class="header">
<div class="menu">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
</div>
<!-- <input class="search" /> -->
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
<div class="searchWrap">
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false"
clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect"
:enterkeyhint="'search'">
<template #prefix>
<img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
<img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片"
@click="handleSelect">
</template>
</el-autocomplete>
</div>
<div class="dropdown">
<img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
</div>
<div class="dropdown1">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang class="alert" ref="lang" />
<Select ref="selectR" />
<!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
</div>
</div>
<div class="bigger">
<Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
<Main v-for="(item, index) in logos" :data="item" :index="index" :key="index"></Main>
</div>
</div>
@@ -47,26 +47,39 @@
<template #header="{ date }">
<el-button size="small" @click="selectDate('prev-month')">
<img src="@/assets/1x/source11.png">
<img src="@/assets/1x/source14.png">
</el-button>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ showMounth(date) }}</span>
<span class="month">{{ date }}</span>
<el-button size="small" @click="selectDate('next-month')">
<img src="@/assets/1x/source12.png">
<img src="@/assets/1x/source15.png">
</el-button>
</template>
<!-- <template #date-cell="{ data }">
<template #dateCell="{ data }">
<p style="margin:0px">
{{ data.day.split('-').slice(2).join() * 1 }}
<div v-for="(i, index) in dayTime" :key="index">
<!-- <div v-if="data.day == i" class="yuan"></div> -->
<div v-if="i.split('-').slice(2).join() * 1 <= 9">
<div v-if="data.day == i" class="yuan1"></div>
</div>
<div v-else>
<div v-if="data.day == i" class="yuan"></div>
</div>
</div>
</p>
</template>
</template> -->
</el-calendar>
</div>
<div class="right-bottom1">
<Event v-if="Eventdata.length" :data="Eventdata" />
<div v-else class="right-bottom-title1">No event</div>
<div v-else class="right-bottom-title1">{{ $t(i18n.global.t('home.noevent')) }}</div>
</div>
</div>
</div>
@@ -78,41 +91,136 @@ export default {
};
</script>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ref, onMounted, onUnmounted, watch, inject } from 'vue';
import Lang from "./components/Lang.vue";
import Main from './components/Main.vue';
import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
import moment from "moment"
import { useRouter } from 'vue-router';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import { getCurrentInstance, provide } from 'vue'
import Event from './components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
import { ElMessage } from 'element-plus'
import SearchCup from "./components/SearchCup.vue";
import Drawer from "./modelComponents/Drawer.vue";
import Select from "./components/Select.vue";
const selectR = ref();
const dayValue = ref(new Date())
const drawer = ref(false)
const handleDrawer = (done: () => void) => {
done();
}
const openDrawer = () => {
drawer.value = true;
}
import { ipoStore } from "@/stores/ipo"
const { proxy } = (getCurrentInstance() as any)
const reflashRouter = inject('reflashRouter') as Function
const handleOnDrwaer = inject('handleOnDrwaer') as Function
const router = useRouter()
const store = ipoStore()
const selectR = ref();
const dayValue = ref(store.homeDay)
const selectVisible = ref(false)
onMounted(() => {
store.setMobileActiveShow(1);//设置移动端弹窗高亮
window.onhashchange = function () {
const langHref = window.location.href.split("home")[1]
if (langHref == '?lang=en') {
proxy.$i18n.locale = 'en'
store.setLocale(1)
} else if (langHref == '?lang=tc') {
proxy.$i18n.locale = 'zhCt'
store.setLocale(2)
} else if (langHref == '?lang=sc') {
proxy.$i18n.locale = 'zhCn'
store.setLocale(3)
}
reflashRouter()
};
getcalendar()
})
const selectVisibleFn = () => {
selectVisible.value = false
}
//过滤
const selectCards = async (res: any) => {
async function demo() {
return new Promise(async (resolve, reject) => {
try {
if (!(res as any).data.length) {
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
throw ("222")
}
const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
return {
logolinks: logoLink,
title: companyEngFull + ";" + companyChiFull,
status: status,
number: stkCode,
HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
time: listingDate ? listingDate : pricingDate,
ipoID: ipoID,
price: priceFinal,
listingDate: listingDate,
tradeCurrency: tradeCurrency
}
function priceMinMax() {
if (priceMin && priceMax) {
return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
} else if (priceMin) {
return `${priceMin.toFixed(3)} - `
} else if (priceMax) {
return ` -${priceMax.toFixed(3)}`
} else {
return " - "
}
}
})
resolve(data)
} catch (error) {
reject()
}
}
)
}
const result = await demo();
(result as objType[]).sort((a: any, b: any) => {
const preTime = new Date(a.number).getTime();
const nextTime = new Date(b.number).getTime();
if (preTime == nextTime) {
return Number(a.number) - Number(b.number);
} else {
return preTime - nextTime;
}
})
logos.value = result as objType[]
}
provide('selectCards', selectCards);
const openDrawer = () => {
handleOnDrwaer(true)
}
const handleSelect = () => {
// console.log('@@@', state.value)
if (!state.value) return
getSearchIpoList(state.value)
// provide('state',state.value );
}
const router = useRouter()
watch(dayValue, async (ne, ol) => {
const day = moment(ne).format("YYYY-MM-DD")
store.setHomeDay(day)
const result = await getEventData(day);
console.log(result);
setEventdata((result as any).data)
// const result = await getDataFromId('event');
// console.log('@@@@', result);
// setEventdata((result as any))
})
const Eventdata = ref([
// {
@@ -171,12 +279,12 @@ const Eventdata = ref([
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// name: "力高健康生活有限公司11111111111",
// number: 2380
// }, {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// name: "力高健康生活有限公司111111111111111111111111111111",
// number: 2381
// }
])
@@ -192,33 +300,40 @@ const setEventdata = (EventD: any) => {
})
}
const dayTime = ref()
const getcalendar = async () => {
const res = await getDate()
dayTime.value = (res as any).data
console.log(dayTime.value);
}
const getHomeIpoList = async () => {
async function demo() {
return new Promise(async (resolve, reject) => {
const res = await getHomeIpo(1)
// const res = await getDataFromId('home');
// const data = (res as any).map((item: any) => {
const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngShort, companyChiShort, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
// ? priceFinal.toFixed(3) : priceMinMax()
return {
logolinks: logoLink,
title: companyEngShort + ";" + companyChiShort,
title: companyEngFull + ";" + companyChiFull,
status: status,
number: stkCode,
HKD: priceFinal ? priceFinal : priceMinMax(),
HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
time: listingDate ? listingDate : pricingDate,
ipoID: ipoID,
price: priceFinal,
listingDate: listingDate
listingDate: listingDate,
tradeCurrency: tradeCurrency
}
function priceMinMax() {
if (priceMin && priceMax) {
return `${priceMin}-${priceMax}`
return `${priceMin?.toFixed(3)} - ${priceMax.toFixed(3)}`
} else if (priceMin) {
return `${priceMin}-`
return `${priceMin?.toFixed(3)} - `
} else if (priceMax) {
return ` -${priceMax}`
return ` -${priceMax?.toFixed(3)}`
} else {
return " - "
}
@@ -242,39 +357,45 @@ const getHomeIpoList = async () => {
}
onMounted(async () => {
getHomeIpoList();
var day = moment(Date.now()).format("YYYY-MM-DD")
// var day = moment(Date.now()).format("YYYY-MM-DD")
var day = moment(store.homeDay).format("YYYY-MM-DD")
const result = await getEventData(day);
setEventdata((result as any).data)
})
const getSearchIpoList = async (keyword: string) => {
async function demo() {
return new Promise(async (resolve, reject) => {
try {
const res = await getSearchListing(keyword)
// const res = await getSearchListing(keyword)
store.setKeyWord(keyword)
const res = await store.getSearchSelectList()
if (!(res as any).data.length) {
ElMessage.warning('No relevant search data')
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
throw ("222")
}
const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngShort, companyChiShort, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
// console.log(companyEngFull,companyChiFull);
return {
logolinks: logoLink,
title: companyEngShort + ";" + companyChiShort,
title: companyEngFull + ";" + companyChiFull,
status: status,
number: stkCode,
HKD: priceFinal ? priceFinal : priceMinMax(),
HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
time: listingDate ? listingDate : pricingDate,
ipoID: ipoID,
price: priceFinal,
listingDate: listingDate
listingDate: listingDate,
tradeCurrency: tradeCurrency
}
function priceMinMax() {
if (priceMin && priceMax) {
return `${priceMin}-${priceMax}`
return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
} else if (priceMin) {
return `${priceMin}-`
return `${priceMin.toFixed(3)} - `
} else if (priceMax) {
return ` -${priceMax}`
return ` -${priceMax.toFixed(3)}`
} else {
return " - "
}
@@ -311,55 +432,28 @@ onMounted(async () => {
// setEventdata(result);
})
interface objType {
title: string,
number: string,
HKD: string,
number: string,
price: string,
time: string,
trading: string
title: string,
trading: string,
logolinks: string,
status: string,
listingDate: string,
ipoID: number,
tradeCurrency: string
}
const logos = ref<objType[]>([
{
title: "bestCompany",
number: "09985",
HKD: "HKD 148.000",
price: "final offer Price",
time: "2023-03-31 09:00",
trading: "Commencement of trading date"
},
{
title: "bestCompany",
number: "09985",
HKD: "HKD 30.000-40.000",
price: "offer Price Range",
time: "2022-12-01 12:00:00",
trading: "Expected Price Determination Date"
},
{
title: "bestCompany",
number: "09985",
HKD: "HKD 30.000-40.000",
price: "offer Price Range",
time: "2022-12-01 12:00:00",
trading: "Expected Price Determination Date"
},
{
title: "bestCompany",
number: "09985",
HKD: "HKD 30.000-40.000",
price: "offer Price Range",
time: "2022-12-01 12:00:00",
trading: "Expected Price Determination Date"
},
{
title: "bestCompany",
number: "09985",
HKD: "HKD 30.000-40.000",
price: "offer Price Range",
time: "2022-12-01 12:00:00",
trading: "Expected Price Determination Date"
}
// {
// title: "bestCompany",
// number: "09985",
// HKD: "HKD 148.000",
// price: "final offer Price",
// time: "2023-03-31 09:00",
// trading: "Commencement of trading date"
// },
])
const jsonData = {
@@ -435,42 +529,41 @@ const lang = ref()
const SearchCupDom = ref()
const handleShowLang = (e: any) => {
e.stopPropagation()
selectR.value.showSelect = false
console.log(111)
// selectR.value.showSelect = false
lang.value.showLang = !lang.value.showLang
selectVisible.value = false
}
const handleShowCup = (e: any) => {
e.stopPropagation()
lang.value.showLang = false;
console.log(111)
selectR.value.showSelect = !selectR.value.showSelect
//console.log(111)
selectVisible.value = !selectVisible.value
}
//路由传参
const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.number)
localStorage.setItem('itemData', JSON.stringify(item))
router.push({
name: 'Xdashboard',
params: { data: JSON.stringify(item) }
},
)
// const handleclick = (item: any) => {
// localStorage.setItem('ipoID', item.number)
// localStorage.setItem('itemData', JSON.stringify(item))
// router.push({
// name: 'Xdashboard',
// params: { data: JSON.stringify(item) }
// },
// )
}
// }
onMounted(() => {
document.documentElement.onclick = function () {
store.setMainExpand(-1);
selectVisible.value = false
// if (SearchCupDom.value.showLang) {
// SearchCupDom.value.showLang = false
// }
if (selectR.value.showSelect) {
selectR.value.showSelect = false
}
if (lang.value.showLang) {
lang.value.showLang = false
}
}
})
)
onUnmounted(() => {
document.documentElement.onclick = null
})
@@ -483,96 +576,110 @@ const showMounth = (date: any) => {
return arr[2] + " " + arr[3]
}
}
function fn(data: boolean) {
console.log('22222')
// drawer.value = data
}
</script>
<style lang="scss" scoped>
// @import '../../styles';
// .el-calendar{
// font-family: "Calibri"
.yuan {
width: 12px;
height: 12px;
background-color: #f7be39;
position: absolute;
//right: 20px;
//top: 36px;
transform: translateY(11px);
//transform: translateX(3px);
margin-left: 3px;
border-radius: 10px;
}
.yuan1 {
width: 12px;
height: 12px;
background-color: #f7be39;
position: absolute;
border-radius: 10px;
transform: translateY(11px);
margin-left: -2px;
}
// .login3{
// background-image: url("@/assets/1x/beijingtu.png");
// width: 100%;
// height: 1500px;
// background-size: 100% 100%;
// position: fixed;
// }
.login2 {
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
// background-repeat: no-repeat;
// background-size: cover;
// width: 1900px;
position: fixed;
width: 100%;
height: 100%;
background-size: 100% 100%;
font-family: "Calibri";
@media screen and (max-width: 768px) {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
}
}
.box {
display: flex;
justify-content: space-between;
// background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
//height: 100%;
// font-family: "Calibri";
// width: 100%;
// background-color: gray;
@media screen and (max-width: 768px) {
width: 100vw;
overflow-x: hidden;
}
}
.left {
width: 70%;
// @media screen and (max-width: 768px) {
// width: 100vw;
// height: 100vh;
// float: left;
// background-color: red;
@media screen and (max-width: 768px) {
width: 100vw;
* {
margin: 0;
padding: 0;
}
}
// * {
// margin: 0;
// padding: 0;
// }
// }
.header {
display: flex;
align-items: center;
// padding-left: 35px;
height: 80px;
@media screen and (max-width: 768px) {
height: 60rem;
//position: fixed;
//background-color: red;
@media screen and (max-width: 768px) {
// position: fixed;
// top: 0;
// left: 0;
// width: 100%;
// background-color: #000000;
position: relative;
}
.menuicon {
display: none;
@media screen and (max-width: 768px) {
display: block;
margin-left: 5rem;
}
}
.menu {
@media screen and (max-width: 768px) {
img {
width: 25rem;
height: 20rem;
}
}
}
.inline-input w-50 {
width: 200px;
height: 50px;
@media screen and (max-width: 768px) {
display: none;
:deep(.imgSearch123) {
width: 10rem;
height: 10rem;
}
}
}
.my-autocomplete li {
line-height: normal;
@@ -593,12 +700,6 @@ const showMounth = (date: any) => {
color: #ddd;
}
// .example-showcase .el-dropdown-link {
// cursor: pointer;
// color: var(--el-color-primary);
// display: flex;
// align-items: center;
// }
.dropdown {
position: relative;
@@ -619,9 +720,9 @@ const showMounth = (date: any) => {
position: relative;
@media screen and (max-width: 768px) {
display: none;
}
// @media screen and (max-width: 768px) {
// display: none;
// }
.alert {
position: absolute;
@@ -646,12 +747,12 @@ const showMounth = (date: any) => {
transform: scale(1.2);
}
@media screen and (max-width: 768px) {
width: 24rem;
height: 28rem;
margin-top: 6rem;
margin-left: 10rem;
}
// @media screen and (max-width: 768px) {
// width: 24rem;
// height: 28rem;
// margin-top: 6rem;
// margin-left: 10rem;
// }
}
.second {
@@ -672,6 +773,8 @@ const showMounth = (date: any) => {
// margin-top: 40px;
display: flex;
flex-wrap: wrap;
height: 90vh;
overflow-y: scroll;
// margin-left: 120px;
// width: 1250px;
@@ -679,6 +782,16 @@ const showMounth = (date: any) => {
@media screen and (max-width: 768px) {
width: 100vw;
justify-content: center;
overflow-y: scroll;
height: 90vh;
// height: calc(100vh-60'px');
// transform: translateY(60px);
// position: absolute;
// right: 0;
// top: 60px;
// bottom: 0;
// overflow-y: scroll;
//background-color: #e36466;
}
}
@@ -691,7 +804,7 @@ const showMounth = (date: any) => {
box-sizing: border-box;
// width: 900px;
// height: 100vh;
height: 100%;
height: 100vh;
padding-bottom: 80px;
background-color: #1f4055;
padding-left: 40px;
@@ -716,7 +829,7 @@ const showMounth = (date: any) => {
.right-bottom {
width: 420px;
background-color: #ffffff;
height: 400px;
height: fit-content;
margin-top: 40px;
// margin-left: 20px;
@@ -731,8 +844,11 @@ const showMounth = (date: any) => {
.right-bottom1 {
width: 420px;
background-color: #ffffff;
height: 500px;
margin-top: 150px;
// height: 350px;
height: 350px;
//height: fit-content;
margin-top: 40px;
// position: relative;
// margin-left: 20px;
// text-align: center;
// line-height: 500px;
@@ -740,6 +856,7 @@ const showMounth = (date: any) => {
justify-content: center;
align-items: center;
.right-bottom-title1 {
color: #1f4055;
@@ -754,13 +871,20 @@ const showMounth = (date: any) => {
}
:deep(.el-calendar-table) {
width: 380px;
// transform: translateX(-20px);
// margin-top: 20px;
}
:deep(.el-button--small) {
border: none
}
:deep(.el-calendar__body) {
background-color: #e8ebee;
height: fit-content;
padding: 12px 20px 18px;
}
:deep(.el-calendar) {
@@ -783,18 +907,15 @@ const showMounth = (date: any) => {
}
:deep(.header .el-input__wrapper) {
@media screen and (max-width: 768px) {
// margin-left: 13vw;
// height: 5vh;
// background-color: #000000;
}
}
:deep(.el-calendar-table td) {
border: none;
text-align: center;
font-weight: 800;
}
:deep(.el-calendar-table thead th) {
//padding: 2px;
font-weight: 550px;
}
:deep(.el-calendar .el-calendar-table .el-calendar-day) {
@@ -805,15 +926,17 @@ const showMounth = (date: any) => {
background-color: rgb(255, 255, 255);
height: 33px;
border: none;
margin-top: 30px;
margin-top: 18px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
// font-family: "Calibri"
}
:deep(.el-calendar-table thead) {
margin-top: 20px;
//margin-top: 20px;
font-size: 16px;
font-weight: bold;
background-color: rgb(255, 255, 255);
@@ -832,7 +955,7 @@ const showMounth = (date: any) => {
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
// background-color: #e36466;
border: 5px solid #e36466;
border: 3px solid #e36466;
}
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
@@ -844,8 +967,75 @@ const showMounth = (date: any) => {
:deep(.is-selected) {
color: red;
}
// ::-webkit-scrollbar {
// width: 0 !important;
// }
// ::-webkit-scrollbar {
// width: 0 !important;height: 0;
// }
@media screen and (max-width: 768px) {
.left {
width: 100vw;
* {
margin: 0;
padding: 0;
}
.header {
height: 60px;
//background-color: red;
.menuicon {
display: block;
margin-left: 5px;
width: 25px;
height: 20px;
}
.menu {
img {
width: 25px;
height: 20px;
}
}
.dropdown1 {
display: none;
}
.first {
width: 24px;
height: 28px;
margin-top: 6px;
margin-left: 1px;
}
}
}
// :deep(.el-drawer__body){
// background-color: red;
// width: 80vw;
// }
// :deep(.el-overlay){
// background-color: green;
// }
}
</style>
<style>
/* ::-webkit-scrollbar {
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;height: 0;
} */
@media (min-width: 992px) {
.header .el-input__wrapper {
margin-top: 20px;
margin-left: 20px;
@@ -862,16 +1052,30 @@ const showMounth = (date: any) => {
.el-input__prefix-inner {
transform: translateX(-35px);
}
}
@media screen and (max-width: 768px) {
.el-input {
margin: 10px !important;
}
.el-input__prefix-inner {
transform: translateX(-35px);
}
.header .el-input__wrapper {
margin-top: 0;
margin-left: 0;
padding-left: 50rem;
margin-top: 0 !important;
margin-left: 0 !important;
padding-left: 50px;
width: 61vw;
height: 30rem;
border-radius: 25rem;
font-size: 16rem;
height: 30px;
border-radius: 25px;
font-size: 16px;
border: none;
outline: none;
@@ -879,14 +1083,14 @@ const showMounth = (date: any) => {
.el-input__inner {
margin: -35rem;
margin: -35px;
padding: 0;
}
.imgSearch123 {
width: 15rem;
height: 15rem;
transform: translateX(-7rem);
width: 15px;
height: 15px;
transform: translateX(-7px);
}
}
</style>
+228 -60
View File
@@ -1,57 +1,63 @@
<template>
<div class="wrapddd">
<div class="imgWrap22222">
<img src="@/assets/1x/1x/source8.png" alt="menu">
<h4 v-if="data != null && store.$state.mobileActiveShow != 1">{{ store.$state.locale == 1 ?
data.title.split(";")[0] : data.title.split(";")[1] }}
</h4>
</div>
<div class="nav">
<li :class="state == 1 && 'active'" @click="setState(1)" >
<li :class="store.$state.mobileActiveShow == 1 && 'active'" @click="setState(1)">
<img src="@/assets/1x/source10.png" alt="menu">
<span>Home</span>
<span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
</li>
<li :class="state == 2 && 'active'" @click="setState(2)">
<li :class="store.$state.mobileActiveShow == 2 && 'active'" @click="setState(2)">
<img src="@/assets/1x/source5.png" alt="menu">
<span>Dashboard</span>
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
</li>
<li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
<div class="ipoWrap">
<li :class="store.$state.mobileActiveShow == 3 && 'active'" @click="setState(3)">
<!-- <div class="ipoWrap">
<div>
</div>
</div> -->
<img src="@/assets/1x/source2.png" alt="menu">
<span>IPO Reference Data</span>
</div>
<div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
<img src="@/assets/1x/source11.png" alt="" class="icon">
</div>
</div>
<div class="report" v-if="state == 3">
<span>report</span>
<img src="@/assets/1x/source3.png" alt="">
</div>
<span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
</li>
<li :class="state == 4 && 'active'" @click="setState(4)">
<li :class="store.$state.mobileActiveShow == 4 && 'active'" @click="setState(4)">
<img src="@/assets/1x/source6.png" alt="menu">
<span>IPO Calendar</span>
<span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
</li>
<li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
<li :class="store.$state.mobileActiveShow == 5 && 'active'" @click="setState2(5)" class="IPO">
<div class="ipoWrap">
<div>
<div class="icon">
<img src="@/assets/1x/1x/source6.png" alt="menu">
<span>Languages</span>
<span>{{ $t(i18n.global.t('home.Languages')) }}</span>
</div>
<div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
<img src="@/assets/1x/source11.png" alt="">
<div class="arrow" :style="{
transform: store.$state.mobileActiveShow == 5 && showalanguge ? 'rotateZ(90deg)' : 'rotateZ(-90deg)', marginRight: store.$state.mobileActiveShow == 5 && showalanguge ? '10px' : '28px'
}
">
<img src="@/assets/1x/source14.png" alt="">
</div>
</div>
<div class="lang" v-if="state == 5">
<li>English</li>
<li>简体中文</li>
<li>繁體中文</li>
<div class="lang" v-if="store.$state.mobileActiveShow == 5 && showalanguge">
<li @click="handleLang1">English</li>
<li @click="handleLang2">繁體中文</li>
<li @click="handleLang3">简体中文</li>
</div>
</li>
</div>
</div>
</template>
<script lang="ts">
@@ -61,76 +67,207 @@ export default {
</script>
<script lang="ts" setup>
import { ref } from "vue"
import { getCurrentInstance, onUnmounted } from 'vue'
import { inject } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
//import calendar from '@/views/IpoCalendar/index.vue'
import { ElMessageBox } from 'element-plus'
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from "moment"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
const { proxy } = (getCurrentInstance() as any)
const state = ref(1)
// const drawer = ref(true)
const dayValue = ref(new Date())
const calendar = ref()
const handleDrawer = (done: () => void) => {
done();
}
//const Eventdata = ref([])
const selectDate = (val: string) => {
calendar.value.selectDate(val)
}
const dayTime = ref()
const getcalendar = async () => {
const res = await getDate()
dayTime.value = (res as any).data
console.log(dayTime.value);
}
const showMounth = (date: any) => {
const arr = date.split(" ")
if (arr.length == 3) {
return arr[2]
} else if (arr.length == 4) {
return arr[2] + " " + arr[3]
}
}
const drawer2 = ref(false)
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
done()
}
//const drawer1 = ref(false)
const setState = (number: number) => {
state.value = number;
store.setMobileActiveShow(number)
if (number == 1) {
proxy.$router.push("/home")
}
if (number == 2) {
proxy.$router.push("/dashboard")
}
if (number == 3) {
proxy.$router.push("/IPO")
}
if (number == 4) {
proxy.$router.push("/IPOcalendar")
store.setMobileActiveShow(1)
// emit('childfn', !drawer1)
// emit('childfn', !drawer)
// drawer1.value = true
// console.log(drawer1.value);
}
setTimeout(() => {
handleOnDrwaer(false)
})
}
// const openDrawer = () => {
// drawer.value = false;
// }
//console.log(drawer1.value);
const dialogVisible = ref(true)
const route = useRouter()
const store = ipoStore()
const showalanguge = ref(false)
//const { proxy } = (getCurrentInstance() as any)
let emit = defineEmits(['childfn'])
//let emit1 = defineEmits(['childfn1'])
const reflashRouter = inject('reflashRouter') as Function
const handleOnDrwaer = inject('handleOnDrwaer') as Function
const props = defineProps({
drawer: Boolean,
drawer1:Boolean
})
const data = ref()
onMounted(
() => {
// data.value = JSON.parse(localStorage.getItem('itemData') as string)
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
data.value = obj
// console.log(data.value);
// text();
}
)
let drawer = props.drawer
let drawer1 = props.drawer1
//console.log(props);
const state = ref(1)
// const drawer = ref(true)
const setState2 = (number: number) => {
store.setMobileActiveShow(number)
showalanguge.value = !showalanguge.value
}
const handleLang1 = () => {
if (proxy.$i18n.locale = 'en') {
proxy.$i18n.locale = 'en'
}
store.setLocale(1)
emit('childfn', !drawer)
// IpoReflash()
}
const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') {
proxy.$i18n.locale = 'zhCt'
// IpoReflash()
}
store.setLocale(2)
emit('childfn', !drawer)
/// IpoReflash()
}
const handleLang3 = () => {
if (proxy.$i18n.locale = 'zhCn') {
proxy.$i18n.locale = 'zhCn'
}
store.setLocale(3)
emit('childfn', !drawer)
// IpoReflash()
}
</script>
<style lang="scss" scoped>
.wrapddd {
width: 80vw;
transform: translateX(-20rem);
transform: translateX(-20px);
display: flex;
flex-direction: column;
.imgWrap22222 {
margin-top: 30rem;
width: 25rem;
height: 20rem;
// margin-left: 15rem;
margin-top: 20px;
width: fit-content;
height: 20px;
margin-left: 15px;
display: flex;
justify-content: center;
align-items: center;
// background-color: black;
img {
width: 100%;
height: 100%;
width: 25px;
height: 20px;
}
h4 {
font-size: 18px;
margin-left: 10px;
color: #fff;
font-weight: 400;
}
}
.nav {
height: fit-content;
margin-top: 20rem;
margin-top: 20px;
width: 100%;
>li {
display: flex;
align-items: center;
justify-self: center;
min-height: 50rem;
padding-left: 15rem;
margin-top: 10rem;
min-height: 50px;
padding-left: 15px;
margin-top: 10px;
background-color: #B4C0C7;
&.active {
background-color: #fff;
background-color: #fff
}
img {
width: 22rem;
height: 22rem;
width: 22px;
height: 22px;
// background-color: red;
}
span {
margin-left: 25rem;
font-size: 20rem;
margin-left: 25px;
font-size: 20px;
font-weight: 700;
color: #1C3F56;
display: block;
line-height: 50px;
padding-top: 6px;
}
}
@@ -140,20 +277,20 @@ const setState = (number: number) => {
height: fit-content;
.lang {
margin-left: -90rem;
margin-left: -90px;
color: #1C3F56;
font-size: 18rem;
font-size: 18px;
>li {
line-height: 24rem;
line-height: 24px;
}
}
.report {
margin-left: -120rem;
margin-left: -120px;
span {
margin-right: 10rem;
margin-right: 10px;
}
}
@@ -163,10 +300,34 @@ const setState = (number: number) => {
align-items: center;
width: 100%;
.icon {
min-height: 50px;
display: flex;
align-items: center;
justify-self: center;
img {
width: 22px;
height: 22px;
}
span {
margin-left: 25px;
font-size: 20px;
font-weight: 700;
color: #1C3F56;
display: block;
line-height: 50px;
padding: 0;
vertical-align: bottom;
}
}
.arrow {
width: 12rem;
height: 19rem;
margin-right: 14rem;
width: 12px;
height: 19px;
margin-right: 14px;
img {
width: 100%;
@@ -178,11 +339,18 @@ const setState = (number: number) => {
span {
display: inline-block;
transform: translateY(-3rem);
// transform: translateY(-3px);
}
}
}
}
</style>
<style>
/* .el-drawer__body{
padding: 0
} */
</style>
+1 -1
View File
@@ -1,6 +1,6 @@
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*.vue", "shims.d.ts"],
"include": ["env.d.ts", "src/**/*.vue", "shims.d.ts",],
"compilerOptions": {
"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+2 -1
View File
@@ -55,12 +55,13 @@ export default defineConfig((mode: ConfigEnv) => {
},
},
server: {
host:"0.0.0.0",
port: +env.VITE_PORT,
open: env.VITE_OPEN === "true",
// 配置代理服务器
proxy: {
"/api": {
target: "http://192.168.2.11:8080",
target: "http://127.0.0.1:8080",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},