workApp/pages/workspace/index.vue

<template>
	<view class="page_workspace"
		:style="{ paddingTop: statusBarHeight + 160 + 'rpx', paddingBottom: safeAreaBottom + 150 + 'rpx' }">
		<page-header></page-header>
		<scroll-view scroll-y class="workspace_content">
			<!-- 系统列表 -->
			<view class="system_list">
				<template v-if="largeCard?.visible">
					<view class="system_grid_with_large">
						<view class="large_card" @click="handleSystemClick(largeCard)">
							<image :src="largeCard.image" class="large_icon" mode="aspectFit"></image>
							<text class="large_name">{{ largeCard.name }}</text>
						</view>

						<view class="right_top_grid">
							<view v-for="(item, index) in rightTopCards" :key="index" class="small_item"
								@click="handleSystemClick(item)">
								<image :src="item.image" class="small_icon" mode="aspectFit"></image>
								<text class="small_name">{{ item.name }}</text>
							</view>
						</view>
					</view>

					<view class="bottom_grid">
						<view v-for="(item, index) in bottomCards" :key="index" class="small_item"
							@click="handleSystemClick(item)">
							<image :src="item.image" class="small_icon" mode="aspectFit"></image>
							<text class="small_name">{{ item.name }}</text>
						</view>
					</view>
				</template>

				<template v-else>
					<view class="system_grid_full">
						<view v-for="(item, index) in allSmallCards" :key="index" class="small_item"
							@click="handleSystemClick(item)">
							<image :src="item.image" class="small_icon" mode="aspectFit"></image>
							<text class="small_name">{{ item.name }}</text>
						</view>
					</view>
				</template>
			</view>
			<!-- 校历安排 -->
			<view class="calendar_section">
				<view class="calendar_header">
					<text class="section_title">校历安排</text>
					<text class="view_schedule" @click="handleViewSchedule">查看日程</text>
				</view>
				<!-- 日历工具栏 -->
				<view class="calendar_toolbar">
					<view class="year_month_select">
						<picker :value="yearIndex" :range="yearList" @change="handleYearChange" class="select_item">
							<view class="select_content">
								<text class="select_text">{{ yearList[yearIndex] }}</text>
								<uni-icons type="down" size="20" color="#999999"></uni-icons>
							</view>
						</picker>
						<picker :value="monthIndex" :range="monthList" @change="handleMonthChange" class="select_item">
							<view class="select_content">
								<text class="select_text">{{ monthList[monthIndex] }}</text>
								<uni-icons type="down" size="20" color="#999999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="week_nav">
						<view class="nav_btn" @click="handlePrevWeek">
							<text class="nav_text">上一周</text>
						</view>
						<view class="nav_btn" @click="handleNextWeek">
							<text class="nav_text">下一周</text>
						</view>
					</view>
				</view>
				<!-- 日历网格 -->
				<view v-if="isLoading" class="loading-container">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>
				<view v-else class="calendar_grid">
					<view class="calendar_weekday">
						<text v-for="day in weekdays" :key="day" class="weekday_text">{{ day }}</text>
					</view>
					<view class="calendar_days">
						<view v-for="day in calendarDays" :key="day.fullDate" class="day_item"
							:class="{ active: day.isActive, weekend: day.isWeekend, today: day.isToday }"
							@click="handleDayClick(day)">
							<text class="day_text">{{ day.date }}</text>
							<view class="schedule_dot" :class="{ visible: day.hasSchedule }"></view>
						</view>
					</view>
				</view>
				<!-- 日程列表 -->
				<view class="schedule_list">
					<view class="schedule_title">当日日程</view>
					<no-data v-if="scheduleList.length === 0" text="暂无日程安排" />
					<view v-else v-for="item in scheduleList" :key="item.id" class="schedule_item">
						<view class="schedule_dot"></view>
						<view class="schedule_text_container">
							<text class="schedule_text" :class="{ expanded: expandedItems[item.id] }">{{ item.title
								}}</text>
						</view>
					</view>
				</view>
				<view class="add_schedule_btn" @click="handleAddSchedule">
					<image src="/static/image/workspace/add_icon.png" class="add_icon" mode="aspectFit"></image>
					<text class="btn_text">新增日程</text>
				</view>
			</view>
		</scroll-view>

		<view v-if="showAddScheduleModal" class="modal-overlay" @click="handleCloseModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">新增日程</text>
					<view class="modal-close" @click="handleCloseModal">
						<image src="/static/image/workspace/close.png" class="close-icon" mode="aspectFit"></image>
					</view>
				</view>
				<view class="modal-body">
					<text class="modal-date">{{ currentYear }}-{{ String(currentMonth).padStart(2, '0') }}-{{
						String(currentDay).padStart(2, '0') }}日程</text>
					<textarea class="schedule-textarea" v-model="scheduleContent" placeholder="请输入日程内容"
						placeholder-class="textarea-placeholder"></textarea>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @click="handleCloseModal">
						<text>取消</text>
					</view>
					<view class="modal-btn confirm-btn" @click="handleConfirmSchedule">
						<text>确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<common-tabbar></common-tabbar>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useStore } from 'vuex';
