Compare commits

..

2 Commits

Author SHA1 Message Date
牛子源 4b5217b334 Merge remote-tracking branch 'origin/main' 2025-05-26 10:28:51 +08:00
牛子源 ca29c30198 dev 2025-05-26 10:28:46 +08:00
1 changed files with 25 additions and 31 deletions

View File

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