优化页面显示
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<title>工作日程工具</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
222
src/App.vue
222
src/App.vue
@@ -1,134 +1,63 @@
|
||||
<template>
|
||||
<div class="min-h-screen w-full bg-gradient-to-br from-gray-50 to-gray-100 bg-fixed">
|
||||
<div class="min-h-screen w-full bg-gradient-to-br from-gray-50 to-gray-100 bg-fixed pt-3">
|
||||
<!-- 登录模态框 -->
|
||||
<LoginModal v-if="showLoginModal" @login="handleLogin" @close="showLoginModal = false" />
|
||||
|
||||
<!-- 顶部导航 - 粘性布局 -->
|
||||
<!-- <header class="sticky top-0 z-50 text-orange-600/80 py-5 px-6 rounded-b-2xl shadow-lg w-full frosted-glass">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-xl bg-white bg-opacity-20 flex items-center justify-center shadow-md">
|
||||
<i class="fas fa-calendar-alt text-2xl"></i>
|
||||
</div>
|
||||
<h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 sm:mt-0 flex items-center">
|
||||
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
|
||||
<button
|
||||
@click="changeView('day')"
|
||||
:class="{'bg-white text-primary-600': view === 'day'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-sun mr-2"></i> 日视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('week')"
|
||||
:class="{'bg-white text-primary-600': view === 'week'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-week mr-2"></i> 周视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('month')"
|
||||
:class="{'bg-white text-primary-600': view === 'month'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-days mr-2"></i> 月视图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ml-4 flex items-center">
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
|
||||
|
||||
<!-- <header class="sticky top-0 z-50 text-orange-600/80 py-5 px-6 rounded-b-2xl shadow-lg w-full frosted-glass">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-xl bg-white bg-opacity-20 flex items-center justify-center shadow-md">
|
||||
<i class="fas fa-calendar-alt text-2xl"></i>
|
||||
</div>
|
||||
<h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 sm:mt-0 flex items-center">
|
||||
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
|
||||
<button
|
||||
@click="changeView('day')"
|
||||
:class="{'bg-white text-primary-600': view === 'day'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-sun mr-2"></i> 日视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('week')"
|
||||
:class="{'bg-white text-primary-600': view === 'week'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-week mr-2"></i> 周视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('month')"
|
||||
:class="{'bg-white text-primary-600': view === 'month'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-days mr-2"></i> 月视图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ml-4 flex items-center">
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
|
||||
|
||||
</div>
|
||||
<span class="ml-2 text-white text-sm hidden md:block">{{ user.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="ml-2 text-white text-sm hidden md:block">{{ user.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>-->
|
||||
|
||||
<div class="w-full mx-auto px-4 py-8 sm:px-6">
|
||||
<!-- 日历导航 -->
|
||||
<div data-aos="fade-up" class="flex items-center justify-between mb-8 bg-white rounded-xl p-4 shadow">
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-xl bg-white bg-opacity-20 flex items-center justify-center shadow-md">
|
||||
<i class="fas fa-calendar-alt text-2xl"></i>
|
||||
</div>
|
||||
<h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
@click="changeDate(-1)"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105 active:scale-95"
|
||||
>
|
||||
<i class="fas fa-chevron-left text-primary-600"></i>
|
||||
</button>
|
||||
|
||||
<div class="mx-4">
|
||||
<div class="text-xl font-bold text-gray-800 flex items-center">
|
||||
{{ displayDate }}
|
||||
<span class="ml-3 text-sm px-3 py-1 bg-primary-600 text-white rounded-full">当前视图</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mt-1">{{ dayjs().format('YYYY年MM月') }}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="changeDate(1)"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105 active:scale-95"
|
||||
>
|
||||
<i class="fas fa-chevron-right text-primary-600"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 sm:mt-0 flex items-center">
|
||||
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
|
||||
<button
|
||||
@click="changeView('day')"
|
||||
:class="{'bg-white text-primary-600': view === 'day'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-sun mr-2"></i> 日视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('week')"
|
||||
:class="{'bg-white text-primary-600': view === 'week'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-week mr-2"></i> 周视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('month')"
|
||||
:class="{'bg-white text-primary-600': view === 'month'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-days mr-2"></i> 月视图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ml-4 flex items-center">
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
|
||||
|
||||
</div>
|
||||
<span class="ml-2 text-white text-sm hidden md:block">{{ user.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="currentDate = dayjs().format('YYYY-MM-DD')"
|
||||
class="flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-lg hover:shadow-xl hover:transform hover:-translate-y-0.5 active:translate-y-0"
|
||||
>
|
||||
<i class="fas fa-calendar-check mr-2"></i> 返回今天
|
||||
</button>
|
||||
</div>
|
||||
</header>-->
|
||||
|
||||
<div class="w-full mx-auto px-4 sm:px-6">
|
||||
<!-- 主要内容 -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[1fr_2fr_1fr] gap-6">
|
||||
<!-- 左侧面板 -->
|
||||
<div class="lg:col-span-1" data-aos="fade-right" data-aos-delay="100">
|
||||
<CommonEvents
|
||||
:commonEvents="commonEvents"
|
||||
:user-info="user"
|
||||
@add-common-event="showCommonEventModal = true"
|
||||
@drag-start="handleDragStart"
|
||||
@drag-end="handleDragEnd"
|
||||
@@ -137,6 +66,63 @@
|
||||
|
||||
<!-- 中间面板 - 日历 -->
|
||||
<div class="lg:col-span-1" data-aos="fade-up" data-aos-delay="200">
|
||||
|
||||
<div data-aos="fade-up" class="flex items-center justify-between bg-white rounded-xl p-4 shadow">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
@click="changeDate(-1)"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105 active:scale-95"
|
||||
>
|
||||
<i class="fas fa-chevron-left text-primary-600"></i>
|
||||
</button>
|
||||
|
||||
<div class="mx-4">
|
||||
<div class="text-xl font-bold text-gray-800 flex items-center">
|
||||
{{ displayDate }}
|
||||
<span class="ml-3 text-sm px-3 py-1 bg-primary-600 text-white rounded-full">当前视图</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mt-1">{{ dayjs().format('YYYY年MM月') }}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="changeDate(1)"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105 active:scale-95"
|
||||
>
|
||||
<i class="fas fa-chevron-right text-primary-600"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex items-center">
|
||||
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
|
||||
<button
|
||||
@click="changeView('day')"
|
||||
:class="{'bg-white text-primary-600': view === 'day'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-sun mr-2"></i> 日视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('week')"
|
||||
:class="{'bg-white text-primary-600': view === 'week'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-week mr-2"></i> 周视图
|
||||
</button>
|
||||
<button
|
||||
@click="changeView('month')"
|
||||
:class="{'bg-white text-primary-600': view === 'month'}"
|
||||
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
|
||||
>
|
||||
<i class="fas fa-calendar-days mr-2"></i> 月视图
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="selectDate(dayjs().format('YYYY-MM-DD'))"
|
||||
class="flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-lg hover:shadow-xl hover:transform hover:-translate-y-0.5 active:translate-y-0"
|
||||
>
|
||||
<i class="fas fa-calendar-check mr-2"></i> 返回今天
|
||||
</button>
|
||||
</div>
|
||||
<CalendarView
|
||||
:view="view"
|
||||
:currentDate="currentDate"
|
||||
@@ -231,9 +217,9 @@ const events = ref([
|
||||
duration: 60,
|
||||
location: '会议室A',
|
||||
color: '#645eff',
|
||||
creator: { id: 'user-1', name: '李齐' },
|
||||
creator: { id: 'user-1', name: '李琦' },
|
||||
participants: [
|
||||
{ id: 'user-1', name: '李齐' },
|
||||
{ id: 'user-1', name: '李琦' },
|
||||
{ id: 'user-2', name: '张明' },
|
||||
{ id: 'user-3', name: '王芳' }
|
||||
],
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 gap-2 mt-3">
|
||||
<div class="grid grid-cols-7 mt-3">
|
||||
<div
|
||||
v-for="(day, index) in monthDays"
|
||||
:key="index"
|
||||
@@ -21,15 +21,16 @@
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDropEvent($event, day.date)"
|
||||
:class="{
|
||||
'bg-primary-50': selectedDate === day.date,
|
||||
'drag-over': isDragOverCell === day.date
|
||||
}"
|
||||
'bg-primary-50': selectedDate === day.date,
|
||||
'active-day': selectedDate === day.date,
|
||||
'drag-over': isDragOverCell === day.date
|
||||
}"
|
||||
class="calendar-cell dropzone rounded-xl border border-gray-100 p-3 cursor-pointer transition-all relative min-h-[120px] hover:shadow-md"
|
||||
>
|
||||
<!-- 日期和工作状态 -->
|
||||
<div class="flex justify-between items-start">
|
||||
<span
|
||||
class="text-lg font-semibold w-8 h-8 flex items-center justify-center rounded-full"
|
||||
class="text-lg font-semibold w-8 h-8 flex items-center justify-center rounded-full relative"
|
||||
:class="{
|
||||
'bg-primary-600 text-white': isToday(day.date),
|
||||
'text-gray-900': day.currentMonth && !isToday(day.date),
|
||||
@@ -39,6 +40,10 @@
|
||||
{{ day.date.split('-')[2] }}
|
||||
</span>
|
||||
|
||||
<!-- 农历日期 -->
|
||||
<span class="lunar-date text-xs text-gray-500 mt-1" style="position: absolute; right: 5px; bottom: 5px">
|
||||
{{ getLunarDate(day.date) }}
|
||||
</span>
|
||||
<span v-if="isHoliday(day.date)" class="work-marker day-off">休</span>
|
||||
<span v-else-if="isWorkDayOnWeekend(day.date)" class="work-marker work-day">班</span>
|
||||
</div>
|
||||
@@ -56,10 +61,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 农历日期 -->
|
||||
<div class="lunar-date text-xs text-gray-500 mt-1">
|
||||
{{ getLunarDate(day.date) }}
|
||||
</div>
|
||||
|
||||
<!-- 事件展示 -->
|
||||
<div v-if="hasEvent(day.date)" class="mt-2 text-xs max-w-full overflow-hidden">
|
||||
@@ -343,10 +344,18 @@ const handleDropEvent = (event, date, time = null) => {
|
||||
}
|
||||
|
||||
.dropzone.drag-over {
|
||||
background-color: rgba(100, 94, 255, 0.1);
|
||||
background-color: rgba(100, 94, 255, 0.3);
|
||||
box-shadow: inset 0 0 0 2px #645eff;
|
||||
}
|
||||
|
||||
.dropzone.active-day {
|
||||
background-color: rgba(100, 94, 255, 0.3);
|
||||
box-shadow: inset 0 0 0 2px #645eff;
|
||||
/* 用虚线美化边框 */
|
||||
border-bottom: 1px dashed rgba(100, 94, 255, 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.work-marker {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
|
||||
@@ -1,123 +1,85 @@
|
||||
<template>
|
||||
<div data-aos="zoom-in" data-aos-duration="500">
|
||||
<!-- 说明卡片 -->
|
||||
<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 data-aos="zoom-in" data-aos-duration="500" style="height: 90vh;">
|
||||
<!-- 用户信息卡片 -->
|
||||
<div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft overflow-hidden mb-6" data-aos="zoom-in">
|
||||
<div class="p-6">
|
||||
<ul class="space-y-4">
|
||||
<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">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">拖放快捷日程到日历</p>
|
||||
<p class="text-sm text-gray-600 mt-1">将左侧的快捷日程拖放到日历中的日期添加新日程</p>
|
||||
</div>
|
||||
</li>
|
||||
<div class="flex items-center">
|
||||
<img :src="userInfo.avatar" alt="用户头像" class="w-16 h-16 rounded-full object-cover border-2 border-indigo-100">
|
||||
<div class="ml-4">
|
||||
<h3 class="text-lg font-bold text-gray-800">{{ userInfo.name }}</h3>
|
||||
<p class="text-sm text-gray-600">{{ userInfo.team }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 class="mt-4 grid grid-cols-2 gap-4">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-phone-alt text-indigo-500 mr-2"></i>
|
||||
<span class="text-sm text-gray-700">{{ userInfo.phone }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-envelope text-indigo-500 mr-2"></i>
|
||||
<span class="text-sm text-gray-700">{{ userInfo.email }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-id-card text-indigo-500 mr-2"></i>
|
||||
<span class="text-sm text-gray-700">{{ userInfo.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <!– 说明卡片 –>-->
|
||||
<!-- <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">-->
|
||||
<!-- <p class="text-gray-700 mb-4">-->
|
||||
<!-- 常用日程可以拖拽到日历中快速创建日程，也可以点击编辑按钮修改日程内容。-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 常用日程卡片 -->
|
||||
<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="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft" 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>
|
||||
<i class="fas fa-calendar-alt mr-2"></i>
|
||||
常用日程
|
||||
<span class="ml-2 text-sm 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 hover:shadow-sm active:scale-95"
|
||||
class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
|
||||
@click="addCommonEvent"
|
||||
>
|
||||
<i class="fas fa-plus text-white text-sm"></i>
|
||||
<i class="fas fa-plus mr-2"></i>
|
||||
新增常用日程
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-5 max-h-[420px] overflow-y-auto">
|
||||
<div class="space-y-3">
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 gap-4 overflow-y-auto" style="height: 350px;">
|
||||
<div
|
||||
v-for="(event, index) in commonEvents"
|
||||
:key="'common-'+index"
|
||||
v-for="commonEvent in commonEvents"
|
||||
:key="commonEvent.id"
|
||||
class="common-event bg-white p-4 rounded-lg shadow-xs flex justify-between items-center"
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart($event, event)"
|
||||
@dragstart="handleDragStart($event, commonEvent)"
|
||||
@dragend="handleDragEnd"
|
||||
class="common-event group flex items-center px-4 py-3 rounded-xl border border-gray-100 bg-white cursor-move transition-all relative hover:shadow-md"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-1 h-full rounded-l"
|
||||
:style="{ backgroundColor: event.color }"
|
||||
></div>
|
||||
|
||||
<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>
|
||||
<h3 class="font-bold text-gray-800">{{ commonEvent.title }}</h3>
|
||||
<p class="text-sm text-gray-600">{{ commonEvent.desc }}</p>
|
||||
</div>
|
||||
<button
|
||||
class="text-gray-500 hover:text-gray-700 transition-colors duration-200"
|
||||
@click="editCommonEvent(commonEvent)"
|
||||
>
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
</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 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 hover:-translate-y-0.5 active:translate-y-0"
|
||||
>
|
||||
<i class="fas fa-plus-circle mr-2"></i>
|
||||
新增快捷日程
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,10 +89,33 @@
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
commonEvents: Array
|
||||
commonEvents: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
id: "",
|
||||
name: "",
|
||||
avatar: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
team: ""
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['add-common-event', 'drag-start', 'drag-end']);
|
||||
const emit = defineEmits(['add-common-event', 'drag-start', 'drag-end', 'edit-common-event']);
|
||||
|
||||
const addCommonEvent = () => {
|
||||
emit('add-common-event');
|
||||
};
|
||||
|
||||
const editCommonEvent = (event) => {
|
||||
emit('edit-common-event', event);
|
||||
};
|
||||
|
||||
const handleDragStart = (event, commonEvent) => {
|
||||
emit('drag-start', event, commonEvent, 'common');
|
||||
@@ -148,7 +133,7 @@ const handleDragEnd = () => {
|
||||
}
|
||||
|
||||
.common-event:hover {
|
||||
transform: translateX(5px);
|
||||
transform: translateX(-5px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft p-6 h-full"
|
||||
class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft p-6"
|
||||
style="height: 90vh;"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
:class="{'drag-over': isDragOver}"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="500"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
<div
|
||||
v-if="!selectedDate"
|
||||
class="h-full flex flex-col items-center justify-center text-center p-6"
|
||||
data-aos="fade-in"
|
||||
>
|
||||
<div
|
||||
class="bg-gradient-to-br from-gray-100 to-gray-200 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-5">
|
||||
@@ -30,7 +27,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="selectedDate" class="h-full flex flex-col">
|
||||
<div class="pb-4 border-b border-gray-100" data-aos="fade-in">
|
||||
<div class="pb-4 border-b border-gray-100">
|
||||
<div class="flex justify-between">
|
||||
<h2 class="text-xl font-bold text-gray-800">
|
||||
{{ dayjs(selectedDate).format('MM月DD日') }}
|
||||
@@ -67,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex-1 overflow-y-auto">
|
||||
<div class="mt-4 flex-1 overflow-y-auto" style="height: calc(100% - 120px);">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h3 class="font-semibold text-gray-800 flex items-center">
|
||||
<i class="fas fa-tasks text-primary-600 mr-2"></i>
|
||||
@@ -94,8 +91,6 @@
|
||||
backgroundColor: `${event.color}08`,
|
||||
borderLeftColor: event.color
|
||||
}"
|
||||
data-aos="fade-up"
|
||||
:data-aos-delay="50 * index"
|
||||
>
|
||||
<div class="flex items-start">
|
||||
<div class="flex-1">
|
||||
@@ -175,7 +170,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="py-8 text-center text-gray-500" data-aos="fade-in">
|
||||
<div v-else 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"
|
||||
>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-if="showLoginModal" class="fixed inset-0 bg-gray-900 bg-opacity-70 flex items-center justify-center z-50 px-4 py-6 backdrop-blur-md">
|
||||
<div class="fixed inset-0 bg-gray-900 bg-opacity-70 flex items-center justify-center z-50 px-4 py-6 backdrop-blur-md">
|
||||
<div class="modal-container bg-white rounded-2xl w-full max-w-md mx-auto shadow-soft-lg transition-all duration-300 transform scale-100">
|
||||
<div class="p-8">
|
||||
<div class="text-center mb-6">
|
||||
@@ -77,7 +77,7 @@ const login = () => {
|
||||
// 登录成功后
|
||||
const user = {
|
||||
id: 'user-001',
|
||||
name: '李齐',
|
||||
name: '李琦',
|
||||
avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=Bella',
|
||||
phone: '13800138000',
|
||||
email: 'liqi@example.com',
|
||||
|
||||
Reference in New Issue
Block a user