主题:数字化学生成绩系统
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<!DOCTYPE html> <html lang="en" style="font-size: 80px;"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="./static/flexible.js"></script> <link rel="stylesheet" href="./static/index2.css" /> <title>学生综合成绩评价系统</title> <link rel="stylesheet" href="static/index2.css" /> </head> <body style="font-size: 12px;"> <!-- 头部模块 --> <div class="header"> <span class="title">学生综合成绩评价智慧大屏</span> <span class="time" id="show_time">2023-12-23 15:50:50</span> </div> <!-- 主题模块 --> <div class="main"> <div class="left_main"> <div class="slide_wrap"> <div class="box_btn"> <img src="./static/area1.04887f6d.png" alt="" /> <span>课前导学</span> </div> <div class="box_btn">
部分css代码
.header .title {position: absolute;top: 0.3rem;left: 0.4rem;font-size: 0.5rem;display: table;font-family: '汉仪铸字超然体'; background-image: linear-gradient(bottom, #3aa4ff, #e6e5e5);background-clip: text;text-fill-color: transparent;} .header .time {position: absolute;top: 0.3rem;left: 47%;transform: translate(-50%, 0);font-size: 0.26rem; background-image: linear-gradient(bottom, #3aa4ff, #e6e5e5);background-clip: text;text-fill-color: transparent; display: table;font-family: '汉仪铸字超然体';} .header .desc {position: absolute;top: 0.35rem;right: 0.4rem;font-size: 0.26rem;background-image: linear-gradient(bottom, #3aa4ff, #e6e5e5); background-clip: text;text-fill-color: transparent;display: table;font-family: '汉仪铸字超然体';} .main {width: 100%;height: calc(100% - 1.8rem);box-sizing: border-box;display: flex;justify-content: space-between;padding: 0 0.7rem;} .left_main {width: 18%;height: 100%;position: relative;} .left_main_title {position: absolute;font-size: 0.2rem;color: #3aa4ff;font-weight: 600;top: 4%;left: 0; white-space: nowrap;} .center_main {width: 45%;height: 100%;padding: 0.6rem 0;box-sizing: border-box;} .center_top {width: 100%;height: 60%;position: relative;} #center_bar{width: 100%;height: calc(100% - 0.5rem); } .center_bottom {width: 100%;height: 40%;display: flex;justify-content: space-between;} .center_bottom_box{width: 49%;height: 100%;} #center_pie{width: 100%;height: calc(100% - 0.5rem);} .right_main {width: 32%;height: 100%;padding: 0.6rem 0;box-sizing: border-box;} .right_box {width: 100%;height: 33%;} .right_title {width: 100%;height: 0.4rem;font-size: 0.3rem;color: #fff;line-height: 0.4rem;font-weight: 600; }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
