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">
<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;">
<a href="/index" color="#fff" target="_blank">
<span>控制台span>
a>
<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>
<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://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://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>
