效果图：
我需要考虑常见的滚动实现方式及其性能问题。通常，使用JavaScript的setInterval或递归setTimeout来不断修改元素的transform或left属性是比较常见的方法，但这些方法可能会导致重排（reflow）和重绘（repaint），尤其是在频繁操作DOM时。此外，使用CSS动画或transition可能更高效，但用户明确要求用JavaScript，所以需要排除纯CSS方案。
然后，思考如何优化JavaScript的实现。首先，减少重排和重绘是关键。使用transform的translateX属性会比修改left或marginLeft更高效，因为transform可以利用GPU加速，不会触发布局重排。另外，使用requestAnimationFrame代替setInterval或setTimeout可以确保动画与浏览器的刷新率同步，减少不必要的帧绘制，提高流畅度。
还需要考虑将滚动元素提升为合成层，这可以通过CSS的will-change属性或transform3d来实现，这样浏览器会将该元素单独处理，减少重新绘制的区域。此外，避免在滚动过程中进行复杂的DOM操作或样式计算，这些都会增加性能开销。
然后，检查用户的项目环境。根据environment_details，用户正在使用Vue.js项目，可能是在view/pickScreen/pickScreen.vue文件中实现滚动效果。需要确保提供的代码示例与Vue的集成方式兼容，比如在mounted生命周期钩子中初始化动画，并在beforeDestroy中清理资源，防止内存泄漏。
接下来，考虑代码的具体实现。使用requestAnimationFrame来更新transform属性，在每一帧中计算当前位移，实现匀速运动。同时，在滚动容器上设置will-change: transform以提示浏览器优化。另外，如果元素内容静态，可以提前复制内容形成无缝滚动，减少DOM操作。
最后，需要验证这些优化措施的有效性。比如，在Chrome的Performance面板中记录动画运行时的性能，查看FPS是否稳定，是否有不必要的布局或绘制操作。此外，确保在滚动过程中不会触发其他高耗能的操作，比如频繁的样式查询或计算。
总结可能的优化点：使用requestAnimationFrame、transform进行位移、提升为合成层、避免强制同步布局、减少DOM操作等。将这些点整合到代码示例中，并提供相应的解释，帮助用户理解每一步的优化目的。
首先分析用户需求：需要实现横向滚动效果同时优化性能。根据当前项目结构(view/pickScreen/pickScreen.vue)，建议采用以下优化策略：
- 使用CSS transform代替传统定位属性：transform的translateX操作会触发GPU加速，且不会引起布局重排
- 使用requestAnimationFrame替代setInterval：与浏览器刷新率同步，避免过度绘制
- 优化DOM结构：确保滚动元素形成独立的合成层，减少重绘区域
- 使用will-change属性预提示浏览器优化
- 避免强制同步布局：不要在动画循环中读取布局属性
具体实现步骤：
- 在模板中创建滚动容器结构
- 在mounted生命周期初始化动画
- 使用性能更优的transform属性进行位移
- 添加will-change属性提示浏览器优化
- 实现循环逻辑时注意内存管理
<template>
<!-- 大屏 -->
<div
class="pick-show-screen"
id="pick-show-screen-edustudentpickup"
:class="{
'pick-show-screen-style1':currentStyle==='style1',
'pick-show-screen-style2':currentStyle==='style2',
'pick-show-screen-style3':currentStyle==='style3',
'pick-show-screen-norelateclass':!haseRelateClass,
'pick-show-screen-net-error':isNetError
}"
>
<!-- 头部 -->
<div class="top-header">
<div class="left-time">
<div class="absolute-time">{{ time }}</div>
<div class="date-time">{{ week+date }}</div>
</div>
<div
class="center-title"
:style="{
width:`${440*rate}px`
}"
>
<div
class="text"
id="pick-up-center-title"
>
{{ Title }}
</div>
</div>
<div class="right-logo-wrapper">
<div
class="right-logo"
:style="{
width:`${330*rate}px`
}"
>
<div
class="imgbox"
:style="{backgroundImage:`url(${LogoData})`}"
>
</div>
</div>
</div>
</div>
<!-- 数据区域 -->
<div
class="bottom-data"
v-if="haseRelateClass&&!isNetError"
>
<!-- 状态汇总数据+左表分页 -->
<!-- :style="{
opacity:isNoData?0:1
}" -->
<div
class="top-sumary"
>
<div class="State-box">
<div
class="State-item"
v-for="(item,index) in statusSumary"
:key="item.State"
>
<div class="icon">
<img
:src="item.icon"
alt=""
>
</div>
<div class="State-text">
<div class="text">
<div class="text-occupy">
{{ item.State }}
</div>
<div
class="text"
:id="`State-sumary-item-${index}`"
>
{{ item.State }}
</div>
</div>
<div class="colon">:</div>
<div class="number">{{ item.number }}</div>
</div>
</div>
</div>
<div class="page-number">
<div class="current">{{ screenData.ScreenIndex }}</div>
<div class="total">{{ `/${screenData.TotalNum}` }}</div>
</div>
</div>
<!-- 数据表格 -->
<div class="bottom-table">
<!-- 左表 -->
<!-- {{ indexTest-1 }} -->
<div class="left-table">
<div class="top-new">
<div
class="inner-table"
v-if="currentTopData.length"
>
<div
class="row"
v-for="(item,index) in 3"
:key="item"
:class="{
'even-row':index%2!==0
}"
>
<div class="box-contain box-contain-new-data">
<div
class="new-data"
:id="`new-data-${index}`"
>
<div
class="student-name"
>
<div
v-if="topNewData[index]"
class="text"
:id="`student-name-new-${index}`"
>{{ topNewData[index].StudentName }}</div>
</div>
<div class="class-name">
<div
v-if="topNewData[index]"
class="text"
:id="`class-name-new-${index}`"
>{{ topNewData[index].ClassName }}</div>
</div>
<div
class="ParentNameOrPlate"
>
<div
v-if="topNewData[index]"
class="text"
:id="`ParentNameOrPlate-name-new-${index}`"
>{{ topNewData[index].ParentNameOrPlate }}</div>
</div>
<div class="State">
<div
class="left-State"
v-if="topNewData[index]"
>
<div class="icon">
<img
:src="newDataIcon[currentStyle][topNewData[index].State]"
alt=""
>
</div>
<div class="text-container">
<div
class="text"
:id="`State-name-new-${index}`"
>{{ statusMap[topNewData[index].State].label }}</div>
</div>
</div>
<div
class="right-satus"
v-if="topNewData[index]"
>
<div class="text">{{ $t('hcp_edustudentpickup_new_name') }}</div>
</div>
</div>
</div>
<div
class="old-data"
:id="`old-data-${index}`"
>
<div
class="student-name"
>
<div
v-if="topOldData[index]"
class="text"
:id="`student-name-old-${index}`"
>{{ topOldData[index].StudentName }}</div>
</div>
<div class="class-name">
<div
v-if="topOldData[index]"
class="text"
:id="`class-name-old-${index}`"
>{{ topOldData[index].ClassName }}</div>
</div>
<div
class="ParentNameOrPlate"
>
<div
v-if="topOldData[index]"
class="text"
:id="`ParentNameOrPlate-name-old-${index}`"
>{{ topOldData[index].ParentNameOrPlate }}</div>
</div>
<div class="State">
<div
class="left-State"
v-if="topOldData[index]"
>
<div class="icon">
<img
:src="newDataIcon[currentStyle][topOldData[index].State]"
alt=""
>
</div>
<div class="text-container">
<div
class="text"
:id="`State-name-old-${index}`"
>{{ statusMap[topOldData[index].State].label }}</div>
</div>
</div>
<div
class="right-satus"
v-if="topOldData[index]"
>
<div class="text">{{ $t('hcp_edustudentpickup_new_name') }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="nodata"
v-if="!currentTopData.length"
>
<div class="nodata-content">
<div class="nodata-img">
<img
:src="topNodataIcon[currentStyle]"
alt=""
>
</div>
<div class="nodata-text">{{ $t('hcp_edustudentpickup_no_data_name') }}</div>
</div>
</div>
</div>
<div class="center-label">
<div class="row">
<div
class="row-item"
v-for="(item,index) in leftTableLabel"
:key="item.name"
>
<div
class="text"
:id="`center-label-name-left-${index}`"
>{{ item.name }}</div>
</div>
</div>
</div>
<div class="bottom-all">
<div
class="inner-table"
v-if="leftBottomData.length"
>
<div
class="row"
v-for="(item,index) in 10"
:key="item"
:class="{
'even-row':index%2!==0
}"
>
<div class="student-name">
<div
v-if="leftBottomData[index]"
class="text"
:id="`student-name-left-${index}`"
>{{ leftBottomData[index].StudentName }}</div>
</div>
<div class="class-name">
<div
v-if="leftBottomData[index]"
class="text"
:id="`class-name-left-${index}`"
>{{ leftBottomData[index].ClassName }}</div>
</div>
<div class="ParentNameOrPlate">
<div
v-if="leftBottomData[index]"
class="text"
:id="`ParentNameOrPlate-name-left-${index}`"
>{{ leftBottomData[index].ParentNameOrPlate }}</div>
</div>
<div class="State">
<div
class="left-State"
v-if="leftBottomData[index]"
>
<div class="icon">
<img
:src="statusMap[leftBottomData[index].State].icon[currentStyle]"
alt=""
>
</div>
<div class="text-container">
<div
class="text"
:id="`State-name-left-${index}`"
:style="{color:statusMap[leftBottomData[index].State].color[currentStyle]}"
>{{ statusMap[leftBottomData[index].State].label }}</div>
</div>
</div>
</div>
</div>
</div>
<div
class="nodata"
v-if="!leftBottomData.length"
>
<div class="nodata-content">
<div class="nodata-img">
<img
:src="bottomNodataIcon[currentStyle]"
alt=""
>
</div>
<div class="nodata-text">{{ $t('hcp_edustudentpickup_no_data_name') }}</div>
</div>
</div>
</div>
</div>
<!-- 右表 -->
<div class="right-table">
<div class="top-label">
<div class="row">
<div
class="row-item"
v-for="(item,index) in rightTableLabel"
:key="item.name"
>
<div
class="text"
:id="`center-label-name-right-${index}`"
>{{ item.name }}</div>
</div>
</div>
</div>
<div class="bottom-all">
<div
class="inner-table"
v-if="rightBottomData.length"
>
<div
class="row"
v-for="(item,index) in 13"
:key="item"
:class="{
'even-row':index%2===0
}"
>
<div class="student-name">
<div
v-if="rightBottomData[index]"
class="text"
:id="`student-name-right-${index}`"
>{{ rightBottomData[index].StudentName }}</div>
</div>
<div class="State">
<div
class="left-State"
v-if="rightBottomData[index]"
>
<div class="icon">
<img
:src="statusMap[rightBottomData[index].State].icon[currentStyle]"
alt=""
>
</div>
<div class="text-container">
<div
class="text"
:id="`State-name-right-${index}`"
:style="{color:statusMap[rightBottomData[index].State].color[currentStyle]}"
>{{ statusMap[rightBottomData[index].State].label }}</div>
</div>
</div>
</div>
</div>
</div>
<div
class="nodata"
v-if="!rightBottomData.length"
>
<div class="nodata-content">
<div class="nodata-img">
<img
:src="bottomNodataIcon[currentStyle]"
alt=""
>
</div>
<div class="nodata-text">{{ $t('hcp_edustudentpickup_no_data_name') }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 网络中断 -->
<div
class="bottom-no-data"
v-else-if="isNetError"
>
<div class="nodata-content">
<div class="nodata-img">
<img
:src="netErrorIcon[currentStyle]"
alt=""
>
</div>
<div class="nodata-text">{{ $t('hcp_edustudentpickup_net_error_tip_msg') }}</div>
</div>
</div>
<!-- 无数据 -->
<div
class="bottom-no-data"
v-else
>
<div class="nodata-content">
<div class="nodata-img">
<img
:src="noDataIcon[currentStyle]"
alt=""
>
</div>
<div class="nodata-text">{{ $t('hcp_edustudentpickup_guide_tips_msg') }}</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment';
import API from '@/EduStudentPickUp/api/pickScreenService.js';
// import { newDataTest, leftBottomData, rightBottomData} from './mark';
export default {
data () {
return {
ConfigID: '',
styleMap: {
0: 'style1',
1: 'style3',
2: 'style2'
},
currentStyle: 'style1',
Title: 'Student Pick-up',
AutoTurnPageTime: 10,
LogoData: require('../../assets/images/pick_logo.png'),
noDataIcon: {
style1: require('../../assets/images/pick_no_data1.png'),
style2: require('../../assets/images/pick_no_data2.png'),
style3: require('../../assets/images/pick_no_data3.png')
},
netErrorIcon: {
style1: require('../../assets/images/pick_net_error1.png'),
style2: require('../../assets/images/pick_net_error2.png'),
style3: require('../../assets/images/pick_net_error3.png')
},
topNodataIcon: {
style1: require('../../assets/images/pick_top_no_data1.png'),
style2: require('../../assets/images/pick_top_no_data2.png'),
style3: require('../../assets/images/pick_top_no_data2.png')
},
bottomNodataIcon: {
style1: require('../../assets/images/pick_bottom_no_data1.png'),
style2: require('../../assets/images/pick_bottom_no_data2.png'),
style3: require('../../assets/images/pick_bottom_no_data2.png')
},
newDataIcon: {
style1: {
1: require('../../assets/images/pick_waiting_style1.png'),
0: require('../../assets/images/pick_notin_new_style1.png')
},
style2: {
1: require('../../assets/images/pick_new_data_icon.png'),
0: require('../../assets/images/pick_notin_new_style2.png')
},
style3: {
1: require('../../assets/images/pick_new_data_icon.png'),
0: require('../../assets/images/pick_notin_new_style2.png')
}
},
statusMap: {
1: {
label: this.$t('hcp_edustudentpickup_waiting_school_name'),
icon: {
style1: require('../../assets/images/pick_waiting_style1.png'),
style2: require('../../assets/images/pick_waiting_style2.png'),
style3: require('../../assets/images/pick_waiting_style2.png')
},
color: {
style1: 'rgb(75, 230, 252)',
style2: 'rgb(33, 150, 243)',
style3: 'rgb(33, 150, 243)'
}
},
0: {
label: this.$t('hcp_edustudentpickup_not_in_school_name'),
icon: {
style1: require('../../assets/images/pick_notin_style1.png'),
style2: require('../../assets/images/pick_notin_style2.png'),
style3: require('../../assets/images/pick_notin_style2.png')
},
color: {
style1: 'rgb(255, 181, 8)',
style2: 'rgb(255, 149, 44)',
style3: 'rgb(255, 149, 44)'
}
},
2: {
label: this.$t('hcp_edustudentpickup_leave_school_name'),
icon: {
style1: require('../../assets/images/pick_leave_style1.png'),
style2: require('../../assets/images/pick_leave_style1.png'),
style3: require('../../assets/images/pick_leave_style1.png')
},
color: {
style1: 'rgb(49, 222, 79)',
style2: 'rgb(2, 191, 15)',
style3: 'rgb(49, 222, 79)'
}
}
},
statusSumary: [
{
State: this.$t('hcp_edustudentpickup_waiting_school_name'),
number: 0,
prop: 'WaittingNum',
icon: require('../../assets/images/pick_waiting_blue.png')
},
{
State: this.$t('hcp_edustudentpickup_not_in_school_name'),
number: 0,
prop: 'NotInSchoolNum',
icon: require('../../assets/images/pick_notin_blue.png')
},
{
State: this.$t('hcp_edustudentpickup_leave_school_name'),
number: 0,
prop: 'LeaveNum',
icon: require('../../assets/images/pick_leave_blue.png')
}
],
leftTableLabel: [
{
name: this.$t('hcp_edustudentpickup_student_name')
},
{
name: this.$t('hcp_edustudentpickup_class_name')
},
{
name: this.$t('hcp_edustudentpickup_family_car_name')
},
{
name: this.$t('hcp_edustudentpickup_status_name')
}
],
rightTableLabel: [
{
name: this.$t('hcp_edustudentpickup_student_name')
},
{
name: this.$t('hcp_edustudentpickup_status_name')
}
],
topNewData: [],
topOldData: [],
// leftBottomData,
// rightBottomData,
leftBottomData: [],
rightBottomData: [],
timer: null,
timer1: null,
timer2: null,
weekMap: {
0: this.$t('hcp_edustudentpickup_week7_name'),
1: this.$t('hcp_edustudentpickup_week1_name'),
2: this.$t('hcp_edustudentpickup_week2_name'),
3: this.$t('hcp_edustudentpickup_week3_name'),
4: this.$t('hcp_edustudentpickup_week4_name'),
5: this.$t('hcp_edustudentpickup_week5_name'),
6: this.$t('hcp_edustudentpickup_week6_name')
},
date: '',
time: '',
week: '',
isChangeScreen: false,
rate: 1,
screenData: {
ScreenIndex: 1,
TotalNum: 1
},
animationId: '',
haseRelateClass: true,
isNetError: false,
currentShowOld: true,
firstTime: true,
currentTopData: [],
newDataTest: {},
indexTest: 1
};
},
computed: {
isNoData() {
return !this.topNewData.length && !this.leftBottomData.length && !this.rightBottomData.length;
}
},
watch: {
ConfigID() {
this.getScreenConfig();
},
AutoTurnPageTime() {
this.timer1 && clearInterval(this.timer1);
this.timer1 = setInterval(()=>this.getScreenData(true), this.AutoTurnPageTime * 1000);
}
},
created() {
this.getScreenConfig();
},
mounted() {
// 获取页面的宽度，计算头部标题和logo的宽度
this.computeWidth();
// 分页切换定时器
this.getScreenData(false);
this.timer1 = setInterval(()=>this.getScreenData(true), this.AutoTurnPageTime * 1000);
// 左上角时间定时器
this.updateClock();
this.timer = setInterval(this.updateClock, 1000);
// 屏幕内刷新
this.timer2 = setInterval(()=>this.getScreenData(false), 3000);
// 文本横向滚动
this.scrollAuto();
},
beforeDestroy() {
this.timer && clearInterval(this.timer);
this.timer1 && clearInterval(this.timer1);
this.timer2 && clearInterval(this.timer2);
this.animationId && (cancelAnimationFrame(this.animationId));
},
methods: {
async getScreenData(isChangeScreen) {
// 如果是翻页，切换页码
if (isChangeScreen) {
if (this.screenData.TotalNum === 1) {
return;
} else if (this.screenData.ScreenIndex < this.screenData.TotalNum) {
this.screenData.ScreenIndex = this.screenData.ScreenIndex + 1;
} else {
this.screenData.ScreenIndex = 1;
}
this.isChangeScreen = true;
} else {
// // if (this.indexTest > 7) {
// // return;
// // }
// let LeftUpPickupReocrdList = newDataTest[this.indexTest];
// // 当从有数据到无数据，3行元素被清空，再次置为初始状态
// if (this.currentTopData.length && !LeftUpPickupReocrdList.length) {
// this.topOldData = [];
// this.topNewData = [];
// this.firstTime = true;
// this.currentShowOld = true;
// }
// this.currentTopData = LeftUpPickupReocrdList;
// // 如果是第1次，直接赋值
// if (this.firstTime) {
// this.topOldData = LeftUpPickupReocrdList;
// }
// this.$nextTick(()=>{
// // 最新数据更新动画
// this.newDataMove(LeftUpPickupReocrdList);
// // this.indexTest = this.indexTest + 1;
// if (this.indexTest < 15) {
// this.indexTest = this.indexTest + 1;
// } else {
// this.indexTest = 1;
// }
// });
}
let params = {
PickupScreenRequest: {
LeftUpPageSize: 3,
LeftDownPageSize: 10,
LeftDownPageIndex: this.screenData.ScreenIndex,
RightPageSize: 13
}
};
let res = await API.getPickupScreenData(params);
let {isValid,
isNetError,
ErrorCode,
ConfigID = '',
Data = {},
LeftDownTotalNum = 0,
LeftUpPickupReocrdList = [],
LeftDownPickupReocrdList = [],
RightPickupReocrdList = []} = res || {};
// 大屏未关联班级处理
if (ErrorCode === 424010) {
this.haseRelateClass = false;
} else {
this.haseRelateClass = true;
}
// 网络恢复刷新页面
if (this.isNetError && !isNetError) {
window.location.reload();
}
// 网络问题或接口报错
this.isNetError = isNetError;
if (isNetError || !isValid) {
let {ConfigID} = Data;
this.ConfigID = ConfigID;
// 网络是否异常或请求失败
return;
}
// 概览数据赋值
this.statusSumary.forEach(item=>{
item.number = res[item.prop] || 0;
});
if (!isChangeScreen) {
// 从有变为空，要做一次初始化
if (this.currentTopData.length && !LeftUpPickupReocrdList.length) {
this.topOldData = [];
this.topNewData = [];
this.firstTime = true;
this.currentShowOld = true;
}
// 用currentTopData来控制最新三行的数据是否展示
this.currentTopData = LeftUpPickupReocrdList;
// 如果是第1次，直接赋值
if (this.firstTime) {
this.topOldData = LeftUpPickupReocrdList;
}
// 页面最新数据渲染完再做动画
this.$nextTick(()=>{
// 最新数据更新动画
this.newDataMove(LeftUpPickupReocrdList);
});
}
// 无动画表格数据赋值
this.leftBottomData = LeftDownPickupReocrdList;
this.rightBottomData = RightPickupReocrdList;
this.ConfigID = ConfigID;
this.screenData.TotalNum = Math.ceil(LeftDownTotalNum / 10) === 0 ? 1 : Math.ceil(LeftDownTotalNum / 10);
// 如果当前屏幕索引大于总数，则置为最后一页数据
if (this.screenData.TotalNum < this.screenData.ScreenIndex) {
this.screenData.ScreenIndex = this.screenData.TotalNum;
this.getScreenData(false);
}
},
async getScreenConfig() {
let res = await API.getPickupDisplayConfig();
let {isNetError, isValid, Title = '--', LogoData = '', AutoTurnPageTime = 10, BackgroudPicIndex = 0} = res;
if (isNetError || !isValid) {
// 网络是否异常或请求失败
return;
}
this.currentStyle = this.styleMap[BackgroudPicIndex];
this.Title = Title;
this.LogoData = LogoData;
this.AutoTurnPageTime = AutoTurnPageTime;
},
computeWidth() {
let containerDom = document.getElementById('pick-show-screen-edustudentpickup');
if (!containerDom) {
return;
}
let containerLength = containerDom.offsetWidth;
this.rate = containerLength / 1920;
},
// 竖向动画
newDataMove(LeftUpPickupReocrdList) {
// 新数据进入动画：
// 老数据从展示行下移，隐藏，再回到初始顶部位置
// 新数据展示，从初始顶部位置，移到正中央展示行
if (!this.firstTime) {
// 如果有最新数据进来才进行动画
if (this.currentShowOld) {
if (JSON.stringify(LeftUpPickupReocrdList) === JSON.stringify(this.topOldData)) {
return;
}
this.topNewData = LeftUpPickupReocrdList;
} else {
if (JSON.stringify(LeftUpPickupReocrdList) === JSON.stringify(this.topNewData)) {
return;
}
this.topOldData = LeftUpPickupReocrdList;
}
this.currentShowOld = !this.currentShowOld;
}
for (let index = 0; index < 3; index++) {
this.judgeMove(`new-data-${index}`, true, index);
this.judgeMove(`old-data-${index}`, false, index);
}
},
judgeMove(idName, isNew, index) {
let textDom = document.getElementById(idName);
if (!textDom) {
return;
}
let textHeight = textDom.offsetHeight;
let offset = textHeight;
if (!textDom.style.transform) {
if (isNew) {
textDom.style.transform = `translateY(${-offset}px)`;
} else {
textDom.style.transform = `translateY(0px)`;
}
}
// 3行都初始化完成，才置为false
if (this.firstTime) {
if (index === 2 && !isNew) {
this.firstTime = false;
}
return;
}
if (textDom.style.transform === 'translateY(0px)') {
textDom.style.visibility = 'visible';
textDom.style.transition = `transform 1s ease`;
textDom.style.transform = `translateY(${offset}px)`;
textDom.addEventListener('transitionend', function() {
textDom && (textDom.style.visibility = 'hidden');
textDom && (textDom.style.transition = `transform 0s ease`);
textDom && (textDom.style.transform = `translateY(${-offset}px)`);
textDom && (textDom.removeEventListener('transitionend', arguments));
textDom = null;
});
return;
}
if (textDom.style.transform === `translateY(${-offset}px)`) {
textDom.style.visibility = 'visible';
textDom.style.transition = `transform 1s ease`;
textDom.style.transform = `translateY(0px)`;
textDom.addEventListener('transitionend', function() {
textDom && (textDom.style.transition = `transform 0s ease`);
textDom && (textDom.style.transform = `translateY(0px)`);
textDom && (textDom.removeEventListener('transitionend', arguments));
textDom = null;
});
}
},
// 横向滚动
getDomWidthAndMove(textClass, isChangeScreen) {
let textDom = document.getElementById(textClass);
if (!textDom) {
return;
}
let textLength = textDom.offsetWidth;
let boxWidth = textDom.parentNode.offsetWidth;
let translateX = parseInt(textDom.style.transform?.replace(/[^\d-]/g, '') || 0, 10);
if (isChangeScreen) {
textDom.style.transform = 'translateX(0)';
return;
}
if (textLength > boxWidth) {
if (Math.abs(translateX) >= textLength) {
textDom.style.transform = `translateX(${boxWidth}px)`;
} else {
textDom.style.transform = `translateX(${translateX - 1}px)`;
}
} else {
textDom.style.transform = 'translateX(0)';
}
// 回收
textDom = null;
},
// 实现文本横向滚动
scrollAuto() {
// 大屏标题
this.getDomWidthAndMove('pick-up-center-title');
// 左表上方3个状态
this.statusSumary.forEach((item, index)=>{
this.getDomWidthAndMove(`State-sumary-item-${index}`);
});
// 左表上3行-每行
this.topNewData.length > 0 && this.topNewData.forEach((item, index)=>{
this.getDomWidthAndMove(`student-name-new-${index}`, this.isChangeScreen);
this.getDomWidthAndMove(`class-name-new-${index}`, this.isChangeScreen);
this.getDomWidthAndMove(`ParentNameOrPlate-name-new-${index}`, this.isChangeScreen);
// 状态
this.getDomWidthAndMove(`State-name-new-${index}`, this.isChangeScreen);
});
// 左表上3行-每行(用于翻页动画)
this.topOldData.length > 0 && this.topOldData.forEach((item, index)=>{
this.getDomWidthAndMove(`student-name-old-${index}`, this.isChangeScreen);
this.getDomWidthAndMove(`class-name-old-${index}`, this.isChangeScreen);
this.getDomWidthAndMove(`ParentNameOrPlate-name-old-${index}`, this.isChangeScreen);
// 状态
this.getDomWidthAndMove(`State-name-old-${index}`, this.isChangeScreen);
});
// 左表标签行
this.leftTableLabel.forEach((item, index)=>{
this.getDomWidthAndMove(`center-label-name-left-${index}`, this.isChangeScreen);
});
// 左表下面翻页行
this.leftBottomData.length > 0 && this.leftBottomData.forEach((item, index)=>{
this.getDomWidthAndMove(`student-name-left-${index}`, this.isChangeScreen);
this.getDomWidthAndMove(`class-name-left-${index}`, this.isChangeScreen);
this.getDomWidthAndMove(`ParentNameOrPlate-name-left-${index}`, this.isChangeScreen);
// 状态
this.getDomWidthAndMove(`State-name-left-${index}`, this.isChangeScreen);
});
// 右表标签行
this.rightTableLabel.forEach((item, index)=>{
this.getDomWidthAndMove(`center-label-name-right-${index}`, this.isChangeScreen);
});
// 右表内容行
this.rightBottomData.length > 0 && this.rightBottomData.forEach((item, index)=>{
this.getDomWidthAndMove(`student-name-right-${index}`, this.isChangeScreen);
// 状态
this.getDomWidthAndMove(`State-name-right-${index}`, this.isChangeScreen);
});
// 如果翻页，文本从要从0开始滚动
if (this.isChangeScreen) {
this.isChangeScreen = false;
}
this.animationId = requestAnimationFrame(this.scrollAuto);
},
// 更新时间
updateClock() {
this.time = moment().format('HH:mm:ss');
this.date = moment().format('DD/MM/YYYY');
this.week = `${this.weekMap[moment().day()] },`;
if (this.time === '23:59:59') {
window.location.reload();
}
}
}
};
</script>
<style lang="less" scoped>
.move-common-style{
height: 100%;
overflow: hidden;
position: relative;
>.text{
min-width: 100%;
width: auto;
position: absolute;
top: 0;
white-space: nowrap;
will-change: transform;
transform: translateZ(0); /* 开启GPU加速 */
}
}
.pick-show-screen{
width: 100%;
height: 100%;
overflow: auto;
.top-header{
display: flex;
justify-content: space-between;
.left-time{
display: flex;
align-items: baseline;
.absolute-time{
font-size: 48px;
line-height: 48px;
font-weight: 700;
padding-right: 10px;
}
.date-time{
font-size: 22px;
line-height: 24px;
font-weight: 600;
}
}
.center-title{
font-size: 36px;
line-height: 36px;
font-weight: 700;
text-transform: uppercase;
display: flex;
align-items: center;
.move-common-style();
.text{
text-align:center;
}
}
.right-logo-wrapper{
width: 382px;
display: flex;
justify-content: flex-end;
.right-logo{
width: 330px;
height: 64px;
.imgbox{
height: 100%;
width: 100%;
background-size: contain;
background-repeat: no-repeat; /* 背景图不重复 */
background-position:right center; /* 背景图居中 */
}
}
}
}
.bottom-data{
width: 100%;
padding: 0 34px 20px;
.top-sumary{
display: flex;
align-items: center;
justify-content: space-between;
width: calc((100% - 26px) * 0.7);
.State-box{
width: calc(100% - 120px);
display: flex;
align-items: center;
.State-item{
display: flex;
align-items: center;
max-width: calc(100% / 3);
padding-right: 10px;
.icon{
padding-right: 5px;
display: flex;
align-items: center;
img{
height: 40px;
width: 40px;
}
}
.State-text{
display: flex;
align-items: center;
flex: 1;
min-width: 0;
.text{
font-size: 28px;
min-width: 0;
flex: 1;
.text-occupy{
visibility: hidden;
white-space: nowrap;
}
.move-common-style();
}
.colon{
padding-left: 5px;
font-size: 28px;
}
.number{
padding-left: 10px;
font-size: 32px;
font-weight: 700;
}
}
}
}
.page-number{
width: 110px;
display: flex;
align-items: baseline;
justify-content:flex-end;
.current{
font-size: 34px;
font-weight: 700;
}
.total{
font-size: 32px;
font-weight: 600;
}
}
}
.bottom-table{
width: 100%;
display: flex;
justify-content: space-between;
height: 890px;
.left-table{
width: calc((100% - 26px) * 0.7);
.top-new{
width: 100%;
.inner-table{
width: 100%;
.row{
width: 100%;
.box-contain{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.new-data{
display: flex;
align-items: center;
width: 100%;
height: 100%;
justify-content: space-between;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.old-data{
display: flex;
align-items: center;
width: 100%;
height: 100%;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
}
.student-name,.class-name,.ParentNameOrPlate{
width: calc(25% - 10px);
.move-common-style();
}
.State{
width: 25%;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
.left-State{
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
flex: 1;
.icon{
display: flex;
align-items: center;
}
.text-container{
.move-common-style();
}
}
.right-satus{
max-width: 90px;
height: 36px;
}
}
}
}
.nodata{
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
.nodata-content{
text-align: center;
img{
height: 68px;
width: 68px;
}
}
}
}
.center-label{
.row{
display: flex;
align-items: center;
justify-content: space-between;
.row-item{
width: calc(25% - 10px);
.move-common-style();
&:last-child{
width: 25%;
}
}
}
}
.bottom-all{
.inner-table{
.row{
display: flex;
align-items: center;
justify-content: space-between;
.student-name,.class-name,.ParentNameOrPlate,.State{
width: calc(25% - 10px);
.move-common-style();
}
.State{
width: 25%;
display: flex;
align-items: center;
height: 100%;
.left-State{
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
.icon{
display: flex;
align-items: center;
}
.text-container{
.move-common-style();
}
}
}
}
}
.nodata{
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
.nodata-content{
text-align: center;
img{
height: 108px;
width: 108px;
}
}
}
}
}
.right-table{
width: calc((100% - 26px) * 0.3);
height: 100%;
.top-label{
.row{
display: flex;
align-items: center;
justify-content: space-between;
.row-item{
width: calc(50% - 10px);
.move-common-style();
&:last-child{
width: 50%;
}
}
}
}
.bottom-all{
.inner-table{
.row{
display: flex;
align-items: center;
justify-content: space-between;
.student-name,.State{
width: calc(50% - 10px);
.move-common-style();
}
.State{
width: 50%;
display: flex;
align-items: center;
.left-State{
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
.icon{
display: flex;
align-items: center;
}
.text-container{
.move-common-style();
}
}
}
}
}
.nodata{
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
.nodata-content{
text-align: center;
img{
height: 108px;
width: 108px;
}
}
}
}
}
}
}
}
.pick-show-screen-norelateclass{
display: flex;
flex-direction: column;
.bottom-no-data{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
.nodata-content{
text-align: center;
img{
height: 128px;
width: 128px;
}
.nodata-text{
font-size: 28px;
}
}
}
}
.pick-show-screen-net-error{
display: flex;
flex-direction: column;
.bottom-no-data{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
.nodata-content{
text-align: center;
img{
height: 200px;
width: 200px;
}
.nodata-text{
font-size: 28px;
}
}
}
}
.pick-show-screen-style1{
background-color: rgb(7, 5, 3);
.top-header{
height: 114px;
padding:18px 20px 0px;
background-image: url('../../assets/images/pick_header_background_style1.png'); /* 设置图片路径 */
background-size: 100% 100%;
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center; /* 背景图居中 */
.left-time{
padding-top: 10px;
.absolute-time{
color: rgb(198, 214, 255);
}
.date-time{
color: rgb(198, 214, 255);
}
}
.center-title{
width: 440px;
.text{
text-shadow: 0px 5.5px 6px rgba(10, 13, 33, 0.3);
background: linear-gradient(180.00deg, rgb(255, 255, 255),rgb(198, 214, 255));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
}
}
.bottom-data{
.top-sumary{
height: 40px;
line-height: 40px;
margin-bottom: 16px;
.State-box{
.State-item{
.State-text{
.text{
color: rgb(255, 255, 255);
}
.number,.colon{
color: rgb(255, 255, 255);
}
}
}
}
.page-number{
background-image: url('../../assets/images/pick_page_style1.png'); /* 设置图片路径 */
background-size: 100% 100%;
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center;
padding: 0 35px;
.current{
color: rgb(255, 255, 255);
}
.total{
color: rgb(198, 214, 255);
}
}
}
.bottom-table{
height: 890px;
.left-table{
height: 100%;
background-color: rgba(38, 85, 111, 0.3);
border-radius: 10px;
background-image: url('../../assets/images/pick_left_table_background_style1.png'); /* 设置图片路径 */
background-size: 100% 100%;
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center; /* 背景图居中 */
.top-new{
height: 220px;
padding:20px 30px;
.inner-table{
.row{
padding:0 20px 0 30px;
height: 60px;
line-height: 60px;
background-color: rgb(71, 133, 254);
&:first-child{
border-radius: 16px 16px 0 0;
}
&:last-child{
border-radius: 0 0 16px 16px;
}
.student-name,.class-name,.ParentNameOrPlate,.State{
font-size: 28px;
font-weight: 600;
color: rgb(255, 255, 255);
}
.State{
.left-State{
width: 50%;
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 50px);
font-size: 26px;
font-weight: 600;
}
}
.right-satus{
padding: 0 20px;
height: 36px;
line-height: 36px;
max-width: 50%;
background-color: rgb(16, 29, 36);
color: rgb(75, 230, 252);
font-size: 18px;
font-weight: 700;
border-radius: 8px;
}
}
}
.even-row{
background-color: rgba(61, 126, 255, 0.71);
}
}
.nodata{
height: 180px;
background-color: rgb(71, 133, 254);
border-radius:16px;
.nodata-content{
color: rgba(0, 0, 0, 0.3);
}
}
}
.center-label{
.row{
height: 60px;
line-height: 60px;
padding-left: 60px;
padding-right: 50px;
background-color: rgba(61, 126, 255, 0.3);
font-weight: 700;
.row-item{
color: rgb(209, 221, 244);
font-size: 28px;
font-weight: 700px;
}
}
}
.bottom-all{
height: 610px;
padding:0 30px;
.inner-table{
.row{
height: 60px;
line-height: 60px;
padding:0 20px 0 30px;
.student-name,.class-name,.ParentNameOrPlate,.State{
color: rgb(209, 221, 244);
font-size: 24px;
}
.State{
.left-State{
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 50px);
font-size: 26px;
font-weight: 600;
}
}
}
}
.even-row{
background-image: url('../../assets/images/pick_row_style1.png'); /* 设置图片路径 */
background-size: 100% 100%;
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center;
}
}
.nodata{
height: 610px;
.nodata-content{
color: rgba(198, 214, 255, 0.5);
}
}
}
}
.right-table{
height: 100%;
background-color: rgba(38, 85, 111, 0.3);
border-radius: 10px;
background-image: url('../../assets/images/pick_right_table_background_style1.png'); /* 设置图片路径 */
background-size: 100% 100%;
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center; /* 背景图居中 */
.top-label{
background-color: rgba(61, 126, 255, 0.3);
border-radius: 10px 10px 0 0;
.row{
// border-radius: 10px 10px 0 0;
height: 60px;
line-height: 60px;
color: rgb(209, 221, 244);
padding: 0 66px;
font-size: 28px;
font-weight: 700;
}
}
.bottom-all{
height: 830px;
padding:25px 26px 25px;
.inner-table{
.row{
height: 60px;
line-height: 60px;
padding: 0 40px;
.student-name,.State{
color: rgb(209, 221, 244);
font-size: 24px;
}
.State{
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 46px);
font-size: 26px;
font-weight: 600;
}
}
}
.even-row{
background-image: url('../../assets/images/pick_row_style1.png'); /* 设置图片路径 */
background-size: 100% 100%;
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center;
}
}
.nodata{
height: 830px;
.nodata-content{
color: rgba(198, 214, 255, 0.5);
}
}
}
}
}
}
.bottom-no-data{
.nodata-content{
.nodata-text{
color: rgba(198, 214, 255, 0.5);
}
}
}
}
.pick-show-screen-style2{
background-color: rgb(246, 250, 255);
.top-header{
height: 114px;
padding:18px 20px 0px;
background-image: url('../../assets/images/pick_header_background_style2.png'); /* 设置图片路径 */
background-size: 100% 100%;
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center; /* 背景图居中 */
.left-time{
padding-top: 10px;
.absolute-time{
color: rgb(91, 91, 94);
}
.date-time{
color: rgb(139, 143, 153);
}
}
.center-title{
width: 440px;
.text{
color: rgb(37, 37, 39);
}
}
}
.bottom-data{
.top-sumary{
height: 40px;
line-height: 40px;
margin-bottom: 16px;
.State-box{
.State-item{
.State-text{
.text{
color: rgb(0, 0, 0);
}
.number,.colon{
color: rgb(0, 0, 0);
}
}
}
}
.page-number{
// padding: 0 35px;
.current{
color: rgb(37, 37, 39);
}
.total{
color: rgb(143, 143, 143);
}
}
}
.bottom-table{
height: 865px;
.left-table{
height: 100%;
border-radius: 16px;
box-sizing: border-box;
border: 1px solid rgb(159, 193, 251);
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.16);
background: rgb(255, 255, 255);
.top-new{
height: 200px;
background-color: white;
padding-bottom: 20px;
border-radius: 16px 16px 0 0;
.inner-table{
background-color: rgb(101, 114, 244);
border-radius: 16px 16px 0 0;
.row{
height: 60px;
line-height: 60px;
padding:0px 60px;
.student-name,.class-name,.ParentNameOrPlate,.State{
font-size: 28px;
font-weight: 600;
color: rgb(255, 255, 255);
}
.State{
.left-State{
width: 50%;
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 50px);
font-size: 26px;
font-weight: 600;
}
}
.right-satus{
padding: 0 20px;
height: 36px;
line-height: 36px;
max-width: 50%;
background-color: rgb(255, 255, 255);
color: rgb(250, 50, 57);
font-size: 18px;
font-weight: 700;
border-radius: 8px;
}
}
}
.even-row{
background-color: rgb(134, 145, 255);
}
}
.nodata{
height: 180px;
background-color: rgb(101, 114, 244);
border-radius:16px 16px 0 0;
.nodata-content{
color: rgba(255, 255, 255, 0.7);
}
}
}
.center-label{
.row{
height: 60px;
line-height: 60px;
padding-left: 60px;
padding-right: 50px;
background-color: rgb(229, 238, 255);
font-weight: 700;
.row-item{
color: rgb(21, 21, 20);
font-size: 28px;
font-weight: 700px;
}
}
}
.bottom-all{
height: 600px;
.inner-table{
.row{
height: 60px;
line-height: 60px;
padding:0 60px;
&:last-child{
border-radius: 0 0 16px 16px;
}
.student-name,.class-name,.ParentNameOrPlate,.State{
color: rgb(32, 32, 32);
font-size: 24px;
}
.State{
.left-State{
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 50px);
font-size: 26px;
font-weight: 600;
}
}
}
}
.even-row{
background-color: rgb(229, 238, 255);
}
}
.nodata{
height: 600px;
.nodata-content{
color: rgba(0, 0, 0, 0.5);
}
}
}
}
.right-table{
height: 100%;
border-radius: 16px;
box-sizing: border-box;
border: 1px solid rgb(159, 193, 251);
border-radius: 16px;
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.16);
background: rgb(255, 255, 255);
.top-label{
background-color: rgb(229, 238, 255);
border-radius: 16px 16px 0 0;
.row{
height: 60px;
line-height: 60px;
color: rgb(38, 47, 66);
padding: 0 65px;
font-size: 28px;
font-weight: 700;
}
}
.bottom-all{
height: 804px;
.inner-table{
.row{
height: 60px;
line-height: 60px;
padding: 0 65px;
background-color: rgb(242, 246, 255);
.student-name,.State{
color: rgb(38, 47, 66);
font-size: 24px;
}
.State{
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 46px);
font-size: 26px;
font-weight: 600;
}
}
}
.even-row{
background: rgb(255, 255, 255);
}
}
.nodata{
height: 804px;
.nodata-content{
color: rgba(0, 0, 0, 0.5);
}
}
}
}
}
}
.bottom-no-data{
.nodata-content{
.nodata-text{
color: rgba(0, 0, 0, 0.5);
}
}
}
}
.pick-show-screen-style3{
background-color: rgb(101, 114, 244);
.top-header{
height: 114px;
padding:0px 20px;
background-image: url('../../assets/images/pick_header_background_style3.png'); /* 设置图片路径 */
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center; /* 背景图居中 */
margin-bottom: 14px;
align-items: center;
.left-time{
.absolute-time{
color: rgb(241, 245, 255);
}
.date-time{
color: rgb(198, 214, 255);
}
}
.center-title{
width: 520px;
.text{
line-height: 48px;
top: auto;
font-size: 48px;
text-shadow: 0px 5.5px 6px rgba(10, 13, 33, 0.3);
background: linear-gradient(180.00deg, rgb(255, 255, 255),rgb(198, 214, 255));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
}
.right-logo{
width: 370px;
height: 84px;
// background-color: rgb(255, 255, 255);
// border-radius: 8px;
}
}
.bottom-data{
padding-bottom: 32px;
.top-sumary{
height: 40px;
line-height: 40px;
margin-bottom: 16px;
.State-box{
.State-item{
.State-text{
.text{
color: rgb(241, 245, 255);
}
.number,.colon{
color: rgb(255, 255, 255);
}
}
}
}
.page-number{
// padding: 0 35px;
.current{
color: rgb(255, 255, 255);
}
.total{
color: rgba(255, 255, 255, 0.7);
}
}
}
.bottom-table{
height: 865px;
.left-table{
height: 100%;
border-radius: 42px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
.top-new{
height: 206px;
padding:20px 20px 10px;
border-radius: 42px 42px 0 0;
.inner-table{
background-color: rgb(134, 145, 255);
border-radius: 22px;
.row{
height: 60px;
line-height: 60px;
padding:0px 50px;
.student-name,.class-name,.ParentNameOrPlate,.State{
font-size: 26px;
font-weight: 600;
color: rgb(255, 255, 255);
}
.State{
.left-State{
width: 50%;
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 50px);
font-size: 26px;
font-weight: 600;
}
}
.right-satus{
padding: 0 20px;
height: 36px;
line-height: 36px;
max-width: 50%;
background-color: rgb(255, 255, 255);
color: rgb(250, 50, 57);
font-size: 18px;
font-weight: 700;
border-radius: 8px;
}
}
}
.even-row{
background-color: rgb(101, 114, 244);
}
}
.nodata{
height: 180px;
background-color: rgb(134, 145, 255);
border-radius:22px;
.nodata-content{
color: rgba(255, 255, 255, 0.7);
}
}
}
.center-label{
padding: 0 20px;
.row{
height: 60px;
line-height: 60px;
padding:0 50px;
background-color: rgb(117, 248, 254);
font-weight: 700;
border-radius: 48px;
.row-item{
color: rgb(16, 30, 175);
font-size: 28px;
font-weight: 600px;
}
}
}
.bottom-all{
height: 600px;
padding:0 20px;
.inner-table{
.row{
height: 68px;
line-height: 68px;
padding:0 50px;
.student-name,.class-name,.ParentNameOrPlate,.State{
color: rgb(0, 0, 0);
font-size: 22px;
}
.State{
.left-State{
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 50px);
font-size: 26px;
font-weight: 600;
}
}
}
}
.even-row{
height: 50px;
line-height: 50px;
background-color: rgb(241, 245, 255);
border-radius: 48px;
}
}
.nodata{
height: 600px;
.nodata-content{
color: rgba(0, 0, 0, 0.5);
}
}
}
}
.right-table{
height: 100%;
border-radius: 42px;
background: rgb(255, 255, 255);
padding: 20px;
.top-label{
background-color: rgb(117, 248, 254);
border-radius: 48px;
.row{
height: 60px;
line-height: 60px;
color: rgb(16, 30, 175);
padding: 0 36px;
font-size: 28px;
font-weight: 700;
}
}
.bottom-all{
height: 786px;
.inner-table{
.row{
height: 50px;
line-height: 50px;
padding: 0 36px;
background-color: rgb(241, 245, 255);
border-radius: 48px;
.student-name,.State{
color: rgb(0, 0, 0);
font-size: 24px;
}
.State{
.icon{
width: 34px;
height: 34px;
img{
width: 100%;
height: 100%;
}
}
.text-container{
width: calc(100% - 46px);
font-size: 26px;
font-weight: 600;
}
}
}
.even-row{
height: 68px;
line-height: 68px;
background: rgb(255, 255, 255);
}
}
.nodata{
height: 786px;
.nodata-content{
color: rgba(0, 0, 0, 0.5);
}
}
}
}
}
}
.bottom-no-data{
.nodata-content{
.nodata-text{
color: rgba(255, 255, 255, 0.7);
}
}
}
}
</style>
let leftBottomData = [
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
ClassName: 'class 01 class 01 class 01 class 01 class 01 class 01 ',
ParentNameOrPlate: 'zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong',
State: 0
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
ClassName: 'class 01 class 01 class 01 class 01 class 01 class 01 ',
ParentNameOrPlate: 'zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
ClassName: 'class 01 class 01 class 01 class 01 class 01 class 01 ',
ParentNameOrPlate: 'zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong',
State: 1
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 1
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
ClassName: 'class 01 class 01 class 01 class 01 class 01 class 01 ',
ParentNameOrPlate: 'zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong zhangguodong',
State: 0
}
];
let rightBottomData = [
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
State: 2
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshutingchengshutingchengshutingchengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
},
{
StudentName: 'chengshuting',
State: 2
}
];
let topNewData = [
{
StudentName: 'chengshutingchengshutingchengshutingchengshutingchengshutingchengshutingchengshutingchengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
];
let topOldData = [
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
];
let newDataTest = {
1: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
2: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-2',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
3: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-2',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-3',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
4: [
{
StudentName: 'chengshuting-3',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
5: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
6: [],
7: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-2',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-3',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
8: [],
9: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-2',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
10: [],
11: [
{
StudentName: 'chengshuting-2',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
12: [
{
StudentName: 'chengshuting-2',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
13: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-2',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
},
{
StudentName: 'chengshuting-3',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
14: [
{
StudentName: 'chengshuting-1',
ClassName: 'class 01',
ParentNameOrPlate: 'zhangguodong',
State: 0
}
],
15: []
};
export {
leftBottomData,
rightBottomData,
topNewData,
topOldData,
newDataTest
};
