ipostatus弹窗
This commit is contained in:
parent
e81baabd55
commit
254c5b08c3
|
@ -81,8 +81,8 @@
|
||||||
<div class="public-left">
|
<div class="public-left">
|
||||||
<p class="yuan1"></p>
|
<p class="yuan1"></p>
|
||||||
<p class="yuan-title">
|
<p class="yuan-title">
|
||||||
<span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
<span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
||||||
<span class="persent">{{ InitialAllocationPublic }}</span>
|
<span class="persent">{{ InitialAllocationPublic }}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -118,7 +118,7 @@
|
||||||
<p class="yuan8"></p>
|
<p class="yuan8"></p>
|
||||||
<p class="yuan-title">
|
<p class="yuan-title">
|
||||||
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
||||||
<span class="persent">{{ FinalAllocationPublic }}</span>
|
<span class="persent">{{ FinalAllocationPublic }}</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -129,8 +129,8 @@
|
||||||
<p class="yuan9"></p>
|
<p class="yuan9"></p>
|
||||||
<p class="yuan-title">
|
<p class="yuan-title">
|
||||||
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
|
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
|
||||||
<span class="persent">{{ FinalAllocationInstitutional }}</span>
|
<span class="persent">{{ FinalAllocationInstitutional }}</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
<p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||||
|
@ -167,9 +167,9 @@ import { getIpo, getHomeIpo } from '@/api/reqIpo/ipo'
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import i18n from '@/locales'
|
import i18n from '@/locales'
|
||||||
import { ipoStore } from "@/stores/ipo"
|
import { ipoStore } from "@/stores/ipo"
|
||||||
import { getCurrentInstance,onUnmounted} from 'vue'
|
import { getCurrentInstance, onUnmounted } from 'vue'
|
||||||
|
|
||||||
import {getDataFromId} from "@/api/mock/home";
|
import { getDataFromId } from "@/api/mock/home";
|
||||||
const { proxy } = (getCurrentInstance() as any)
|
const { proxy } = (getCurrentInstance() as any)
|
||||||
// console.log('getCurrentInstance()中的proxy:', proxy)
|
// console.log('getCurrentInstance()中的proxy:', proxy)
|
||||||
const store = ipoStore()
|
const store = ipoStore()
|
||||||
|
@ -183,8 +183,8 @@ onMounted(
|
||||||
() => {
|
() => {
|
||||||
|
|
||||||
const obj = JSON.parse(localStorage.getItem('itemData') as string);
|
const obj = JSON.parse(localStorage.getItem('itemData') as string);
|
||||||
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
|
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
|
||||||
data.value=obj;
|
data.value = obj;
|
||||||
getreferencedata()
|
getreferencedata()
|
||||||
getdatatime()
|
getdatatime()
|
||||||
},
|
},
|
||||||
|
@ -217,55 +217,55 @@ const LineData = reactive({
|
||||||
lines: [] as lineObje[],
|
lines: [] as lineObje[],
|
||||||
ids: [] as any
|
ids: [] as any
|
||||||
})
|
})
|
||||||
const PublicOfferX1=ref<string[]>([])
|
const PublicOfferX1 = ref<string[]>([])
|
||||||
const PublicOfferY1=ref<string[]>([])
|
const PublicOfferY1 = ref<string[]>([])
|
||||||
const PublicOfferZ1=ref<string[]>([])
|
const PublicOfferZ1 = ref<string[]>([])
|
||||||
const PublicOfferX=ref<string[]>([])
|
const PublicOfferX = ref<string[]>([])
|
||||||
const PublicOfferY=ref<string[]>([])
|
const PublicOfferY = ref<string[]>([])
|
||||||
const InitialAllocationPublic=ref('')
|
const InitialAllocationPublic = ref('')
|
||||||
const FinalAllocationPublic=ref('')
|
const FinalAllocationPublic = ref('')
|
||||||
const InitialAllocationInstitutional=ref('')
|
const InitialAllocationInstitutional = ref('')
|
||||||
const FinalAllocationInstitutional = ref('')
|
const FinalAllocationInstitutional = ref('')
|
||||||
// const setBarRight=async ()=>{
|
const setBarRight = async () => {
|
||||||
// const result= await getDataFromId('bar')
|
const result = await getDataFromId('bar')
|
||||||
// const ipoID='00314';
|
const ipoID = '00314';
|
||||||
// const index=result.findIndex((item:any)=>item.ipoID==ipoID);
|
const index = result.findIndex((item: any) => item.ipoID == ipoID);
|
||||||
// const graph=result[index].graph;
|
const graph = result[index].graph;
|
||||||
// PublicOfferX.value=graph.map((item:any)=>{
|
PublicOfferX.value = graph.map((item: any) => {
|
||||||
// return moment(item.dateTime).format('MM-DD')
|
return moment(item.dateTime).format('MM-DD')
|
||||||
// })
|
})
|
||||||
// PublicOfferY.value=graph.map((item:any)=>{
|
PublicOfferY.value = graph.map((item: any) => {
|
||||||
// return item.poApplicationQuantity;
|
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();
|
|
||||||
// }
|
|
||||||
const setBar = async()=>{
|
|
||||||
const ipoID = localStorage.getItem('ipoID')
|
|
||||||
const result = await getIpo(ipoID as string)
|
|
||||||
PublicOfferX1.value = (result as any).data[0].graph.map((item:any)=>{
|
|
||||||
return moment(item.dateTime).format('MM/DD')
|
|
||||||
})
|
|
||||||
PublicOfferY1.value=(result as any).data[0].graph.map((item:any)=>{
|
|
||||||
return item.poApplicationQuantity/1000000;
|
|
||||||
});
|
|
||||||
PublicOfferZ1.value = (result as any).data[0].graph.map((item:any)=>{
|
|
||||||
return (item.poApplicationQuantity)/item.poSharesInitial;
|
|
||||||
});
|
});
|
||||||
|
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 + "%";
|
||||||
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();
|
init();
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
const setBar = async () => {
|
||||||
//setBarRight();//假的bar接口
|
const ipoID = localStorage.getItem('ipoID')
|
||||||
setBar()//真的接口
|
const result = await getIpo(ipoID as string)
|
||||||
|
PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => {
|
||||||
|
return moment(item.dateTime).format('MM/DD')
|
||||||
|
})
|
||||||
|
PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
|
||||||
|
return item.poApplicationQuantity / 1000000;
|
||||||
|
});
|
||||||
|
PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
|
||||||
|
return (item.poApplicationQuantity) / item.poSharesInitial;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
setBarRight();//假的bar接口
|
||||||
|
// setBar()//真的接口
|
||||||
})
|
})
|
||||||
const getdatatime = async () => {
|
const getdatatime = async () => {
|
||||||
const res = await getHomeIpo(1)
|
const res = await getHomeIpo(1)
|
||||||
|
@ -274,15 +274,15 @@ const getdatatime = async () => {
|
||||||
}
|
}
|
||||||
const getreferencedata = async () => {
|
const getreferencedata = async () => {
|
||||||
//---mock测试接口
|
//---mock测试接口
|
||||||
// const result1=await getDataFromId('bar');
|
const result1 = await getDataFromId('bar');
|
||||||
// const res=result1[0];
|
const res = result1[0];
|
||||||
//---mock测试接口结束
|
//---mock测试接口结束
|
||||||
|
|
||||||
const ipoID = localStorage.getItem('ipoID')
|
const ipoID = localStorage.getItem('ipoID')
|
||||||
const result = await getIpo(ipoID as string)
|
// const result = await getIpo(ipoID as string)
|
||||||
const res=(result as any).data[0];
|
// const res=(result as any).data[0];
|
||||||
// console.log(res);
|
// console.log(res);
|
||||||
const { bookOpenDate, bookCloseDate, allotmentDate,siInputDate,listingDate } = res;
|
const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;
|
||||||
|
|
||||||
|
|
||||||
startDate.value = bookOpenDate;
|
startDate.value = bookOpenDate;
|
||||||
|
@ -296,7 +296,7 @@ const getreferencedata = async () => {
|
||||||
calendarAddLine()
|
calendarAddLine()
|
||||||
initialpublic.value = res.poSharesInitial
|
initialpublic.value = res.poSharesInitial
|
||||||
ApplicationQuantity.value = res.poApplicationQuantity
|
ApplicationQuantity.value = res.poApplicationQuantity
|
||||||
subscriptionRatio.value= res.poApplicationQuantity/res.poSharesInitial
|
subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial
|
||||||
subscriptionRatio.value = subscriptionRatio.value.toFixed(1)
|
subscriptionRatio.value = subscriptionRatio.value.toFixed(1)
|
||||||
initialinstituational.value = res.ioSharesInitial
|
initialinstituational.value = res.ioSharesInitial
|
||||||
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
|
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
|
||||||
|
@ -305,8 +305,8 @@ const getreferencedata = async () => {
|
||||||
code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
|
code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
|
||||||
finalpublic.value = res.poSharesFinal
|
finalpublic.value = res.poSharesFinal
|
||||||
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 + "%";
|
||||||
quantity.value = res.overallIpoShares
|
quantity.value = res.overallIpoShares
|
||||||
init1()
|
init1()
|
||||||
init2()
|
init2()
|
||||||
|
@ -398,14 +398,14 @@ function init() {
|
||||||
y2: 200
|
y2: 200
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross'
|
type: 'cross'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
// data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
|
// data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
|
||||||
data:PublicOfferX1.value
|
data: PublicOfferX1.value
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
|
@ -457,9 +457,9 @@ function init() {
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:proxy.$t('dashboard.QuantityMillion'),
|
name: proxy.$t('dashboard.QuantityMillion'),
|
||||||
type:'bar',
|
type: 'bar',
|
||||||
data:PublicOfferY1.value,
|
data: PublicOfferY1.value,
|
||||||
barWidth: '40%',
|
barWidth: '40%',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#f6caae'
|
color: '#f6caae'
|
||||||
|
@ -469,9 +469,9 @@ function init() {
|
||||||
};
|
};
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
window.onresize=()=>{
|
window.onresize = () => {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function init1() {
|
function init1() {
|
||||||
var myChart1 = echarts.init(main1.value);
|
var myChart1 = echarts.init(main1.value);
|
||||||
|
@ -497,15 +497,15 @@ function init1() {
|
||||||
borderWidth: 5,
|
borderWidth: 5,
|
||||||
borderColor: '#fff'
|
borderColor: '#fff'
|
||||||
},
|
},
|
||||||
cursor:'default'
|
cursor: 'default'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
myChart1.setOption(option1);
|
myChart1.setOption(option1);
|
||||||
//屏幕自适应
|
//屏幕自适应
|
||||||
window.onresize=()=>{
|
window.onresize = () => {
|
||||||
myChart1.resize();
|
myChart1.resize();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
function init2() {
|
function init2() {
|
||||||
var myChart2 = echarts.init(main2.value);
|
var myChart2 = echarts.init(main2.value);
|
||||||
|
@ -530,14 +530,14 @@ function init2() {
|
||||||
borderWidth: 5,
|
borderWidth: 5,
|
||||||
borderColor: '#fff'
|
borderColor: '#fff'
|
||||||
},
|
},
|
||||||
cursor:'default'
|
cursor: 'default'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
myChart2.setOption(option2);
|
myChart2.setOption(option2);
|
||||||
window.onresize=()=>{
|
window.onresize = () => {
|
||||||
myChart2.resize();
|
myChart2.resize();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const data = ref({
|
const data = ref({
|
||||||
title: "FINI TESTING COMP",
|
title: "FINI TESTING COMP",
|
||||||
|
@ -625,19 +625,22 @@ const showMounth = (date: any) => {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 1200px;
|
height: 1200px;
|
||||||
font-family: "Calibri";
|
font-family: "Calibri";
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
height: 2500px;
|
@media screen and (max-width: 768px) {
|
||||||
}
|
height: 2500px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
|
|
||||||
.leftbox {
|
.leftbox {
|
||||||
width: 22%;
|
width: 22%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -647,43 +650,55 @@ const showMounth = (date: any) => {
|
||||||
.rightbox {
|
.rightbox {
|
||||||
width: 78%;
|
width: 78%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
width: 100vw;
|
@media screen and (max-width: 768px) {
|
||||||
transform: translateY(-30rem);
|
width: 100vw;
|
||||||
}
|
transform: translateY(-30rem);
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: 100vh;
|
// height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.persent{
|
|
||||||
color:#9FA0BF;
|
.persent {
|
||||||
|
color: #9FA0BF;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: 'Calibri';
|
font-family: 'Calibri';
|
||||||
// margin-left: 14px;
|
// margin-left: 14px;
|
||||||
}
|
}
|
||||||
.desmidle{
|
|
||||||
|
.desmidle {
|
||||||
margin: 0 10px 0 10px;
|
margin: 0 10px 0 10px;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pulic {
|
.pulic {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
// justify-content: space-around;
|
||||||
|
justify-content: space-between;
|
||||||
margin-left: 55px;
|
margin-left: 55px;
|
||||||
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pulic1 {
|
.pulic1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
// justify-content: space-around;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
margin-left: 35px;
|
margin-left: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pulic2 {
|
.pulic2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
// justify-content: space-around;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -694,6 +709,8 @@ const showMounth = (date: any) => {
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: #647c8b;
|
color: #647c8b;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-left1 {
|
.public-left1 {
|
||||||
|
@ -744,49 +761,55 @@ const showMounth = (date: any) => {
|
||||||
background-color: #2f5597;
|
background-color: #2f5597;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.yuan-title{
|
|
||||||
font-size: 19px;
|
.yuan-title {
|
||||||
font-family: 'Calibri';
|
font-size: 19px;
|
||||||
color: #8e9eaa;
|
font-family: 'Calibri';
|
||||||
}
|
color: #8e9eaa;
|
||||||
|
}
|
||||||
|
|
||||||
.yuan-title3 {
|
.yuan-title3 {
|
||||||
margin-left: 75px;
|
margin-left: 75px;
|
||||||
color: #5c6063;
|
color: #5c6063;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
// background-color: #20b109;
|
// background-color: #20b109;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title3-1 {
|
.yuan-title3-1 {
|
||||||
margin-left: 52px;
|
margin-left: 52px;
|
||||||
color: #5c6063;
|
color: #5c6063;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title2 {
|
.yuan-title2 {
|
||||||
margin-left: 31px;
|
margin-left: 31px;
|
||||||
color: #5c6063;
|
color: #5c6063;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
// background-color: #20b109;
|
// background-color: #20b109;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title2-1 {
|
.yuan-title2-1 {
|
||||||
margin-left: 53px;
|
margin-left: 53px;
|
||||||
color: #5c6063;
|
color: #5c6063;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan-title1 {
|
.yuan-title1 {
|
||||||
margin-left: 55px;
|
margin-left: 55px;
|
||||||
color: #516c7e;
|
color: #516c7e;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
// background-color: #20b109;
|
// background-color: #20b109;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan2 {
|
.yuan2 {
|
||||||
|
@ -842,8 +865,8 @@ const showMounth = (date: any) => {
|
||||||
|
|
||||||
.bottomleft-bouttom {
|
.bottomleft-bouttom {
|
||||||
transform: translateY(-150px);
|
transform: translateY(-150px);
|
||||||
// display: flex;
|
padding-right: 40px;
|
||||||
// flex-direction: column;
|
padding-left: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topright-p {
|
.topright-p {
|
||||||
|
@ -857,22 +880,26 @@ const showMounth = (date: any) => {
|
||||||
color: #415d6f;
|
color: #415d6f;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
transform: translateX(-6vw);
|
transform: translateX(-6vw);
|
||||||
font-size: 15rem;
|
font-size: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.p-2-2 {
|
|
||||||
width: 28%;
|
.p-2-2 {
|
||||||
// margin-top: 20px;
|
width: 28%;
|
||||||
transform: translateY(5px);
|
// margin-top: 20px;
|
||||||
font-weight: 600;
|
transform: translateY(5px);
|
||||||
font-size: 23px;
|
font-weight: 600;
|
||||||
@media screen and (max-width: 768px){
|
font-size: 23px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 20rem;
|
font-size: 20rem;
|
||||||
}
|
}
|
||||||
// }
|
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-3 {
|
.p-3 {
|
||||||
|
@ -883,7 +910,8 @@ const showMounth = (date: any) => {
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #415d6f;
|
color: #415d6f;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
transform: translateX(-6vw);
|
transform: translateX(-6vw);
|
||||||
font-size: 16rem;
|
font-size: 16rem;
|
||||||
|
@ -893,7 +921,8 @@ const showMounth = (date: any) => {
|
||||||
.p-4 {
|
.p-4 {
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
transform: translateX(-6vw);
|
transform: translateX(-6vw);
|
||||||
font-size: 15rem;
|
font-size: 15rem;
|
||||||
|
@ -906,7 +935,8 @@ const showMounth = (date: any) => {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
color: #7e929f;
|
color: #7e929f;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 14rem;
|
font-size: 14rem;
|
||||||
transform: translateY(-2rem);
|
transform: translateY(-2rem);
|
||||||
margin-right: 4rem;
|
margin-right: 4rem;
|
||||||
|
@ -933,8 +963,9 @@ const showMounth = (date: any) => {
|
||||||
font-size: 23px;
|
font-size: 23px;
|
||||||
color: #2a4a5e;
|
color: #2a4a5e;
|
||||||
font-family: 'Calibri';
|
font-family: 'Calibri';
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 20rem;
|
font-size: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -942,11 +973,13 @@ const showMounth = (date: any) => {
|
||||||
width: 490px;
|
width: 490px;
|
||||||
height: 530px;
|
height: 530px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
margin-left: 5vw;
|
margin-left: 5vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
.content-title {
|
.content-title {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
|
@ -956,7 +989,8 @@ const showMounth = (date: any) => {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 21rem;
|
font-size: 21rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -967,12 +1001,14 @@ const showMounth = (date: any) => {
|
||||||
height: 530px;
|
height: 530px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
margin-left: 5vw;
|
margin-left: 5vw;
|
||||||
margin-top: 2vh;
|
margin-top: 2vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topright-title {
|
.topright-title {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
|
@ -988,10 +1024,11 @@ const showMounth = (date: any) => {
|
||||||
width: 490px;
|
width: 490px;
|
||||||
height: 432px;
|
height: 432px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
width: 90vw;
|
@media screen and (max-width: 768px) {
|
||||||
margin-left: 5vw;
|
width: 90vw;
|
||||||
margin-top: 2vh;
|
margin-left: 5vw;
|
||||||
|
margin-top: 2vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1001,10 +1038,11 @@ const showMounth = (date: any) => {
|
||||||
height: 432px;
|
height: 432px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
width: 90vw;
|
@media screen and (max-width: 768px) {
|
||||||
margin-left: 5vw;
|
width: 90vw;
|
||||||
margin-top: 2vh;
|
margin-left: 5vw;
|
||||||
|
margin-top: 2vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1041,7 +1079,8 @@ const showMounth = (date: any) => {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
font-size: 20rem;
|
font-size: 20rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
@ -1051,7 +1090,8 @@ const showMounth = (date: any) => {
|
||||||
:deep(.el-calendar) {
|
:deep(.el-calendar) {
|
||||||
--el-calendar-border: none;
|
--el-calendar-border: none;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
margin-left: 5vw;
|
margin-left: 5vw;
|
||||||
}
|
}
|
||||||
|
@ -1066,7 +1106,8 @@ const showMounth = (date: any) => {
|
||||||
width: 410px;
|
width: 410px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
font-family: "Calibri";
|
font-family: "Calibri";
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
width: 71vw;
|
width: 71vw;
|
||||||
transform: translate(-4vw);
|
transform: translate(-4vw);
|
||||||
}
|
}
|
||||||
|
@ -1078,7 +1119,8 @@ const showMounth = (date: any) => {
|
||||||
background-color: red !important;
|
background-color: red !important;
|
||||||
padding-left: 10px 75px 27px !important;
|
padding-left: 10px 75px 27px !important;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
@media screen and (max-width: 768px){
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
transform: translate(-4vw);
|
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>
|
|
@ -1,76 +1,76 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login2">
|
<div class="login2">
|
||||||
<div class="box w">
|
<div class="box w">
|
||||||
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
|
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
|
||||||
style="background-color: #1C3F56;" :with-header="false">
|
style="background-color: #1C3F56;" :with-header="false">
|
||||||
<Drawer />
|
<Drawer />
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
|
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
|
||||||
</div>
|
</div>
|
||||||
<!-- <input class="search" /> -->
|
<!-- <input class="search" /> -->
|
||||||
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
|
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
|
||||||
class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
|
class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
|
||||||
<template #prefix>
|
<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>
|
</template>
|
||||||
</el-autocomplete>
|
</el-autocomplete>
|
||||||
|
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
|
<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>
|
||||||
<div class="dropdown1">
|
<div class="bigger">
|
||||||
|
<Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
|
||||||
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
|
|
||||||
<Lang class="alert" ref="lang" />
|
|
||||||
<SearchCup ref="SearchCupDom" class="searchCup" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bigger">
|
<div class="right">
|
||||||
<Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
|
<div class="right-top">
|
||||||
</div>
|
<img src="@/assets/1x/1x/source1.png" />
|
||||||
|
<h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="right-bottom">
|
||||||
|
|
||||||
</div>
|
<el-calendar ref="calendar" v-model="dayValue">
|
||||||
<div class="right">
|
<template #header="{ date }">
|
||||||
<div class="right-top">
|
|
||||||
<img src="@/assets/1x/1x/source1.png" />
|
|
||||||
<h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="right-bottom">
|
|
||||||
|
|
||||||
<el-calendar ref="calendar" v-model="dayValue">
|
<el-button size="small" @click="selectDate('prev-month')">
|
||||||
<template #header="{ date }">
|
<img src="@/assets/1x/source11.png">
|
||||||
|
</el-button>
|
||||||
|
|
||||||
<el-button size="small" @click="selectDate('prev-month')">
|
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
||||||
<img src="@/assets/1x/source11.png">
|
<span class="month">{{ showMounth(date) }}</span>
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
|
<el-button size="small" @click="selectDate('next-month')">
|
||||||
<span class="month">{{ showMounth(date) }}</span>
|
<img src="@/assets/1x/source12.png">
|
||||||
|
</el-button>
|
||||||
|
|
||||||
<el-button size="small" @click="selectDate('next-month')">
|
</template>
|
||||||
<img src="@/assets/1x/source12.png">
|
<!-- <template #date-cell="{ data }">
|
||||||
</el-button>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<!-- <template #date-cell="{ data }">
|
|
||||||
|
|
||||||
</template> -->
|
</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">No event</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
|
@ -92,6 +92,8 @@ import { getDataFromId } from "@/api/mock/home"
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import SearchCup from "./components/SearchCup.vue";
|
import SearchCup from "./components/SearchCup.vue";
|
||||||
import Drawer from "./modelComponents/Drawer.vue";
|
import Drawer from "./modelComponents/Drawer.vue";
|
||||||
|
import Select from "./components/Select.vue";
|
||||||
|
const selectR = ref();
|
||||||
const dayValue = ref(new Date())
|
const dayValue = ref(new Date())
|
||||||
const drawer = ref(false)
|
const drawer = ref(false)
|
||||||
const handleDrawer = (done: () => void) => {
|
const handleDrawer = (done: () => void) => {
|
||||||
|
@ -433,13 +435,14 @@ const lang = ref()
|
||||||
const SearchCupDom = ref()
|
const SearchCupDom = ref()
|
||||||
const handleShowLang = (e: any) => {
|
const handleShowLang = (e: any) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
SearchCupDom.value.showLang = false;
|
selectR.value.showSelect = false
|
||||||
lang.value.showLang = !lang.value.showLang
|
lang.value.showLang = !lang.value.showLang
|
||||||
}
|
}
|
||||||
const handleShowCup = (e: any) => {
|
const handleShowCup = (e: any) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
lang.value.showLang = false;
|
lang.value.showLang = false;
|
||||||
SearchCupDom.value.showLang = !SearchCupDom.value.showLang
|
console.log(111)
|
||||||
|
selectR.value.showSelect = !selectR.value.showSelect
|
||||||
}
|
}
|
||||||
//路由传参
|
//路由传参
|
||||||
const handleclick = (item: any) => {
|
const handleclick = (item: any) => {
|
||||||
|
@ -457,8 +460,11 @@ const handleclick = (item: any) => {
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
document.documentElement.onclick = function () {
|
document.documentElement.onclick = function () {
|
||||||
|
|
||||||
if (SearchCupDom.value.showLang) {
|
// if (SearchCupDom.value.showLang) {
|
||||||
SearchCupDom.value.showLang = false
|
// SearchCupDom.value.showLang = false
|
||||||
|
// }
|
||||||
|
if (selectR.value.showSelect) {
|
||||||
|
selectR.value.showSelect = false
|
||||||
}
|
}
|
||||||
if (lang.value.showLang) {
|
if (lang.value.showLang) {
|
||||||
lang.value.showLang = false
|
lang.value.showLang = false
|
||||||
|
@ -484,12 +490,13 @@ const showMounth = (date: any) => {
|
||||||
// .el-calendar{
|
// .el-calendar{
|
||||||
// font-family: "Calibri"
|
// font-family: "Calibri"
|
||||||
// }
|
// }
|
||||||
.login2{
|
.login2 {
|
||||||
background-image: url("@/assets/1x/beijingtu.png");
|
background-image: url("@/assets/1x/beijingtu.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -817,10 +824,12 @@ const showMounth = (date: any) => {
|
||||||
:deep(.el-calendar-table td.is-selected) {
|
:deep(.el-calendar-table td.is-selected) {
|
||||||
background-color: #e8ebee;
|
background-color: #e8ebee;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-calendar-table td.is-today .el-calendar-day) {
|
:deep(.el-calendar-table td.is-today .el-calendar-day) {
|
||||||
color: black ;
|
color: black;
|
||||||
background-color: #e36466;
|
background-color: #e36466;
|
||||||
}
|
}
|
||||||
|
|
||||||
: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: 5px solid #e36466;
|
||||||
|
|
Loading…
Reference in New Issue