|
|
|
@@ -0,0 +1,877 @@ |
|
|
|
<template> |
|
|
|
<div class="page"> |
|
|
|
<div class="container"> |
|
|
|
<!-- 用户信息头部 --> |
|
|
|
<div class="header"> |
|
|
|
<div class="user-info"> |
|
|
|
<div class="user-left"> |
|
|
|
<div class="avatar"> |
|
|
|
<el-avatar :src="userinfo.avatar">{{ |
|
|
|
userinfo.nickName |
|
|
|
}}</el-avatar> |
|
|
|
</div> |
|
|
|
<div class="user-name">{{ userinfo.nickName }}</div> |
|
|
|
</div> |
|
|
|
<div class="user-right"> |
|
|
|
<div class="user-department"> |
|
|
|
{{ userinfo.dept.deptName }} |
|
|
|
<em v-if="userinfo.language">({{ userinfo.language }})</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 月份筛选 --> |
|
|
|
<div class="filter-section"> |
|
|
|
<div class="month-tabs"> |
|
|
|
<div |
|
|
|
v-for="month in monthOptions" |
|
|
|
:key="month.value" |
|
|
|
class="month-tab" |
|
|
|
:class="{ active: selectedMonth === month.value }" |
|
|
|
@click="handleMonthChange(month.value)" |
|
|
|
> |
|
|
|
{{ $t(month.labelKey) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 统计信息 --> |
|
|
|
<div class="statistics-section"> |
|
|
|
<div class="statistics-cards"> |
|
|
|
<div class="statistics-card"> |
|
|
|
<div class="statistics-number">{{ statisticsData.totalDays }}</div> |
|
|
|
<div class="statistics-label"> |
|
|
|
{{ $t('checkin.record.statistics.totalDays') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="statistics-card"> |
|
|
|
<div class="statistics-number late"> |
|
|
|
{{ statisticsData.lateDays }} |
|
|
|
</div> |
|
|
|
<div class="statistics-label"> |
|
|
|
{{ $t('checkin.record.statistics.lateDays') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="statistics-card"> |
|
|
|
<div class="statistics-number early"> |
|
|
|
{{ statisticsData.earlyDays }} |
|
|
|
</div> |
|
|
|
<div class="statistics-label"> |
|
|
|
{{ $t('checkin.record.statistics.earlyDays') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="statistics-card"> |
|
|
|
<div class="statistics-number normal"> |
|
|
|
{{ statisticsData.normalDays }} |
|
|
|
</div> |
|
|
|
<div class="statistics-label"> |
|
|
|
{{ $t('checkin.record.statistics.normalDays') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 考勤记录列表 --> |
|
|
|
<div class="record-section"> |
|
|
|
<div v-if="loading" class="loading-wrapper"> |
|
|
|
<i class="el-icon-loading" /> |
|
|
|
<span>{{ $t('checkin.record.loading') }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else-if="attendanceList.length === 0" class="empty-wrapper"> |
|
|
|
<div class="empty-text">{{ $t('checkin.record.empty') }}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else class="record-list"> |
|
|
|
<div |
|
|
|
v-for="record in attendanceList" |
|
|
|
:key="record.id" |
|
|
|
class="record-item" |
|
|
|
:class="{ |
|
|
|
'is-today': isToday(record.checkInTime), |
|
|
|
'is-weekend': isWeekend(record.checkInTime) |
|
|
|
}" |
|
|
|
> |
|
|
|
<div class="record-date"> |
|
|
|
<div class="date-day"> |
|
|
|
{{ formatDateDay(record.checkInTime) }} |
|
|
|
</div> |
|
|
|
<div class="date-month"> |
|
|
|
{{ formatDateMonth(record.checkInTime) }} |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="date-weekday" |
|
|
|
:class="{ |
|
|
|
'is-today': isToday(record.checkInTime), |
|
|
|
'is-weekend': isWeekend(record.checkInTime) |
|
|
|
}" |
|
|
|
> |
|
|
|
{{ formatWeekday(record.checkInTime) }} |
|
|
|
</div> |
|
|
|
<!-- 今天标识 --> |
|
|
|
<div v-if="isToday(record.checkInTime)" class="today-badge"> |
|
|
|
{{ $t('checkin.record.today') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="record-content"> |
|
|
|
<div class="record-times"> |
|
|
|
<!-- 上班打卡 --> |
|
|
|
<div class="time-item"> |
|
|
|
<div class="time-label"> |
|
|
|
{{ $t('checkin.record.time.morning') }} |
|
|
|
</div> |
|
|
|
<div class="time-value"> |
|
|
|
<span |
|
|
|
v-if="record.clockInStatus == '0'" |
|
|
|
class="status-text status-none" |
|
|
|
> |
|
|
|
{{ $t('checkin.record.status.notChecked') }} |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-else-if="record.clockInStatus == '1'" |
|
|
|
class="status-text status-normal" |
|
|
|
> |
|
|
|
{{ $t('checkin.record.status.normal') }} |
|
|
|
{{ formatTime(record.clockIn) }} |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-else-if="record.clockInStatus == '3'" |
|
|
|
class="status-text status-late" |
|
|
|
> |
|
|
|
{{ $t('checkin.record.status.late') }} |
|
|
|
{{ formatTime(record.clockIn) }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 下班打卡 --> |
|
|
|
<div class="time-item"> |
|
|
|
<div class="time-label"> |
|
|
|
{{ $t('checkin.record.time.evening') }} |
|
|
|
</div> |
|
|
|
<div class="time-value"> |
|
|
|
<span |
|
|
|
v-if="record.clockOutStatus == '0'" |
|
|
|
class="status-text status-none" |
|
|
|
> |
|
|
|
{{ $t('checkin.record.status.notChecked') }} |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-else-if="record.clockOutStatus == '2'" |
|
|
|
class="status-text status-normal" |
|
|
|
> |
|
|
|
{{ $t('checkin.record.status.normal') }} |
|
|
|
{{ formatTime(record.clockOut) }} |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-else-if="record.clockOutStatus == '4'" |
|
|
|
class="status-text status-early" |
|
|
|
> |
|
|
|
{{ $t('checkin.record.status.early') }} |
|
|
|
{{ formatTime(record.clockOut) }} |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-else-if="record.clockOutStatus == '5'" |
|
|
|
class="status-text status-update" |
|
|
|
> |
|
|
|
{{ $t('checkin.record.status.update') }} |
|
|
|
{{ formatTime(record.clockOut) }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 备注 --> |
|
|
|
<div v-if="record.description" class="record-remark"> |
|
|
|
<span class="remark-label">{{ |
|
|
|
$t('checkin.record.remark.label') |
|
|
|
}}</span> |
|
|
|
<span class="remark-text">{{ record.description }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="footer--position"></div> |
|
|
|
<div class="footer"> |
|
|
|
<router-link to="/m/checkin" class="footer-item"> |
|
|
|
<i class="el-icon-location-information" style="font-size: 20px;" /> |
|
|
|
<span>{{$t('checkin.button.checkedInText')}}</span> |
|
|
|
</router-link> |
|
|
|
<router-link |
|
|
|
to="/m/checkin/record" |
|
|
|
class="footer-item active" |
|
|
|
> |
|
|
|
<i class="el-icon-pie-chart" /> |
|
|
|
<span>{{$t('checkin.button.recordText')}}</span> |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { queryList } from '@/api/oa/attendance/history' |
|
|
|
import { formatTime, formatDate } from '@/utils/filters' |
|
|
|
import moment from 'moment' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'CheckinRecord', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 加载状态 |
|
|
|
loading: true, |
|
|
|
// 选中的月份 |
|
|
|
selectedMonth: 'current', |
|
|
|
// 考勤记录列表 |
|
|
|
attendanceList: [], |
|
|
|
// 查询参数 |
|
|
|
queryParams: { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 100, |
|
|
|
sysUserName: undefined, |
|
|
|
strDay: undefined, |
|
|
|
flag: 'all' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
...mapGetters(['userinfo']), |
|
|
|
|
|
|
|
/** |
|
|
|
* 月份选项 |
|
|
|
* @returns {Array} 月份选项数组 |
|
|
|
*/ |
|
|
|
monthOptions() { |
|
|
|
return [ |
|
|
|
{ labelKey: 'checkin.record.monthFilter.current', value: 'current' }, |
|
|
|
{ labelKey: 'checkin.record.monthFilter.previous', value: 'previous' } |
|
|
|
] |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 统计数据计算 |
|
|
|
* @returns {Object} 统计数据对象 |
|
|
|
*/ |
|
|
|
statisticsData() { |
|
|
|
return this.calculateStatistics(this.attendanceList) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 获取查询日期范围 |
|
|
|
* @returns {Object} 开始和结束日期 |
|
|
|
*/ |
|
|
|
dateRange() { |
|
|
|
if (this.selectedMonth === 'current') { |
|
|
|
const now = moment() |
|
|
|
return { |
|
|
|
start: now.clone().startOf('month').format('YYYY-MM-DD'), |
|
|
|
end: now.clone().endOf('month').format('YYYY-MM-DD') |
|
|
|
} |
|
|
|
} else { |
|
|
|
const lastMonth = moment().subtract(1, 'month') |
|
|
|
return { |
|
|
|
start: lastMonth.clone().startOf('month').format('YYYY-MM-DD'), |
|
|
|
end: lastMonth.clone().endOf('month').format('YYYY-MM-DD') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
async mounted() { |
|
|
|
try { |
|
|
|
await this.loadAttendanceData() |
|
|
|
} catch (error) { |
|
|
|
this.handleError(this.$t('checkin.error.initFailed'), error) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
/** |
|
|
|
* 处理月份切换 |
|
|
|
* @param {string} month 月份值 |
|
|
|
*/ |
|
|
|
async handleMonthChange(month) { |
|
|
|
if (this.selectedMonth === month) return |
|
|
|
|
|
|
|
this.selectedMonth = month |
|
|
|
await this.loadAttendanceData() |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 加载考勤数据 |
|
|
|
*/ |
|
|
|
async loadAttendanceData() { |
|
|
|
try { |
|
|
|
this.loading = true |
|
|
|
this.queryParams.sysUserName = this.userinfo.userName |
|
|
|
|
|
|
|
// 根据选中月份设置查询日期 |
|
|
|
const { start, end } = this.dateRange |
|
|
|
// this.queryParams.strDay = start |
|
|
|
// this.queryParams.endDay = end |
|
|
|
|
|
|
|
const response = await queryList(this.queryParams) |
|
|
|
|
|
|
|
// 过滤指定月份的数据 |
|
|
|
this.attendanceList = response.rows.filter((record) => { |
|
|
|
if (!record.checkInTime) return false |
|
|
|
const recordDate = moment(record.checkInTime) |
|
|
|
return recordDate.isBetween(start, end, 'day', '[]') |
|
|
|
}) |
|
|
|
} catch (error) { |
|
|
|
this.handleError(this.$t('checkin.error.loadDataFailed'), error) |
|
|
|
this.attendanceList = [] |
|
|
|
} finally { |
|
|
|
this.loading = false |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 格式化日期 - 日 |
|
|
|
* @param {string} dateStr 日期字符串 |
|
|
|
* @returns {string} 格式化后的日 |
|
|
|
*/ |
|
|
|
formatDateDay(dateStr) { |
|
|
|
if (!dateStr) return '--' |
|
|
|
return moment(dateStr).format('DD') |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 格式化日期 - 月 |
|
|
|
* @param {string} dateStr 日期字符串 |
|
|
|
* @returns {string} 格式化后的月 |
|
|
|
*/ |
|
|
|
formatDateMonth(dateStr) { |
|
|
|
if (!dateStr) return '--' |
|
|
|
const currentLang = this.$i18n.locale |
|
|
|
if (currentLang === 'en') { |
|
|
|
return moment(dateStr).format('MMM') |
|
|
|
} else if (currentLang === 'ja') { |
|
|
|
return moment(dateStr).format('MM月') |
|
|
|
} else { |
|
|
|
return moment(dateStr).format('MM月') |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 格式化星期 |
|
|
|
* @param {string} dateStr 日期字符串 |
|
|
|
* @returns {string} 星期 |
|
|
|
*/ |
|
|
|
formatWeekday(dateStr) { |
|
|
|
if (!dateStr) return '--' |
|
|
|
const dayOfWeek = moment(dateStr).day() |
|
|
|
const weekdayKeys = [ |
|
|
|
'sunday', |
|
|
|
'monday', |
|
|
|
'tuesday', |
|
|
|
'wednesday', |
|
|
|
'thursday', |
|
|
|
'friday', |
|
|
|
'saturday' |
|
|
|
] |
|
|
|
return this.$t(`checkin.record.weekdays.${weekdayKeys[dayOfWeek]}`) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 判断是否为今天 |
|
|
|
* @param {string} dateStr 日期字符串 |
|
|
|
* @returns {boolean} 是否为今天 |
|
|
|
*/ |
|
|
|
isToday(dateStr) { |
|
|
|
if (!dateStr) return false |
|
|
|
return moment(dateStr).isSame(moment(), 'day') |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 判断是否为周末 |
|
|
|
* @param {string} dateStr 日期字符串 |
|
|
|
* @returns {boolean} 是否为周末 |
|
|
|
*/ |
|
|
|
isWeekend(dateStr) { |
|
|
|
if (!dateStr) return false |
|
|
|
const dayOfWeek = moment(dateStr).day() |
|
|
|
return dayOfWeek === 0 || dayOfWeek === 6 // 0是周日，6是周六 |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 格式化时间 |
|
|
|
* @param {string} timeStr 时间字符串 |
|
|
|
* @returns {string} 格式化后的时间 |
|
|
|
*/ |
|
|
|
formatTime(timeStr) { |
|
|
|
return formatTime(timeStr) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 计算统计数据 |
|
|
|
* @param {Array} attendanceList 考勤记录列表 |
|
|
|
* @returns {Object} 统计结果 |
|
|
|
*/ |
|
|
|
calculateStatistics(attendanceList) { |
|
|
|
const statistics = { |
|
|
|
totalDays: 0, |
|
|
|
lateDays: 0, |
|
|
|
earlyDays: 0, |
|
|
|
normalDays: 0 |
|
|
|
} |
|
|
|
|
|
|
|
if (!attendanceList || attendanceList.length === 0) { |
|
|
|
return statistics |
|
|
|
} |
|
|
|
|
|
|
|
attendanceList.forEach((record) => { |
|
|
|
// 统计打卡天数（有上班打卡记录的天数） |
|
|
|
if (record.clockInStatus && record.clockInStatus !== '0') { |
|
|
|
statistics.totalDays++ |
|
|
|
} |
|
|
|
|
|
|
|
// 统计迟到次数（上班状态为3） |
|
|
|
if (record.clockInStatus === '3') { |
|
|
|
statistics.lateDays++ |
|
|
|
} |
|
|
|
|
|
|
|
// 统计早退次数（下班状态为4） |
|
|
|
if (record.clockOutStatus === '4') { |
|
|
|
statistics.earlyDays++ |
|
|
|
} |
|
|
|
|
|
|
|
// 统计正常天数（上班正常且下班正常） |
|
|
|
if (record.clockInStatus === '1' && record.clockOutStatus === '2') { |
|
|
|
statistics.normalDays++ |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
return statistics |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 统一错误处理 |
|
|
|
* @param {string} message 错误消息 |
|
|
|
* @param {Error} error 错误对象 |
|
|
|
*/ |
|
|
|
handleError(message, error) { |
|
|
|
console.error(message, error) |
|
|
|
this.$toast.error(error.message || message) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.page { |
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
|
min-height: 100vh; |
|
|
|
color: #333; |
|
|
|
@media (min-width: 480px) { |
|
|
|
width: 480px; |
|
|
|
margin: 0 auto; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
.footer--position{ |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
.footer { |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
padding: 10px; |
|
|
|
text-align: center; |
|
|
|
background: white; |
|
|
|
z-index: 10; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
border-top: 1px solid #e5e5e5; |
|
|
|
.footer-item { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
cursor: pointer; |
|
|
|
flex-direction: column; |
|
|
|
&.active { |
|
|
|
color: #2196f3; |
|
|
|
} |
|
|
|
i { |
|
|
|
font-size: 18px; |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
span { |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.container { |
|
|
|
margin: 0 auto; |
|
|
|
background: #f5f5f5; |
|
|
|
min-height: 100vh; |
|
|
|
position: relative; |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
// 头部用户信息 |
|
|
|
.header { |
|
|
|
padding: 20px; |
|
|
|
background: white; |
|
|
|
border-radius: 0 0 20px 20px; |
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.user-info { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.user-left { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar { |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
background: #2196f3; |
|
|
|
border-radius: 12px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
color: white; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
margin-right: 15px; |
|
|
|
|
|
|
|
.el-avatar { |
|
|
|
background: #2196f3; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user-name { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.user-department { |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
// 月份筛选 |
|
|
|
.filter-section { |
|
|
|
padding: 15px 20px; |
|
|
|
background: white; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.month-tabs { |
|
|
|
display: flex; |
|
|
|
background: #f8f9fa; |
|
|
|
border-radius: 8px; |
|
|
|
padding: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.month-tab { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
padding: 10px 0; |
|
|
|
border-radius: 6px; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 500; |
|
|
|
color: #666; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&.active { |
|
|
|
background: #2196f3; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 统计信息区域 |
|
|
|
.statistics-section { |
|
|
|
padding: 10px 20px; |
|
|
|
background: white; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.statistics-cards { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.statistics-card { |
|
|
|
background: #f8f9fa; |
|
|
|
border-radius: 8px; |
|
|
|
padding: 12px 8px; |
|
|
|
text-align: center; |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(0.95); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.statistics-number { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 4px; |
|
|
|
line-height: 1; |
|
|
|
|
|
|
|
&.late { |
|
|
|
color: #f56c6c; |
|
|
|
} |
|
|
|
|
|
|
|
&.early { |
|
|
|
color: #e6a23c; |
|
|
|
} |
|
|
|
|
|
|
|
&.normal { |
|
|
|
color: #67c23a; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.statistics-label { |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
// 记录列表区域 |
|
|
|
.record-section { |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-wrapper { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 60px 20px; |
|
|
|
color: #666; |
|
|
|
|
|
|
|
i { |
|
|
|
font-size: 24px; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.empty-wrapper { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 60px 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-text { |
|
|
|
font-size: 16px; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.record-list { |
|
|
|
padding: 0 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.record-item { |
|
|
|
display: flex; |
|
|
|
background: white; |
|
|
|
border-radius: 12px; |
|
|
|
padding: 12px; |
|
|
|
margin-bottom: 12px; |
|
|
|
transition: all 0.3s ease; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(0.98); |
|
|
|
} |
|
|
|
|
|
|
|
// 今天的记录特殊样式 |
|
|
|
&.is-today { |
|
|
|
background: linear-gradient(135deg, #fff9e6, #ffffff); |
|
|
|
} |
|
|
|
|
|
|
|
// 周末的记录特殊样式 |
|
|
|
&.is-weekend { |
|
|
|
background: linear-gradient(135deg, #f0f8ff, #ffffff); |
|
|
|
} |
|
|
|
|
|
|
|
// 今天且是周末的组合样式 |
|
|
|
&.is-today.is-weekend { |
|
|
|
background: linear-gradient(135deg, #fff0f5, #ffffff); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.record-date { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 60px; |
|
|
|
margin-right: 16px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.date-day { |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.date-month { |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
margin: 2px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.date-weekday { |
|
|
|
font-size: 10px; |
|
|
|
color: #999; |
|
|
|
background: #f0f0f0; |
|
|
|
padding: 2px 6px; |
|
|
|
border-radius: 4px; |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&.is-today { |
|
|
|
background: #ffd700; |
|
|
|
color: #333; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
&.is-weekend { |
|
|
|
background: #87ceeb; |
|
|
|
color: white; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
&.is-today.is-weekend { |
|
|
|
background: #ff69b4; |
|
|
|
color: white; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.today-badge { |
|
|
|
font-size: 8px; |
|
|
|
color: #ff6b35; |
|
|
|
background: linear-gradient(135deg, #fff2e6, #ffe6d9); |
|
|
|
padding: 2px 4px; |
|
|
|
border-radius: 6px; |
|
|
|
margin-top: 4px; |
|
|
|
text-align: center; |
|
|
|
border: 1px solid #ffb088; |
|
|
|
animation: pulse 2s infinite; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
|
0% { |
|
|
|
box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); |
|
|
|
} |
|
|
|
70% { |
|
|
|
box-shadow: 0 0 0 6px rgba(255, 107, 53, 0); |
|
|
|
} |
|
|
|
100% { |
|
|
|
box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.record-content { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.record-group { |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
margin-bottom: 8px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.record-times { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.time-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.time-label { |
|
|
|
font-size: 13px; |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
width: 80px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.time-value { |
|
|
|
flex: 1; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.status-text { |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
padding: 2px 8px; |
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
&.status-none { |
|
|
|
color: #909399; |
|
|
|
background: #f4f4f5; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-normal { |
|
|
|
color: #409eff; |
|
|
|
background: #ecf5ff; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-late { |
|
|
|
color: #f56c6c; |
|
|
|
background: #fef0f0; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-early { |
|
|
|
color: #e6a23c; |
|
|
|
background: #fdf6ec; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-update { |
|
|
|
color: #67c23a; |
|
|
|
background: #f0f9ff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.record-remark { |
|
|
|
margin-top: 8px; |
|
|
|
padding-top: 8px; |
|
|
|
border-top: 1px solid #f0f0f0; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.remark-label { |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.remark-text { |
|
|
|
color: #333; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
</style> |
lizhuang
2 days ago