1039 lines
27 KiB
Vue
1039 lines
27 KiB
Vue
<template>
|
|
<div class="login1">
|
|
<div class="wrap w">
|
|
<div class="leftbox">
|
|
<Item :data="data" />
|
|
<Nav />
|
|
<div class="langWrap">
|
|
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
|
|
<Lang ref="lang" />
|
|
</div>
|
|
</div>
|
|
<div class="rightbox">
|
|
<Header :time="datatime" />
|
|
<div class="content">
|
|
<div class="content-topleft">
|
|
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
|
|
<el-calendar ref="calendar" class="calendar">
|
|
<template #header="{ date }">
|
|
<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>
|
|
<el-button size="small" @click="selectDate('next-month')">
|
|
<img src="@/assets/1x/source12.png">
|
|
</el-button>
|
|
|
|
</template>
|
|
|
|
</el-calendar>
|
|
<div class="topleft-bottom">
|
|
<div class="topleft-bottom1">
|
|
<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>
|
|
</div>
|
|
<div class="topleft-bottom1">
|
|
<p class="yuan7"></p>
|
|
<p class="calendar-title">{{ $t(i18n.global.t('dashboard.PublicOfferMoneySettlement')) }}</p>
|
|
</div>
|
|
<div class="topleft-bottom1">
|
|
<p class="yuan5"></p>
|
|
<p class="calendar-title">{{ $t(i18n.global.t('dashboard.Listingdate')) }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="content-topright">
|
|
<p class="topright-title">{{ $t(i18n.global.t('dashboard.PublicOffer')) }}</p>
|
|
<div ref="main" style="width: 100%; height: 100%"></div>
|
|
<div class="topright-p">
|
|
<div class="p-1">
|
|
<div>
|
|
<p>{{ $t(i18n.global.t('dashboard.SubscriptionRatio')) }}</p>
|
|
<p class="p-2-2">{{ subscriptionRatio?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}x</p>
|
|
</div>
|
|
<div>
|
|
<p class="p-1-1">{{ $t(i18n.global.t('dashboard.ApplicationQuantity')) }}</p>
|
|
<p class="p-2-2">{{ ApplicationQuantity?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<p>{{ $t(i18n.global.t('dashboard.InitialShares')) }}</p>
|
|
<p>{{ $t(i18n.global.t('dashboard.FinalShares')) }}</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<Box :leftNumber=Number(initialinstituational) :rightNumber=Number(code44)></Box>
|
|
</div>
|
|
<div class="p-5">
|
|
{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ datatime }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-bottomleft">
|
|
|
|
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.InitialAllocation')) }}</p>
|
|
<div ref="main1" style="width: 100%; height: 100%"></div>
|
|
<div class="bottomleft-bouttom">
|
|
<div class="pulic">
|
|
<div class="public-left">
|
|
<p class="yuan1"></p>
|
|
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.Public')) }}</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">{{ $t(i18n.global.t('dashboard.Institutional')) }}</p>
|
|
</div>
|
|
<p class="yuan-title2">{{ initialinstituational?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="content-bottomright">
|
|
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.FinalAllocation')) }}</p>
|
|
<div ref="main2" style="width: 100%; height: 100%"></div>
|
|
<div class="bottomleft-bouttom">
|
|
<div class="pulic">
|
|
<div class="public-left">
|
|
<p class="yuan8"></p>
|
|
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.Public')) }}</p>
|
|
</div>
|
|
<p class="yuan-title3-1">{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
|
</div>
|
|
<div class="pulic1">
|
|
<div class="public-left1">
|
|
<p class="yuan9"></p>
|
|
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.Institutional')) }}</p>
|
|
</div>
|
|
<p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
|
</div>
|
|
<div class="pulic2">
|
|
<div class="public-left2">
|
|
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
|
|
</div>
|
|
<p class="yuan-title1">{{ code99?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
export default {
|
|
name: "XdashBoard"
|
|
}
|
|
</script>
|
|
<script lang="ts" setup>
|
|
import Item from './Main.vue';
|
|
import { ref, onMounted, reactive } from "vue";
|
|
import Nav from "./nav/index.vue";
|
|
import Header from "./Header/index.vue";
|
|
import * as echarts from "echarts";
|
|
import { useRoute } from 'vue-router'
|
|
import Box from './box/index.vue'
|
|
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 Lang from "@/views/login/components/Lang.vue";
|
|
const { proxy } = (getCurrentInstance() as any)
|
|
// console.log('getCurrentInstance()中的proxy:', proxy)
|
|
const store = ipoStore()
|
|
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
|
|
const main1 = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
|
|
const main2 = ref();
|
|
const route = useRoute()
|
|
const lang = ref()
|
|
var daysAndDom = [];
|
|
onMounted(
|
|
() => {
|
|
init()
|
|
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;
|
|
getreferencedata()
|
|
getdatatime()
|
|
},
|
|
)
|
|
const ApplicationQuantity = ref('')
|
|
const subscriptionRatio = ref('')
|
|
const code33 = ref('')
|
|
const initialinstituational = ref('')
|
|
const code44 = ref('')
|
|
console.log(code44.value);
|
|
const finalinstitutional = ref('')
|
|
const code66 = ref()
|
|
const finalpublic = ref('')
|
|
const code99 = ref(11)
|
|
const startDate = ref()
|
|
const endDate = ref()
|
|
const allotmentDate = ref()
|
|
const datatime = ref('')
|
|
const nowMounth = ref('')
|
|
const quantity = ref('')
|
|
const ratio = ref('')
|
|
const initialpublic = ref('')
|
|
interface lineObje {
|
|
startDate: number
|
|
endDate: number
|
|
color: string
|
|
}
|
|
const LineData = reactive({
|
|
nowMounth: "",
|
|
lines: [] as lineObje[],
|
|
ids: [] as any
|
|
})
|
|
const getdatatime = async () => {
|
|
const res = await getHomeIpo(1)
|
|
const time = (res as any).data[0].dateTime
|
|
datatime.value = moment(time).format('YYYY-MM-DD HH:mm')
|
|
}
|
|
const getreferencedata = async () => {
|
|
const ipoID = localStorage.getItem('ipoID')
|
|
console.log(ipoID);
|
|
const res = await getIpo(ipoID as string)
|
|
console.log(res);
|
|
const { bookOpenDate, bookCloseDate, allotmentDate,siInputDate,listingDate } = (res as any).data[0];
|
|
startDate.value = bookOpenDate;
|
|
endDate.value = bookCloseDate
|
|
console.log('$$', allotmentDate, allotmentDate)
|
|
console.log('$$', startDate.value, endDate.value)
|
|
calendarAddData(allotmentDate, allotmentDate, '#9bc3f1')
|
|
calendarAddData(startDate.value, endDate.value, '#65FABF')
|
|
calendarAddData(siInputDate, siInputDate, '#bd99dc')
|
|
console.log(siInputDate);
|
|
|
|
calendarAddData(listingDate, listingDate, '#38b126')
|
|
calendarAddLine()
|
|
initialpublic.value = (res as any).data[0].poSharesInitial
|
|
ApplicationQuantity.value = (res as any).data[0].poApplicationQuantity
|
|
subscriptionRatio.value = (res as any).data[0].poOversubscriptionRatio
|
|
initialinstituational.value = (res as any).data[0].ioSharesInitial
|
|
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
|
|
code44.value = (res as any).data[0].poSharesFinal
|
|
finalinstitutional.value = (res as any).data[0].ioOfferSharesFinal
|
|
code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
|
|
finalpublic.value = (res as any).data[0].poSharesFinal
|
|
code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
|
|
quantity.value = (res as any).data[0].overallIpoShares
|
|
ratio.value = (res as any).data[0].poOversubscriptionRatio
|
|
init1()
|
|
init2()
|
|
}
|
|
//传入时间
|
|
function calendarAddData(startDate: string, endDate: string, color: string) {
|
|
function toNumberTime(str: string) {
|
|
return new Date(moment(str).format("YYYY-MM-DD")).getTime() as number
|
|
}
|
|
LineData.lines.push({ startDate: toNumberTime(startDate), endDate: toNumberTime(endDate), color })
|
|
}
|
|
//添加对应下划线
|
|
function calendarAddLine() {
|
|
var calendarDom = calendar.value.$el;
|
|
var daysDom = calendarDom.querySelectorAll('.el-calendar-day')
|
|
var tag = 0;
|
|
daysAndDom = [] as { dom: object, day: String }[]
|
|
daysDom.forEach((item: any) => {
|
|
var day = item.querySelector('span').innerText;
|
|
if (day.length < 2) {
|
|
day = "0" + day
|
|
}
|
|
if (day == "01") {
|
|
tag++;
|
|
}
|
|
tag == 1 && daysAndDom.push({ dom: item, day })
|
|
})
|
|
daysDom.forEach((item: any) => {
|
|
item.style.borderBottom = "";
|
|
})
|
|
if (LineData.ids.length) {
|
|
LineData.ids.forEach((item: any) => {
|
|
// item.dom.removeChild(item.id)
|
|
var id = item.dom.querySelector("#" + item.id)
|
|
item.dom.removeChild(id);
|
|
})
|
|
LineData.ids = [];
|
|
|
|
}
|
|
const Arr = [[], [], [], [], [], [], [], [], [], [], [], []] as any
|
|
daysAndDom.forEach((item: any) => {
|
|
var str = LineData.nowMounth + item.day;
|
|
var time1 = new Date(str).getTime()//time1为在startdate到enddate之间的时间
|
|
const arrADD = LineData.lines.map((line, index) => {
|
|
if (line.startDate <= time1 && time1 <= line.endDate) {
|
|
// item.dom.style.borderBottom = `10px solid ${line.color}`;
|
|
var span = document.createElement('div')
|
|
span.style.width = '65px'
|
|
span.style.height = '10px'
|
|
span.setAttribute('id', 't' + time1)
|
|
LineData.ids.push({ dom: item.dom, id: 't' + time1 })
|
|
span.style.backgroundColor = line.color
|
|
item.dom.appendChild(span)
|
|
Arr[index].push({ dom: item.dom })
|
|
}
|
|
return {}
|
|
})
|
|
})
|
|
console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
|
|
Arr.forEach((item: any) => {
|
|
if (item.length) {
|
|
// console.log(item[0].dom.children[1], item.length)
|
|
console.log(item[0].dom, '%%')
|
|
item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
|
|
item[0].dom.children[1].style.width = "42px"
|
|
item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
|
|
item[item.length - 1].dom.children[1].style.width = "42px"//结束时间添加样式
|
|
item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
|
|
}
|
|
if (item.length == 1) {//如果长度为1，单独设置样式
|
|
item[0].dom.children[1].style.marginLeft = "11px"
|
|
item[0].dom.children[1].style.width = "42px"
|
|
item[0].dom.children[1].style.borderRadius = "10px";
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
function init() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(main.value);
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
grid: {
|
|
top: 30,
|
|
x: 70,
|
|
x2: 60,
|
|
y2: 200
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
max: 9,
|
|
min: 0,
|
|
splitNumber: 9,
|
|
boundaryGap: [0.2, 0.2],
|
|
name: 'Quantity (Million)',
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid',
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: 'Ratio(x)',
|
|
min: 0,
|
|
max: 1.8,
|
|
splitNumber: 9
|
|
}
|
|
],
|
|
|
|
|
|
series: [
|
|
{
|
|
name: 'Ratio(x)',
|
|
type: 'bar',
|
|
data: [5, 20, 36, 10, 10, 20],
|
|
barWidth: '40%',
|
|
itemStyle: {
|
|
color: '#f6caae'
|
|
},
|
|
markLine:{
|
|
symbol:['none','none'],
|
|
label:{
|
|
show:false
|
|
},
|
|
itemStyle:{
|
|
normal:{
|
|
lineStyle:{
|
|
type:'solid',
|
|
color:'#ee3238'
|
|
}
|
|
}
|
|
},
|
|
data:[{
|
|
yAxis:9
|
|
}]
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.onresize=()=>{
|
|
myChart.resize();
|
|
}
|
|
}
|
|
function init1() {
|
|
var myChart1 = echarts.init(main1.value);
|
|
const option1 = {
|
|
series: [
|
|
|
|
{
|
|
type: "pie", // type设置为饼图
|
|
color: ['#333f50', '#ed7d31'],
|
|
radius: ['65%'],
|
|
center: ['50%', '35%'],
|
|
data: [
|
|
{
|
|
name: "Public",
|
|
value: initialpublic.value
|
|
},
|
|
{
|
|
name: "Institution",
|
|
value: initialinstituational.value
|
|
}
|
|
],
|
|
itemStyle: {
|
|
borderWidth: 5,
|
|
borderColor: '#fff'
|
|
},
|
|
cursor:'default'
|
|
}
|
|
]
|
|
}
|
|
myChart1.setOption(option1);
|
|
//屏幕自适应
|
|
window.onresize=()=>{
|
|
myChart1.resize();
|
|
}
|
|
};
|
|
function init2() {
|
|
var myChart2 = echarts.init(main2.value);
|
|
const option2 = {
|
|
series: [
|
|
{
|
|
type: "pie", // type设置为饼图
|
|
color: ['#ffc000', '#2f5597',],
|
|
radius: ['65%'],
|
|
center: ['50%', '35%'],
|
|
data: [
|
|
{
|
|
name: "Public",
|
|
value: finalpublic.value
|
|
},
|
|
{
|
|
name: "Institution",
|
|
value: finalinstitutional.value
|
|
}
|
|
],
|
|
itemStyle: {
|
|
borderWidth: 5,
|
|
borderColor: '#fff'
|
|
},
|
|
cursor:'default'
|
|
}
|
|
]
|
|
};
|
|
myChart2.setOption(option2);
|
|
window.onresize=()=>{
|
|
myChart2.resize();
|
|
}
|
|
}
|
|
const data = ref({
|
|
title: "FINI TESTING COMP",
|
|
number: 10000,
|
|
HKD: "HKD 148.000",
|
|
price: "final offer Price",
|
|
time: "2023-03-31 09:00",
|
|
trading: "Commencement of trading date"
|
|
})
|
|
|
|
const calendar = ref()
|
|
const selectDate = (val: string) => {
|
|
calendar.value.selectDate(val)
|
|
|
|
setTimeout(() => {
|
|
// calendarLine(startDate.value, endDate.value, '#65FABF'),
|
|
// calendarLine(allotmentDate.value, allotmentDate.value, '#9bc3f1')
|
|
calendarAddLine()
|
|
})
|
|
}
|
|
const showMounth = (date: any) => {
|
|
function en() {
|
|
const month = date.split(" ")[2]
|
|
const year = date.split(" ")[0]
|
|
var monthObj = {
|
|
January: "01",
|
|
February: "02",
|
|
March: "03",
|
|
April: "04",
|
|
May: "05",
|
|
June: "06",
|
|
July: "07",
|
|
August: "08",
|
|
September: "09",
|
|
October: "10",
|
|
November: "11",
|
|
December: "12"
|
|
|
|
}
|
|
if (isValidKey(month, monthObj)) {
|
|
const monunNumber = monthObj[month]
|
|
|
|
LineData.nowMounth = year + "-" + monunNumber + "-"
|
|
}
|
|
function isValidKey(
|
|
key: string | number | symbol,
|
|
object: object
|
|
): key is keyof typeof object {
|
|
return key in object;
|
|
}
|
|
|
|
}
|
|
function chinese() {
|
|
let month = date.split(" ")[2]
|
|
let year = date.split(" ")[0]
|
|
if (month.length < 2) {
|
|
month = "0" + month;
|
|
}
|
|
LineData.nowMounth = year + "-" + month + "-"
|
|
|
|
}
|
|
if (store.$state.locale == 1) {
|
|
en()
|
|
} else {
|
|
chinese()
|
|
}
|
|
|
|
// const arr = date.split(" ")
|
|
// if (arr.length == 3) {
|
|
// return arr[2]
|
|
// } else if (arr.length == 4) {
|
|
// return arr[2] + " " + arr[3]
|
|
// }
|
|
return date
|
|
}
|
|
const handleShowLang=(e:any)=>{
|
|
e.stopPropagation()
|
|
lang.value.showLang = !lang.value.showLang
|
|
}
|
|
onMounted(() => {
|
|
document.documentElement.onclick = function () {
|
|
if (!lang.value.showLang) return
|
|
lang.value.showLang = false
|
|
}
|
|
})
|
|
onUnmounted(() => {
|
|
document.documentElement.onclick = null
|
|
})
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.login1 {
|
|
background-image: url("@/assets/1x/beijingtu.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
height: 1200px;
|
|
font-family: "Calibri";
|
|
@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){
|
|
display: none;
|
|
}
|
|
.langWrap{
|
|
position: absolute;
|
|
bottom: -490px;
|
|
left: 30px;
|
|
display: flex;
|
|
align-items: end;
|
|
.second {
|
|
|
|
width: 32px;
|
|
height: 36px;
|
|
margin-top: 25px;
|
|
margin-left: 5px;
|
|
margin-right: 10px;
|
|
|
|
&:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
@media screen and (max-width: 768px){
|
|
flex-direction: column;
|
|
}
|
|
.pulic {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-left: 55px;
|
|
}
|
|
|
|
.pulic1 {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-left: 35px;
|
|
}
|
|
|
|
.pulic2 {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.public-left {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
width: 80px;
|
|
justify-content: space-between;
|
|
color: #647c8b;
|
|
}
|
|
|
|
.public-left1 {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
width: 120px;
|
|
justify-content: space-between;
|
|
color: #647c8b;
|
|
}
|
|
|
|
.public-left2 {
|
|
margin-top: 10px;
|
|
color: #647c8b;
|
|
}
|
|
|
|
.institutional {
|
|
display: flex;
|
|
}
|
|
|
|
.total {
|
|
display: flex;
|
|
}
|
|
|
|
.yuan1 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #333f50;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.yuan2 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #ed7d31;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.yuan8 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #ffc000;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.yuan9 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #2f5597;
|
|
border-radius: 50%;
|
|
}
|
|
.yuan-title{
|
|
font-size: 19px;
|
|
font-family: 'Calibri';
|
|
color: #8e9eaa;
|
|
}
|
|
.yuan-title3 {
|
|
margin-left: 75px;
|
|
color: #5c6063;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
}
|
|
.yuan-title3-1 {
|
|
margin-left: 52px;
|
|
color: #5c6063;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
}
|
|
.yuan-title2 {
|
|
margin-left: 45px;
|
|
color: #5c6063;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
}
|
|
.yuan-title2-1 {
|
|
margin-left: 53px;
|
|
color: #5c6063;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
}
|
|
.yuan-title1 {
|
|
margin-left: 15px;
|
|
color: #516c7e;
|
|
font-weight: bold;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.yuan2 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #ed7d31;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.yuan3 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #65fabf;
|
|
border-radius: 50%;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.yuan4 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #ee4040;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.yuan5 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #20b109;
|
|
border-radius: 50%;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.yuan6 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #98c2f2;
|
|
border-radius: 50%;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.yuan7 {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #bf98de;
|
|
border-radius: 50%;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.topleft-bottom {
|
|
transform: translateY(-40px);
|
|
|
|
}
|
|
|
|
.bottomleft-bouttom {
|
|
transform: translateY(-150px);
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
}
|
|
|
|
.topright-p {
|
|
transform: translateY(-170%);
|
|
}
|
|
|
|
.p-1 {
|
|
display: flex;
|
|
margin-left: 50px;
|
|
font-size: 20px;
|
|
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;
|
|
}
|
|
// }
|
|
}
|
|
|
|
.p-3 {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 400px;
|
|
margin-left: 50px;
|
|
font-size: 20px;
|
|
color: #415d6f;
|
|
@media screen and (max-width: 768px){
|
|
width: 80vw;
|
|
transform: translateX(-6vw);
|
|
font-size: 16rem;
|
|
}
|
|
}
|
|
|
|
.p-4 {
|
|
margin-top: 3px;
|
|
margin-left: 50px;
|
|
@media screen and (max-width: 768px){
|
|
width: 80vw;
|
|
transform: translateX(-6vw);
|
|
font-size: 15rem;
|
|
}
|
|
}
|
|
|
|
.p-5 {
|
|
float: right;
|
|
margin-top: 10px;
|
|
margin-right: 20px;
|
|
color: #7e929f;
|
|
font-size: 18px;
|
|
@media screen and (max-width: 768px){
|
|
font-size: 14rem;
|
|
transform: translateY(-2rem);
|
|
margin-right: 4rem;
|
|
}
|
|
}
|
|
|
|
.topleft-bottom1 {
|
|
display: flex;
|
|
margin-left: 10%;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.bottomleft-title {
|
|
font-size: 25px;
|
|
margin: 5px;
|
|
color: #2e4d60;
|
|
font-weight: bold;
|
|
margin-left: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.calendar-title {
|
|
margin-left: 20px;
|
|
font-size: 23px;
|
|
color: #2a4a5e;
|
|
font-family: 'Calibri';
|
|
@media screen and (max-width: 768px) {
|
|
font-size: 20rem;
|
|
}
|
|
}
|
|
|
|
.content-topleft {
|
|
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;
|
|
margin: 5px;
|
|
color: #2e4d60;
|
|
font-weight: bold;
|
|
margin-left: 20px;
|
|
margin-top: 15px;
|
|
cursor: default;
|
|
@media screen and (max-width: 768px){
|
|
font-size: 21rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-topright {
|
|
width: 490px;
|
|
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;
|
|
color: #2e4d60;
|
|
font-weight: bold;
|
|
margin-left: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.content-bottomleft {
|
|
margin-top: 40px;
|
|
width: 490px;
|
|
height: 432px;
|
|
background-color: #fff;
|
|
@media screen and (max-width: 768px){
|
|
width: 90vw;
|
|
margin-left: 5vw;
|
|
margin-top: 2vh;
|
|
}
|
|
}
|
|
|
|
.content-bottomright {
|
|
margin-top: 40px;
|
|
width: 490px;
|
|
height: 432px;
|
|
background-color: #fff;
|
|
margin-left: 20px;
|
|
@media screen and (max-width: 768px){
|
|
width: 90vw;
|
|
margin-left: 5vw;
|
|
margin-top: 2vh;
|
|
}
|
|
}
|
|
|
|
// .month {
|
|
// font-size: 25px;
|
|
// color: #fff;
|
|
// font-weight: bold;
|
|
// }
|
|
|
|
// .calendar {
|
|
// :deep(.el-calendar-day) {
|
|
// border-bottom: 1px solid black;
|
|
// }
|
|
// }
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.content-bottomleft {
|
|
width: 45%;
|
|
height: 40%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.content-bottomright {
|
|
width: 45%;
|
|
height: 40%;
|
|
background-color: #fff;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.month {
|
|
font-size: 25px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
@media screen and (max-width: 768px){
|
|
font-size: 20rem;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-calendar) {
|
|
--el-calendar-border: none;
|
|
cursor: default;
|
|
@media screen and (max-width: 768px){
|
|
width: 80vw;
|
|
margin-left: 5vw;
|
|
}
|
|
}
|
|
|
|
:deep(.el-calendar__header) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px 20px;
|
|
border-bottom: var(--el-calendar-header-border-bottom);
|
|
background-color: #1f4055;
|
|
width: 410px;
|
|
margin-left: 20px;
|
|
font-family: "Calibri";
|
|
@media screen and (max-width: 768px){
|
|
width: 71vw;
|
|
transform: translate(-4vw);
|
|
}
|
|
}
|
|
|
|
|
|
:deep(.el-calendar-table) {
|
|
width: 450px;
|
|
background-color: red !important;
|
|
padding-left: 10px 75px 27px !important;
|
|
cursor: default;
|
|
@media screen and (max-width: 768px){
|
|
width: 80vw;
|
|
transform: translate(-4vw);
|
|
|
|
}
|
|
}
|
|
|
|
:deep(.el-calendar .el-calendar-table .el-calendar-day) {
|
|
padding: 0px;
|
|
text-align: center;
|
|
line-height: 33px;
|
|
font: 13px 'Poppins-Regular';
|
|
background-color: #fff;
|
|
height: 33px;
|
|
border: none;
|
|
cursor: default;
|
|
font-family: "Calibri";
|
|
}
|
|
|
|
:deep(.el-calendar-table) {
|
|
border: none;
|
|
text-align: center;
|
|
}
|
|
|
|
:deep(.el-calendar-table thead) {
|
|
margin-top: 20px;
|
|
font-size: 13px;
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
font-weight: bold;
|
|
background-color: rgb(255, 255, 255);
|
|
font-family: "Calibri"
|
|
}
|
|
|
|
:deep(.el-calendar-table td.is-today) {
|
|
color: black
|
|
}
|
|
</style>
|