第一版
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="timing-container">
|
||||
<view class="baogan-container">
|
||||
<!-- 页面标题区域 -->
|
||||
<view class="header-section">
|
||||
<view class="header-title">
|
||||
@@ -8,57 +8,38 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历组件 -->
|
||||
<view class="calendar-wrapper">
|
||||
<uni-calendar
|
||||
:insert="true"
|
||||
:lunar="false"
|
||||
:show-month="true"
|
||||
:selected="selectedDates"
|
||||
@monthSwitch="handleMonthSwitch"
|
||||
@change="handleDateChange">
|
||||
</uni-calendar>
|
||||
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<view class="date-filter" style="margin: 20rpx 20rpx 0;">
|
||||
<view class="date-picker" @click="openCalendar()">
|
||||
<up-icon name="calendar" color="#3B82F6" size="25"></up-icon>
|
||||
<view class="date-text">
|
||||
<text class="label">开始日期</text>
|
||||
<text class="value">{{ begin || '请选择' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="date-picker" @click="openCalendar()">
|
||||
<up-icon name="calendar" color="#3B82F6" size="25"></up-icon>
|
||||
<view class="date-text">
|
||||
<text class="label">结束日期</text>
|
||||
<text class="value">{{ end || '请选择' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选中日期数据统计 -->
|
||||
<!-- 仅在选择了日期时显示统计信息 -->
|
||||
<view class="date-summary" v-if="selectedDate">
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">选中日期</text>
|
||||
<text class="summary-value">{{ selectedDate }}</text>
|
||||
</view>
|
||||
<view class="summary-divider"></view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">训练人数</text>
|
||||
<text class="summary-value">{{ tableData.length }}人</text>
|
||||
</view>
|
||||
<view class="summary-divider"></view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">平均速度</text>
|
||||
<text class="summary-value">{{ averageSpeed }}m/s</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<!-- 仅在选择了日期时显示表格 -->
|
||||
<view class="table-section" v-if="selectedDate">
|
||||
<sl-table
|
||||
:columns="columns"
|
||||
:tableData="tableData"
|
||||
@cell-click="handleCellClick">
|
||||
<!-- 空数据插槽 -->
|
||||
<template #empty>
|
||||
<view class="empty-container">
|
||||
<view class="empty-icon">
|
||||
<u-icon name="file-text" size="80" color="#ccc"></u-icon>
|
||||
</view>
|
||||
<text class="empty-text">该日期暂无训练数据</text>
|
||||
</view>
|
||||
</template>
|
||||
</sl-table>
|
||||
<view v-if="tableData.length>0" class="table-section">
|
||||
<next-table :show-header="true" :columns="columns" :stripe="true" :fit="false" :show-summary='false'
|
||||
:data="tableData" :showPaging='true' :pageIndex="page" @pageChange="pageChange"
|
||||
:pageTotal="pageTotal"></next-table>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 日历弹窗 -->
|
||||
<up-calendar :show="showCalendar" mode="date" minDate='1776240407000' @confirm="calendarConfirm"
|
||||
@close="calendarClose">
|
||||
</up-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -66,250 +47,143 @@
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app"
|
||||
import { Service } from '@/Service/Service'
|
||||
import { ref, computed } from 'vue'
|
||||
import { PlanService } from '@/Service/swimming/PlanService'
|
||||
|
||||
// ==================== 响应式数据定义 ====================
|
||||
interface Project {
|
||||
id : string
|
||||
name : string
|
||||
}
|
||||
|
||||
interface Student {
|
||||
id : string
|
||||
name : string
|
||||
gender : string
|
||||
age : number
|
||||
}
|
||||
|
||||
interface TableDataItem {
|
||||
date : string
|
||||
name : string
|
||||
projectName : string
|
||||
plan : string
|
||||
completion : number
|
||||
detail : string
|
||||
}
|
||||
|
||||
interface StudentRecord {
|
||||
student : Student
|
||||
date : string
|
||||
segments : TableDataItem[]
|
||||
}
|
||||
|
||||
// 当前年份，用于月份切换时记录当前年份
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
|
||||
// 当前月份（1-12），用于月份切换时记录当前月份
|
||||
const currentMonth = ref(new Date().getMonth() + 1)
|
||||
|
||||
// 当前选中的日期，格式为 'YYYY-MM-DD'
|
||||
// 空字符串表示未选择日期
|
||||
const selectedDate = ref('')
|
||||
|
||||
// ==================== 表格配置 ====================
|
||||
// 项目选择
|
||||
let showProject = ref(false)
|
||||
let selectProcet = ref('')
|
||||
let selectId = ref('')
|
||||
|
||||
// 日期选择
|
||||
const begin = ref<string>('')
|
||||
const end = ref<string>('')
|
||||
const showCalendar = ref(false)
|
||||
const calendarType = ref<'begin' | 'end'>('begin')
|
||||
|
||||
// 分页相关
|
||||
let page = ref(1)
|
||||
let status = ref('loadmore')
|
||||
|
||||
let pageTotal = ref(10)
|
||||
|
||||
// 表格列定义
|
||||
// label: 列标题
|
||||
// prop: 数据项中对应的字段名
|
||||
// width: 列宽度
|
||||
const columns = ref([
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
width: '100px'
|
||||
name: 'studentName',
|
||||
},
|
||||
{
|
||||
label: '项目名称',
|
||||
prop: 'projectName',
|
||||
width: '150px'
|
||||
name: 'planName',
|
||||
},
|
||||
{
|
||||
label: '最大速度',
|
||||
prop: 'maxSpeed',
|
||||
width: '120px'
|
||||
label: '最快速度',
|
||||
name: 'quicklyTime',
|
||||
},
|
||||
{
|
||||
label: '计时数据',
|
||||
prop: 'timingData',
|
||||
width: '150px'
|
||||
label: '详细数据',
|
||||
name: 'time',
|
||||
width:'200'
|
||||
}
|
||||
])
|
||||
|
||||
// ==================== TypeScript 接口定义 ====================
|
||||
|
||||
// 表格数据项接口定义
|
||||
// 描述一条计时记录的数据结构
|
||||
interface TableDataItem {
|
||||
name: string // 学员姓名
|
||||
projectName: string // 项目名称（如：100米自由泳）
|
||||
maxSpeed: number // 最大速度，单位：m/s
|
||||
timingData: string // 计时数据（如：1.23, 1.25, 1.24）
|
||||
}
|
||||
|
||||
// ==================== 响应式数据 - 表格数据 ====================
|
||||
|
||||
// 表格数据列表
|
||||
// 存储当前选中日期的所有计时记录
|
||||
// 初始状态为空数组，等待用户选择日期后加载数据
|
||||
const tableData = ref<TableDataItem[]>([])
|
||||
|
||||
// ==================== 响应式数据 - 日历标记 ====================
|
||||
|
||||
// 日历打点数据
|
||||
// 用于在日历上标记有训练记录的日期
|
||||
// date: 日期字符串，格式为 'YYYY-MM-DD'
|
||||
// info: 显示在日期上的标记信息
|
||||
const selectedDates = ref([
|
||||
{ date: '2026-03-12', info: '训练' },
|
||||
{ date: '2026-03-14', info: '训练' },
|
||||
{ date: '2026-03-16', info: '训练' },
|
||||
{ date: '2026-03-19', info: '训练' },
|
||||
{ date: '2026-03-24', info: '训练' }
|
||||
])
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
|
||||
// 平均速度计算属性
|
||||
// 计算当前选中日期所有学员的平均最大速度
|
||||
// 如果没有数据则返回 0
|
||||
const averageSpeed = computed(() => {
|
||||
// 如果没有数据，返回 0
|
||||
if (tableData.value.length === 0) return 0
|
||||
|
||||
// 计算所有学员最大速度的总和
|
||||
const total = tableData.value.reduce((sum, item) => sum + item.maxSpeed, 0)
|
||||
|
||||
// 计算平均值，保留两位小数
|
||||
return (total / tableData.value.length).toFixed(2)
|
||||
})
|
||||
|
||||
// ======================= 模拟数据 ====================
|
||||
|
||||
// 模拟的训练数据
|
||||
// 键为日期字符串，值为该日期的计时记录列表
|
||||
// 在实际项目中，这里应该从后端 API 获取数据
|
||||
const mockData: Record<string, TableDataItem[]> = {
|
||||
'2026-03-12': [
|
||||
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.35s, 25.42s, 25.28s' },
|
||||
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.15s, 27.32s, 27.08s' },
|
||||
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.22, timingData: '24.68s, 24.75s, 24.62s' }
|
||||
],
|
||||
'2026-03-14': [
|
||||
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.18, timingData: '25.12s, 25.18s, 25.08s' },
|
||||
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.02, timingData: '26.85s, 26.92s, 26.78s' },
|
||||
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.92, timingData: '27.95s, 28.12s, 27.88s' },
|
||||
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.25, timingData: '24.52s, 24.58s, 24.48s' }
|
||||
],
|
||||
'2026-03-16': [
|
||||
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.12, timingData: '25.55s, 25.62s, 25.48s' },
|
||||
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.05, timingData: '26.72s, 26.85s, 26.68s' }
|
||||
],
|
||||
'2026-03-19': [
|
||||
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.20, timingData: '24.98s, 25.05s, 24.92s' },
|
||||
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.08, timingData: '26.45s, 26.52s, 26.38s' },
|
||||
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.95, timingData: '27.75s, 27.88s, 27.65s' },
|
||||
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.28, timingData: '24.35s, 24.42s, 24.28s' },
|
||||
{ name: '陈小刚', projectName: '50米自由泳', maxSpeed: 1.88, timingData: '28.25s, 28.38s, 28.15s' }
|
||||
],
|
||||
'2026-03-24': [
|
||||
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.30s, 25.38s, 25.25s' },
|
||||
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.10, timingData: '26.25s, 26.32s, 26.18s' },
|
||||
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.65s, 27.78s, 27.55s' }
|
||||
]
|
||||
}
|
||||
|
||||
// ==================== 生命周期钩子 ====================
|
||||
|
||||
// 页面加载时触发
|
||||
// 在页面初始化时执行，只执行一次
|
||||
onLoad(() => {
|
||||
// 加载当前月份的数据
|
||||
loadData()
|
||||
|
||||
})
|
||||
|
||||
// 页面显示时触发
|
||||
// 每次页面从后台切换到前台时执行
|
||||
// 可用于刷新页面显示的数据
|
||||
onShow(() => {
|
||||
// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
|
||||
// 例如：调用接口获取最新数据
|
||||
|
||||
})
|
||||
|
||||
// ==================== 业务逻辑方法 ====================
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
* 调用后端 API 获取数据
|
||||
* 当前为模拟数据，实际开发中应替换为真实 API 调用
|
||||
*/
|
||||
const loadData = () => {
|
||||
// TODO: 调用后端 API 获取数据
|
||||
// 示例代码：
|
||||
// Service.Request('/api/timing/data', 'GET', {
|
||||
// year: currentYear.value,
|
||||
// month: currentMonth.value
|
||||
// }).then(res => {
|
||||
// // 处理返回的数据
|
||||
// })
|
||||
const openCalendar = () => {
|
||||
showCalendar.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理表格单元格点击事件
|
||||
* @param event 点击事件对象，包含行索引、列索引、单元格数据等信息
|
||||
*/
|
||||
const handleCellClick = (event: any) => {
|
||||
// 在控制台输出点击事件信息，用于调试
|
||||
console.log('表格单元格点击事件:', event)
|
||||
|
||||
// TODO: 根据业务需求处理单元格点击
|
||||
// 例如：点击某行可以查看详细信息，点击某列可以进行排序等
|
||||
const calendarConfirm = (e : any) => {
|
||||
begin.value = e[0]
|
||||
end.value = e[e.length - 1]
|
||||
showCalendar.value = false
|
||||
getRecord()
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理日历月份切换事件
|
||||
* 当用户切换日历的月份时触发
|
||||
* @param e 切换事件对象，包含 year 和 month 属性
|
||||
*/
|
||||
const handleMonthSwitch = (e: any) => {
|
||||
// 更新当前年份
|
||||
currentYear.value = e.year
|
||||
|
||||
// 更新当前月份
|
||||
currentMonth.value = e.month
|
||||
|
||||
// 重新加载数据
|
||||
// 获取切换后月份的训练记录和日历标记
|
||||
loadData()
|
||||
|
||||
// 清空选中的日期
|
||||
// 因为切换了月份，之前选择的日期可能不再显示
|
||||
selectedDate.value = ''
|
||||
|
||||
// 清空表格数据
|
||||
tableData.value = []
|
||||
const calendarClose = () => {
|
||||
showCalendar.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理日历日期选择事件
|
||||
* 当用户点击日历上的某个日期时触发
|
||||
* @param e 选择事件对象，fulldate 属性包含完整的日期字符串
|
||||
*/
|
||||
const handleDateChange = (e: any) => {
|
||||
// 获取选择的完整日期，格式为 'YYYY-MM-DD'
|
||||
const date = e.fulldate
|
||||
|
||||
// 更新选中的日期
|
||||
selectedDate.value = date
|
||||
|
||||
// 根据选择的日期加载对应的训练数据
|
||||
// 检查模拟数据中是否存在该日期的数据
|
||||
if (mockData[date]) {
|
||||
// 如果存在，加载数据
|
||||
tableData.value = mockData[date]
|
||||
} else {
|
||||
// 如果不存在，清空数据（表格将显示空状态）
|
||||
tableData.value = []
|
||||
|
||||
const getRecord = () => {
|
||||
page.value = 1
|
||||
getRecordList()
|
||||
}
|
||||
|
||||
const getRecordList = () => {
|
||||
let data = {
|
||||
sTime: begin.value,
|
||||
eTime: end.value
|
||||
}
|
||||
PlanService.GetJishiLog(data).then(res => {
|
||||
if (res.code == 0) {
|
||||
pageTotal.value = res.data.pageTotal
|
||||
tableData.value = res.data.list
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// TODO: 实际项目中应该调用 API 获取该日期的计时数据
|
||||
// 示例代码：
|
||||
// Service.Request('/api/timing/detail', 'GET', {
|
||||
// date: date
|
||||
// }).then(res => {
|
||||
// // 处理返回的数据并更新表格
|
||||
// tableData.value = res.data
|
||||
// })
|
||||
|
||||
const pageChange = (e) => {
|
||||
page.value = e
|
||||
getRecordList()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 页面背景色设置
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// 页面容器
|
||||
.timing-container {
|
||||
.baogan-container {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* ==================== 页面标题区域 ==================== */
|
||||
.header-section {
|
||||
background-color: #fff;
|
||||
|
||||
padding: 32rpx 28rpx 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
@@ -329,29 +203,304 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 日历组件包装 ==================== */
|
||||
.calendar-wrapper {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
.date-filter {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
|
||||
.date-picker {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.date-text {
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-top: 4rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-section {
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.select-label {
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.label-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f0f0;
|
||||
border-color: #faad14;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student-picker-modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 70vh;
|
||||
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
z-index: 999;
|
||||
animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 36rpx 32rpx 28rpx;
|
||||
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
|
||||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-btn {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding: 14rpx 28rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
|
||||
box-shadow: 0 4rpx 16rpx rgba(250, 173, 20, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 20rpx 40rpx;
|
||||
|
||||
.student-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
|
||||
border-radius: 20rpx;
|
||||
margin-top: 16rpx;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06), 0 0 0 1rpx rgba(0, 0, 0, 0.04) inset;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.checkbox-inner {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.checked {
|
||||
border-color: #faad14;
|
||||
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
|
||||
box-shadow: 0 2rpx 8rpx rgba(250, 173, 20, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.avatar-circle {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.male {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
|
||||
}
|
||||
|
||||
&.female {
|
||||
background: linear-gradient(135deg, #fa8c16 0%, #ffa940 50%, #d46b08 100%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 34rpx;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.item-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.gender-badge {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 10rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.male {
|
||||
color: #1890ff;
|
||||
background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(64, 169, 255, 0.05) 100%);
|
||||
}
|
||||
|
||||
&.female {
|
||||
color: #fa8c16;
|
||||
background: linear-gradient(135deg, rgba(250, 140, 22, 0.1) 0%, rgba(255, 169, 64, 0.05) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.age-text {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
|
||||
backdrop-filter: blur(10rpx);
|
||||
z-index: 998;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* ==================== 日期数据统计卡片 ==================== */
|
||||
.date-summary {
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
// 统计项
|
||||
.summary-item {
|
||||
text-align: center;
|
||||
|
||||
// 标签文字
|
||||
.summary-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
@@ -359,15 +508,13 @@
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
// 数值文字
|
||||
.summary-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1890ff;
|
||||
color: #faad14;
|
||||
}
|
||||
}
|
||||
|
||||
// 分隔线
|
||||
.summary-divider {
|
||||
width: 1rpx;
|
||||
height: 50rpx;
|
||||
@@ -375,16 +522,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 表格区域 ==================== */
|
||||
.table-section {
|
||||
margin: 0 20rpx;
|
||||
margin: 20rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ==================== 空状态容器 ==================== */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -392,72 +537,79 @@
|
||||
justify-content: center;
|
||||
padding: 80rpx 40rpx;
|
||||
|
||||
// 空状态图标
|
||||
.empty-icon {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
// 空状态文字
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 提示状态容器 ==================== */
|
||||
// 用于在用户未选择日期时显示提示
|
||||
.hint-state {
|
||||
margin: 0 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 80rpx 40rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
// 提示图标
|
||||
.hint-icon {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
// 提示文字
|
||||
.hint-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== sl-table 样式覆盖 ==================== */
|
||||
// 表格容器
|
||||
::v-deep .sl-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 表头背景色 - 使用蓝色渐变（计时功能的主色调）
|
||||
::v-deep .sl-table__header {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%) !important;
|
||||
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%) !important;
|
||||
}
|
||||
|
||||
// 表头单元格样式
|
||||
::v-deep .sl-table__header__cell {
|
||||
color: #fff !important;
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
// 表格单元格样式
|
||||
::v-deep .sl-table__body__cell {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
padding: 24rpx 16rpx;
|
||||
}
|
||||
|
||||
// 偶数行背景色
|
||||
::v-deep .sl-table__body__row:nth-child(even) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
// 奇数行背景色
|
||||
::v-deep .sl-table__body__row:nth-child(odd) {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user