import workspaceApi from '@/reqApi/workspace.js';
import PageHeader from '@/components/page-header.vue';
import NoData from '@/components/no-data.vue';
import CommonTabbar from '@/components/commonTabbar.vue';
import { useSafeArea } from '@/common/safeArea';

const store = useStore();
const { statusBarHeight, safeAreaBottom, initSafeArea } = useSafeArea();

const systemItems = ref([
	{ name: '大数据精准教学诊断平台', key: '', image: '/static/image/workspace/iconLeft.png', isLarge: true, visible: true },
	{ name: '选择题判分', key: '', image: '/static/image/workspace/icon1.png', isLarge: false, visible: true },
	{ name: '材料采集', key: 'materialCollection', image: '/static/image/workspace/icon2.png', isLarge: false, visible: true },
	{ name: '教师研修', key: 'teacherStudy', image: '/static/image/workspace/icon3.png', isLarge: false, visible: true },
	{ name: '学生学习', key: 'studentStudy', image: '/static/image/workspace/icon4.png', isLarge: false, visible: true },
	{ name: '智能选课', key: '', image: '/static/image/workspace/icon5.png', isLarge: false, visible: true },
	{ name: '教师发展', key: '', image: '/static/image/workspace/icon6.png', isLarge: false, visible: true },
	{ name: '协同备课', key: '', image: '/static/image/workspace/icon7.png', isLarge: false, visible: true },
	{ name: '校内通知', key: 'notice', image: '/static/image/workspace/icon8.png', isLarge: false, visible: true },
	{ name: '评教评学', key: '', image: '/static/image/workspace/icon9.png', isLarge: false, visible: true },
	{ name: '考场编排', key: '', image: '/static/image/workspace/icon10.png', isLarge: false, visible: true },
	{ name: '听课评课', key: '', image: '/static/image/workspace/icon11.png', isLarge: false, visible: true },
	{ name: '基础数据', key: '', image: '/static/image/workspace/icon12.png', isLarge: false, visible: true }
]);

const largeCard = computed(() => systemItems.value.find(item => item.isLarge));
const smallCards = computed(() => systemItems.value.filter(item => !item.isLarge));
const rightTopCards = computed(() => smallCards.value.slice(0, 4));
const bottomCards = computed(() => smallCards.value.slice(4));
const allSmallCards = computed(() => smallCards.value);

const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

const calendarDays = ref([]);
const scheduleEvents = ref({});
const isLoading = ref(false);

const today = new Date();
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

const currentYear = ref(new Date().getFullYear());
const currentMonth = ref(new Date().getMonth() + 1);
const currentDay = ref(new Date().getDate());

const weekStartDate = ref(null);
const weekEndDate = ref(null);

const yearList = ref([]);
const monthList = ref([]);
const yearIndex = ref(0);
const monthIndex = ref(0);

