754 lines
19 KiB
Vue
754 lines
19 KiB
Vue
<template>
|
|
<view class="paragraph-container">
|
|
<view class="header-section">
|
|
<view class="header-title">
|
|
<text class="title">">分段数据</text>
|
|
<text class="subtitle">学生分段训练成绩分析</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="select-section">
|
|
<view class="select-label">
|
|
<text class="label-text">">选择项目</text>
|
|
</view>
|
|
<picker mode="selector" :range="projectOptions" range-key="name" :value="selectedProjectIndex"
|
|
@change="handleProjectChange">
|
|
<view class="picker-wrapper">
|
|
<text class="picker-text">{{ selectedProjectName }}</text>
|
|
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="calendar-wrapper" v-if="selectedProjectId">
|
|
<uni-calendar
|
|
:insert="true"
|
|
:lunar="false"
|
|
:show-month="true"
|
|
:selected="selectedDates"
|
|
@monthSwitch="handleMonthSwitch"
|
|
@change="handleDateChange">
|
|
</uni-calendar>
|
|
</view>
|
|
|
|
<view class="select-section" v-if="selectedProjectId && selectedDate">
|
|
<view class="select-label">
|
|
<text class="label-text">选择学生</text>
|
|
</view>
|
|
<view class="picker-wrapper" @click="showStudentSelect = true">
|
|
<text class="picker-text">{{ selectedStudentDisplay }}</text>
|
|
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-overlay" v-if="showStudentSelect" @click="closeStudentSelect"></view>
|
|
<view class="student-picker-modal" v-if="showStudentSelect">
|
|
<view class="picker-header">
|
|
<text class="header-title">选择学生</text>
|
|
<view class="header-actions">
|
|
<text class="action-btn" @click="selectAllStudents">全选</text>
|
|
<text class="action-btn primary" @click="confirmStudentSelect">确定</text>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="student-list" scroll-y>
|
|
<view v-for="(student, index) in studentList" :key="student.id" class="student-item"
|
|
:class="{ 'selected': selectedStudentIndexes.includes(index) }"
|
|
@click="toggleStudentSelect(index)">
|
|
<view class="item-checkbox">
|
|
<view class="checkbox-inner" :class="{ 'checked': selectedStudentIndexes.includes(index) }">
|
|
<u-icon v-if="selectedStudentIndexes.includes(index)" name="checkmark" size="14"
|
|
color="#fff"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="item-avatar">
|
|
<view class="avatar-circle"
|
|
:class="{ 'male': student.gender === '男', 'female': student.gender === '女' }">
|
|
<text class="avatar-text">{{ student.name.charAt(0) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-info">
|
|
<text class="item-name">{{ student.name }}</text>
|
|
<view class="item-meta">
|
|
<text class="gender-badge"
|
|
:class="{ 'male': student.gender === '男', 'female': student.gender === '女' }">
|
|
{{ student.gender }}
|
|
</text>
|
|
<text class="age-text">{{ student.age }}岁</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="table-section" v-if="selectedDate && selectedStudentIndexes.length > 0 && tableData.length > 0">
|
|
<view class="table-wrapper-scroll">
|
|
<view class="table-header">
|
|
<view class="header-row">
|
|
<view class="header-cell" style="width: 100px;">日期</view>
|
|
<view class="header-cell" style="width: 100px;">姓名</view>
|
|
<view class="header-cell" style="width: 120px;">项目</view>
|
|
<view class="header-cell" style="width: 100px;">20米</view>
|
|
<view class="header-cell" style="width: 100px;">70米</view>
|
|
<view class="header-cell" style="width: 100px;">120米</view>
|
|
<view class="header-cell" style="width: 100px;">170米</view>
|
|
</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="body-row" :class="{ 'even': rowIndex % 2 === 0, 'odd': rowIndex % 2 === 1 }">
|
|
<view class="body-cell" style="width: 100px;">{{ row.date }}</view>
|
|
<view class="body-cell" style="width: 100px;">{{ row.name }}</view>
|
|
<view class="body-cell" style="width: 120px;">{{ row.projectName }}</view>
|
|
<view class="body-cell" style="width: 100px;">{{ row.segment20 }}</view>
|
|
<view class="body-cell" style="width: 100px;">{{ row.segment70 }}</view>
|
|
<view class="body-cell" style="width: 100px;">{{ row.segment120 }}</view>
|
|
<view class="body-cell" style="width: 100px;">{{ row.segment170 }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="empty-container" v-if="selectedDate && selectedStudentIndexes.length > 0 && tableData.length === 0">
|
|
<view class="empty-icon">
|
|
<u-icon name="file-text" size="80" color="#ccc"></u-icon>
|
|
</view>
|
|
<text class="empty-text">该日期暂无分段数据</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onShow, onLoad } from "@dcloudio/uni-app"
|
|
import { Service } from '@/Service/Service'
|
|
import { ref, computed } from 'vue'
|
|
|
|
interface Project {
|
|
id: string
|
|
name: string
|
|
}
|
|
|
|
interface Student {
|
|
id: string
|
|
name: string
|
|
gender: string
|
|
age: number
|
|
}
|
|
|
|
interface TableDataItem {
|
|
date: string
|
|
name: string
|
|
projectName: string
|
|
segment20: string
|
|
segment70: string
|
|
segment120: string
|
|
segment170: string
|
|
}
|
|
|
|
const currentYear = ref(new Date().getFullYear())
|
|
const currentMonth = ref(new Date().getMonth() + 1)
|
|
const selectedDate = ref('')
|
|
|
|
const projectList = ref<Project[]>([
|
|
{ id: '1', name: '100米自由泳' },
|
|
{ id: '2', name: '200米自由泳' },
|
|
{ id: '3', name: '50米蛙泳' },
|
|
{ id: '4', name: '100米蝶泳' }
|
|
])
|
|
|
|
const projectOptions = ref(projectList.value)
|
|
const selectedProjectIndex = ref(-1)
|
|
const selectedProjectId = ref('')
|
|
|
|
const selectedProjectName = computed(() => {
|
|
if (selectedProjectIndex.value === -1) {
|
|
return '请选择项目'
|
|
}
|
|
return projectList.value[selectedProjectIndex.value]?.name || '请选择项目'
|
|
})
|
|
|
|
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: '分段' }
|
|
])
|
|
|
|
const studentList = ref<Student[]>([])
|
|
const selectedStudentIndexes = ref<number[]>([])
|
|
const selectedStudentIds = ref<string[]>([])
|
|
const showStudentSelect = ref(false)
|
|
|
|
const selectedStudentDisplay = computed(() => {
|
|
if (selectedStudentIndexes.value.length === 0) {
|
|
return '请选择学生'
|
|
} else {
|
|
const names = selectedStudentIndexes.value.map(index => studentList.value[index].name)
|
|
return names.length > 2 ? `${names.slice(0, 2).join(', ')}等${names.length}人` : names.join(', ')
|
|
}
|
|
})
|
|
|
|
const tableData = ref<TableDataItem[]>([])
|
|
|
|
const mockData: Record<string, Record<string, any[]>> = {
|
|
'1': {
|
|
'2026-03-12': [
|
|
{ name: '王小明', projectName: '100米'自由泳', segment20: 0.037, segment70: 0.128, segment120: 0.219, segment170: 0.311 },
|
|
{ name: '张小红', projectName: '100米'自由泳', segment20: 0.042, segment70: 0.145, segment120: 0.248, segment170: 0.352 },
|
|
{ name: '李小龙', projectName: '100米'自由泳', segment20: 0.032, segment70: 0.112, segment120: 0.192, segment170: 0.272 }
|
|
],
|
|
'2026-03-14': [
|
|
{ name: '王小明', projectName: '100米'自由泳', segment20: 0.035, segment70: 0.122, segment120: 0.209, segment170: 0.296 },
|
|
{ name: '张小红', projectName: '100米'自由泳', segment20: 0.040, segment70: 0.138, segment120: 0.236, segment170: 0.334 }
|
|
]
|
|
},
|
|
'2': {
|
|
'2026-03-16': [
|
|
{ name: '赵小芳', projectName: '200米'自由泳', segment20: 0.038, segment70: 0.133, segment120: 0.228, segment170: 0.323 }
|
|
]
|
|
},
|
|
'3': {
|
|
'2026-03-19': [
|
|
{ name: '陈小刚', projectName: '50米蛙泳', segment20: 0.044, segment70: 0.154, segment120: 0.264, segment170: 0.374 }
|
|
]
|
|
},
|
|
'4': {
|
|
'2026-03-24': [
|
|
{ name: '周小丽', projectName: '100米'蝶泳', segment20: 0.041, segment70: 0.143, segment120: 0.245, segment170: 0.347 }
|
|
]
|
|
}
|
|
}
|
|
|
|
const mockStudents: Record<string, Student[]> = {
|
|
'1': [
|
|
{ id: 's1', name: '王小明', gender: '男', age: 12 },
|
|
{ id: 's2', name: '张小红', gender: '女', age: 11 },
|
|
{ id: 's3', name: '李小龙', gender: '男', age: 13 }
|
|
],
|
|
'2': [
|
|
{ id: 's4', name: '赵小芳', gender: '女', age: 10 }
|
|
],
|
|
'3': [
|
|
{ id: 's5', name: '陈小刚', gender: '男', age: 14 }
|
|
],
|
|
'4': [
|
|
{ id: 's6', name: '周小丽', gender: '女', age: 12 }
|
|
]
|
|
}
|
|
|
|
onLoad(() => {
|
|
loadData()
|
|
})
|
|
|
|
onShow(() => {
|
|
|
|
})
|
|
|
|
const loadData = () => {
|
|
|
|
}
|
|
|
|
const handleProjectChange = (e: any) => {
|
|
const index = e.detail.value
|
|
selectedProjectIndex.value = index
|
|
const selectedProject = projectList.value[index]
|
|
|
|
if (selectedProject) {
|
|
selectedProjectId.value = selectedProject.id
|
|
selectedDate.value = ''
|
|
selectedStudentIndexes.value = []
|
|
selectedStudentIds.value = []
|
|
tableData.value = []
|
|
loadProjectStudents(selectedProject.id)
|
|
}
|
|
}
|
|
|
|
const handleMonthSwitch = (e: any) => {
|
|
currentYear.value = e.year
|
|
currentMonth.value = e.month
|
|
loadData()
|
|
selectedDate.value = ''
|
|
selectedStudentIndexes.value = []
|
|
selectedStudentIds.value = []
|
|
tableData.value = []
|
|
}
|
|
|
|
const handleDateChange = (e: any) => {
|
|
const date = e.fulldate
|
|
selectedDate.value = date
|
|
selectedStudentIndexes.value = []
|
|
selectedStudentIds.value = []
|
|
tableData.value = []
|
|
}
|
|
|
|
const loadProjectStudents = (projectId: string) => {
|
|
const students = mockStudents[projectId] || []
|
|
studentList.value = students
|
|
console.log(`项目 ${projectId} 的学生列表加载完成，共 ${students.length} 位学生`)
|
|
}
|
|
|
|
const selectAllStudents = () => {
|
|
selectedStudentIndexes.value = studentList.value.map((_, index) => index)
|
|
}
|
|
|
|
const toggleStudentSelect = (index: number) => {
|
|
const idx = selectedStudentIndexes.value.indexOf(index)
|
|
if (idx > -1) {
|
|
selectedStudentIndexes.value.splice(idx, 1)
|
|
} else {
|
|
selectedStudentIndexes.value.push(index)
|
|
}
|
|
}
|
|
|
|
const confirmStudentSelect = () => {
|
|
selectedStudentIds.value = selectedStudentIndexes.value.map(index => studentList.value[index].id)
|
|
showStudentSelect.value = false
|
|
filterAndLoadData()
|
|
}
|
|
|
|
const closeStudentSelect = () => {
|
|
showStudentSelect.value = false
|
|
}
|
|
|
|
const filterAndLoadData = () => {
|
|
if (!selectedDate.value || selectedStudentIndexes.value.length === 0) {
|
|
tableData.value = []
|
|
return
|
|
}
|
|
|
|
const projectData = mockData[selectedProjectId.value]
|
|
if (!projectData) {
|
|
tableData.value = []
|
|
return
|
|
}
|
|
|
|
const dateData = projectData[selectedDate.value]
|
|
if (!dateData) {
|
|
tableData.value = []
|
|
return
|
|
}
|
|
|
|
const selectedStudentNames = selectedStudentIndexes.value.map(index => studentList.value[index].name)
|
|
const filteredData = dateData.filter(item => selectedStudentNames.includes(item.name))
|
|
|
|
tableData.value = filteredData.map(item => ({
|
|
date: selectedDate.value,
|
|
name: item.name,
|
|
projectName: item.projectName,
|
|
segment20: item.segment20.toFixed(3),
|
|
segment70: item.segment70.toFixed(3),
|
|
segment120: item.segment120.toFixed(3),
|
|
segment170: item.segment170.toFixed(3)
|
|
}))
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.paragraph-container {
|
|
min-height: 100vh;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
/* ==================== 页面标题区域) ==================== */
|
|
.header-section {
|
|
background-color: #fff;
|
|
padding: 32rpx 28rpx 24rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.header-title {
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ==================== 选择区域通用样式 ==================== */
|
|
.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;
|
|
transition: all 0.3s ease;
|
|
|
|
.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: #1890ff;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.picker-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ==================== 日历组件包装 ==================== */
|
|
.calendar-wrapper {
|
|
background-color: #fff;
|
|
margin: 0 20rpx 20rpx;
|
|
padding: 20rpx 0;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* ==================== 学生选择器弹窗 ==================== */
|
|
.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, #1890ff 0%, #40a9ff 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, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
|
|
box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 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, 0kt, 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: #1890ff;
|
|
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
|
|
box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 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, #1890ffkt 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 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;
|
|
}
|
|
|
|
/* ==================== 表格区域 ==================== */
|
|
.table-section {
|
|
margin: 0 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.table-wrapper-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-header {
|
|
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
|
|
|
.header-row {
|
|
display: flex;
|
|
|
|
.header-cell {
|
|
min-width: 100px;
|
|
padding: 24rpx 16rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-right: 1rpx solid rgba(255, 255, 255, 0.1);
|
|
flex-shrink: 0;
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-body {
|
|
.body-row {
|
|
display: flex;
|
|
transition: all 0.3s ease;
|
|
|
|
&.even {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
&.odd {
|
|
background-color: #fff;
|
|
}
|
|
|
|
&:active {
|
|
background-color: #e6f7ff;
|
|
}
|
|
|
|
.body-cell {
|
|
min-width: 100px;
|
|
padding: 24rpx 16rpx;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
border-right: 1rpx solid #f0f0f0;
|
|
flex-shrink: 0;
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ==================== 空状态容器 ==================== */
|
|
.empty-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 80rpx 40rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.empty-icon {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style> |