test
20
src/App.vue
|
@ -11,6 +11,8 @@ import { defineComponent, ref, onBeforeMount, onMounted, watch ,provide} from 'v
|
||||||
import { ElConfigProvider } from 'element-plus'
|
import { ElConfigProvider } from 'element-plus'
|
||||||
import { ipoStore } from "@/stores/ipo"
|
import { ipoStore } from "@/stores/ipo"
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
import { getCurrentInstance} from 'vue'
|
||||||
|
const { proxy } = (getCurrentInstance() as any)
|
||||||
const showRouter=ref(true)
|
const showRouter=ref(true)
|
||||||
const reflashRouter=()=>{
|
const reflashRouter=()=>{
|
||||||
showRouter.value=false;
|
showRouter.value=false;
|
||||||
|
@ -22,10 +24,28 @@ provide('reflashRouter',reflashRouter);
|
||||||
function isMobileFn() {
|
function isMobileFn() {
|
||||||
return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素,如果是返回true
|
return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素,如果是返回true
|
||||||
}
|
}
|
||||||
|
|
||||||
const isMobile = ref(isMobileFn() ? true : false);
|
const isMobile = ref(isMobileFn() ? true : false);
|
||||||
const store = ipoStore();
|
const store = ipoStore();
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
setFontSize()
|
setFontSize()
|
||||||
|
})
|
||||||
|
onMounted(()=>{
|
||||||
|
const langHref = window.location.href.split("home")[1]
|
||||||
|
if (langHref == '?lang=en') {
|
||||||
|
proxy.$i18n.locale = 'en'
|
||||||
|
store.setLocale(1)
|
||||||
|
} else if (langHref == '?lang=tc') {
|
||||||
|
proxy.$i18n.locale = 'zhCt'
|
||||||
|
store.setLocale(2)
|
||||||
|
} else if (langHref == '?lang=sc') {
|
||||||
|
proxy.$i18n.locale = 'zhCn'
|
||||||
|
|
||||||
|
store.setLocale(3)
|
||||||
|
}
|
||||||
|
reflashRouter()
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
const setFontSize = () => {
|
const setFontSize = () => {
|
||||||
// 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发,把rem当作px用就行了
|
// 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发,把rem当作px用就行了
|
||||||
|
|
|
@ -11,7 +11,8 @@ enum Api {
|
||||||
EventData="/api/ipos/listingData",
|
EventData="/api/ipos/listingData",
|
||||||
TypeofList="/api/ipo/refdata/typeOfListing",
|
TypeofList="/api/ipo/refdata/typeOfListing",
|
||||||
searchUrl="/api/ipo/refdata/search",
|
searchUrl="/api/ipo/refdata/search",
|
||||||
selectUrl="/api/ipo/refdata/filter"
|
selectUrl="/api/ipo/refdata/filter",
|
||||||
|
findAllListingDate="/api/ipo/refdata/findAllListingDate"
|
||||||
}
|
}
|
||||||
//获取ipo详情页的数据
|
//获取ipo详情页的数据
|
||||||
export const getIpo = (ipoID:string) => {
|
export const getIpo = (ipoID:string) => {
|
||||||
|
@ -37,6 +38,9 @@ export const getTypeofListing = (ipoID:string) => {
|
||||||
export const getSearchListing = (keyword:string) => {
|
export const getSearchListing = (keyword:string) => {
|
||||||
return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
|
return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
|
||||||
};
|
};
|
||||||
|
export const getDate = () => {
|
||||||
|
return request.get<any, null>(Api.findAllListingDate);
|
||||||
|
};
|
||||||
type selectObj={
|
type selectObj={
|
||||||
status?:string|string[]
|
status?:string|string[]
|
||||||
tradeCurrency?:string|string[]
|
tradeCurrency?:string|string[]
|
||||||
|
@ -78,4 +82,4 @@ export const getSelectList = (body:selectObj) => {
|
||||||
const status=body.status;
|
const status=body.status;
|
||||||
// var obj=JSON.stringify({status})
|
// var obj=JSON.stringify({status})
|
||||||
return request.post<any, null>(Api.selectUrl,body);
|
return request.post<any, null>(Api.selectUrl,body);
|
||||||
};
|
};
|
||||||
|
|
Before Width: | Height: | Size: 528 B After Width: | Height: | Size: 362 B |
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 |
|
@ -1,6 +1,10 @@
|
||||||
export default {
|
export default {
|
||||||
home:{
|
home:{
|
||||||
IPOcalendar:'IPO Calendar',
|
IPOcalendar:'IPO Calendar',
|
||||||
|
Languages:'Languages',
|
||||||
|
English:'English',
|
||||||
|
ChineseTraditional:'Chinese Traditional',
|
||||||
|
ChineseSimplified:'Chinese Simplified',
|
||||||
offerpricerange:'Offer Price Range',
|
offerpricerange:'Offer Price Range',
|
||||||
finalofferprice:'Final Offer Price',
|
finalofferprice:'Final Offer Price',
|
||||||
CommencementofTradeDate:'Commencement of Trade Date',
|
CommencementofTradeDate:'Commencement of Trade Date',
|
||||||
|
@ -33,7 +37,9 @@ export default {
|
||||||
},
|
},
|
||||||
HongKongDollar:'Hong Kong Dollar',
|
HongKongDollar:'Hong Kong Dollar',
|
||||||
ChineseYuan:'Chinese Yuan',
|
ChineseYuan:'Chinese Yuan',
|
||||||
UnitedStatesDollar:'United States Dollar'
|
UnitedStatesDollar:'United States Dollar',
|
||||||
|
noevent:'No event',
|
||||||
|
Norelevantselectdata:'No relevant select data'
|
||||||
},
|
},
|
||||||
dashboard:{
|
dashboard:{
|
||||||
Home:'Home',
|
Home:'Home',
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
home:{
|
home:{
|
||||||
IPOcalendar:'首次公开招股日历',
|
IPOcalendar:'首次公开招股日历',
|
||||||
|
Languages:'语言',
|
||||||
offerpricerange:'发售价范围',
|
offerpricerange:'发售价范围',
|
||||||
finalofferprice:'最终发售价',
|
finalofferprice:'最终发售价',
|
||||||
CommencementofTradeDate:'交易开始日期',
|
CommencementofTradeDate:'交易开始日期',
|
||||||
|
@ -33,7 +34,9 @@ export default {
|
||||||
},
|
},
|
||||||
HongKongDollar:'港元',
|
HongKongDollar:'港元',
|
||||||
ChineseYuan:'人民币',
|
ChineseYuan:'人民币',
|
||||||
UnitedStatesDollar:'美元'
|
UnitedStatesDollar:'美元',
|
||||||
|
noevent:'无事件',
|
||||||
|
Norelevantselectdata:'无相关选择数据'
|
||||||
},
|
},
|
||||||
dashboard:{
|
dashboard:{
|
||||||
Home:'主页',
|
Home:'主页',
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
home:{
|
home:{
|
||||||
IPOcalendar:'首次公開招股日曆',
|
IPOcalendar:'首次公開招股日曆',
|
||||||
|
Languages:'語言',
|
||||||
offerpricerange:'發售價範圍',
|
offerpricerange:'發售價範圍',
|
||||||
finalofferprice:'最終發售價',
|
finalofferprice:'最終發售價',
|
||||||
CommencementofTradeDate:'交易開始日期',
|
CommencementofTradeDate:'交易開始日期',
|
||||||
|
@ -33,7 +34,9 @@ export default {
|
||||||
},
|
},
|
||||||
HongKongDollar:'港元',
|
HongKongDollar:'港元',
|
||||||
ChineseYuan:'人民幣',
|
ChineseYuan:'人民幣',
|
||||||
UnitedStatesDollar:'美元'
|
UnitedStatesDollar:'美元',
|
||||||
|
noevent:'無事件',
|
||||||
|
Norelevantselectdata:'無相關選擇數據'
|
||||||
},
|
},
|
||||||
dashboard:{
|
dashboard:{
|
||||||
Home:'主頁',
|
Home:'主頁',
|
||||||
|
|
|
@ -30,7 +30,7 @@ export const staticRoutes: Array<RouteRecordRaw> = [
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: "/home/en",
|
path: "/home?lang=en",
|
||||||
name: "XLogin1",
|
name: "XLogin1",
|
||||||
component: () => import("@/views/login/index.vue"),
|
component: () => import("@/views/login/index.vue"),
|
||||||
meta: {
|
meta: {
|
||||||
|
@ -38,7 +38,7 @@ export const staticRoutes: Array<RouteRecordRaw> = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/home/tc",
|
path: "/home?lang=tc",
|
||||||
name: "XLogin2",
|
name: "XLogin2",
|
||||||
component: () => import("@/views/login/index.vue"),
|
component: () => import("@/views/login/index.vue"),
|
||||||
meta: {
|
meta: {
|
||||||
|
@ -46,7 +46,7 @@ export const staticRoutes: Array<RouteRecordRaw> = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/home/sc",
|
path: "/home?lang=sc",
|
||||||
name: "XLogin3",
|
name: "XLogin3",
|
||||||
component: () => import("@/views/login/index.vue"),
|
component: () => import("@/views/login/index.vue"),
|
||||||
meta: {
|
meta: {
|
||||||
|
|
|
@ -9,14 +9,16 @@
|
||||||
<img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
|
<img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
|
||||||
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
|
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right" >
|
||||||
<div class="search" @click="handlesearch">
|
<div class="search" @click="handlesearch">
|
||||||
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
|
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
|
||||||
</div>
|
</div>
|
||||||
<div class="langWrap">
|
<div class="langWrap">
|
||||||
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
|
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
|
||||||
<Lang ref="lang" class="lang" />
|
<Lang ref="lang" class="lang" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="downLoad">
|
<!-- <div class="downLoad">
|
||||||
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
|
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
|
||||||
|
@ -73,7 +75,15 @@ onUnmounted(() => {
|
||||||
margin-left: 18px;
|
margin-left: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.right{
|
||||||
|
display: flex;
|
||||||
|
margin-left: 10px;
|
||||||
|
align-items: center;
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
margin-right: 8vw;
|
||||||
|
//background-color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
.langWrap {
|
.langWrap {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// // top:-20px;
|
// // top:-20px;
|
||||||
|
@ -85,14 +95,14 @@ onUnmounted(() => {
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
// display: none;
|
// display: none;
|
||||||
margin-top: -3px;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.second {
|
.second {
|
||||||
|
|
||||||
width: 32px;
|
width: 25px;
|
||||||
height: 36px;
|
height: 30px;
|
||||||
margin-top: 4px;
|
// margin-top: 4px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
|
@ -119,8 +129,9 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.left-1 {
|
.left-1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
// background-color: red;
|
||||||
width: 80vw;
|
align-items: center;
|
||||||
|
height: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,10 +139,12 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
position: relative;
|
align-items: center;
|
||||||
|
//position: relative;
|
||||||
|
//background-color: red;
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
justify-content: flex-start;
|
width: 100vw;
|
||||||
|
// background-color: #1C3F56;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
|
@ -153,34 +166,29 @@ onUnmounted(() => {
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
transform: translateX(-60px);
|
margin-left: 10px;
|
||||||
display: inline;
|
//transform: translateX(-60px);
|
||||||
|
// display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
margin-top: 5px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 15px;
|
// margin-left: 15px;
|
||||||
transform: translateY(5px);
|
// margin-top: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 18px;
|
width: 25px;
|
||||||
height: 18px;
|
height: 30px;
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
transform: translateY(-0.5vh);
|
|
||||||
position: absolute;
|
|
||||||
right: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -21,9 +21,16 @@
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<!-- <template #date-cell="{ data }">
|
<template #dateCell="{data}">
|
||||||
|
|
||||||
</template> -->
|
<p style="margin:0px" >
|
||||||
|
{{ data.day.split('-').slice(2).join() }}
|
||||||
|
|
||||||
|
<div v-for="(i, index) in dayTime" :key="index">
|
||||||
|
<div v-if="data.day==i" class="yuan"></div>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
</el-calendar>
|
</el-calendar>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-bottom1">
|
<div class="right-bottom1">
|
||||||
|
@ -46,7 +53,7 @@ import moment from "moment"
|
||||||
import i18n from '@/locales'
|
import i18n from '@/locales'
|
||||||
import { getCurrentInstance } from 'vue'
|
import { getCurrentInstance } from 'vue'
|
||||||
import Event from '@/views/login/components/Event.vue';
|
import Event from '@/views/login/components/Event.vue';
|
||||||
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
|
import { getEventData, getSearchListing,getDate } from "@/api/reqIpo/ipo";
|
||||||
import { getDataFromId } from "@/api/mock/home"
|
import { getDataFromId } from "@/api/mock/home"
|
||||||
const { proxy } = (getCurrentInstance() as any)
|
const { proxy } = (getCurrentInstance() as any)
|
||||||
const dayValue = ref(new Date())
|
const dayValue = ref(new Date())
|
||||||
|
@ -60,6 +67,12 @@ watch(dayValue, async (ne, ol) => {
|
||||||
const result = await getEventData(day);
|
const result = await getEventData(day);
|
||||||
setEventdata((result as any).data)
|
setEventdata((result as any).data)
|
||||||
})
|
})
|
||||||
|
const dayTime = ref()
|
||||||
|
const getcalendar = async ()=>{
|
||||||
|
const res = await getDate()
|
||||||
|
dayTime.value = (res as any).data
|
||||||
|
console.log(dayTime.value);
|
||||||
|
}
|
||||||
const showMounth = (date: any) => {
|
const showMounth = (date: any) => {
|
||||||
const arr = date.split(" ")
|
const arr = date.split(" ")
|
||||||
if (arr.length == 3) {
|
if (arr.length == 3) {
|
||||||
|
@ -72,6 +85,7 @@ onMounted(async () => {
|
||||||
var day = moment(Date.now()).format("YYYY-MM-DD")
|
var day = moment(Date.now()).format("YYYY-MM-DD")
|
||||||
const result = await getEventData(day);
|
const result = await getEventData(day);
|
||||||
setEventdata((result as any).data)
|
setEventdata((result as any).data)
|
||||||
|
getcalendar()
|
||||||
})
|
})
|
||||||
const setEventdata = (EventD: any) => {
|
const setEventdata = (EventD: any) => {
|
||||||
Eventdata.value = EventD.map((item: any) => {
|
Eventdata.value = EventD.map((item: any) => {
|
||||||
|
@ -92,6 +106,18 @@ const backRouter = () => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.right {
|
.right {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -239,6 +265,7 @@ const backRouter = () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
// font-family: "Calibri"
|
// font-family: "Calibri"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -262,15 +289,12 @@ const backRouter = () => {
|
||||||
|
|
||||||
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
|
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
|
||||||
// background-color: #e36466;
|
// background-color: #e36466;
|
||||||
border: 5px solid #e36466;
|
border: 3px solid #e36466;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
|
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:deep(.is-selected) {
|
:deep(.is-selected) {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
|
@ -79,18 +79,21 @@ const drawShow = () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
.langWrap {
|
.langWrap {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// // top:-20px;
|
// // top:-25px;
|
||||||
// left: 260px;
|
// left: 260px;
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// align-items: end;
|
// align-items: end;
|
||||||
|
//background-color: black;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
.second {
|
.second {
|
||||||
|
|
||||||
width: 32px;
|
width: 25px;
|
||||||
height: 36px;
|
height: 30px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -112,9 +115,12 @@ const drawShow = () => {
|
||||||
|
|
||||||
.left-right {
|
.left-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
//justify-content: space-between;
|
||||||
width: 6vw;
|
//width: 90px;
|
||||||
margin-right: 10rem;
|
align-items: center;
|
||||||
|
// margin-right: 10rem;
|
||||||
|
// background-color: #2B4A60;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerWrap {
|
.headerWrap {
|
||||||
|
@ -124,35 +130,42 @@ const drawShow = () => {
|
||||||
transform: translateY(-20px);
|
transform: translateY(-20px);
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 1000px;
|
width: 1000px;
|
||||||
//background-color: red;
|
// background-color: red;
|
||||||
li{
|
li{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.left-1 {
|
.left-1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
// justify-content: space-between;
|
||||||
width: 240px;
|
// width: 240px;
|
||||||
margin-left: 15px;
|
margin-left: 5vw;
|
||||||
|
// background-color: red;
|
||||||
|
span{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
height: 30px;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-right {
|
.left-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
// justify-content: space-between;
|
||||||
width: 25vw;
|
// width: 25vw;
|
||||||
margin-right: 10px;
|
margin-right: 5vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
// position: relative;
|
// position: relative;
|
||||||
width: 400px;
|
width: fit-content;
|
||||||
//background-color: gray;
|
// background-color: gray;
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
@ -177,27 +190,29 @@ const drawShow = () => {
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 25px;
|
font-size: 20px;
|
||||||
// margin-top: 4px;
|
// margin-top: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 15px;
|
// margin-left: 15px;
|
||||||
margin-top: 6px;
|
// margin-top: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 18px;
|
width: 25px;
|
||||||
height: 18px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -73,6 +73,7 @@ const rightWidth = computed(()=>{
|
||||||
.number{
|
.number{
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .left {
|
/* .left {
|
||||||
|
|
|
@ -16,15 +16,14 @@
|
||||||
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
|
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
|
||||||
<el-calendar ref="calendar" class="calendar">
|
<el-calendar ref="calendar" class="calendar">
|
||||||
<template #header="{ date }">
|
<template #header="{ date }">
|
||||||
<el-button size="small" @click="selectDate('prev-month')">
|
<el-button size="small" @click="selectDate('prev-month')" style="background-color: #224154;border: none;">
|
||||||
<img src="@/assets/1x/source11.png">
|
<img src="@/assets/1x/source11.png">
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
||||||
<span class="month">{{ showMounth(date) }}</span>
|
<span class="month">{{ showMounth(date) }}</span>
|
||||||
<el-button size="small" @click="selectDate('next-month')">
|
<el-button size="small" @click="selectDate('next-month')" style="background-color: #224154;border: none;">
|
||||||
<img src="@/assets/1x/source12.png">
|
<img src="@/assets/1x/source12.png">
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-calendar>
|
</el-calendar>
|
||||||
|
@ -78,8 +77,41 @@
|
||||||
<div class="content-bottomleft">
|
<div class="content-bottomleft">
|
||||||
|
|
||||||
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.InitialAllocation')) }}</p>
|
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.InitialAllocation')) }}</p>
|
||||||
|
|
||||||
<div ref="main1" style="width: 100%; height: 100%"></div>
|
<div ref="main1" style="width: 100%; height: 100%"></div>
|
||||||
<div class="bottomleft-bouttom">
|
<div class="bottomleft-bouttom1">
|
||||||
|
<div class="initialallocationleft">
|
||||||
|
<div class="initialallocationlefttitle">
|
||||||
|
<div class="title">
|
||||||
|
<p class="yuan1"></p>
|
||||||
|
<p class="yuan-title">
|
||||||
|
<span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<p class="yuan2"></p>
|
||||||
|
<p class="yuan-title">
|
||||||
|
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="public-left2">
|
||||||
|
<p class="yuan-titlesp">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="initialallocationleftpercent">
|
||||||
|
<div class="persent">{{ InitialAllocationPublic }}</div>
|
||||||
|
<div class="persent">{{ InitialAllocationInstitutional }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="initialallocationright">
|
||||||
|
<p class="yuan-title2">{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
|
<p class="yuan-title2">{{ initialinstituational?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
|
<p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="bottomleft-bouttom">
|
||||||
<div class="pulic">
|
<div class="pulic">
|
||||||
<div class="public-left">
|
<div class="public-left">
|
||||||
<p class="yuan1"></p>
|
<p class="yuan1"></p>
|
||||||
|
@ -110,12 +142,43 @@
|
||||||
</div>
|
</div>
|
||||||
<p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
<p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="content-bottomright">
|
<div class="content-bottomright">
|
||||||
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.FinalAllocation')) }}</p>
|
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.FinalAllocation')) }}</p>
|
||||||
<div ref="main2" style="width: 100%; height: 100%"></div>
|
<div ref="main2" style="width: 100%; height: 100%"></div>
|
||||||
<div class="bottomleft-bouttom">
|
<div class="bottomleft-bouttom1">
|
||||||
|
<div class="initialallocationleft">
|
||||||
|
<div class="initialallocationlefttitle">
|
||||||
|
<div class="title">
|
||||||
|
<p class="yuan8"></p>
|
||||||
|
<p class="yuan-title">
|
||||||
|
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<p class="yuan9"></p>
|
||||||
|
<p class="yuan-title">
|
||||||
|
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="public-left2">
|
||||||
|
<p class="yuan-titlesp" >{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="initialallocationleftpercent">
|
||||||
|
<div class="persent">{{ FinalAllocationPublic }}</div>
|
||||||
|
<div class="persent">{{ FinalAllocationInstitutional }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="initialallocationright">
|
||||||
|
<p class="yuan-title2">{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
|
<p class="yuan-title2">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
|
<p class="yuan-title1">{{ code99?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="bottomleft-bouttom">
|
||||||
<div class="pulic">
|
<div class="pulic">
|
||||||
<div class="public-left">
|
<div class="public-left">
|
||||||
<p class="yuan8"></p>
|
<p class="yuan8"></p>
|
||||||
|
@ -144,7 +207,7 @@
|
||||||
</div>
|
</div>
|
||||||
<p class="yuan-title1">{{ code99?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
<p class="yuan-title1">{{ code99?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -266,10 +329,18 @@ const setBar = async () => {
|
||||||
}
|
}
|
||||||
console.log(PublicOfferZ1max.value);
|
console.log(PublicOfferZ1max.value);
|
||||||
|
|
||||||
const amount = Number(initialpublic.value) + Number(initialinstituational.value);
|
// const amount = Number(initialpublic.value) + Number(initialinstituational.value);
|
||||||
InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
|
const percent = ref(0)
|
||||||
|
const percentfix = ref(0)
|
||||||
|
// percent.value =Number(initialpublic.value) / amount * 100 ;
|
||||||
|
// InitialAllocationPublic.value = percent.value.toFixed(2) + "%"
|
||||||
|
// percentfix.value = Number(percent.value.toFixed(2))
|
||||||
|
// InitialAllocationInstitutional.value = (100 - percentfix.value).toFixed(2) + "%"
|
||||||
|
|
||||||
InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
|
|
||||||
|
// code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
|
||||||
|
// FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
|
||||||
|
// FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
|
||||||
//interval.value = Math.ceil((PublicOfferZ1max.value as number)/9)
|
//interval.value = Math.ceil((PublicOfferZ1max.value as number)/9)
|
||||||
init();
|
init();
|
||||||
}
|
}
|
||||||
|
@ -303,6 +374,8 @@ const getreferencedata = async () => {
|
||||||
calendarAddData(startDate.value, endDate.value, '#65FABF')
|
calendarAddData(startDate.value, endDate.value, '#65FABF')
|
||||||
calendarAddData(siInputDate, siInputDate, '#bd99dc')
|
calendarAddData(siInputDate, siInputDate, '#bd99dc')
|
||||||
calendarAddData(listingDate, listingDate, '#38b126')
|
calendarAddData(listingDate, listingDate, '#38b126')
|
||||||
|
calendarAddData('2023-5-23', listingDate, 'red')
|
||||||
|
// calendarAddData('2023-5-23', listingDate, 'yellow')
|
||||||
calendarAddLine()
|
calendarAddLine()
|
||||||
initialpublic.value = res.poSharesInitial
|
initialpublic.value = res.poSharesInitial
|
||||||
ApplicationQuantity.value = res.poApplicationQuantity
|
ApplicationQuantity.value = res.poApplicationQuantity
|
||||||
|
@ -312,11 +385,26 @@ const getreferencedata = async () => {
|
||||||
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
|
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
|
||||||
code44.value = res.poSharesFinal
|
code44.value = res.poSharesFinal
|
||||||
finalinstitutional.value = res.ioOfferSharesFinal
|
finalinstitutional.value = res.ioOfferSharesFinal
|
||||||
code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
|
|
||||||
finalpublic.value = res.poSharesFinal
|
finalpublic.value = res.poSharesFinal
|
||||||
|
code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
|
||||||
|
// InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / code66.value * 10000) / 100 + "%";
|
||||||
|
// InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / code66.value * 10000) / 100 + "%";
|
||||||
code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
|
code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
|
||||||
FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
|
// FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
|
||||||
FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
|
// FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
|
||||||
|
const percent = ref(0)
|
||||||
|
const percentfix = ref(0)
|
||||||
|
percent.value =Number(initialpublic.value) / code66.value * 100 ;
|
||||||
|
InitialAllocationPublic.value = percent.value.toFixed(2) + "%"
|
||||||
|
percentfix.value = Number(percent.value.toFixed(2))
|
||||||
|
InitialAllocationInstitutional.value = (100 - percentfix.value).toFixed(2) + "%"
|
||||||
|
const percent1 = ref(0)
|
||||||
|
const percentfix1 = ref(0)
|
||||||
|
percent1.value =Number(finalpublic.value) / code99.value * 100 ;
|
||||||
|
FinalAllocationPublic.value = percent1.value.toFixed(2) + "%"
|
||||||
|
percentfix1.value = Number(percent1.value.toFixed(2))
|
||||||
|
FinalAllocationInstitutional.value = (100 - percentfix1.value).toFixed(2) + "%"
|
||||||
quantity.value = res.overallIpoShares
|
quantity.value = res.overallIpoShares
|
||||||
init1()
|
init1()
|
||||||
init2()
|
init2()
|
||||||
|
@ -382,34 +470,36 @@ function calendarAddLine() {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
|
console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
|
||||||
Arr.forEach((item: any) => {
|
// Arr.forEach((item: any) => {
|
||||||
if (item.length) {
|
// if (item.length) {
|
||||||
item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
|
// item[0].dom.children[1].style.marginLeft = "30px"//起始时间添加样式
|
||||||
item[0].dom.children[1].style.width = "42px"
|
// item[0].dom.children[1].style.width = ""
|
||||||
item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
|
// item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
|
||||||
item[item.length - 1].dom.children[1].style.width = "42px"//结束时间添加样式
|
// //console.log(Arr,item[0].dom.children[1]);
|
||||||
item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
|
|
||||||
if (768 >= document.documentElement.clientWidth) {
|
// item[item.length - 1].dom.children[1].style.width = "35px"//结束时间添加样式
|
||||||
item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
|
// item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
|
||||||
item[0].dom.children[1].style.width = "19px"
|
// if (768 >= document.documentElement.clientWidth) {
|
||||||
item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
|
// item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
|
||||||
item[item.length - 1].dom.children[1].style.width = "23px"//结束时间添加样式
|
// item[0].dom.children[1].style.width = ""
|
||||||
item[item.length - 1].dom.children[1].style.borderRadius = "0px 10px 10px 0px";
|
// item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
|
||||||
}
|
// item[item.length - 1].dom.children[1].style.width = "23px"//结束时间添加样式
|
||||||
}
|
// item[item.length - 1].dom.children[1].style.borderRadius = "0px 10px 10px 0px";
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
if (item.length == 1) {//如果长度为1,单独设置样式
|
// if (item.length == 1) {//如果长度为1,单独设置样式
|
||||||
// console.log('item',item)
|
// // console.log('item',item)
|
||||||
item[0].dom.children[1].style.marginLeft = "11px"
|
// item[0].dom.children[1].style.marginLeft = "11px"
|
||||||
item[0].dom.children[1].style.width = "42px"
|
// item[0].dom.children[1].style.width = "42px"
|
||||||
item[0].dom.children[1].style.borderRadius = "10px";
|
// item[0].dom.children[1].style.borderRadius = "10px";
|
||||||
if (768 >= document.documentElement.clientWidth) {
|
// if (768 >= document.documentElement.clientWidth) {
|
||||||
item[0].dom.children[1].style.marginLeft = "7px"
|
// item[0].dom.children[1].style.marginLeft = "7px"
|
||||||
item[0].dom.children[1].style.width = "30px"
|
// item[0].dom.children[1].style.width = "30px"
|
||||||
item[0].dom.children[1].style.borderRadius = "10px";
|
// item[0].dom.children[1].style.borderRadius = "10px";
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
|
|
||||||
}
|
}
|
||||||
function init() {
|
function init() {
|
||||||
|
@ -640,12 +730,64 @@ function fn(data: any) {
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// @media screen and (max-width: 768px){
|
|
||||||
// .desmidle{
|
|
||||||
// font-size: 15px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
.yuan-titlesp{
|
||||||
|
font-size: 19px;
|
||||||
|
font-family: "Calibri";
|
||||||
|
color: #8e9eaa;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
|
||||||
|
|
||||||
|
font-size: 17px;
|
||||||
|
margin-top: 19px;
|
||||||
|
color: #a4b0ba;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.bottomleft-bouttom1{
|
||||||
|
// background-color: red;
|
||||||
|
width: 450px;
|
||||||
|
height: 95px;
|
||||||
|
transform: translateY(-150px);
|
||||||
|
display: flex;
|
||||||
|
margin-left: 40px;
|
||||||
|
margin-top: 10px;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
width: 90vw;
|
||||||
|
margin-left: 5vw;
|
||||||
|
margin-top: -2vh;
|
||||||
|
//justify-content: space-between;
|
||||||
|
}
|
||||||
|
.initialallocationleft{
|
||||||
|
width: 230px;
|
||||||
|
//background-color: #20b109;
|
||||||
|
height: 95px;
|
||||||
|
display: flex;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
.initialallocationleftpercent{
|
||||||
|
.persent{
|
||||||
|
margin-top: 12px;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.initialallocationlefttitle{
|
||||||
|
width: 140px;
|
||||||
|
//background-color: yellow;
|
||||||
|
height: 95px;
|
||||||
|
.title{
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
// background-color: #1f4055;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
.login1 {
|
.login1 {
|
||||||
background-image: url("@/assets/1x/beijingtu.png");
|
background-image: url("@/assets/1x/beijingtu.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -723,7 +865,7 @@ function fn(data: any) {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-left: 55px;
|
margin-left: 55px;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
//background-color: red;
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
margin-left: 21px;
|
margin-left: 21px;
|
||||||
}
|
}
|
||||||
|
@ -761,7 +903,7 @@ function fn(data: any) {
|
||||||
//min-width: 80px;
|
//min-width: 80px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: #647c8b;
|
color: #647c8b;
|
||||||
|
margin-left: 27px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-left1 {
|
.public-left1 {
|
||||||
|
@ -790,6 +932,9 @@ function fn(data: any) {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
background-color: #333f50;
|
background-color: #333f50;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan2 {
|
.yuan2 {
|
||||||
|
@ -797,6 +942,9 @@ function fn(data: any) {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
background-color: #ed7d31;
|
background-color: #ed7d31;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan8 {
|
.yuan8 {
|
||||||
|
@ -804,6 +952,9 @@ function fn(data: any) {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
background-color: #ffc000;
|
background-color: #ffc000;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan9 {
|
.yuan9 {
|
||||||
|
@ -811,12 +962,19 @@ function fn(data: any) {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
background-color: #2f5597;
|
background-color: #2f5597;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title {
|
.yuan-title {
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
font-family: 'Calibri';
|
font-family: 'Calibri';
|
||||||
color: #8e9eaa;
|
color: #8e9eaa;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
font-size: 17px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title3 {
|
.yuan-title3 {
|
||||||
|
@ -827,6 +985,9 @@ function fn(data: any) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
// background-color: #20b109;
|
// background-color: #20b109;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title3-1 {
|
.yuan-title3-1 {
|
||||||
|
@ -834,6 +995,9 @@ function fn(data: any) {
|
||||||
color: #5c6063;
|
color: #5c6063;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title2 {
|
.yuan-title2 {
|
||||||
|
@ -843,6 +1007,13 @@ function fn(data: any) {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 10px;
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
transform: translateX(-40px);
|
||||||
|
margin-top: 14px;
|
||||||
|
//margin-left: -200px;
|
||||||
|
// background-color: pink;
|
||||||
|
}
|
||||||
// background-color: #20b109;
|
// background-color: #20b109;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -860,10 +1031,11 @@ function fn(data: any) {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 10px;
|
||||||
// background-color: #20b109;
|
// background-color: #20b109;
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
transform: translateX(-40px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -929,9 +1101,9 @@ function fn(data: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.topright-p {
|
.topright-p {
|
||||||
transform: translateY(-164%);
|
transform: translateY(-132%);
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
transform: translateY(-160%);
|
transform: translateY(-135%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -993,16 +1165,25 @@ function fn(data: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-5 {
|
.p-5 {
|
||||||
float: right;
|
// float: right;
|
||||||
margin-top: 10px;
|
//margin-top: 10px;
|
||||||
margin-right: 20px;
|
|
||||||
|
//margin-right: 38px;
|
||||||
color: #7e929f;
|
color: #7e929f;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
width: 400px;
|
||||||
|
//background-color: #1f4055;
|
||||||
|
margin-left: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
margin-top: 5px;
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 14px;
|
transform: translateX(-6vw);
|
||||||
transform: translateY(-2px);
|
font-size: 15px;
|
||||||
margin-right: 4px;
|
//transform: translateY(-6px);
|
||||||
|
//margin-right: 4px;
|
||||||
|
width: 80vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1053,9 +1234,7 @@ function fn(data: any) {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
font-size: 21px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -290,11 +290,11 @@ const handleclick = (item: any) => {
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
width: 13rem;
|
width: 11px;
|
||||||
height: 13rem;
|
height: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
width: 13px;
|
width: 11px;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,22 +47,34 @@
|
||||||
<template #header="{ date }">
|
<template #header="{ date }">
|
||||||
|
|
||||||
<el-button size="small" @click="selectDate('prev-month')">
|
<el-button size="small" @click="selectDate('prev-month')">
|
||||||
<img src="@/assets/1x/source11.png">
|
<img src="@/assets/1x/source14.png">
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
||||||
<span class="month">{{ showMounth(date) }}</span>
|
<span class="month">{{ date }}</span>
|
||||||
|
|
||||||
<el-button size="small" @click="selectDate('next-month')">
|
<el-button size="small" @click="selectDate('next-month')">
|
||||||
<img src="@/assets/1x/source12.png">
|
<img src="@/assets/1x/source15.png">
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
<template #dateCell="{data}">
|
||||||
|
|
||||||
|
<p style="margin:0px" >
|
||||||
|
{{ data.day.split('-').slice(2).join() }}
|
||||||
|
|
||||||
|
<div v-for="(i, index) in dayTime" :key="index">
|
||||||
|
<div v-if="data.day==i" class="yuan"></div>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
</el-calendar>
|
</el-calendar>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-bottom1">
|
<div class="right-bottom1">
|
||||||
<Event v-if="Eventdata.length" :data="Eventdata" />
|
<Event v-if="Eventdata.length" :data="Eventdata" />
|
||||||
<div v-else class="right-bottom-title1">No event</div>
|
<div v-else class="right-bottom-title1">{{ $t(i18n.global.t('home.noevent')) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -83,7 +95,7 @@ import { useRouter } from 'vue-router';
|
||||||
import i18n from '@/locales'
|
import i18n from '@/locales'
|
||||||
import { getCurrentInstance, provide } from 'vue'
|
import { getCurrentInstance, provide } from 'vue'
|
||||||
import Event from './components/Event.vue';
|
import Event from './components/Event.vue';
|
||||||
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
|
import { getEventData, getSearchListing ,getDate} from "@/api/reqIpo/ipo";
|
||||||
import { getDataFromId } from "@/api/mock/home"
|
import { getDataFromId } from "@/api/mock/home"
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import SearchCup from "./components/SearchCup.vue";
|
import SearchCup from "./components/SearchCup.vue";
|
||||||
|
@ -99,14 +111,16 @@ const dayValue = ref(new Date())
|
||||||
const drawer = ref(false)
|
const drawer = ref(false)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.onhashchange = function () {
|
window.onhashchange = function () {
|
||||||
const langHref = window.location.href.split("home/")[1]
|
const langHref = window.location.href.split("home")[1]
|
||||||
if (langHref == 'en') {
|
console.log(window.location.href,langHref);
|
||||||
|
|
||||||
|
if (langHref == '?lang=en') {
|
||||||
proxy.$i18n.locale = 'en'
|
proxy.$i18n.locale = 'en'
|
||||||
store.setLocale(1)
|
store.setLocale(1)
|
||||||
} else if (langHref == 'tc') {
|
} else if (langHref == '?lang=tc') {
|
||||||
proxy.$i18n.locale = 'zhCt'
|
proxy.$i18n.locale = 'zhCt'
|
||||||
store.setLocale(2)
|
store.setLocale(2)
|
||||||
} else if (langHref == 'sc') {
|
} else if (langHref == '?lang=sc') {
|
||||||
proxy.$i18n.locale = 'zhCn'
|
proxy.$i18n.locale = 'zhCn'
|
||||||
|
|
||||||
store.setLocale(3)
|
store.setLocale(3)
|
||||||
|
@ -114,13 +128,15 @@ onMounted(() => {
|
||||||
reflashRouter()
|
reflashRouter()
|
||||||
|
|
||||||
};
|
};
|
||||||
|
getcalendar()
|
||||||
})
|
})
|
||||||
|
//过滤
|
||||||
const selectCards = async (res: any) => {
|
const selectCards = async (res: any) => {
|
||||||
async function demo() {
|
async function demo() {
|
||||||
return new Promise(async (resolve, reject) => {
|
return new Promise(async (resolve, reject) => {
|
||||||
try {
|
try {
|
||||||
if (!(res as any).data.length) {
|
if (!(res as any).data.length) {
|
||||||
ElMessage.warning('No relevant select data')
|
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
|
||||||
throw ("222")
|
throw ("222")
|
||||||
}
|
}
|
||||||
const data = (res as any).data.map((item: any) => {
|
const data = (res as any).data.map((item: any) => {
|
||||||
|
@ -269,7 +285,12 @@ const setEventdata = (EventD: any) => {
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const dayTime = ref()
|
||||||
|
const getcalendar = async ()=>{
|
||||||
|
const res = await getDate()
|
||||||
|
dayTime.value = (res as any).data
|
||||||
|
console.log(dayTime.value);
|
||||||
|
}
|
||||||
const getHomeIpoList = async () => {
|
const getHomeIpoList = async () => {
|
||||||
async function demo() {
|
async function demo() {
|
||||||
return new Promise(async (resolve, reject) => {
|
return new Promise(async (resolve, reject) => {
|
||||||
|
@ -332,7 +353,7 @@ const getSearchIpoList = async (keyword: string) => {
|
||||||
try {
|
try {
|
||||||
const res = await getSearchListing(keyword)
|
const res = await getSearchListing(keyword)
|
||||||
if (!(res as any).data.length) {
|
if (!(res as any).data.length) {
|
||||||
ElMessage.warning('No relevant search data')
|
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
|
||||||
throw ("222")
|
throw ("222")
|
||||||
}
|
}
|
||||||
const data = (res as any).data.map((item: any) => {
|
const data = (res as any).data.map((item: any) => {
|
||||||
|
@ -539,6 +560,19 @@ function fn(data: any) {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.login2 {
|
.login2 {
|
||||||
background-image: url("@/assets/1x/beijingtu.png");
|
background-image: url("@/assets/1x/beijingtu.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -825,6 +859,8 @@ function fn(data: any) {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
// font-family: "Calibri"
|
// font-family: "Calibri"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -848,7 +884,7 @@ function fn(data: any) {
|
||||||
|
|
||||||
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
|
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
|
||||||
// background-color: #e36466;
|
// background-color: #e36466;
|
||||||
border: 5px solid #e36466;
|
border: 3px solid #e36466;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
|
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
|
||||||
|
|
|
@ -6,17 +6,17 @@
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<li :class="state == 1 && 'active'" @click="setState(1)" >
|
<li :class="state == 1 && 'active'" @click="setState(1)" >
|
||||||
<img src="@/assets/1x/source10.png" alt="menu">
|
<img src="@/assets/1x/source10.png" alt="menu">
|
||||||
<span>Home</span>
|
<span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
|
||||||
</li>
|
</li>
|
||||||
<li :class="state == 2 && 'active'" @click="setState(2)">
|
<li :class="state == 2 && 'active'" @click="setState(2)">
|
||||||
<img src="@/assets/1x/source5.png" alt="menu">
|
<img src="@/assets/1x/source5.png" alt="menu">
|
||||||
<span>Dashboard</span>
|
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
|
||||||
</li>
|
</li>
|
||||||
<li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
|
<li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
|
||||||
<div class="ipoWrap">
|
<div class="ipoWrap">
|
||||||
<div>
|
<div>
|
||||||
<img src="@/assets/1x/source2.png" alt="menu">
|
<img src="@/assets/1x/source2.png" alt="menu">
|
||||||
<span>IPO Reference Data</span>
|
<span >{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
|
<!-- <div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
|
||||||
<img src="@/assets/1x/source11.png" alt="" class="icon">
|
<img src="@/assets/1x/source11.png" alt="" class="icon">
|
||||||
|
@ -31,13 +31,13 @@
|
||||||
</li>
|
</li>
|
||||||
<li :class="state == 4 && 'active'" @click="setState(4)">
|
<li :class="state == 4 && 'active'" @click="setState(4)">
|
||||||
<img src="@/assets/1x/source6.png" alt="menu">
|
<img src="@/assets/1x/source6.png" alt="menu">
|
||||||
<span>IPO Calendar</span>
|
<span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
|
||||||
</li>
|
</li>
|
||||||
<li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
|
<li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
|
||||||
<div class="ipoWrap">
|
<div class="ipoWrap">
|
||||||
<div>
|
<div>
|
||||||
<img src="@/assets/1x/1x/source6.png" alt="menu">
|
<img src="@/assets/1x/1x/source6.png" alt="menu">
|
||||||
<span>Languages</span>
|
<span>{{ $t(i18n.global.t('home.Languages')) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
|
<div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
|
||||||
<img src="@/assets/1x/source11.png" alt="">
|
<img src="@/assets/1x/source11.png" alt="">
|
||||||
|
@ -65,6 +65,7 @@ import { ref } from "vue"
|
||||||
import { getCurrentInstance, onUnmounted,inject } from 'vue'
|
import { getCurrentInstance, onUnmounted,inject } from 'vue'
|
||||||
import { ipoStore } from "@/stores/ipo"
|
import { ipoStore } from "@/stores/ipo"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
import i18n from '@/locales'
|
||||||
const route=useRouter()
|
const route=useRouter()
|
||||||
const store = ipoStore()
|
const store = ipoStore()
|
||||||
const { proxy } = (getCurrentInstance() as any)
|
const { proxy } = (getCurrentInstance() as any)
|
||||||
|
|
|
@ -61,7 +61,7 @@ export default defineConfig((mode: ConfigEnv) => {
|
||||||
// 配置代理服务器
|
// 配置代理服务器
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api": {
|
"/api": {
|
||||||
target: "http://192.168.2.86:8080",
|
target: "http://192.168.2.86:8888",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
rewrite: (path) => path.replace(/^\/api/, ""),
|
||||||
},
|
},
|
||||||
|
|