4-23
This commit is contained in:
@@ -1,54 +1,70 @@
|
||||
<template>
|
||||
<view class="paragraph-container">
|
||||
<view class="header-section">
|
||||
<view class="header-title">
|
||||
<text class="title">分段数据</text>
|
||||
<text class="subtitle">学生分段训练成绩分析</text>
|
||||
<!-- 项目选择卡片 -->
|
||||
<view class="filter-card ">
|
||||
<view class="card-title">
|
||||
<u-icon name="grid" size="18" color="#1890ff"></u-icon>
|
||||
<text>选择项目</text>
|
||||
</view>
|
||||
<view class="picker-row" @click="showProject = true">
|
||||
<text class="picker-text" :class="{ placeholder: !selectProcet }">{{ selectProcet || '请选择项目' }}</text>
|
||||
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<up-picker v-model:show="showProject" keyName="name" valueName="planId" @confirm="selectProcetFunc" :columns="projectOptions"></up-picker>
|
||||
|
||||
<!-- 日期选择卡片 -->
|
||||
<view class="filter-card " v-if="selectProcet">
|
||||
<view class="card-title">
|
||||
<u-icon name="calendar" size="18" color="#13c2c2"></u-icon>
|
||||
<text>日期范围</text>
|
||||
</view>
|
||||
<view class="date-filter" @click="openCalendar">
|
||||
<view class="date-item">
|
||||
<text class="date-label">开始日期</text>
|
||||
<text class="date-value" :class="{ placeholder: !begin }">{{ begin || '请选择' }}</text>
|
||||
</view>
|
||||
<view class="date-divider"></view>
|
||||
<view class="date-item">
|
||||
<text class="date-label">结束日期</text>
|
||||
<text class="date-value" :class="{ placeholder: !end }">{{ end || '请选择' }}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="16" color="#bbb" class="date-arrow"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 项目选择区域 -->
|
||||
<view class="select-section">
|
||||
<view class="select-label">
|
||||
<view class="label-text" style="margin-bottom: 20rpx;">选择项目</view>
|
||||
<view class="picker-wrapper" @click="showProject=true">
|
||||
<text class="picker-text">{{ selectProcet || '请选择项目' }}</text>
|
||||
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
|
||||
</view>
|
||||
<!-- 学生选择卡片 -->
|
||||
<view class="filter-card " v-if="selectProcet && begin">
|
||||
<view class="card-title">
|
||||
<u-icon name="account" size="18" color="#52c41a"></u-icon>
|
||||
<text>选择学生</text>
|
||||
</view>
|
||||
</view>
|
||||
<up-picker v-model:show="showProject" keyName="name" valueName="planId" @confirm="selectProcetFunc"
|
||||
:columns="projectOptions"></up-picker>
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<view class="date-filter" style="margin: 20rpx 20rpx 0;" v-if="selectProcet">
|
||||
<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 class="picker-row" @click="showStudentPicker = true">
|
||||
<text class="picker-text" :class="{ placeholder: selectedStudentIndexes.length === 0 }">{{ selectedStudentDisplay }}</text>
|
||||
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 学生选择区域 -->
|
||||
<view class="select-section" v-if="selectProcet && begin ">
|
||||
<view class="select-label">
|
||||
<text class="label-text">选择学生</text>
|
||||
<!-- 数据表格 -->
|
||||
<view v-if="tableData.length > 0" class="data-card">
|
||||
<view class="card-title">
|
||||
<u-icon name="list" size="18" color="#faad14"></u-icon>
|
||||
<text>分段数据</text>
|
||||
</view>
|
||||
<view class="picker-wrapper" @click="showStudentPicker = true">
|
||||
<text class="picker-text">{{ selectedStudentDisplay }}</text>
|
||||
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
|
||||
<view class="table-wrap">
|
||||
<next-table :show-header="true" :columns="columns" :stripe="true" :fit="false" :show-summary="false" :data="tableData" :showPaging="true" :pageIndex="page" @pageChange="pageChange" @cellClick="cellClick" :pageTotal="pageTotal"></next-table>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-card" v-if="begin && selectedStudentIndexes.length > 0 && tableData.length === 0">
|
||||
<u-icon name="file-text" size="64" color="#d9d9d9"></u-icon>
|
||||
<text class="empty-text">该日期暂无分段数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 日历弹窗 -->
|
||||
<up-calendar :show="showCalendar" mode="date" minDate="1776240407000" @confirm="calendarConfirm" @close="calendarClose"></up-calendar>
|
||||
|
||||
<!-- 学生多选选择器 -->
|
||||
<view class="modal-overlay" v-if="showStudentPicker" @click="closeStudentPicker"></view>
|
||||
<view class="student-picker-modal" v-if="showStudentPicker">
|
||||
@@ -60,45 +76,19 @@
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="student-list" scroll-y>
|
||||
<view v-for="(student, index) in studentList" :key="student.studentId" class="student-item"
|
||||
:class="{ 'selected': selectedStudentIndexes.includes(index) }"
|
||||
@click="toggleStudentSelection(index)">
|
||||
<view v-for="(student, index) in studentList" :key="student.studentId" class="student-item" :class="{ selected: selectedStudentIndexes.includes(index) }" @click="toggleStudentSelection(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 class="checkbox-inner" :class="{ checked: selectedStudentIndexes.includes(index) }">
|
||||
<u-icon v-if="selectedStudentIndexes.includes(index)" name="checkmark" size="12" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-avatar">
|
||||
<view class="avatar-circle male">
|
||||
<text class="avatar-text">{{ student.name.charAt(0) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<text class="item-name">{{ student.name }}</text>
|
||||
|
||||
<text class="avatar-text">{{ student.name.charAt(0) }}</text>
|
||||
</view>
|
||||
<text class="item-name">{{ student.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<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" @cellClick="cellClick"
|
||||
:pageTotal="pageTotal"></next-table>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="empty-container" v-if="begin && 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>
|
||||
|
||||
<!-- 日历弹窗 -->
|
||||
<up-calendar :show="showCalendar" mode="date" minDate='1776240407000' @confirm="calendarConfirm"
|
||||
@close="calendarClose">
|
||||
</up-calendar>
|
||||
|
||||
<!-- 分段详情弹窗 -->
|
||||
<up-popup :show="showSegmentPopup" @close="closeSegmentPopup" @open="openSegmentPopup" mode="center" round="16" bgColor="#fff">
|
||||
@@ -151,9 +141,9 @@
|
||||
segment120 : string
|
||||
segment170 : string
|
||||
}
|
||||
|
||||
let row=ref('')
|
||||
|
||||
|
||||
let row = ref('')
|
||||
|
||||
// 项目选择
|
||||
let showProject = ref(false)
|
||||
let selectProcet = ref('')
|
||||
@@ -206,11 +196,7 @@
|
||||
|
||||
const tableData = ref<TableDataItem[]>([])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
onLoad(() => {
|
||||
getProjectData()
|
||||
})
|
||||
|
||||
@@ -323,7 +309,7 @@
|
||||
page.value = e
|
||||
getRecordList()
|
||||
}
|
||||
|
||||
|
||||
const showSegmentPopup = ref(false)
|
||||
|
||||
interface SegmentItem {
|
||||
@@ -343,442 +329,322 @@
|
||||
}
|
||||
|
||||
const cellClick = (rows: any) => {
|
||||
row.value=rows.subsection
|
||||
row.value = rows.subsection
|
||||
openSegmentPopup()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
background-color: #e8ecf3;
|
||||
}
|
||||
|
||||
.paragraph-container {
|
||||
min-height: 100vh;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* ==================== 页面标题区域) ==================== */
|
||||
.header-section {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 28rpx 24rpx;
|
||||
/* 通用卡片 */
|
||||
.filter-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
}
|
||||
|
||||
.header-title {
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24rpx;
|
||||
/* 选择行 */
|
||||
.picker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 22rpx 24rpx;
|
||||
background: #f5f7fa;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #e4e8ee;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active {
|
||||
background: #eef1f6;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
|
||||
&.placeholder {
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 日期选择 */
|
||||
.date-filter {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
background: #f0fafa;
|
||||
border-radius: 12rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border: 1rpx solid #d6f0f0;
|
||||
transition: all 0.2s;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background: #e6f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 选择区域通用样式 ==================== */
|
||||
.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: #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);
|
||||
.date-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
.date-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.date-value {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.placeholder {
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.date-divider {
|
||||
width: 2rpx;
|
||||
height: 50rpx;
|
||||
background: #b2dfdb;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.date-arrow {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
/* 数据表格卡片 */
|
||||
.data-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 40rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
.empty-text {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
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);
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
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 {
|
||||
/* 学生选择弹窗 */
|
||||
.student-picker-modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 60vh;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideUp 0.25s ease;
|
||||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 28rpx;
|
||||
background: #eeeeee;
|
||||
font-weight: 500;
|
||||
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background: #faad14;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.student-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 22rpx 20rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
background: #f8f9fa;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:active {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #fff3e0;
|
||||
border: 1rpx solid #ffcc80;
|
||||
}
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
flex-shrink: 0;
|
||||
|
||||
.checkbox-inner {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #bfbfbf;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.checked {
|
||||
border-color: #faad14;
|
||||
background: #faad14;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
flex-shrink: 0;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
background: #1890ff;
|
||||
display: flex;
|
||||
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 {
|
||||
.avatar-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
.item-name {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 表格深度样式 */
|
||||
::v-deep .sl-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .sl-table__header {
|
||||
background: #faad14 !important;
|
||||
}
|
||||
|
||||
::v-deep .sl-table__header__cell {
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
::v-deep .sl-table__body__cell {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
padding: 22rpx 14rpx;
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
/* 分段详情弹窗 */
|
||||
.segment-popup-content {
|
||||
width: 620rpx;
|
||||
max-height: 70vh;
|
||||
@@ -853,4 +719,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user