修复bug

This commit is contained in:
zzy 2023-06-16 16:02:24 +08:00
parent 3da81b7b90
commit b3112e27f9
33 changed files with 2616 additions and 860 deletions

View File

@ -5,4 +5,3 @@
fini项目 fini项目
test

View File

@ -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>

100
package-lock.json generated
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"
}, },

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"

View File

@ -1,26 +1,43 @@
<template > <template >
<el-config-provider :locale="store.localeLang"> <el-config-provider :locale="store.localeLang">
<div class="login"> <div class="login">
<router-view v-if="showRouter"/> <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, onMounted, watch ,provide} 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 router from './router'
import { getCurrentInstance} from 'vue' import { getCurrentInstance } from 'vue'
const drawer = ref(false)
const drawer1 = ref(false)
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const showRouter=ref(true) const showRouter = ref(true)
const reflashRouter=()=>{ const route11 = ref(["", "XIPO", "Xdashboard"])
showRouter.value=false; const reflashRouter = () => {
setTimeout(()=>{ showRouter.value = false;
showRouter.value=true setTimeout(() => {
},1) showRouter.value = true
}, 1)
} }
provide('reflashRouter',reflashRouter); const handleOnDrwaer = (bool: boolean) => {
drawer.value = bool
}
provide('reflashRouter', reflashRouter);
provide('handleOnDrwaer', handleOnDrwaer);
function isMobileFn() { function isMobileFn() {
return 768 >= document.documentElement.clientWidth;//768true return 768 >= document.documentElement.clientWidth;//768true
} }
@ -30,20 +47,20 @@ const store = ipoStore();
onBeforeMount(() => { onBeforeMount(() => {
setFontSize() setFontSize()
}) })
onMounted(()=>{ onMounted(() => {
const langHref = window.location.href.split("home")[1] const langHref = window.location.href.split("home")[1]
if (langHref == '?lang=en') { if (langHref == '?lang=en') {
proxy.$i18n.locale = 'en' proxy.$i18n.locale = 'en'
store.setLocale(1) store.setLocale(1)
} else if (langHref == '?lang=tc') { } else if (langHref == '?lang=tc') {
proxy.$i18n.locale = 'zhCt' proxy.$i18n.locale = 'zhCt'
store.setLocale(2) store.setLocale(2)
} else if (langHref == '?lang=sc') { } else if (langHref == '?lang=sc') {
proxy.$i18n.locale = 'zhCn' proxy.$i18n.locale = 'zhCn'
store.setLocale(3) store.setLocale(3)
} }
reflashRouter() reflashRouter()
}) })
@ -52,50 +69,65 @@ const setFontSize = () => {
var font = document.documentElement.clientWidth / 375; var font = document.documentElement.clientWidth / 375;
document.documentElement.style.fontSize = font + "px"; document.documentElement.style.fontSize = font + "px";
} }
const handleDrawer = (done: () => void) => {
done();
}
</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; // background-color: blue;
} // }
} // }
@media (min-width: 768px) { // @media (min-width: 768px) {
.login { // .login {
width: 100vw; // width: 100vw;
height: 100vh; // height: 100vh;
// background-color: blue; // // background-color: blue;
} // }
} // }
@media (min-width: 992px) { // @media (min-width: 992px) {
.login { // .login {
height: 100%; // height: 100%;
width: 100%; // width: 100%;
// background-color: pink; // // background-color: pink;
} // }
} // }
@media (min-width: 1200px) { // @media (min-width: 1200px) {
.login { // .login {
height: 1100px; // height: 1100px;
width: 100%; // width: 100%;
// background-color: pink; // // 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>

View File

@ -11,7 +11,7 @@ enum Api {
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/filter", selectUrl="/api/ipo/refdata/searchAndFilter",
findAllListingDate="/api/ipo/refdata/findAllListingDate" findAllListingDate="/api/ipo/refdata/findAllListingDate"
} }
//获取ipo详情页的数据 //获取ipo详情页的数据
@ -35,9 +35,11 @@ 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 = () => { export const getDate = () => {
return request.get<any, null>(Api.findAllListingDate); return request.get<any, null>(Api.findAllListingDate);
}; };
@ -83,3 +85,6 @@ export const getSelectList = (body:selectObj) => {
// var obj=JSON.stringify({status}) // var obj=JSON.stringify({status})
return request.post<any, null>(Api.selectUrl,body); 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.

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

View File

@ -39,7 +39,8 @@ export default {
ChineseYuan:'Chinese Yuan', ChineseYuan:'Chinese Yuan',
UnitedStatesDollar:'United States Dollar', UnitedStatesDollar:'United States Dollar',
noevent:'No event', noevent:'No event',
Norelevantselectdata:'No relevant select data' Norelevantselectdata:'No relevant select data',
nodata:'No Data',
}, },
dashboard:{ dashboard:{
Home:'Home', Home:'Home',
@ -56,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',

View File

@ -36,7 +36,8 @@ export default {
ChineseYuan:'人民币', ChineseYuan:'人民币',
UnitedStatesDollar:'美元', UnitedStatesDollar:'美元',
noevent:'无事件', noevent:'无事件',
Norelevantselectdata:'无相关选择数据' Norelevantselectdata:'无相关选择数据',
nodata:'无数据',
}, },
dashboard:{ dashboard:{
Home:'主页', Home:'主页',

View File

@ -36,7 +36,8 @@ export default {
ChineseYuan:'人民幣', ChineseYuan:'人民幣',
UnitedStatesDollar:'美元', UnitedStatesDollar:'美元',
noevent:'無事件', noevent:'無事件',
Norelevantselectdata:'無相關選擇數據' Norelevantselectdata:'無相關選擇數據',
nodata:'無數據',
}, },
dashboard:{ dashboard:{
Home:'主頁', Home:'主頁',

View File

@ -64,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",

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);
} }
} },
}) })

View File

@ -60,9 +60,9 @@
</el-table> </el-table>
</div> </div>
<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>

View File

@ -1,7 +1,7 @@
<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" @childfn="fn" /> <Drawer :drawer="drawer" @childfn="fn" />
</el-drawer> </el-drawer>
<div class="hleft"> <div class="hleft">
@ -11,7 +11,7 @@
</div> </div>
<div class="right" > <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">
@ -61,6 +61,13 @@ 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) { function fn(data: any) {
drawer.value = data drawer.value = data
} }
@ -78,6 +85,7 @@ onUnmounted(() => {
.right{ .right{
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
margin-top: 5px;
align-items: center; align-items: center;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
margin-right: 8vw; margin-right: 8vw;
@ -94,15 +102,15 @@ onUnmounted(() => {
margin-left: 15px; margin-left: 15px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
// display: none; display: none;
display: flex; // display: flex;
} }
.second { .second {
width: 25px; width: 25px;
height: 30px; height: 30px;
// margin-top: 4px; margin-top: 4px;
&:hover { &:hover {
transform: scale(1.2); transform: scale(1.2);
@ -165,18 +173,19 @@ onUnmounted(() => {
font-weight: bolder; font-weight: bolder;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 20px; font-size: 24px;
margin-left: 10px; margin-left: 10px;
padding-top: 4px;
//transform: translateX(-60px); //transform: translateX(-60px);
// display: inline; // display: inline;
} }
} }
.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;
@ -187,6 +196,9 @@ onUnmounted(() => {
img { img {
width: 25px; width: 25px;
height: 30px; height: 30px;
@media screen and (max-width: 768px) {
margin-top: -10px;
}
} }
} }

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,16 +13,21 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineProps ,computed} 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)
} }
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')])) 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>
@ -31,7 +38,7 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
@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: 15px; margin-left: 15px;
} }
@ -48,9 +55,14 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
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;
} }
} }
} }

View File

