lq/schedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

农历

Browse Source
This commit is contained in:
liqi
2025-06-10 22:04:23 +08:00
parent c0b62dfa0f
commit df13a5b6c3
11 changed files with 652 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/CommonEvents.vue
View File

@@ -1,13 +1,12 @@
<template>
<div>
<div data-aos="zoom-in" data-aos-duration="500">
<!-- 说明卡片 -->
<div class="bg-white rounded-2xl shadow-soft overflow-hidden mb-6" data-aos="zoom-in">
<div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft overflow-hidden mb-6">
<div class="bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-4">
<h2 class="text-white font-bold text-lg flex items-center">
<i class="fas fa-info-circle mr-2"></i>
操作指南
</h2>
</div>
<div class="p-6">
@@ -16,69 +15,50 @@
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs mr-3">
1
</div>
<div>
<p class="font-medium">拖放快捷日程到日历</p>
<p class="text-sm text-gray-600 mt-1">将左侧的快捷日程拖放到日历中的日期添加新日程</p>
</div>
</li>
<li class="flex">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs mr-3">
2
</div>
<div>
<p class="font-medium">拖放日程到其他日期</p>
<p class="text-sm text-gray-600 mt-1">将右侧详情中的日程拖放到日历中的其他日期进行移动</p>
</div>
</li>
<li class="flex">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs mr-3">
3
</div>
<div>
<p class="font-medium">自定义快捷日程</p>
<p class="text-sm text-gray-600 mt-1">点击底部按钮添加快捷日程模板</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 常用日程卡片 -->
<div class="bg-white rounded-2xl shadow-soft overflow-hidden" data-aos="zoom-in" data-aos-delay="100">
<div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft overflow-hidden" data-aos="zoom-in" data-aos-delay="100">
<div class="flex justify-between items-center bg-gradient-to-r from-secondary-500 to-secondary-700 px-6 py-4">
<h2 class="text-white font-bold text-lg flex items-center">
<i class="fas fa-star mr-2"></i>
常用日程
<span class="ml-2 text-sm bg-white text-secondary-700 px-2 py-1 rounded-md">可拖拽</span>
</h2>
<button
@click="$emit('add-common-event')"
class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center transition-colors hover:bg-white/30 hover:scale-110"
class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center transition-colors hover:bg-white/30 hover:scale-110 hover:shadow-sm active:scale-95"
>
<i class="fas fa-plus text-white text-sm"></i>
</button>
</div>
<div class="p-5 max-h-[420px] overflow-y-auto">
@@ -98,72 +78,51 @@
<div class="ml-4 flex-1">
<h3 class="font-medium text-gray-800">{{ event.title }}</h3>
<div class="flex items-center mt-1 text-xs text-gray-500">
<span>持续: {{ event.duration }}分钟</span>
<span class="mx-2">|</span>
<span>类型: 快捷</span>
</div>
</div>
<div class="flex">
<span class="text-gray-400 group-hover:text-primary-600 transition-colors">
<i class="fas fa-grip-lines"></i>
</span>
</div>
</div>
</div>
<div v-if="commonEvents.length === 0" class="py-8 text-center text-gray-500">
<div
class="bg-gradient-to-br from-gray-100 to-gray-200 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"
>
<i class="fas fa-inbox text-2xl text-gray-400"></i>
</div>
<p>暂无快捷日程</p>
<button
@click="$emit('add-common-event')"
class="mt-4 inline-flex items-center px-4 py-2 bg-gradient-to-r from-secondary-500 to-secondary-700 hover:from-secondary-600 hover:to-secondary-800 text-white rounded-xl transition-all hover:shadow-md"
class="mt-4 inline-flex items-center px-4 py-2 bg-gradient-to-r from-secondary-500 to-secondary-700 hover:from-secondary-600 hover:to-secondary-800 text-white rounded-xl transition-all hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
>
<i class="fas fa-plus mr-2"></i>
添加快捷日程
</button>
</div>
<div class="mt-4">
<button
@click="$emit('add-common-event')"
class="w-full flex items-center justify-center py-3 bg-gray-50 hover:bg-gray-100 rounded-xl text-secondary-600 font-medium transition-colors hover:shadow-sm"
class="w-full flex items-center justify-center py-3 bg-gray-50 hover:bg-gray-100 rounded-xl text-secondary-600 font-medium transition-colors hover:shadow-sm hover:-translate-y-0.5 active:translate-y-0"
>
<i class="fas fa-plus-circle mr-2"></i>
新增快捷日程
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
@@ -182,7 +141,6 @@ const handleDragEnd = () => {
};
</script>
<style scoped>
.common-event {
transition: all 0.3s ease;
@@ -191,5 +149,11 @@ const handleDragEnd = () => {
.common-event:hover {
transform: translateX(5px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
button {
transition: all 0.3s ease;
cursor: pointer;
}
</style>