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