日程提醒
This commit is contained in:
WindowBird
parent
40f09f5df7
commit
345610da3d
14
pages.json
14
pages.json
|
|
@ -20,6 +20,20 @@
|
|||
"navigationBarTitleText": "新建日程",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reminder-setup/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "日程提醒",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reminder-time-select/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "日程提醒",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 提醒设置 -->
|
||||
<view class="form-item clickable-item" @click="showReminderPicker = true">
|
||||
<view class="form-item clickable-item" @click="openReminderSetup">
|
||||
<view class="reminder-icon">🔔</view>
|
||||
<text class="reminder-text">{{ reminderText }}</text>
|
||||
<text class="arrow">›</text>
|
||||
|
|
@ -232,34 +232,12 @@
|
|||
</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';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
|
|
@ -274,7 +252,7 @@ const formData = ref({
|
|||
repeat: 'none',
|
||||
description: '',
|
||||
color: '#B3D9FF',
|
||||
reminder: 15 // 提前多少分钟提醒
|
||||
reminders: [] // 提醒列表，支持多个提醒
|
||||
});
|
||||
|
||||
// 显示状态
|
||||
|
|
@ -285,7 +263,6 @@ const showEndDatePicker = ref(false);
|
|||
const showDescInput = ref(false);
|
||||
const showColorPicker = ref(false);
|
||||
const showRepeatPicker = ref(false);
|
||||
const showReminderPicker = ref(false);
|
||||
|
||||
// 临时数据（用于弹窗暂存）
|
||||
const tempRepeat = ref('none');
|
||||
|
|
@ -321,16 +298,6 @@ const repeatOptions = [
|
|||
{ 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) => {
|
||||
|
|
@ -403,17 +370,38 @@ const closeEndPicker = () => {
|
|||
showEndTimePicker.value = false;
|
||||
};
|
||||
|
||||
// 格式化提醒时间文本
|
||||
const formatReminderTime = (reminder) => {
|
||||
if (reminder.type === 'custom') {
|
||||
return reminder.customText || '自定义时间';
|
||||
}
|
||||
|
||||
const options = [
|
||||
{ label: '开始时', value: 0 },
|
||||
{ label: '开始前5分钟', value: 5 },
|
||||
{ label: '开始前15分钟', value: 15 },
|
||||
{ label: '开始前30分钟', value: 30 },
|
||||
{ label: '开始前1小时', value: 60 },
|
||||
{ label: '开始前2小时', value: 120 },
|
||||
{ label: '开始前1天', value: 1440 },
|
||||
{ label: '开始前2天', value: 2880 },
|
||||
{ label: '开始前3天', value: 4320 }
|
||||
];
|
||||
|
||||
const option = options.find(opt => opt.value === reminder.minutes);
|
||||
return option ? option.label : `开始前${reminder.minutes}分钟`;
|
||||
};
|
||||
|
||||
const reminderText = computed(() => {
|
||||
if (formData.value.reminder === 0) {
|
||||
if (formData.value.reminders.length === 0) {
|
||||
return '不提醒';
|
||||
}
|
||||
if (formData.value.reminder === 1440) {
|
||||
return '开始前1天,应用弹窗提醒我';
|
||||
if (formData.value.reminders.length === 1) {
|
||||
const reminder = formData.value.reminders[0];
|
||||
const timeText = formatReminderTime(reminder);
|
||||
return `${timeText},应用弹窗提醒我`;
|
||||
}
|
||||
if (formData.value.reminder === 60) {
|
||||
return `开始前1小时,应用弹窗提醒我`;
|
||||
}
|
||||
return `开始前${formData.value.reminder}分钟,应用弹窗提醒我`;
|
||||
return `${formData.value.reminders.length}个提醒,应用弹窗提醒我`;
|
||||
});
|
||||
|
||||
const repeatText = computed(() => {
|
||||
|
|
@ -577,9 +565,14 @@ const handleConfirmRepeat = () => {
|
|||
showRepeatPicker.value = false;
|
||||
};
|
||||
|
||||
// 选择提醒
|
||||
const selectReminder = (value) => {
|
||||
formData.value.reminder = value;
|
||||
// 打开提醒设置页面
|
||||
const openReminderSetup = () => {
|
||||
// 将当前提醒列表保存到存储中
|
||||
uni.setStorageSync('reminderList', formData.value.reminders);
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/reminder-setup/index'
|
||||
});
|
||||
};
|
||||
|
||||
// 取消
|
||||
|
|
@ -609,7 +602,7 @@ const handleSave = () => {
|
|||
allDay: formData.value.allDay,
|
||||
repeat: formData.value.repeat,
|
||||
description: formData.value.description,
|
||||
reminder: formData.value.reminder
|
||||
reminders: formData.value.reminders
|
||||
};
|
||||
|
||||
// 使用全局存储传递数据，在首页的 onShow 中读取
|
||||
|
|
@ -624,6 +617,15 @@ onLoad((options) => {
|
|||
const dateStr = options?.date || '';
|
||||
initDates(dateStr);
|
||||
});
|
||||
|
||||
// 页面显示时，从提醒设置页面接收更新的提醒列表
|
||||
onShow(() => {
|
||||
// 从存储中获取更新后的提醒列表
|
||||
const savedReminders = uni.getStorageSync('reminderList');
|
||||
if (savedReminders && Array.isArray(savedReminders)) {
|
||||
formData.value.reminders = [...savedReminders];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
283
pages/reminder-setup/index.vue
Normal file
283
pages/reminder-setup/index.vue
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<view class="reminder-setup-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="handleDone">完成</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提醒列表 -->
|
||||
<scroll-view class="content-scroll" scroll-y>
|
||||
<view class="reminder-list">
|
||||
<view
|
||||
v-for="(reminder, index) in reminders"
|
||||
:key="index"
|
||||
class="reminder-item"
|
||||
>
|
||||
<view class="reminder-content" @click="editReminder(index)">
|
||||
<text class="reminder-name">提醒{{ index + 1 }}</text>
|
||||
<text class="reminder-time">{{ formatReminderTime(reminder) }}</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
<view class="reminder-actions">
|
||||
<text class="delete-btn" @click.stop="deleteReminder(index)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加提醒按钮 -->
|
||||
<view class="add-reminder-btn" @click="addReminder">
|
||||
<text class="add-icon">+</text>
|
||||
<text class="add-text">添加提醒</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
|
||||
// 提醒列表数据
|
||||
const reminders = ref([]);
|
||||
|
||||
// 格式化提醒时间文本
|
||||
const formatReminderTime = (reminder) => {
|
||||
if (reminder.type === 'custom') {
|
||||
return reminder.customText || '自定义时间';
|
||||
}
|
||||
|
||||
const options = [
|
||||
{ label: '开始时', value: 0 },
|
||||
{ label: '开始前5分钟', value: 5 },
|
||||
{ label: '开始前15分钟', value: 15 },
|
||||
{ label: '开始前30分钟', value: 30 },
|
||||
{ label: '开始前1小时', value: 60 },
|
||||
{ label: '开始前2小时', value: 120 },
|
||||
{ label: '开始前1天', value: 1440 },
|
||||
{ label: '开始前2天', value: 2880 },
|
||||
{ label: '开始前3天', value: 4320 }
|
||||
];
|
||||
|
||||
const option = options.find(opt => opt.value === reminder.minutes);
|
||||
return option ? option.label : `开始前${reminder.minutes}分钟`;
|
||||
};
|
||||
|
||||
// 添加提醒
|
||||
const addReminder = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/reminder-time-select/index?action=add&index=' + reminders.value.length
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑提醒
|
||||
const editReminder = (index) => {
|
||||
const reminder = reminders.value[index];
|
||||
const params = {
|
||||
action: 'edit',
|
||||
index: index,
|
||||
minutes: reminder.minutes || 0,
|
||||
type: reminder.type || 'preset'
|
||||
};
|
||||
|
||||
if (reminder.type === 'custom') {
|
||||
params.customText = reminder.customText || '';
|
||||
params.customMinutes = reminder.customMinutes || 0;
|
||||
}
|
||||
|
||||
const queryString = Object.keys(params)
|
||||
.map(key => `${key}=${encodeURIComponent(params[key])}`)
|
||||
.join('&');
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/reminder-time-select/index?' + queryString
|
||||
});
|
||||
};
|
||||
|
||||
// 删除提醒
|
||||
const deleteReminder = (index) => {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个提醒吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
reminders.value.splice(index, 1);
|
||||
saveReminders();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 保存提醒列表
|
||||
const saveReminders = () => {
|
||||
// 通过存储传递数据回上一页
|
||||
uni.setStorageSync('reminderList', reminders.value);
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 完成
|
||||
const handleDone = () => {
|
||||
saveReminders();
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 页面加载和显示
|
||||
onLoad((options) => {
|
||||
// 从存储中获取提醒列表
|
||||
const savedReminders = uni.getStorageSync('reminderList');
|
||||
if (savedReminders && Array.isArray(savedReminders) && savedReminders.length > 0) {
|
||||
reminders.value = [...savedReminders];
|
||||
} else {
|
||||
// 如果没有提醒列表，添加默认的提前15分钟提醒
|
||||
reminders.value = [{
|
||||
type: 'preset',
|
||||
minutes: 15
|
||||
}];
|
||||
saveReminders();
|
||||
}
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
// 从存储中获取更新的提醒（如果从时间选择页面返回）
|
||||
const updatedReminder = uni.getStorageSync('updatedReminder');
|
||||
if (updatedReminder) {
|
||||
uni.removeStorageSync('updatedReminder');
|
||||
|
||||
if (updatedReminder.action === 'add') {
|
||||
reminders.value.push(updatedReminder.reminder);
|
||||
} else if (updatedReminder.action === 'edit') {
|
||||
reminders.value[updatedReminder.index] = updatedReminder.reminder;
|
||||
}
|
||||
|
||||
// 保存更新后的提醒列表
|
||||
saveReminders();
|
||||
} else {
|
||||
// 如果没有更新的提醒，从存储中重新获取提醒列表（以防其他页面修改）
|
||||
const savedReminders = uni.getStorageSync('reminderList');
|
||||
if (savedReminders && Array.isArray(savedReminders) && savedReminders.length > 0) {
|
||||
reminders.value = [...savedReminders];
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reminder-setup-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: 20px;
|
||||
color: #333;
|
||||
padding: 8px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
.nav-btn-primary {
|
||||
color: #2885ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.reminder-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reminder-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.reminder-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.reminder-name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.reminder-time {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 20px;
|
||||
color: #ccc;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.reminder-actions {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
font-size: 16px;
|
||||
color: #ff4444;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.add-reminder-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 16px;
|
||||
color: #2885ff;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
326
pages/reminder-time-select/index.vue
Normal file
326
pages/reminder-time-select/index.vue
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
<template>
|
||||
<view class="reminder-time-select-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" style="opacity: 0; min-width: 44px;"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间选项列表 -->
|
||||
<scroll-view class="content-scroll" scroll-y>
|
||||
<view class="time-options">
|
||||
<view
|
||||
v-for="option in timeOptions"
|
||||
:key="option.value"
|
||||
class="time-option"
|
||||
:class="{ active: selectedValue === option.value && !isCustom }"
|
||||
@click="selectTime(option.value)"
|
||||
>
|
||||
<text class="time-label">{{ option.label }}</text>
|
||||
<text v-if="selectedValue === option.value && !isCustom" class="check">✓</text>
|
||||
</view>
|
||||
|
||||
<!-- 自定义时间 -->
|
||||
<view
|
||||
class="time-option custom-option"
|
||||
:class="{ active: isCustom }"
|
||||
@click="openCustomTime"
|
||||
>
|
||||
<text class="time-label">自定义时间</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 自定义时间弹窗 -->
|
||||
<view v-if="showCustomModal" class="modal-mask" @click="showCustomModal = false">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-title">自定义时间</view>
|
||||
<view class="custom-time-content">
|
||||
<view class="custom-input-group">
|
||||
<text class="input-label">提前时间（分钟）</text>
|
||||
<input
|
||||
v-model="customMinutes"
|
||||
type="number"
|
||||
class="custom-input"
|
||||
placeholder="请输入分钟数"
|
||||
/>
|
||||
</view>
|
||||
<view class="custom-input-group">
|
||||
<text class="input-label">显示文本</text>
|
||||
<input
|
||||
v-model="customText"
|
||||
class="custom-input"
|
||||
placeholder="例如：开始前2小时"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-buttons">
|
||||
<button class="modal-btn" @click="showCustomModal = false">取消</button>
|
||||
<button class="modal-btn primary" @click="confirmCustomTime">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
// 时间选项
|
||||
const timeOptions = [
|
||||
{ label: '开始时', value: 0 },
|
||||
{ label: '开始前5分钟', value: 5 },
|
||||
{ label: '开始前15分钟', value: 15 },
|
||||
{ label: '开始前30分钟', value: 30 },
|
||||
{ label: '开始前1小时', value: 60 },
|
||||
{ label: '开始前2小时', value: 120 },
|
||||
{ label: '开始前1天', value: 1440 },
|
||||
{ label: '开始前2天', value: 2880 },
|
||||
{ label: '开始前3天', value: 4320 }
|
||||
];
|
||||
|
||||
const selectedValue = ref(15);
|
||||
const isCustom = ref(false);
|
||||
const showCustomModal = ref(false);
|
||||
const customMinutes = ref('');
|
||||
const customText = ref('');
|
||||
const action = ref('add'); // add 或 edit
|
||||
const reminderIndex = ref(0);
|
||||
|
||||
// 选择时间
|
||||
const selectTime = (value) => {
|
||||
selectedValue.value = value;
|
||||
isCustom.value = false;
|
||||
// 立即保存并返回
|
||||
saveAndReturn();
|
||||
};
|
||||
|
||||
// 打开自定义时间
|
||||
const openCustomTime = () => {
|
||||
showCustomModal.value = true;
|
||||
// 如果已经是自定义，填充现有值（从 onLoad 中已设置）
|
||||
};
|
||||
|
||||
// 确认自定义时间
|
||||
const confirmCustomTime = () => {
|
||||
if (!customMinutes.value || !customText.value.trim()) {
|
||||
uni.showToast({
|
||||
title: '请填写完整信息',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
isCustom.value = true;
|
||||
selectedValue.value = parseInt(customMinutes.value);
|
||||
showCustomModal.value = false;
|
||||
// 保存并返回
|
||||
saveAndReturn();
|
||||
};
|
||||
|
||||
// 保存并返回
|
||||
const saveAndReturn = () => {
|
||||
const reminder = {
|
||||
type: isCustom.value ? 'custom' : 'preset',
|
||||
minutes: selectedValue.value
|
||||
};
|
||||
|
||||
if (isCustom.value) {
|
||||
reminder.customText = customText.value;
|
||||
reminder.customMinutes = parseInt(customMinutes.value);
|
||||
}
|
||||
|
||||
// 通过存储传递数据
|
||||
uni.setStorageSync('updatedReminder', {
|
||||
action: action.value,
|
||||
index: reminderIndex.value,
|
||||
reminder: reminder
|
||||
});
|
||||
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 页面加载
|
||||
onLoad((options) => {
|
||||
action.value = options.action || 'add';
|
||||
reminderIndex.value = parseInt(options.index || 0);
|
||||
|
||||
if (options.type === 'custom') {
|
||||
isCustom.value = true;
|
||||
customMinutes.value = options.customMinutes || '';
|
||||
customText.value = options.customText || '';
|
||||
selectedValue.value = parseInt(options.customMinutes || 0);
|
||||
} else {
|
||||
selectedValue.value = parseInt(options.minutes || 15);
|
||||
isCustom.value = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reminder-time-select-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: 20px;
|
||||
color: #333;
|
||||
padding: 8px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.time-options {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.time-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.time-option.active {
|
||||
color: #2885ff;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.time-option.active .time-label {
|
||||
color: #2885ff;
|
||||
}
|
||||
|
||||
.check {
|
||||
color: #2885ff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 20px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.custom-option.active .arrow {
|
||||
color: #2885ff;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-time-content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-input-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user