chenxuan/visual-vue-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
chenxuanThinkpad
2023-10-18 16:30:26 +08:00
parent 2fdae738f0
commit 730c511206
3037 changed files with 987677 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resource/html/09others/01/css/index.css
+253
View File
@@ -0,0 +1,253 @@
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
overflow: auto;
}
.public-bg{
background: rgba(12,26,63,0.3);
}
.public-title{
width: calc(100% - 20px);
height: 30px;
position: relative;
top: 0;
left: 5px;
color: white;
padding-left: 16px;
line-height: 30px;
font-size: 13px;
}
.public-title:before{
width: 4px;
height: 20px;
top: 5px;
position: absolute;
content: "";
background: #2997e4;
border-radius: 2px;
left: 5px;
}
.content-body{
width: 100%;
height: 100%;
background: #0d325f;
background-size: 100% 100%;
position: absolute;
}
.header{
height: 70px;
width: 100%;
/* border: 1px solid red;*/
}
.header .header-left{
width: 50%;
float: left;
line-height: 70px;
}
.header .header-left span{
color: #ffffff;
font-weight: bold;
font-size: 24px;
letter-spacing:2px;
padding: 0 20px;
}
.header .header-time{
width: 48%;
line-height: 70px;
float: right;
text-align: right;
padding-right: 20px;
}
.header .header-time span{
color: #ffffff;
}
.content{
width: 100%;
height: calc(100% - 75px);
position: absolute;
}
.content .content-con{
height: 100%;
}
.content .content-con .left-body{
width: 22%;
height: 100%;
float: left;
margin:0 0.3%;
}
.left-body .left-top{
width: 100%;
height: 27%;
}
.left-body .left-top .top-body{
width: 100%;
height: calc(100% - 30px);
}
.left-body .left-top .top-body .top-left{
float: left;
width: 50%;
height: 100%;
}
.top-left-title{
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
}
.top-left-title h6{
color: #bad0e2;
}
.top-left-title span{
margin-top: 30px;
display: inline-block;
color: #2aa4f1;
/* height: 80px;
line-height: 80px;*/
}
.top-left-title span b{
font-size: 30px;
letter-spacing:5px;
}
.top-left-title img{
width: 80%;
}
.left-body .left-top .top-body .top-right{
float: left;
width: 50%;
height: 100%;
}
.left-body .left-con{
width: 100%;
height: 38%;
margin-top: 1.6%;
}
.title-nav{
width: 100%;
height: calc(100% - 30px);
}
.left-body .left-bottom{
width: 100%;
height: 32%;
margin-top: 1.6%;
}
.center-body{
width: 54%;
height: 100%;
margin:0 0.3%;
float: left;
/*border: 1px solid red;*/
}
.center-body .map{
width: 100%;
height: 100%;
}
.right-body{
width: 22%;
height: 100%;
float: right;
margin:0 0.3%;
}
.right-body .right-top{
width: 100%;
height: 32%;
}
.title-nav .top5-ul{
width: calc(100% - 20px);
height: calc(100% - 30px);
padding: 10px;
}
.title-nav .top5-ul ul{
width: 100%;
height: 100%;
}
.title-nav .top5-ul ul,li{
list-style: none;
}
.title-nav .top5-ul ul>li{
width: 100%;
height: 20%;
color: #ffffff;
line-height: 68px;
justify-content: center;
}
.title-nav .top5-ul ul li span{
margin-left: 3%;
font-size: 14px;
}
.title-nav .top5-ul ul li span:nth-child(1){
color: #EB6841;
font-style: oblique;
/*width: 10%;*/
/*#20a8fe
#EB6841
#3FB8AF
#FE4365
#FC9D9A*/
display: inline-block;
text-align: center;
font-size: 20px;
}
.title-nav .top5-ul ul li span:nth-child(2){
width: 10%;
display: inline-block;
text-align: center;
height: 30px;
line-height: 30px;
/* height: 100%;*/
/*line-height: 100%;*/
vertical-align: center;
border-radius: 5px;
color: #ffffff;
}
.title-nav .top5-ul ul li:nth-child(1) span:nth-child(2),.title-nav .top5-ul ul li:nth-child(2) span:nth-child(2)
,.title-nav .top5-ul ul li:nth-child(3) span:nth-child(2){
background: #d89346;
}
.title-nav .top5-ul ul li:nth-child(4) span:nth-child(2)
,.title-nav .top5-ul ul li:nth-child(5) span:nth-child(2){
background: #1db5ea;
}
.title-nav .top5-ul ul li span:nth-child(3){
/*width: 15%;*/
display: inline-block;
text-align: center;
}
.title-nav .top5-ul ul li span:nth-child(4){
/*width: 15%;*/
display: inline-block;
text-align: center;
}
.title-nav .top5-ul ul li span:nth-child(5){
/*width: 20%;*/
display: inline-block;
text-align: center;
}
.title-nav .top5-ul ul li span:nth-child(6){
display: inline-block;
text-align: center;
}
.right-body .right-con{
width: 100%;
height: 25%;
margin-top: 2%;
}
.right-body .right-bottom{
width: 100%;
height: 39%;
margin-top: 2%;
}
resource/html/09others/01/image/pictre.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

