<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>智慧园区</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/swiper.min.css"> <!-- <link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/index.css"> --> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video, input { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } html, body { width: 100%; height: 100%; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } /* custom */ a { color: #7e8c8d; -webkit-backface-visibility: hidden; text-decoration: none; } li { list-style: none; } body { -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } body { background-color: #000; font-family: "Microsoft Yahei"; } .container { position: relative; width: 100%; height: 100%; min-width: 1366px; min-height: 768px; overflow: hidden; /*background: url("../images/bg.png");*/ background:black; background-size: cover; transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .container .header { position: absolute; width: 100%; height: 60px; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: url("../images/title.png") no-repeat center top/1366px auto; } .container .headWord { position: absolute; width: 100%; height: 60px; top: 0; left: 0; font: 24px "微软雅黑"; font-weight: bold; color: #fff; text-align: center; text-align: -webkit-center; line-height: 60px; letter-spacing: 2px; } .container .header h2 { padding-left: 60px; font-size: 54px; color: #ffffff; } .container .header .right { position: absolute; top: 17px; right: 13px; height: 24px; line-height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; } .container .header .right a { font-size: 16px; color: #ffffff; margin-right: 10px; padding-left: 20px; background: url("../images/icon_exit.png") no-repeat left center/auto 16px; } .container .header .right .qr { position: relative; font-size: 16px; color: #ffffff; margin-right: 35px; cursor: pointer; } .container .header .right .qr:hover div { display: block; } .container .header .right .qr span { padding-left: 20px; background: url("../images/icon_app.png") no-repeat left center/auto 16px; } .container .header .right .qr div { position: absolute; display: none; top: 30px; left: 0; width: 100px; height: 100px; padding: 5px; background-color: #fff; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; } .container .header .right .qr div img { width: 100%; height: 100%; } .container .top { position: relative; z-index: 20; display: -webkit-box; display: -ms-flexbox; display: flex; height: 350px; -webkit-box-sizing: border-box; box-sizing: border-box; top: -60px; } .container .top .left { width: 370px; position: relative; margin-right: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .container .top .left .scene { position: relative; width: 200px; height: 160px; -webkit-perspective: 1000px; perspective: 1000px; } .container .top .left .carousel { width: 100%; height: 100%; position: relative; -webkit-transform: translateZ(-288px); transform: translateZ(-288px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } .container .top .left .carousel__cell { position: absolute; width: 154px; height: 136px; left: 23px; top: 12px; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s, -webkit-transform 1s; -webkit-box-sizing: border-box; box-sizing: border-box; } .container .top .left .carousel__cell img { width: 100%; height: 100%; } .container .top .left .arrow-pre, .container .top .left .arrow-next { width: 43px; height: 43px; outline: none; border: none; /*background: url("../images/up.png");*/ background: red; background-size: 100% 100%; cursor: pointer; } .container .top .left .arrow-next { /*background: url("../images/down.png");*/ background: red; } .container .top .right { width: 520px; margin-left: 70px; height: 100%; overflow: hidden; } .container .top .right .swiper-container { height: 100%; } .container .top .right .swiper-container .swiper-slide { position: relative; } .container .top .right .swiper-container .swiper-slide h4 { font-size: 36px; color: #ffffff; margin-bottom: 20px; } .container .top .right .swiper-container .swiper-slide span { display: inline-block; height: 40px; line-height: 36px; text-align: center; padding: 0 20px; font-size: 20px; color: #ffffff; margin-right: 10px; border: 2px solid rgba(0, 252, 255, 0.5); -webkit-box-sizing: border-box; box-sizing: border-box; background-color: rgba(43, 111, 235, 0.3); border-radius: 20px; } .container .top .right .swiper-container .swiper-slide p { margin-top: 60px; font-size: 16px; color: #ffffff; line-height: 36px; } .container .top .right .swiper-container .swiper-slide a { display: block; margin-top: 20px; width: 120px; height: 42px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 38px; text-align: center; border-radius: 20px; border: solid 2px #ffffff; font-size: 20px; color: #ffffff; background-color: transparent; -webkit-transition: all 0.6s; transition: all 0.6s; } .container .top .right .swiper-container .swiper-slide a:hover { background-color: rgba(255, 255, 255, 0.8); color: #666; } .container .top .right .swiper-container .swiper-slide .server { position: absolute; width: 120px; height: 120px; bottom: 0; right: 0; } .container .bottom { position: absolute; width: 1084px; height: 163px; bottom: 65px; left: 50%; margin-left: -542px; z-index: 20; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-image: url("../images/bottom-box.png"); background-size: 100%; -webkit-transition: all 1s; transition: all 1s; } .container .bottom::before { position: absolute; content: ''; width: 75px; height: 177px; background: url("../images/bottom-left.png") no-repeat left center/auto 177px; top: 0; left: -75px; -webkit-transition: all 0.8s; transition: all 0.8s; } .container .bottom::after { position: absolute; content: ''; width: 75px; height: 177px; background: url("../images/bottom-left.png") no-repeat right center/auto 177px; top: 0; right: 357px; -webkit-transition: all 0.8s; transition: all 0.8s; } .container .bottom.goright::before { left: 651px; } .container .bottom.goright::after { right: -75px; } .container .bottom .left { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 649px; height: 169px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 23px 10px 19px; } .container .bottom .left li:nth-child(1) i { background-image: url("../images/icon_1_1.png"); } .container .bottom .left li:nth-child(2) i { background-image: url("../images/icon_1_2.png"); } .container .bottom .left li:nth-child(3) i { background-image: url("../images/icon_1_3.png"); } .container .bottom .left li:nth-child(4) i { background-image: url("../images/icon_1_4.png"); } .container .bottom .left li:nth-child(5) i { background-image: url("../images/icon_1_5.png"); } .container .bottom .right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 354px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 23px 10px 19px; } .container .bottom .right li:nth-child(1) i { margin-left: -2px; background-image: url("../images/icon_1_5.png"); } .container .bottom .right li:nth-child(2) i { background-image: url("../images/icon_1_6.png"); } .container .bottom h4 { font-size: 17px; line-height: 20px; padding-bottom: 4px; color: #02f6ff; font-family: "Microsoft Yahei"; border-bottom: 2px solid #02f6ff; } .container .bottom ul { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .container .bottom ul::before { position: absolute; left: 0; top: 0; height: 92%; width: 100%; content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2)); background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2)); background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2)); background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2)); } .container .bottom ul li { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; opacity: 0.6; } .container .bottom ul li p { font-size: 14px; color: #fff; } .container .bottom ul li i { display: block; width: 31px; height: 31px; background-size: 31px auto; background-position: center; background-repeat: no-repeat; margin-bottom: 15px; } .container .bottom ul li::before { position: absolute; display: none; left: 0; top: 0; height: 80%; width: 100%; content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2)); background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2)); background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2)); background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2)); border-top: 4px solid #00f6ff; } .container .bottom ul li.active, .container .bottom ul li:hover { opacity: 1; } .container .bottom ul li.active::before, .container .bottom ul li:hover::before { display: block; } .container .bottom ul li.active { background: url("../images/bottom-select.png") no-repeat center 10px/116px auto; } .container .left-nav { position: absolute; z-index: 22; right: 0; top: 100px; } .container .left-nav li { position: relative; margin-bottom: 2px; } .container .left-nav li p { width: 51px; height: 60px; background: url("../images/bd.png"); background-size: 100%; line-height: 60px; font-weight: bold; font-size: 18px; font-style: italic; color: rgba(255, 255, 255, 0.5); text-align: center; -webkit-transition: all 0.1s; transition: all 0.1s; } .container .left-nav li a { position: absolute; top: 0; left: 60px; display: block; font-size: 14px; color: #ffffff; width: 270px; height: 60px; background: url("../images/bd2.png") no-repeat left center/auto 60px; text-align: center; line-height: 60px; -webkit-transition: all 0.5s; transition: all 0.5s; } .container .left-nav li:hover p { opacity: 0; } .container .left-nav li:hover a { -webkit-transform: translateX(-100%); transform: translateX(-100%); } </style> </head> <body> <div class="container"> <div class="header"> <div class="right" style="z-index: 99999;"> <!-- <div> --> <a href="/index" color="#fff" target="_blank"> <span>控制台</span> </a> <!-- </div> --> <a href="/logout">退出</a> </div> </div> <div class="headWord"> <p>智慧园区统一工作站</p> </div> <div class="top"> <div class="left"> <button class="arrow-pre previous-button"></button> <div class="scene"> <div class="carousel"> <div class="carousel__cell" data-index="0"><img src="http://61.174.54.120:9000/static/home/images/img1.png" alt=""></div> <div class="carousel__cell" data-index="1"><img src="http://61.174.54.120:9000/static/home/images/img2.png" alt=""></div> <div class="carousel__cell" data-index="2"><img src="http://61.174.54.120:9000/static/home/images/img3.png" alt=""></div> <div class="carousel__cell" data-index="3"><img src="http://61.174.54.120:9000/static/home/images/img4.png" alt=""></div> <div class="carousel__cell" data-index="4"><img src="http://61.174.54.120:9000/static/home/images/img5.png" alt=""></div> <div class="carousel__cell" data-index="5"><img src="http://61.174.54.120:9000/static/home/images/img6.png" alt=""></div> </div> </div> <button class="arrow-next next-button"></button> <!-- <div class="arrow arrow-left"></div> <div class="arrow arrow-right"></div> --> </div> <div class="right"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <h4>智慧管控平台</h4> <div><span class="type-1">管理中枢</span></div> <p>集成园区内的信息化智能管控设备，用一张图对园区进行综合管理，并打通其他应用系统，进行应急情况系统派单处理</p> <a href="http://115.236.99.184:9090/server/check" target="_blank">立即进入</a> </div> <div class="swiper-slide"> <h4>智慧党建</h4> <div><span class="type-1">管理中枢</span></div> <p>通过信息化手段，加强以园区为单位的基层党建建设，促进园区内中小企业党组织建设从而对企业健康发展起到促进作用</p> <a href="http://61.174.54.120:9000/party/home/index" target="_blank">立即进入</a> </div> <div class="swiper-slide"> <h4>智慧物业</h4> <div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div> <p>智慧物业管理系统，结合物联网+园区智慧物业服务，帮助园区构建线上线下结合的物业服务体系</p> <!-- <a href="http://115.236.99.184:8001/zhplat/login?ticket=59e711d152de7bec7304a8c2ecaf9f0f" target="_blank">立即进入</a> --> <a href="http://61.174.54.120:9000/property/home/index" target="_blank">立即进入</a> </div> <div class="swiper-slide"> <h4>新媒体</h4> <div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div> <p>新媒体运营系统，通过“一端输入，多端展示”的方式，实现大屏、PC、移动设备多端全方位覆盖，打造园区宣传与形象展示金名片</p> <a href="http://61.174.54.120:9000/newmedia/index" target="_blank">立即进入</a> </div> <div class="swiper-slide"> <h4>企业服务</h4> <div><span class="type-3">应用平台</span></div> <p>企业服务平台引入优质的第三方服务提供商，对服务提供商的服务进行整合，并在园区方的监管下给园区内企业提供各类服务对接</p> <a href="">立即进入</a> </div> <div class="swiper-slide"> <h4>数据驾驶舱</h4> <div><span class="type-3">应用平台</span></div> <p>为小微园区管理提供一揽子的服务，对内管理包含运行概况，智慧物业，园区经济，园区党建，综合管控等内容</p> <!-- <a href="http://datav.aliyun.com/share/df3993679dba4d9ea39373933f519433" target="_blank">立即进入</a> --> <a href="http://61.174.54.120:9000/dist/#/dashboard?userId=27" target="_blank">立即进入</a> </div> </div> </div> </div> </div> <div class="bottom"> <div class="left"> <h4>管理中枢</h4> <ul> <li class="active"><i></i> <p>智慧管控平台</p> </li> <li><i></i> <p>智慧党建</p> </li> <li><i></i> <p>智慧物业</p> </li> <li><i></i> <p>新媒体</p> </li> </ul> </div> <div class="right"> <h4>应用平台</h4> <ul> <li><i></i> <p>企业服务</p> </li> <li><i></i> <p>数据驾驶舱</p> </li> </ul> </div> </div> </div> <script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/swiper.min.js"></script> <script type="text/javascript"> (function() { var _max = 6 var _timer = null // 底部选中 $('.bottom ul').on('click', 'li', function() { var index = $(this).index(); if ($(this).parent().parent().hasClass('right')) { index += 4; } $('.bottom ul li').removeClass('active'); $(this).addClass('active'); if ($(this).parent().parent().hasClass('right')) { $('.bottom').addClass('goright') } else { $('.bottom').removeClass('goright') } // 改变滚动图片-3D // changeActive(index); selectedIndex = index rotateCarousel(); //轮播切换 swiper.slideTo(index, 600, false); //(index,speed,callBack) }); // swiper初始化 var swiper = new Swiper('.swiper-container', { allowTouchMove: false, preventClicks: false }); // 切换 function changeActive(index) { swiper.slideTo(index, 600, false); //触发底部点击事件 $('.bottom li').eq(index).click(); // $('.photo-cube__wrapper input').eq(0).click() }; //3D旋转方法 var carousel = document.querySelector('.carousel'); var cells = carousel.querySelectorAll('.carousel__cell'); var cellCount = 6; var selectedIndex = 0; var activeIndex = 0; var cellWidth = carousel.offsetWidth; var cellHeight = carousel.offsetHeight; var isHorizontal = false; var rotateFn = isHorizontal ? 'rotateY' : 'rotateX'; var radius, theta; function rotateCarousel() { var angle = theta * selectedIndex * -1; carousel.style.transform = 'translateZ(' + -radius + 'px) ' + rotateFn + '(' + angle + 'deg)'; } //左右切换 var prevButton = document.querySelector('.previous-button'); prevButton.addEventListener('click', function() { selectedIndex--; if (activeIndex === 0) { activeIndex = cellCount - 1; } else { activeIndex-- } var index = $('.carousel__cell').eq(activeIndex).data('index') changeActive(index) rotateCarousel(); }); var nextButton = document.querySelector('.next-button'); nextButton.addEventListener('click', function() { selectedIndex++; if (activeIndex === (cellCount - 1)) { activeIndex = 0 } else { activeIndex++ } var index = $('.carousel__cell').eq(activeIndex).data('index') changeActive(index) rotateCarousel(); }); function changeCarousel() { theta = 360 / cellCount; var cellSize = isHorizontal ? cellWidth : cellHeight; radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount)); for (var i = 0; i < cells.length; i++) { var cell = cells[i]; if (i < cellCount) { // visible cell cell.style.opacity = 1; var cellAngle = theta * i; cell.style.transform = rotateFn + '(' + cellAngle + 'deg) translateZ(' + radius + 'px)'; } else { // hidden cell cell.style.opacity = 0; cell.style.transform = 'none'; } } rotateCarousel(); }; // set initials changeCarousel(); })() </script> </body> </html>