主题:智慧图书馆大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<!DOCTYPE html> <html lang=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>智慧图书馆大屏</title> <link href="./static/app.74ee2ad5.css" rel="preload" as="style" /> <link href="./static/chunk-vendors.6438a5d4.css" rel="preload" as="style" /> <link href="./static/app.bdf8bad6.js" rel="preload" as="script" /> <link href="./static/chunk-vendors.bff9ba8f.js" rel="preload" as="script" /> <link href="./static/chunk-vendors.6438a5d4.css" rel="stylesheet" /> <link href="./static/app.74ee2ad5.css" rel="stylesheet" /> <style type="text/css"> x-vue-echarts { display: block; width: 100%; height: 100%; } </style> <link rel="stylesheet" href="static/app.74ee2ad5.css"> </head> <body> <noscript ><strong >We're sorry but app2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong ></noscript > <div id="app"> <div class="page" id="screen" style=" width: 1920px; height: 1080px; transform: scaleY(0.85463) scaleX(1) translate(-50%, -50%); " > <div class="map"></div> <div class="content"> <div class="head"> <div class="date">2023.10.08 星期日 10:50:21</div> <div class="title"> <img src="./img/title.3ad275b0.png" alt="" style="width: 436px; height: 48px" /> </div> <div class="date date2"> <img src="data:image/png;base64,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" alt="" srcset="" style="width: 25px; height: 25px" /> 晴 25℃ </div> </div>
部分css代码
.card{width:100%;margin-bottom:20px;display:flex;flex-direction:column} .card .card-head{height:40px;line-height:40px;display:flex;background-color:rgba(0,147,167,.4)} .card .card-head .card-head-icon{width:40px;height:40px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAAAXNSR0IArs4c6QAAAl1JREFUeF7t2b8vQ1EUB/DzUhKRiHRgRYhBIjGISEgTwmQyCJEwMvTfIZhsfk0Wi6WDJhaLGCxSewfShaGVypW8qOe1vd9G7j03vlbfxr0f33fSvBPJ3tmO8MdaICKYtdVXkGCYF8FAL4IRDBUA85xhBAMFwDgbRjBQAIyzYQQDBcC4u4atLW/JZeFEqrUP8Iyq4u7A8utH8vZekqubQym/VlQpAIdxC2YOVq1V5Pb+QB6enoFzqom6BzNXr9dr8lg6lcJdUY2E5UH8gMWHK78UQ5trfsEMXGBzzT9YYHNNB1hAc00PWDzX9s93LeevlxjBQHaCEQwUAONsGMFAATDOhhEMFADjbBjBQAEwzoYRDBQA4/obpmwXoB9M2S7AHdjC9LxMjG6KSKblU5B8W2HAFL0zcwdmLj05NiJzU3nJZPqaojUDU/LOzC2YufRgtl9Wcnnp7RlKRWsFpmAX4B7MXLq7KyOri9sykJ39hWYDZj7kaRfgByxWWprJyfjwhkTR91yzBfM01/yCpc01BMzDXPMPlpxrKFjcVke7AB1gjXPt4vr4x1yLv1a0+0b+78CagRCsXVUSvycYwUABMM6GEQwUAONsGMFAATDOhhEMFADjbBjBQAEwzoaBYJ3uAsA/YxvX87ai1Yk72QXYCoC5MMCS78zSLsnXOykqyC4AbI5tPJyGNd7IZhdgKwDmwgQzl0zONT6SFv/6xh0nwSzATCSea8ldgOXH0Vi4jyR60z/KEwyEJBjBQAEwzoYRDBQA42wYwUABMM6GEQwUAONsGMFAATDOhhEMFADjnw6BinR0qJvrAAAAAElFTkSuQmCC);background-size:100% 100%;background-repeat:no-repeat;flex-shrink:0} .card .card-head .card-head-text{display:flex;align-items:center;padding-left:10px;flex-grow:1} .card .card-head .card-title{height:21px;font-size:21px;line-height:21px;color:#55c1ff} .card .card-head .card-subtitle,.card .card-head .card-title{font-family:Source Han Sans CN-Medium,Source Han Sans CN;font-weight:500} .card .card-head .card-subtitle{font-size:13px;line-height:13px;margin-top:8px;color:#41a0d2;margin-left:10px}.card .card-body{flex-grow:1;background-color:rgba(0,147,167,.2);padding:18px} .processBox[data-v-d5014e54]{height:11px;border-radius:8px;overflow:hidden;background-color:rgba(0,147,167,.32);display:flex;align-items:center} .processBox .bgBox[data-v-d501
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