resource/html/09others/01/index.html
+160
View File
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebTools-Web开发者素材</title>
<link rel="icon" href="../../img/logo.png">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="content-body">
<div class="header">
<div class="header-left">
<span>水质情况实时监测预警系统</span>
</div>
<div class="header-time">
<span id="time"></span>
</div>
</div>
<div class="content">
<div class="content-con">
<div class="left-body">
<div class="left-top public-bg">
<div class="public-title">重点水质量检测区</div>
<div class="top-body">
<div class="top-left">
<div class="top-left-title">
<h6>注水量</h6>
<span><b>1756</b>m3/h</span>
<img src="image/pictre.png" alt="更多资源：http://www.anydo.wang">
</div>
</div>
<div class="top-right">
<div class="top-left-title">
<h6>泄水量</h6>
<span><b>3520</b>m3/h</span>
<img src="image/pictre.png" alt="更多资源：http://www.anydo.wang">
</div>
</div>
</div>
</div>
<div class="left-con public-bg">
<div class="public-title">水质量分布情况</div>
<div class="title-nav" id="leida"></div>
</div>
<div class="left-bottom public-bg">
<div class="public-title">企业污染排放情况</div>
<div class="title-nav" id="wuran"></div>
</div>
</div>
<div class="center-body">
<div class="map" id="map"></div>
</div>
<div class="right-body">
<div class="right-top public-bg">
<div class="public-title">水质污染TOP5</div>
<div class="title-nav">
<div class="top5-ul">
<ul>
<li>
<span>1</span>
<span>严重</span>
<span>北京市</span>
<span>房山区</span>
<span>重度污染</span>
<span>15公里</span>
</li>
<li>
<span>2</span>
<span>严重</span>
<span>上海市</span>
<span>闵行区</span>
<span>重度污染</span>
<span>10公里</span>
</li>
<li>
<span>3</span>
<span>严重</span>
<span>北京市</span>
<span>朝阳区</span>
<span>重度污染</span>
<span>9.3公里</span>
</li>
<li>
<span>4</span>
<span>中度</span>
<span>广东省</span>
<span>广州市</span>
<span>中度污染</span>
<span>8.6公里</span>
</li>
<li>
<span>5</span>
<span>中度</span>
<span>浙江省</span>
<span>杭州市</span>
<span>中度污染</span>
<span>6.6公里</span>
</li>
</ul>
</div>
</div>
</div>
<div class="right-con public-bg">
<div class="public-title">水质类别占比</div>
<div class="title-nav" id="huaxing"></div>
</div>
<div class="right-bottom public-bg">
<div class="public-title">主要地区水流量</div>
<div class="title-nav" id="zhexian"></div>
</div>
</div>
</div>
</div>
</div>
<!--更多资源：http://www.anydo.wang -->
</body>
</html>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/echarts/echarts.min.js"></script>
<script src="../../js/echarts/china.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
//顶部时间
function getTime(){
var myDate = new Date();
var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
var myToday = myDate.getDate(); //获取当前日(1-31)
var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
var myHour = myDate.getHours(); //获取当前小时数(0-23)
var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var nowTime;
nowTime = myYear+'年'+fillZero(myMonth)+'月'+fillZero(myToday)+'日'+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
//console.log(nowTime);
$('#time').html(nowTime);
};
function fillZero(str){
var realNum;
if(str<10){
realNum = '0'+str;
}else{
realNum = str;
}
return realNum;
}
//大屏
setInterval(getTime,1000);
</script>
resource/html/09others/01/js/china.js
+29
View File
File diff suppressed because one or more lines are too long
resource/html/09others/01/js/index.js
+1018
View File
File diff suppressed because it is too large Load Diff