Compare commits

..
12 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
43 changed files with 4202 additions and 1259 deletions
BIN
View File
Binary file not shown.
+8 -2
View File
@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/src/assets/logo111.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Vite App</title> <title>Website - FINI</title>
</head> </head>
@@ -13,6 +13,12 @@
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
<style> <style>
html{
touch-action:none;
touch-action:pan-y;
}
</style> </style>
</html> </html>
+85 -15
View File
@@ -13,7 +13,7 @@
"@element-plus/icons-vue": "^2.1.0", "@element-plus/icons-vue": "^2.1.0",
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"echarts": "^5.4.1", "echarts": "^5.4.2",
"element-plus": "^2.3.0", "element-plus": "^2.3.0",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"moment": "^2.29.4", "moment": "^2.29.4",
@@ -25,6 +25,7 @@
"pinia": "^2.0.33", "pinia": "^2.0.33",
"postcss-px2rem": "^0.3.0", "postcss-px2rem": "^0.3.0",
"vue": "^3.2.36", "vue": "^3.2.36",
"vue-echarts": "^6.5.5",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-lazyload": "^3.0.0-rc.2", "vue-lazyload": "^3.0.0-rc.2",
"vue-router": "^4.0.15" "vue-router": "^4.0.15"
@@ -4174,12 +4175,12 @@
} }
}, },
"node_modules/echarts": { "node_modules/echarts": {
"version": "5.4.1", "version": "5.4.2",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz", "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==", "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"dependencies": { "dependencies": {
"tslib": "2.3.0", "tslib": "2.3.0",
"zrender": "5.4.1" "zrender": "5.4.3"
} }
}, },
"node_modules/echarts/node_modules/tslib": { "node_modules/echarts/node_modules/tslib": {
@@ -9213,6 +9214,11 @@
"node": ">=0.10.0" "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": { "node_modules/resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -10537,6 +10543,48 @@
"@vue/shared": "3.2.37" "@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": { "node_modules/vue-eslint-parser": {
"version": "8.3.0", "version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -10877,9 +10925,9 @@
} }
}, },
"node_modules/zrender": { "node_modules/zrender": {
"version": "5.4.1", "version": "5.4.3",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz", "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==", "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"dependencies": { "dependencies": {
"tslib": "2.3.0" "tslib": "2.3.0"
} }
@@ -14471,12 +14519,12 @@
} }
}, },
"echarts": { "echarts": {
"version": "5.4.1", "version": "5.4.2",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz", "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==", "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"requires": { "requires": {
"tslib": "2.3.0", "tslib": "2.3.0",
"zrender": "5.4.1" "zrender": "5.4.3"
}, },
"dependencies": { "dependencies": {
"tslib": { "tslib": {
@@ -18321,6 +18369,11 @@
"resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz", "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==" "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": { "resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", "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/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": { "vue-eslint-parser": {
"version": "8.3.0", "version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", "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==" "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
}, },
"zrender": { "zrender": {
"version": "5.4.1", "version": "5.4.3",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz", "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==", "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"requires": { "requires": {
"tslib": "2.3.0" "tslib": "2.3.0"
}, },
+2 -1
View File
@@ -15,7 +15,7 @@
"@element-plus/icons-vue": "^2.1.0", "@element-plus/icons-vue": "^2.1.0",
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"echarts": "^5.4.1", "echarts": "^5.4.2",
"element-plus": "^2.3.0", "element-plus": "^2.3.0",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"moment": "^2.29.4", "moment": "^2.29.4",
@@ -27,6 +27,7 @@
"pinia": "^2.0.33", "pinia": "^2.0.33",
"postcss-px2rem": "^0.3.0", "postcss-px2rem": "^0.3.0",
"vue": "^3.2.36", "vue": "^3.2.36",
"vue-echarts": "^6.5.5",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-lazyload": "^3.0.0-rc.2", "vue-lazyload": "^3.0.0-rc.2",
"vue-router": "^4.0.15" "vue-router": "^4.0.15"
+98 -48
View File
@@ -1,83 +1,133 @@
<template > <template >
<el-config-provider :locale="store.localeLang"> <el-config-provider :locale="store.localeLang">
<div class="login"> <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> </div>
</el-config-provider> </el-config-provider>
</template> </template>
<script lang="ts" setup> <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 { ElConfigProvider } from 'element-plus'
import Drawer from "./views/login/modelComponents/Drawer.vue";
import { ipoStore } from "@/stores/ipo" 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(); const store = ipoStore();
onBeforeMount(() => { onBeforeMount(() => {
setFontSize() 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 = () => { const setFontSize = () => {
// 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发,把rem当作px用就行了 // 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发,把rem当作px用就行了
var font = document.documentElement.clientWidth / 375; var font = document.documentElement.clientWidth / 375;
document.documentElement.style.fontSize = font + "px"; document.documentElement.style.fontSize = font + "px";
} }
// export default defineComponent({ const handleDrawer = (done: () => void) => {
// components: { done();
// ElConfigProvider, }
// },
// setup() {
// // store.setLocale(2)
// console.log(store.$state.locale, store.localeLang)
// console.log(document.documentElement.clientWidth)
// return {
// store
// }
// },
// })
</script> </script>
<style lang="scss" > <style lang="scss" >
// @import url(./vars.scss); // @import url(./vars.scss);
// $bg-color: red; // $bg-color: red;
@media (max-width: 767px) { // @media (max-width: 767px) {
.login { // .login {
width: 100vw; // width: 100vw;
height: fit-content; // height: fit-content;
background-color: blue;
}
}
@media (min-width: 768px) {
.login {
width: 100vw;
height: 100vh;
// background-color: blue; // background-color: blue;
} // }
} // }
@media (min-width: 992px) { // @media (min-width: 768px) {
.login { // .login {
height: 100%; // width: 100vw;
width: 100%; // height: 100vh;
// background-color: pink; // // background-color: blue;
} // }
} // }
@media (min-width: 1200px) { // @media (min-width: 992px) {
.login { // .login {
height: 1100px; // height: 100%;
width: 100%; // width: 100%;
// background-color: pink; // // background-color: pink;
} // }
} // }
// @media (min-width: 1200px) {
// .login {
// height: 1100px;
// width: 100%;
// // background-color: pink;
// }
// }
.login { .login {
background-image: url("@/assets/1x/beijingtu.png"); background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
// height: 100%; height: 100%;
width: 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> </style>
+55 -4
View File
@@ -10,7 +10,9 @@ enum Api {
offeringsUrl="/api/ipo/refdata/offering", offeringsUrl="/api/ipo/refdata/offering",
EventData="/api/ipos/listingData", EventData="/api/ipos/listingData",
TypeofList="/api/ipo/refdata/typeOfListing", 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详情页的数据 //获取ipo详情页的数据
export const getIpo = (ipoID:string) => { export const getIpo = (ipoID:string) => {
@@ -33,7 +35,56 @@ export const getTypeofListing = (ipoID:string) => {
return request.get<any, null>(Api.TypeofList+`?ipoID=${ipoID}`); return request.get<any, null>(Api.TypeofList+`?ipoID=${ipoID}`);
}; };
//获取首页的搜索数据 //获取首页的搜索数据
export const getSearchListing = (keyword:string) => { export const getSearchListing = (keyWord:string) => {
return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`); // 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

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