@ -7,18 +7,23 @@
</div> </div>
<div class="rightbox"> <div class="rightbox">
<IpoHeader /> <IpoHeader />
<IpoNav :scroll="scrollTo" /> <IpoNav ref="ipoNav" :scroll="scrollTo" v-if="data != null" />
<div class="content" ref="content"> <div class="content" ref="content" @scroll="contentScroll" v-if="data != null">
<IpoContent ref="i0" :info="information" :title="$t('ipo.CompanyInformation')" /> <IpoContent ref="i0" :info="information11" :title="$t('ipo.CompanyInformation')" />
<IpoContent ref="i1" :info="TypeOfListing" :title="$t('ipo.TypeofListing.TypeofListing')" /> <IpoContent ref="i1" :info="TypeOfListing11" :title="$t('ipo.TypeofListing.TypeofListing')" />
<IpoContent ref="i2" :info="Offerings" :title="$t('ipo.Offering.Offering')" /> <IpoContent ref="i2" :info="Offerings11" :title="$t('ipo.Offering.Offering')" />
<IpoContent ref="i3" :info="Advisers" :title="$t('ipo.advisers.Adviser')" /> <IpoContent ref="i3" :info="Advisers11" :title="$t('ipo.advisers.Adviser')" />
<IpoContent ref="i4" :info="Timetable" :title="$t('ipo.Timetable.Timetable')" /> <IpoContent ref="i4" :info="Timetable11" :title="$t('ipo.Timetable.Timetable')" />
<IpoContent ref="i5" :info="Documents" :title="$t('ipo.Documents.Documents')" /> <IpoContent ref="i5" :info="Documents11" :title="$t('ipo.Documents.Documents')" />
<IpoContent ref="i6" :info="Transaction" :title="$t('ipo.TransactionCosts.TransactionCosts')" /> <IpoContent ref="i6" :info="Transaction11" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
</div>
<div v-else style="display: flex;align-items: center;width: 100vw;height: 90vh;justify-content: center;">
<div style="color:#1f4055 ;font-weight: bold;font-size: 25px;">{{ $t(i18n.global.t('home.nodata')) }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -32,7 +37,7 @@ import Nav from '@/views/dashBoard/nav/index.vue'
import IpoHeader from "./components/IpoHeader.vue" import IpoHeader from "./components/IpoHeader.vue"
import IpoNav from "./components/IpoNav.vue" import IpoNav from "./components/IpoNav.vue"
import IpoContent from "./components/IpoContent.vue" import IpoContent from "./components/IpoContent.vue"
import { ref, onMounted, onUpdated } from "vue"; import { ref, onMounted, onUpdated, computed } from "vue";
import type { TabsPaneContext } from 'element-plus' import type { TabsPaneContext } from 'element-plus'
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
@ -41,7 +46,565 @@ import { getDataFromId } from "@/api/mock/home"
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import moment from 'moment'; import moment from 'moment';
const MockRes = ref<any>('')
const information11 = computed(() => {
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = MockRes.value;
const placeOfincorporation = ref('')
var obj = {
1: proxy.$t('ipo.Bermuda'),
2: proxy.$t('ipo.CaymanIslands'),
3: proxy.$t('ipo.HongKongChina'),
4: proxy.$t('ipo.PeoplesRepublicofChina'),
5: proxy.$t('ipo.Australia'),
6: proxy.$t('ipo.BritishVirginIslands'),
7: proxy.$t('ipo.CanadaAlberta'),
8: proxy.$t('ipo.CanadaBritishColumbia'),
9: proxy.$t('ipo.CanadaOntario'),
10: proxy.$t('ipo.England'),
11: proxy.$t('ipo.Israel'),
12: proxy.$t('ipo.Italy'),
13: proxy.$t('ipo.Japan'),
14: proxy.$t('ipo.Jersey'),
15: proxy.$t('ipo.Luxembourg'),
16: proxy.$t('ipo.Singapore'),
17: proxy.$t('ipo.USDelaware'),
99: proxy.$t('ipo.Others'),
}
if (isValidKey(placeOfCorp, obj)) {
placeOfincorporation.value = obj[placeOfCorp]
}
function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object;
}
const arr = [has_data(companyEngFull), has_data(companyEngShort), has_data(companyChiFull), has_data(companyChiShort), has_data(stkCode), has_data(isin), placeOfincorporation, hkAddress];
arr[7].__proto__ = Array.prototype
let infos = arr[7].map((obj: any) => {
return obj.line
})
return [
{
name: proxy.$t('ipo.CompanyNameEnglishFull'),
info: arr[0]
},
{
name: proxy.$t('ipo.CompanyNameEnglishShort'),
info: arr[1]
},
{
name: proxy.$t('ipo.CompanyNameChineseFull'),
info: arr[2]
},
{
name: proxy.$t('ipo.CompanyNameChineseShort'),
info: arr[3]
},
{
name: proxy.$t('ipo.STockCode'),
info: arr[4]
},
{
name: proxy.$t('ipo.ISIN'),
info: arr[5]
},
{
name: proxy.$t('ipo.PlaceofIncorporation'),
info: arr[6]
},
{
name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'),
infos: infos
}
]
})
const TypeOfListing11 = computed(() => {
let { offerType, listSecurities, nomValue, nomCur, listPlatform, } = MockRes.value;
var obj3 = {
1: "HKD",
2: "CNY",
3: "USD",
4: "AED",
5: "ATS",
6: "AUD",
7: "BDT",
8: "BEC",
9: "BEL",
10: "BHD",
11: "BND",
12: "BRC",
13: "BRL",
14: "BUK",
15: "CAD",
16: "CHF",
17: "CYP",
18: "DEM",
19: "DKK",
20: "ECU",
21: "ESP",
22: "EUR",
23: "FIM",
24: "FJD",
25: "FRF",
26: "GBP",
27: "GGP",
28: "IDR",
29: "IEP",
30: "IMP",
31: "INR",
32: "ITL",
33: "JPY",
34: "KES",
35: "KRW",
36: "KWD",
37: "LBP",
38: "LKR",
39: "MOP",
40: "MUR",
41: "MYR",
42: "NGN",
43: "NIS",
44: "NLG",
45: "NOK",
46: "NZD",
47: "OMR",
48: "PHP",
49: "PKR",
50: "PTE",
51: "QAR",
52: "RUB",
53: "SAR",
54: "SCR",
99: "Others"
}
var obj2 = {
1: proxy.$t('home.Mainboard'),
2: proxy.$t('home.GEM')
}
var obj1 = {
1: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
2: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
3: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
4: proxy.$t('ipo.TypeofListing.Preferenceshares'),
5: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
6: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
7: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
8: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
99: proxy.$t('ipo.TypeofListing.Other'),
}
var obj = {
1: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
2: proxy.$t('ipo.TypeofListing.Byplacingonly'),
3: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
4: proxy.$t('ipo.TypeofListing.Byintroduction'),
5: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
}
if (isValidKey(offerType, obj)) {
offerType = obj[offerType]
}
if (isValidKey(listSecurities, obj1)) {
listSecurities = obj1[listSecurities]
}
if (isValidKey(listPlatform, obj2)) {
listPlatform = obj2[listPlatform]
}
if (isValidKey(nomCur, obj3)) {
nomCur = obj3[nomCur]
}
function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object;
}
const arr = [
{ info: offerType },
{ info: listSecurities },
{ info: has_data(nomValue), info2: nomCur as any },
{ info: listPlatform },
{ info: has_data(listSecurities) },]
return [
{
name: proxy.$t('ipo.TypeofListing.OfferingType'),
info: arr[0].info
},
{
name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'),
info: arr[1].info
},
{
name: proxy.$t('ipo.TypeofListing.NominalValueperShare'),
info: arr[2].info,
name2: proxy.$t('ipo.TypeofListing.NominalCurrency'),
info2: arr[2].info2
},
{
name: proxy.$t('ipo.TypeofListing.ListingPlatform'),
info: arr[3].info
},
{
name: proxy.$t('ipo.TypeofListing.ListingType'),
info: arr[4].info
},]
})
const Offerings11 = computed(() => {
const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = MockRes.value;
var dataObj = [
{ info: has_data(tradeCurrency) },
{ info: keepTwoDecimalStr(downwardPriceFlex) },
{ info: has_data(priceMin?.toFixed(3)) + "-" + has_data(priceMax?.toFixed(3)), info2: has_data(priceFinal?.toFixed(3)) },
{ info: has_data(boardLot) },
{ info: keepTwoDecimalStr(poReallocationCap) },
{ info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
{ info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
{ info: has_data(upsizeOption?.toFixed(2), "%") },
{ table: denomTable }
]
const arr = Offerings.value.map((item, index) => {
const name = item.name;
const info = dataObj[index].info;
var filterObj = { name, info } as any;
if (dataObj[index].info2 || dataObj[index].info2s) {
filterObj.info2 = dataObj[index].info2
filterObj.name2 = item.name2;
}
if (dataObj[index]?.info2s) {
filterObj.info2s = dataObj[index].info2s
}
if (dataObj[index].table) {
filterObj.table = { title: item.table?.title, lists: [] }
filterObj.table.lists = dataObj[index].table.map((element: any) => {
if (index == 8) {
//
function formatNumber(num: number | string) {
return num.toString().replace(/\d+/, function (n: string) {
return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
})
}
const { shares: number, value: persent } = element;
// console.log('ttttttttttttttttttt',persent);
let per = Number(persent)
return { number: formatNumber(number), persent: per && formatNumber(per.toFixed(2)) }
} else {
const { threshold: number, allocation: persent } = element;
return { number, persent: keepTwoDecimalStr(persent) }
}
})
}
return filterObj
})
return [
{
name: proxy.$t('ipo.Offering.TradingCurrency'),
info: arr[0].info
},
{
name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
info: arr[1].info
},
{
name: proxy.$t('ipo.Offering.OfferPriceRange'),
info: arr[2].info,
name2: proxy.$t('home.finalofferprice'),
info2: arr[2].info2
},
{
name: proxy.$t('ipo.Offering.TradingBoardLot'),
info: arr[3].info
},
{
name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
info: arr[4].info
},
{
// name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
// info: "100,000", ----
name: "",
info: "",
name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
info2: arr[5].info,
info2s: arr[5].info2s,
table: {
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" },
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }],
lists: arr[5].table.lists,
}
},
{
name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
info: arr[6].info,
name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
info2: arr[6].info2,
},
{
name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
info: arr[7].info,
},
// {--------
// name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
// info: "inclusive"
// },
// {-------------
// name: proxy.$t('ipo.Offering.OverallotmentOption'),
// info: "5.00%"
// },
{
name: proxy.$t('ipo.Offering.DenominationTable'),
table: {
title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel() ? 35 : 50, align: "right" },
{ header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
lists: arr[8].table.lists,
}
}
]
})
const Advisers11 = computed(() => {
let { designatedSponsor, sponsors, legalSponsor, legalIssuer, underwriters, advisers, overallCoordinators, distributors, hkSharereg } = MockRes.value;
const arr = [
{ info: has_data(designatedSponsor) },
{ infos: filter(sponsors) },
{ infos: filter(legalSponsor) },
{ info: has_data(legalIssuer) },
{ infos: filter(underwriters) },
{ infos: filter(advisers) },
{ infos: filter(overallCoordinators) },
{ infos: filter(distributors) },
{ info: has_data(hkSharereg) }
]
function filter(arr: any) {
if (arr) {
return arr.map((item: any) => item.member)
} else {
return "-";
}
}
const arrData = Advisers.value.map((item: any, index: number) => {
if (arr[index].info) {
return { ...item, info: arr[index].info }
} else {
if (arr[index].infos?.length - 1 > 0) {
let info2Top = -(arr[index].infos?.length * 22) + "px";
return { ...item, infos: arr[index].infos, info2Top }
} else {
return { ...item, infos: arr[index].infos }
}
}
})
// console.log('arrData', arrData)
return [
{
name: proxy.$t('ipo.advisers.DesignatedSponsor'),
info: arrData[0].info
// info2: "IBD-TEAM01"
},
{
name: proxy.$t('ipo.advisers.Sponsor'),
info: arrData[1].info,
infos: arrData[1].infos,
},
{
name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
infos: arrData[2].infos,
info2Top: arrData[2].info2Top
},
{
name: proxy.$t('ipo.advisers.HKLegalAdviser'),
info: arrData[3].info
// info2: "LEG_TEAM05"
},
{
name: proxy.$t('ipo.advisers.Underwriter'),
info: arrData[4].info,
infos: arrData[4].infos,
},
{
name: proxy.$t('ipo.advisers.Adviser'),
info: arrData[5].info,
infos: arrData[5].infos
},
{
name: proxy.$t('ipo.advisers.OverallCoordinator'),
infos: arrData[6].infos,
// info2: "PLA_SYN_TEAM03",
info2Top: arrData[6].info2Top,
},
{
name: proxy.$t('ipo.advisers.Distributor'),
infos: arrData[7].infos,
info2Top: arrData[7].info2Top,
// info2: "PLA_SYN_TEAM04"
},
{
name: proxy.$t('ipo.advisers.HKShareRegistrar'),
info: arrData[8].info,
},
]
})
const Timetable11 = computed(() => {
const { listingDate, bookOpenDate, bookCloseDate, pricingDate, allotmentDate, siInputDate, placingSharesDeliveryDate } = MockRes.value;
const arr = [
{
info: timeTo(listingDate)[0], info2: timeTo(listingDate)[1],
table: {
lists: [{
number: timeTo(bookOpenDate)[0],
persent: timeTo(bookOpenDate)[1]
}, {
number: timeTo(bookCloseDate)[0],
persent: timeTo(bookCloseDate)[1]
}, {
number: timeTo(pricingDate)[0],
persent: timeTo(pricingDate)[1]
}, {
number: timeTo(allotmentDate)[0],
persent: timeTo(allotmentDate)[1]
}, {
number: timeTo(siInputDate)[0],
persent: timeTo(siInputDate)[1]
}, {
number: timeTo(placingSharesDeliveryDate)[0],
persent: timeTo(placingSharesDeliveryDate)[1]
}]
}
}
]
const arrData = Timetable.value.map(item => {
const isMobel = 768 >= document.documentElement.clientWidth;
item.table.lists = item.table.lists.map((item, index) => {
const { number, persent } = arr[0].table.lists[index]
return { ...item, number, persent }
})
if (isMobel) {
item.table.title = item.table.title.filter((element: any) => element.header)
item.table.title = item.table.title.map((element: any, index: number) => {
if (index == 0) {
element.width = 55;
}
return element
})
}
return { ...item, info: arr[0].info, info2: arr[0].info2 }
})
function timeTo(time: string | null | undefined) {
if (time) {
return [moment(time).format("YYYY-MM-DD"), toEmpty(moment(time).format("HH:mm"))]
} else {
return ["-", "-"]
}
function toEmpty(time: string) {
//00:00
if (time == "00:00") {
return ""
} else {
return time
}
}
}
const lists = arrData[0].table.lists;
return [
{
name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
info: arrData[0].info,
name2: proxy.$t('ipo.Timetable.Time'),
info2: arrData[0].info2,
table: {
title: [
{ header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
{ width: isMobel() ? 1 : 12 }, //
{ header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel() ? 30 : 20, align: "left" },
{ header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel() ? 22 : 20, align: "left" }],
lists: [
{
des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
number: lists[0].number,
persent: lists[0].persent
},
{
des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
number: lists[1].number,
persent: lists[1].persent,
},
{
des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
number: lists[2].number,
persent: lists[2].persent,
},
{
des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'),
number: lists[3].number,
persent: lists[3].persent,
},
{
des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
number: lists[4].number,
persent: lists[4].persent,
},
{
des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
number: lists[5].number,
persent: lists[5].persent,
}
]
}
}
]
})
const Documents11 = computed(() => {
return [
{
name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
info: Documents.value[0].info,
name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
info2: Documents.value[0].info2,
href: Documents.value[0].href,
href2: Documents.value[0].href2
},
]
})
const Transaction11 = computed(() => {
const { brokerage, sfcLevy, sehkTradingFee, afrcTransactionLevy } = MockRes.value;
//console.log('@@11123', afrcTransactionLevy)
const arr = [
{ info: has_data(brokerage?.toFixed(5), "%"), info2: has_data(sfcLevy?.toFixed(5), "%") },
{ info: has_data(sehkTradingFee?.toFixed(5), "%"), info2: has_data(afrcTransactionLevy?.toFixed(5), "%") },
]
const arrData = Transaction.value.map((item, index) => {
// if(arr[index].info == undefined){return ('-' as any)}
// if(arr[index].info2 == null){return '-'}
if (arr[index].info2) {
return { ...item, info: arr[index].info, info2: arr[index].info2 }
} else {
return { ...item, info: arr[index].info }
}
})
return [
{
name: proxy.$t('ipo.TransactionCosts.Brokerage'),
info: arrData[0].info,
name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
info2: arrData[0].info2
},
{
name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
info: arrData[1].info,
name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
info2: arrData[1].info2
},
]
})
const store = ipoStore(); const store = ipoStore();
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const activeName = ref('first') const activeName = ref('first')
@ -52,6 +615,8 @@ const i3 = ref()
const i4 = ref() const i4 = ref()
const i5 = ref() const i5 = ref()
const i6 = ref() const i6 = ref()
const ipoNav = ref()
const isClickScroll = ref(false)
const route = useRoute() const route = useRoute()
const handleClick = (tab: TabsPaneContext, event: Event) => { const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event) console.log(tab, event)
@ -312,6 +877,7 @@ const Timetable = ref([
persent: '', persent: '',
} }
] ]
} }
} }
@ -342,36 +908,53 @@ const Transaction = ref([
]) ])
const content = ref() const content = ref()
onMounted( onMounted(
() => { () => {
data.value = JSON.parse(localStorage.getItem('itemData') as string) store.setMobileActiveShow(3);//
// 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);
getreferencedata() getreferencedata()
setDownLoad() setDownLoad()
// text(); // text();
} }
) )
// async function text() { async function text() {
// const res = await getDataFromId(1); const res = await getDataFromId(1);
// setInformation((res as any)[0]) MockRes.value = (res as any)[0]
// setTypeofListing((res as any)[0]) // setInformation((res as any)[0])
// setOfferings((res as any)[0]) // setTypeofListing((res as any)[0])
// setAdvisers((res as any)[0]) // setOfferings((res as any)[0])
// setTransaction((res as any)[0]) setAdvisers((res as any)[0])
// setTimeTable((res as any)[0]) setTransaction((res as any)[0])
// } setTimeTable((res as any)[0])
}
const getreferencedata = async () => { const getreferencedata = async () => {
const ipoID = localStorage.getItem('ipoID') //const ipoID = localStorage.getItem('ipoID')
const ipoID = sessionStorage.getItem('ipoID')
const res = await getIpo(ipoID as string) const res = await getIpo(ipoID as string)
setInformation((res as any).data[0]) MockRes.value = (res as any).data[0]
setTypeofListing((res as any).data[0]) // setInformation((res as any).data[0])
setOfferings((res as any).data[0]) // setTypeofListing((res as any).data[0])
setAdvisers((res as any).data[0]) // setOfferings((res as any).data[0])
setTransaction((res as any).data[0]) // setAdvisers((res as any).data[0])
setTimeTable((res as any).data[0]) // setTransaction((res as any).data[0])
// setTimeTable((res as any).data[0])
} }
function isMobel() { function isMobel() {
return 768 >= document.documentElement.clientWidth; return 768 >= document.documentElement.clientWidth;
} }
// const setInformation1 = computed((mockRes: any)=>{
// console.log(mockRes);
// })
function setInformation(mockRes: any) { function setInformation(mockRes: any) {
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes; const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
const placeOfincorporation = ref('') const placeOfincorporation = ref('')
var obj = { var obj = {
@ -416,6 +999,8 @@ function setInformation(mockRes: any) {
return { ...item, infos } return { ...item, infos }
} }
}) })
//console.log(information.value);
} }
function setOfferings(mockRes: any) { function setOfferings(mockRes: any) {
const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = mockRes; const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = mockRes;
@ -453,8 +1038,8 @@ function setOfferings(mockRes: any) {
} }
const { shares: number, value: persent } = element; const { shares: number, value: persent } = element;
// console.log('ttttttttttttttttttt',persent); // console.log('ttttttttttttttttttt',persent);
let per=Number(persent) let per = Number(persent)
return { number:formatNumber(number) , persent:per&&formatNumber(per.toFixed(2)) } return { number: formatNumber(number), persent: per && formatNumber(per.toFixed(2)) }
} else { } else {
const { threshold: number, allocation: persent } = element; const { threshold: number, allocation: persent } = element;
@ -733,6 +1318,7 @@ function has_data(str: string | null | undefined, str2: string = "") {
} }
// //
function scrollTo(stron: string) { function scrollTo(stron: string) {
isClickScroll.value = true;
var obj = { var obj = {
i0TOP: i0.value.$el.offsetTop, i0TOP: i0.value.$el.offsetTop,
i1TOP: i1.value.$el.offsetTop, i1TOP: i1.value.$el.offsetTop,
@ -746,6 +1332,10 @@ function scrollTo(stron: string) {
// //
content.value.scrollTop = obj[stron] - obj.i0TOP; content.value.scrollTop = obj[stron] - obj.i0TOP;
} }
setTimeout(() => {
isClickScroll.value = false;
})
// tsobj[stron] // tsobj[stron]
function isValidKey( function isValidKey(
key: string | number | symbol, key: string | number | symbol,
@ -754,9 +1344,38 @@ function scrollTo(stron: string) {
return key in object; return key in object;
} }
}
function contentScroll(e: any) {
if (isClickScroll.value) return
var obj = {
i0TOP: i0.value.$el.offsetTop + 50,
i1TOP: i1.value.$el.offsetTop,
i2TOP: i2.value.$el.offsetTop,
i3TOP: i3.value.$el.offsetTop,
i4TOP: i4.value.$el.offsetTop,
i5TOP: i5.value.$el.offsetTop,
i6TOP: i6.value.$el.offsetTop
}
if (obj.i6TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 6
} else if (obj.i5TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 5
} else if (obj.i4TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 4
} else if (obj.i3TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 3
} else if (obj.i2TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 2
} else if (obj.i1TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 1
} else {
ipoNav.value.ipoNavActive = 0
}
} }
async function setDownLoad() { async function setDownLoad() {
const ipoID = localStorage.getItem('ipoID'); //const ipoID = localStorage.getItem('ipoID');
const ipoID = sessionStorage.getItem('ipoID');
const res = await getIpo(ipoID as string) const res = await getIpo(ipoID as string)
const enHref = `${(res as any).data[0].pdfLink.eLink}`; const enHref = `${(res as any).data[0].pdfLink.eLink}`;
const chinaHref = `${(res as any).data[0].pdfLink.cLink}`; const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
@ -779,13 +1398,31 @@ async function setDownLoad() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login2 { .login2 {
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat; // background-image: url("@/assets/1x/beijingtu.png");
background-size: cover; // background-repeat: no-repeat;
width: 1700px; // background-size: cover;
// height: 100vh;
// font-family: "Calibri";
// width: 1900px;
//width: 1900px;
// font-family: "Calibri"; // font-family: "Calibri";
@media screen and (max-width: 768px){ // @media screen and (max-width: 768px) {
width: auto; // position: fixed;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// }
@media screen and (max-width: 768px) {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
} }
} }

View File

@ -1,5 +1,6 @@
<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" />
<img src="@/assets/1x/1x/source1.png" class="icon2" /> <img src="@/assets/1x/1x/source1.png" class="icon2" />
@ -11,34 +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 #dateCell="{data}"> <template #dateCell="{ data }">
<p style="margin:0px" > <p style="margin:0px">
{{ data.day.split('-').slice(2).join() }} {{ data.day.split('-').slice(2).join() * 1 }}
<div v-for="(i, index) in dayTime" :key="index"> <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> <div v-if="data.day == i" class="yuan1"></div>
</p> </div>
</template> <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">
@ -53,12 +60,15 @@ 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,getDate } from "@/api/reqIpo/ipo"; import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home" 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)
} }
@ -68,10 +78,10 @@ watch(dayValue, async (ne, ol) => {
setEventdata((result as any).data) setEventdata((result as any).data)
}) })
const dayTime = ref() const dayTime = ref()
const getcalendar = async ()=>{ const getcalendar = async () => {
const res = await getDate() const res = await getDate()
dayTime.value = (res as any).data dayTime.value = (res as any).data
console.log(dayTime.value); console.log(dayTime.value);
} }
const showMounth = (date: any) => { const showMounth = (date: any) => {
const arr = date.split(" ") const arr = date.split(" ")
@ -87,6 +97,72 @@ onMounted(async () => {
setEventdata((result as any).data) setEventdata((result as any).data)
getcalendar() 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;
@ -101,44 +177,66 @@ 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) {
.yuan{ .login{
width: 100vw;
height: fit-content;
}
.yuan {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: #f7be39; background-color: #f7be39;
position: absolute; position: absolute;
//right: 20px; //right: 20px;
//top: 36px; //top: 36px;
transform: translateY(11px); transform: translateY(11px);
//transform: translateX(3px); //transform: translateX(3px);
margin-left: 3px; margin-left: 2px;
border-radius: 10px; 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: 20px; margin-top: 20px;
transform: translateX(-10px); transform: translateX(-10px);
height: 25px;
.top-title { .top-title {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
font-size: 25px; font-size: 25px;
color: #ffffff; color: #ffffff;
margin-left: 10px; margin-left: 10px;
padding-top: 6px;
} }
.icon1 { .icon1 {
@ -182,9 +280,9 @@ const backRouter = () => {
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;
@ -232,7 +330,7 @@ const backRouter = () => {
} }
:deep(.el-calendar-table thead th) { :deep(.el-calendar-table thead th) {
// padding: 2px 0; // padding: 2px 0;
font-weight: 550; font-weight: 550;
} }
@ -295,6 +393,7 @@ const backRouter = () => {
: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;
} }

View File

@ -7,7 +7,7 @@
</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">
@ -18,7 +18,7 @@
</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>
@ -50,11 +50,15 @@ const handleShowLang = (e: any) => {
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
@ -90,6 +94,13 @@ const drawShow = () => {
//background-color: black; //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: 25px; width: 25px;
@ -130,7 +141,7 @@ const drawShow = () => {
transform: translateY(-20px); transform: translateY(-20px);
height: 50px; height: 50px;
width: 1000px; width: 1000px;
// background-color: red; //background-color: red;
li{ li{
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -139,7 +150,7 @@ const drawShow = () => {
@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;
@ -148,6 +159,7 @@ const drawShow = () => {
// background-color: red; // background-color: red;
span{ span{
margin-left: 10px; margin-left: 10px;
padding-top: 4px;
} }
height: 30px; height: 30px;
align-items: center; align-items: center;
@ -179,6 +191,8 @@ const drawShow = () => {
display: block; display: block;
// margin-top: 3px; // margin-top: 3px;
vertical-align: middle; vertical-align: middle;
width: 25px;
height: 20px;
} }
} }
@ -190,14 +204,14 @@ const drawShow = () => {
min-width: 200px; min-width: 200px;
// background-color: red; // background-color: red;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 20px; font-size: 24px;
// margin-top: 4px; // 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%;
@ -211,6 +225,9 @@ const drawShow = () => {
img { img {
width: 25px; width: 25px;
height: 30px; height: 30px;
@media screen and (max-width: 768px) {
margin-top: -8px;
}
} }
} }
@ -221,22 +238,26 @@ const drawShow = () => {
min-width: 50px; min-width: 50px;
//background-color: green; //background-color: green;
margin-top: 7px; margin-top: 7px;
//background-color: #2B4A60; // background-color: #2B4A60;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
// width: 100vw; width: 90vw;
//color: red; //color: red;
margin-top: 10px; margin-top: 2vh;
transform: translateX(-10px); // transform: translateX(-10px);
width: 250px; // width: 250px;
margin-left: 100px; 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: 15px; font-size: 15px;
//background-color: red;
} }
} }

View File

@ -6,14 +6,14 @@
<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" />
@ -22,7 +22,7 @@
</h5> </h5>
</div> </div>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5> <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code33 }}</h5>
<h4 >{{ props.data.tradeCurrency }} {{ 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'))
@ -43,14 +43,13 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { size } from 'lodash'; import { size } from 'lodash';
import { ref, onMounted, onUpdated,watch } 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 { computed } from '@vue/reactivity'; import Aimage from "./image1/index.vue";
import Aimage from "@/views/login/components/a-image/index.vue";
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const store = ipoStore(); const store = ipoStore();
const currentDate = ref(new Date()) const currentDate = ref(new Date())
@ -106,24 +105,89 @@ const props = defineProps({
logolinks: "", logolinks: "",
status: 0, status: 0,
listingDate: "", listingDate: "",
ipoID:0, ipoID: 0,
tradeCurrency:"" tradeCurrency: ""
} }
} }
} }
}) })
// console.log(props.data.tradeCurrency);
const code22 = ref('') const code22 = ref('')
onMounted(()=>{ onMounted(() => {
setCodefn() setCodefn()
}) })
watch(props,(newValue:any, oldValue:any)=>{ watch(props, (newValue: any, oldValue: any) => {
setCodefn(); setCodefn();
},{deep:true}) }, { deep: true })
function setCodefn(){ const code33 = computed(() => {
// console.log('data',newValue,oldValue); return {
var obj = { 25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'),
45: proxy.$t('home.AllotmentConfirmed'),
50: proxy.$t('home.MoneySettlement'),
55: proxy.$t('home.AllocationConfirmed'),
60: proxy.$t('home.placingApproved'),
65: proxy.$t('home.AllotmentResultsApproved'),
70: proxy.$t('home.TradingStarted'),
80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'),
}[props.data.status as number]
})
const detailsItem33 = computed(() => {
var tag = true;
const arr = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
return [
{
name: proxy.$t('home.DealInitiated'),
icon: arr[0].icon
},
{
name: proxy.$t('home.PublicOfferClosed'),
icon: arr[1].icon
},
{
name: proxy.$t('home.ApplicationValidated'),
icon: arr[2].icon
},
{
name: proxy.$t('home.AllotmentConfirmed'),
icon: arr[3].icon
}
, {
name: proxy.$t('home.MoneySettlement'),
icon: arr[4].icon
},
{
name: proxy.$t('home.AllocationConfirmed'),
icon: arr[5].icon
}, {
name: proxy.$t('home.placingApproved'),
icon: arr[6].icon
}, {
name: proxy.$t('home.AllotmentResultsApproved'),
icon: arr[7].icon
}, {
name: proxy.$t('home.TradingStarted'),
icon: arr[8].icon
}
]
})
function setCodefn() {
// console.log('data',newValue,oldValue);
var obj = {
25: proxy.$t('home.DealInitiated'), 25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'), 30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'), 35: proxy.$t('home.ApplicationValidated'),
@ -168,12 +232,18 @@ 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.ipoID) localStorage.setItem('ipoID', item.ipoID)
console.log(item); //console.log(item);
localStorage.setItem('itemData', JSON.stringify(item)) localStorage.setItem('itemData', JSON.stringify(item))
router.push({ router.push({
name: 'Xdashboard', name: 'Xdashboard',
@ -204,39 +274,39 @@ const handleclick = (item: any) => {
// width: 270rem; // width: 270rem;
// height: 360rem; // height: 360rem;
// } // }
.imglogo{ // .imglogo{
background-color: #23445a; // background-color: #23445a;
height: 15vh; // height: 15vh;
line-height: 15vh; // line-height: 15vh;
text-align: center; // text-align: center;
overflow: hidden; // overflow: hidden;
font-size: 38px; // font-size: 38px;
font-weight: bold; // font-weight: bold;
font-family: "Calibri"; // font-family: "Calibri";
color: #fff; // color: #fff;
} // }
.title { // .title {
background-color: #fff; // background-color: #fff;
height: 120px; // height: 120px;
line-height: 120px; // line-height: 120px;
font-size: 40px; // font-size: 40px;
color: #fff; // color: #fff;
overflow: hidden; // overflow: hidden;
position: relative; // position: relative;
font-family: "Calibri"; // font-family: "Calibri";
// @media screen and (max-width: 768px){ // // @media screen and (max-width: 768px){
// font-size: 80px; // // font-size: 80px;
// } // // }
img { // img {
max-height: 100%; // max-height: 100%;
max-width: 100%; // max-width: 100%;
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 50%; // left: 50%;
transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
} // }
} // }
.list { .list {
// height: 150px; // height: 150px;

View File

@ -29,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'
}) })
@ -43,7 +43,7 @@ const rightWidth = computed(()=>{
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 28px; height: 28px;
width: 400px; width: 405px;
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
width: 80vw; width: 80vw;

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="title" v-if="isImage"> <div class="title" v-if="isImage">
<img v-lazy="props.src" /> <img :src="props.src" />
</div> </div>
<div class="title2" v-else> <div class="title2" v-else>
{{props.number}} {{props.number}}

File diff suppressed because it is too large Load Diff

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;

View File

@ -14,22 +14,25 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineExpose ,inject} 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 { useRouter } from "vue-router";
import router from '@/router'; import router from '@/router';
const store = ipoStore() const store = ipoStore()
const route=useRouter() 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 reflashRouter = inject('reflashRouter') as Function
const IpoReflash=()=>{ const IpoReflash = () => {
// if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){ // if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
// reflashRouter() // reflashRouter()
// } // }
reflashRouter() // reflashRouter()
// if(route.options.history.location=="/home"){
// reflashRouter()
// }
} }
const handleLang1 = () => { const handleLang1 = () => {

View File

@ -1,38 +1,71 @@
<template> <template>
<div class="bigbox" @click="handleclick(props.data)"> <Aimage @click="handleclick(props.data)" :src="props.data.logolinks" :number="props.data.number" />
<Aimage :src="props.data.logolinks" :number="props.data.number"/> <div class="listexpand" v-if="store.isExpand(props.data.ipoID)" @click="handleclick(props.data)">
<div class="list"> <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="store.isExpand(props.data.ipoID)" />
<ArrowUp v-if="expand" /> <ArrowDown v-else />
<ArrowDown v-else /> </el-icon>
</el-icon>
</div>
<h4>{{ props.data.number }}</h4>
<div v-if="expand" class="details">
<h5 v-for="(item, index) in detailsItem" :key="index">
<span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" />
<img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
</el-icon>
</h5>
</div>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
<h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
<h5>{{ props.data.time }}</h5>
<h6>{{ props.data.listingDate ?
$t(i18n.global.t('home.CommencementofTradeDate')) :
$t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
}}</h6>
</div> </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' : '' }">{{ code22
}}</h5>
<h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
<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 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> </div>
</template> </template>
@ -43,13 +76,12 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { size } from 'lodash'; import { size } from 'lodash';
import { ref, onMounted, onUpdated,watch } 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 { computed } from '@vue/reactivity';
import Aimage from "./a-image/index.vue"; import Aimage from "./a-image/index.vue";
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const store = ipoStore(); const store = ipoStore();
@ -92,40 +124,96 @@ 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: "", const props = defineProps<{ data: dataType, index: number }>()
ipoID:0,
tradeCurrency:""
}
}
}
})
// console.log(props.data.tradeCurrency); // console.log(props.data.tradeCurrency);
const code22 = ref('') const code22 = ref('')
onMounted(()=>{ onMounted(() => {
setCodefn() setCodefn()
}) })
watch(props,(newValue:any, oldValue:any)=>{ watch(props, (newValue: any, oldValue: any) => {
setCodefn(); setCodefn();
},{deep:true}) }, { deep: true })
function setCodefn(){ const code33 = computed(() => {
// console.log('data',newValue,oldValue); return {
var obj = { 25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'),
45: proxy.$t('home.AllotmentConfirmed'),
50: proxy.$t('home.MoneySettlement'),
55: proxy.$t('home.AllocationConfirmed'),
60: proxy.$t('home.placingApproved'),
65: proxy.$t('home.AllotmentResultsApproved'),
70: proxy.$t('home.TradingStarted'),
80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'),
}[props.data.status as unknown as number]
})
const detailsItem33 = computed(() => {
var tag = true;
const arr = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
return [
{
name: proxy.$t('home.DealInitiated'),
icon: arr[0].icon
},
{
name: proxy.$t('home.PublicOfferClosed'),
icon: arr[1].icon
},
{
name: proxy.$t('home.ApplicationValidated'),
icon: arr[2].icon
},
{
name: proxy.$t('home.AllotmentConfirmed'),
icon: arr[3].icon
}
, {
name: proxy.$t('home.MoneySettlement'),
icon: arr[4].icon
},
{
name: proxy.$t('home.AllocationConfirmed'),
icon: arr[5].icon
}, {
name: proxy.$t('home.placingApproved'),
icon: arr[6].icon
}, {
name: proxy.$t('home.AllotmentResultsApproved'),
icon: arr[7].icon
}, {
name: proxy.$t('home.TradingStarted'),
icon: arr[8].icon
}
]
})
function setCodefn() {
// console.log('data',newValue,oldValue);
var obj = {
25: proxy.$t('home.DealInitiated'), 25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'), 30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'), 35: proxy.$t('home.ApplicationValidated'),
@ -168,15 +256,39 @@ function setCodefn(){
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) }
@ -187,6 +299,39 @@ 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;
@ -206,97 +351,145 @@ const handleclick = (item: any) => {
// width: 270rem; // width: 270rem;
// height: 360rem; // height: 360rem;
// } // }
.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;
// } .listexpand {
img { // height: 150px;
max-height: 100%; width: 270px;
max-width: 100%; display: flex;
position: absolute; justify-content: center;
top: 50%; font-family: "Calibri";
left: 50%; background-color: #e7efec;
transform: translate(-50%, -50%); overflow: hidden;
border: 1px solid #DDE2E6;
cursor: pointer;
margin-top: 120px;
margin-left: -271px;
border-radius: 0px 0px 20px 20px;
margin-right: 20px;
margin-bottom: 30px;
height: fit-content;
.list-content {
margin-top: 10px;
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;
} }
} }
}
.list { .list {
// 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: 260px;
.list-content { .list-content {
margin-top: 10px; margin-top: 10px;
width: 230px; width: 230px;
// height: 100%; // height: 100%;
.details { .details {
.icon1 { .icon1 {
margin-left: 3px; margin-left: 3px;
transform: translateY(2.5px); transform: translateY(2.5px);
}
} }
}
h4 { h4 {
font-size: 20px; font-size: 20px;
color: #3b6181; color: #3b6181;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 600; font-weight: 600;
font-family: "Calibri"; font-family: "Calibri";
} }
h5 { h5 {
font-size: 16px; font-size: 16px;
color: #4b6d8a; color: #4b6d8a;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 400; font-weight: 400;
font-family: "Calibri"; font-family: "Calibri";
} }
h6 { h6 {
font-size: 12px; font-size: 12px;
color: #5e7e98; color: #5e7e98;
margin-bottom: 8px; margin-bottom: 8px;
// font-family: "Calibri"; // font-family: "Calibri";
} }
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} margin-top: 40px;
}
.icon {
@media screen and (max-width: 768px) {
width: 11px;
height: 13px;
}
.icon {
@media screen and (max-width: 768px) {
width: 11px; width: 11px;
height: 13px; height: 13px;
} }
width: 11px;
height: 13px;
} }
} }
} }