const expandedItems = ref({});

const toggleExpand = (id) => {
	expandedItems.value[id] = !expandedItems.value[id];
};

const scheduleList = computed(() => {
	const dateKey = `${currentYear.value}-${String(currentMonth.value).padStart(2, '0')}-${String(currentDay.value).padStart(2, '0')}`;
	return scheduleEvents.value[dateKey] || [];
});

const weekDateRange = computed(() => {
	if (!weekStartDate.value || !weekEndDate.value) return '';
	return `${weekStartDate.value.getFullYear()}年${weekStartDate.value.getMonth() + 1}月${weekStartDate.value.getDate()}日 - ${weekEndDate.value.getFullYear()}年${weekEndDate.value.getMonth() + 1}月${weekEndDate.value.getDate()}日`;
});

const generateYearList = () => {
	const years = [];
	for (let i = currentYear.value - 5; i <= currentYear.value + 5; i++) {
		years.push(`${i}年`);
	}
	yearList.value = years;
};

const generateMonthList = () => {
	const months = [];
	for (let i = 1; i <= 12; i++) {
		months.push(`${i}月`);
	}
	monthList.value = months;
};

const getWeekRange = (date) => {
	const d = new Date(date);
	const day = d.getDay();
	const diff = day === 0 ? -6 : 1 - day;
	const monday = new Date(d);
	monday.setDate(d.getDate() + diff);
	monday.setHours(0, 0, 0, 0);
	const sunday = new Date(monday);
	sunday.setDate(monday.getDate() + 6);
	sunday.setHours(23, 59, 59, 999);
	return { monday, sunday };
};

const updateCalendarDays = () => {
	const days = [];
	const { monday } = getWeekRange(new Date(currentYear.value, currentMonth.value - 1, currentDay.value));

	weekStartDate.value = monday;
	const sunday = new Date(monday);
	sunday.setDate(monday.getDate() + 6);
	weekEndDate.value = sunday;

	for (let i = 0; i < 7; i++) {
		const date = new Date(monday);
		date.setDate(monday.getDate() + i);
		const dayOfWeek = date.getDay();
		const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		days.push({
			date: date.getDate(),
			fullDate: dateKey,
			year: date.getFullYear(),
			month: date.getMonth() + 1,
			isActive: date.getDate() === currentDay.value && date.getMonth() + 1 === currentMonth.value && date.getFullYear() === currentYear.value,
			isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
			isToday: dateKey === todayStr,
			hasSchedule: !!scheduleEvents.value[dateKey] && scheduleEvents.value[dateKey].length > 0
		});
	}
	calendarDays.value = days;
};

const fetchScheduleList = async () => {
	const { monday, sunday } = getWeekRange(new Date(currentYear.value, currentMonth.value - 1, currentDay.value));
	const startDate = `${monday.getFullYear()}-${String(monday.getMonth() + 1).padStart(2, '0')}-${String(monday.getDate()).padStart(2, '0')}`;
	const endDate = `${sunday.getFullYear()}-${String(sunday.getMonth() + 1).padStart(2, '0')}-${String(sunday.getDate()).padStart(2, '0')}`;

	isLoading.value = true;
	try {
		const res = await workspaceApi.getSchedule({ startDate, endDate });
		updateScheduleEvents(res.data);
	} catch (error) {
		console.error('获取日程列表失败:', error);
		uni.showToast({ title: '获取日程失败，请稍后重试', icon: 'none', duration: 3000 });
	} finally {
		isLoading.value = false;
	}
};

const updateScheduleEvents = (data) => {
	Object.keys(scheduleEvents.value).forEach(key => {
		delete scheduleEvents.value[key];
	});
	Object.keys(data).forEach(dateKey => {
		const list = data[dateKey] || [];
		scheduleEvents.value[dateKey] = list.map(item => ({
			id: String(item.id),
			title: item.content || ''
		}));
	});
	updateCalendarDays();
};

