899 lines
23 KiB
Vue
899 lines
23 KiB
Vue
<template>
|
||
<view class="add-event-page">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="custom-navbar">
|
||
<view class="navbar-content">
|
||
<text class="nav-btn" @click="handleCancel">取消</text>
|
||
<text class="nav-title">新建日程</text>
|
||
<text class="nav-btn nav-btn-primary" @click="handleSave">完成</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-scroll" scroll-y>
|
||
<!-- 标题输入 -->
|
||
<view class="form-item">
|
||
<input
|
||
v-model="formData.title"
|
||
class="title-input"
|
||
placeholder="添加标题"
|
||
placeholder-style="color: #999;"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 时间日期选择 -->
|
||
<view class="form-item time-section">
|
||
<view class="time-item" @click="openStartPicker">
|
||
<view class="time-icon">🕐</view>
|
||
<view class="time-content">
|
||
<text class="time-value">{{ startTime }}</text>
|
||
<text class="time-date">{{ startDateText }}</text>
|
||
</view>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
<text class="time-separator">→</text>
|
||
<view class="time-item" @click="openEndPicker">
|
||
<view class="time-icon">🕐</view>
|
||
<view class="time-content">
|
||
<text class="time-value">{{ endTime }}</text>
|
||
<text class="time-date">{{ endDateText }}</text>
|
||
</view>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 全天开关 -->
|
||
<view class="form-item switch-item">
|
||
<text class="label">全天</text>
|
||
<switch :checked="formData.allDay" @change="toggleAllDay" color="#2885ff" />
|
||
</view>
|
||
|
||
<!-- 重复选项 -->
|
||
<view class="form-item clickable-item" @click="openRepeatPicker">
|
||
<text class="label">{{ repeatText }}</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
|
||
<!-- 描述输入 -->
|
||
<view class="form-item clickable-item" @click="showDescInput = true">
|
||
<view class="desc-icon">📄</view>
|
||
<view class="desc-content">
|
||
<text v-if="formData.description" class="desc-text">{{ formData.description }}</text>
|
||
<text v-else class="desc-placeholder">添加描述</text>
|
||
</view>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
|
||
<!-- 日程颜色 -->
|
||
<view class="form-item clickable-item" @click="showColorPicker = true">
|
||
<view class="color-dot" :style="{ backgroundColor: formData.color }"></view>
|
||
<text class="label">日程颜色</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
|
||
<!-- 提醒设置 -->
|
||
<view class="form-item clickable-item" @click="showReminderPicker = true">
|
||
<view class="reminder-icon">🔔</view>
|
||
<text class="reminder-text">{{ reminderText }}</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 开始日期时间选择弹窗 -->
|
||
<view v-if="showStartDatePicker || showStartTimePicker" class="modal-mask" @click="closeStartPicker">
|
||
<view class="modal-content datetime-modal" @click.stop>
|
||
<view class="modal-title">选择开始时间</view>
|
||
<view class="datetime-content">
|
||
<!-- 日期选择 -->
|
||
<view class="date-section">
|
||
<text class="section-label">日期</text>
|
||
<uv-calendar
|
||
ref="startDateCalendar"
|
||
mode="single"
|
||
@confirm="handleStartDateConfirm"
|
||
/>
|
||
</view>
|
||
<!-- 时间选择 -->
|
||
<view class="time-section-picker">
|
||
<text class="section-label">时间</text>
|
||
<picker
|
||
mode="multiSelector"
|
||
:value="startPickerIndex"
|
||
:range="startPickerRange"
|
||
@change="handleStartTimeChange"
|
||
>
|
||
<view class="picker-display">
|
||
{{ formatTime(formData.startHour, formData.startMin) }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="modal-buttons">
|
||
<button class="modal-btn" @click="closeStartPicker">取消</button>
|
||
<button class="modal-btn primary" @click="closeStartPicker">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 结束日期时间选择弹窗 -->
|
||
<view v-if="showEndDatePicker || showEndTimePicker" class="modal-mask" @click="closeEndPicker">
|
||
<view class="modal-content datetime-modal" @click.stop>
|
||
<view class="modal-title">选择结束时间</view>
|
||
<view class="datetime-content">
|
||
<!-- 日期选择 -->
|
||
<view class="date-section">
|
||
<text class="section-label">日期</text>
|
||
<uv-calendar
|
||
ref="endDateCalendar"
|
||
mode="single"
|
||
@confirm="handleEndDateConfirm"
|
||
/>
|
||
</view>
|
||
<!-- 时间选择 -->
|
||
<view class="time-section-picker">
|
||
<text class="section-label">时间</text>
|
||
<picker
|
||
mode="multiSelector"
|
||
:value="endPickerIndex"
|
||
:range="endPickerRange"
|
||
@change="handleEndTimeChange"
|
||
>
|
||
<view class="picker-display">
|
||
{{ formatTime(formData.endHour, formData.endMin) }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="modal-buttons">
|
||
<button class="modal-btn" @click="closeEndPicker">取消</button>
|
||
<button class="modal-btn primary" @click="closeEndPicker">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 描述输入弹窗 -->
|
||
<view v-if="showDescInput" class="modal-mask" @click="showDescInput = false">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-title">添加描述</view>
|
||
<textarea
|
||
v-model="formData.description"
|
||
class="desc-textarea"
|
||
placeholder="请输入描述"
|
||
auto-height
|
||
/>
|
||
<view class="modal-buttons">
|
||
<button class="modal-btn" @click="showDescInput = false">取消</button>
|
||
<button class="modal-btn primary" @click="showDescInput = false">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 颜色选择弹窗 -->
|
||
<view v-if="showColorPicker" class="modal-mask" @click="showColorPicker = false">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-title">选择颜色</view>
|
||
<view class="color-options">
|
||
<view
|
||
v-for="color in colorOptions"
|
||
:key="color"
|
||
class="color-option"
|
||
:class="{ active: formData.color === color }"
|
||
:style="{ backgroundColor: color }"
|
||
@click="selectColor(color)"
|
||
></view>
|
||
</view>
|
||
<view class="modal-buttons">
|
||
<button class="modal-btn" @click="showColorPicker = false">取消</button>
|
||
<button class="modal-btn primary" @click="showColorPicker = false">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 重复选择弹窗 -->
|
||
<view v-if="showRepeatPicker" class="modal-mask" @click="handleCancelRepeat">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-title">重复设置</view>
|
||
<view class="repeat-options">
|
||
<view
|
||
v-for="item in repeatOptions"
|
||
:key="item.value"
|
||
class="repeat-option"
|
||
:class="{ active: tempRepeat === item.value }"
|
||
@click="tempRepeat = item.value"
|
||
>
|
||
<text>{{ item.label }}</text>
|
||
<text v-if="tempRepeat === item.value" class="check">✓</text>
|
||
</view>
|
||
</view>
|
||
<view class="modal-buttons">
|
||
<button class="modal-btn" @click="handleCancelRepeat">取消</button>
|
||
<button class="modal-btn primary" @click="handleConfirmRepeat">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提醒选择弹窗 -->
|
||
<view v-if="showReminderPicker" class="modal-mask" @click="showReminderPicker = false">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-title">提醒设置</view>
|
||
<view class="reminder-options">
|
||
<view
|
||
v-for="item in reminderOptions"
|
||
:key="item.value"
|
||
class="reminder-option"
|
||
:class="{ active: formData.reminder === item.value }"
|
||
@click="selectReminder(item.value)"
|
||
>
|
||
<text>{{ item.label }}</text>
|
||
<text v-if="formData.reminder === item.value" class="check">✓</text>
|
||
</view>
|
||
</view>
|
||
<view class="modal-buttons">
|
||
<button class="modal-btn" @click="showReminderPicker = false">取消</button>
|
||
<button class="modal-btn primary" @click="showReminderPicker = false">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
title: '',
|
||
startDate: '',
|
||
startHour: 16,
|
||
startMin: 0,
|
||
endDate: '',
|
||
endHour: 17,
|
||
endMin: 0,
|
||
allDay: false,
|
||
repeat: 'none',
|
||
description: '',
|
||
color: '#B3D9FF',
|
||
reminder: 15 // 提前多少分钟提醒
|
||
});
|
||
|
||
// 显示状态
|
||
const showStartTimePicker = ref(false);
|
||
const showStartDatePicker = ref(false);
|
||
const showEndTimePicker = ref(false);
|
||
const showEndDatePicker = ref(false);
|
||
const showDescInput = ref(false);
|
||
const showColorPicker = ref(false);
|
||
const showRepeatPicker = ref(false);
|
||
const showReminderPicker = ref(false);
|
||
|
||
// 临时数据（用于弹窗暂存）
|
||
const tempRepeat = ref('none');
|
||
|
||
// 时间选择器相关
|
||
const hourOptions = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0') + '时');
|
||
const minOptions = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '分');
|
||
|
||
const startPickerRange = ref([hourOptions, minOptions]);
|
||
const startPickerIndex = ref([16, 0]);
|
||
const endPickerRange = ref([hourOptions, minOptions]);
|
||
const endPickerIndex = ref([17, 0]);
|
||
|
||
const startDateCalendar = ref(null);
|
||
const endDateCalendar = ref(null);
|
||
|
||
// 颜色选项
|
||
const colorOptions = [
|
||
'#B3D9FF', // 更淡的蓝色
|
||
'#FFE8CC', // 更淡的橙色
|
||
'#FFD6D9', // 更淡的红色
|
||
'#D4F3E8', // 更淡的绿色
|
||
'#FFF4CC', // 更淡的黄色
|
||
'#E6E5FC', // 更淡的紫色
|
||
];
|
||
|
||
// 重复选项
|
||
const repeatOptions = [
|
||
{ label: '不重复', value: 'none' },
|
||
{ label: '每天', value: 'daily' },
|
||
{ label: '每周', value: 'weekly' },
|
||
{ label: '每月', value: 'monthly' },
|
||
{ label: '每年', value: 'yearly' }
|
||
];
|
||
|
||
// 提醒选项
|
||
const reminderOptions = [
|
||
{ label: '不提醒', value: 0 },
|
||
{ label: '开始时', value: 0 },
|
||
{ label: '开始前5分钟', value: 5 },
|
||
{ label: '开始前15分钟', value: 15 },
|
||
{ label: '开始前30分钟', value: 30 },
|
||
{ label: '开始前1小时', value: 60 },
|
||
{ label: '开始前1天', value: 1440 }
|
||
];
|
||
|
||
// 格式化时间
|
||
const formatTime = (hour, min) => {
|
||
const h = String(hour).padStart(2, '0');
|
||
const m = String(min).padStart(2, '0');
|
||
return `${h}:${m}`;
|
||
};
|
||
|
||
// 格式化日期文本
|
||
const formatDateText = (dateStr) => {
|
||
if (!dateStr) return '';
|
||
const date = new Date(dateStr);
|
||
const month = date.getMonth() + 1;
|
||
const day = date.getDate();
|
||
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
const weekday = weekdays[date.getDay()];
|
||
return `${month}月${day}日 ${weekday}`;
|
||
};
|
||
|
||
// 计算属性
|
||
const startTime = computed(() => {
|
||
return formData.value.allDay ? '全天' : formatTime(formData.value.startHour, formData.value.startMin);
|
||
});
|
||
|
||
const endTime = computed(() => {
|
||
return formData.value.allDay ? '' : formatTime(formData.value.endHour, formData.value.endMin);
|
||
});
|
||
|
||
const startDateText = computed(() => {
|
||
return formatDateText(formData.value.startDate);
|
||
});
|
||
|
||
const endDateText = computed(() => {
|
||
return formatDateText(formData.value.endDate || formData.value.startDate);
|
||
});
|
||
|
||
// 打开开始时间选择器
|
||
const openStartPicker = () => {
|
||
if (formData.value.allDay) {
|
||
showStartDatePicker.value = true;
|
||
} else {
|
||
showStartDatePicker.value = true;
|
||
showStartTimePicker.value = true;
|
||
}
|
||
// 更新选择器索引
|
||
startPickerIndex.value = [formData.value.startHour, formData.value.startMin];
|
||
};
|
||
|
||
// 打开结束时间选择器
|
||
const openEndPicker = () => {
|
||
if (formData.value.allDay) {
|
||
showEndDatePicker.value = true;
|
||
} else {
|
||
showEndDatePicker.value = true;
|
||
showEndTimePicker.value = true;
|
||
}
|
||
// 更新选择器索引
|
||
endPickerIndex.value = [formData.value.endHour, formData.value.endMin];
|
||
};
|
||
|
||
// 关闭开始选择器
|
||
const closeStartPicker = () => {
|
||
showStartDatePicker.value = false;
|
||
showStartTimePicker.value = false;
|
||
};
|
||
|
||
// 关闭结束选择器
|
||
const closeEndPicker = () => {
|
||
showEndDatePicker.value = false;
|
||
showEndTimePicker.value = false;
|
||
};
|
||
|
||
const reminderText = computed(() => {
|
||
if (formData.value.reminder === 0) {
|
||
return '不提醒';
|
||
}
|
||
if (formData.value.reminder === 1440) {
|
||
return '开始前1天,应用弹窗提醒我';
|
||
}
|
||
if (formData.value.reminder === 60) {
|
||
return `开始前1小时,应用弹窗提醒我`;
|
||
}
|
||
return `开始前${formData.value.reminder}分钟,应用弹窗提醒我`;
|
||
});
|
||
|
||
const repeatText = computed(() => {
|
||
const option = repeatOptions.find(opt => opt.value === formData.value.repeat);
|
||
return option ? option.label : '不重复';
|
||
});
|
||
|
||
// 初始化日期
|
||
const initDates = (dateStr = '') => {
|
||
// 如果没有传入日期参数，使用今天
|
||
if (!dateStr) {
|
||
const today = new Date();
|
||
dateStr = today.toISOString().slice(0, 10);
|
||
}
|
||
|
||
formData.value.startDate = dateStr;
|
||
formData.value.endDate = dateStr;
|
||
|
||
// 设置默认时间为当前时间到一小时后（如果不是全天）
|
||
if (!formData.value.allDay) {
|
||
const today = new Date();
|
||
formData.value.startHour = today.getHours();
|
||
formData.value.startMin = Math.ceil(today.getMinutes() / 5) * 5; // 向上取整到5的倍数
|
||
const endTime = new Date(today);
|
||
endTime.setHours(today.getHours() + 1);
|
||
formData.value.endHour = endTime.getHours();
|
||
formData.value.endMin = endTime.getMinutes();
|
||
startPickerIndex.value = [formData.value.startHour, formData.value.startMin];
|
||
endPickerIndex.value = [formData.value.endHour, formData.value.endMin];
|
||
}
|
||
};
|
||
|
||
// 处理开始日期确认
|
||
const handleStartDateConfirm = (e) => {
|
||
const formattedDate = formatDateToYYYYMMDD(e);
|
||
if (formattedDate) {
|
||
formData.value.startDate = formattedDate;
|
||
// 如果结束日期未设置或早于开始日期，更新结束日期
|
||
if (!formData.value.endDate || formData.value.endDate < formData.value.startDate) {
|
||
formData.value.endDate = formData.value.startDate;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 处理开始时间变化
|
||
const handleStartTimeChange = (e) => {
|
||
const [hourIndex, minIndex] = e.detail.value;
|
||
formData.value.startHour = hourIndex;
|
||
formData.value.startMin = minIndex;
|
||
startPickerIndex.value = [hourIndex, minIndex];
|
||
|
||
// 如果结束时间早于开始时间，自动调整结束时间
|
||
if (formData.value.endDate === formData.value.startDate) {
|
||
const startTotalMin = formData.value.startHour * 60 + formData.value.startMin;
|
||
const endTotalMin = formData.value.endHour * 60 + formData.value.endMin;
|
||
if (endTotalMin <= startTotalMin) {
|
||
const newEndTotalMin = startTotalMin + 60; // 默认延长1小时
|
||
formData.value.endHour = Math.floor(newEndTotalMin / 60) % 24;
|
||
formData.value.endMin = newEndTotalMin % 60;
|
||
endPickerIndex.value = [formData.value.endHour, formData.value.endMin];
|
||
}
|
||
}
|
||
};
|
||
|
||
// 处理结束日期确认
|
||
const handleEndDateConfirm = (e) => {
|
||
const formattedDate = formatDateToYYYYMMDD(e);
|
||
if (formattedDate) {
|
||
formData.value.endDate = formattedDate;
|
||
}
|
||
};
|
||
|
||
// 处理结束时间变化
|
||
const handleEndTimeChange = (e) => {
|
||
const [hourIndex, minIndex] = e.detail.value;
|
||
formData.value.endHour = hourIndex;
|
||
formData.value.endMin = minIndex;
|
||
endPickerIndex.value = [hourIndex, minIndex];
|
||
};
|
||
|
||
// 格式化日期为 YYYY-MM-DD（复用首页的逻辑）
|
||
function formatDateToYYYYMMDD(dateInput) {
|
||
if (!dateInput) return '';
|
||
let dateStr = '';
|
||
if (typeof dateInput === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
|
||
return dateInput;
|
||
}
|
||
if (typeof dateInput === 'string') {
|
||
dateStr = dateInput;
|
||
} else if (dateInput?.date) {
|
||
dateStr = dateInput.date;
|
||
} else if (dateInput?.value) {
|
||
dateStr = dateInput.value;
|
||
} else if (Array.isArray(dateInput) && dateInput.length > 0) {
|
||
dateStr = typeof dateInput[0] === 'string' ? dateInput[0] : (dateInput[0]?.date || dateInput[0]?.value || '');
|
||
}
|
||
if (!dateStr) return '';
|
||
const date = new Date(dateStr);
|
||
if (!isNaN(date.getTime())) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
if (/^\d{4}-\d{2}-\d{2}/.test(dateStr)) {
|
||
return dateStr.slice(0, 10);
|
||
}
|
||
return '';
|
||
}
|
||
|
||
// 切换全天
|
||
const toggleAllDay = () => {
|
||
formData.value.allDay = !formData.value.allDay;
|
||
if (formData.value.allDay) {
|
||
formData.value.startHour = 0;
|
||
formData.value.startMin = 0;
|
||
formData.value.endHour = 23;
|
||
formData.value.endMin = 59;
|
||
startPickerIndex.value = [0, 0];
|
||
endPickerIndex.value = [23, 59];
|
||
}
|
||
};
|
||
|
||
// 选择颜色
|
||
const selectColor = (color) => {
|
||
formData.value.color = color;
|
||
};
|
||
|
||
// 打开重复选择弹窗
|
||
const openRepeatPicker = () => {
|
||
// 打开弹窗时，将当前值复制到临时变量
|
||
tempRepeat.value = formData.value.repeat;
|
||
showRepeatPicker.value = true;
|
||
};
|
||
|
||
// 取消重复选择
|
||
const handleCancelRepeat = () => {
|
||
// 恢复原始值
|
||
tempRepeat.value = formData.value.repeat;
|
||
showRepeatPicker.value = false;
|
||
};
|
||
|
||
// 确认重复选择
|
||
const handleConfirmRepeat = () => {
|
||
// 将临时变量的值更新到表单数据
|
||
formData.value.repeat = tempRepeat.value;
|
||
showRepeatPicker.value = false;
|
||
};
|
||
|
||
// 选择提醒
|
||
const selectReminder = (value) => {
|
||
formData.value.reminder = value;
|
||
};
|
||
|
||
// 取消
|
||
const handleCancel = () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
// 保存
|
||
const handleSave = () => {
|
||
if (!formData.value.title.trim()) {
|
||
uni.showToast({
|
||
title: '请输入标题',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 准备返回的数据
|
||
const eventData = {
|
||
title: formData.value.title,
|
||
date: formData.value.startDate,
|
||
startHour: formData.value.startHour,
|
||
startMin: formData.value.startMin,
|
||
endHour: formData.value.endHour,
|
||
endMin: formData.value.endMin,
|
||
color: formData.value.color,
|
||
allDay: formData.value.allDay,
|
||
repeat: formData.value.repeat,
|
||
description: formData.value.description,
|
||
reminder: formData.value.reminder
|
||
};
|
||
|
||
// 使用全局存储传递数据，在首页的 onShow 中读取
|
||
uni.setStorageSync('newEventData', eventData);
|
||
|
||
// 返回上一页
|
||
uni.navigateBack();
|
||
};
|
||
|
||
// 页面加载时接收参数
|
||
onLoad((options) => {
|
||
const dateStr = options?.date || '';
|
||
initDates(dateStr);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add-event-page {
|
||
min-height: 100vh;
|
||
background: #fff;
|
||
}
|
||
|
||
.custom-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
padding-top: var(--status-bar-height, 0);
|
||
}
|
||
|
||
.navbar-content {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.nav-btn {
|
||
font-size: 16px;
|
||
color: #333;
|
||
padding: 8px;
|
||
}
|
||
|
||
.nav-btn-primary {
|
||
color: #2885ff;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.content-scroll {
|
||
margin-top: calc(var(--status-bar-height, 0) + 45px);
|
||
height: calc(100vh - var(--status-bar-height, 0) - 45px);
|
||
}
|
||
|
||
.form-item {
|
||
padding: 16px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-input {
|
||
width: 100%;
|
||
font-size: 18px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.time-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px 16px;
|
||
}
|
||
|
||
.time-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.time-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.time-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.time-value {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.time-date {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.time-separator {
|
||
margin: 0 16px;
|
||
font-size: 20px;
|
||
color: #ccc;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 20px;
|
||
color: #ccc;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.switch-item {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.label {
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.clickable-item {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.desc-icon {
|
||
font-size: 20px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.desc-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.desc-text {
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.desc-placeholder {
|
||
font-size: 16px;
|
||
color: #999;
|
||
}
|
||
|
||
.color-dot {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.reminder-icon {
|
||
font-size: 20px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.reminder-text {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.modal-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
width: 80%;
|
||
max-width: 500px;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.desc-textarea {
|
||
width: 100%;
|
||
min-height: 120px;
|
||
padding: 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.color-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.color-option {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
border: 3px solid transparent;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.color-option.active {
|
||
border-color: #2885ff;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.repeat-options,
|
||
.reminder-options {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.repeat-option,
|
||
.reminder-option {
|
||
padding: 16px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.repeat-option:last-child,
|
||
.reminder-option:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.repeat-option.active,
|
||
.reminder-option.active {
|
||
color: #2885ff;
|
||
}
|
||
|
||
.check {
|
||
color: #2885ff;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.modal-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.modal-btn {
|
||
padding: 10px 24px;
|
||
border: none;
|
||
background: #f5f5f5;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-btn.primary {
|
||
background: #2885ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.datetime-modal {
|
||
max-width: 90%;
|
||
}
|
||
|
||
.datetime-content {
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.date-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-label {
|
||
display: block;
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.time-section-picker {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.picker-display {
|
||
padding: 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
</style>
|
||
|