clinic-v2
/
web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: clinic-v2:4b5217b3343fb1ca77568f280b6f6945e18e898e
Branches Tags
clinic-v2:main
..
compare: clinic-v2:c9ef75f035ff5e1455bd36e2365eebeb0bf099cf
Branches Tags
clinic-v2:main

No commits in common. "4b5217b3343fb1ca77568f280b6f6945e18e898e" and "c9ef75f035ff5e1455bd36e2365eebeb0bf099cf" have entirely different histories.
4b5217b334 ... c9ef75f035

1 changed files with 31 additions and 25 deletions
Show Stats Expand all files Collapse all files

28
src/components/common/Calendar.vue
View File

@ -1,6 +1,7 @@
<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);
@ -104,7 +105,7 @@ const handleDateClick = (day: number) => {
<template> <template>
<div class="calendar-wrapper"> <div class="calendar-wrapper">
<div class="header"> <div class="calendar-wrapper-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>
@ -148,25 +149,24 @@ 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: 4px; border-radius: 6px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -175,6 +175,7 @@ const handleDateClick = (day: number) => {
} }
} }
} }
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -193,35 +194,40 @@ 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: 14px; font-size: 12px;
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: 34px; height: 25px;
width: 34px; width: 25px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 14px;
color: #666666; color: #666666;
font-style: normal; font-style: normal;
border-radius:17px; border-radius: 25px;
} }
.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;