|
|
<!DOCTYPE html><html><head> <title></title> <link href="~/Content/css/framework-font.css" rel="stylesheet" /> <link href="~/Content/css/framework-ui.css" rel="stylesheet" /> <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script> <link href="~/Content/css/framework-theme.css" rel="stylesheet" /> <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/css/framework-theme.css" rel="stylesheet" /> <script src="~/Content/js/charts/Chart.js"></script> <style> .item { opacity: 0; transition: opacity 1s ease .2s; /* 添加过渡效果 */ }
.item:first-child { opacity: 1; /* 第一张图片显示 */ } </style> <script>
$(function () { GetSalaryChart(); GetLeaveChart();
//var speed = 10//速度数值越大速度越慢 //var demo2 = document.getElementById("demo2"); //var demo = document.getElementById("demo"); //var demo1 = document.getElementById("demo1"); //demo2.innerHTML = demo1.innerHTML //function Marquee() { // if (demo2.offsetWidth - demo.scrollLeft <= 0) // demo.scrollLeft -= demo1.offsetWidth // else { // demo.scrollLeft++ // } //} //var MyMar = setInterval(Marquee, speed) //demo.onmouseover = function () { clearInterval(MyMar) } //demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } }); function GetSalaryChart() { var randomScalingFactor = function () { return Math.round(Math.random() * 100) }; var lineChartData = { labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "8月", "10月", "11月", "12月"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] } ] } //var ctx = document.getElementById("salarychart").getContext("2d"); //window.myLine = new Chart(ctx).Line(lineChartData, { // responsive: false, // bezierCurve: false //}); } function GetLeaveChart() { var randomScalingFactor = function () { return Math.round(Math.random() * 100) }; var a_value = randomScalingFactor(); var b_value = randomScalingFactor(); var c_value = randomScalingFactor(); var d_value = randomScalingFactor(); var doughnutData = [ { value: a_value, color: "#F7464A", highlight: "#FF5A5E", label: "事假" }, { value: b_value, color: "#46BFBD", highlight: "#5AD3D1", label: "病假" }, { value: c_value, color: "#FDB45C", highlight: "#FFC870", label: "公休假" }, { value: d_value, color: "#949FB1", highlight: "#A8B3C5", label: "调休假" } ]; //var ctx = document.getElementById("leavechart").getContext("2d"); //window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false }); //$("#a_value").html(a_value + "小时"); //$("#b_value").html(b_value + "小时"); //$("#c_value").html(c_value + "小时"); //$("#d_value").html(d_value + "小时"); }
</script></head><body> <div id="areascontent"> <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;"> <div class="panel panel-default"> <div class="panel-heading"> <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>欢迎页面 <div style="float: right; position: relative; top: -4px; right: 0px;"> <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="400" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div> </div> @*<div class="panel-body"> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #fc8675;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-user fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #6bafbd;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-hdd-o fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #f3ce85;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-shopping-cart fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #949FB1;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-gavel fa-3x"></i> </div> </div> </div> <div class="dashboard-stats"> <div class="dashboard-stats-item" style="background-color: #65cea7; margin-right: 0px;"> <h2 class="m-top-none"> </h2> <h5> </h5> <div class="stat-icon"> <i class="fa fa-truck fa-3x"></i> </div> </div> </div> </div>*@ </div> </div> <div class="banner"> <div class="warp"> @*<div class="item"><img src="~/Content/img/banner1.jpg" alt=""></div> <div class="item"><img src="~/Content/img/2.png" alt=""></div> <div class="item"><img src="~/Content/img/3.png" alt=""></div> <div class="item"><img src="~/Content/img/Index3.jpg" alt=""></div>*@ <div class="item"><img src="~/Content/img/5.png" alt=""></div> <div class="item"><img src="~/Content/img/6.png" alt=""></div> <div class="item"><img src="~/Content/img/7.png" alt=""></div> <div class="item"><img src="~/Content/img/8.png" alt=""></div> </div> <div class="div1"> < </div> <div class="div2 "> > </div> <div class="pagenation"> <div id="pagenation-item0"></div> <div id="pagenation-item1"></div> <div id="pagenation-item2"></div> <div id="pagenation-item3"></div> </div> </div> @*<div class="rows" style="overflow: hidden;"> <div style="float: left; width: 34%; margin-right: 1%;"> <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;"> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-thumbs-o-up fa-lg" style="padding-right: 5px;"></i>最新签约</div> <div class="panel-body"> <ul> <li><a href="#">南京森鹿皮件服饰有限公司</a><span class="time">2016-07-21</span></li> <li><a href="#">曲靖市绿能燃气运输有限公司</a><span class="time">2016-07-20</span></li> <li><a href="#">青海航天信息有限公司</a><span class="time">2016-07-19</span></li> <li><a href="#">吉林省蔬菜花卉科学研究院</a><span class="time">2016-07-17</span></li> <li><a href="#">青海省广播电视信息网络股份有限公司</a><span class="time">2016-07-17</span></li> <li><a href="#">国营长空精密机械制造公司</a><span class="time">2016-07-13</span></li> <li><a href="#">广东友元国土信息工程有限公司</a><span class="time">2016-07-12</span></li> <li><a href="#">广东友元国土信息工程有限公司</a><span class="time">2016-07-12</span></li> </ul> </div> </div> </div> </div> <div style="float: left; width: 34%; margin-right: 1%;"> <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;"> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-rss fa-lg" style="padding-right: 5px;"></i>通知公告</div> <div class="panel-body"> <ul> <li><a href="#">【通知】新版员工守则，即日执行</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】OA办公使用指南</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】劳动节集体出游指南</a><span class="time">2016-07-21</span></li> <li><a href="#">【通知】2016年G20财长和央行行</a><span class="time">2016-07-21</span></li> <li><a href="#">【通知】2016年G20财长和央行行</a><span class="time">2016-07-21</span></li> <li><a href="#">【通知】品牌价值的最佳选择</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】采购商城全新升级自营业正品</a><span class="time">2016-07-21</span></li> <li><a href="#">【公告】采购商城全新升级自营业正品</a><span class="time">2016-07-21</span></li> </ul> </div> </div> </div> </div> <div style="float: right; width: 30%;"> <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;"> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>企业文化</div> <div class="panel-body"> <ul> <li><a href="#">创新企业党建思想政治工作</a><span class="time">2016-07-02</span></li> <li><a href="#">现代国有企业道德体系初构</a><span class="time">2016-06-18</span></li> <li><a href="#">国有企业文化问题根源及文化重塑任务分析</a><span class="time">2016-06-26</span></li> <li><a href="#">国有企业文化建设必须突出员工文化</a><span class="time">2016-04-20</span></li> <li><a href="#">加强企业公民建设 推进企业和谐发展</a><span class="time">2016-03-08</span></li> <li><a href="#">不断提升大庆精神 实现企业持续发展</a><span class="time">2016-02-22</span></li> <li><a href="#">科学发展作指导 人水和谐路更宽</a><span class="time">2016-02-15</span></li> <li><a href="#">科学发展作指导 人水和谐路更宽</a><span class="time">2016-02-15</span></li> </ul> </div> </div> </div> </div> </div>*@ </div> <script> var index = 0; //定义初始下标 var banner = document.getElementsByClassName("banner")[0]; var itemList = document.getElementsByClassName("item"); var pagenationList = document.querySelectorAll(".pagenation>div"); var pagenation = document.querySelector(".pagenation"); itemList[0].style.opacity = 1; pagenationList[0].style.background = "blue" //初始第一张图对应的小圆点的颜色为蓝色 var up = document.getElementsByClassName("div1")[0]; var next = document.getElementsByClassName("div2")[0]; //下一张图片（封装方便下面自动播放定时器调用） function nextFn() { index = index >= itemList.length - 1 ? 0 : ++index; //判断点击到了最后一张图片再次点击返回到第一张图 for (var i = 0; i < itemList.length; i++) { itemList[i].style.opacity = 0; //图片透明度为0图片隐藏 pagenationList[i].style.background = "white " //图片没显现小圆点的颜色为白色 } itemList[index].style.transition = "opacity 1s ease .2s" itemList[index].style.opacity = 1; //图片透明度为1图片显现 pagenationList[index].style.background = "blue" //图片显现小圆点的颜色为蓝色 } next.onclick = nextFn; //下一张（点击事件）点击切换下一张图片 up.onclick = function () { //上一张（点击事件）点击切换上一张图片 index = index <= 0 ? itemList.length - 1 : --index; //判断点击到了第一张图片再次点击返回到最后一张图 for (var i = 0; i < itemList.length; i++) { itemList[i].style.opacity = 0; pagenationList[i].style.background = "white" } itemList[index].style.transition = "opacity 1s ease .2s" //增加过渡效果 itemList[index].style.opacity = 1; pagenationList[index].style.background = "blue" } //设置定时器，自动向下播放图片 var t1 = setInterval(nextFn, 7000) banner.onmouseover = function () { clearInterval(t1); } banner.onmouseout = function () { t1 = setInterval(nextFn, 7000) } // 事件委托 pagenation.onclick = function (event) { event = window.event || event console.log(event); if (event.target.className == "pagenation") { console.log("点击的是父元素"); } else { var id = event.target.id; var photoIndex = null; for (var i = 0; i < pagenationList.length; i++) { pagenationList[i].style.background = "white" if (id.indexOf(i) >= 0) { photoIndex = i; } } event.target.style.background = "blue" index = photoIndex; // 将小圆点对应的下标与图片下标对应 for (var i = 0; i < itemList.length; i++) { itemList[i].style.opacity = 0; } itemList[index].style.transition = "opacity 1s ease .2s" itemList[photoIndex].style.opacity = 1; } } </script>
<style> #copyrightcontent { height: 30px; line-height: 29px; overflow: hidden; position: absolute; top: 100%; margin-top: -30px; width: 100%; background-color: #fff; border: 1px solid #e6e6e6; padding-left: 10px; padding-right: 10px; }
.dashboard-stats { float: left; width: 20%; }
.dashboard-stats-item { position: relative; overflow: hidden; color: #fff; cursor: pointer; height: 105px; margin-right: 25px; margin-bottom: 10px; padding: 20px 20px; }
.dashboard-stats-item .m-top-none { margin-top: 2px; }
.dashboard-stats-item h2 { font-size: 35px; font-family: inherit; line-height: 1.1; font-weight: 500; }
.dashboard-stats-item h5 { font-size: 14px; font-family: inherit; margin-top: 3px; line-height: 1.1; }
.dashboard-stats-item .stat-icon { position: absolute; top: 10px; right: 10px; font-size: 30px; opacity: .3; }
.dashboard-stats i.fa.stats-icon { width: 50px; padding: 20px; font-size: 50px; text-align: center; color: #fff; height: 50px; border-radius: 10px; }
.panel-default { border: none; border-radius: 0px; margin-bottom: 0px; box-shadow: none; -webkit-box-shadow: none; }
.panel-default > .panel-heading { color: #1281c1; background-color: #fff; border-color: #e6e6e6; padding: 10px 10px; }
.panel-default > .panel-body { padding: 10px; padding-bottom: 0px; }
.panel-default > .panel-body ul { overflow: hidden; padding: 0; margin: 0px; margin-top: -5px; }
.panel-default > .panel-body ul li { line-height: 27px; list-style-type: none; white-space: nowrap; text-overflow: ellipsis; }
.panel-default > .panel-body ul li .time { color: #a1a1a1; float: right; padding-right: 5px; }
.banner { width: 95%; height: 500px; /*position: relative;*/ /* border: 1px solid red; */ /*margin: 100px auto;*/ }
.banner .wrap { width: 100%; }
.banner .wrap .item { width: 100%; }
.item img { width: 100%; height: 85%; vertical-align: top; position: absolute; }
.div1 { position: absolute; left: 0; top: 50%; transform: translatey(-50%); cursor: pointer; width: 41px; height: 69px; font-size: 30px; line-height: 70px; text-align: center; color: #D6D8D4; background-color: rgba(0, 0, 0, 0.3); }
.div2 { position: absolute; right: 0; top: 50%; transform: translatey(-50%); cursor: pointer; width: 41px; height: 69px; font-size: 30px; line-height: 70px; text-align: center; color: #D6D8D4; background-color: rgba(0, 0, 0, 0.3); }
.pagenation { position: absolute; /* border: 1px solid red; */ left: 50%; transform: translateX(-50%); display: flex; bottom: 40px; }
.pagenation > div { width: 10px; height: 10px; border-radius: 50%; background-color: white; margin-right: 10px; cursor: pointer; }
.pagenation > div:last-child { margin-right: 0; } </style></body></html>
|
