自从做出了这款可视化大屏,再也不用担心裁员了!这波稳了~-阿里云开发者社区

自从做出了这款可视化大屏,再也不用担心裁员了!这波稳了~

2024-08-19 217

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 自从做出了这款可视化大屏,再也不用担心裁员了!这波稳了~

主题:通用平台模板

开发技术:

Echarts+html+css+js

支持平台:

dw,vscode,webstorm,idea,Hbuilderx等

源码:文末附

整体效果

部分js代码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script><script type="text/javascript" src="js/js.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="head clearfix">
  <h1 class="pulll_left">某公司大数据展示模版标题</h1>
    <div class="menu menu2 pulll_left">
    <ul>
      <li><a href="#">导航标题</a></li>
      <li><a href="#">导航标题样式</a></li>
      <li><a href="#">导航标题</a></li>
      <li><a href="#">导航标题</a></li>
      <li><a href="#">导航标题</a></li>
      <li><a href="#">导航标题</a></li>
    </ul>
    </div>
    <div class="time" id="showTime">2018/6/12 17:00:12</div>

  </div>
  <div class="mainbox">
  <ul class="clearfix nav1">
    <li style="width: 25%">
    <div class="box">
      <div class="tit">模块标题</div>
      <div class="boxnav" id="echart1">

部分css代码



.head{position: relative; height: 90px; margin: 0 15px; padding-right: 60px;}
.head h1{  font-size: 30px; letter-spacing: -2px; text-align: center; line-height: 90px; padding-right: 55px; color: #daf9ff;}

.head .menu li{ display: inline-block; position: relative;margin: 30px 15px;;}
.head .menu li a{ display: block; font-size: 18px; color: #fff; line-height: 30px; padding: 0 10px; }
.head .time{position: absolute; right: 0; line-height: 90px; top: 0;}

.menu li:before,
.menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: "";  border-top: 2px solid #02a6b5; top: -1px;border-radius: 2px;}
.menu li:before,.menu li a:before{border-left: 2px solid #02a6b5;left: -1px;}
.menu li:after,.menu li a:after{border-right: 2px solid #02a6b5; right: -1px;}
.menu li a{ position:relative;}
.menu li a:before,
.menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4;  content: "";border-bottom: 2px solid #02a6b5; bottom:-1px;border-radius: 2px;}

.head .menu li a:hover{ color: #f4e925;}
.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after{border-color:  #f4e925; opacity: 1;}

.box{ border:1px solid rgba(7,118,181,.5); box-shadow:inset 0 0 10px rgba(7,118,181,.4); margin-bottom: 12px; position: relative;}
.tit{ padding: 10px 10px 10px 25px;border-bottom:1px solid rgba(7,118,181,.7);font-size: 16px; font-weight: 500; position: relative;}
.tit:before,.tit01:before{position: absolute; content: ""; width: 6px; height: 6px; background: rgba(22,214,255,.9);box-shadow: 0 0 5px rgba(22,214,255,.9); border-radius: 10px; left: 10px; top: 18px;}

.tit:after,.box:before{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; bottom:-1px; background:linear-gradient(to right,#076ead,#4ba6e0,#076ead); box-shadow: 0 0 5px rgba(131,189,227,1); opacity: .6}
.box:before{top: -1px;}

想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。

自从做出了这款可视化大屏,再也不用担心裁员了!这波稳了~

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

自从做出了这款可视化大屏,再也不用担心裁员了!这波稳了~

热门文章

最新文章

相关电子书