FINI
/
FINI_UI
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ipostatus弹窗

This commit is contained in:
zhuzhuxia233 2023-04-13 23:31:04 +08:00
parent e81baabd55
commit 254c5b08c3
3 changed files with 486 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
src/views/dashBoard/index.vue
View File

@ -81,8 +81,8 @@
<div class="public-left">
<p class="yuan1"></p>
<p class="yuan-title">
<span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
<span class="persent">{{ InitialAllocationPublic }}</span>
<span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
<span class="persent">{{ InitialAllocationPublic }}</span>
</p>
</div>
@ -118,7 +118,7 @@
<p class="yuan8"></p>
<p class="yuan-title">
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
<span class="persent">{{ FinalAllocationPublic }}</span>
<span class="persent">{{ FinalAllocationPublic }}</span>
</p>
</div>
@ -129,8 +129,8 @@
<p class="yuan9"></p>
<p class="yuan-title">
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
<span class="persent">{{ FinalAllocationInstitutional }}</span>
</p>
<span class="persent">{{ FinalAllocationInstitutional }}</span>
</p>
</div>
<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 i18n from '@/locales'
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)
// console.log('getCurrentInstance()中的proxy:', proxy)
const store = ipoStore()
@ -183,8 +183,8 @@ onMounted(
() => {
const obj = JSON.parse(localStorage.getItem('itemData') as string);
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
data.value=obj;
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
data.value = obj;
getreferencedata()
getdatatime()
},
@ -217,55 +217,55 @@ const LineData = reactive({
lines: [] as lineObje[],
ids: [] as any
})
const PublicOfferX1=ref<string[]>([])
const PublicOfferY1=ref<string[]>([])
const PublicOfferZ1=ref<string[]>([])
const PublicOfferX=ref<string[]>([])
const PublicOfferY=ref<string[]>([])
const InitialAllocationPublic=ref('')
const FinalAllocationPublic=ref('')
const InitialAllocationInstitutional=ref('')
const PublicOfferX1 = ref<string[]>([])
const PublicOfferY1 = ref<string[]>([])
const PublicOfferZ1 = ref<string[]>([])
const PublicOfferX = ref<string[]>([])
const PublicOfferY = ref<string[]>([])
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 + "%";
// 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 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 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 + "%";
InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
init();
}
onMounted(()=>{
//setBarRight();//假的bar接口
setBar()//真的接口
}
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 + "%";
init();
}
onMounted(() => {
setBarRight();//假的bar接口
// setBar()//真的接口
})
const getdatatime = async () => {
const res = await getHomeIpo(1)
@ -274,15 +274,15 @@ 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;
const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;
startDate.value = bookOpenDate;
@ -296,7 +296,7 @@ const getreferencedata = async () => {
calendarAddLine()
initialpublic.value = res.poSharesInitial
ApplicationQuantity.value = res.poApplicationQuantity
subscriptionRatio.value= res.poApplicationQuantity/res.poSharesInitial
subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial
subscriptionRatio.value = subscriptionRatio.value.toFixed(1)
initialinstituational.value = res.ioSharesInitial
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
@ -305,8 +305,8 @@ const getreferencedata = async () => {
code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
finalpublic.value = res.poSharesFinal
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 + "%";
FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
quantity.value = res.overallIpoShares
init1()
init2()
@ -398,14 +398,14 @@ function init() {
y2: 200
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
// data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
data:PublicOfferX1.value
data: PublicOfferX1.value
},
yAxis: [
{
@ -457,9 +457,9 @@ function init() {
// }
},
{
name:proxy.$t('dashboard.QuantityMillion'),
type:'bar',
data:PublicOfferY1.value,
name: proxy.$t('dashboard.QuantityMillion'),
type: 'bar',
data: PublicOfferY1.value,
barWidth: '40%',
itemStyle: {
color: '#f6caae'
@ -469,9 +469,9 @@ function init() {
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize=()=>{
window.onresize = () => {
myChart.resize();
}
}
}
function init1() {
var myChart1 = echarts.init(main1.value);
@ -497,15 +497,15 @@ function init1() {
borderWidth: 5,
borderColor: '#fff'
},
cursor:'default'
cursor: 'default'
}
]
}
myChart1.setOption(option1);
//屏幕自适应
window.onresize=()=>{
window.onresize = () => {
myChart1.resize();
}
}
};
function init2() {
var myChart2 = echarts.init(main2.value);
@ -530,14 +530,14 @@ function init2() {
borderWidth: 5,
borderColor: '#fff'
},
cursor:'default'
cursor: 'default'
}
]
};
myChart2.setOption(option2);
window.onresize=()=>{
window.onresize = () => {
myChart2.resize();
}
}
}
const data = ref({
title: "FINI TESTING COMP",
@ -625,19 +625,22 @@ const showMounth = (date: any) => {
background-size: cover;
height: 1200px;
font-family: "Calibri";
@media screen and (max-width: 768px){
height: 2500px;
}
@media screen and (max-width: 768px) {
height: 2500px;
}
}
.wrap {
display: flex;
padding-top: 30px;
.leftbox {
width: 22%;
height: 100%;
position: relative;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
display: none;
}
@ -647,43 +650,55 @@ const showMounth = (date: any) => {
.rightbox {
width: 78%;
height: 100%;
@media screen and (max-width: 768px){
width: 100vw;
transform: translateY(-30rem);
}
@media screen and (max-width: 768px) {
width: 100vw;
transform: translateY(-30rem);
}
.content {
width: 100%;
// height: 100vh;
display: flex;
flex-wrap: wrap;
.persent{
color:#9FA0BF;
.persent {
color: #9FA0BF;
font-weight: 400;
font-size: 16px;
font-family: 'Calibri';
// margin-left: 14px;
}
.desmidle{
.desmidle {
margin: 0 10px 0 10px;
}
@media screen and (max-width: 768px){
@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,49 +761,55 @@ const showMounth = (date: any) => {
background-color: #2f5597;
border-radius: 50%;
}
.yuan-title{
font-size: 19px;
font-family: 'Calibri';
color: #8e9eaa;
}
.yuan-title {
font-size: 19px;
font-family: 'Calibri';
color: #8e9eaa;
}
.yuan-title3 {
margin-left: 75px;
color: #5c6063;
font-size: 18px;
font-weight: 400;
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
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;
font-size: 18px;
font-weight: 400;
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
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;
font-weight: bold;
font-size: 25px;
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
flex-direction: row-reverse;
// background-color: #20b109;
}
.yuan2 {
@ -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,22 +880,26 @@ const showMounth = (date: any) => {
color: #415d6f;
justify-content: space-between;
width: 400px;
@media screen and (max-width: 768px){
@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){
.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;
}
// }
// }
}
.p-3 {
@ -883,7 +910,8 @@ const showMounth = (date: any) => {
margin-left: 50px;
font-size: 20px;
color: #415d6f;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 80vw;
transform: translateX(-6vw);
font-size: 16rem;
@ -893,7 +921,8 @@ const showMounth = (date: any) => {
.p-4 {
margin-top: 3px;
margin-left: 50px;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 80vw;
transform: translateX(-6vw);
font-size: 15rem;
@ -906,7 +935,8 @@ const showMounth = (date: any) => {
margin-right: 20px;
color: #7e929f;
font-size: 18px;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
font-size: 14rem;
transform: translateY(-2rem);
margin-right: 4rem;
@ -933,8 +963,9 @@ const showMounth = (date: any) => {
font-size: 23px;
color: #2a4a5e;
font-family: 'Calibri';
@media screen and (max-width: 768px) {
font-size: 20rem;
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;
width: 90vw;
margin-left: 5vw;
}
// background-color: red;
.content-title {
font-size: 25px;
@ -956,7 +989,8 @@ const showMounth = (date: any) => {
margin-left: 20px;
margin-top: 15px;
cursor: default;
@media screen and (max-width: 768px){
@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){
@media screen and (max-width: 768px) {
width: 90vw;
height: 60vh;
margin-left: 5vw;
margin-top: 2vh;
}
.topright-title {
font-size: 25px;
margin: 5px;
@ -988,10 +1024,11 @@ const showMounth = (date: any) => {
width: 490px;
height: 432px;
background-color: #fff;
@media screen and (max-width: 768px){
width: 90vw;
margin-left: 5vw;
margin-top: 2vh;
@media screen and (max-width: 768px) {
width: 90vw;
margin-left: 5vw;
margin-top: 2vh;
}
}
@ -1001,10 +1038,11 @@ const showMounth = (date: any) => {
height: 432px;
background-color: #fff;
margin-left: 20px;
@media screen and (max-width: 768px){
width: 90vw;
margin-left: 5vw;
margin-top: 2vh;
@media screen and (max-width: 768px) {
width: 90vw;
margin-left: 5vw;
margin-top: 2vh;
}
}
@ -1041,7 +1079,8 @@ const showMounth = (date: any) => {
font-size: 25px;
color: #fff;
font-weight: bold;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
font-size: 20rem;
font-weight: 400;
}
@ -1051,7 +1090,8 @@ const showMounth = (date: any) => {
:deep(.el-calendar) {
--el-calendar-border: none;
cursor: default;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 80vw;
margin-left: 5vw;
}
@ -1066,7 +1106,8 @@ const showMounth = (date: any) => {
width: 410px;
margin-left: 20px;
font-family: "Calibri";
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 71vw;
transform: translate(-4vw);
}
@ -1078,7 +1119,8 @@ const showMounth = (date: any) => {
background-color: red !important;
padding-left: 10px 75px 27px !important;
cursor: default;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 80vw;
transform: translate(-4vw);

222
src/views/login/components/Select.vue Normal file
View File

@ -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>

131
src/views/login/index.vue
View File

@ -1,76 +1,76 @@
<template>
<div class="login2">
<div class="box w">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false">
<Drawer />
</el-drawer>
<div class="left">
<div class="header">
<div class="menu">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
</div>
<!-- <input class="search" /> -->
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
<template #prefix>
<img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
</template>
</el-autocomplete>
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false">
<Drawer />
</el-drawer>
<div class="left">
<div class="header">
<div class="menu">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
</div>
<!-- <input class="search" /> -->
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
<template #prefix>
<img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
</template>
</el-autocomplete>
<div class="dropdown">
<img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
<div class="dropdown">
<img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
</div>
<div class="dropdown1">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang class="alert" ref="lang" />
<Select ref="selectR" />
<!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
</div>
</div>
<div class="dropdown1">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang class="alert" ref="lang" />
<SearchCup ref="SearchCupDom" class="searchCup" />
<div class="bigger">
<Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
</div>
</div>
<div class="bigger">
<Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
</div>
<div class="right">
<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">
</div>
<div class="right">
<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">
<template #header="{ date }">
<el-calendar ref="calendar" v-model="dayValue">
<template #header="{ date }">
<el-button size="small" @click="selectDate('prev-month')">
<img src="@/assets/1x/source11.png">
</el-button>
<el-button size="small" @click="selectDate('prev-month')">
<img src="@/assets/1x/source11.png">
</el-button>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ showMounth(date) }}</span>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ showMounth(date) }}</span>
<el-button size="small" @click="selectDate('next-month')">
<img src="@/assets/1x/source12.png">
</el-button>
<el-button size="small" @click="selectDate('next-month')">
<img src="@/assets/1x/source12.png">
</el-button>
</template>
<!-- <template #date-cell="{ data }">
</template>
<!-- <template #date-cell="{ data }">
</template> -->
</el-calendar>
</div>
<div class="right-bottom1">
<Event v-if="Eventdata.length" :data="Eventdata" />
<div v-else class="right-bottom-title1">No event</div>
</el-calendar>
</div>
<div class="right-bottom1">
<Event v-if="Eventdata.length" :data="Eventdata" />
<div v-else class="right-bottom-title1">No event</div>
</div>
</div>
</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
@ -484,12 +490,13 @@ const showMounth = (date: any) => {
// .el-calendar{
// font-family: "Calibri"
// }
.login2{
.login2 {
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
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 ;
color: black;
background-color: #e36466;
}
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
// background-color: #e36466;
border: 5px solid #e36466;