661 lines
18 KiB
Vue
661 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<div class="diy-calendar-wrapper">
|
|||
|
|
<div class="calendar-header">
|
|||
|
|
<!-- 左箭头 -->
|
|||
|
|
<div class="left-arrow" @click="jumpMonth(-1)">
|
|||
|
|
<svg width="30" height="30">
|
|||
|
|
<path d="M 19,9 L 11,15 18,21" stroke="rgba(95,147,238,0.9)" fill="none" stroke-width="2"
|
|||
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<!-- 年月标题 -->
|
|||
|
|
<div class="center-title">{{ targetDateFormat }}</div>
|
|||
|
|
<!-- 右箭头 -->
|
|||
|
|
<div class="right-arrow" @click="jumpMonth(1)">
|
|||
|
|
<svg width="30" height="30">
|
|||
|
|
<path d="M 11,9 L 18,15 11,21" stroke="rgba(95,147,238,0.9)" fill="none" stroke-width="2"
|
|||
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 日历主体 -->
|
|||
|
|
<table class="diy-calendar-table">
|
|||
|
|
<!-- 星期栏 -->
|
|||
|
|
<thead>
|
|||
|
|
<tr class="table-header-row">
|
|||
|
|
<th v-for="day in dayNameList" :key="day.chineseShortName" class="table-header">
|
|||
|
|
{{ day.chineseFullName }}
|
|||
|
|
</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<!-- 日期部分 -->
|
|||
|
|
<tbody>
|
|||
|
|
<tr class="table-body-row" v-for="(row, index) in calendarData" :key="index">
|
|||
|
|
<td v-for="col in row" class="table-data" :data-date="col.dateNumber"
|
|||
|
|
:key="`${col.dateObj.getMonth()}-${col.dateNumber}`">
|
|||
|
|
<div class="td-content-box">
|
|||
|
|
<div class="content-border" :class="{ selected: isSelectedDate(col) }"
|
|||
|
|
@click="checkoutTargetDate(col)">
|
|||
|
|
<div class="date-number" :class="{ current: isCurrentMonth(col) }">
|
|||
|
|
{{ col.dateNumber }}
|
|||
|
|
</div>
|
|||
|
|
<!--<div class="the-tradition-chinese-calendar">
|
|||
|
|
{{ col.dateObj }}
|
|||
|
|
</div>-->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { reactive, ref, computed, watch } from "vue";
|
|||
|
|
import dayjs from "dayjs"
|
|||
|
|
const props = defineProps({
|
|||
|
|
modelValue: Date,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const emits = defineEmits(["update:modelValue"]);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 最小年份
|
|||
|
|
*/
|
|||
|
|
const MIN_YEAR = 1900;
|
|||
|
|
/**
|
|||
|
|
* 最大年份
|
|||
|
|
*/
|
|||
|
|
const MAX_YEAR = 9999;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 目标日期
|
|||
|
|
* @type {Ref<Date>}
|
|||
|
|
*/
|
|||
|
|
const targetDate = ref(props.modelValue);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 有关月度的名称列表
|
|||
|
|
*/
|
|||
|
|
const monthNameList = {
|
|||
|
|
chineseFullName: [
|
|||
|
|
"一月",
|
|||
|
|
"二月",
|
|||
|
|
"三月",
|
|||
|
|
"四月",
|
|||
|
|
"五月",
|
|||
|
|
"六月",
|
|||
|
|
"七月",
|
|||
|
|
"八月",
|
|||
|
|
"九月",
|
|||
|
|
"十月",
|
|||
|
|
"十一月",
|
|||
|
|
"十二月",
|
|||
|
|
],
|
|||
|
|
fullName: [
|
|||
|
|
"January",
|
|||
|
|
"February",
|
|||
|
|
"March",
|
|||
|
|
"April",
|
|||
|
|
"May",
|
|||
|
|
"June",
|
|||
|
|
"July",
|
|||
|
|
"August",
|
|||
|
|
"September",
|
|||
|
|
"October",
|
|||
|
|
"November",
|
|||
|
|
"December",
|
|||
|
|
],
|
|||
|
|
mmm: [
|
|||
|
|
"Jan",
|
|||
|
|
"Feb",
|
|||
|
|
"Mar",
|
|||
|
|
"Apr",
|
|||
|
|
"May",
|
|||
|
|
"Jun",
|
|||
|
|
"Jul",
|
|||
|
|
"Aug",
|
|||
|
|
"Sep",
|
|||
|
|
"Oct",
|
|||
|
|
"Nov",
|
|||
|
|
"Dec",
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* 有关周几的名称列表
|
|||
|
|
*/
|
|||
|
|
const dayNameList = [
|
|||
|
|
{
|
|||
|
|
chineseFullName: "周日",
|
|||
|
|
chineseShortName: "日",
|
|||
|
|
fullName: "Sunday",
|
|||
|
|
shortName: "Sun",
|
|||
|
|
dayNumber: 0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
chineseFullName: "周一",
|
|||
|
|
chineseShortName: "一",
|
|||
|
|
fullName: "Monday",
|
|||
|
|
shortName: "Mon",
|
|||
|
|
dayNumber: 1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
chineseFullName: "周二",
|
|||
|
|
chineseShortName: "二",
|
|||
|
|
fullName: "Tuesday",
|
|||
|
|
shortName: "Tue",
|
|||
|
|
dayNumber: 2,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
chineseFullName: "周三",
|
|||
|
|
chineseShortName: "三",
|
|||
|
|
fullName: "Wednesday",
|
|||
|
|
shortName: "Wed",
|
|||
|
|
dayNumber: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
chineseFullName: "周四",
|
|||
|
|
chineseShortName: "四",
|
|||
|
|
fullName: "Thursday",
|
|||
|
|
shortName: "Thu",
|
|||
|
|
dayNumber: 4,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
chineseFullName: "周五",
|
|||
|
|
chineseShortName: "五",
|
|||
|
|
fullName: "Friday",
|
|||
|
|
shortName: "Fri",
|
|||
|
|
dayNumber: 5,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
chineseFullName: "周六",
|
|||
|
|
chineseShortName: "六",
|
|||
|
|
fullName: "Saturday",
|
|||
|
|
shortName: "Sat",
|
|||
|
|
dayNumber: 6,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
/**
|
|||
|
|
* 今日
|
|||
|
|
*/
|
|||
|
|
const today = new Date();
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 日历的各项属性
|
|||
|
|
*/
|
|||
|
|
const calendarProps = reactive({
|
|||
|
|
target: {
|
|||
|
|
year: null,
|
|||
|
|
month: null,
|
|||
|
|
date: null,
|
|||
|
|
day: null,
|
|||
|
|
monthShortName: null,
|
|||
|
|
monthFullName: null,
|
|||
|
|
monthChineseFullName: null,
|
|||
|
|
firstDay: null,
|
|||
|
|
firstDayIndex: null,
|
|||
|
|
totalDays: null,
|
|||
|
|
},
|
|||
|
|
previous: {
|
|||
|
|
totalDays: null,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 用于展现的日历数据
|
|||
|
|
*/
|
|||
|
|
const calendarData = ref([]);
|
|||
|
|
|
|||
|
|
initCalendar();
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化日历数据
|
|||
|
|
*/
|
|||
|
|
function initCalendar() {
|
|||
|
|
setCalendarProps();
|
|||
|
|
setCalendarData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置日历的各个属性，比如当前年月日，本月一共多少天，上个月一共多少天等等
|
|||
|
|
*/
|
|||
|
|
function setCalendarProps() {
|
|||
|
|
if (!targetDate.value) {
|
|||
|
|
targetDate.value = today;
|
|||
|
|
}
|
|||
|
|
// 获取目标日期的年月日星期几数据
|
|||
|
|
calendarProps.target.year = targetDate.value.getFullYear();
|
|||
|
|
calendarProps.target.month = targetDate.value.getMonth();
|
|||
|
|
calendarProps.target.date = targetDate.value.getDate();
|
|||
|
|
calendarProps.target.day = targetDate.value.getDay();
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
calendarProps.target.year < MIN_YEAR ||
|
|||
|
|
calendarProps.target.year > MAX_YEAR
|
|||
|
|
) {
|
|||
|
|
console.error("无效的年份，请检查传入的数据是否是正常");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取到目标日期的月份【中文】名称
|
|||
|
|
let dateString;
|
|||
|
|
dateString = targetDate.value.toString().split(" ");
|
|||
|
|
calendarProps.target.monthShortName = dateString[1];
|
|||
|
|
calendarProps.target.monthFullName =
|
|||
|
|
monthNameList.fullName[calendarProps.target.month];
|
|||
|
|
calendarProps.target.monthChineseFullName =
|
|||
|
|
monthNameList.chineseFullName[calendarProps.target.month];
|
|||
|
|
// 获取目标月份的第一天是星期几，和在星期几中的索引值
|
|||
|
|
const targetMonthFirstDay = new Date(
|
|||
|
|
calendarProps.target.year,
|
|||
|
|
calendarProps.target.month,
|
|||
|
|
1
|
|||
|
|
);
|
|||
|
|
calendarProps.target.firstDay = targetMonthFirstDay.getDay();
|
|||
|
|
calendarProps.target.firstDayIndex = dayNameList.findIndex(
|
|||
|
|
(day) => day.dayNumber === calendarProps.target.firstDay
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 获取目标月份总共多少天
|
|||
|
|
const targetMonthLastDay = new Date(
|
|||
|
|
calendarProps.target.year,
|
|||
|
|
calendarProps.target.month + 1,
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
calendarProps.target.totalDays = targetMonthLastDay.getDate();
|
|||
|
|
|
|||
|
|
// 获取目标月份的上个月总共多少天
|
|||
|
|
const previousMonth = new Date(
|
|||
|
|
calendarProps.target.year,
|
|||
|
|
calendarProps.target.month,
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
calendarProps.previous.totalDays = previousMonth.getDate();
|
|||
|
|
|
|||
|
|
console.log('calendarProps:', calendarProps);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生成日历的数据
|
|||
|
|
*/
|
|||
|
|
function setCalendarData() {
|
|||
|
|
let i;
|
|||
|
|
let date = 1;
|
|||
|
|
const originData = [];
|
|||
|
|
const firstRow = [];
|
|||
|
|
// 设置第一行数据
|
|||
|
|
for (i = 0; i <= 6; i++) {
|
|||
|
|
// 设置目标月份之前月份的日期数据
|
|||
|
|
if (i < calendarProps.target.firstDayIndex) {
|
|||
|
|
const previousDate =
|
|||
|
|
calendarProps.previous.totalDays -
|
|||
|
|
calendarProps.target.firstDayIndex +
|
|||
|
|
(i + 1);
|
|||
|
|
firstRow.push({
|
|||
|
|
dateObj: new Date(
|
|||
|
|
calendarProps.target.year,
|
|||
|
|
calendarProps.target.month - 1,
|
|||
|
|
previousDate
|
|||
|
|
),
|
|||
|
|
dateNumber: previousDate,
|
|||
|
|
dateType: "previous",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 设置目标月份当月的日期数据
|
|||
|
|
firstRow.push({
|
|||
|
|
dateObj: new Date(
|
|||
|
|
calendarProps.target.year,
|
|||
|
|
calendarProps.target.month,
|
|||
|
|
date
|
|||
|
|
),
|
|||
|
|
dateNumber: date,
|
|||
|
|
dateType: "current",
|
|||
|
|
});
|
|||
|
|
date++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
originData.push(firstRow);
|
|||
|
|
// 设置后面五行的数据
|
|||
|
|
for (let j = 0; j <= 4; j++) {
|
|||
|
|
const rowData = [];
|
|||
|
|
for (let k = 0; k <= 6; k++) {
|
|||
|
|
// 设置目标月份剩下的日期数据
|
|||
|
|
if (date <= calendarProps.target.totalDays) {
|
|||
|
|
rowData.push({
|
|||
|
|
dateObj: new Date(
|
|||
|
|
calendarProps.target.year,
|
|||
|
|
calendarProps.target.month,
|
|||
|
|
date
|
|||
|
|
),
|
|||
|
|
dateNumber: date,
|
|||
|
|
dateType: "current",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 设置目标月份下个月的日期数据
|
|||
|
|
const nextDate = date - calendarProps.target.totalDays;
|
|||
|
|
rowData.push({
|
|||
|
|
dateObj: new Date(
|
|||
|
|
calendarProps.target.year,
|
|||
|
|
calendarProps.target.month + 1,
|
|||
|
|
nextDate
|
|||
|
|
),
|
|||
|
|
dateNumber: nextDate,
|
|||
|
|
dateType: "next",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
date++;
|
|||
|
|
}
|
|||
|
|
originData.push(rowData);
|
|||
|
|
}
|
|||
|
|
calendarData.value = originData;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 是否是被选中的日期
|
|||
|
|
* @param col 日期数据
|
|||
|
|
*/
|
|||
|
|
function isSelectedDate(col) {
|
|||
|
|
const colDateObj = col.dateObj;
|
|||
|
|
const colYear = colDateObj.getFullYear();
|
|||
|
|
const colMonth = colDateObj.getMonth();
|
|||
|
|
const colDate = colDateObj.getDate();
|
|||
|
|
|
|||
|
|
const targetDateYear = targetDate.value.getFullYear();
|
|||
|
|
const targetDateMonth = targetDate.value.getMonth();
|
|||
|
|
const targetDateDate = targetDate.value.getDate();
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
colYear === targetDateYear &&
|
|||
|
|
colMonth === targetDateMonth &&
|
|||
|
|
colDate === targetDateDate
|
|||
|
|
) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 是否是当前月份
|
|||
|
|
* @param col 日期数据
|
|||
|
|
*/
|
|||
|
|
function isCurrentMonth(col) {
|
|||
|
|
if (col.dateType !== "current") {
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 切换目标日期
|
|||
|
|
* @param col 日期数据
|
|||
|
|
*/
|
|||
|
|
function checkoutTargetDate(col) {
|
|||
|
|
const currentDate = col.dateObj;
|
|||
|
|
const oldDate = targetDate.value;
|
|||
|
|
// 如果本次点击的日期是当前选中的日期，则停止执行
|
|||
|
|
if (currentDate.getTime() === oldDate.getTime()) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (col.dateType === "current") {
|
|||
|
|
targetDate.value = col.dateObj;
|
|||
|
|
setCalendarProps();
|
|||
|
|
} else {
|
|||
|
|
targetDate.value = col.dateObj;
|
|||
|
|
initCalendar();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 跳转月份
|
|||
|
|
* @param flag 跳转数字标识，+1，就是增加一个月，-1就是减少一个月
|
|||
|
|
*/
|
|||
|
|
function jumpMonth(flag) {
|
|||
|
|
let targetMonthNumber = calendarProps.target.month;
|
|||
|
|
let targetYear = calendarProps.target.year;
|
|||
|
|
targetDate.value = calendarProps.target.date;
|
|||
|
|
targetMonthNumber += flag;
|
|||
|
|
console.log('targetMonthNumber', calendarProps.target.month, targetMonthNumber);
|
|||
|
|
if (targetMonthNumber > 11) {
|
|||
|
|
targetYear += 1;
|
|||
|
|
targetMonthNumber = 0;
|
|||
|
|
} else if (targetMonthNumber < 0) {
|
|||
|
|
targetYear -= 1;
|
|||
|
|
targetMonthNumber = 11;
|
|||
|
|
}
|
|||
|
|
targetDate.value = new Date(targetYear, targetMonthNumber, targetDate.value);
|
|||
|
|
initCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const targetDateFormat = computed(() => {
|
|||
|
|
const monthNumber = targetDate.value.getMonth() + 1
|
|||
|
|
let monthString = "";
|
|||
|
|
|
|||
|
|
if (monthNumber > 9) {
|
|||
|
|
monthString = monthNumber + '';
|
|||
|
|
} else {
|
|||
|
|
monthString = '0' + monthNumber;
|
|||
|
|
}
|
|||
|
|
return `${targetDate.value.getFullYear()}.${monthString}`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch(targetDate, (newVal) => {
|
|||
|
|
emits("update:modelValue", newVal);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.diy-calendar-wrapper {
|
|||
|
|
width: auto;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.calendar-header {
|
|||
|
|
height: 54px;
|
|||
|
|
padding: 13px 20px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
user-select: none;
|
|||
|
|
|
|||
|
|
.left-arrow,
|
|||
|
|
.right-arrow {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgba(215, 221, 228, 0.2);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: 1px solid rgba(95, 147, 238, 0.5);
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
border: 1px solid rgba(8, 94, 243, 0.9);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center-title {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-family: Magneto;
|
|||
|
|
font-size: 30px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.diy-calendar-table {
|
|||
|
|
width: 100%;
|
|||
|
|
user-select: none;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
|
|||
|
|
.table-header-row {
|
|||
|
|
height: 32px;
|
|||
|
|
background-color: rgba(95, 147, 238, 0.06);
|
|||
|
|
|
|||
|
|
.table-header {
|
|||
|
|
font-size: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-family: "Lucida Handwriting";
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-body-row {
|
|||
|
|
height: 75px;
|
|||
|
|
|
|||
|
|
.table-data {
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.td-content-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.content-border {
|
|||
|
|
position: relative;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all ease 0.3s;
|
|||
|
|
|
|||
|
|
.table-badge {
|
|||
|
|
width: 14px;
|
|||
|
|
height: 14px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 3px;
|
|||
|
|
top: 3px;
|
|||
|
|
background-color: rgba(20, 167, 59, 0.5);
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 10px;
|
|||
|
|
transition: all ease 0.3s;
|
|||
|
|
|
|||
|
|
&.current {
|
|||
|
|
background-color: #14a73b;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-number {
|
|||
|
|
width: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
top: 20px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
transition: all ease 0.3s;
|
|||
|
|
font-family: Magneto;
|
|||
|
|
font-weight: normal;
|
|||
|
|
// color: rgba(42, 63, 103, 0.48);
|
|||
|
|
color: #666;
|
|||
|
|
|
|||
|
|
&.current {
|
|||
|
|
// color: #435069;
|
|||
|
|
color: #cdd2d8;
|
|||
|
|
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.the-tradition-chinese-calendar {
|
|||
|
|
width: 40px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 10px;
|
|||
|
|
top: 34px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
transition: all ease 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.selected {
|
|||
|
|
//background: #023f99;
|
|||
|
|
background: radial-gradient(#2B6CFF , #0062fb );
|
|||
|
|
border-radius: 50%;
|
|||
|
|
|
|||
|
|
.table-badge {
|
|||
|
|
background: #ffffff;
|
|||
|
|
color: #023f99;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-number {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.the-tradition-chinese-calendar {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* &::before,
|
|||
|
|
&::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border: 3px solid rgba(2, 63, 153, 0.5);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
inset: -10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
// animation: pathRotate1 4s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
animation: pathRotate2 4s linear infinite;
|
|||
|
|
} */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pathRotate1 {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
clip-path: inset(0 0 95% 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
25% {
|
|||
|
|
clip-path: inset(0 0 0 95%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
clip-path: inset(95% 0 0 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
75% {
|
|||
|
|
clip-path: inset(0 95% 0 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pathRotate2 {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
clip-path: inset(95% 0 0 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
25% {
|
|||
|
|
clip-path: inset(0 95% 0 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
clip-path: inset(0 0 95% 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
75% {
|
|||
|
|
clip-path: inset(0 0 0 95%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|