ipostatus弹窗
This commit is contained in:
parent
e81baabd55
commit
254c5b08c3
|
@ -226,23 +226,23 @@ const InitialAllocationPublic=ref('')
|
|||
const FinalAllocationPublic = ref('')
|
||||
const InitialAllocationInstitutional = ref('')
|
||||
const FinalAllocationInstitutional = ref('')
|
||||
// const setBarRight=async ()=>{
|
||||
// const result= await getDataFromId('bar')
|
||||
// const ipoID='00314';
|
||||
// const index=result.findIndex((item:any)=>item.ipoID==ipoID);
|
||||
// const graph=result[index].graph;
|
||||
// PublicOfferX.value=graph.map((item:any)=>{
|
||||
// return moment(item.dateTime).format('MM-DD')
|
||||
// })
|
||||
// PublicOfferY.value=graph.map((item:any)=>{
|
||||
// return item.poApplicationQuantity;
|
||||
// });
|
||||
// const amount=Number(initialpublic.value)+Number(initialinstituational.value);
|
||||
// InitialAllocationPublic.value=Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
|
||||
const setBarRight = async () => {
|
||||
const result = await getDataFromId('bar')
|
||||
const ipoID = '00314';
|
||||
const index = result.findIndex((item: any) => item.ipoID == ipoID);
|
||||
const graph = result[index].graph;
|
||||
PublicOfferX.value = graph.map((item: any) => {
|
||||
return moment(item.dateTime).format('MM-DD')
|
||||
})
|
||||
PublicOfferY.value = graph.map((item: any) => {
|
||||
return item.poApplicationQuantity;
|
||||
});
|
||||
const amount = Number(initialpublic.value) + Number(initialinstituational.value);
|
||||
InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
|
||||
|
||||
// InitialAllocationInstitutional.value=Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
|
||||
// init();
|
||||
// }
|
||||
InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
|
||||
init();
|
||||
}
|
||||
const setBar = async () => {
|
||||
const ipoID = localStorage.getItem('ipoID')
|
||||
const result = await getIpo(ipoID as string)
|
||||
|
@ -264,8 +264,8 @@ PublicOfferY1.value=(result as any).data[0].graph.map((item:any)=>{
|
|||
init();
|
||||
}
|
||||
onMounted(() => {
|
||||
//setBarRight();//假的bar接口
|
||||
setBar()//真的接口
|
||||
setBarRight();//假的bar接口
|
||||
// setBar()//真的接口
|
||||
})
|
||||
const getdatatime = async () => {
|
||||
const res = await getHomeIpo(1)
|
||||
|
@ -274,13 +274,13 @@ const getdatatime = async () => {
|
|||
}
|
||||
const getreferencedata = async () => {
|
||||
//---mock测试接口
|
||||
// const result1=await getDataFromId('bar');
|
||||
// const res=result1[0];
|
||||
const result1 = await getDataFromId('bar');
|
||||
const res = result1[0];
|
||||
//---mock测试接口结束
|
||||
|
||||
const ipoID = localStorage.getItem('ipoID')
|
||||
const result = await getIpo(ipoID as string)
|
||||
const res=(result as any).data[0];
|
||||
// const result = await getIpo(ipoID as string)
|
||||
// const res=(result as any).data[0];
|
||||
// console.log(res);
|
||||
const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;
|
||||
|
||||
|
@ -625,6 +625,7 @@ const showMounth = (date: any) => {
|
|||
background-size: cover;
|
||||
height: 1200px;
|
||||
font-family: "Calibri";
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
height: 2500px;
|
||||
}
|
||||
|
@ -633,10 +634,12 @@ const showMounth = (date: any) => {
|
|||
.wrap {
|
||||
display: flex;
|
||||
padding-top: 30px;
|
||||
|
||||
.leftbox {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
|
@ -647,15 +650,18 @@ const showMounth = (date: any) => {
|
|||
.rightbox {
|
||||
width: 78%;
|
||||
height: 100%;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 100vw;
|
||||
transform: translateY(-30rem);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
// height: 100vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.persent {
|
||||
color: #9FA0BF;
|
||||
font-weight: 400;
|
||||
|
@ -663,27 +669,36 @@ const showMounth = (date: any) => {
|
|||
font-family: 'Calibri';
|
||||
// margin-left: 14px;
|
||||
}
|
||||
|
||||
.desmidle {
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pulic {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
// justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
margin-left: 55px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.pulic1 {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
// justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.pulic2 {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
// justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
@ -694,6 +709,8 @@ const showMounth = (date: any) => {
|
|||
min-width: 80px;
|
||||
justify-content: space-between;
|
||||
color: #647c8b;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.public-left1 {
|
||||
|
@ -744,11 +761,13 @@ const showMounth = (date: any) => {
|
|||
background-color: #2f5597;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.yuan-title {
|
||||
font-size: 19px;
|
||||
font-family: 'Calibri';
|
||||
color: #8e9eaa;
|
||||
}
|
||||
|
||||
.yuan-title3 {
|
||||
margin-left: 75px;
|
||||
color: #5c6063;
|
||||
|
@ -758,12 +777,14 @@ const showMounth = (date: any) => {
|
|||
flex-direction: row-reverse;
|
||||
// background-color: #20b109;
|
||||
}
|
||||
|
||||
.yuan-title3-1 {
|
||||
margin-left: 52px;
|
||||
color: #5c6063;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.yuan-title2 {
|
||||
margin-left: 31px;
|
||||
color: #5c6063;
|
||||
|
@ -773,12 +794,14 @@ const showMounth = (date: any) => {
|
|||
flex-direction: row-reverse;
|
||||
// background-color: #20b109;
|
||||
}
|
||||
|
||||
.yuan-title2-1 {
|
||||
margin-left: 53px;
|
||||
color: #5c6063;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.yuan-title1 {
|
||||
margin-left: 55px;
|
||||
color: #516c7e;
|
||||
|
@ -842,8 +865,8 @@ const showMounth = (date: any) => {
|
|||
|
||||
.bottomleft-bouttom {
|
||||
transform: translateY(-150px);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
padding-right: 40px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.topright-p {
|
||||
|
@ -857,21 +880,25 @@ const showMounth = (date: any) => {
|
|||
color: #415d6f;
|
||||
justify-content: space-between;
|
||||
width: 400px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 80vw;
|
||||
transform: translateX(-6vw);
|
||||
font-size: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.p-2-2 {
|
||||
width: 28%;
|
||||
// margin-top: 20px;
|
||||
transform: translateY(5px);
|
||||
font-weight: 600;
|
||||
font-size: 23px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20rem;
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
|
@ -883,6 +910,7 @@ const showMounth = (date: any) => {
|
|||
margin-left: 50px;
|
||||
font-size: 20px;
|
||||
color: #415d6f;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 80vw;
|
||||
transform: translateX(-6vw);
|
||||
|
@ -893,6 +921,7 @@ const showMounth = (date: any) => {
|
|||
.p-4 {
|
||||
margin-top: 3px;
|
||||
margin-left: 50px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 80vw;
|
||||
transform: translateX(-6vw);
|
||||
|
@ -906,6 +935,7 @@ const showMounth = (date: any) => {
|
|||
margin-right: 20px;
|
||||
color: #7e929f;
|
||||
font-size: 18px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 14rem;
|
||||
transform: translateY(-2rem);
|
||||
|
@ -933,6 +963,7 @@ const showMounth = (date: any) => {
|
|||
font-size: 23px;
|
||||
color: #2a4a5e;
|
||||
font-family: 'Calibri';
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20rem;
|
||||
}
|
||||
|
@ -942,11 +973,13 @@ const showMounth = (date: any) => {
|
|||
width: 490px;
|
||||
height: 530px;
|
||||
background-color: #fff;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90vw;
|
||||
margin-left: 5vw;
|
||||
|
||||
}
|
||||
|
||||
// background-color: red;
|
||||
.content-title {
|
||||
font-size: 25px;
|
||||
|
@ -956,6 +989,7 @@ const showMounth = (date: any) => {
|
|||
margin-left: 20px;
|
||||
margin-top: 15px;
|
||||
cursor: default;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 21rem;
|
||||
}
|
||||
|
@ -967,12 +1001,14 @@ const showMounth = (date: any) => {
|
|||
height: 530px;
|
||||
background-color: #fff;
|
||||
margin-left: 20px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90vw;
|
||||
height: 60vh;
|
||||
margin-left: 5vw;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.topright-title {
|
||||
font-size: 25px;
|
||||
margin: 5px;
|
||||
|
@ -988,6 +1024,7 @@ const showMounth = (date: any) => {
|
|||
width: 490px;
|
||||
height: 432px;
|
||||
background-color: #fff;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90vw;
|
||||
margin-left: 5vw;
|
||||
|
@ -1001,6 +1038,7 @@ const showMounth = (date: any) => {
|
|||
height: 432px;
|
||||
background-color: #fff;
|
||||
margin-left: 20px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 90vw;
|
||||
margin-left: 5vw;
|
||||
|
@ -1041,6 +1079,7 @@ const showMounth = (date: any) => {
|
|||
font-size: 25px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20rem;
|
||||
font-weight: 400;
|
||||
|
@ -1051,6 +1090,7 @@ const showMounth = (date: any) => {
|
|||
:deep(.el-calendar) {
|
||||
--el-calendar-border: none;
|
||||
cursor: default;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 80vw;
|
||||
margin-left: 5vw;
|
||||
|
@ -1066,6 +1106,7 @@ const showMounth = (date: any) => {
|
|||
width: 410px;
|
||||
margin-left: 20px;
|
||||
font-family: "Calibri";
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 71vw;
|
||||
transform: translate(-4vw);
|
||||
|
@ -1078,6 +1119,7 @@ const showMounth = (date: any) => {
|
|||
background-color: red !important;
|
||||
padding-left: 10px 75px 27px !important;
|
||||
cursor: default;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 80vw;
|
||||
transform: translate(-4vw);
|
||||
|
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<div class="selectWrap" v-if="showSelect" @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="check">
|
||||
<el-icon v-if="item.isSelcted">
|
||||
<Check />
|
||||
</el-icon>
|
||||
</div>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<div class="title">tradingCurrency</div>
|
||||
<li>
|
||||
<div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
|
||||
@click="tradingCurrencySlect(item.key)">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "XSelect",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineExpose, reactive } from 'vue';
|
||||
const showSelect = ref(false)
|
||||
const confirm = () => {
|
||||
showSelect.value = false;
|
||||
}
|
||||
const preVant = (e: any) => {
|
||||
e.stopPropagation();
|
||||
}
|
||||
const obj = reactive({
|
||||
ipoStatus: [{
|
||||
key: 25,
|
||||
value: 'Deal Initiated',
|
||||
isSelcted: false
|
||||
},
|
||||
{
|
||||
key: 30,
|
||||
value: 'Public Offer Closed',
|
||||
isSelcted: true
|
||||
}, {
|
||||
key: 35,
|
||||
value: 'Application Validated',
|
||||
isSelcted: true
|
||||
}, {
|
||||
key: 45,
|
||||
value: 'Allotment Confirmed',
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 50,
|
||||
value: 'Money Settlement',
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 55,
|
||||
value: 'Allocation Confirmed',
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 60,
|
||||
value: 'Placing Approved',
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 65,
|
||||
value: 'Allotment Results Approved',
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 70,
|
||||
value: 'Trading Started',
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 80,
|
||||
value: 'Suspended',
|
||||
isSelcted: false
|
||||
}, {
|
||||
key: 90,
|
||||
value: 'Cancelled',
|
||||
isSelcted: false
|
||||
}],
|
||||
tradingCurrency: [
|
||||
{
|
||||
key: 'HKD',
|
||||
value: 'Hong Kong Dollar',
|
||||
isSelcted: false
|
||||
},
|
||||
{
|
||||
key: 'CNY',
|
||||
value: 'Chinese Yuan',
|
||||
isSelcted: true
|
||||
},
|
||||
{
|
||||
key: 'USD',
|
||||
value: 'United States Dollar',
|
||||
isSelcted: false
|
||||
}
|
||||
]
|
||||
})
|
||||
const ipoStatusSlect = (key: number) => {
|
||||
obj.ipoStatus = obj.ipoStatus.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 }
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
showSelect
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selectWrap {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px 20px 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content {
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #8C979B;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.word {
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
border-radius: 20px;
|
||||
// width: 50px;
|
||||
height: 20px;
|
||||
background-color: #F2F0F5;
|
||||
padding: 5px 15px 5px 10px;
|
||||
color: #6A7686;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
.check {
|
||||
width: 30px;
|
||||
|
||||
span {
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
// margin-bottom: 20px;
|
||||
|
||||
button {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
background-color: #fff;
|
||||
color: #334B57;
|
||||
padding: 10px 20px 10px 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0F426F;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -26,7 +26,8 @@
|
|||
|
||||
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
|
||||
<Lang class="alert" ref="lang" />
|
||||
<SearchCup ref="SearchCupDom" class="searchCup" />
|
||||
<Select ref="selectR" />
|
||||
<!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -70,7 +71,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
|
@ -92,6 +92,8 @@ 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) => {
|
||||
|
@ -433,13 +435,14 @@ const lang = ref()
|
|||
const SearchCupDom = ref()
|
||||
const handleShowLang = (e: any) => {
|
||||
e.stopPropagation()
|
||||
SearchCupDom.value.showLang = false;
|
||||
selectR.value.showSelect = false
|
||||
lang.value.showLang = !lang.value.showLang
|
||||
}
|
||||
const handleShowCup = (e: any) => {
|
||||
e.stopPropagation()
|
||||
lang.value.showLang = false;
|
||||
SearchCupDom.value.showLang = !SearchCupDom.value.showLang
|
||||
console.log(111)
|
||||
selectR.value.showSelect = !selectR.value.showSelect
|
||||
}
|
||||
//路由传参
|
||||
const handleclick = (item: any) => {
|
||||
|
@ -457,8 +460,11 @@ const handleclick = (item: any) => {
|
|||
onMounted(() => {
|
||||
document.documentElement.onclick = function () {
|
||||
|
||||
if (SearchCupDom.value.showLang) {
|
||||
SearchCupDom.value.showLang = 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
|
||||
|
@ -490,6 +496,7 @@ const showMounth = (date: any) => {
|
|||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -817,10 +824,12 @@ const showMounth = (date: any) => {
|
|||
:deep(.el-calendar-table td.is-selected) {
|
||||
background-color: #e8ebee;
|
||||
}
|
||||
|
||||
:deep(.el-calendar-table td.is-today .el-calendar-day) {
|
||||
color: black;
|
||||
background-color: #e36466;
|
||||
}
|
||||
|
||||
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
|
||||
// background-color: #e36466;
|
||||
border: 5px solid #e36466;
|
||||
|
|
Loading…
Reference in New Issue