View File

@ -1,9 +1,9 @@
<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">
<li> <li>
<div class="word" @click="checkAll(1)"> <div class="word" :class="checkedAll == 1 && 'active'" @click="checkAll(1)">
{{ $t(i18n.global.t('home.title.All')) }} {{ $t(i18n.global.t('home.title.All')) }}
<div class="check"> <div class="check">
<el-icon v-if="checkedAll == 1"> <el-icon v-if="checkedAll == 1">
@ -11,7 +11,8 @@
</el-icon> </el-icon>
</div> </div>
</div> </div>
<div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }} <div class="word" :class="checkedAll == 2 && 'active'" @click="checkAll(2)">{{
$t(i18n.global.t('home.title.None')) }}
<div class="check"> <div class="check">
<el-icon v-if="checkedAll == 2"> <el-icon v-if="checkedAll == 2">
<Check></Check> <Check></Check>
@ -22,7 +23,7 @@
</li> </li>
<div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div> <div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" <div class="word" v-for="item in obj.ipoStatus" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'ipoStatus')"> @click="checkOne(item.key, 'ipoStatus')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
@ -35,7 +36,7 @@
<div class="title">{{ $t(i18n.global.t('home.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="checkOne(item.key, 'tradingCurrency')"> :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 />
@ -46,7 +47,7 @@
</li> </li>
<div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div> <div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.offeringType" :key="item.key" <div class="word" v-for="item in obj.offeringType" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'offeringType')"> @click="checkOne(item.key, 'offeringType')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
@ -59,7 +60,7 @@
<div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div> <div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key" <div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key"
@click="checkOne(item.key, 'SecuritiestobeListed')"> :class="item.isSelcted && 'active'" @click="checkOne(item.key, 'SecuritiestobeListed')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
<Check /> <Check />
@ -68,18 +69,7 @@
<span>{{ item.value }}</span> <span>{{ item.value }}</span>
</div> </div>
</li> </li>
<!-- <div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
<li>
<div class="word" v-for="item in obj.ListingPlatform" :key="item.key"
@click="checkOne(item.key, 'ListingPlatform')">
<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">
@ -99,27 +89,95 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineExpose, reactive ,inject,onMounted} from 'vue'; import { ref, defineExpose, reactive, inject, onMounted } from 'vue';
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import { getSelectList } from "@/api/reqIpo/ipo" import { getSelectList } from "@/api/reqIpo/ipo"
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform' import { ipoStore } from "@/stores/ipo"
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform' 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 { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false) const showSelect = ref(false)
const checkedAll = ref(0) const checkedAll = ref(0)
const selectCards=inject('selectCards') as Function const selectCards = inject('selectCards') as Function
onMounted(()=>{ //const status = inject('status')
console.log('select组件挂载'); 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 () => { const confirm = async () => {
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',] if (checkedAll.value == 2) {
store.setSelectedArr({});
porps.fn()
return
}
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities']
var reqeustObj = { var reqeustObj = {
status: [] as string[], status: [] as string[],
trade_currency: [] as string[], trade_currency: [] as string[],
offer_type: [] as string[], offer_type: [] as string[],
list_securities: [] as string[], list_securities: [] as string[],
list_platform: [] as string[],
} }
Object.keys(obj).forEach((item: string, index: number) => { Object.keys(obj).forEach((item: string, index: number) => {
@ -129,15 +187,23 @@ const confirm = async () => {
} }
}) })
}) })
const result = await getSelectList(reqeustObj) store.setSelectedArr(reqeustObj);
console.log('result',result); const result = await store.getSearchSelectList()
// const result = await getSelectList(reqeustObj)
//mock-----------
// const data = await getDataFromId("Select")
// var result = {
// data
// }
//mock-----------
selectCards(result); selectCards(result);
showSelect.value=false showSelect.value = false
porps.fn()
} }
const Cancel = () => { const Cancel = () => {
showSelect.value = false; // showSelect.value = false;
porps.fn()
} }
const preVant = (e: any) => { const preVant = (e: any) => {
e.stopPropagation(); e.stopPropagation();
@ -165,7 +231,7 @@ const obj = reactive({
value: proxy.$t('home.MoneySettlement'), value: proxy.$t('home.MoneySettlement'),
isSelcted: false isSelcted: false
}, { }, {
key: 55, key: "55",
value: proxy.$t('home.AllocationConfirmed'), value: proxy.$t('home.AllocationConfirmed'),
isSelcted: false isSelcted: false
}, { }, {
@ -272,15 +338,15 @@ const obj = reactive({
isSelcted: false isSelcted: false
} }
], ],
ListingPlatform: [{ // ListingPlatform: [{
key: '1', // key: '1',
value: proxy.$t('home.Mainboard'), // value: proxy.$t('home.Mainboard'),
isSelcted: false // isSelcted: false
}, { // }, {
key: '2', // key: '2',
value: proxy.$t('home.GEM'), // value: proxy.$t('home.GEM'),
isSelcted: false // isSelcted: false
}], // }],
// ListingType: [{ // ListingType: [{
// key: '1', // key: '1',
// value: proxy.$t('ipo.TypeofListing.Ordinaryshares'), // value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
@ -349,9 +415,7 @@ function selectAll(all: 1 | 2) {
}) })
}) })
} }
defineExpose({
showSelect
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -365,14 +429,16 @@ defineExpose({
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 10; z-index: 10;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 90vw; width: 90vw;
height: 93vh; height: 93vh;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
overflow-y: scroll; overflow-y: scroll;
} }
.box { .box {
box-sizing: border-box; box-sizing: border-box;
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
@ -388,22 +454,23 @@ defineExpose({
font-size: 18px; font-size: 18px;
color: #879db2; color: #879db2;
margin-top: 10px; margin-top: 10px;
// @media screen and (max-width: 768px){ // @media screen and (max-width: 768px){
// font-size: 12px; // font-size: 12px;
// } // }
} }
li { li {
display: flex; display: flex;
font-size: 18px; font-size: 18px;
flex-wrap: wrap; flex-wrap: wrap;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
flex-direction: column; flex-direction: column;
flex-wrap:nowrap; flex-wrap: nowrap;
//font-size: 12px; //font-size: 12px;
width: fit-content; width: fit-content;
} }
.word { .word {
margin-right: 10px; margin-right: 10px;
@ -417,16 +484,25 @@ defineExpose({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
@media screen and (max-width: 768px){
height: fit-content;
width: fit-content;
}
&:hover {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
} @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;
@ -454,11 +530,12 @@ defineExpose({
background-color: #fff; background-color: #fff;
color: #557795; color: #557795;
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
@media screen and (max-width: 768px){
margin:0; @media screen and (max-width: 768px) {
margin: 0;
// font-size: 12px; // font-size: 12px;
} }
&:hover { &:hover {
background-color: #0F426F; background-color: #0F426F;
@ -468,5 +545,4 @@ defineExpose({
} }
} }
} }
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div >
<div class="title" v-if="isImage"> <div class="title" v-if="isImage">
<img v-lazy="props.src" /> <img v-lazy="props.src" />
</div> </div>
@ -67,6 +67,9 @@ const checkImgExists=(imgurl:string) =>{
overflow: hidden; overflow: hidden;
position: relative; position: relative;
font-family: "Calibri"; font-family: "Calibri";
width: 270px;
border-radius: 20px 20px 0px 0px;
margin-top: 30px;
img { img {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
@ -83,5 +86,11 @@ const checkImgExists=(imgurl:string) =>{
line-height: 120px; line-height: 120px;
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
width: 270px;
border-radius: 20px 20px 0px 0px;
margin-top: 30px;
overflow: hidden;
font-family: "Calibri";
position: relative;
} }
</style> </style>

View File

@ -1,11 +1,10 @@
<template> <template>
<!-- <div class="login3">
</div> -->
<div class="login2"> <div class="login2">
<Select ref="selectR" /> <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 :drawer="drawer" @childfn="fn" />
</el-drawer>
<div class="left"> <div class="left">
<div class="header"> <div class="header">
<div class="menu"> <div class="menu">
@ -31,8 +30,9 @@
<!-- <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>
@ -50,7 +50,6 @@
<img src="@/assets/1x/source14.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">{{ date }}</span>
<el-button size="small" @click="selectDate('next-month')"> <el-button size="small" @click="selectDate('next-month')">
@ -58,16 +57,22 @@
</el-button> </el-button>
</template> </template>
<template #dateCell="{data}"> <template #dateCell="{ data }">
<p style="margin:0px" > <p style="margin:0px">
{{ data.day.split('-').slice(2).join() }} {{ data.day.split('-').slice(2).join() * 1 }}
<div v-for="(i, index) in dayTime" :key="index">
<div v-for="(i, index) in dayTime" :key="index"> <!-- <div v-if="data.day == i" class="yuan"></div> -->
<div v-if="data.day==i" class="yuan"></div> <div v-if="i.split('-').slice(2).join() * 1 <= 9">
</div> <div v-if="data.day == i" class="yuan1"></div>
</p> </div>
</template> <div v-else>
<div v-if="data.day == i" class="yuan"></div>
</div>
</div>
</p>
</template>
</el-calendar> </el-calendar>
@ -95,24 +100,26 @@ import { useRouter } from 'vue-router';
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance, provide } from 'vue' import { getCurrentInstance, provide } from 'vue'
import Event from './components/Event.vue'; import Event from './components/Event.vue';
import { getEventData, getSearchListing ,getDate} 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";
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const reflashRouter = inject('reflashRouter') as Function const reflashRouter = inject('reflashRouter') as Function
const handleOnDrwaer = inject('handleOnDrwaer') as Function
const router = useRouter() const router = useRouter()
const store = ipoStore() const store = ipoStore()
const selectR = ref(); const selectR = ref();
const dayValue = ref(new Date()) const dayValue = ref(store.homeDay)
const drawer = ref(false)
const selectVisible = ref(false)
onMounted(() => { onMounted(() => {
store.setMobileActiveShow(1);//
window.onhashchange = function () { window.onhashchange = function () {
const langHref = window.location.href.split("home")[1] const langHref = window.location.href.split("home")[1]
console.log(window.location.href,langHref);
if (langHref == '?lang=en') { if (langHref == '?lang=en') {
proxy.$i18n.locale = 'en' proxy.$i18n.locale = 'en'
@ -130,15 +137,20 @@ onMounted(() => {
}; };
getcalendar() getcalendar()
}) })
const selectVisibleFn = () => {
selectVisible.value = false
}
// //
const selectCards = async (res: any) => { const selectCards = async (res: any) => {
async function demo() { async function demo() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
if (!(res as any).data.length) { if (!(res as any).data.length) {
ElMessage.warning(proxy.$t('home.Norelevantselectdata')) 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, tradeCurrency } = item; let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
return { return {
@ -186,23 +198,26 @@ const selectCards = async (res: any) => {
logos.value = result as objType[] logos.value = result as objType[]
} }
provide('selectCards', selectCards); provide('selectCards', selectCards);
const handleDrawer = (done: () => void) => {
done();
}
const openDrawer = () => { const openDrawer = () => {
drawer.value = true; 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 );
} }
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);
setEventdata((result as any).data) setEventdata((result as any).data)
// const result = await getDataFromId('event'); // const result = await getDataFromId('event');
// console.log('@@@@', result); // console.log('@@@@', result);
// setEventdata((result as any)) // setEventdata((result as any))
@ -264,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
// } // }
]) ])
@ -286,21 +301,20 @@ const setEventdata = (EventD: any) => {
}) })
} }
const dayTime = ref() const dayTime = ref()
const getcalendar = async ()=>{ const getcalendar = async () => {
const res = await getDate() const res = await getDate()
dayTime.value = (res as any).data dayTime.value = (res as any).data
console.log(dayTime.value); 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,tradeCurrency } = 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,
@ -343,21 +357,25 @@ 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(proxy.$t('home.Norelevantselectdata')) 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,tradeCurrency } = item; let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
// console.log(companyEngFull,companyChiFull); // console.log(companyEngFull,companyChiFull);
return { return {
logolinks: logoLink, logolinks: logoLink,
@ -414,13 +432,17 @@ 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[]>([
// { // {
@ -507,14 +529,16 @@ 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) => {
@ -531,18 +555,15 @@ const handleShowCup = (e: any) => {
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) {
lang.value.showLang = false
}
} }
}) if (lang.value.showLang) {
lang.value.showLang = false
}
}
)
onUnmounted(() => { onUnmounted(() => {
document.documentElement.onclick = null document.documentElement.onclick = null
}) })
@ -555,13 +576,13 @@ const showMounth = (date: any) => {
return arr[2] + " " + arr[3] return arr[2] + " " + arr[3]
} }
} }
function fn(data: any) { function fn(data: boolean) {
drawer.value = data console.log('22222')
// drawer.value = data
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.yuan {
.yuan{
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: #f7be39; background-color: #f7be39;
@ -573,15 +594,43 @@ function fn(data: any) {
margin-left: 3px; margin-left: 3px;
border-radius: 10px; 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) { @media screen and (max-width: 768px) {
width: 100vw; position: fixed;
overflow-x: hidden; top: 0;
height: 100vh; left: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
} }
} }
@ -615,11 +664,16 @@ function fn(data: any) {
align-items: center; align-items: center;
// padding-left: 35px; // padding-left: 35px;
height: 80px; height: 80px;
//position: fixed;
// @media screen and (max-width: 768px) { //background-color: red;
// height: 60rem; @media screen and (max-width: 768px) {
// // background-color: red; // position: fixed;
// } // top: 0;
// left: 0;
// width: 100%;
// background-color: #000000;
position: relative;
}
.menuicon { .menuicon {
display: none; display: none;
@ -645,6 +699,7 @@ function fn(data: any) {
.my-autocomplete li .highlighted .addr { .my-autocomplete li .highlighted .addr {
color: #ddd; color: #ddd;
} }
.dropdown { .dropdown {
position: relative; position: relative;
@ -718,6 +773,8 @@ function fn(data: 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;
@ -725,6 +782,16 @@ function fn(data: 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;
} }
} }
@ -737,7 +804,7 @@ function fn(data: 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;
@ -777,8 +844,11 @@ function fn(data: any) {
.right-bottom1 { .right-bottom1 {
width: 420px; width: 420px;
background-color: #ffffff; background-color: #ffffff;
height: 500px; // height: 350px;
height: 350px;
//height: fit-content;
margin-top: 40px; margin-top: 40px;
// position: relative;
// margin-left: 20px; // margin-left: 20px;
// text-align: center; // text-align: center;
// line-height: 500px; // line-height: 500px;
@ -786,6 +856,7 @@ function fn(data: any) {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.right-bottom-title1 { .right-bottom-title1 {
color: #1f4055; color: #1f4055;
@ -897,6 +968,12 @@ function fn(data: any) {
color: red; color: red;
} }
// ::-webkit-scrollbar {
// width: 0 !important;
// }
// ::-webkit-scrollbar {
// width: 0 !important;height: 0;
// }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.left { .left {
width: 100vw; width: 100vw;
@ -908,7 +985,7 @@ function fn(data: any) {
.header { .header {
height: 60px; height: 60px;
//background-color: red;
.menuicon { .menuicon {
display: block; display: block;
margin-left: 5px; margin-left: 5px;
@ -952,6 +1029,12 @@ function fn(data: any) {
} }
</style> </style>
<style> <style>
/* ::-webkit-scrollbar {
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;height: 0;
} */
@media (min-width: 992px) { @media (min-width: 992px) {
.header .el-input__wrapper { .header .el-input__wrapper {
margin-top: 20px; margin-top: 20px;

View File

@ -1,57 +1,63 @@
<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>{{ $t(i18n.global.t('dashboard.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>{{ $t(i18n.global.t('dashboard.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>
<img src="@/assets/1x/source2.png" alt="menu">
<span >{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
</div> </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> --> </div> -->
<img src="@/assets/1x/source2.png" alt="menu">
<span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
</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>{{ $t(i18n.global.t('home.IPOcalendar')) }}</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>{{ $t(i18n.global.t('home.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>
</div> </div>
</li> </li>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -61,45 +67,114 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue" import { inject } from 'vue'
import { getCurrentInstance, onUnmounted,inject } from 'vue'
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router"; 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 i18n from '@/locales'
const route=useRouter() import { getCurrentInstance } from 'vue'
const store = ipoStore() 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)
let emit = defineEmits(['childfn']) const dayValue = ref(new Date())
const reflashRouter=inject('reflashRouter') as Function const calendar = ref()
const IpoReflash=()=>{ const handleDrawer = (done: () => void) => {
if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){ done();
reflashRouter() }
//const Eventdata = ref([])
const selectDate = (val: string) => {
calendar.value.selectDate(val)
}
const dayTime = ref()
const getcalendar = async () => {
const res = await getDate()
dayTime.value = (res as any).data
console.log(dayTime.value);
}
const showMounth = (date: any) => {
const arr = date.split(" ")
if (arr.length == 3) {
return arr[2]
} else if (arr.length == 4) {
return arr[2] + " " + arr[3]
} }
} }
const props = defineProps({
drawer:Boolean
})
const drawer2 = ref(false)
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
done()
}
//const drawer1 = ref(false)
const setState = (number: number) => {
store.setMobileActiveShow(number)
if (number == 1) {
proxy.$router.push("/home")
}
if (number == 2) {
proxy.$router.push("/dashboard")
}
if (number == 3) {
proxy.$router.push("/IPO")
}
if (number == 4) {
proxy.$router.push("/IPOcalendar")
store.setMobileActiveShow(1)
// emit('childfn', !drawer1)
// emit('childfn', !drawer)
// drawer1.value = true
// console.log(drawer1.value);
}
setTimeout(() => {
handleOnDrwaer(false)
})
}
//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 drawer = props.drawer
console.log(props); let drawer1 = props.drawer1
//console.log(props);
const state = ref(1) const state = ref(1)
// const drawer = ref(true) // const drawer = ref(true)
const setState = (number: number) => {
state.value = number; const setState2 = (number: number) => {
if(number == 1){ store.setMobileActiveShow(number)
proxy.$router.push("/home") showalanguge.value = !showalanguge.value
}
if(number == 2){
proxy.$router.push("/dashboard")
}
if(number == 3){
proxy.$router.push("/IPO")
}
if(number == 4){
proxy.$router.push("/IPOcalendar")
}
} }
const handleLang1 = () => { const handleLang1 = () => {
@ -107,26 +182,26 @@ const handleLang1 = () => {
proxy.$i18n.locale = 'en' proxy.$i18n.locale = 'en'
} }
store.setLocale(1) store.setLocale(1)
emit('childfn',!drawer) emit('childfn', !drawer)
IpoReflash() // IpoReflash()
} }
const handleLang2 = () => { const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') { if (proxy.$i18n.locale = 'zhCt') {
proxy.$i18n.locale = 'zhCt' proxy.$i18n.locale = 'zhCt'
IpoReflash() // IpoReflash()
} }
store.setLocale(2) store.setLocale(2)
emit('childfn',!drawer) emit('childfn', !drawer)
IpoReflash() /// 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) emit('childfn', !drawer)
IpoReflash() // IpoReflash()
} }
</script> </script>
@ -137,14 +212,27 @@ const handleLang3 = () => {
transform: translateX(-20px); transform: translateX(-20px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.imgWrap22222 { .imgWrap22222 {
margin-top: 20px; margin-top: 20px;
width: 25px; width: fit-content;
height: 20px; height: 20px;
margin-left: 15px; 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;
} }
} }
@ -169,6 +257,7 @@ const handleLang3 = () => {
img { img {
width: 22px; width: 22px;
height: 22px; height: 22px;
// background-color: red;
} }
span { span {
@ -176,6 +265,9 @@ const handleLang3 = () => {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #1C3F56; color: #1C3F56;
display: block;
line-height: 50px;
padding-top: 6px;
} }
} }
@ -208,6 +300,30 @@ 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: 12px; width: 12px;
height: 19px; height: 19px;
@ -223,7 +339,7 @@ const handleLang3 = () => {
span { span {
display: inline-block; display: inline-block;
transform: translateY(-3px); // transform: translateY(-3px);
} }
@ -231,4 +347,10 @@ const handleLang3 = () => {
} }
} }
</style>
<style>
/* .el-drawer__body{
padding: 0
} */
</style> </style>

View File

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