主题:数字化图书馆大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="tsg_head "> <div class="tsg_title fc"> <div class="d1"> <p id="time">2024-6-21 10:1:49</p> </div> <div class="d2"><img src="./static/title.png"></div> <div class="d3"><iframe allowtransparency="true" frameborder="0" width="255" height="60" scrolling="no" src="https://tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=1&bd=0&k=000000&f=00ffff<f=009944&htf=cc0000&q=0&e=0&a=1&c=54511&w=255&h=60&align=center"></iframe></div> </div> <div class="tsg_hul fc"> <div class="tsg_hli"> <p class="p1"><img class="img1" src="./static/right.png"><span>馆藏图书</span><img class="img2" src="./static/right.png"></p> <p class="p2">3367220<span>册</span></p> </div> <div class="tsg_hli"> <p class="p1"><img class="img1" src="./static/right.png"><span>新增图书</span><img class="img2" src="./static/right.png"></p> <p class="p2">76921<span>册</span></p> </div> <div class="tsg_hli"> <p class="p1"><img class="img1" src="./static/right.png"><span>读者总数</span><img class="img2" src="./static/right.png"></p> <p class="p2">271599<span>册</span></p> </div> <div class="tsg_hli"> <p class="p1"><img class="img1" src="./static/right.png"><span>新增读者</span><img class="img2" src="./static/right.png"></p> <p class="p2">19206<span>册</span></p> </div>
部分css代码
img {border: 0 none;margin: 0;padding: 0;font-size: 100%;font-family: '微软雅黑'; list-style-type: none;line-height: 180%;letter-spacing: 1px;} body {background: #001128;background: url(../images/bj1.png) no-repeat #063b88;background-size: cover; min-height: 100vh;min-width: 1600px;} img {max-width: 100%;max-height: 100%;} a {transition: 0.3s;transition: 0.3s;transition: 0.3s;transition: 0.3s; color: #333;text-decoration: none;} a:hover {text-decoration: none;} .row {margin: 0;padding: 0} .fc {display: flex;display: flex;display: flexbox;display: flex; align-items: center;align-items: center;align-items: center;} .fl {display: flex;display: flex;display: flexbox;display: flex;} .tsg_head {background: url(../images/top.png) no-repeat;background-size: 100%100%;height: 23vh;margin: 0 4vh;} .tsg_title {padding-top: 2vh;} .tsg_title .d2 img {width: 70%;} .tsg_title .d1 {width: 30%;text-align: center;color: #6dc1ff;font-size: 1.2rem;font-weight: bold;transform: rotate(5deg); position: relative;top: -1rem;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