const updateYearMonthIndex = () => {
	yearIndex.value = yearList.value.indexOf(`${currentYear.value}年`);
	monthIndex.value = monthList.value.indexOf(`${currentMonth.value}月`);
};

onMounted(() => {
	initSafeArea();
	generateYearList();
	generateMonthList();
	updateYearMonthIndex();
	updateCalendarDays();
});

onShow(() => {
	fetchScheduleList();
});

const handleSystemClick = (item) => {
	if (item.key === 'notice') {
		const userInfo = store.state.userStore.userInfo || uni.getStorageSync('userInfo') || {};
		const roleCodes = userInfo.roleCodes || [];
		const isSchoolManager = Array.isArray(roleCodes) && roleCodes.includes('SCHOOL_MANAGER');

		if (isSchoolManager) {
			uni.navigateTo({
				url: '/pages/notice/overview/index'
			});
		} else {
			uni.navigateTo({
				url: '/pages/notice/mine/index?hideTabbar=true'
			});
		}
	} else if (item.key === 'materialCollection') {
		uni.navigateTo({
			url: '/pages/materialCollection/taskOverview/index'
		});
	} else if (item.key == 'teacherStudy') {//教师研修
		uni.navigateTo({
			url: '/pages/teacherStudy/index'
		});
	} else if (item.key == 'studentStudy') {//学生学习
		uni.navigateTo({
			url: '/pages/studentStudy/index'
		});
	} else {
		uni.showToast({ title: `即将打开：${item.name}`, icon: 'none' });
	}
};

const handleViewSchedule = () => {
	uni.navigateTo({
		url: '/pages/workspace/schedule'
	});
};

const handlePrevWeek = () => {
	const currentDate = new Date(currentYear.value, currentMonth.value - 1, currentDay.value);
	currentDate.setDate(currentDate.getDate() - 7);
	currentYear.value = currentDate.getFullYear();
	currentMonth.value = currentDate.getMonth() + 1;
	currentDay.value = currentDate.getDate();
	updateYearMonthIndex();
	updateCalendarDays();
	fetchScheduleList();
};

const handleNextWeek = () => {
	const currentDate = new Date(currentYear.value, currentMonth.value - 1, currentDay.value);
	currentDate.setDate(currentDate.getDate() + 7);
	currentYear.value = currentDate.getFullYear();
	currentMonth.value = currentDate.getMonth() + 1;
	currentDay.value = currentDate.getDate();
	updateYearMonthIndex();
	updateCalendarDays();
	fetchScheduleList();
};

const handleDayClick = (day) => {
	calendarDays.value.forEach(d => d.isActive = false);
	day.isActive = true;
	currentYear.value = day.year;
	currentMonth.value = day.month;
	currentDay.value = day.date;
	updateYearMonthIndex();
};

const handleYearChange = (e) => {
	yearIndex.value = e.detail.value;
	currentYear.value = parseInt(yearList.value[e.detail.value].replace('年', ''));
	updateCalendarDays();
	fetchScheduleList();
};

const handleMonthChange = (e) => {
	monthIndex.value = e.detail.value;
	currentMonth.value = parseInt(monthList.value[e.detail.value].replace('月', ''));
	updateCalendarDays();
	fetchScheduleList();
};

const showAddScheduleModal = ref(false);
const scheduleContent = ref('');

const handleAddSchedule = () => {
	showAddScheduleModal.value = true;
	scheduleContent.value = '';
};

const handleCloseModal = () => {
	showAddScheduleModal.value = false;
	scheduleContent.value = '';
};

const handleConfirmSchedule = async () => {
	if (!scheduleContent.value.trim()) {
		uni.showToast({ title: '请输入日程内容', icon: 'none' });
		return;
	}
	const scheduleDate = `${currentYear.value}-${String(currentMonth.value).padStart(2, '0')}-${String(currentDay.value).padStart(2, '0')}`;
	try {
		await workspaceApi.saveSchedule({
			content: scheduleContent.value.trim(),
			scheduleDate
		});
		uni.showToast({ title: '添加成功', icon: 'success' });
		showAddScheduleModal.value = false;
		scheduleContent.value = '';
		fetchScheduleList();
	} catch (error) {
		console.error('添加日程失败:', error);
		uni.showToast({ title: '添加日程失败，请稍后重试', icon: 'none', duration: 3000 });
	}
};
</script>

<style lang="scss">
$primary-color: #2E64FA;
$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;
$bg-color: #F5F7FA;
$bg-white: #FFFFFF;
$border-color: #F0F0F0;
$header-border: #EEEEEE;

$font-lg: 44rpx;
$font-md: 34rpx;
$font-sm: 32rpx;
$font-xs: 26rpx;
$font-xxs: 24rpx;

$radius-lg: 20rpx;
$radius-md: 12rpx;
$radius-sm: 8rpx;
$radius-circle: 50%;

$spacing-xl: 80rpx;
$spacing-lg: 32rpx;
$spacing-md: 24rpx;
$spacing-sm: 24rpx;
$spacing-xs: 16rpx;
$spacing-xxs: 12rpx;

$shadow-sm: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

@mixin flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

@mixin flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@mixin flex-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@mixin bg-card {
	background-color: $bg-white;
	border-radius: $radius-lg;
	padding: $spacing-md;
}

@mixin text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page_workspace {
	min-height: 100vh;
	background-color: #F8F9FD;
	box-sizing: border-box;
}

.workspace_content {
	padding-left: 24rpx;
	padding-right: 24rpx;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

// 系统列表
.system_list {
	@include bg-card;
	margin-bottom: $spacing-sm;

	.section_title {
		font-size: $font-sm;
		font-weight: 500;
		color: $text-primary;
		margin-bottom: $spacing-sm;
	}

	.system_grid_with_large {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;

		.large_card {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #EAF0FF;
			border-radius: 20rpx;
			width: 324rpx;
			height: 352rpx;
			// padding: 30rpx 0;

			.large_icon {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 32rpx;
			}

			.large_name {
				font-size: 32rpx;
				color: #333333;
				font-weight: 500;
				text-align: center;
				line-height: 48rpx;
				width: 276rpx;
			}
		}

		.right_top_grid {
			flex: 1;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16rpx;

			.small_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #FFFFFF;
				// border-radius: 12rpx;
				// padding: 20rpx 0;

				.small_icon {
					width: 96rpx;
					height: 96rpx;
					margin-bottom: 20rpx;
				}

				.small_name {
					font-size: 28rpx;
					color: $text-secondary;
					text-align: center;
				}
			}
		}
	}

	.bottom_grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16rpx;

		.small_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx 0;

			.small_icon {
				width: 96rpx;
				height: 96rpx;
				margin-bottom: 20rpx;
			}

			.small_name {
				font-size: 28rpx;
				color: $text-secondary;
				text-align: center;
			}
		}
	}

	.system_grid_full {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16rpx;

		.small_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx 0;

			.small_icon {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 12rpx;
			}

			.small_name {
				font-size: 22rpx;
				color: $text-secondary;
				text-align: center;
			}
		}
	}
}

