修复bug
This commit is contained in:
zzy
parent
3da81b7b90
commit
b3112e27f9
|
|
@ -13,6 +13,12 @@
|
|||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
<style>
|
||||
html{
|
||||
|
||||
touch-action:none;
|
||||
|
||||
touch-action:pan-y;
|
||||
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^0.27.2",
|
||||
"echarts": "^5.4.1",
|
||||
"echarts": "^5.4.2",
|
||||
"element-plus": "^2.3.0",
|
||||
"js-cookie": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
"pinia": "^2.0.33",
|
||||
"postcss-px2rem": "^0.3.0",
|
||||
"vue": "^3.2.36",
|
||||
"vue-echarts": "^6.5.5",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-lazyload": "^3.0.0-rc.2",
|
||||
"vue-router": "^4.0.15"
|
||||
|
|
@ -4174,12 +4175,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
|
||||
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
|
||||
"version": "5.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
|
||||
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.1"
|
||||
"zrender": "5.4.3"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
|
|
@ -9213,6 +9214,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/resize-detector": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
|
||||
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
|
||||
},
|
||||
"node_modules/resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
|
|
@ -10537,6 +10543,48 @@
|
|||
"@vue/shared": "3.2.37"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-echarts": {
|
||||
"version": "6.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
|
||||
"integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"resize-detector": "^0.3.0",
|
||||
"vue-demi": "^0.13.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.5",
|
||||
"echarts": "^5.4.1",
|
||||
"vue": "^2.6.12 || ^3.1.1"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-echarts/node_modules/vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
|
||||
|
|
@ -10877,9 +10925,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
|
||||
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
|
||||
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
|
|
@ -14471,12 +14519,12 @@
|
|||
}
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
|
||||
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
|
||||
"version": "5.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
|
||||
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.1"
|
||||
"zrender": "5.4.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
|
|
@ -18321,6 +18369,11 @@
|
|||
"resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
|
||||
},
|
||||
"resize-detector": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
|
||||
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
|
|
@ -19375,6 +19428,23 @@
|
|||
"@vue/shared": "3.2.37"
|
||||
}
|
||||
},
|
||||
"vue-echarts": {
|
||||
"version": "6.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
|
||||
"integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
|
||||
"requires": {
|
||||
"resize-detector": "^0.3.0",
|
||||
"vue-demi": "^0.13.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
|
||||
|
|
@ -19635,9 +19705,9 @@
|
|||
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
|
||||
},
|
||||
"zrender": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
|
||||
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
|
||||
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^0.27.2",
|
||||
"echarts": "^5.4.1",
|
||||
"echarts": "^5.4.2",
|
||||
"element-plus": "^2.3.0",
|
||||
"js-cookie": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
"pinia": "^2.0.33",
|
||||
"postcss-px2rem": "^0.3.0",
|
||||
"vue": "^3.2.36",
|
||||
"vue-echarts": "^6.5.5",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-lazyload": "^3.0.0-rc.2",
|
||||
"vue-router": "^4.0.15"
|
||||
|
|
|
|||
96
src/App.vue
96
src/App.vue
|
|
@ -1,7 +1,16 @@
|
|||
<template >
|
||||
<el-config-provider :locale="store.localeLang">
|
||||
<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>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
|
@ -9,18 +18,26 @@
|
|||
<script lang="ts" setup>
|
||||
import { defineComponent, ref, onBeforeMount, onMounted, watch, provide } from 'vue'
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import Drawer from "./views/login/modelComponents/Drawer.vue";
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
import router from './router'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
const drawer = ref(false)
|
||||
const drawer1 = ref(false)
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const showRouter = ref(true)
|
||||
const route11 = ref(["", "XIPO", "Xdashboard"])
|
||||
const reflashRouter = () => {
|
||||
showRouter.value = false;
|
||||
setTimeout(() => {
|
||||
showRouter.value = true
|
||||
}, 1)
|
||||
}
|
||||
const handleOnDrwaer = (bool: boolean) => {
|
||||
drawer.value = bool
|
||||
}
|
||||
provide('reflashRouter', reflashRouter);
|
||||
provide('handleOnDrwaer', handleOnDrwaer);
|
||||
function isMobileFn() {
|
||||
return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
|
||||
}
|
||||
|
|
@ -52,50 +69,65 @@ const setFontSize = () => {
|
|||
var font = document.documentElement.clientWidth / 375;
|
||||
document.documentElement.style.fontSize = font + "px";
|
||||
}
|
||||
const handleDrawer = (done: () => void) => {
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
// @import url(./vars.scss);
|
||||
// $bg-color: red;
|
||||
@media (max-width: 767px) {
|
||||
.login {
|
||||
width: 100vw;
|
||||
height: fit-content;
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.login {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// @media (max-width: 767px) {
|
||||
// .login {
|
||||
// width: 100vw;
|
||||
// height: fit-content;
|
||||
// background-color: blue;
|
||||
}
|
||||
}
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.login {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// background-color: pink;
|
||||
}
|
||||
}
|
||||
// @media (min-width: 768px) {
|
||||
// .login {
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
// // background-color: blue;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.login {
|
||||
height: 1100px;
|
||||
width: 100%;
|
||||
// background-color: pink;
|
||||
}
|
||||
}
|
||||
// @media (min-width: 992px) {
|
||||
// .login {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// // background-color: pink;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media (min-width: 1200px) {
|
||||
// .login {
|
||||
// height: 1100px;
|
||||
// width: 100%;
|
||||
// // background-color: pink;
|
||||
// }
|
||||
// }
|
||||
|
||||
.login {
|
||||
background-image: url("@/assets/1x/beijingtu.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
// height: 100%;
|
||||
width: 100%;
|
||||
|
||||
height: 100%;
|
||||
width: 1900px;
|
||||
height: 1300px;
|
||||
//overflow: hidden;
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// height: 2000px;
|
||||
// background-size:100% 100%;
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100vw;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ enum Api {
|
|||
EventData="/api/ipos/listingData",
|
||||
TypeofList="/api/ipo/refdata/typeOfListing",
|
||||
searchUrl="/api/ipo/refdata/search",
|
||||
selectUrl="/api/ipo/refdata/filter",
|
||||
selectUrl="/api/ipo/refdata/searchAndFilter",
|
||||
findAllListingDate="/api/ipo/refdata/findAllListingDate"
|
||||
}
|
||||
//获取ipo详情页的数据
|
||||
|
|
@ -35,9 +35,11 @@ export const getTypeofListing = (ipoID:string) => {
|
|||
return request.get<any, null>(Api.TypeofList+`?ipoID=${ipoID}`);
|
||||
};
|
||||
//获取首页的搜索数据
|
||||
export const getSearchListing = (keyword:string) => {
|
||||
return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
|
||||
};
|
||||
export const getSearchListing = (keyWord:string) => {
|
||||
// return request.post<any, null>(Api.selectUrl+`?keyWord=${keyWord}`);
|
||||
|
||||
return request.post<any, null>(Api.selectUrl,{keyWord});
|
||||
}
|
||||
export const getDate = () => {
|
||||
return request.get<any, null>(Api.findAllListingDate);
|
||||
};
|
||||
|
|
@ -83,3 +85,6 @@ export const getSelectList = (body:selectObj) => {
|
|||
// var obj=JSON.stringify({status})
|
||||
return request.post<any, null>(Api.selectUrl,body);
|
||||
};
|
||||
// export const getSearchListing =(keyword:string)=>{
|
||||
// return request.post<any, null>(Api.selectUrl,keyword);
|
||||
// }
|
||||
Binary file not shown.
|
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 |
|
|
@ -39,7 +39,8 @@ export default {
|
|||
ChineseYuan:'Chinese Yuan',
|
||||
UnitedStatesDollar:'United States Dollar',
|
||||
noevent:'No event',
|
||||
Norelevantselectdata:'No relevant select data'
|
||||
Norelevantselectdata:'No relevant select data',
|
||||
nodata:'No Data',
|
||||
},
|
||||
dashboard:{
|
||||
Home:'Home',
|
||||
|
|
@ -56,7 +57,7 @@ export default {
|
|||
ApplicationQuantity:'Application Quantity (Shares)',
|
||||
InitialShares:'Initial Shares',
|
||||
FinalShares:'Final Shares',
|
||||
LastUpadated:'Last Upadated',
|
||||
LastUpadated:'Last Updated',
|
||||
InitialAllocation:'Initial Allocation',
|
||||
Public:'Public',
|
||||
Institutional:'Institutional',
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@ export default {
|
|||
ChineseYuan:'人民币',
|
||||
UnitedStatesDollar:'美元',
|
||||
noevent:'无事件',
|
||||
Norelevantselectdata:'无相关选择数据'
|
||||
Norelevantselectdata:'无相关选择数据',
|
||||
nodata:'无数据',
|
||||
},
|
||||
dashboard:{
|
||||
Home:'主页',
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@ export default {
|
|||
ChineseYuan:'人民幣',
|
||||
UnitedStatesDollar:'美元',
|
||||
noevent:'無事件',
|
||||
Norelevantselectdata:'無相關選擇數據'
|
||||
Norelevantselectdata:'無相關選擇數據',
|
||||
nodata:'無數據',
|
||||
},
|
||||
dashboard:{
|
||||
Home:'主頁',
|
||||
|
|
|
|||
|
|
@ -64,16 +64,6 @@ export const staticRoutes: Array<RouteRecordRaw> = [
|
|||
name: "XIPO",
|
||||
component: () => import("@/views/IPO/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/searchdash",
|
||||
name: "Xsearchdash",
|
||||
component: () => import("@/views/searchdash/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/searchipo",
|
||||
name: "Xsearchipo",
|
||||
component: () => import("@/views/searchipo/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/IPOcalendar",
|
||||
name: "Xsearchipo",
|
||||
|
|
|
|||
|
|
@ -3,12 +3,23 @@ import { defineStore } from 'pinia'
|
|||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
import en from 'element-plus/dist/locale/en.mjs'
|
||||
import zhTw from 'element-plus/dist/locale/zh-tw.mjs'
|
||||
import request from "@/utils/request";
|
||||
enum Api {
|
||||
selectUrl="/api/ipo/refdata/searchAndFilter",
|
||||
|
||||
}
|
||||
export const ipoStore = defineStore({
|
||||
id: 'app',
|
||||
state: () => ({
|
||||
//1代表英文 2代表繁体中文 3代表简体中文
|
||||
locale:1,
|
||||
|
||||
homeDay:new Date(),
|
||||
mobileActiveShow:1,
|
||||
mainExpand:-1,
|
||||
filterObj:{}, //把过滤条件放在这里
|
||||
keyWord:"",
|
||||
selectedArr:{},
|
||||
ipoIds:[] as any
|
||||
}),
|
||||
getters: {
|
||||
localeLang(state) {
|
||||
|
|
@ -19,6 +30,44 @@ export const ipoStore = defineStore({
|
|||
//更改语言的方法
|
||||
setLocale(data: number) {
|
||||
this.locale = data
|
||||
|
||||
},
|
||||
setHomeDay(day:string|Date){
|
||||
this.homeDay=day as Date;
|
||||
},
|
||||
setMobileActiveShow(num:number){
|
||||
this.mobileActiveShow=num;
|
||||
},
|
||||
setMainExpand(num:number){
|
||||
this.mainExpand=num;
|
||||
},
|
||||
setFilterObje(obj:any){
|
||||
this.filterObj=obj;
|
||||
},
|
||||
// reqSearchList(keyworld:string){
|
||||
|
||||
// }
|
||||
setSelectedArr(data:any){
|
||||
this.selectedArr=data;
|
||||
},
|
||||
setKeyWord(keyWord:string){
|
||||
this.keyWord=keyWord;
|
||||
},
|
||||
getSearchSelectList(){
|
||||
const keyWord=this.keyWord;
|
||||
const selectedArr=this.selectedArr;
|
||||
return request.post<any, null>(Api.selectUrl,{keyWord,...selectedArr});
|
||||
},
|
||||
setIpoIds(ipoId:string|number){
|
||||
const arr=this.$state.ipoIds;
|
||||
const hasId= arr.some((i:any)=>i==ipoId);
|
||||
const index=arr.findIndex((i:any)=>i==ipoId);
|
||||
hasId&&arr.splice(index,1)
|
||||
!hasId&&arr.push(ipoId)
|
||||
},
|
||||
isExpand(ipoId:string|number){
|
||||
return this.$state.ipoIds.some((i:any)=>i==ipoId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="Modeltable" v-if="item.table">
|
||||
<el-table :data="item.table.lists" stripe style="width: 100%; ">
|
||||
<el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
|
||||
:label="title.header" :width="320 * (title.width / 100)" :align="title.align" :key="index" />
|
||||
:label="title.header" :width="322 * (title.width / 100)" :align="title.align" :key="index" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="headerWrap">
|
||||
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
|
||||
style="background-color: #1C3F56;" :with-header="false">
|
||||
style="background-color: #1C3F56;" :with-header="false" title="">
|
||||
<Drawer :drawer="drawer" @childfn="fn" />
|
||||
</el-drawer>
|
||||
<div class="hleft">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<div class="right" >
|
||||
<div class="search" @click="handlesearch">
|
||||
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
|
||||
<img src="@/assets/1x/source10.png" alt="找不到图片">
|
||||
</div>
|
||||
<div class="langWrap">
|
||||
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
|
||||
|
|
@ -61,6 +61,13 @@ onMounted(() => {
|
|||
lang.value.showLang = false
|
||||
}
|
||||
})
|
||||
//const data1 =ref()
|
||||
// onMounted(() => {
|
||||
// const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
|
||||
// data1.value = obj
|
||||
// console.log(data1.value);
|
||||
|
||||
// })
|
||||
function fn(data: any) {
|
||||
drawer.value = data
|
||||
}
|
||||
|
|
@ -78,6 +85,7 @@ onUnmounted(() => {
|
|||
.right{
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
margin-top: 5px;
|
||||
align-items: center;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-right: 8vw;
|
||||
|
|
@ -94,15 +102,15 @@ onUnmounted(() => {
|
|||
margin-left: 15px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
// display: none;
|
||||
display: flex;
|
||||
display: none;
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
.second {
|
||||
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
// margin-top: 4px;
|
||||
margin-top: 4px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
|
|
@ -165,18 +173,19 @@ onUnmounted(() => {
|
|||
font-weight: bolder;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
margin-left: 10px;
|
||||
padding-top: 4px;
|
||||
//transform: translateX(-60px);
|
||||
// display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: #fff;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
//background-color: #fff;
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -187,6 +196,9 @@ onUnmounted(() => {
|
|||
img {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="item">
|
||||
<a @click="scrollto(index)" v-for="(item, index) in list" :key="index">{{ item }}</a>
|
||||
<a @click="scrollto(index)" v-for="(item, index) in list " :class="ipoNavActive == index ? 'active' : ''"
|
||||
:key="index">{{
|
||||
item }}</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,16 +13,21 @@ export default {
|
|||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineProps ,computed} from "vue"
|
||||
import { ref, defineProps, computed, defineExpose } from "vue"
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const props = defineProps<{ scroll: Function }>()
|
||||
const ipoNavActive = ref(0)
|
||||
const scrollto = (index: number) => {
|
||||
const ref11 = "i" + index + "TOP"
|
||||
console.log(ref11)
|
||||
// console.log(ref11)
|
||||
ipoNavActive.value = index
|
||||
props.scroll(ref11)
|
||||
}
|
||||
defineExpose({
|
||||
ipoNavActive
|
||||
})
|
||||
const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')]))
|
||||
</script>
|
||||
|
||||
|
|
@ -31,7 +38,7 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 0px;
|
||||
width: 100vw;
|
||||
// width: 100vw;
|
||||
overflow-x: scroll;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
|
@ -48,9 +55,14 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
|
|||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
// background-color: #1C3F56;
|
||||
// color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1C3F56;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,18 +7,23 @@
|
|||
</div>
|
||||
<div class="rightbox">
|
||||
<IpoHeader />
|
||||
<IpoNav :scroll="scrollTo" />
|
||||
<div class="content" ref="content">
|
||||
<IpoContent ref="i0" :info="information" :title="$t('ipo.CompanyInformation')" />
|
||||
<IpoContent ref="i1" :info="TypeOfListing" :title="$t('ipo.TypeofListing.TypeofListing')" />
|
||||
<IpoContent ref="i2" :info="Offerings" :title="$t('ipo.Offering.Offering')" />
|
||||
<IpoContent ref="i3" :info="Advisers" :title="$t('ipo.advisers.Adviser')" />
|
||||
<IpoContent ref="i4" :info="Timetable" :title="$t('ipo.Timetable.Timetable')" />
|
||||
<IpoContent ref="i5" :info="Documents" :title="$t('ipo.Documents.Documents')" />
|
||||
<IpoContent ref="i6" :info="Transaction" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
|
||||
<IpoNav ref="ipoNav" :scroll="scrollTo" v-if="data != null" />
|
||||
<div class="content" ref="content" @scroll="contentScroll" v-if="data != null">
|
||||
<IpoContent ref="i0" :info="information11" :title="$t('ipo.CompanyInformation')" />
|
||||
<IpoContent ref="i1" :info="TypeOfListing11" :title="$t('ipo.TypeofListing.TypeofListing')" />
|
||||
<IpoContent ref="i2" :info="Offerings11" :title="$t('ipo.Offering.Offering')" />
|
||||
<IpoContent ref="i3" :info="Advisers11" :title="$t('ipo.advisers.Adviser')" />
|
||||
<IpoContent ref="i4" :info="Timetable11" :title="$t('ipo.Timetable.Timetable')" />
|
||||
<IpoContent ref="i5" :info="Documents11" :title="$t('ipo.Documents.Documents')" />
|
||||
<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>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
@ -32,7 +37,7 @@ import Nav from '@/views/dashBoard/nav/index.vue'
|
|||
import IpoHeader from "./components/IpoHeader.vue"
|
||||
import IpoNav from "./components/IpoNav.vue"
|
||||
import IpoContent from "./components/IpoContent.vue"
|
||||
import { ref, onMounted, onUpdated } from "vue";
|
||||
import { ref, onMounted, onUpdated, computed } from "vue";
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
import { useRoute } from 'vue-router'
|
||||
|
|
@ -41,7 +46,565 @@ import { getDataFromId } from "@/api/mock/home"
|
|||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
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 { proxy } = (getCurrentInstance() as any)
|
||||
const activeName = ref('first')
|
||||
|
|
@ -52,6 +615,8 @@ const i3 = ref()
|
|||
const i4 = ref()
|
||||
const i5 = ref()
|
||||
const i6 = ref()
|
||||
const ipoNav = ref()
|
||||
const isClickScroll = ref(false)
|
||||
const route = useRoute()
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
|
|
@ -312,6 +877,7 @@ const Timetable = ref([
|
|||
persent: '',
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -342,36 +908,53 @@ const Transaction = ref([
|
|||
])
|
||||
const content = ref()
|
||||
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()
|
||||
setDownLoad()
|
||||
// text();
|
||||
}
|
||||
)
|
||||
// async function text() {
|
||||
// const res = await getDataFromId(1);
|
||||
async function text() {
|
||||
const res = await getDataFromId(1);
|
||||
MockRes.value = (res as any)[0]
|
||||
// setInformation((res as any)[0])
|
||||
// setTypeofListing((res as any)[0])
|
||||
// setOfferings((res as any)[0])
|
||||
// setAdvisers((res as any)[0])
|
||||
// setTransaction((res as any)[0])
|
||||
// setTimeTable((res as any)[0])
|
||||
// }
|
||||
setAdvisers((res as any)[0])
|
||||
setTransaction((res as any)[0])
|
||||
setTimeTable((res as any)[0])
|
||||
|
||||
}
|
||||
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)
|
||||
setInformation((res as any).data[0])
|
||||
setTypeofListing((res as any).data[0])
|
||||
setOfferings((res as any).data[0])
|
||||
setAdvisers((res as any).data[0])
|
||||
setTransaction((res as any).data[0])
|
||||
setTimeTable((res as any).data[0])
|
||||
MockRes.value = (res as any).data[0]
|
||||
// setInformation((res as any).data[0])
|
||||
// setTypeofListing((res as any).data[0])
|
||||
// setOfferings((res as any).data[0])
|
||||
// setAdvisers((res as any).data[0])
|
||||
// setTransaction((res as any).data[0])
|
||||
// setTimeTable((res as any).data[0])
|
||||
|
||||
|
||||
}
|
||||
function isMobel() {
|
||||
return 768 >= document.documentElement.clientWidth;
|
||||
}
|
||||
// const setInformation1 = computed((mockRes: any)=>{
|
||||
// console.log(mockRes);
|
||||
|
||||
// })
|
||||
function setInformation(mockRes: any) {
|
||||
|
||||
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
|
||||
const placeOfincorporation = ref('')
|
||||
var obj = {
|
||||
|
|
@ -416,6 +999,8 @@ function setInformation(mockRes: any) {
|
|||
return { ...item, infos }
|
||||
}
|
||||
})
|
||||
//console.log(information.value);
|
||||
|
||||
}
|
||||
function setOfferings(mockRes: any) {
|
||||
const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = mockRes;
|
||||
|
|
@ -733,6 +1318,7 @@ function has_data(str: string | null | undefined, str2: string = "") {
|
|||
}
|
||||
//滑动到指定列表
|
||||
function scrollTo(stron: string) {
|
||||
isClickScroll.value = true;
|
||||
var obj = {
|
||||
i0TOP: i0.value.$el.offsetTop,
|
||||
i1TOP: i1.value.$el.offsetTop,
|
||||
|
|
@ -746,6 +1332,10 @@ function scrollTo(stron: string) {
|
|||
// 滑动
|
||||
content.value.scrollTop = obj[stron] - obj.i0TOP;
|
||||
}
|
||||
setTimeout(() => {
|
||||
isClickScroll.value = false;
|
||||
})
|
||||
|
||||
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
|
||||
function isValidKey(
|
||||
key: string | number | symbol,
|
||||
|
|
@ -754,9 +1344,38 @@ function scrollTo(stron: string) {
|
|||
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() {
|
||||
const ipoID = localStorage.getItem('ipoID');
|
||||
//const ipoID = localStorage.getItem('ipoID');
|
||||
const ipoID = sessionStorage.getItem('ipoID');
|
||||
const res = await getIpo(ipoID as string)
|
||||
const enHref = `${(res as any).data[0].pdfLink.eLink}`;
|
||||
const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
|
||||
|
|
@ -779,13 +1398,31 @@ async function setDownLoad() {
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.login2 {
|
||||
|
||||
// background-image: url("@/assets/1x/beijingtu.png");
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
// height: 100vh;
|
||||
// font-family: "Calibri";
|
||||
// width: 1900px;
|
||||
//width: 1900px;
|
||||
// font-family: "Calibri";
|
||||
// @media screen and (max-width: 768px) {
|
||||
// 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;
|
||||
width: 1700px;
|
||||
// font-family: "Calibri";
|
||||
@media screen and (max-width: 768px){
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
|
||||
<div class="right">
|
||||
<div class="right-top">
|
||||
<img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
|
||||
|
|
@ -11,34 +12,40 @@
|
|||
<template #header="{ date }">
|
||||
|
||||
<el-button size="small" @click="selectDate('prev-month')">
|
||||
<img src="@/assets/1x/source11.png">
|
||||
<img src="@/assets/1x/source14.png">
|
||||
</el-button>
|
||||
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
||||
<span class="month">{{ showMounth(date) }}</span>
|
||||
<span class="month">{{ date }}</span>
|
||||
|
||||
<el-button size="small" @click="selectDate('next-month')">
|
||||
<img src="@/assets/1x/source12.png">
|
||||
<img src="@/assets/1x/source15.png">
|
||||
</el-button>
|
||||
|
||||
</template>
|
||||
<template #dateCell="{ data }">
|
||||
|
||||
<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-if="i.split('-').slice(2).join() * 1<=9">
|
||||
<div v-if="data.day == i" class="yuan1"></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="data.day == i" class="yuan"></div>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
<div class="right-bottom1">
|
||||
<Event v-if="Eventdata.length" :data="Eventdata" />
|
||||
<div v-else class="right-bottom-title1">No event</div>
|
||||
<div v-else class="right-bottom-title1">{{ $t(i18n.global.t('home.noevent')) }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -55,10 +62,13 @@ import { getCurrentInstance } from 'vue'
|
|||
import Event from '@/views/login/components/Event.vue';
|
||||
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
|
||||
import { getDataFromId } from "@/api/mock/home"
|
||||
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const dayValue = ref(new Date())
|
||||
const calendar = ref()
|
||||
const Eventdata = ref([])
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
//const Eventdata = ref([])
|
||||
const selectDate = (val: string) => {
|
||||
calendar.value.selectDate(val)
|
||||
}
|
||||
|
|
@ -87,6 +97,72 @@ onMounted(async () => {
|
|||
setEventdata((result as any).data)
|
||||
getcalendar()
|
||||
})
|
||||
const Eventdata = ref([
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// number: 2370
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// number: 2370
|
||||
// }, {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// number: 2372
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// name: "力高健康生活有限公司",
|
||||
// logo:"-",
|
||||
// number: 2373
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// name: "力高健康生活有限公司",
|
||||
// logo:"-",
|
||||
// number: 2374
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// name: "力高健康生活有限公司",
|
||||
// logo:"-",
|
||||
// number: 2375
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// number: 2378
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// number: 2374
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// number: 2378
|
||||
// },
|
||||
// {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司111111111111111111111111111",
|
||||
// number: 2380
|
||||
// }, {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司1111111111111111111111111111",
|
||||
// number: 2381
|
||||
// }
|
||||
])
|
||||
const setEventdata = (EventD: any) => {
|
||||
Eventdata.value = EventD.map((item: any) => {
|
||||
const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
|
||||
|
|
@ -101,11 +177,19 @@ const setEventdata = (EventD: any) => {
|
|||
}
|
||||
const backRouter = () => {
|
||||
proxy.$router.go(-1)
|
||||
//const drawer2 = false
|
||||
//emit('close',false)
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 768px) {
|
||||
.login{
|
||||
width: 100vw;
|
||||
height: fit-content;
|
||||
|
||||
}
|
||||
.yuan {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
|
@ -115,30 +199,44 @@ const backRouter = () => {
|
|||
//top: 36px;
|
||||
transform: translateY(11px);
|
||||
//transform: translateX(3px);
|
||||
margin-left: 3px;
|
||||
margin-left: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.yuan1{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #f7be39;
|
||||
position: absolute;
|
||||
//right: 20px;
|
||||
//top: 36px;
|
||||
transform: translateY(11px);
|
||||
//transform: translateX(3px);
|
||||
margin-left: -2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.right {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
padding-bottom: 80px;
|
||||
background-color: #1f4055;
|
||||
z-index: 1;
|
||||
border: #1f4055 1px solid;
|
||||
|
||||
height: 100%;
|
||||
.right-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
transform: translateX(-10px);
|
||||
|
||||
height: 25px;
|
||||
.top-title {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
color: #ffffff;
|
||||
margin-left: 10px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.icon1 {
|
||||
|
|
@ -182,9 +280,9 @@ const backRouter = () => {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// overflow-y: scroll;
|
||||
.right-bottom-title1 {
|
||||
|
||||
// background-color: red;
|
||||
color: #1f4055;
|
||||
font-size: 20px;
|
||||
align-items: center;
|
||||
|
|
@ -295,6 +393,7 @@ const backRouter = () => {
|
|||
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
:deep(.is-selected) {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div class="left-right">
|
||||
<div class="search" @click="handlesearch">
|
||||
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
|
||||
<img src="@/assets/1x/source10.png" alt="找不到图片">
|
||||
</div>
|
||||
|
||||
<div class="langWrap">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right" v-if="data1!=null">
|
||||
<li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
|
||||
<!-- <li class="show">
|
||||
<span>Show Value</span>
|
||||
|
|
@ -50,11 +50,15 @@ const handleShowLang = (e: any) => {
|
|||
e.stopPropagation()
|
||||
lang.value.showLang = !lang.value.showLang
|
||||
}
|
||||
const data1 = ref()
|
||||
onMounted(() => {
|
||||
document.documentElement.onclick = function () {
|
||||
if (!lang.value.showLang) return
|
||||
lang.value.showLang = false
|
||||
}
|
||||
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
|
||||
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
|
||||
data1.value = obj
|
||||
})
|
||||
onUnmounted(() => {
|
||||
document.documentElement.onclick = null
|
||||
|
|
@ -90,6 +94,13 @@ const drawShow = () => {
|
|||
//background-color: black;
|
||||
position: relative;
|
||||
margin-left: 15px;
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
// position: fixed;
|
||||
// top:50px;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
}
|
||||
.second {
|
||||
|
||||
width: 25px;
|
||||
|
|
@ -139,7 +150,7 @@ const drawShow = () => {
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
|
||||
position: relative;
|
||||
.left-1 {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
|
|
@ -148,6 +159,7 @@ const drawShow = () => {
|
|||
// background-color: red;
|
||||
span{
|
||||
margin-left: 10px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
|
|
@ -179,6 +191,8 @@ const drawShow = () => {
|
|||
display: block;
|
||||
// margin-top: 3px;
|
||||
vertical-align: middle;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,14 +204,14 @@ const drawShow = () => {
|
|||
min-width: 200px;
|
||||
// background-color: red;
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
// margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search {
|
||||
background-color: #fff;
|
||||
//background-color: #fff;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
|
|
@ -211,6 +225,9 @@ const drawShow = () => {
|
|||
img {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -223,20 +240,24 @@ const drawShow = () => {
|
|||
margin-top: 7px;
|
||||
// background-color: #2B4A60;
|
||||
@media screen and (max-width: 768px) {
|
||||
// width: 100vw;
|
||||
width: 90vw;
|
||||
//color: red;
|
||||
margin-top: 10px;
|
||||
transform: translateX(-10px);
|
||||
width: 250px;
|
||||
margin-left: 100px;
|
||||
margin-top: 2vh;
|
||||
// transform: translateX(-10px);
|
||||
// width: 250px;
|
||||
margin-left: 5vw;
|
||||
// background-color: black;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #435F70;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
float: right;
|
||||
// float: right;
|
||||
font-size: 15px;
|
||||
//background-color: red;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
<div class="top">
|
||||
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
|
||||
</h4>
|
||||
<el-icon class="icon1" @click="cardDetail">
|
||||
<el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
|
||||
<ArrowUp v-if="expand" />
|
||||
<ArrowDown v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h4>{{ props.data.number }}</h4>
|
||||
<div v-if="expand" class="details">
|
||||
<h5 v-for="(item, index) in detailsItem" :key="index">
|
||||
<h5 v-for="(item, index) in detailsItem33" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<el-icon class="icon1" v-if="item.icon">
|
||||
<Check v-if="item.icon == 1" />
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</h5>
|
||||
|
||||
</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>
|
||||
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
|
||||
$t(i18n.global.t('home.offerpricerange'))
|
||||
|
|
@ -43,14 +43,13 @@ export default {
|
|||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { size } from 'lodash';
|
||||
import { ref, onMounted, onUpdated,watch } from 'vue'
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import logo from '@/assets/Snipaste.png'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import Aimage from "@/views/login/components/a-image/index.vue";
|
||||
import Aimage from "./image1/index.vue";
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const store = ipoStore();
|
||||
const currentDate = ref(new Date())
|
||||
|
|
@ -114,6 +113,8 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
|
||||
// console.log(props.data.tradeCurrency);
|
||||
|
||||
const code22 = ref('')
|
||||
onMounted(() => {
|
||||
setCodefn()
|
||||
|
|
@ -121,6 +122,69 @@ onMounted(()=>{
|
|||
watch(props, (newValue: any, oldValue: any) => {
|
||||
setCodefn();
|
||||
}, { deep: true })
|
||||
const code33 = computed(() => {
|
||||
return {
|
||||
25: proxy.$t('home.DealInitiated'),
|
||||
30: proxy.$t('home.PublicOfferClosed'),
|
||||
35: proxy.$t('home.ApplicationValidated'),
|
||||
45: proxy.$t('home.AllotmentConfirmed'),
|
||||
50: proxy.$t('home.MoneySettlement'),
|
||||
55: proxy.$t('home.AllocationConfirmed'),
|
||||
60: proxy.$t('home.placingApproved'),
|
||||
65: proxy.$t('home.AllotmentResultsApproved'),
|
||||
70: proxy.$t('home.TradingStarted'),
|
||||
80: proxy.$t('home.Suspended'),
|
||||
90: proxy.$t('home.Cancelled'),
|
||||
}[props.data.status as number]
|
||||
})
|
||||
const detailsItem33 = computed(() => {
|
||||
var tag = true;
|
||||
const arr = detailsItem.value.map(item => {
|
||||
if (code22.value == item.name && tag) {
|
||||
tag = false;
|
||||
return { ...item, icon: 2 }
|
||||
} else if (tag) {
|
||||
return { ...item, icon: 1 }
|
||||
} else {
|
||||
return { ...item, icon: 0 }
|
||||
}
|
||||
})
|
||||
return [
|
||||
{
|
||||
name: proxy.$t('home.DealInitiated'),
|
||||
icon: arr[0].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.PublicOfferClosed'),
|
||||
icon: arr[1].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.ApplicationValidated'),
|
||||
icon: arr[2].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.AllotmentConfirmed'),
|
||||
icon: arr[3].icon
|
||||
}
|
||||
, {
|
||||
name: proxy.$t('home.MoneySettlement'),
|
||||
icon: arr[4].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.AllocationConfirmed'),
|
||||
icon: arr[5].icon
|
||||
}, {
|
||||
name: proxy.$t('home.placingApproved'),
|
||||
icon: arr[6].icon
|
||||
}, {
|
||||
name: proxy.$t('home.AllotmentResultsApproved'),
|
||||
icon: arr[7].icon
|
||||
}, {
|
||||
name: proxy.$t('home.TradingStarted'),
|
||||
icon: arr[8].icon
|
||||
}
|
||||
]
|
||||
})
|
||||
function setCodefn() {
|
||||
// console.log('修改了data',newValue,oldValue);
|
||||
var obj = {
|
||||
|
|
@ -168,12 +232,18 @@ const cardDetail = (e: any) => {
|
|||
e.stopPropagation();
|
||||
expand.value = !expand.value;
|
||||
}
|
||||
|
||||
// const cancelPop = (event:any)=>{
|
||||
// let tp = document.querySelector(".details")
|
||||
// if(tp){
|
||||
// if(!tp.contains(event.target)){
|
||||
// expand.value = false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//路由传参
|
||||
const handleclick = (item: any) => {
|
||||
localStorage.setItem('ipoID', item.ipoID)
|
||||
console.log(item);
|
||||
|
||||
//console.log(item);
|
||||
localStorage.setItem('itemData', JSON.stringify(item))
|
||||
router.push({
|
||||
name: 'Xdashboard',
|
||||
|
|
@ -204,39 +274,39 @@ const handleclick = (item: any) => {
|
|||
// width: 270rem;
|
||||
// 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;
|
||||
// .imglogo{
|
||||
// background-color: #23445a;
|
||||
// height: 15vh;
|
||||
// line-height: 15vh;
|
||||
// text-align: center;
|
||||
// overflow: hidden;
|
||||
// font-size: 38px;
|
||||
// font-weight: bold;
|
||||
// font-family: "Calibri";
|
||||
// color: #fff;
|
||||
// }
|
||||
// .title {
|
||||
// background-color: #fff;
|
||||
// height: 120px;
|
||||
// line-height: 120px;
|
||||
// font-size: 40px;
|
||||
// color: #fff;
|
||||
// overflow: hidden;
|
||||
// position: relative;
|
||||
// font-family: "Calibri";
|
||||
|
||||
// // @media screen and (max-width: 768px){
|
||||
// // font-size: 80px;
|
||||
// // }
|
||||
// img {
|
||||
// max-height: 100%;
|
||||
// max-width: 100%;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
// }
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
// height: 150px;
|
||||
|
|
|
|||
|
|
@ -29,10 +29,10 @@ const props = defineProps({
|
|||
}
|
||||
)
|
||||
const leftWidth = computed(()=>{
|
||||
return (props.leftNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
|
||||
return (props.leftNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
|
||||
})
|
||||
const rightWidth = computed(()=>{
|
||||
return (props.rightNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
|
||||
return (props.rightNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ const rightWidth = computed(()=>{
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 28px;
|
||||
width: 400px;
|
||||
width: 405px;
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
width: 80vw;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="title" v-if="isImage">
|
||||
<img v-lazy="props.src" />
|
||||
<img :src="props.src" />
|
||||
</div>
|
||||
<div class="title2" v-else>
|
||||
{{props.number}}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
<Nav />
|
||||
</div>
|
||||
<div class="rightbox">
|
||||
<Header :time="datatime" :openDrawer="openDrawer" />
|
||||
<div class="content">
|
||||
<Header class="headerMoble" :time="datatime" :openDrawer="openDrawer" />
|
||||
<div class="content" v-if="data != null">
|
||||
<div class="content-topleft">
|
||||
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
|
||||
<el-calendar ref="calendar" class="calendar">
|
||||
|
|
@ -50,7 +50,8 @@
|
|||
</div>
|
||||
<div class="content-topright">
|
||||
<p class="topright-title">{{ $t(i18n.global.t('dashboard.PublicOffer')) }}</p>
|
||||
<div ref="main" style="width: 100%; height: 100%"></div>
|
||||
<!-- <div ref="main" style="width: 100%; height: 100%"></div> -->
|
||||
<v-chart :option="option" autoresize style="width: 100%; height: 100%" />
|
||||
<div class="topright-p">
|
||||
<div class="p-1">
|
||||
<div>
|
||||
|
|
@ -147,7 +148,7 @@
|
|||
<div class="content-bottomright">
|
||||
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.FinalAllocation')) }}</p>
|
||||
<div ref="main2" style="width: 100%; height: 100%"></div>
|
||||
<div class="bottomleft-bouttom1">
|
||||
<div class="bottomleft-bouttom2">
|
||||
<div class="initialallocationleft">
|
||||
<div class="initialallocationlefttitle">
|
||||
<div class="title">
|
||||
|
|
@ -211,7 +212,9 @@
|
|||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
|
|
@ -219,12 +222,12 @@
|
|||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "XdashBoard"
|
||||
name: "Xdashboard"
|
||||
}
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import Item from './Main.vue';
|
||||
import { ref, onMounted, reactive} from "vue";
|
||||
import { ref, onMounted, reactive, computed } from "vue";
|
||||
import Nav from "./nav/index.vue";
|
||||
import Header from "./Header/index.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
|
@ -237,8 +240,23 @@ import { ipoStore } from "@/stores/ipo"
|
|||
import { getCurrentInstance, onUnmounted } from 'vue'
|
||||
import Drawer from '@/views/login/modelComponents/Drawer.vue'
|
||||
import { getDataFromId } from "@/api/mock/home";
|
||||
|
||||
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { provide } from 'vue';
|
||||
use([
|
||||
CanvasRenderer,
|
||||
PieChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
]);
|
||||
const drawer = ref(false)
|
||||
const handleDrawer = (done: () => void) => {
|
||||
done();
|
||||
|
|
@ -258,10 +276,9 @@ const route = useRoute()
|
|||
var daysAndDom = [];
|
||||
onMounted(
|
||||
() => {
|
||||
|
||||
const obj = JSON.parse(localStorage.getItem('itemData') as string);
|
||||
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
|
||||
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
|
||||
data.value = obj;
|
||||
//console.log(data.value);
|
||||
getreferencedata()
|
||||
getdatatime()
|
||||
},
|
||||
|
|
@ -299,6 +316,7 @@ const PublicOfferY1 = ref<any[]>([])
|
|||
const PublicOfferY1max = ref<number>()
|
||||
const PublicOfferZ1 = ref<any[]>([])
|
||||
const PublicOfferZ1max = ref<number>()
|
||||
const PublicOfferZ1max1 = ref<number>()
|
||||
const interval = ref()
|
||||
const PublicOfferX = ref<string[]>([])
|
||||
const PublicOfferY = ref<string[]>([])
|
||||
|
|
@ -307,7 +325,14 @@ const FinalAllocationPublic = ref('')
|
|||
const InitialAllocationInstitutional = ref('')
|
||||
const FinalAllocationInstitutional = ref('')
|
||||
const setBar = async () => {
|
||||
const ipoID = localStorage.getItem('ipoID')
|
||||
// mock数据测试开始
|
||||
// const result1 = await getDataFromId('bar');
|
||||
// const result = {
|
||||
// data: result1
|
||||
// }
|
||||
// mock数据测试结束
|
||||
//const ipoID = localStorage.getItem('ipoID')
|
||||
const ipoID = sessionStorage.getItem('ipoID')
|
||||
const result = await getIpo(ipoID as string)
|
||||
// console.log(ipoID,(result as any).data[0]);
|
||||
if ((result as any).data[0].graph != null) {
|
||||
|
|
@ -326,12 +351,15 @@ const setBar = async () => {
|
|||
|
||||
});
|
||||
PublicOfferZ1max.value = Math.floor(PublicOfferZ1.value.slice().sort((a, b) => a - b)[PublicOfferZ1.value.length - 1] * 2)
|
||||
PublicOfferZ1max1.value = PublicOfferZ1max.value + 1.1
|
||||
//console.log(PublicOfferZ1max.value);
|
||||
|
||||
}
|
||||
console.log(PublicOfferZ1max.value);
|
||||
|
||||
|
||||
// const amount = Number(initialpublic.value) + Number(initialinstituational.value);
|
||||
const percent = ref(0)
|
||||
const percentfix = ref(0)
|
||||
// const percent = ref(0)
|
||||
// const percentfix = ref(0)
|
||||
// percent.value =Number(initialpublic.value) / amount * 100 ;
|
||||
// InitialAllocationPublic.value = percent.value.toFixed(2) + "%"
|
||||
// percentfix.value = Number(percent.value.toFixed(2))
|
||||
|
|
@ -342,9 +370,12 @@ const setBar = async () => {
|
|||
// FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
|
||||
// FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
|
||||
//interval.value = Math.ceil((PublicOfferZ1max.value as number)/9)
|
||||
init();
|
||||
//init();
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.setMobileActiveShow(2);//设置移动端弹窗高亮
|
||||
// setBarRight();
|
||||
setBar()//real
|
||||
})
|
||||
|
|
@ -359,7 +390,8 @@ const getreferencedata = async () => {
|
|||
// const res = result1[0];
|
||||
//---mock测试接口结束
|
||||
|
||||
const ipoID = localStorage.getItem('ipoID')
|
||||
// const ipoID = localStorage.getItem('ipoID')
|
||||
const ipoID = sessionStorage.getItem('ipoID')
|
||||
const result = await getIpo(ipoID as string)
|
||||
const res = (result as any).data[0];
|
||||
// console.log(res);
|
||||
|
|
@ -374,8 +406,11 @@ const getreferencedata = async () => {
|
|||
calendarAddData(startDate.value, endDate.value, '#65FABF')
|
||||
calendarAddData(siInputDate, siInputDate, '#bd99dc')
|
||||
calendarAddData(listingDate, listingDate, '#38b126')
|
||||
calendarAddData('2023-5-23', listingDate, 'red')
|
||||
// calendarAddData('2023-5-23', listingDate, 'yellow')
|
||||
// calendarAddData('2023-5-23', '2023-5-29', 'red')
|
||||
// calendarAddData('2023-5-23', '2023-5-23', 'yellow')
|
||||
// calendarAddData('2023-5-23', '2023-5-24', 'pink')
|
||||
// calendarAddData('2023-5-23', '2023-5-25', 'blue')
|
||||
// calendarAddData('2023-5-28', '2023-5-29', 'blue')
|
||||
calendarAddLine()
|
||||
initialpublic.value = res.poSharesInitial
|
||||
ApplicationQuantity.value = res.poApplicationQuantity
|
||||
|
|
@ -439,8 +474,9 @@ function calendarAddLine() {
|
|||
if (LineData.ids.length) {
|
||||
LineData.ids.forEach((item: any) => {
|
||||
// item.dom.removeChild(item.id)
|
||||
var id = item.dom.querySelector("#" + item.id)
|
||||
item.dom.removeChild(id);
|
||||
var id = item.parent.querySelector("#" + item.id)
|
||||
//console.log('rrr', item)
|
||||
item.parent.removeChild(id);
|
||||
})
|
||||
LineData.ids = [];
|
||||
|
||||
|
|
@ -449,17 +485,21 @@ function calendarAddLine() {
|
|||
daysAndDom.forEach((item: any) => {
|
||||
var str = LineData.nowMounth + item.day;
|
||||
var time1 = new Date(str).getTime()//time1为在startdate到enddate之间的时间
|
||||
LineData.lines.sort((a, b) => {
|
||||
return (b.endDate - b.startDate) - (a.endDate - a.startDate)
|
||||
})
|
||||
const arrADD = LineData.lines.map((line, index) => {
|
||||
if (line.startDate <= time1 && time1 <= line.endDate) {
|
||||
// item.dom.style.borderBottom = `10px solid ${line.color}`;
|
||||
var span = document.createElement('div')
|
||||
span.style.width = '65px'
|
||||
span.style.height = '10px'
|
||||
span.style.marginBottom = '1px'
|
||||
span.setAttribute('id', 't' + time1)
|
||||
LineData.ids.push({ dom: item.dom, id: 't' + time1 })
|
||||
|
||||
span.style.backgroundColor = line.color
|
||||
item.dom.appendChild(span)
|
||||
Arr[index].push({ dom: item.dom })
|
||||
LineData.ids.push({ dom: span, parent: item.dom, id: 't' + time1 })
|
||||
Arr[index].push({ dom: span })
|
||||
if (768 >= document.documentElement.clientWidth) {
|
||||
span.style.width = '48px'
|
||||
span.style.height = '8px'
|
||||
|
|
@ -469,47 +509,42 @@ function calendarAddLine() {
|
|||
return {}
|
||||
})
|
||||
})
|
||||
console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
|
||||
//console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
|
||||
// Arr.forEach((item: any) => {
|
||||
// if (item.length) {
|
||||
// item[0].dom.children[1].style.marginLeft = "30px"//起始时间添加样式
|
||||
// item[0].dom.children[1].style.width = ""
|
||||
// item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
|
||||
// //console.log(Arr,item[0].dom.children[1]);
|
||||
// if (item.length && (item.length !== 1)) {
|
||||
// item[0].dom.style.marginLeft = "11px"//起始时间添加样式
|
||||
// item[0].dom.style.width = ""
|
||||
// item[0].dom.style.borderRadius = "10px 0px 0px 10px";
|
||||
|
||||
// item[item.length - 1].dom.children[1].style.width = "35px"//结束时间添加样式
|
||||
// item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
|
||||
// item[item.length - 1].dom.style.width = "45px"//结束时间添加样式
|
||||
// item[item.length - 1].dom.style.borderRadius = "0px 20px 20px 0px";
|
||||
// if (768 >= document.documentElement.clientWidth) {
|
||||
// item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
|
||||
// item[0].dom.children[1].style.width = ""
|
||||
// item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
|
||||
// item[item.length - 1].dom.children[1].style.width = "23px"//结束时间添加样式
|
||||
// item[item.length - 1].dom.children[1].style.borderRadius = "0px 10px 10px 0px";
|
||||
// item[0].dom.style.marginLeft = "7px"//起始时间添加样式
|
||||
// item[0].dom.style.width = ""
|
||||
// item[0].dom.style.borderRadius = "10px 0px 0px 10px";
|
||||
// item[item.length - 1].dom.style.width = "23px"//结束时间添加样式
|
||||
// item[item.length - 1].dom.style.borderRadius = "0px 10px 10px 0px";
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (item.length == 1) {//如果长度为1，单独设置样式
|
||||
// // console.log('item',item)
|
||||
// item[0].dom.children[1].style.marginLeft = "11px"
|
||||
// item[0].dom.children[1].style.width = "42px"
|
||||
// item[0].dom.children[1].style.borderRadius = "10px";
|
||||
// if (item.length == 1) {//如果长度为1，单独设置样式0
|
||||
// item[0].dom.style.marginLeft = "11px"
|
||||
// item[0].dom.style.width = "42px"
|
||||
// item[0].dom.style.borderRadius = "10px";
|
||||
// if (768 >= document.documentElement.clientWidth) {
|
||||
// item[0].dom.children[1].style.marginLeft = "7px"
|
||||
// item[0].dom.children[1].style.width = "30px"
|
||||
// item[0].dom.children[1].style.borderRadius = "10px";
|
||||
// item[0].dom.style.marginLeft = "7px"
|
||||
// item[0].dom.style.width = "30px"
|
||||
// item[0].dom.style.borderRadius = "10px";
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
}
|
||||
function init() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(main.value);
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
const option = computed(() => {
|
||||
return {
|
||||
grid: {
|
||||
top: 30,
|
||||
x: 70,
|
||||
x: 75,
|
||||
x2: 60,
|
||||
y2: 200
|
||||
},
|
||||
|
|
@ -527,10 +562,14 @@ function init() {
|
|||
{
|
||||
type: 'value',
|
||||
max: PublicOfferY1max.value,
|
||||
// max:1060,
|
||||
min: 0,
|
||||
splitNumber: 9,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
name: proxy.$t('dashboard.QuantityMillion'),
|
||||
name: i18n.global.t('dashboard.QuantityMillion'),
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 0, 20] // 上右下左与原位置距离
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
|
|
@ -543,9 +582,10 @@ function init() {
|
|||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: proxy.$t('dashboard.Ratio'),
|
||||
name: i18n.global.t('dashboard.Ratio'),
|
||||
min: 0,
|
||||
max: PublicOfferZ1max.value,
|
||||
max: PublicOfferZ1max1.value,
|
||||
// max:4.0,
|
||||
// max: 20,
|
||||
splitNumber: 9,
|
||||
alignTicks: true,
|
||||
|
|
@ -558,17 +598,15 @@ function init() {
|
|||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
series: [
|
||||
{
|
||||
name: proxy.$t('dashboard.Ratio'),
|
||||
name: i18n.global.t('dashboard.Ratio'),
|
||||
type: 'line',
|
||||
data: PublicOfferZ1.value,
|
||||
yAxisIndex: 1,
|
||||
},
|
||||
{
|
||||
name: proxy.$t('dashboard.QuantityMillion'),
|
||||
name: i18n.global.t('dashboard.QuantityMillion'),
|
||||
type: 'bar',
|
||||
data: PublicOfferY1.value,
|
||||
barWidth: '40%',
|
||||
|
|
@ -577,13 +615,101 @@ function init() {
|
|||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.onresize = () => {
|
||||
myChart.resize();
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
// const init = computed(()=>{
|
||||
|
||||
// // 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(main.value);
|
||||
// // 指定图表的配置项和数据
|
||||
// var option = {
|
||||
// grid: {
|
||||
// top: 30,
|
||||
// x: 75,
|
||||
// x2: 60,
|
||||
// y2: 200
|
||||
// },
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'cross'
|
||||
// }
|
||||
// },
|
||||
// xAxis: {
|
||||
// // data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
|
||||
// data: PublicOfferX1.value
|
||||
// },
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: 'value',
|
||||
// max: PublicOfferY1max.value,
|
||||
// min: 0,
|
||||
// splitNumber: 9,
|
||||
// boundaryGap: [0.2, 0.2],
|
||||
// name: i18n.global.t('dashboard.QuantityMillion'),
|
||||
// nameTextStyle: {
|
||||
// padding: [0, 0, 0, 49] // 上右下左与原位置距离
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// type: 'solid',
|
||||
// },
|
||||
// axisLabel: {
|
||||
// formatter: function (value: any, index: any) {
|
||||
// return value.toFixed(1)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: proxy.$t('dashboard.Ratio'),
|
||||
// nameTextStyle: {
|
||||
// padding: [0, 0, 0, 21] // 上右下左与原位置距离
|
||||
// },
|
||||
// min: 0,
|
||||
// max: PublicOfferZ1max.value,
|
||||
// // max:20,
|
||||
// splitNumber: 9,
|
||||
// alignTicks: true,
|
||||
// scale: true,
|
||||
// // interval: Math.ceil(20/9),
|
||||
// axisLabel: {
|
||||
// formatter: function (value: any, index: any) {
|
||||
// return value.toFixed(1)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
|
||||
|
||||
// series: [
|
||||
// {
|
||||
// name: proxy.$t('dashboard.Ratio'),
|
||||
// type: 'line',
|
||||
// data: PublicOfferZ1.value,
|
||||
// yAxisIndex: 1,
|
||||
// },
|
||||
// {
|
||||
// name: i18n.global.t('dashboard.QuantityMillion'),
|
||||
// type: 'bar',
|
||||
// data: PublicOfferY1.value,
|
||||
// barWidth: '40%',
|
||||
// itemStyle: {
|
||||
// color: '#f6caae'
|
||||
// },
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
// // 使用刚指定的配置项和数据显示图表。
|
||||
// myChart.setOption(option);
|
||||
// window.onresize = () => {
|
||||
// myChart.resize();
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
|
||||
function init1() {
|
||||
var myChart1 = echarts.init(main1.value);
|
||||
const option1 = {
|
||||
|
|
@ -730,59 +856,145 @@ function fn(data: any) {
|
|||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.yuan-titlesp {
|
||||
font-size: 19px;
|
||||
font-family: "Calibri";
|
||||
color: #8e9eaa;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
|
||||
font-size: 17px;
|
||||
margin-top: 19px;
|
||||
//margin-top: 11px;
|
||||
color: #a4b0ba;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bottomleft-bouttom1 {
|
||||
//background-color: red;
|
||||
width: 450px;
|
||||
width: 460px;
|
||||
height: 95px;
|
||||
transform: translateY(-150px);
|
||||
display: flex;
|
||||
margin-left: 40px;
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
justify-content: space-between;
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90vw;
|
||||
width: 81vw;
|
||||
margin-left: 5vw;
|
||||
margin-top: -2vh;
|
||||
//background-color: red;
|
||||
//justify-content: space-between;
|
||||
}
|
||||
|
||||
.initialallocationright {
|
||||
// background-color: #1f4055;
|
||||
margin-left: 20px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.initialallocationleft {
|
||||
width: 230px;
|
||||
//background-color: #20b109;
|
||||
height: 95px;
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.initialallocationleftpercent {
|
||||
.persent {
|
||||
margin-top: 12px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.initialallocationlefttitle {
|
||||
width: 140px;
|
||||
//background-color: yellow;
|
||||
height: 95px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
// background-color: #1f4055;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.bottomleft-bouttom2 {
|
||||
// background-color: red;
|
||||
width: 435px;
|
||||
height: 95px;
|
||||
transform: translateY(-150px);
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
justify-content: space-between;
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 81vw;
|
||||
margin-left: 5vw;
|
||||
margin-top: -2vh;
|
||||
//background-color: red;
|
||||
//justify-content: space-between;
|
||||
}
|
||||
|
||||
.initialallocationright {
|
||||
// background-color: #1f4055;
|
||||
margin-left: 20px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.initialallocationleft {
|
||||
width: 230px;
|
||||
//background-color: #20b109;
|
||||
height: 95px;
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.initialallocationleftpercent {
|
||||
.persent {
|
||||
margin-top: 12px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.initialallocationlefttitle {
|
||||
width: 140px;
|
||||
//background-color: yellow;
|
||||
height: 95px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
// background-color: #1f4055;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -792,14 +1004,15 @@ height: 95px;
|
|||
background-image: url("@/assets/1x/beijingtu.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 1200px;
|
||||
height: 1300px;
|
||||
font-family: "Calibri";
|
||||
width: 1900px;
|
||||
@media screen and (max-width: 768px) {
|
||||
height: fit-content;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100vw;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -842,6 +1055,14 @@ height: 95px;
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 30px;
|
||||
height: calc(100vh - 140px);
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.persent {
|
||||
color: #9FA0BF;
|
||||
font-weight: 400;
|
||||
|
|
@ -854,10 +1075,7 @@ height: 95px;
|
|||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
.pulic {
|
||||
display: flex;
|
||||
|
|
@ -865,6 +1083,7 @@ height: 95px;
|
|||
justify-content: space-between;
|
||||
margin-left: 55px;
|
||||
align-items: flex-end;
|
||||
|
||||
//background-color: red;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-left: 21px;
|
||||
|
|
@ -932,6 +1151,8 @@ height: 95px;
|
|||
height: 15px;
|
||||
background-color: #333f50;
|
||||
border-radius: 50%;
|
||||
margin-top: 3px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
|
@ -942,6 +1163,8 @@ height: 95px;
|
|||
height: 15px;
|
||||
background-color: #ed7d31;
|
||||
border-radius: 50%;
|
||||
margin-top: 3px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
|
@ -952,6 +1175,8 @@ height: 95px;
|
|||
height: 15px;
|
||||
background-color: #ffc000;
|
||||
border-radius: 50%;
|
||||
margin-top: 3px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
|
@ -962,6 +1187,8 @@ height: 95px;
|
|||
height: 15px;
|
||||
background-color: #2f5597;
|
||||
border-radius: 50%;
|
||||
margin-top: 3px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
|
@ -971,6 +1198,7 @@ height: 95px;
|
|||
font-size: 19px;
|
||||
font-family: 'Calibri';
|
||||
color: #8e9eaa;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 17px;
|
||||
margin-top: 3px;
|
||||
|
|
@ -984,6 +1212,7 @@ height: 95px;
|
|||
font-weight: 400;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
// background-color: #20b109;
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-left: 28px;
|
||||
|
|
@ -995,6 +1224,7 @@ height: 95px;
|
|||
color: #5c6063;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
@ -1008,12 +1238,14 @@ height: 95px;
|
|||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 10px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
transform: translateX(-40px);
|
||||
margin-top: 14px;
|
||||
//margin-left: -200px;
|
||||
// background-color: pink;
|
||||
}
|
||||
|
||||
// background-color: #20b109;
|
||||
}
|
||||
|
||||
|
|
@ -1032,9 +1264,10 @@ height: 95px;
|
|||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 10px;
|
||||
|
||||
// background-color: #20b109;
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1051,7 +1284,10 @@ margin-top: 10px;
|
|||
height: 15px;
|
||||
background-color: #65fabf;
|
||||
border-radius: 50%;
|
||||
margin-top: 7px;
|
||||
// position: relative;
|
||||
// top:50%;
|
||||
//transform:translateY(5%);
|
||||
// margin-top: 7px;
|
||||
}
|
||||
|
||||
.yuan4 {
|
||||
|
|
@ -1066,7 +1302,7 @@ margin-top: 10px;
|
|||
height: 15px;
|
||||
background-color: #20b109;
|
||||
border-radius: 50%;
|
||||
margin-top: 7px;
|
||||
// margin-top: 7px;
|
||||
}
|
||||
|
||||
.yuan6 {
|
||||
|
|
@ -1074,7 +1310,7 @@ margin-top: 10px;
|
|||
height: 15px;
|
||||
background-color: #98c2f2;
|
||||
border-radius: 50%;
|
||||
margin-top: 7px;
|
||||
// margin-top: 7px;
|
||||
}
|
||||
|
||||
.yuan7 {
|
||||
|
|
@ -1082,12 +1318,15 @@ margin-top: 10px;
|
|||
height: 15px;
|
||||
background-color: #bf98de;
|
||||
border-radius: 50%;
|
||||
margin-top: 7px;
|
||||
// margin-top: 7px;
|
||||
}
|
||||
|
||||
.topleft-bottom {
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-15px);
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
.bottomleft-bouttom {
|
||||
|
|
@ -1097,11 +1336,13 @@ margin-top: 10px;
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding-right: 10px;
|
||||
// transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.topright-p {
|
||||
transform: translateY(-132%);
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
transform: translateY(-135%);
|
||||
}
|
||||
|
|
@ -1113,7 +1354,7 @@ margin-top: 10px;
|
|||
font-size: 20px;
|
||||
color: #415d6f;
|
||||
justify-content: space-between;
|
||||
width: 400px;
|
||||
width: 405px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 80vw;
|
||||
|
|
@ -1140,7 +1381,7 @@ margin-top: 10px;
|
|||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 400px;
|
||||
width: 405px;
|
||||
margin-left: 50px;
|
||||
font-size: 20px;
|
||||
color: #415d6f;
|
||||
|
|
@ -1171,12 +1412,13 @@ margin-top: 10px;
|
|||
//margin-right: 38px;
|
||||
color: #7e929f;
|
||||
font-size: 18px;
|
||||
width: 400px;
|
||||
width: 405px;
|
||||
//background-color: #1f4055;
|
||||
margin-left: 50px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-top: 5px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
transform: translateX(-6vw);
|
||||
font-size: 15px;
|
||||
|
|
@ -1190,7 +1432,18 @@ margin-top: 5px;
|
|||
.topleft-bottom1 {
|
||||
display: flex;
|
||||
margin-left: 10%;
|
||||
margin-top: 2%;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
height: 23px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
align-items: center;
|
||||
height: 15px;
|
||||
width: 300px;
|
||||
//transform: translateY(-6px);
|
||||
//margin-right: 4px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottomleft-title {
|
||||
|
|
@ -1200,6 +1453,10 @@ margin-top: 5px;
|
|||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
margin-top: 15px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-title {
|
||||
|
|
@ -1215,13 +1472,13 @@ margin-top: 5px;
|
|||
|
||||
.content-topleft {
|
||||
width: 490px;
|
||||
height: 560px;
|
||||
height: 640px;
|
||||
background-color: #fff;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90vw;
|
||||
margin-left: 5vw;
|
||||
height: 500px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
// background-color: red;
|
||||
|
|
@ -1231,7 +1488,7 @@ margin-top: 5px;
|
|||
color: #2e4d60;
|
||||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
margin-top: 15px;
|
||||
margin-top: 10px;
|
||||
cursor: default;
|
||||
|
||||
|
||||
|
|
@ -1240,7 +1497,7 @@ margin-top: 5px;
|
|||
|
||||
.content-topright {
|
||||
width: 490px;
|
||||
height: 560px;
|
||||
height: 640px;
|
||||
background-color: #fff;
|
||||
margin-left: 20px;
|
||||
|
||||
|
|
@ -1345,7 +1602,7 @@ margin-top: 5px;
|
|||
padding: 12px 20px;
|
||||
border-bottom: var(--el-calendar-header-border-bottom);
|
||||
background-color: #1f4055;
|
||||
width: 410px;
|
||||
width: 420px;
|
||||
margin-left: 20px;
|
||||
font-family: "Calibri";
|
||||
|
||||
|
|
@ -1375,8 +1632,10 @@ margin-top: 5px;
|
|||
line-height: 33px;
|
||||
font: 13px 'Poppins-Regular';
|
||||
background-color: #fff;
|
||||
height: 33px;
|
||||
border: none;
|
||||
//background-color: red;
|
||||
min-height: 33px;
|
||||
height: 57px;
|
||||
// border: none;
|
||||
cursor: default;
|
||||
font-family: "Calibri";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,14 +86,16 @@ const platformTo=(listPlatform1:string)=>{
|
|||
border-left: 3px solid #D3DDE4;
|
||||
border-bottom: 2px solid #D3DDE4;
|
||||
box-sizing: border-box;
|
||||
|
||||
// background-color: #DA8B2B;
|
||||
.header {
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
// background-color: red;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
|
||||
// transform: translateY(-40px);
|
||||
// margin-left: -30px;
|
||||
// z-index: 1;
|
||||
.c {
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
|
|
@ -151,11 +153,14 @@ const platformTo=(listPlatform1:string)=>{
|
|||
.content {
|
||||
margin-left: 22px;
|
||||
border-left: 3px solid #EEEFF1;
|
||||
height: 100%;
|
||||
height: 270px;
|
||||
padding-left: 25px;
|
||||
overflow: scroll;
|
||||
|
||||
|
||||
// overflow: scroll;
|
||||
overflow-y: scroll;
|
||||
// background-color: red;
|
||||
@media screen and (max-width: 768px) {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 50px;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,10 @@ const IpoReflash=()=>{
|
|||
// if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
|
||||
// reflashRouter()
|
||||
// }
|
||||
reflashRouter()
|
||||
// reflashRouter()
|
||||
// if(route.options.history.location=="/home"){
|
||||
// reflashRouter()
|
||||
// }
|
||||
}
|
||||
|
||||
const handleLang1 = () => {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<template>
|
||||
<div class="bigbox" @click="handleclick(props.data)">
|
||||
<Aimage :src="props.data.logolinks" :number="props.data.number"/>
|
||||
<div class="list">
|
||||
<Aimage @click="handleclick(props.data)" :src="props.data.logolinks" :number="props.data.number" />
|
||||
<div class="listexpand" v-if="store.isExpand(props.data.ipoID)" @click="handleclick(props.data)">
|
||||
<div class="list-content">
|
||||
<div class="top">
|
||||
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
|
||||
</h4>
|
||||
<el-icon class="icon1" @click="cardDetail">
|
||||
<ArrowUp v-if="expand" />
|
||||
<ArrowUp v-if="store.isExpand(props.data.ipoID)" />
|
||||
<ArrowDown v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h4>{{ props.data.number }}</h4>
|
||||
<div v-if="expand" class="details">
|
||||
<h5 v-for="(item, index) in detailsItem" :key="index">
|
||||
<div v-if="store.isExpand(props.data.ipoID)" class="details">
|
||||
<h5 v-for="(item, index) in detailsItem33" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<el-icon class="icon1" v-if="item.icon">
|
||||
<Check v-if="item.icon == 1" />
|
||||
|
|
@ -22,7 +21,8 @@
|
|||
</h5>
|
||||
|
||||
</div>
|
||||
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
|
||||
<h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code22
|
||||
}}</h5>
|
||||
<h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
|
||||
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
|
||||
$t(i18n.global.t('home.offerpricerange'))
|
||||
|
|
@ -34,6 +34,39 @@
|
|||
}}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" v-else @click="handleclick(props.data)">
|
||||
<div class="list-content">
|
||||
<div class="top">
|
||||
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
|
||||
</h4>
|
||||
<el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
|
||||
<ArrowUp v-if="store.isExpand(props.data.ipoID)" />
|
||||
<ArrowDown v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h4>{{ props.data.number }}</h4>
|
||||
<div v-if="store.isExpand(props.data.ipoID)" class="details">
|
||||
<h5 v-for="(item, index) in detailsItem33" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<el-icon class="icon1" v-if="item.icon">
|
||||
<Check v-if="item.icon == 1" />
|
||||
<img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
|
||||
</el-icon>
|
||||
</h5>
|
||||
|
||||
</div>
|
||||
<h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code33
|
||||
}}</h5>
|
||||
<h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
|
||||
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
|
||||
$t(i18n.global.t('home.offerpricerange'))
|
||||
}}</h6>
|
||||
<h5>{{ props.data.time }}</h5>
|
||||
<h6>{{ props.data.listingDate ?
|
||||
$t(i18n.global.t('home.CommencementofTradeDate')) :
|
||||
$t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
|
||||
}}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
@ -43,13 +76,12 @@ export default {
|
|||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { size } from 'lodash';
|
||||
import { ref, onMounted, onUpdated,watch } from 'vue'
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import logo from '@/assets/Snipaste.png'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import Aimage from "./a-image/index.vue";
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const store = ipoStore();
|
||||
|
|
@ -92,27 +124,20 @@ const detailsItem = ref([
|
|||
icon: 0
|
||||
}
|
||||
])
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
HKD: "",
|
||||
number: 0,
|
||||
price: "",
|
||||
time: "",
|
||||
title: "",
|
||||
trading: "",
|
||||
logolinks: "",
|
||||
status: 0,
|
||||
listingDate: "",
|
||||
ipoID:0,
|
||||
tradeCurrency:""
|
||||
|
||||
interface dataType {
|
||||
HKD: string,
|
||||
number: string,
|
||||
price: string,
|
||||
time: string,
|
||||
title: string,
|
||||
trading: string,
|
||||
logolinks: string,
|
||||
status: string,
|
||||
listingDate: string,
|
||||
ipoID: number,
|
||||
tradeCurrency: string
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const props = defineProps<{ data: dataType, index: number }>()
|
||||
|
||||
// console.log(props.data.tradeCurrency);
|
||||
|
||||
|
|
@ -123,6 +148,69 @@ onMounted(()=>{
|
|||
watch(props, (newValue: any, oldValue: any) => {
|
||||
setCodefn();
|
||||
}, { deep: true })
|
||||
const code33 = computed(() => {
|
||||
return {
|
||||
25: proxy.$t('home.DealInitiated'),
|
||||
30: proxy.$t('home.PublicOfferClosed'),
|
||||
35: proxy.$t('home.ApplicationValidated'),
|
||||
45: proxy.$t('home.AllotmentConfirmed'),
|
||||
50: proxy.$t('home.MoneySettlement'),
|
||||
55: proxy.$t('home.AllocationConfirmed'),
|
||||
60: proxy.$t('home.placingApproved'),
|
||||
65: proxy.$t('home.AllotmentResultsApproved'),
|
||||
70: proxy.$t('home.TradingStarted'),
|
||||
80: proxy.$t('home.Suspended'),
|
||||
90: proxy.$t('home.Cancelled'),
|
||||
}[props.data.status as unknown as number]
|
||||
})
|
||||
const detailsItem33 = computed(() => {
|
||||
var tag = true;
|
||||
const arr = detailsItem.value.map(item => {
|
||||
if (code22.value == item.name && tag) {
|
||||
tag = false;
|
||||
return { ...item, icon: 2 }
|
||||
} else if (tag) {
|
||||
return { ...item, icon: 1 }
|
||||
} else {
|
||||
return { ...item, icon: 0 }
|
||||
}
|
||||
})
|
||||
return [
|
||||
{
|
||||
name: proxy.$t('home.DealInitiated'),
|
||||
icon: arr[0].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.PublicOfferClosed'),
|
||||
icon: arr[1].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.ApplicationValidated'),
|
||||
icon: arr[2].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.AllotmentConfirmed'),
|
||||
icon: arr[3].icon
|
||||
}
|
||||
, {
|
||||
name: proxy.$t('home.MoneySettlement'),
|
||||
icon: arr[4].icon
|
||||
},
|
||||
{
|
||||
name: proxy.$t('home.AllocationConfirmed'),
|
||||
icon: arr[5].icon
|
||||
}, {
|
||||
name: proxy.$t('home.placingApproved'),
|
||||
icon: arr[6].icon
|
||||
}, {
|
||||
name: proxy.$t('home.AllotmentResultsApproved'),
|
||||
icon: arr[7].icon
|
||||
}, {
|
||||
name: proxy.$t('home.TradingStarted'),
|
||||
icon: arr[8].icon
|
||||
}
|
||||
]
|
||||
})
|
||||
function setCodefn() {
|
||||
// console.log('修改了data',newValue,oldValue);
|
||||
var obj = {
|
||||
|
|
@ -168,15 +256,39 @@ function setCodefn(){
|
|||
|
||||
const cardDetail = (e: any) => {
|
||||
e.stopPropagation();
|
||||
expand.value = !expand.value;
|
||||
store.setIpoIds(props.data.ipoID)
|
||||
// expand.value = !expand.value;
|
||||
|
||||
// if (store.$state.mainExpand == props.index) {
|
||||
// store.setMainExpand(-1)
|
||||
// } else {
|
||||
// store.setMainExpand(props.index)
|
||||
// }
|
||||
|
||||
// let tp = document.querySelector(".icon1")
|
||||
|
||||
// if(!(tp as any).contains(e.target)){
|
||||
// expand.value = false;
|
||||
// }
|
||||
|
||||
}
|
||||
// const cancelPop = (event:any)=>{
|
||||
// let tp = document.querySelector(".details")
|
||||
// if(tp){
|
||||
// if(!tp.contains(event.target)){
|
||||
// expand.value = false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
//路由传参
|
||||
const handleclick = (item: any) => {
|
||||
localStorage.setItem('ipoID', item.ipoID)
|
||||
console.log(item);
|
||||
// localStorage.setItem('ipoID', item.ipoID)
|
||||
//console.log(item);
|
||||
// localStorage.setItem('itemData', JSON.stringify(item))
|
||||
|
||||
localStorage.setItem('itemData', JSON.stringify(item))
|
||||
sessionStorage.setItem('ipoID', item.ipoID)
|
||||
sessionStorage.setItem('itemData', JSON.stringify(item))
|
||||
router.push({
|
||||
name: 'Xdashboard',
|
||||
params: { data: JSON.stringify(item) }
|
||||
|
|
@ -187,6 +299,39 @@ const handleclick = (item: any) => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .imglogo{
|
||||
// background-color: #23445a;
|
||||
// height: 15vh;
|
||||
// line-height: 15vh;
|
||||
// text-align: center;
|
||||
// overflow: hidden;
|
||||
// font-size: 38px;
|
||||
// font-weight: bold;
|
||||
// font-family: "Calibri";
|
||||
// color: #fff;
|
||||
// }
|
||||
// .title {
|
||||
// background-color: #fff;
|
||||
// height: 120px;
|
||||
// line-height: 120px;
|
||||
// font-size: 40px;
|
||||
// color: #fff;
|
||||
// overflow: hidden;
|
||||
// position: relative;
|
||||
// font-family: "Calibri";
|
||||
|
||||
// // @media screen and (max-width: 768px){
|
||||
// // font-size: 80px;
|
||||
// // }
|
||||
// img {
|
||||
// max-height: 100%;
|
||||
// max-width: 100%;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
// }
|
||||
.bigbox {
|
||||
|
||||
width: 270px;
|
||||
|
|
@ -206,47 +351,25 @@ const handleclick = (item: any) => {
|
|||
// width: 270rem;
|
||||
// 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;
|
||||
// }
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.listexpand {
|
||||
// height: 150px;
|
||||
width: 100%;
|
||||
width: 270px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
font-family: "Calibri";
|
||||
background-color: #e7efec;
|
||||
overflow: hidden;
|
||||
border: 1px solid #DDE2E6;
|
||||
cursor: pointer;
|
||||
margin-top: 120px;
|
||||
margin-left: -271px;
|
||||
border-radius: 0px 0px 20px 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 30px;
|
||||
height: fit-content;
|
||||
|
||||
.list-content {
|
||||
margin-top: 10px;
|
||||
|
|
@ -286,6 +409,7 @@ const handleclick = (item: any) => {
|
|||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -299,6 +423,75 @@ const handleclick = (item: any) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
// height: 150px;
|
||||
width: 270px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Calibri";
|
||||
background-color: #e7efec;
|
||||
overflow: hidden;
|
||||
border: 1px solid #DDE2E6;
|
||||
cursor: pointer;
|
||||
margin-top: 120px;
|
||||
margin-left: -271px;
|
||||
border-radius: 0px 0px 20px 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 30px;
|
||||
height: 260px;
|
||||
|
||||
.list-content {
|
||||
margin-top: 10px;
|
||||
width: 230px;
|
||||
|
||||
// height: 100%;
|
||||
.details {
|
||||
.icon1 {
|
||||
margin-left: 3px;
|
||||
transform: translateY(2.5px);
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
color: #3b6181;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
font-family: "Calibri";
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
color: #4b6d8a;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 400;
|
||||
font-family: "Calibri";
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
color: #5e7e98;
|
||||
margin-bottom: 8px;
|
||||
// font-family: "Calibri";
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 11px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
width: 11px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bigbox:hover {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="selectWrap" v-if="showSelect" @click="preVant">
|
||||
<div class="selectWrap" @click="preVant">
|
||||
<div class="box">
|
||||
<div class="content">
|
||||
<li>
|
||||
<div class="word" @click="checkAll(1)">
|
||||
<div class="word" :class="checkedAll == 1 && 'active'" @click="checkAll(1)">
|
||||
{{ $t(i18n.global.t('home.title.All')) }}
|
||||
<div class="check">
|
||||
<el-icon v-if="checkedAll == 1">
|
||||
|
|
@ -11,7 +11,8 @@
|
|||
</el-icon>
|
||||
</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">
|
||||
<el-icon v-if="checkedAll == 2">
|
||||
<Check></Check>
|
||||
|
|
@ -22,7 +23,7 @@
|
|||
</li>
|
||||
<div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
|
||||
<li>
|
||||
<div class="word" v-for="item in obj.ipoStatus" :key="item.key"
|
||||
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" :class="item.isSelcted && 'active'"
|
||||
@click="checkOne(item.key, 'ipoStatus')">
|
||||
<div class="check">
|
||||
<el-icon v-if="item.isSelcted">
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
<div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
|
||||
<li>
|
||||
<div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
|
||||
@click="checkOne(item.key, 'tradingCurrency')">
|
||||
:class="item.isSelcted && 'active'" @click="checkOne(item.key, 'tradingCurrency')">
|
||||
<div class="check">
|
||||
<el-icon v-if="item.isSelcted">
|
||||
<Check />
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
</li>
|
||||
<div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
|
||||
<li>
|
||||
<div class="word" v-for="item in obj.offeringType" :key="item.key"
|
||||
<div class="word" v-for="item in obj.offeringType" :key="item.key" :class="item.isSelcted && 'active'"
|
||||
@click="checkOne(item.key, 'offeringType')">
|
||||
<div class="check">
|
||||
<el-icon v-if="item.isSelcted">
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
<div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
|
||||
<li>
|
||||
<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">
|
||||
<el-icon v-if="item.isSelcted">
|
||||
<Check />
|
||||
|
|
@ -68,18 +69,7 @@
|
|||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</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 class="footer">
|
||||
|
|
@ -103,23 +93,91 @@ import { ref, defineExpose, reactive ,inject,onMounted} from 'vue';
|
|||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import { getSelectList } from "@/api/reqIpo/ipo"
|
||||
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform'
|
||||
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
import { getDataFromId } from "@/api/mock/home"
|
||||
const store = ipoStore()
|
||||
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed'
|
||||
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities'
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const showSelect = ref(false)
|
||||
const checkedAll = ref(0)
|
||||
const selectCards = inject('selectCards') as Function
|
||||
//const status = inject('status')
|
||||
onMounted(() => {
|
||||
console.log('select组件挂载');
|
||||
//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 () => {
|
||||
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 = {
|
||||
status: [] as string[],
|
||||
trade_currency: [] as string[],
|
||||
offer_type: [] as string[],
|
||||
list_securities: [] as string[],
|
||||
list_platform: [] as string[],
|
||||
|
||||
}
|
||||
Object.keys(obj).forEach((item: string, index: number) => {
|
||||
|
|
@ -129,15 +187,23 @@ const confirm = async () => {
|
|||
}
|
||||
})
|
||||
})
|
||||
const result = await getSelectList(reqeustObj)
|
||||
console.log('result',result);
|
||||
store.setSelectedArr(reqeustObj);
|
||||
const result = await store.getSearchSelectList()
|
||||
// const result = await getSelectList(reqeustObj)
|
||||
//mock数据测试-----------
|
||||
// const data = await getDataFromId("Select")
|
||||
// var result = {
|
||||
// data
|
||||
// }
|
||||
//mock数据测试-----------
|
||||
selectCards(result);
|
||||
showSelect.value = false
|
||||
porps.fn()
|
||||
|
||||
}
|
||||
const Cancel = () => {
|
||||
showSelect.value = false;
|
||||
|
||||
// showSelect.value = false;
|
||||
porps.fn()
|
||||
}
|
||||
const preVant = (e: any) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -165,7 +231,7 @@ const obj = reactive({
|
|||
value: proxy.$t('home.MoneySettlement'),
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 55,
|
||||
key: "55",
|
||||
value: proxy.$t('home.AllocationConfirmed'),
|
||||
isSelcted: false
|
||||
}, {
|
||||
|
|
@ -272,15 +338,15 @@ const obj = reactive({
|
|||
isSelcted: false
|
||||
}
|
||||
],
|
||||
ListingPlatform: [{
|
||||
key: '1',
|
||||
value: proxy.$t('home.Mainboard'),
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: '2',
|
||||
value: proxy.$t('home.GEM'),
|
||||
isSelcted: false
|
||||
}],
|
||||
// ListingPlatform: [{
|
||||
// key: '1',
|
||||
// value: proxy.$t('home.Mainboard'),
|
||||
// isSelcted: false
|
||||
// }, {
|
||||
// key: '2',
|
||||
// value: proxy.$t('home.GEM'),
|
||||
// isSelcted: false
|
||||
// }],
|
||||
// ListingType: [{
|
||||
// key: '1',
|
||||
// value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
|
||||
|
|
@ -349,9 +415,7 @@ function selectAll(all: 1 | 2) {
|
|||
})
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
showSelect
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -365,6 +429,7 @@ defineExpose({
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90vw;
|
||||
height: 93vh;
|
||||
|
|
@ -373,6 +438,7 @@ defineExpose({
|
|||
transform: translate(-50%, -50%);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px 20px 20px;
|
||||
|
|
@ -398,6 +464,7 @@ defineExpose({
|
|||
display: flex;
|
||||
font-size: 18px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
|
@ -417,16 +484,25 @@ defineExpose({
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0F426F;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #0F426F;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 30px;
|
||||
|
||||
|
|
@ -454,6 +530,7 @@ defineExpose({
|
|||
background-color: #fff;
|
||||
color: #557795;
|
||||
padding: 10px 20px 10px 20px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin: 0;
|
||||
// font-size: 12px;
|
||||
|
|
@ -468,5 +545,4 @@ defineExpose({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -67,6 +67,9 @@ const checkImgExists=(imgurl:string) =>{
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
font-family: "Calibri";
|
||||
width: 270px;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
margin-top: 30px;
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -83,5 +86,11 @@ const checkImgExists=(imgurl:string) =>{
|
|||
line-height: 120px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
width: 270px;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
margin-top: 30px;
|
||||
overflow: hidden;
|
||||
font-family: "Calibri";
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<!-- <div class="login3">
|
||||
</div> -->
|
||||
<div class="login2">
|
||||
<Select ref="selectR" />
|
||||
<Select ref="selectR" v-if="selectVisible" :fn="selectVisibleFn" />
|
||||
<div class="box w">
|
||||
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
|
||||
style="background-color: #1C3F56;" :with-header="false">
|
||||
<Drawer :drawer="drawer" @childfn="fn" />
|
||||
</el-drawer>
|
||||
|
||||
<div class="left">
|
||||
<div class="header">
|
||||
<div class="menu">
|
||||
|
|
@ -31,8 +30,9 @@
|
|||
<!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bigger">
|
||||
<Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
|
||||
<Main v-for="(item, index) in logos" :data="item" :index="index" :key="index"></Main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -50,7 +50,6 @@
|
|||
<img src="@/assets/1x/source14.png">
|
||||
</el-button>
|
||||
|
||||
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
||||
<span class="month">{{ date }}</span>
|
||||
|
||||
<el-button size="small" @click="selectDate('next-month')">
|
||||
|
|
@ -61,11 +60,17 @@
|
|||
<template #dateCell="{ data }">
|
||||
|
||||
<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-if="data.day == i" class="yuan"></div> -->
|
||||
<div v-if="i.split('-').slice(2).join() * 1 <= 9">
|
||||
<div v-if="data.day == i" class="yuan1"></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="data.day == i" class="yuan"></div>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
|
|
@ -99,20 +104,22 @@ import { getEventData, getSearchListing ,getDate} from "@/api/reqIpo/ipo";
|
|||
import { getDataFromId } from "@/api/mock/home"
|
||||
import { ElMessage } from 'element-plus'
|
||||
import SearchCup from "./components/SearchCup.vue";
|
||||
import Drawer from "./modelComponents/Drawer.vue";
|
||||
import Select from "./components/Select.vue";
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const reflashRouter = inject('reflashRouter') as Function
|
||||
const handleOnDrwaer = inject('handleOnDrwaer') as Function
|
||||
const router = useRouter()
|
||||
const store = ipoStore()
|
||||
const selectR = ref();
|
||||
const dayValue = ref(new Date())
|
||||
const drawer = ref(false)
|
||||
const dayValue = ref(store.homeDay)
|
||||
|
||||
const selectVisible = ref(false)
|
||||
onMounted(() => {
|
||||
store.setMobileActiveShow(1);//设置移动端弹窗高亮
|
||||
window.onhashchange = function () {
|
||||
const langHref = window.location.href.split("home")[1]
|
||||
console.log(window.location.href,langHref);
|
||||
|
||||
|
||||
if (langHref == '?lang=en') {
|
||||
proxy.$i18n.locale = 'en'
|
||||
|
|
@ -130,15 +137,20 @@ onMounted(() => {
|
|||
};
|
||||
getcalendar()
|
||||
})
|
||||
const selectVisibleFn = () => {
|
||||
selectVisible.value = false
|
||||
}
|
||||
//过滤
|
||||
const selectCards = async (res: any) => {
|
||||
async function demo() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
if (!(res as any).data.length) {
|
||||
|
||||
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
|
||||
throw ("222")
|
||||
}
|
||||
|
||||
const data = (res as any).data.map((item: any) => {
|
||||
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
|
||||
return {
|
||||
|
|
@ -186,23 +198,26 @@ const selectCards = async (res: any) => {
|
|||
logos.value = result as objType[]
|
||||
}
|
||||
provide('selectCards', selectCards);
|
||||
const handleDrawer = (done: () => void) => {
|
||||
done();
|
||||
}
|
||||
|
||||
const openDrawer = () => {
|
||||
drawer.value = true;
|
||||
handleOnDrwaer(true)
|
||||
}
|
||||
|
||||
const handleSelect = () => {
|
||||
// console.log('@@@', state.value)
|
||||
if (!state.value) return
|
||||
getSearchIpoList(state.value)
|
||||
// provide('state',state.value );
|
||||
|
||||
}
|
||||
|
||||
watch(dayValue, async (ne, ol) => {
|
||||
const day = moment(ne).format("YYYY-MM-DD")
|
||||
store.setHomeDay(day)
|
||||
const result = await getEventData(day);
|
||||
setEventdata((result as any).data)
|
||||
|
||||
|
||||
// const result = await getDataFromId('event');
|
||||
// console.log('@@@@', result);
|
||||
// setEventdata((result as any))
|
||||
|
|
@ -264,12 +279,12 @@ const Eventdata = ref([
|
|||
// {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// name: "力高健康生活有限公司11111111111",
|
||||
// number: 2380
|
||||
// }, {
|
||||
// listPlatform1:"主板",
|
||||
// logo:"-",
|
||||
// name: "力高健康生活有限公司",
|
||||
// name: "力高健康生活有限公司111111111111111111111111111111",
|
||||
// number: 2381
|
||||
// }
|
||||
])
|
||||
|
|
@ -294,13 +309,12 @@ const getcalendar = async ()=>{
|
|||
const getHomeIpoList = async () => {
|
||||
async function demo() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
|
||||
const res = await getHomeIpo(1)
|
||||
// const res = await getDataFromId('home');
|
||||
// const data = (res as any).map((item: any) => {
|
||||
const data = (res as any).data.map((item: any) => {
|
||||
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
|
||||
|
||||
// ? priceFinal.toFixed(3) : priceMinMax()
|
||||
return {
|
||||
logolinks: logoLink,
|
||||
title: companyEngFull + ";" + companyChiFull,
|
||||
|
|
@ -343,15 +357,19 @@ const getHomeIpoList = async () => {
|
|||
}
|
||||
onMounted(async () => {
|
||||
getHomeIpoList();
|
||||
var day = moment(Date.now()).format("YYYY-MM-DD")
|
||||
// var day = moment(Date.now()).format("YYYY-MM-DD")
|
||||
var day = moment(store.homeDay).format("YYYY-MM-DD")
|
||||
const result = await getEventData(day);
|
||||
setEventdata((result as any).data)
|
||||
})
|
||||
const getSearchIpoList = async (keyword: string) => {
|
||||
|
||||
async function demo() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
const res = await getSearchListing(keyword)
|
||||
// const res = await getSearchListing(keyword)
|
||||
store.setKeyWord(keyword)
|
||||
const res = await store.getSearchSelectList()
|
||||
if (!(res as any).data.length) {
|
||||
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
|
||||
throw ("222")
|
||||
|
|
@ -414,13 +432,17 @@ onMounted(async () => {
|
|||
// setEventdata(result);
|
||||
})
|
||||
interface objType {
|
||||
title: string,
|
||||
number: string,
|
||||
HKD: string,
|
||||
number: string,
|
||||
price: string,
|
||||
time: string,
|
||||
trading: string
|
||||
|
||||
title: string,
|
||||
trading: string,
|
||||
logolinks: string,
|
||||
status: string,
|
||||
listingDate: string,
|
||||
ipoID: number,
|
||||
tradeCurrency: string
|
||||
}
|
||||
const logos = ref<objType[]>([
|
||||
// {
|
||||
|
|
@ -507,14 +529,16 @@ const lang = ref()
|
|||
const SearchCupDom = ref()
|
||||
const handleShowLang = (e: any) => {
|
||||
e.stopPropagation()
|
||||
selectR.value.showSelect = false
|
||||
console.log(111)
|
||||
// selectR.value.showSelect = false
|
||||
lang.value.showLang = !lang.value.showLang
|
||||
selectVisible.value = false
|
||||
}
|
||||
const handleShowCup = (e: any) => {
|
||||
e.stopPropagation()
|
||||
lang.value.showLang = false;
|
||||
console.log(111)
|
||||
selectR.value.showSelect = !selectR.value.showSelect
|
||||
//console.log(111)
|
||||
selectVisible.value = !selectVisible.value
|
||||
}
|
||||
//路由传参
|
||||
// const handleclick = (item: any) => {
|
||||
|
|
@ -531,18 +555,15 @@ const handleShowCup = (e: any) => {
|
|||
|
||||
onMounted(() => {
|
||||
document.documentElement.onclick = function () {
|
||||
store.setMainExpand(-1);
|
||||
selectVisible.value = false
|
||||
|
||||
// if (SearchCupDom.value.showLang) {
|
||||
// SearchCupDom.value.showLang = false
|
||||
// }
|
||||
if (selectR.value.showSelect) {
|
||||
selectR.value.showSelect = false
|
||||
}
|
||||
if (lang.value.showLang) {
|
||||
lang.value.showLang = false
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
onUnmounted(() => {
|
||||
document.documentElement.onclick = null
|
||||
})
|
||||
|
|
@ -555,12 +576,12 @@ const showMounth = (date: any) => {
|
|||
return arr[2] + " " + arr[3]
|
||||
}
|
||||
}
|
||||
function fn(data: any) {
|
||||
drawer.value = data
|
||||
function fn(data: boolean) {
|
||||
console.log('22222')
|
||||
// drawer.value = data
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.yuan {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
|
@ -573,15 +594,43 @@ function fn(data: any) {
|
|||
margin-left: 3px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.yuan1 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #f7be39;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
transform: translateY(11px);
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
// .login3{
|
||||
|
||||
// background-image: url("@/assets/1x/beijingtu.png");
|
||||
// width: 100%;
|
||||
// height: 1500px;
|
||||
// background-size: 100% 100%;
|
||||
// position: fixed;
|
||||
// }
|
||||
.login2 {
|
||||
background-image: url("@/assets/1x/beijingtu.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
// width: 1900px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
font-family: "Calibri";
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -615,11 +664,16 @@ function fn(data: any) {
|
|||
align-items: center;
|
||||
// padding-left: 35px;
|
||||
height: 80px;
|
||||
|
||||
// @media screen and (max-width: 768px) {
|
||||
// height: 60rem;
|
||||
// // background-color: red;
|
||||
// }
|
||||
//position: fixed;
|
||||
//background-color: red;
|
||||
@media screen and (max-width: 768px) {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// background-color: #000000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menuicon {
|
||||
display: none;
|
||||
|
|
@ -645,6 +699,7 @@ function fn(data: any) {
|
|||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -718,6 +773,8 @@ function fn(data: any) {
|
|||
// margin-top: 40px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 90vh;
|
||||
overflow-y: scroll;
|
||||
|
||||
// margin-left: 120px;
|
||||
// width: 1250px;
|
||||
|
|
@ -725,6 +782,16 @@ function fn(data: any) {
|
|||
@media screen and (max-width: 768px) {
|
||||
width: 100vw;
|
||||
justify-content: center;
|
||||
overflow-y: scroll;
|
||||
height: 90vh;
|
||||
// height: calc(100vh-60'px');
|
||||
// transform: translateY(60px);
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// top: 60px;
|
||||
// bottom: 0;
|
||||
// overflow-y: scroll;
|
||||
//background-color: #e36466;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -737,7 +804,7 @@ function fn(data: any) {
|
|||
box-sizing: border-box;
|
||||
// width: 900px;
|
||||
// height: 100vh;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
padding-bottom: 80px;
|
||||
background-color: #1f4055;
|
||||
padding-left: 40px;
|
||||
|
|
@ -777,8 +844,11 @@ function fn(data: any) {
|
|||
.right-bottom1 {
|
||||
width: 420px;
|
||||
background-color: #ffffff;
|
||||
height: 500px;
|
||||
// height: 350px;
|
||||
height: 350px;
|
||||
//height: fit-content;
|
||||
margin-top: 40px;
|
||||
// position: relative;
|
||||
// margin-left: 20px;
|
||||
// text-align: center;
|
||||
// line-height: 500px;
|
||||
|
|
@ -786,6 +856,7 @@ function fn(data: any) {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.right-bottom-title1 {
|
||||
|
||||
color: #1f4055;
|
||||
|
|
@ -897,6 +968,12 @@ function fn(data: any) {
|
|||
color: red;
|
||||
}
|
||||
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 0 !important;
|
||||
// }
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 0 !important;height: 0;
|
||||
// }
|
||||
@media screen and (max-width: 768px) {
|
||||
.left {
|
||||
width: 100vw;
|
||||
|
|
@ -908,7 +985,7 @@ function fn(data: any) {
|
|||
|
||||
.header {
|
||||
height: 60px;
|
||||
|
||||
//background-color: red;
|
||||
.menuicon {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
|
|
@ -952,6 +1029,12 @@ function fn(data: any) {
|
|||
}
|
||||
</style>
|
||||
<style>
|
||||
/* ::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0 !important;height: 0;
|
||||
} */
|
||||
@media (min-width: 992px) {
|
||||
.header .el-input__wrapper {
|
||||
margin-top: 20px;
|
||||
|
|
|
|||
|
|
@ -1,49 +1,53 @@
|
|||
<template>
|
||||
|
||||
<div class="wrapddd">
|
||||
<div class="imgWrap22222">
|
||||
<img src="@/assets/1x/1x/source8.png" alt="menu">
|
||||
<h4 v-if="data != null && store.$state.mobileActiveShow != 1">{{ store.$state.locale == 1 ?
|
||||
data.title.split(";")[0] : data.title.split(";")[1] }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<li :class="state == 1 && 'active'" @click="setState(1)" >
|
||||
<li :class="store.$state.mobileActiveShow == 1 && 'active'" @click="setState(1)">
|
||||
<img src="@/assets/1x/source10.png" alt="menu">
|
||||
<span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
|
||||
</li>
|
||||
<li :class="state == 2 && 'active'" @click="setState(2)">
|
||||
<li :class="store.$state.mobileActiveShow == 2 && 'active'" @click="setState(2)">
|
||||
<img src="@/assets/1x/source5.png" alt="menu">
|
||||
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
|
||||
</li>
|
||||
<li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
|
||||
<div class="ipoWrap">
|
||||
<li :class="store.$state.mobileActiveShow == 3 && 'active'" @click="setState(3)">
|
||||
<!-- <div class="ipoWrap">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
<img src="@/assets/1x/source2.png" alt="menu">
|
||||
<span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
|
||||
</div>
|
||||
<!-- <div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
|
||||
<img src="@/assets/1x/source11.png" alt="" class="icon">
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="report" v-if="state == 3">
|
||||
<span>report</span>
|
||||
<img src="@/assets/1x/source3.png" alt="">
|
||||
</div> -->
|
||||
|
||||
|
||||
</li>
|
||||
<li :class="state == 4 && 'active'" @click="setState(4)">
|
||||
<li :class="store.$state.mobileActiveShow == 4 && 'active'" @click="setState(4)">
|
||||
<img src="@/assets/1x/source6.png" alt="menu">
|
||||
<span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
|
||||
|
||||
</li>
|
||||
<li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
|
||||
|
||||
<li :class="store.$state.mobileActiveShow == 5 && 'active'" @click="setState2(5)" class="IPO">
|
||||
<div class="ipoWrap">
|
||||
<div>
|
||||
<div class="icon">
|
||||
<img src="@/assets/1x/1x/source6.png" alt="menu">
|
||||
<span>{{ $t(i18n.global.t('home.Languages')) }}</span>
|
||||
</div>
|
||||
<div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
|
||||
<img src="@/assets/1x/source11.png" alt="">
|
||||
<div class="arrow" :style="{
|
||||
transform: store.$state.mobileActiveShow == 5 && showalanguge ? 'rotateZ(90deg)' : 'rotateZ(-90deg)', marginRight: store.$state.mobileActiveShow == 5 && showalanguge ? '10px' : '28px'
|
||||
}
|
||||
">
|
||||
<img src="@/assets/1x/source14.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang" v-if="state == 5" >
|
||||
<div class="lang" v-if="store.$state.mobileActiveShow == 5 && showalanguge">
|
||||
<li @click="handleLang1">English</li>
|
||||
<li @click="handleLang2">繁體中文</li>
|
||||
<li @click="handleLang3">简体中文</li>
|
||||
|
|
@ -52,6 +56,8 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -61,45 +67,114 @@ export default {
|
|||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
import { getCurrentInstance, onUnmounted,inject } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
import { useRouter } from "vue-router";
|
||||
//import calendar from '@/views/IpoCalendar/index.vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import moment from "moment"
|
||||
import i18n from '@/locales'
|
||||
const route=useRouter()
|
||||
const store = ipoStore()
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import Event from '@/views/login/components/Event.vue';
|
||||
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
|
||||
import { getDataFromId } from "@/api/mock/home"
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
let emit = defineEmits(['childfn'])
|
||||
const reflashRouter=inject('reflashRouter') as Function
|
||||
const IpoReflash=()=>{
|
||||
if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
|
||||
reflashRouter()
|
||||
const dayValue = ref(new Date())
|
||||
const calendar = ref()
|
||||
const handleDrawer = (done: () => void) => {
|
||||
done();
|
||||
}
|
||||
//const Eventdata = ref([])
|
||||
const selectDate = (val: string) => {
|
||||
calendar.value.selectDate(val)
|
||||
}
|
||||
|
||||
const dayTime = ref()
|
||||
const getcalendar = async () => {
|
||||
const res = await getDate()
|
||||
dayTime.value = (res as any).data
|
||||
console.log(dayTime.value);
|
||||
}
|
||||
const showMounth = (date: any) => {
|
||||
const arr = date.split(" ")
|
||||
if (arr.length == 3) {
|
||||
return arr[2]
|
||||
} else if (arr.length == 4) {
|
||||
return arr[2] + " " + arr[3]
|
||||
}
|
||||
}
|
||||
const props = defineProps({
|
||||
drawer:Boolean
|
||||
})
|
||||
|
||||
let drawer = props.drawer
|
||||
|
||||
console.log(props);
|
||||
|
||||
const state = ref(1)
|
||||
// const drawer = ref(true)
|
||||
const drawer2 = ref(false)
|
||||
const radio1 = ref('Option 1')
|
||||
const handleClose = (done: () => void) => {
|
||||
done()
|
||||
}
|
||||
//const drawer1 = ref(false)
|
||||
const setState = (number: number) => {
|
||||
state.value = number;
|
||||
store.setMobileActiveShow(number)
|
||||
if (number == 1) {
|
||||
proxy.$router.push("/home")
|
||||
|
||||
}
|
||||
if (number == 2) {
|
||||
proxy.$router.push("/dashboard")
|
||||
}
|
||||
if (number == 3) {
|
||||
proxy.$router.push("/IPO")
|
||||
|
||||
}
|
||||
if (number == 4) {
|
||||
proxy.$router.push("/IPOcalendar")
|
||||
store.setMobileActiveShow(1)
|
||||
// emit('childfn', !drawer1)
|
||||
// emit('childfn', !drawer)
|
||||
// drawer1.value = true
|
||||
|
||||
// console.log(drawer1.value);
|
||||
|
||||
}
|
||||
setTimeout(() => {
|
||||
handleOnDrwaer(false)
|
||||
})
|
||||
}
|
||||
//console.log(drawer1.value);
|
||||
|
||||
const dialogVisible = ref(true)
|
||||
const route = useRouter()
|
||||
const store = ipoStore()
|
||||
const showalanguge = ref(false)
|
||||
//const { proxy } = (getCurrentInstance() as any)
|
||||
let emit = defineEmits(['childfn'])
|
||||
//let emit1 = defineEmits(['childfn1'])
|
||||
const reflashRouter = inject('reflashRouter') as Function
|
||||
const handleOnDrwaer = inject('handleOnDrwaer') as Function
|
||||
|
||||
const props = defineProps({
|
||||
drawer: Boolean,
|
||||
drawer1:Boolean
|
||||
})
|
||||
const data = ref()
|
||||
onMounted(
|
||||
() => {
|
||||
// data.value = JSON.parse(localStorage.getItem('itemData') as string)
|
||||
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
|
||||
data.value = obj
|
||||
// console.log(data.value);
|
||||
// text();
|
||||
}
|
||||
)
|
||||
let drawer = props.drawer
|
||||
|
||||
let drawer1 = props.drawer1
|
||||
//console.log(props);
|
||||
|
||||
const state = ref(1)
|
||||
// const drawer = ref(true)
|
||||
|
||||
const setState2 = (number: number) => {
|
||||
store.setMobileActiveShow(number)
|
||||
showalanguge.value = !showalanguge.value
|
||||
}
|
||||
const handleLang1 = () => {
|
||||
|
||||
|
|
@ -108,17 +183,17 @@ const handleLang1 = () => {
|
|||
}
|
||||
store.setLocale(1)
|
||||
emit('childfn', !drawer)
|
||||
IpoReflash()
|
||||
// IpoReflash()
|
||||
}
|
||||
const handleLang2 = () => {
|
||||
if (proxy.$i18n.locale = 'zhCt') {
|
||||
proxy.$i18n.locale = 'zhCt'
|
||||
IpoReflash()
|
||||
// IpoReflash()
|
||||
|
||||
}
|
||||
store.setLocale(2)
|
||||
emit('childfn', !drawer)
|
||||
IpoReflash()
|
||||
/// IpoReflash()
|
||||
}
|
||||
const handleLang3 = () => {
|
||||
if (proxy.$i18n.locale = 'zhCn') {
|
||||
|
|
@ -126,7 +201,7 @@ const handleLang3 = () => {
|
|||
}
|
||||
store.setLocale(3)
|
||||
emit('childfn', !drawer)
|
||||
IpoReflash()
|
||||
// IpoReflash()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -137,14 +212,27 @@ const handleLang3 = () => {
|
|||
transform: translateX(-20px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.imgWrap22222 {
|
||||
margin-top: 20px;
|
||||
width: 25px;
|
||||
width: fit-content;
|
||||
height: 20px;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// background-color: black;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -169,6 +257,7 @@ const handleLang3 = () => {
|
|||
img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
// background-color: red;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -176,6 +265,9 @@ const handleLang3 = () => {
|
|||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1C3F56;
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -208,6 +300,30 @@ const handleLang3 = () => {
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.icon {
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: center;
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 25px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1C3F56;
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 12px;
|
||||
height: 19px;
|
||||
|
|
@ -223,7 +339,7 @@ const handleLang3 = () => {
|
|||
|
||||
span {
|
||||
display: inline-block;
|
||||
transform: translateY(-3px);
|
||||
// transform: translateY(-3px);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -231,4 +347,10 @@ const handleLang3 = () => {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
/* .el-drawer__body{
|
||||
padding: 0
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -61,7 +61,7 @@ export default defineConfig((mode: ConfigEnv) => {
|
|||
// 配置代理服务器
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://192.168.2.86:8888",
|
||||
target: "http://127.0.0.1:8080",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue