ipostatus弹窗
This commit is contained in:
zhuzhuxia233
+194
-152
@@ -4,7 +4,7 @@
|
||||
<div class="leftbox">
|
||||
<Item :data="data" />
|
||||
<Nav />
|
||||
|
||||
|
||||
</div>
|
||||
<div class="rightbox">
|
||||
<Header :time="datatime" />
|
||||
@@ -30,7 +30,7 @@
|
||||
<p class="yuan3"></p>
|
||||
<p class="calendar-title">{{ $t(i18n.global.t('dashboard.PublicOfferSubscription')) }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="topleft-bottom1">
|
||||
<p class="yuan6"></p>
|
||||
<p class="calendar-title">{{ $t(i18n.global.t('dashboard.PublicOfferAllotment')) }}</p>
|
||||
@@ -80,20 +80,20 @@
|
||||
<div class="pulic">
|
||||
<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>
|
||||
<p class="yuan-title">
|
||||
<span class="desmidle"> {{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
||||
<span class="persent">{{ InitialAllocationPublic }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="yuan-title3">{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||
</div>
|
||||
<div class="pulic1">
|
||||
<div class="public-left1">
|
||||
<p class="yuan2"></p>
|
||||
<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">{{ InitialAllocationInstitutional }}</span>
|
||||
</p>
|
||||
@@ -103,7 +103,7 @@
|
||||
<div class="pulic2">
|
||||
<div class="public-left2">
|
||||
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||
</div>
|
||||
@@ -117,10 +117,10 @@
|
||||
<div class="public-left">
|
||||
<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="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
|
||||
<span class="persent">{{ FinalAllocationPublic }}</span>
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="yuan-title3-1">{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||
</div>
|
||||
@@ -128,10 +128,10 @@
|
||||
<div class="public-left1">
|
||||
<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="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
|
||||
<span class="persent">{{ FinalAllocationInstitutional }}</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
||||
</div>
|
||||
@@ -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;
|
||||
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;
|
||||
});
|
||||
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();
|
||||
}
|
||||
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();
|
||||
}
|
||||
onMounted(()=>{
|
||||
//setBarRight();//假的bar接口
|
||||
setBar()//真的接口
|
||||
}
|
||||
onMounted(() => {
|
||||
setBarRight();//假的bar接口
|
||||
// setBar()//真的接口
|
||||
})
|
||||
const getdatatime = async () => {
|
||||
const res = await getHomeIpo(1)
|
||||
@@ -274,17 +274,17 @@ 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;
|
||||
endDate.value = bookCloseDate
|
||||
// console.log('$$', allotmentDate, allotmentDate)
|
||||
@@ -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: [
|
||||
{
|
||||
@@ -437,7 +437,7 @@ function init() {
|
||||
type: 'line',
|
||||
data: PublicOfferZ1.value,
|
||||
// data:PublicOfferY.value,
|
||||
|
||||
|
||||
// markLine:{
|
||||
// symbol:['none','none'],
|
||||
// label:{
|
||||
@@ -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,65 +625,80 @@ 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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,10 +1119,11 @@ 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);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user