Compare commits
2 Commits
c9ef75f035
...
4b5217b334
| Author | SHA1 | Date |
|---|---|---|
|
|
4b5217b334 | |
|
|
ca29c30198 |
|
|
@ -1,7 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
|
import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const currentMonth = ref(new Date().getMonth());
|
const currentMonth = ref(new Date().getMonth());
|
||||||
const currentYear = ref(new Date().getFullYear());
|
const currentYear = ref(new Date().getFullYear());
|
||||||
const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);
|
const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);
|
||||||
|
|
@ -105,7 +104,7 @@ const handleDateClick = (day: number) => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="calendar-wrapper">
|
<div class="calendar-wrapper">
|
||||||
<div class="calendar-wrapper-header">
|
<div class="header">
|
||||||
<span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span>
|
<span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span>
|
||||||
<span class="current">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
|
<span class="current">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
|
||||||
<span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span>
|
<span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span>
|
||||||
|
|
@ -149,24 +148,25 @@ const handleDateClick = (day: number) => {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.calendar-wrapper {
|
.calendar-wrapper {
|
||||||
&-header {
|
.header {
|
||||||
margin-bottom: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
.current{
|
.current{
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
padding: 5px 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #1677FE;
|
color: #1677FE;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
border-radius: 6px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -175,7 +175,6 @@ const handleDateClick = (day: number) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -194,40 +193,35 @@ const handleDateClick = (day: number) => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: 25px;
|
height: 34px;
|
||||||
width: 25px;
|
width: 34px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
border-radius: 25px;
|
border-radius:17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.currentDay {
|
.currentDay {
|
||||||
background: #1677FE;
|
background: #1677FE;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.otherMonth{
|
.otherMonth{
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectedDay {
|
.selectedDay {
|
||||||
background: #FFA500;
|
background: #FFA500;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue