初始化项目
This commit is contained in:
@@ -0,0 +1,815 @@
|
||||
<template>
|
||||
<div class="schedule-card">
|
||||
<div class="card-title">
|
||||
<span>日程信息</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="schedule-overview">
|
||||
<div class="schedule-summary">
|
||||
<div v-for="item in summaryCards" :key="item.key" class="summary-item">
|
||||
<div class="summary-item__main">
|
||||
<div class="summary-item__pane">
|
||||
<div class="summary-item__value" :style="{ color: item.color }">{{ item.value }}</div>
|
||||
<div v-if="item.extra" class="summary-item__extra">{{ item.extra }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item__label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="schedule-panel schedule-panel--timeline">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<div class="panel-title">今日安排</div>
|
||||
<div class="panel-subtitle">连续刻度展示 08:00 - 18:00 日程</div>
|
||||
</div>
|
||||
<div class="panel-tag">{{ todayLabel }} {{ currentTimeLabel }}</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-scroll">
|
||||
<div class="timeline-body">
|
||||
<div v-if="showCurrentLine" class="timeline-now" :style="currentLineStyle">
|
||||
<span class="timeline-now__label">当前 {{ currentTimeLabel }}</span>
|
||||
</div>
|
||||
|
||||
<div v-for="slot in timeSlots" :key="slot.key" class="timeline-row">
|
||||
<div class="timeline-row__label">{{ slot.label }}</div>
|
||||
<div class="timeline-row__content">
|
||||
<div class="timeline-row__line"></div>
|
||||
<div class="timeline-row__events">
|
||||
<el-tooltip
|
||||
v-for="item in getSlotEvents(slot.start, slot.end)"
|
||||
:key="`${slot.key}-${item.title}-${item.startTime}`"
|
||||
placement="top"
|
||||
:show-after="200"
|
||||
>
|
||||
<template #content>
|
||||
<div class="timeline-tip">
|
||||
<div class="timeline-tip__title">
|
||||
<span class="timeline-tip__label">标题：</span>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__type">
|
||||
<span class="timeline-tip__label">类型：</span>
|
||||
<span>{{ item.typeLabel }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__time">
|
||||
<span class="timeline-tip__label">时间：</span>
|
||||
<span>{{ item.startTime }} - {{ item.endTime }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__desc">
|
||||
<span class="timeline-tip__label">说明：</span>
|
||||
<span>{{ item.desc }}</span>
|
||||
</div>
|
||||
<div class="timeline-tip__status" :style="{ color: item.color }">
|
||||
<span class="timeline-tip__label">状态：</span>
|
||||
<span>{{ item.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:class="['timeline-event', { 'timeline-event--active': item.isActive }]"
|
||||
:style="{ '--event-color': item.color }"
|
||||
>
|
||||
<span class="timeline-event__dot"></span>
|
||||
<span class="timeline-event__time">{{ item.startTime }}</span>
|
||||
<span class="timeline-event__title">{{ item.title }}</span>
|
||||
<span class="timeline-event__status">{{ item.status }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { DictData, dictDataListData } from '@jeesite/core/api/sys/dictData';
|
||||
import { MySchedule, myScheduleListAll } from '@jeesite/biz/api/biz/mySchedule';
|
||||
|
||||
const typeDict = ref<DictData[]>([]);
|
||||
const statusDict = ref<DictData[]>([]);
|
||||
const scheduleData = ref<MySchedule[]>([]);
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const res = await myScheduleListAll();
|
||||
scheduleData.value = res || [];
|
||||
} catch (error) {
|
||||
scheduleData.value = [];
|
||||
console.error('获取数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function getDict() {
|
||||
try {
|
||||
typeDict.value = await dictDataListData({ dictType: 'schedule_type' });
|
||||
statusDict.value = await dictDataListData({ dictType: 'work_status' });
|
||||
} catch (error) {
|
||||
typeDict.value = [];
|
||||
statusDict.value = [];
|
||||
console.error('获取数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
interface SummaryCard {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string;
|
||||
extra: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface TimelineItem {
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
title: string;
|
||||
typeLabel: string;
|
||||
desc: string;
|
||||
status: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface TimeSlot {
|
||||
key: string;
|
||||
label: string;
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
interface TimelineDisplayItem extends TimelineItem {
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
const TYPE_COLOR_MAP: Record<string, string> = {
|
||||
'0': '#3B82F6',
|
||||
'1': '#10B981',
|
||||
'2': '#F97316',
|
||||
'3': '#8B5CF6',
|
||||
'4': '#EC4899',
|
||||
};
|
||||
|
||||
const summaryCards = computed<SummaryCard[]>(() => {
|
||||
const colors = ['#3B82F6', '#10B981', '#F97316', '#8B5CF6', '#EC4899', '#06B6D4'];
|
||||
return typeDict.value.slice(0, 4).map((item, index) => {
|
||||
const total = scheduleData.value.filter((schedule) => schedule.scheduleType === item.dictValue).length;
|
||||
return {
|
||||
key: item.dictValue,
|
||||
label: item.dictLabelRaw,
|
||||
value: `${total}`,
|
||||
extra: '',
|
||||
color: colors[index % colors.length],
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function parseTimeToMinutes(time: string) {
|
||||
const [hour, minute] = time.split(':').map((value) => Number(value || 0));
|
||||
return hour * 60 + minute;
|
||||
}
|
||||
|
||||
function normalizeTimeLabel(value?: string) {
|
||||
if (!value) return '';
|
||||
const match = value.match(/(\d{2}):(\d{2})/);
|
||||
if (match) return `${match[1]}:${match[2]}`;
|
||||
return value.length >= 5 ? value.slice(0, 5) : value;
|
||||
}
|
||||
|
||||
function getDictLabel(dictList: DictData[] | undefined, value?: string) {
|
||||
const target = dictList?.find((item) => item.dictValue === value);
|
||||
return target?.dictLabelRaw || value;
|
||||
}
|
||||
|
||||
function getScheduleStatusLabel(item: MySchedule) {
|
||||
return getDictLabel(statusDict.value, item.ustatus);
|
||||
}
|
||||
|
||||
function getScheduleColor(item: MySchedule) {
|
||||
return TYPE_COLOR_MAP[item.scheduleType || ''] || '#3B82F6';
|
||||
}
|
||||
|
||||
const currentTime = ref(new Date());
|
||||
let timeTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function formatMinutesToLabel(minutes: number) {
|
||||
const hour = `${Math.floor(minutes / 60)}`.padStart(2, '0');
|
||||
const minute = `${minutes % 60}`.padStart(2, '0');
|
||||
return `${hour}:${minute}`;
|
||||
}
|
||||
|
||||
const timelineStartMinutes = 8 * 60;
|
||||
const timelineEndMinutes = 18 * 60;
|
||||
const timelineTotalMinutes = timelineEndMinutes - timelineStartMinutes;
|
||||
|
||||
const timeSlots = computed<TimeSlot[]>(() => {
|
||||
return Array.from({ length: 10 }, (_, index) => {
|
||||
const end = timelineEndMinutes - index * 60;
|
||||
const start = end - 60;
|
||||
return {
|
||||
key: `${start}-${end}`,
|
||||
label: `${formatMinutesToLabel(start)} - ${formatMinutesToLabel(end)}`,
|
||||
start,
|
||||
end,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const currentMinutes = computed(() => {
|
||||
const now = currentTime.value;
|
||||
return now.getHours() * 60 + now.getMinutes();
|
||||
});
|
||||
|
||||
const currentTimeLabel = computed(() => formatMinutesToLabel(currentMinutes.value));
|
||||
|
||||
const showCurrentLine = computed(() => {
|
||||
return currentMinutes.value >= timelineStartMinutes && currentMinutes.value <= timelineEndMinutes;
|
||||
});
|
||||
|
||||
const currentLineStyle = computed(() => {
|
||||
const progress = ((timelineEndMinutes - currentMinutes.value) / timelineTotalMinutes) * 100;
|
||||
return {
|
||||
top: `${Math.max(0, Math.min(100, progress))}%`,
|
||||
};
|
||||
});
|
||||
|
||||
const timelineSource = computed<TimelineItem[]>(() => {
|
||||
return scheduleData.value
|
||||
.map((item) => {
|
||||
const startTime = normalizeTimeLabel(item.startTime);
|
||||
const endTime = normalizeTimeLabel(item.endTime);
|
||||
if (!startTime || !endTime) return null;
|
||||
return {
|
||||
startTime,
|
||||
endTime,
|
||||
title: item.title,
|
||||
typeLabel: getDictLabel(typeDict.value, item.scheduleType),
|
||||
desc: item.content,
|
||||
status: getScheduleStatusLabel(item),
|
||||
color: getScheduleColor(item),
|
||||
};
|
||||
})
|
||||
.filter((item): item is TimelineItem => {
|
||||
if (!item) return false;
|
||||
const start = parseTimeToMinutes(item.startTime);
|
||||
const end = parseTimeToMinutes(item.endTime);
|
||||
return Number.isFinite(start) && Number.isFinite(end) && end > start;
|
||||
});
|
||||
});
|
||||
|
||||
const timelineDisplayList = computed<TimelineDisplayItem[]>(() => {
|
||||
return [...timelineSource.value]
|
||||
.sort((a, b) => parseTimeToMinutes(b.startTime) - parseTimeToMinutes(a.startTime))
|
||||
.map((item) => {
|
||||
const start = parseTimeToMinutes(item.startTime);
|
||||
const end = parseTimeToMinutes(item.endTime);
|
||||
return {
|
||||
...item,
|
||||
isActive: currentMinutes.value >= start && currentMinutes.value <= end,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function getSlotEvents(slotStart: number, slotEnd: number) {
|
||||
return timelineDisplayList.value.filter((item) => {
|
||||
const start = parseTimeToMinutes(item.startTime);
|
||||
const end = parseTimeToMinutes(item.endTime);
|
||||
return start < slotEnd && end > slotStart;
|
||||
});
|
||||
}
|
||||
|
||||
const todayLabel = computed(() => {
|
||||
const now = new Date();
|
||||
const month = `${now.getMonth() + 1}`.padStart(2, '0');
|
||||
const date = `${now.getDate()}`.padStart(2, '0');
|
||||
return `${month}/${date}`;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getDict();
|
||||
timeTimer = setInterval(() => {
|
||||
currentTime.value = new Date();
|
||||
}, 60000);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timeTimer) {
|
||||
clearInterval(timeTimer);
|
||||
timeTimer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.schedule-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: rgb(51 65 85);
|
||||
border-bottom: 1px solid rgb(226 232 240);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.schedule-overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr);
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.schedule-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.summary-item,
|
||||
.schedule-panel {
|
||||
border-radius: 12px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
&__pane {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__extra {
|
||||
margin-top: 8px;
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(100% - 16px);
|
||||
min-height: 30px;
|
||||
margin: 0 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 999px;
|
||||
background: rgb(248 250 252);
|
||||
color: rgb(71 85 105);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: rgb(51 65 85);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.panel-subtitle {
|
||||
margin-top: 2px;
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.panel-tag {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgb(248 250 252);
|
||||
color: rgb(71 85 105);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.timeline-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
border-radius: 10px;
|
||||
background: rgb(248 250 252);
|
||||
}
|
||||
|
||||
.timeline-body {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.timeline-row {
|
||||
display: grid;
|
||||
grid-template-columns: 118px minmax(0, 1fr);
|
||||
min-height: 68px;
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px 0 0;
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
background: rgb(226 232 240);
|
||||
}
|
||||
|
||||
&__events {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: rgb(241 245 249);
|
||||
color: rgb(100 116 139);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__hint-title {
|
||||
color: rgb(51 65 85);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-now {
|
||||
position: absolute;
|
||||
left: 118px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: rgb(239 68 68 / 48%);
|
||||
}
|
||||
|
||||
&__label {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgb(254 226 226);
|
||||
color: rgb(220 38 38);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
--event-color: rgb(59 130 246);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
max-width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 92%);
|
||||
color: rgb(51 65 85);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--event-color) 35%, white);
|
||||
box-shadow: 0 8px 18px rgb(148 163 184 / 16%);
|
||||
}
|
||||
|
||||
&--active {
|
||||
border-color: color-mix(in srgb, var(--event-color) 55%, white);
|
||||
box-shadow: 0 10px 22px rgb(59 130 246 / 14%);
|
||||
background: color-mix(in srgb, var(--event-color) 10%, white);
|
||||
}
|
||||
|
||||
&__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--event-color);
|
||||
}
|
||||
|
||||
&__time {
|
||||
color: var(--event-color);
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__status {
|
||||
flex-shrink: 0;
|
||||
color: rgb(100 116 139);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-tip {
|
||||
max-width: 240px;
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
color: rgb(255 255 255);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&__type,
|
||||
&__time,
|
||||
&__desc,
|
||||
&__status {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__type,
|
||||
&__time,
|
||||
&__desc {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .schedule-card {
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
}
|
||||
|
||||
.summary-item,
|
||||
.schedule-panel {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
&__pane {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
&__extra,
|
||||
&__label {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
|
||||
&__label {
|
||||
border-color: rgb(51 65 85);
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
.panel-subtitle,
|
||||
.panel-tag,
|
||||
.timeline-row__label,
|
||||
.timeline-row__hint {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
|
||||
.panel-tag,
|
||||
.timeline-scroll {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
.timeline-row__hint {
|
||||
background: rgb(30 41 59 / 75%);
|
||||
}
|
||||
|
||||
.timeline-row__hint-title {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
.timeline-row {
|
||||
border-top-color: rgb(51 65 85);
|
||||
|
||||
&__line {
|
||||
background: rgb(51 65 85);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
border-color: rgb(51 65 85);
|
||||
background: rgb(30 41 59 / 55%);
|
||||
color: rgb(226 232 240);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 10px 22px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
&--active {
|
||||
box-shadow: 0 12px 26px rgb(37 99 235 / 22%);
|
||||
}
|
||||
|
||||
&__status {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-now {
|
||||
&::before {
|
||||
background: rgb(248 113 113 / 48%);
|
||||
}
|
||||
|
||||
&__label {
|
||||
background: rgb(69 10 10);
|
||||
color: rgb(254 202 202);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.schedule-card {
|
||||
.schedule-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.schedule-summary {
|
||||
grid-template-rows: repeat(2, minmax(96px, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.schedule-card {
|
||||
.card-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.schedule-summary {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(4, minmax(84px, 1fr));
|
||||
}
|
||||
|
||||
.timeline-scroll {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.timeline-row {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
&__label {
|
||||
justify-content: flex-start;
|
||||
padding: 8px 0 4px;
|
||||
}
|
||||
|
||||
&__line {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
|
||||
&__title {
|
||||
max-width: none;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-now {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,7 +10,7 @@
|
||||
<NoteInfo />
|
||||
</div>
|
||||
<div class="workbench-col">
|
||||
上右
|
||||
<ScheduleInfo />
|
||||
</div>
|
||||
</div>
|
||||
<div class="workbench-row">
|
||||
@@ -26,6 +26,7 @@
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import WorkbenchHeader from './components/WorkbenchHeader.vue';
|
||||
import NoteInfo from './components/NoteInfo.vue';
|
||||
import ScheduleInfo from './components/ScheduleInfo.vue';
|
||||
|
||||
const loading = ref(true);
|
||||
setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user