// 日程
.calendar_section {
	@include bg-card;

	.calendar_header {
		@include flex-between;
		margin-bottom: 32rpx;

		.section_title {
			font-size: $font-sm;
			font-weight: 500;
			color: $text-primary;
		}

		.view_schedule {
			font-size: 28rpx;
			color: $primary-color;
		}
	}

	.calendar_toolbar {
		display: flex;
		gap: 18rpx;
		padding-bottom: 32rpx;

		.year_month_select {
			display: flex;
			gap: 18rpx;
			flex: 1;

			.select_item {
				flex: 1;
				// @include flex-center;
				gap: 8rpx;
				padding: 0;
				height: 72rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;

				.select_content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 81%;
					padding: 0 16rpx;
					height: 72rpx;
				}

				.select_text {
					font-size: $font-xs;
					color: $text-primary;
				}
			}
		}

		.week_nav {
			display: flex;
			gap: 18rpx;

			.nav_btn {
				width: 122rpx;
				height: 72rpx;
				@include flex-center;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;

				.nav_text {
					font-size: $font-xs;
					color: $text-secondary;
				}
			}
		}
	}

	.calendar_grid {
		margin-bottom: $spacing-lg;

		.calendar_weekday {
			display: flex;
			margin-bottom: $spacing-xs;

			.weekday_text {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: $text-secondary;
			}
		}

		.calendar_days {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 80rpx;

			.day_item {
				flex-shrink: 0;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 2rpx solid transparent;
				position: relative;

				&.active {
					background-color: rgba(46, 100, 250, 0.1);
					border-color: #2E64FA;

					.day_text {
						color: #2E64FA;
					}
				}

				.day_text {
					font-size: $font-sm;
					color: $text-primary;
				}

				&.weekend:not(.active) {
					.day_text {
						color: #999999;
					}
				}

				.schedule_dot {
					position: absolute;
					bottom: 12rpx;
					width: 8rpx;
					height: 8rpx;
					background-color: transparent;
					border-radius: 50%;

					&.visible {
						background-color: #2E64FA;
					}
				}
			}
		}
	}

	.schedule_list {
		margin-bottom: $spacing-lg;
		background: #F9FAFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: $spacing-lg;

		.schedule_title {
			font-size: 28rpx;
			font-weight: 500;
			color: $text-primary;
			margin-bottom: $spacing-xs;
		}

		.schedule_item {
			display: flex;
			align-items: flex-start;
			padding: 24rpx 0;
			border-bottom: 2rpx solid #EBEEF5;

			&:last-child {
				border-bottom: none;
			}

			.schedule_dot {
				width: 16rpx;
				height: 16rpx;
				background-color: $primary-color;
				border-radius: $radius-circle;
				margin-top: 14rpx;
				margin-right: 14rpx;
				flex-shrink: 0;
			}

			.schedule_text_container {
				flex: 1;
				position: relative;
			}

			.schedule_text {
				font-size: 28rpx;
				color: #666666;
				line-height: 1.6;
				display: -webkit-box;
				flex: 1;
				text-align: justify;
				&.expanded {
					-webkit-line-clamp: unset;
					overflow: visible;
					text-overflow: unset;
					padding-right: 0;
				}
			}

			.toggle_text {
				font-size: 28rpx;
				color: #2E64FA;
				position: absolute;
				right: 0;
				bottom: 0;
				line-height: 1.6;
			}
		}
	}

	.add_schedule_btn {
		@include flex-center;
		gap: 16rpx;
		height: 56rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		;
		border: 1px solid #2E64FA;

		.btn_text {
			font-size: 28rpx;
			color: #2E64FA;
			font-weight: 500;
		}

		.add_icon {
			width: 32rpx;
			height: 32rpx;
		}
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	width: 702rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		padding: 0 40rpx;
		background-color: #F5F7FA;

		.modal-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #303133;
		}

		.modal-close {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.close-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.modal-body {
		padding: 24rpx;

		.modal-date {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 24rpx;
			display: block;
		}

		.schedule-textarea {
			width: 100%;
			height: 364rpx;
			padding: 20rpx;
			border: 2rpx solid #E8E8E8;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #333333;
			box-sizing: border-box;
		}

		.textarea-placeholder {
			color: #999999;
		}
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 28rpx 40rpx;
		gap: 16rpx;
		border-top: 2rpx solid #EBEEF5;

		.modal-btn {
			height: 72rpx;
			// padding: 0 48rpx;
			width: 136rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			border-radius: 8rpx;
			flex-shrink: 0;

			&.cancel-btn {
				color: #666666;
				background-color: #FFFFFF;
				border: 2rpx solid #DCDFE6;
				height: 68rpx;
			}

			&.confirm-btn {
				color: #FFFFFF;
				background-color: #2E64FA;
				border: none;
			}
		}
	}
}
</style>