parent
69b0930e7b
commit
c211d2e42d
|
After Width: | Height: | Size: 304 KiB |
|
Before Width: | Height: | Size: 322 KiB |
@ -0,0 +1,33 @@
|
||||
.centerBoxTop{
|
||||
width: 100%;
|
||||
height:49%;
|
||||
|
||||
}
|
||||
.centerBoxBottom{
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
.chain-item{
|
||||
float: left;
|
||||
width: 21%;
|
||||
height: 10vw;
|
||||
background-color: rgba(13, 226, 232, .2);
|
||||
/* opacity: .8; */
|
||||
margin-left: .5vw;
|
||||
margin-top: 1vw;
|
||||
color: #0dd8df;
|
||||
text-align: center;
|
||||
}
|
||||
.chain-item h3{
|
||||
font-size: .8vw;
|
||||
padding:.5vw 0;
|
||||
}
|
||||
.chain-item p{
|
||||
font-size: .5vw;
|
||||
padding:.1vw 0;
|
||||
}
|
||||
/* #liquidfill-chart{
|
||||
background: url(../img/2019072517094175.gif) no-repeat center bottom;
|
||||
background-size: 100% 100%;
|
||||
} */
|
||||
@ -0,0 +1,314 @@
|
||||
.longBox {
|
||||
/* position: relative; */
|
||||
width: 99.5%;
|
||||
}
|
||||
.cardType {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.landCondition, .landFertility, .landIrrigate, .landDrainage, .landType {
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
}
|
||||
.percent{
|
||||
font-size: .8vw;
|
||||
color: #fff;
|
||||
}
|
||||
.percent .pec1{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 60%;
|
||||
}
|
||||
.percent .pec2 {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
left: 58%;
|
||||
}
|
||||
.percent .pec3 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 32%;
|
||||
}
|
||||
.utilizeActuality {
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
display: flex;
|
||||
color: #0EFCFF;
|
||||
font-weight: 10;
|
||||
}
|
||||
.utilizeActuality table {
|
||||
/* width: 90%; */
|
||||
/* height: 78%; */
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
border: 0 solid #0EFCFF;
|
||||
}
|
||||
.utilizeActuality table thead {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
}
|
||||
.trBox {
|
||||
height: 18%;
|
||||
}
|
||||
|
||||
|
||||
.textBox {
|
||||
margin-left: 2.5%;
|
||||
margin-top: .2vw;
|
||||
width: 95%;
|
||||
height: 45%;
|
||||
border: 1px solid #0EFCFF;
|
||||
color: #39DCF4;
|
||||
}
|
||||
.textBox .topText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.topText .topOne {
|
||||
margin-left: .5vw;
|
||||
}
|
||||
.topText .topTwo {
|
||||
margin-left: 2.5vw;
|
||||
}
|
||||
.textBox .middleText {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 2vw;
|
||||
background-color: rgba(14,252,255,.22);
|
||||
font-size: .8vw;
|
||||
}
|
||||
.middleText span {
|
||||
/* margin-top: .8vw; */
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16.5%;
|
||||
height: 100%;
|
||||
line-height: 2vw;
|
||||
text-align: center;
|
||||
border-right: 2px solid rgba(14,252,255,.16);
|
||||
}
|
||||
.middleText .tipBox {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
background-color: red;
|
||||
display: inline-block;
|
||||
width: 29%;
|
||||
height: 29%;
|
||||
border: 1px solid rgba(14,252,255,0.48);
|
||||
background: rgba(2,57,99,0.77);
|
||||
color: #0EFCFF;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.middleText .tipOne {
|
||||
left: -4%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipTwo {
|
||||
left: 12%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipThree {
|
||||
left: 28%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipFour {
|
||||
left: 44%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipFive {
|
||||
left: 59%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipSix {
|
||||
left: 73%;
|
||||
display: none;
|
||||
}
|
||||
.tipBox div {
|
||||
margin: .25vw;
|
||||
}
|
||||
.bottomText {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.bottomText .soilContamination {
|
||||
width: 100%;
|
||||
margin-left: .5vw;
|
||||
margin-top: .55vw;
|
||||
}
|
||||
.soilContamination .sencondBox {
|
||||
margin-left: .8vw;
|
||||
}
|
||||
.bottomText .soilData {
|
||||
width: 100%;
|
||||
margin-left: .5vw;
|
||||
margin-top: .55vw;
|
||||
}
|
||||
.soilData span {
|
||||
margin-left: .5vw;
|
||||
}
|
||||
.videoBox {
|
||||
margin-top: 2%;
|
||||
margin-left: 2.5%;
|
||||
width: 95%;
|
||||
height: 34%;
|
||||
}
|
||||
.videoBox .vedioIn {
|
||||
display: inline-block;
|
||||
width: 23.5%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.mlRight {
|
||||
margin-right: 1%;
|
||||
}
|
||||
.videoIn video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: red; */
|
||||
}
|
||||
/* .tipBox {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 58%;
|
||||
width: 29%;
|
||||
height: 29%;
|
||||
border: 1px solid rgba(14,252,255,0.48);
|
||||
background: rgba(2,57,99,0.77);
|
||||
color: #0EFCFF;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.tipBox div {
|
||||
margin: .3vw;
|
||||
} */
|
||||
|
||||
|
||||
.centerBox .topData {
|
||||
width: 100%;
|
||||
height: 22%;
|
||||
border: 1px solid #0EFCFF;
|
||||
}
|
||||
.topData .topContent {
|
||||
width: 95%;
|
||||
height: 50%;
|
||||
margin-left: 2.5%;
|
||||
border-bottom: 1px solid rgba(14,252,255,0.42);;
|
||||
|
||||
}
|
||||
.topData .content, ul {
|
||||
width: 95%;
|
||||
height: 50%;
|
||||
/* margin-left: 2%; */
|
||||
/* border-bottom: 1px solid #0EFCFF; */
|
||||
display: -webkit-flex;
|
||||
-webkit-justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
.content li {
|
||||
text-align: center;
|
||||
}
|
||||
.content ul P {
|
||||
font-size: .7VW;
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.content ul .num {
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
}
|
||||
.content ul .unit {
|
||||
color: #0EFCFF;
|
||||
font-size: .6vw;
|
||||
}
|
||||
.bottomData {
|
||||
width: 100%;
|
||||
height: 75.5%;
|
||||
margin-top: 3%;
|
||||
/* background-color: green; */
|
||||
background-image: url(../img/centerBg.jpg);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/* ========= 地图样式 stat========== */
|
||||
.map{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 44%;
|
||||
margin-top: 10%;
|
||||
/* background: white; */
|
||||
}
|
||||
.map img {
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.mapActived1 {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 43.5%;
|
||||
width: 1.5vw;
|
||||
height: 3vw;
|
||||
border-radius: 90px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mapActived2 {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 23%;
|
||||
width: 3vw;
|
||||
height: 2vw;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.mapActived3 {
|
||||
position: absolute;
|
||||
top: 44%;
|
||||
right: 13.5%;
|
||||
width: 1.8vw;
|
||||
height: 4vw;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mapContent1 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 47%;
|
||||
top: -5%;
|
||||
background: rgba(255,255,255, .2);
|
||||
}
|
||||
.mapContent2 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 70%;
|
||||
top: 5%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContent3 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
right: 15%;
|
||||
top: 12%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContentFont {
|
||||
width: 85%;
|
||||
margin-left: 12%;
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
letter-spacing: .05vw;
|
||||
}
|
||||
.mapContentFont:nth-child(1) {
|
||||
margin-top: .6vw;
|
||||
}
|
||||
.mapContentFont span {
|
||||
color: white;
|
||||
}
|
||||
@ -0,0 +1,690 @@
|
||||
/* 左侧第一个盒子start--- */
|
||||
|
||||
/**/
|
||||
/* */
|
||||
/**/
|
||||
|
||||
.firstBox {
|
||||
width: 90%;
|
||||
margin-left: 6%;
|
||||
height: 90%;
|
||||
}
|
||||
.firstBox .pic {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
}
|
||||
.pic img {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
height: 80%;
|
||||
margin-top: 1vw;
|
||||
|
||||
}
|
||||
.first_top1 {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.first_top2 {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.picText {
|
||||
color: #0EFCFF;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.picText .text_second {
|
||||
margin-left: 6vw;
|
||||
}
|
||||
|
||||
/* 声波动画start--- */
|
||||
.voice_animation {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin-top: 1vw;
|
||||
background-image: url(../img/voice_pic.png);
|
||||
background-size: 90% 90%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
/* 声波动画over--- */
|
||||
|
||||
|
||||
/* 进度条start--- */
|
||||
.progress {
|
||||
width: 93%;
|
||||
height: 10%;
|
||||
margin-top: 1vw;
|
||||
margin-left: .6vw;
|
||||
background-image: url(../img/progress_pic.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/* 进度条over--- */
|
||||
|
||||
|
||||
.about_illness {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
margin-top: 1.5vw;
|
||||
margin-left: .6vw;
|
||||
color: #fff;
|
||||
font-size: .6vw;
|
||||
}
|
||||
.about_illness > div {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
background-image: url(../img/illness_pic.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.prevent {
|
||||
margin-left: .5vw;
|
||||
text-indent: .2vw;
|
||||
}
|
||||
.symptom {
|
||||
/* text-indent: .2vw; */
|
||||
/* font-size: .5vw; */
|
||||
}
|
||||
.symptom_content, .prevent_content {
|
||||
color: #0EFCFF;
|
||||
margin-top: .5vw;
|
||||
margin: .6vw .2vw .2vw .5vw;
|
||||
}
|
||||
.symptom_title .prevent_title {
|
||||
font-size: .1vw;
|
||||
color: red;
|
||||
}
|
||||
/* 左侧第一个盒子over--- */
|
||||
|
||||
|
||||
/* center部分start--- */
|
||||
.maps {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
margin-top: 2%;
|
||||
/* background: pink; */
|
||||
/* background-image: url(../img/landLevel.png); */
|
||||
/* background-size: 95% 100%; */
|
||||
/* background-repeat: no-repeat; */
|
||||
/* background-position: center; */
|
||||
}
|
||||
.maps .land_level {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin-left: 2.5%;
|
||||
}
|
||||
.maps .wifi_gif {
|
||||
position: absolute;
|
||||
right: 27%;
|
||||
top: -3.5%;
|
||||
width: 5%;
|
||||
height: 10%;
|
||||
}
|
||||
.maps .sun_pic {
|
||||
position: absolute;
|
||||
top: -5%;
|
||||
left: 18%;
|
||||
width: 10%;
|
||||
height: 15%;
|
||||
|
||||
animation:mymove 3s infinite;
|
||||
-webkit-animation:mymove 3s infinite; /*Safari and Chrome*/
|
||||
animation-direction:alternate;/*轮流反向播放动画。*/
|
||||
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||||
/* Safari 和 Chrome */
|
||||
-webkit-animation:mymove 3s infinite;
|
||||
-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
}
|
||||
@keyframes mymove
|
||||
{
|
||||
0%{
|
||||
transform: scale(1); /*开始为原始大小*/
|
||||
}
|
||||
25%{
|
||||
transform: scale(1.1); /*放大1.1倍*/
|
||||
}
|
||||
50%{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
75%{
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove /*Safari and Chrome*/
|
||||
{
|
||||
0%{
|
||||
transform: scale(1); /*开始为原始大小*/
|
||||
}
|
||||
25%{
|
||||
transform: scale(1.1); /*放大1.1倍*/
|
||||
}
|
||||
50%{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
75%{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.maps .wrj_pic {
|
||||
position: absolute;
|
||||
width: 8%;
|
||||
height: 8%;
|
||||
left: 30%;
|
||||
animation: myfirst 5s infinite;
|
||||
-moz-animation: myfirst 5s infinite;
|
||||
/* Firefox */
|
||||
-webkit-animation: myfirst 5s infinite;
|
||||
/* Safari 和 Chrome */
|
||||
-o-animation: myfirst 5s infinite;
|
||||
/* Opera */
|
||||
/* animation: btn-load-loop 1s linear infinite; */
|
||||
}
|
||||
|
||||
|
||||
@keyframes myfirst
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:150px; top:300px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
@-moz-keyframes myfirst
|
||||
/* Firefox */
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:500px; top:200px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes myfirst
|
||||
/* Safari 和 Chrome */
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:500px; top:200px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
@-o-keyframes myfirst
|
||||
/* Opera */
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:500px; top:200px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
.wind_gif {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
width: 10%;
|
||||
height: 19%;
|
||||
}
|
||||
|
||||
.plant_pic {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 60%;
|
||||
width: 8%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.windows, .window_two, .window_three, .window_four, .window_five, .window_six{
|
||||
padding: 1.5%;
|
||||
color: #0EFCFF;
|
||||
background: rgba(40, 229, 233, .2);
|
||||
}
|
||||
.windows {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 3%;
|
||||
}
|
||||
.windows li:nth-of-type(1) {
|
||||
font-size: .9vw;
|
||||
}
|
||||
.windows li {
|
||||
margin-bottom: .2vw;
|
||||
}
|
||||
.window_two {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
/* right: 1%; */
|
||||
top: 5%;
|
||||
}
|
||||
.window_two li:nth-of-type(1) {
|
||||
font-size: .9vw;
|
||||
}
|
||||
.window_three {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 60%;
|
||||
}
|
||||
.window_four {
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: 10%;
|
||||
}
|
||||
.window_five {
|
||||
position: absolute;
|
||||
bottom: 15%;
|
||||
left: 20%;
|
||||
}
|
||||
.window_six{
|
||||
position: absolute;
|
||||
/* border: 1px solid red; */
|
||||
right: 40%;
|
||||
top: 0%;
|
||||
}
|
||||
.peasant {
|
||||
position: absolute;
|
||||
right: 17%;
|
||||
top: 27%;
|
||||
width: 5.5%;
|
||||
height:9%;
|
||||
cursor: pointer;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.display_box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.land_box1 {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
top: 32%;
|
||||
width: 13%;
|
||||
height: 30%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.land_box2 {
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 65%;
|
||||
width: 20%;
|
||||
height: 15%;
|
||||
transform:rotate(150deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.land_box3 {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 40%;
|
||||
width: 20%;
|
||||
height: 15%;
|
||||
transform:rotate(150deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.land_box4 {
|
||||
position: absolute;
|
||||
right: 41%;
|
||||
top: 0%;
|
||||
width: 10%;
|
||||
height: 25%;
|
||||
transform:rotate(140deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.plant {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 35%;
|
||||
width: 25%;
|
||||
height: 30%;
|
||||
cursor: pointer;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.soil_data {
|
||||
position: absolute;
|
||||
bottom:23%;
|
||||
left: 45%;
|
||||
width: 55%;
|
||||
height: 10%;
|
||||
transform:rotate(150deg);
|
||||
}
|
||||
.weather_info {
|
||||
position: absolute;
|
||||
top: -5%;
|
||||
left: 18%;
|
||||
width: 10%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
/* center部分over--- */
|
||||
|
||||
|
||||
/* left bottom start--- */
|
||||
.leftBottom {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 32%;
|
||||
height: 80%;
|
||||
font-size: .6vw;
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.leftBottom .land_data p {
|
||||
position: absolute;
|
||||
left: 52%;
|
||||
top: 14%;
|
||||
}
|
||||
.land_data p:nth-child(2) {
|
||||
top: 24%;
|
||||
left: 57%;
|
||||
}
|
||||
.land_data p:nth-child(3) {
|
||||
top: 32%;
|
||||
left: 67%;
|
||||
}
|
||||
.right_box {
|
||||
float: right;
|
||||
width: 65%;
|
||||
height: 70%;
|
||||
/* margin: 2%; */
|
||||
margin-top: 1%;
|
||||
margin-right: 1%;
|
||||
/* background-color: red; */
|
||||
}
|
||||
.grow_data {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.grow_data img {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
height: 80%;
|
||||
margin-top: .8vw;
|
||||
}
|
||||
.grow_data p {
|
||||
color: #0EFCFF;
|
||||
position: absolute;
|
||||
}
|
||||
.grow_data p:nth-of-type(1) {
|
||||
top: 3%;
|
||||
left: 5%;
|
||||
}
|
||||
.grow_data p:nth-of-type(2) {
|
||||
top: 47%;
|
||||
left: 22%;
|
||||
}
|
||||
.grow_data p:nth-of-type(3) {
|
||||
top: 80%;
|
||||
left: 5%;
|
||||
}
|
||||
.grow_data span {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
left: 13%;
|
||||
padding: .15vw .6vw;
|
||||
border-radius: 1vw;
|
||||
display: inline-block;
|
||||
color: #0EFCFF;
|
||||
background: rgba(40, 229, 233, .2);
|
||||
}
|
||||
.specialistSuggest {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -15%;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
padding: 1vw;
|
||||
color: #0EFCFF;
|
||||
font-size: .6vw;
|
||||
}
|
||||
|
||||
.specialistSuggest div:nth-of-type(1) {
|
||||
font-size: .7vw;
|
||||
}
|
||||
|
||||
.fertilizationSuggest {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 55%;
|
||||
display: inline-block;
|
||||
width: 35%;
|
||||
padding: 1vw;
|
||||
color: #0EFCFF;
|
||||
font-size: .6vw;
|
||||
}
|
||||
.fertilizationSuggest div:nth-of-type(1) {
|
||||
font-size: .7vw;
|
||||
}
|
||||
|
||||
.weather_data {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
margin-top: .5%;
|
||||
font-size: .6vw;
|
||||
/* background-color: yellow; */
|
||||
background-image: url(../img//bottom_icons.png);
|
||||
background-size: 90% 80%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.weather_text {
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.weather_text span {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
}
|
||||
.weather_text span:nth-of-type(1) {
|
||||
left: -5%;
|
||||
}
|
||||
.weather_text span:nth-of-type(2) {
|
||||
left: 24%;
|
||||
}
|
||||
.weather_text span:nth-of-type(3) {
|
||||
left: 50%;
|
||||
}
|
||||
.weather_text span:nth-of-type(4) {
|
||||
left: 75%;
|
||||
}
|
||||
.text_two span {
|
||||
top: 85%;
|
||||
}
|
||||
.text_two span:nth-of-type(1) {
|
||||
left: 0%;
|
||||
}
|
||||
.text_two span:nth-of-type(2) {
|
||||
left: 30%;
|
||||
}
|
||||
.text_two span:nth-of-type(3) {
|
||||
left: 65%;
|
||||
}
|
||||
/* .text_one {
|
||||
margin-top: 14%;
|
||||
|
||||
}
|
||||
.text_two {
|
||||
margin-top: 18%;
|
||||
} */
|
||||
|
||||
|
||||
/* left bottom over--- */
|
||||
|
||||
|
||||
/* 右侧三个内容框start--- */
|
||||
|
||||
/* 硬件设备展示start--- */
|
||||
.boxLis {
|
||||
width: 68%;
|
||||
z-index: 9999;
|
||||
height: 1.5vw;
|
||||
margin-left: 3.5vw;
|
||||
margin-top: 1vw;
|
||||
font-size: .6vw;
|
||||
/* background-color: pink; */
|
||||
border-bottom: .02vw solid rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.boxLis>li {
|
||||
/* width: 21.1%; */
|
||||
/* height: 1.4vw; */
|
||||
z-index: 9999;
|
||||
padding: .1vw;
|
||||
display: block;
|
||||
background: rgba(40, 229, 233, .5);
|
||||
margin-right: 2.5%;
|
||||
line-height: 1.4vw;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
/* border-bottom: .02vw solid rgb(40, 229, 233); */
|
||||
}
|
||||
.boxLis li:nth-child(4) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.boxLis > .active {
|
||||
/* border-bottom: none; */
|
||||
/* color: #0EFCFF; */
|
||||
border-top: .02vw solid rgb(40, 229, 233);
|
||||
border-right: .02vw solid rgb(40, 229, 233);
|
||||
border-left: .02vw solid rgb(40, 229, 233);
|
||||
}
|
||||
.equipment_pic {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #031426;
|
||||
}
|
||||
.equipment_pic img {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
.equipment_pic img:nth-child(2) {
|
||||
display: none;
|
||||
width: 45%;
|
||||
height: 50%;
|
||||
}
|
||||
.equipment_pic img:nth-child(3) {
|
||||
width: 40%;
|
||||
height: 65%;
|
||||
display: none;
|
||||
}
|
||||
.equipment_pic img:nth-child(4) {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.liSpan {
|
||||
width: 100%;
|
||||
margin-top: -1%;
|
||||
text-align: center;
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.liP {
|
||||
width: 66%;
|
||||
margin: .3vw auto 0;
|
||||
text-align: left;
|
||||
font-size: .6vw;
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
/* 硬件设备展示over--- */
|
||||
|
||||
|
||||
/* 灌溉数据start--- */
|
||||
.irrigate_data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: yellow; */
|
||||
}
|
||||
.centerList {
|
||||
/* float: left; */
|
||||
display: inline-block;
|
||||
width: 37%;
|
||||
height: 80%;
|
||||
padding-top: 3%;
|
||||
text-align: center;
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.centerListFont {
|
||||
font-size: .8vw;
|
||||
color: #0EFCFF;
|
||||
}
|
||||
|
||||
.centerListNum {
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
margin-top: .2vw;
|
||||
}
|
||||
.irrigate_bottom {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
margin-top: .2vw;
|
||||
}
|
||||
.irrigate_bottom .every_line {
|
||||
width: 90%;
|
||||
height: 25%;
|
||||
margin-left: 5%;
|
||||
margin-bottom: 3%;
|
||||
background-color: rgba(14,252,255,.2);
|
||||
}
|
||||
.every_line span {
|
||||
color: #0EFCFF;
|
||||
margin-left: .7vw;
|
||||
font-size: .7vw;
|
||||
}
|
||||
.every_line i {
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-right: .8vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
/* 灌溉数据over--- */
|
||||
|
||||
/* 数据日志start--- */
|
||||
.data_day {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: .55vw;
|
||||
color: #fff;
|
||||
}
|
||||
.data_day table {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
overflow:hidden;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
margin-left: 5%;
|
||||
}
|
||||
.data_day .head {
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.data_day ul {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 数据日志over--- */
|
||||
|
||||
|
||||
|
||||
/* 右侧三个内容框over--- */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,467 @@
|
||||
.main .unit {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 3%;
|
||||
left: 13%;
|
||||
font-size: 0.8vw;
|
||||
color: #fff;
|
||||
}
|
||||
.dataGet, .dataStorage, .gettingDate, .dataClean, .dataSave, .dataDesensitization{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* border: 1px solid #ccc; */
|
||||
/* padding: 10px; */
|
||||
background-color: #080F1F;
|
||||
|
||||
color: #383F4E;
|
||||
/* margin-top: -10%; */
|
||||
}
|
||||
.gettingDate{
|
||||
margin-top: -10%;
|
||||
}
|
||||
.textBox {
|
||||
width: 100%;
|
||||
}
|
||||
.textBox .pieText, .pieText2 {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
left: 18%;
|
||||
/* margin-top: 20%; */
|
||||
}
|
||||
.textBox .pieText {
|
||||
top: 50%;
|
||||
}
|
||||
.textBox .pieText2 {
|
||||
top: 95%;
|
||||
}
|
||||
.textBox .pieText .text2 {
|
||||
margin-left: 3.6vw;
|
||||
}
|
||||
.textBox .pieText2 .text2 {
|
||||
margin-left: 3.2vw;
|
||||
}
|
||||
|
||||
/* 我的 */
|
||||
.service{
|
||||
overflow: hidden;
|
||||
margin: .6vw 1vw;
|
||||
padding: .3vw 0;
|
||||
border-bottom: 1px solid #0efcff;
|
||||
}
|
||||
.service span{
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
}
|
||||
.service-data{
|
||||
overflow: hidden;
|
||||
margin: .6vw 1vw;
|
||||
padding: .3vw 0;
|
||||
}
|
||||
.service-data .img-box{
|
||||
width: 4vw;
|
||||
height: 4vw;
|
||||
}
|
||||
.service-data .img-box img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.service-data span{
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
margin-top: .2vw;
|
||||
}
|
||||
.service-data .right ul li{
|
||||
float: right;
|
||||
color: #0efcff;
|
||||
font-size: .6vw;
|
||||
padding: .4vw;
|
||||
text-align: center;
|
||||
}
|
||||
.service-data .right ul li p{
|
||||
margin: .5vw 0;
|
||||
}
|
||||
.boxMain {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
/* background: red; */
|
||||
}
|
||||
|
||||
.centerdiv {
|
||||
width: 100%;
|
||||
height: 32.46%;
|
||||
position: relative;
|
||||
border: 1px solid #6176AF;
|
||||
background: rgba(11, 21, 44, 0.60);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.boxend {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 32.3%;
|
||||
border: 1px solid #6176AF;
|
||||
background: rgba(11, 21, 44, 0.60);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.bottoms {
|
||||
margin-bottom: 1.5%;
|
||||
}
|
||||
|
||||
.boxRader {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 生长图片 */
|
||||
.boxImg {
|
||||
width: 85%;
|
||||
height: 80%;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: row;
|
||||
-webkit-justify-content: space-between;
|
||||
-webkit-flex-wrap: wrap;
|
||||
margin: 3% auto 0;
|
||||
}
|
||||
|
||||
.boxImg img,.boxImg video {
|
||||
width: 48%;
|
||||
height: 5vw;
|
||||
}
|
||||
|
||||
/* 加工详情 */
|
||||
.processing {
|
||||
width: 90%;
|
||||
margin: 1% 0 0 8.2%;
|
||||
font-size: .8vw;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.processing>p {
|
||||
line-height: 1.6vw;
|
||||
}
|
||||
|
||||
.processing>p>span:nth-child(1) {
|
||||
color: #0efcff;
|
||||
}
|
||||
|
||||
/* 工程流程 */
|
||||
.boxSize {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.boxContent {
|
||||
width: 89%;
|
||||
color: #fff;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
margin: 2% auto 2%;
|
||||
font-size: .5vw;
|
||||
}
|
||||
|
||||
.boxContent>div>p {
|
||||
line-height: 1vw;
|
||||
|
||||
}
|
||||
|
||||
.boxContent>div>p>span:nth-child(1) {
|
||||
color: #0efcff;
|
||||
}
|
||||
|
||||
.boxSizestxt {
|
||||
color: #fff;
|
||||
font-size: .5vw;
|
||||
width: 89%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.centerBoxTop {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
border: .01vw solid #0efcff;
|
||||
}
|
||||
|
||||
|
||||
.colors {
|
||||
color: #0efcff;
|
||||
}
|
||||
|
||||
.colorccc {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.leftBox_left {
|
||||
float: left;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.boxNums {
|
||||
width: 90%;
|
||||
margin: 3% auto 0;
|
||||
}
|
||||
|
||||
.boxNums ul {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-webkit-justify-content: space-between;
|
||||
}
|
||||
|
||||
.boxNumstit {
|
||||
width: 32%;
|
||||
height: .8vw;
|
||||
text-align: center;
|
||||
line-height: .8vw;
|
||||
background: #0D8891;
|
||||
color: #fff;
|
||||
font-size: .5vw;
|
||||
}
|
||||
|
||||
.boxNums ul>li {
|
||||
width: 50%;
|
||||
margin-bottom: 4%;
|
||||
}
|
||||
|
||||
.type>img {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
margin: 10% 10% 0 0;
|
||||
}
|
||||
|
||||
.type {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
color: #fff;
|
||||
}
|
||||
.typeSpan{
|
||||
font-size: .57vw;
|
||||
}
|
||||
.typeSpan>p>span:nth-child(1) {
|
||||
color: #0efcff;
|
||||
line-height: 1.1vw;
|
||||
}
|
||||
|
||||
/* 品种拆分 */
|
||||
.varieties {
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
margin: 2% auto 0;
|
||||
}
|
||||
|
||||
.varieties ul {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content:space-around;
|
||||
}
|
||||
|
||||
.varietiesBotm {
|
||||
margin-top: 2%
|
||||
}
|
||||
|
||||
.varietiesBotm>li {
|
||||
width: 20%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-right: 2%;
|
||||
font-size: .8vw;
|
||||
}
|
||||
|
||||
.varietiesBotm>li>p {
|
||||
line-height: 1.1vw;
|
||||
}
|
||||
|
||||
.varietiesBotm>li>p:nth-child(1) {
|
||||
color: #0DFCFC;
|
||||
}
|
||||
|
||||
.boxLis {
|
||||
width: 13%;
|
||||
height: 1.8vw;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.8vw;
|
||||
margin: 0 4.5% 0 2.5%;
|
||||
}
|
||||
.varietiesUl{
|
||||
position: relative;
|
||||
font-size: .8vw;
|
||||
}
|
||||
.boxLisimg{
|
||||
position: absolute;
|
||||
top:.3vw;
|
||||
right:0vw;
|
||||
width: 1.3vw;
|
||||
height: 1.1vw;
|
||||
}
|
||||
.boxLis:hover{
|
||||
background: #0B7180;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background: #0B7180;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.solid {
|
||||
width: .08vw;
|
||||
height: .8vw;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.boxRadius {
|
||||
width: 3.5vw;
|
||||
height: 3.5vw;
|
||||
text-align: center;
|
||||
line-height: 4vw;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: column;
|
||||
-webkit-justify-content:center;
|
||||
align-items: center;
|
||||
font-size: .9vw;
|
||||
border: .15vw solid #F98001;
|
||||
border-radius: 50%;
|
||||
margin: .5vw auto 0;
|
||||
}
|
||||
.boxRadius img{
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-bottom: .4vw;
|
||||
|
||||
}
|
||||
.boxRadius span{
|
||||
width: 100%;
|
||||
height: 1vw;
|
||||
line-height: 1vw;
|
||||
}
|
||||
|
||||
/* ========= 地图样式 stat========== */
|
||||
.map{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 84%;
|
||||
/* margin-top: -3%; */
|
||||
/* background: white; */
|
||||
}
|
||||
.map img {
|
||||
width: 70%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
.mapActived1 {
|
||||
position: absolute;
|
||||
top: 41.5%;
|
||||
left: 44%;
|
||||
width: 1.3vw;
|
||||
height: 2.1vw;
|
||||
border-radius: 90px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mapActived2 {
|
||||
position: absolute;
|
||||
top: 52%;
|
||||
right: 25%;
|
||||
width: 3vw;
|
||||
height: 1.5vw;
|
||||
cursor: pointer;
|
||||
border-radius: 90px;
|
||||
}
|
||||
.mapActived3 {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
right: 18%;
|
||||
width: 1.5vw;
|
||||
height: 4vw;
|
||||
cursor: pointer;
|
||||
border-radius: 90px;
|
||||
}
|
||||
.mapContent1 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 48%;
|
||||
top: -14%;
|
||||
background: rgba(255,255,255, .2);
|
||||
}
|
||||
.mapContent2 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 68%;
|
||||
top: -2%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContent3 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
right: 19%;
|
||||
top: 0%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContentFont {
|
||||
width: 85%;
|
||||
margin-left: 12%;
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
letter-spacing: .05vw;
|
||||
}
|
||||
.mapContentFont:nth-child(1) {
|
||||
margin-top: .6vw;
|
||||
}
|
||||
.mapContentFont span {
|
||||
color: white;
|
||||
}
|
||||
/* ========= 地图样式 end========== */
|
||||
.mapAllNum {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
left: 1vw;
|
||||
top: 2.5vw;
|
||||
color: #0efcff;
|
||||
font-size: .8vw;
|
||||
letter-spacing: .05vw;
|
||||
}
|
||||
.mapAllNum span {
|
||||
color: white;
|
||||
font-size: 1.1vw;
|
||||
}
|
||||
.mapfooterFont {
|
||||
position: absolute;
|
||||
right: 0vw;
|
||||
top: 0.7vw;
|
||||
width: 7vw;
|
||||
height: 3vw;
|
||||
color: #0efcff;
|
||||
font-size: .7vw;
|
||||
}
|
||||
.mapfooterFont img {
|
||||
width: 50%;
|
||||
padding-top: .3vw;
|
||||
margin: 0 .3vw;
|
||||
}
|
||||
.mapFootertitle {
|
||||
margin-bottom: .3vw;
|
||||
}
|
||||
@ -0,0 +1,378 @@
|
||||
|
||||
/**/
|
||||
/**/
|
||||
/**/
|
||||
|
||||
.clear{
|
||||
clear: both;
|
||||
}
|
||||
.flexLeft{
|
||||
float: left;
|
||||
}
|
||||
.flexRight{
|
||||
float: right;
|
||||
}
|
||||
.boxMain {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
/* background: red; */
|
||||
}
|
||||
|
||||
.boxRader {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.centerBox {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.centerBoxTop {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
border: .01vw solid #0efcff;
|
||||
}
|
||||
|
||||
.centerBoxTop ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.centerBoxTop ul>li {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p-li {
|
||||
color: #0efcff;
|
||||
font-size: 1.4vw;
|
||||
}
|
||||
|
||||
.boxBottomtxt {
|
||||
width: 80%;
|
||||
margin: 4% auto 0;
|
||||
padding-left: 4%;
|
||||
color: rgb(40, 229, 233);
|
||||
|
||||
}
|
||||
|
||||
.boxBottomtxt>span {
|
||||
float: left;
|
||||
margin-right: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.boxFont {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.boxDatelis {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: -webkit-flex;
|
||||
-webkit-justify-content: center;
|
||||
font-size: .6vw;
|
||||
}
|
||||
|
||||
.boxDatelis ul {
|
||||
width: 50%;
|
||||
margin-left:5%;
|
||||
}
|
||||
|
||||
.boxDatelis ul>li {
|
||||
line-height: 1.5vw;
|
||||
text-align: left;
|
||||
}
|
||||
/* 种植 */
|
||||
.plant{
|
||||
width: 90%;
|
||||
height: 4vw;
|
||||
margin:8% auto 0;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
-webkit-justify-content:space-between;
|
||||
-moz-justify-content:space-between;
|
||||
|
||||
|
||||
|
||||
}
|
||||
.plant li{
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: rgba(0,235,255,.08);
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: column;
|
||||
-webkit-justify-content: space-between;
|
||||
display: -moz-flex;
|
||||
-moz-flex-direction: column;
|
||||
-moz-justify-content: space-between;
|
||||
}
|
||||
.plant li>div>img{
|
||||
width: .88vw;
|
||||
height: .88vw;
|
||||
float: right;
|
||||
}
|
||||
.plant li>p{
|
||||
width: 80%;
|
||||
font-size: 1.5vw;
|
||||
color: #fff;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.plant li>div{
|
||||
width: 80%;
|
||||
margin:5% auto 0;
|
||||
}
|
||||
.plant li>div>span{
|
||||
font-size: .8vw;
|
||||
color: #0efcff;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.spans1{
|
||||
width: 80%;
|
||||
height: 8%;
|
||||
background: #0efcff;
|
||||
}
|
||||
.spans2{
|
||||
width: 80%;
|
||||
height: 8%;
|
||||
background: #FE0000;
|
||||
}
|
||||
.spans3{
|
||||
width: 80%;
|
||||
height: 8%;
|
||||
background: #F78001;
|
||||
}
|
||||
/* 地图 */
|
||||
.map{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height:38%;
|
||||
margin-top:8%
|
||||
}
|
||||
/* 种植地数量 */
|
||||
.plantDdetails{
|
||||
width: 85%;
|
||||
height: 25%;
|
||||
margin: 8% auto 0;
|
||||
}
|
||||
.plantDdetails li{
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.plantNum{
|
||||
width: 7.97vw;
|
||||
height: 2.5vw;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 1vw;
|
||||
color: #01FEFE;
|
||||
}
|
||||
.plantNum span{
|
||||
line-height: 2.5vw;
|
||||
}
|
||||
.plantNum img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
}
|
||||
.plantNumbers{
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
margin-left:5%;
|
||||
}
|
||||
.plantNumbers>li{
|
||||
width:2.2vw;
|
||||
height: 2.2vw;
|
||||
position: relative;
|
||||
font-size: 1.5vw;
|
||||
color: #01FEFE;
|
||||
text-align: center;
|
||||
margin-right:2%;
|
||||
}
|
||||
.plantNumbers>li>span{
|
||||
line-height: 100%;
|
||||
}
|
||||
.plantNumbers>li img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
.ptlanTxts{
|
||||
font-size: 1.2vw;
|
||||
color: #01FEFE;
|
||||
margin-left:2%;
|
||||
}
|
||||
.boximgs {
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
margin: 1vw auto 0;
|
||||
display: -webkit-flex;
|
||||
display: -o-flex;
|
||||
-webkit-flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-webkit-justify-content: space-between;
|
||||
-o-flex-direction: row;
|
||||
-o-flex-wrap: wrap;
|
||||
-o-justify-content: space-between;
|
||||
}
|
||||
|
||||
.boximgs img {
|
||||
width: 47%;
|
||||
height: 42%;
|
||||
|
||||
}
|
||||
|
||||
.boxVideo {
|
||||
width: 90%;
|
||||
height: 60%;
|
||||
margin: 1vw auto 0;
|
||||
}
|
||||
|
||||
.boxVideo video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.colors {
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.colorccc {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.boxFont {
|
||||
font-size: 1.2VW;
|
||||
}
|
||||
|
||||
.leftBox_left {
|
||||
float: left;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftBox_left:nth-child(2) {
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.leftBox_left .baseBox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.leftBox_left .baseBox:nth-child(2) {
|
||||
margin: 3% 0;
|
||||
}
|
||||
|
||||
.FiveBox {
|
||||
height: 49.1%;
|
||||
}
|
||||
|
||||
.boxTable {
|
||||
width: 95%;
|
||||
color: #0efcff;
|
||||
font-size: .6vw;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
table-layout: fixed;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
|
||||
.boxTable tr {
|
||||
height: 2.2vw;
|
||||
}
|
||||
|
||||
.boxTable tr:nth-child(1) {
|
||||
font-size: .8vw;
|
||||
}
|
||||
|
||||
/* .boxTable tr:nth-child(1) td:nth-child(1) {
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
} */
|
||||
.boxTable tr td:nth-child(1) {
|
||||
text-align: left;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left:1vw;
|
||||
}
|
||||
|
||||
.boxTable tr td:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.boxTable tr td:nth-child(3) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.boxTable2 tr td:nth-child(1) {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.boxTable2 tr td:nth-child(3) {
|
||||
width: 30%;
|
||||
color: #e98732;
|
||||
}
|
||||
|
||||
|
||||
#all {
|
||||
margin-top: 6%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.amount {
|
||||
/* float: left; */
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
}
|
||||
/* 数字滚动 */
|
||||
#all .t_num i {
|
||||
/* float: left; */
|
||||
width: 2.2vw;
|
||||
height: 2.2vw;
|
||||
display: inline-block;
|
||||
background: url(./img/number3.png) no-repeat;
|
||||
/* background-size: 33px 47px; */
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#all .unit {
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: 61%;
|
||||
/* vertical-align: baseline; */
|
||||
color: #11F9FD;
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
@ -0,0 +1,396 @@
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
input,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
textarea,
|
||||
article,
|
||||
aside,
|
||||
audio,
|
||||
canvas,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
mark,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
time,
|
||||
video {
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size : 100%;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
dialog,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section,
|
||||
blockquote {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border : 0 none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing : 0;
|
||||
}
|
||||
|
||||
strong,
|
||||
em,
|
||||
i {
|
||||
font-style : normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ins {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: none;
|
||||
}
|
||||
|
||||
input::-ms-clear {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font : 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color : #333;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
.main {
|
||||
width : 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.main {
|
||||
position : relative;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-color: #1D2B56;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position : relative;
|
||||
top : .5vw;
|
||||
width : 100%;
|
||||
height : 5vw;
|
||||
background : url(../img/top.png) no-repeat;
|
||||
background-size: 100%;
|
||||
text-align : center;
|
||||
line-height : 4vw;
|
||||
color : #0efcff;
|
||||
font-size : 1.4vw;
|
||||
letter-spacing : .4vw;
|
||||
}
|
||||
|
||||
.nav_btn {
|
||||
position: absolute;
|
||||
top : 1.5vw;
|
||||
width : 100%;
|
||||
height : 2vw;
|
||||
}
|
||||
|
||||
.btn_left {
|
||||
float : left;
|
||||
width : 25%;
|
||||
margin-left: 5%;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.btn_right {
|
||||
float : right;
|
||||
width : 25%;
|
||||
margin-right: 5%;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.btn_list {
|
||||
position : relative;
|
||||
float : left;
|
||||
width : 5.5vw;
|
||||
height : 1.6vw;
|
||||
text-align : center;
|
||||
line-height : 1.6vw;
|
||||
font-size : .9vw;
|
||||
color : #0efcff;
|
||||
letter-spacing: .1vw;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
.btn_left a,
|
||||
.btn_right a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn_left a:nth-child(2) {
|
||||
margin: 0 .6vw;
|
||||
}
|
||||
|
||||
.btn_left a:nth-child(4) {
|
||||
margin-left: .6vw;
|
||||
}
|
||||
|
||||
.btn_right a:nth-child(2) {
|
||||
margin: 0 .6vw;
|
||||
}
|
||||
|
||||
.btn_right a:nth-child(4) {
|
||||
margin-left: .6vw;
|
||||
}
|
||||
|
||||
.btn_list:before {
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
border : 1px solid #6176AF;
|
||||
transform: skewX(-38deg);
|
||||
}
|
||||
|
||||
.btn_list:hover::before {
|
||||
border-color: #0efcff;
|
||||
box-shadow : 1px 1px 3px 1px #0efcff inset;
|
||||
}
|
||||
|
||||
.listActive:before {
|
||||
border-color: #0efcff;
|
||||
box-shadow : 1px 1px 3px 1px #0efcff inset;
|
||||
}
|
||||
|
||||
.content {
|
||||
position : relative;
|
||||
width : 97%;
|
||||
height : 87%;
|
||||
margin : auto;
|
||||
/* background: white; */
|
||||
}
|
||||
|
||||
.baseBox {
|
||||
position : relative;
|
||||
float : left;
|
||||
width : 48.8%;
|
||||
height : 32.3%;
|
||||
border : 1px solid #6176AF;
|
||||
background : rgba(11, 21, 44, 0.60);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.baseHeightBox {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.baseCenterBox {
|
||||
margin: 1.5% 0;
|
||||
}
|
||||
|
||||
.leftBox {
|
||||
float : left;
|
||||
height : 100%;
|
||||
width : 34.5%;
|
||||
/* background: yellow; */
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
float : left;
|
||||
height: 100%;
|
||||
width : 34.5%;
|
||||
}
|
||||
|
||||
.centerBox {
|
||||
position : relative;
|
||||
float : left;
|
||||
width : 30%;
|
||||
height : 100%;
|
||||
margin : 0 .5%;
|
||||
/* background: red; */
|
||||
}
|
||||
|
||||
.marginLeft {
|
||||
margin-left: 1.5%;
|
||||
}
|
||||
|
||||
/* 边框描边 */
|
||||
.leftTopLine1 {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : -1px;
|
||||
height : 1vw;
|
||||
width : 2px;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.leftTopLine2 {
|
||||
position : absolute;
|
||||
top : -1px;
|
||||
left : 0;
|
||||
height : 2px;
|
||||
width : 1vw;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.rightTopLine1 {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : -1px;
|
||||
height : 1vw;
|
||||
width : 2px;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.rightTopLine2 {
|
||||
position : absolute;
|
||||
top : -1px;
|
||||
right : 0;
|
||||
height : 2px;
|
||||
width : 1vw;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.leftBottomLine1 {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
left : -1px;
|
||||
height : 1vw;
|
||||
width : 2px;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.leftBottomLine2 {
|
||||
position : absolute;
|
||||
bottom : -1px;
|
||||
left : 0;
|
||||
height : 2px;
|
||||
width : 1vw;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.rightBottomLine1 {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
right : -1px;
|
||||
height : 1vw;
|
||||
width : 2px;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.rightBottomLine2 {
|
||||
position : absolute;
|
||||
bottom : -1px;
|
||||
right : 0;
|
||||
height : 2px;
|
||||
width : 1vw;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.boxTitle {
|
||||
font-size : 1vw;
|
||||
color : #0efcff;
|
||||
width : 80%;
|
||||
margin-left: .8vw;
|
||||
margin-top : .5vw;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
font: right;
|
||||
}
|
||||
/*// */
|
||||
/*// */
|
||||
/*// */
|
||||
|
||||
/* 视频新加 */
|
||||
.video-js .vjs-control {
|
||||
width: 1vw !important;
|
||||
}
|
||||
.vjs-volume-panel {
|
||||
display: none !important;
|
||||
}
|
||||
.vjs-live-display {
|
||||
display: none !important;
|
||||
}
|
||||
.vjs-audio-button{
|
||||
display: none !important;
|
||||
}
|
||||
@ -1,292 +0,0 @@
|
||||
|
||||
/*common.css*/
|
||||
@font-face
|
||||
{
|
||||
font-family: myFirstFont;
|
||||
src: url('../font/Fette-Engschrift.ttf');
|
||||
}
|
||||
|
||||
body{
|
||||
|
||||
background: #081325 url(../images/interact.png) center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
div{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clearfix{
|
||||
clear:both;
|
||||
}
|
||||
.container-header{
|
||||
width:100%;
|
||||
height:74px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container-header .nowTime{
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:41px;
|
||||
font-size: 0;
|
||||
}
|
||||
.container-header .nowTime li{
|
||||
display: inline-block;
|
||||
width:94px;
|
||||
height:20px;
|
||||
font-size: 14px;
|
||||
color:#fff;
|
||||
}
|
||||
.nowTime li{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
/*font-weight: 800;*/
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.nowTime li div{
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.nowTime li p {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 4px;
|
||||
}
|
||||
.container-header .location{
|
||||
position: absolute;
|
||||
right:17px;
|
||||
top:46px;
|
||||
}
|
||||
.location i{
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color:#7e9bc6;
|
||||
}
|
||||
.location span{
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
color:#168fcd;
|
||||
}
|
||||
|
||||
.container-header h3{
|
||||
line-height: 74px;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
/* 边角 */
|
||||
.left-top,.right-top,.left-bottom,.right-bottom{
|
||||
position:absolute;
|
||||
width:13px;
|
||||
height:13px;
|
||||
}
|
||||
.left-top{
|
||||
left:0;
|
||||
top:0;
|
||||
border-left:solid 2px #045291;
|
||||
border-top:solid 2px #045291;
|
||||
}
|
||||
.right-top{
|
||||
right:0;
|
||||
top:0;
|
||||
border-right:solid 2px #045291;
|
||||
border-top:solid 2px #045291;
|
||||
}
|
||||
.left-bottom{
|
||||
left:0;
|
||||
bottom:0;
|
||||
border-left:solid 2px #045291;
|
||||
border-bottom:solid 2px #045291;
|
||||
}
|
||||
.right-bottom{
|
||||
right:0;
|
||||
bottom:0;
|
||||
border-right:solid 2px #045291;
|
||||
border-bottom:solid 2px #045291;
|
||||
}
|
||||
|
||||
.resource-right .com-count-title{
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
.com-count-title{
|
||||
color:#1bb4f9;
|
||||
padding:20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.com-screen-content{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
.com-screen-content2{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
.filter-type{
|
||||
font-size: 0;
|
||||
}
|
||||
.filter-type li:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-type li{
|
||||
display: inline-block;
|
||||
width:120px;
|
||||
line-height: 40px;
|
||||
font-family: myFirstFont;
|
||||
font-size: 20px;
|
||||
text-align:center ;
|
||||
color:#024f9b;
|
||||
border:solid 1px #075797;
|
||||
background:#0d2343;
|
||||
}
|
||||
.filter-type li.active{
|
||||
color:white;
|
||||
background:#0c182d;
|
||||
border:solid 1px #1bb9f9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.container-content{
|
||||
padding:10px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.count-base,.count-resource,.count-share,.count-topic{
|
||||
position:relative;
|
||||
padding:20px;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.com-count-title{
|
||||
|
||||
color:#1bb4f9;
|
||||
font-size: 12px;
|
||||
padding:0;
|
||||
}
|
||||
.count-base{
|
||||
|
||||
margin-left:10px;
|
||||
float:left;/*浮动*/
|
||||
width:31%;
|
||||
height:350px;
|
||||
background: url('../images/left-top3.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
|
||||
}
|
||||
.count-resource{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:31%;
|
||||
height:350px;
|
||||
background: url('../images/left-top3.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
.count-share{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:47.0%;
|
||||
height:350px;
|
||||
background: url('../images/left-bottom2.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
.count-topic{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:47.0%;
|
||||
height:350px;
|
||||
background: url('../images/left-bottom2.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
.data-label{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
right:10px;
|
||||
}
|
||||
.data-label li{
|
||||
float:left;
|
||||
width: 60px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #828c9d;
|
||||
}
|
||||
.data-label li:hover,.data-label li.active{
|
||||
color: #fff;
|
||||
background: url("../images/choose-item.png") center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@charset "utf-8";
|
||||
/* author lyc */
|
||||
|
||||
*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }
|
||||
li{ list-style:none }
|
||||
img{ border:none}
|
||||
a{text-decoration:none;}
|
||||
|
||||
|
||||
/* -------------------------摇奖排行榜----------------------------------- */
|
||||
|
||||
|
||||
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#f0ece2}
|
||||
.topRec_List dd{ float:left; text-align:left; border-bottom:1px solid #1B96EE; color:#1B96EE;font-size:10px;}
|
||||
.topRec_List dl dd:nth-child(1){ width:50%; height:40px; line-height:40px; }
|
||||
.topRec_List dl dd:nth-child(2){ width:30%; height:40px; line-height:40px; }
|
||||
.topRec_List dl dd:nth-child(3){ width:20%; height:40px; line-height:40px; }
|
||||
|
||||
.maquee{ height:195px;}
|
||||
.topRec_List ul{ width:100%; height:195px;}
|
||||
.topRec_List li{ width:100%; height:28px; line-height:38px; text-align:left; font-size:10px;color:#76dbd1}
|
||||
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
|
||||
.topRec_List li div{ float:left;}
|
||||
.topRec_List li div:nth-child(1){ width:50%;}
|
||||
.topRec_List li div:nth-child(2){ width:30%;}
|
||||
.topRec_List li div:nth-child(3){ width:20%;}
|
||||
|
||||
|
||||
.use-data{
|
||||
text-align: center;
|
||||
padding: 2px 0;
|
||||
margin-top:3%;
|
||||
height: 5%;
|
||||
background: url(../images/resource-use-data.jpg) center no-repeat;
|
||||
background-size:cover;
|
||||
border: solid 1px #093552;
|
||||
border-right: 0px;
|
||||
border-left: 0;
|
||||
}
|
||||
.use-data li{
|
||||
width:30%;
|
||||
font-size: 0;
|
||||
display: inline-table;
|
||||
border-right:solid 1px #1f4191;
|
||||
}
|
||||
.use-data li:last-child{
|
||||
border-right:0;
|
||||
}
|
||||
.use-data .data-count{
|
||||
color:#fff;
|
||||
font-family:myFirstFont ;
|
||||
height: 1%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.use-data .data-name{
|
||||
color:#1bb9f9;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,294 +0,0 @@
|
||||
|
||||
/*common.css*/
|
||||
@font-face
|
||||
{
|
||||
font-family: myFirstFont;
|
||||
src: url('../font/Fette-Engschrift.ttf');
|
||||
}
|
||||
|
||||
body{
|
||||
|
||||
background: #081325 url(../images/interact.png) center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
div{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clearfix{
|
||||
clear:both;
|
||||
}
|
||||
.container-header{
|
||||
width:100%;
|
||||
height:74px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container-header .nowTime{
|
||||
position: absolute;
|
||||
left:20px;
|
||||
top:41px;
|
||||
font-size: 0;
|
||||
}
|
||||
.container-header .nowTime li{
|
||||
display: inline-block;
|
||||
width:130px;
|
||||
height:40px;
|
||||
font-size: 24px;
|
||||
color:#fff;
|
||||
}
|
||||
.nowTime li{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
/*font-weight: 800;*/
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.nowTime li div{
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.nowTime li p {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
.container-header .location{
|
||||
position: absolute;
|
||||
right:17px;
|
||||
top:46px;
|
||||
}
|
||||
.location i{
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color:#7e9bc6;
|
||||
}
|
||||
.location span{
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color:#168fcd;
|
||||
}
|
||||
|
||||
.container-header h3{
|
||||
line-height: 74px;
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
/* 边角 */
|
||||
.left-top,.right-top,.left-bottom,.right-bottom{
|
||||
position:absolute;
|
||||
width:13px;
|
||||
height:13px;
|
||||
}
|
||||
.left-top{
|
||||
left:0;
|
||||
top:0;
|
||||
border-left:solid 2px #045291;
|
||||
border-top:solid 2px #045291;
|
||||
}
|
||||
.right-top{
|
||||
right:0;
|
||||
top:0;
|
||||
border-right:solid 2px #045291;
|
||||
border-top:solid 2px #045291;
|
||||
}
|
||||
.left-bottom{
|
||||
left:0;
|
||||
bottom:0;
|
||||
border-left:solid 2px #045291;
|
||||
border-bottom:solid 2px #045291;
|
||||
}
|
||||
.right-bottom{
|
||||
right:0;
|
||||
bottom:0;
|
||||
border-right:solid 2px #045291;
|
||||
border-bottom:solid 2px #045291;
|
||||
}
|
||||
|
||||
.resource-right .com-count-title{
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
.com-count-title{
|
||||
color:#1bb4f9;
|
||||
padding:20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.com-screen-content{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
.com-screen-content2{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
.filter-type{
|
||||
font-size: 0;
|
||||
}
|
||||
.filter-type li:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-type li{
|
||||
display: inline-block;
|
||||
width:120px;
|
||||
line-height: 40px;
|
||||
font-family: myFirstFont;
|
||||
font-size: 20px;
|
||||
text-align:center ;
|
||||
color:#024f9b;
|
||||
border:solid 1px #075797;
|
||||
background:#0d2343;
|
||||
}
|
||||
.filter-type li.active{
|
||||
color:white;
|
||||
background:#0c182d;
|
||||
border:solid 1px #1bb9f9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.container-content{
|
||||
padding:10px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.count-base,.count-resource,.count-share,.count-topic{
|
||||
position:relative;
|
||||
padding:20px;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.com-count-title{
|
||||
|
||||
color:#1bb4f9;
|
||||
font-size: 16px;
|
||||
padding:0;
|
||||
}
|
||||
.count-base{
|
||||
|
||||
margin-left:10px;
|
||||
float:left;/*浮动*/
|
||||
width:32%;
|
||||
height:350px;
|
||||
background: url('../images/left-top3.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
|
||||
}
|
||||
.count-resource{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:32%;
|
||||
height:350px;
|
||||
background: url('../images/left-top3.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
.count-share{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:48.4%;
|
||||
height:350px;
|
||||
background: url('../images/left-bottom2.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
.count-topic{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:48.4%;
|
||||
height:350px;
|
||||
background: url('../images/left-bottom2.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
.data-label{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
right:10px;
|
||||
}
|
||||
.data-label li{
|
||||
float:left;
|
||||
width: 90px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #828c9d;
|
||||
}
|
||||
.data-label li:hover,.data-label li.active{
|
||||
color: #fff;
|
||||
background: url("../images/choose-item.png") center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@charset "utf-8";
|
||||
/* author lyc */
|
||||
|
||||
*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }
|
||||
li{ list-style:none }
|
||||
img{ border:none}
|
||||
a{text-decoration:none;}
|
||||
|
||||
|
||||
/* -------------------------摇奖排行榜----------------------------------- */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#f0ece2}
|
||||
.topRec_List dd{ float:left; text-align:left; border-bottom:1px solid #1B96EE; color:#1B96EE;font-size:14px;}
|
||||
.topRec_List dl dd:nth-child(1){ width:50%; height:40px; line-height:40px; }
|
||||
.topRec_List dl dd:nth-child(2){ width:30%; height:40px; line-height:40px; }
|
||||
.topRec_List dl dd:nth-child(3){ width:20%; height:40px; line-height:40px; }
|
||||
|
||||
.maquee{ height:195px;}
|
||||
.topRec_List ul{ width:100%; height:195px;}
|
||||
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:left; font-size:9px;color:#76dbd1}
|
||||
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
|
||||
.topRec_List li div{ float:left;}
|
||||
.topRec_List li div:nth-child(1){ width:50%;}
|
||||
.topRec_List li div:nth-child(2){ width:30%;}
|
||||
.topRec_List li div:nth-child(3){ width:20%;}
|
||||
|
||||
|
||||
.use-data{
|
||||
text-align: center;
|
||||
padding: 2px 0;
|
||||
margin-top:3%;
|
||||
height: 5%;
|
||||
background: url(../images/resource-use-data.jpg) center no-repeat;
|
||||
background-size:cover;
|
||||
border: solid 1px #093552;
|
||||
border-right: 0px;
|
||||
border-left: 0;
|
||||
}
|
||||
.use-data li{
|
||||
width:30%;
|
||||
font-size: 0;
|
||||
display: inline-table;
|
||||
border-right:solid 1px #1f4191;
|
||||
}
|
||||
.use-data li:last-child{
|
||||
border-right:0;
|
||||
}
|
||||
.use-data .data-count{
|
||||
color:#fff;
|
||||
font-family:myFirstFont ;
|
||||
height: 1%;
|
||||
font-size: 14px;
|
||||
}
|
||||
.use-data .data-name{
|
||||
color:#1bb9f9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,294 +0,0 @@
|
||||
|
||||
/*common.css*/
|
||||
@font-face
|
||||
{
|
||||
font-family: myFirstFont;
|
||||
src: url('../font/Fette-Engschrift.ttf');
|
||||
}
|
||||
|
||||
body{
|
||||
|
||||
background: #081325 url(../images/interact.png) center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
div{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clearfix{
|
||||
clear:both;
|
||||
}
|
||||
.container-header{
|
||||
width:100%;
|
||||
height:74px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container-header .nowTime{
|
||||
position: absolute;
|
||||
left:20px;
|
||||
top:41px;
|
||||
font-size: 0;
|
||||
}
|
||||
.container-header .nowTime li{
|
||||
display: inline-block;
|
||||
width:140px;
|
||||
height:40px;
|
||||
font-size: 30px;
|
||||
color:#fff;
|
||||
}
|
||||
.nowTime li{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
/*font-weight: 800;*/
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.nowTime li div{
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.nowTime li p {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 16px;
|
||||
}
|
||||
.container-header .location{
|
||||
position: absolute;
|
||||
right:17px;
|
||||
top:46px;
|
||||
}
|
||||
.location i{
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color:#7e9bc6;
|
||||
}
|
||||
.location span{
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
color:#168fcd;
|
||||
}
|
||||
|
||||
.container-header h3{
|
||||
line-height: 74px;
|
||||
font-size: 2.5vw;
|
||||
font-weight: 800;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
/* 边角 */
|
||||
.left-top,.right-top,.left-bottom,.right-bottom{
|
||||
position:absolute;
|
||||
width:13px;
|
||||
height:13px;
|
||||
}
|
||||
.left-top{
|
||||
left:0;
|
||||
top:0;
|
||||
border-left:solid 2px #045291;
|
||||
border-top:solid 2px #045291;
|
||||
}
|
||||
.right-top{
|
||||
right:0;
|
||||
top:0;
|
||||
border-right:solid 2px #045291;
|
||||
border-top:solid 2px #045291;
|
||||
}
|
||||
.left-bottom{
|
||||
left:0;
|
||||
bottom:0;
|
||||
border-left:solid 2px #045291;
|
||||
border-bottom:solid 2px #045291;
|
||||
}
|
||||
.right-bottom{
|
||||
right:0;
|
||||
bottom:0;
|
||||
border-right:solid 2px #045291;
|
||||
border-bottom:solid 2px #045291;
|
||||
}
|
||||
|
||||
.resource-right .com-count-title{
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
.com-count-title{
|
||||
color:#1bb4f9;
|
||||
padding:20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.com-screen-content{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
.com-screen-content2{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
.filter-type{
|
||||
font-size: 0;
|
||||
}
|
||||
.filter-type li:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-type li{
|
||||
display: inline-block;
|
||||
width:120px;
|
||||
line-height: 40px;
|
||||
font-family: myFirstFont;
|
||||
font-size: 20px;
|
||||
text-align:center ;
|
||||
color:#024f9b;
|
||||
border:solid 1px #075797;
|
||||
background:#0d2343;
|
||||
}
|
||||
.filter-type li.active{
|
||||
color:white;
|
||||
background:#0c182d;
|
||||
border:solid 1px #1bb9f9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.container-content{
|
||||
padding:10px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.count-base,.count-resource,.count-share,.count-topic{
|
||||
position:relative;
|
||||
padding:20px;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.com-count-title{
|
||||
|
||||
color:#1bb4f9;
|
||||
font-size: 18px;
|
||||
padding:0;
|
||||
}
|
||||
.count-base{
|
||||
|
||||
margin-left:10px;
|
||||
float:left;/*浮动*/
|
||||
width:32%;
|
||||
height:350px;
|
||||
background: url('../images/left-top3.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
|
||||
}
|
||||
.count-resource{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:32%;
|
||||
height:350px;
|
||||
background: url('../images/left-top3.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
.count-share{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:48.4%;
|
||||
height:350px;
|
||||
background: url('../images/left-bottom2.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
.count-topic{
|
||||
margin-left:10px;
|
||||
float:left;
|
||||
width:48.4%;
|
||||
height:350px;
|
||||
background: url('../images/left-bottom2.jpg') center no-repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
.data-label{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
right:10px;
|
||||
}
|
||||
.data-label li{
|
||||
float:left;
|
||||
width: 120px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #828c9d;
|
||||
}
|
||||
.data-label li:hover,.data-label li.active{
|
||||
color: #fff;
|
||||
background: url("../images/choose-item.png") center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@charset "utf-8";
|
||||
/* author lyc */
|
||||
|
||||
*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }
|
||||
li{ list-style:none }
|
||||
img{ border:none}
|
||||
a{text-decoration:none;}
|
||||
|
||||
|
||||
/* -------------------------摇奖排行榜----------------------------------- */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#f0ece2}
|
||||
.topRec_List dd{ float:left; text-align:left; border-bottom:1px solid #1B96EE; color:#1B96EE;font-size:14px;}
|
||||
.topRec_List dl dd:nth-child(1){ width:50%; height:40px; line-height:40px; }
|
||||
.topRec_List dl dd:nth-child(2){ width:30%; height:40px; line-height:40px; }
|
||||
.topRec_List dl dd:nth-child(3){ width:20%; height:40px; line-height:40px; }
|
||||
|
||||
.maquee{ height:195px;}
|
||||
.topRec_List ul{ width:100%; height:195px;}
|
||||
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:left; font-size:12px;color:#76dbd1}
|
||||
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
|
||||
.topRec_List li div{ float:left;}
|
||||
.topRec_List li div:nth-child(1){ width:50%;}
|
||||
.topRec_List li div:nth-child(2){ width:30%;}
|
||||
.topRec_List li div:nth-child(3){ width:20%;}
|
||||
|
||||
|
||||
.use-data{
|
||||
text-align: center;
|
||||
padding: 2px 0;
|
||||
margin-top:3%;
|
||||
height: 5%;
|
||||
background: url(../images/resource-use-data.jpg) center no-repeat;
|
||||
background-size:cover;
|
||||
border: solid 1px #093552;
|
||||
border-right: 0px;
|
||||
border-left: 0;
|
||||
}
|
||||
.use-data li{
|
||||
width:30%;
|
||||
font-size: 0;
|
||||
display: inline-table;
|
||||
border-right:solid 1px #1f4191;
|
||||
}
|
||||
.use-data li:last-child{
|
||||
border-right:0;
|
||||
}
|
||||
.use-data .data-count{
|
||||
color:#fff;
|
||||
font-family:myFirstFont ;
|
||||
height: 1%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.use-data .data-name{
|
||||
color:#1bb9f9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
@ -1,19 +0,0 @@
|
||||
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1516847126977'); /* IE9*/
|
||||
src: url('iconfont.eot?t=1516847126977#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAV0AAsAAAAAB+QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kf/Y21hcAAAAYAAAABeAAABhpmMBr5nbHlmAAAB4AAAAZ8AAAHEm4J/L2hlYWQAAAOAAAAALgAAADYQPgYpaGhlYQAAA7AAAAAcAAAAJAfeA4RobXR4AAADzAAAAAwAAAAMC+kAAGxvY2EAAAPYAAAACAAAAAgAdgDibWF4cAAAA+AAAAAfAAAAIAESAF1uYW1lAAAEAAAAAUUAAAJtPlT+fXBvc3QAAAVIAAAALAAAAD21fvVfeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDwTZW7438AQw9zA0AAUZgTJAQAk6wyBeJzFkMENgDAMAy9t6QPx7Q48GIgXc3TirlFMKA8mqCXHimMpUYAFiOIhJrAL48Ep19yPrO4nz2SpEait9K7+U0U0y65BJTMNNm/1H5vXfXT6CnVQJ7byknADgzcL4wAAeJwtTz1v01AUfee92E5CYpNnx88fTezEbR40YAnjJGpRkoVEATFEysTWLGytxNSFwQsSkRiYUSeExC8oU8dKrF0ZEfyB/oAGHpSrq6Nzde450iEaIb9/sAvmEZvcI4/IU7IkBHofXZO20JF5SvtodrSmcEwmE9kxkm7KxhBd3XGzYd4TuqFbMNHG4042lCmVGOQT+gSZ2wL8MFjxvR3OPqDqyfbb7XP6Cc0o2bEmD7fPHkydLLbLpzXOfc7fl3VNK1NaskwcC7eiVar69rNmBc2L6D6NUPNl8OJlPQ75+l1+0toTFaAoYIex+WXaCBpq3wSuzX3jbr3sBfVk18HprzueXWv1fhI1JdW1YK9ZQRzSIxmZEKIlskdlitEEozaEq8pQg5kwdFe4XAy5EpTMUsjbDxN/VUXUmYLWPENc74cNlK7Ozq5KaIT714JvvjJYfnQ5Gl1GvgV2vlkcUXq0uMV8Tuk8/4dFNcar1XjWV16V0J+NV9uPMfumHPLwYLr9vlxCTg8O5eb85gbr/wGLNXYxzwczSmeDfP4H2qRQkwB4nGNgZGBgAOKN3SqC8fw2Xxm4WRhA4Fp/ohiC/t/AwsDcAORyMDCBRAH/0wjqAAB4nGNgZGBgbvjfwBDDwgACQJKRARUwAwBHCQJsBAAAAAPpAAAEAAAAAAAAAAB2AOJ4nGNgZGBgYGYIZGBlAAEmIOYCQgaG/2A+AwAQ9wFwAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBsYI/qTS/NDcxv6Q0KTMx38iYgQEATDMGhQ==') format('woff'),
|
||||
url('iconfont.ttf?t=1516847126977') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('iconfont.svg?t=1516847126977#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-buoumaotubiao23:before { content: "\e615"; }
|
||||
|
||||
|
After Width: | Height: | Size: 634 B |
|
After Width: | Height: | Size: 501 B |
|
Before Width: | Height: | Size: 867 B |
|
Before Width: | Height: | Size: 345 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,133 @@
|
||||
/* -----------------------------------------------
|
||||
/* How to use? : Check the GitHub README
|
||||
/* ----------------------------------------------- */
|
||||
|
||||
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
|
||||
/*
|
||||
particlesJS.load('particles-js', 'particles.json', function() {
|
||||
console.log('particles.js loaded - callback');
|
||||
});
|
||||
*/
|
||||
/** **/
|
||||
/* Otherwise just put the config content (json): */
|
||||
|
||||
particlesJS('particles-js',
|
||||
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 10,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 1200
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 2,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": .8,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 5,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true,
|
||||
"config_demo": {
|
||||
"hide_card": false,
|
||||
"background_color": "#b61924",
|
||||
"background_image": "",
|
||||
"background_position": "50% 50%",
|
||||
"background_repeat": "no-repeat",
|
||||
"background_size": "cover"
|
||||
}
|
||||
}
|
||||
|
||||
);
|
||||
@ -0,0 +1,43 @@
|
||||
// 数字滚动
|
||||
function numInit() {
|
||||
$('.counter-value').each(function(){
|
||||
$(this).prop('Counter',0).animate({
|
||||
Counter: $(this).text()
|
||||
},{
|
||||
duration: 2500,
|
||||
easing: 'swing',
|
||||
step: function (now){
|
||||
$(this).text(now.toFixed(0));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function numInit1() {
|
||||
$('.counter-value1').each(function(){
|
||||
$(this).prop('Counter',0).animate({
|
||||
Counter: $(this).text()
|
||||
},{
|
||||
duration: 2500,
|
||||
easing: 'swing',
|
||||
step: function (now){
|
||||
$(this).text(now.toFixed(1));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function numInit2() {
|
||||
$('.counter-value2').each(function(){
|
||||
$(this).prop('Counter',0).animate({
|
||||
Counter: $(this).text()
|
||||
},{
|
||||
duration: 2500,
|
||||
easing: 'swing',
|
||||
step: function (now){
|
||||
$(this).text(now.toFixed(2));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
numInit();
|
||||
numInit1();
|
||||
numInit2();
|
||||
@ -0,0 +1,10 @@
|
||||
(function($){if(!document.defaultView||!document.defaultView.getComputedStyle){var oldCurCSS=jQuery.curCSS;jQuery.curCSS=function(elem,name,force){if(name==='background-position'){name='backgroundPosition';}
|
||||
if(name!=='backgroundPosition'||!elem.currentStyle||elem.currentStyle[name]){return oldCurCSS.apply(this,arguments);}
|
||||
var style=elem.style;if(!force&&style&&style[name]){return style[name];}
|
||||
return oldCurCSS(elem,'backgroundPositionX',force)+' '+oldCurCSS(elem,'backgroundPositionY',force);};}
|
||||
var oldAnim=$.fn.animate;$.fn.animate=function(prop){if('background-position'in prop){prop.backgroundPosition=prop['background-position'];delete prop['background-position'];}
|
||||
if('backgroundPosition'in prop){prop.backgroundPosition='('+prop.backgroundPosition+')';}
|
||||
return oldAnim.apply(this,arguments);};function toArray(strg){strg=strg.replace(/left|top/g,'0px');strg=strg.replace(/right|bottom/g,'100%');strg=strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var res=strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];}
|
||||
$.fx.step.backgroundPosition=function(fx){if(!fx.bgPosReady){var start=$.css(fx.elem,'backgroundPosition');if(!start){start='0px 0px';}
|
||||
start=toArray(start);fx.start=[start[0],start[2]];var end=toArray(fx.end);fx.end=[end[0],end[2]];fx.unit=[end[1],end[3]];fx.bgPosReady=true;}
|
||||
var nowPosX=[];nowPosX[0]=((fx.end[0]-fx.start[0])*fx.pos)+fx.start[0]+fx.unit[0];nowPosX[1]=((fx.end[1]-fx.start[1])*fx.pos)+fx.start[1]+fx.unit[1];fx.elem.style.backgroundPosition=nowPosX[0]+' '+nowPosX[1];};})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,364 @@
|
||||
/**
|
||||
* jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
|
||||
* @requires jQuery v1.2 or above
|
||||
*
|
||||
* http://gmarwaha.com/jquery/jcarousellite/
|
||||
*
|
||||
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* Version: 1.0.1
|
||||
* Note: Requires jquery 1.2 or above from version 1.0.1
|
||||
*/
|
||||
|
||||
/**
|
||||
* Creates a carousel-style navigation widget for images/any-content from a simple HTML markup.
|
||||
*
|
||||
* The HTML markup that is used to build the carousel can be as simple as...
|
||||
*
|
||||
* <div class="carousel">
|
||||
* <ul>
|
||||
* <li><img src="image/1.jpg" alt="1"></li>
|
||||
* <li><img src="image/2.jpg" alt="2"></li>
|
||||
* <li><img src="image/3.jpg" alt="3"></li>
|
||||
* </ul>
|
||||
* </div>
|
||||
*
|
||||
* As you can see, this snippet is nothing but a simple div containing an unordered list of images.
|
||||
* You don't need any special "class" attribute, or a special "css" file for this plugin.
|
||||
* I am using a class attribute just for the sake of explanation here.
|
||||
*
|
||||
* To navigate the elements of the carousel, you need some kind of navigation buttons.
|
||||
* For example, you will need a "previous" button to go backward, and a "next" button to go forward.
|
||||
* This need not be part of the carousel "div" itself. It can be any element in your page.
|
||||
* Lets assume that the following elements in your document can be used as next, and prev buttons...
|
||||
*
|
||||
* <button class="prev"><<</button>
|
||||
* <button class="next">>></button>
|
||||
*
|
||||
* Now, all you need to do is call the carousel component on the div element that represents it, and pass in the
|
||||
* navigation buttons as options.
|
||||
*
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev"
|
||||
* });
|
||||
*
|
||||
* That's it, you would have now converted your raw div, into a magnificient carousel.
|
||||
*
|
||||
* There are quite a few other options that you can use to customize it though.
|
||||
* Each will be explained with an example below.
|
||||
*
|
||||
* @param an options object - You can specify all the options shown below as an options object param.
|
||||
*
|
||||
* @option btnPrev, btnNext : string - no defaults
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev"
|
||||
* });
|
||||
* @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.
|
||||
*
|
||||
* @option btnGo - array - no defaults
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* btnGo: [".0", ".1", ".2"]
|
||||
* });
|
||||
* @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on
|
||||
* the item number within the carousel, you can use this option. Just supply an array of selectors for each element
|
||||
* in the carousel. The index of the array represents the index of the element. What i mean is, if the
|
||||
* first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel
|
||||
* will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed
|
||||
* interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding
|
||||
* any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin.
|
||||
* The best part is that, the tab will "slide" based on the provided effect. :-)
|
||||
*
|
||||
* @option mouseWheel : boolean - default is false
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* mouseWheel: true
|
||||
* });
|
||||
* @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons.
|
||||
* To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon.
|
||||
* Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel
|
||||
* using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation
|
||||
* as well. They complement each other. To use both together, just supply the options required for both as shown below.
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* mouseWheel: true
|
||||
* });
|
||||
*
|
||||
* @option auto : number - default is null, meaning autoscroll is disabled by default
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* auto: 800,
|
||||
* speed: 500
|
||||
* });
|
||||
* @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option.
|
||||
* The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling.
|
||||
* Specify this value and magically your carousel will start auto scrolling.
|
||||
*
|
||||
* @option speed : number - 200 is default
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* speed: 800
|
||||
* });
|
||||
* @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with
|
||||
* different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.
|
||||
*
|
||||
* @option easing : string - no easing effects by default.
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* easing: "bounceout"
|
||||
* });
|
||||
* @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified,
|
||||
* the carousel will slide based on the provided easing effect.
|
||||
*
|
||||
* @option vertical : boolean - default is false
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* vertical: true
|
||||
* });
|
||||
* @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and
|
||||
* prev buttons will slide the items vertically as well. The default is false, which means that the carousel will
|
||||
* display horizontally. The next and prev items will slide the items from left-right in this case.
|
||||
*
|
||||
* @option circular : boolean - default is true
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* circular: false
|
||||
* });
|
||||
* @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last
|
||||
* element, you will automatically slide to the first element and vice versa. If you set circular to false, then
|
||||
* if you click on the "next" button after you reach the last element, you will stay in the last element itself
|
||||
* and similarly for "previous" button and first element.
|
||||
*
|
||||
* @option visible : number - default is 3
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* visible: 4
|
||||
* });
|
||||
* @desc This specifies the number of items visible at all times within the carousel. The default is 3.
|
||||
* You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the
|
||||
* last item half visible. This gives you the effect of showing the user that there are more images to the right.
|
||||
*
|
||||
* @option start : number - default is 0
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* start: 2
|
||||
* });
|
||||
* @desc You can specify from which item the carousel should start. Remember, the first item in the carousel
|
||||
* has a start of 0, and so on.
|
||||
*
|
||||
* @option scrool : number - default is 1
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* scroll: 2
|
||||
* });
|
||||
* @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By
|
||||
* default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll
|
||||
* 2 items when you click the next or previous buttons.
|
||||
*
|
||||
* @option beforeStart, afterEnd : function - callbacks
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* beforeStart: function(a) {
|
||||
* alert("Before animation starts:" + a);
|
||||
* },
|
||||
* afterEnd: function(a) {
|
||||
* alert("After animation ends:" + a);
|
||||
* }
|
||||
* });
|
||||
* @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can
|
||||
* register these 2 callbacks. The functions will be passed an argument that represents an array of elements that
|
||||
* are visible at the time of callback.
|
||||
*
|
||||
*
|
||||
* @cat Plugins/Image Gallery
|
||||
* @author Ganeshji Marwaha/ganeshread@gmail.com
|
||||
*/
|
||||
|
||||
(function($) { // Compliant with jquery.noConflict()
|
||||
$.fn.jCarouselLite = function(o) {
|
||||
o = $.extend({
|
||||
btnPrev: null,
|
||||
btnNext: null,
|
||||
btnGo: null,
|
||||
mouseWheel: false,
|
||||
auto: null,
|
||||
hoverPause: false,
|
||||
|
||||
speed: 200,
|
||||
easing: null,
|
||||
|
||||
vertical: false,
|
||||
circular: true,
|
||||
visible: 3,
|
||||
start: 0,
|
||||
scroll: 1,
|
||||
|
||||
beforeStart: null,
|
||||
afterEnd: null
|
||||
}, o || {});
|
||||
|
||||
return this.each(function() { // Returns the element collection. Chainable.
|
||||
|
||||
var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
|
||||
var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;
|
||||
|
||||
if(o.circular) {
|
||||
ul.prepend(tLi.slice(tl-v+1).clone())
|
||||
.append(tLi.slice(0,o.scroll).clone());
|
||||
o.start += v-1;
|
||||
}
|
||||
|
||||
var li = $("li", ul), itemLength = li.size(), curr = o.start;
|
||||
div.css("visibility", "visible");
|
||||
|
||||
li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
|
||||
ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
|
||||
div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
|
||||
|
||||
var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
|
||||
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
|
||||
var divSize = liSize * v; // size of entire div(total length for just the visible items)
|
||||
|
||||
li.css({width: li.width(), height: li.height()});
|
||||
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
|
||||
|
||||
div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images
|
||||
|
||||
if(o.btnPrev) {
|
||||
$(o.btnPrev).click(function() {
|
||||
return go(curr-o.scroll);
|
||||
});
|
||||
if(o.hoverPause) {
|
||||
$(o.btnPrev).hover(function(){stopAuto();}, function(){startAuto();});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(o.btnNext) {
|
||||
$(o.btnNext).click(function() {
|
||||
return go(curr+o.scroll);
|
||||
});
|
||||
if(o.hoverPause) {
|
||||
$(o.btnNext).hover(function(){stopAuto();}, function(){startAuto();});
|
||||
}
|
||||
}
|
||||
|
||||
if(o.btnGo)
|
||||
$.each(o.btnGo, function(i, val) {
|
||||
$(val).click(function() {
|
||||
return go(o.circular ? o.visible+i : i);
|
||||
});
|
||||
});
|
||||
|
||||
if(o.mouseWheel && div.mousewheel)
|
||||
div.mousewheel(function(e, d) {
|
||||
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
|
||||
});
|
||||
|
||||
var autoInterval;
|
||||
|
||||
function startAuto() {
|
||||
stopAuto();
|
||||
autoInterval = setInterval(function() {
|
||||
go(curr+o.scroll);
|
||||
}, o.auto+o.speed);
|
||||
};
|
||||
|
||||
function stopAuto() {
|
||||
clearInterval(autoInterval);
|
||||
};
|
||||
|
||||
if(o.auto) {
|
||||
if(o.hoverPause) {
|
||||
div.hover(function(){stopAuto();}, function(){startAuto();});
|
||||
}
|
||||
startAuto();
|
||||
};
|
||||
|
||||
function vis() {
|
||||
return li.slice(curr).slice(0,v);
|
||||
};
|
||||
|
||||
function go(to) {
|
||||
if(!running) {
|
||||
|
||||
if(o.beforeStart)
|
||||
o.beforeStart.call(this, vis());
|
||||
|
||||
if(o.circular) { // If circular we are in first or last, then goto the other end
|
||||
if(to<0) { // If before range, then go around
|
||||
ul.css(animCss, -( (curr + tl) * liSize)+"px");
|
||||
curr = to + tl;
|
||||
} else if(to>itemLength-v) { // If beyond range, then come around
|
||||
ul.css(animCss, -( (curr - tl) * liSize ) + "px" );
|
||||
curr = to - tl;
|
||||
} else curr = to;
|
||||
} else { // If non-circular and to points to first or last, we just return.
|
||||
if(to<0 || to>itemLength-v) return;
|
||||
else curr = to;
|
||||
} // If neither overrides it, the curr will still be "to" and we can proceed.
|
||||
|
||||
running = true;
|
||||
|
||||
ul.animate(
|
||||
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
|
||||
function() {
|
||||
if(o.afterEnd)
|
||||
o.afterEnd.call(this, vis());
|
||||
running = false;
|
||||
}
|
||||
);
|
||||
// Disable buttons when the carousel reaches the last/first, and enable when not
|
||||
if(!o.circular) {
|
||||
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
|
||||
$( (curr-o.scroll<0 && o.btnPrev)
|
||||
||
|
||||
(curr+o.scroll > itemLength-v && o.btnNext)
|
||||
||
|
||||
[]
|
||||
).addClass("disabled");
|
||||
}
|
||||
|
||||
}
|
||||
return false;
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
function css(el, prop) {
|
||||
return parseInt($.css(el[0], prop)) || 0;
|
||||
};
|
||||
function width(el) {
|
||||
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
|
||||
};
|
||||
function height(el) {
|
||||
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,544 @@
|
||||
/* -----------------------------------------------
|
||||
/* Author : Vincent Garreau - vincentgarreau.com
|
||||
/* MIT license: http://opensource.org/licenses/MIT
|
||||
/* GitHub : https://github.com/VincentGarreau/particles.js
|
||||
/* How to use? : Check the GitHub README
|
||||
/* v1.0.3
|
||||
/* ----------------------------------------------- */
|
||||
/** **/
|
||||
function launchParticlesJS(tag_id, params){
|
||||
|
||||
var canvas_el = document.querySelector('#'+tag_id+' > canvas');
|
||||
|
||||
/* particles.js variables with default values */
|
||||
pJS = {
|
||||
canvas: {
|
||||
el: canvas_el,
|
||||
w: canvas_el.offsetWidth,
|
||||
h: canvas_el.offsetHeight
|
||||
},
|
||||
particles: {
|
||||
color: '#fff',
|
||||
shape: 'circle',
|
||||
opacity: 1,
|
||||
size: 2.5,
|
||||
size_random: true,
|
||||
nb: 200,
|
||||
line_linked: {
|
||||
enable_auto: true,
|
||||
distance: 100,
|
||||
color: '#fff',
|
||||
opacity: 1,
|
||||
width: 1,
|
||||
condensed_mode: {
|
||||
enable: true,
|
||||
rotateX: 65000,
|
||||
rotateY: 65000
|
||||
}
|
||||
},
|
||||
anim: {
|
||||
enable: true,
|
||||
speed: 1
|
||||
},
|
||||
array: []
|
||||
},
|
||||
interactivity: {
|
||||
enable: true,
|
||||
mouse: {
|
||||
distance: 100
|
||||
},
|
||||
detect_on: 'canvas',
|
||||
mode: 'grab',
|
||||
line_linked: {
|
||||
opacity: 1
|
||||
},
|
||||
events: {
|
||||
onclick: {
|
||||
enable: true,
|
||||
mode: 'push',
|
||||
nb: 4
|
||||
}
|
||||
}
|
||||
},
|
||||
retina_detect: false,
|
||||
fn: {
|
||||
vendors:{
|
||||
interactivity: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* params settings */
|
||||
if(params){
|
||||
if(params.particles){
|
||||
var paramsForParticles = params.particles;
|
||||
if(paramsForParticles.color) pJS.particles.color = paramsForParticles.color;
|
||||
if(paramsForParticles.shape) pJS.particles.shape = paramsForParticles.shape;
|
||||
if(paramsForParticles.opacity) pJS.particles.opacity = paramsForParticles.opacity;
|
||||
if(paramsForParticles.size) pJS.particles.size = paramsForParticles.size;
|
||||
if(paramsForParticles.size_random == false) pJS.particles.size_random = paramsForParticles.size_random;
|
||||
if(paramsForParticles.nb) pJS.particles.nb = paramsForParticles.nb;
|
||||
if(paramsForParticles.line_linked){
|
||||
var paramsForLineLinked = paramsForParticles.line_linked;
|
||||
if(paramsForLineLinked.enable_auto == false) pJS.particles.line_linked.enable_auto = paramsForLineLinked.enable_auto;
|
||||
if(paramsForLineLinked.distance) pJS.particles.line_linked.distance = paramsForLineLinked.distance;
|
||||
if(paramsForLineLinked.color) pJS.particles.line_linked.color = paramsForLineLinked.color;
|
||||
if(paramsForLineLinked.opacity) pJS.particles.line_linked.opacity = paramsForLineLinked.opacity;
|
||||
if(paramsForLineLinked.width) pJS.particles.line_linked.width = paramsForLineLinked.width;
|
||||
if(paramsForLineLinked.condensed_mode){
|
||||
var paramsForCondensedMode = paramsForLineLinked.condensed_mode;
|
||||
if(paramsForCondensedMode.enable == false) pJS.particles.line_linked.condensed_mode.enable = paramsForCondensedMode.enable;
|
||||
if(paramsForCondensedMode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = paramsForCondensedMode.rotateX;
|
||||
if(paramsForCondensedMode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = paramsForCondensedMode.rotateY;
|
||||
}
|
||||
}
|
||||
if(paramsForParticles.anim){
|
||||
var paramsForAnim = paramsForParticles.anim;
|
||||
if(paramsForAnim.enable == false) pJS.particles.anim.enable = paramsForAnim.enable;
|
||||
if(paramsForAnim.speed) pJS.particles.anim.speed = paramsForAnim.speed;
|
||||
}
|
||||
}
|
||||
if(params.interactivity){
|
||||
var paramsForInteractivity = params.interactivity;
|
||||
if(paramsForInteractivity.enable == false) pJS.interactivity.enable = paramsForInteractivity.enable;
|
||||
if(paramsForInteractivity.mouse){
|
||||
if(paramsForInteractivity.mouse.distance) pJS.interactivity.mouse.distance = paramsForInteractivity.mouse.distance;
|
||||
}
|
||||
if(paramsForInteractivity.detect_on) pJS.interactivity.detect_on = paramsForInteractivity.detect_on;
|
||||
if(paramsForInteractivity.mode) pJS.interactivity.mode = paramsForInteractivity.mode;
|
||||
if(paramsForInteractivity.line_linked){
|
||||
if(paramsForInteractivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = paramsForInteractivity.line_linked.opacity;
|
||||
}
|
||||
if(paramsForInteractivity.events){
|
||||
var paramsForEvents = paramsForInteractivity.events;
|
||||
if(paramsForEvents.onclick){
|
||||
var paramsForOnclick = paramsForEvents.onclick;
|
||||
if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false;
|
||||
if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode;
|
||||
if(paramsForOnclick.nb) pJS.interactivity.events.onclick.nb = paramsForOnclick.nb;
|
||||
}
|
||||
}
|
||||
}
|
||||
pJS.retina_detect = params.retina_detect;
|
||||
}
|
||||
|
||||
/* convert hex colors to rgb */
|
||||
pJS.particles.color_rgb = hexToRgb(pJS.particles.color);
|
||||
pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
|
||||
|
||||
/* detect retina */
|
||||
if(pJS.retina_detect && window.devicePixelRatio > 1){
|
||||
pJS.retina = true;
|
||||
|
||||
pJS.canvas.pxratio = window.devicePixelRatio
|
||||
pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
|
||||
pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
|
||||
pJS.particles.anim.speed = pJS.particles.anim.speed * pJS.canvas.pxratio;
|
||||
pJS.particles.line_linked.distance = pJS.particles.line_linked.distance * pJS.canvas.pxratio;
|
||||
pJS.particles.line_linked.width = pJS.particles.line_linked.width * pJS.canvas.pxratio;
|
||||
pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance * pJS.canvas.pxratio;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- CANVAS functions ------------ */
|
||||
|
||||
pJS.fn.canvasInit = function(){
|
||||
pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
|
||||
};
|
||||
|
||||
pJS.fn.canvasSize = function(){
|
||||
pJS.canvas.el.width = pJS.canvas.w;
|
||||
pJS.canvas.el.height = pJS.canvas.h;
|
||||
|
||||
window.onresize = function(){
|
||||
if(pJS){
|
||||
pJS.canvas.w = pJS.canvas.el.offsetWidth;
|
||||
pJS.canvas.h = pJS.canvas.el.offsetHeight;
|
||||
|
||||
/* resize canvas */
|
||||
if(pJS.retina){
|
||||
pJS.canvas.w *= pJS.canvas.pxratio;
|
||||
pJS.canvas.h *= pJS.canvas.pxratio;
|
||||
}
|
||||
|
||||
pJS.canvas.el.width = pJS.canvas.w;
|
||||
pJS.canvas.el.height = pJS.canvas.h;
|
||||
|
||||
/* repaint canvas */
|
||||
pJS.fn.canvasPaint();
|
||||
if(!pJS.particles.anim.enable){
|
||||
pJS.fn.particlesRemove();
|
||||
pJS.fn.canvasRemove();
|
||||
launchParticles();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
pJS.fn.canvasPaint = function(){
|
||||
pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
|
||||
};
|
||||
|
||||
pJS.fn.canvasRemove = function(){
|
||||
pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
|
||||
}
|
||||
|
||||
|
||||
/* --------- PARTICLES functions ----------- */
|
||||
|
||||
pJS.fn.particle = function(color, opacity, position){
|
||||
|
||||
/* position */
|
||||
this.x = position ? position.x : Math.random() * pJS.canvas.w;
|
||||
this.y = position ? position.y : Math.random() * pJS.canvas.h;
|
||||
|
||||
/* size */
|
||||
this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size;
|
||||
if (pJS.retina) this.radius *= pJS.canvas.pxratio;
|
||||
|
||||
/* color */
|
||||
this.color = color;
|
||||
|
||||
/* opacity */
|
||||
this.opacity = opacity;
|
||||
|
||||
/* animation - velocity for speed */
|
||||
this.vx = -.5 + Math.random();
|
||||
this.vy = -.5 + Math.random();
|
||||
|
||||
/* draw function */
|
||||
this.draw = function(){
|
||||
pJS.canvas.ctx.fillStyle = 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.opacity+')';
|
||||
pJS.canvas.ctx.beginPath();
|
||||
|
||||
switch(pJS.particles.shape){
|
||||
case 'circle':
|
||||
pJS.canvas.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
|
||||
break;
|
||||
|
||||
case 'edge':
|
||||
pJS.canvas.ctx.rect(this.x, this.y, this.radius*2, this.radius*2);
|
||||
break;
|
||||
|
||||
case 'triangle':
|
||||
pJS.canvas.ctx.moveTo(this.x,this.y-this.radius);
|
||||
pJS.canvas.ctx.lineTo(this.x+this.radius,this.y+this.radius);
|
||||
pJS.canvas.ctx.lineTo(this.x-this.radius,this.y+this.radius);
|
||||
pJS.canvas.ctx.closePath();
|
||||
break;
|
||||
}
|
||||
|
||||
pJS.canvas.ctx.fill();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
pJS.fn.particlesCreate = function(){
|
||||
for(var i = 0; i < pJS.particles.nb; i++) {
|
||||
pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color_rgb, pJS.particles.opacity));
|
||||
}
|
||||
};
|
||||
|
||||
pJS.fn.particlesAnimate = function(){
|
||||
for(var i = 0; i < pJS.particles.array.length; i++){
|
||||
/* the particle */
|
||||
var p = pJS.particles.array[i];
|
||||
|
||||
/* move the particle */
|
||||
p.x += p.vx * (pJS.particles.anim.speed/2);
|
||||
p.y += p.vy * (pJS.particles.anim.speed/2);
|
||||
|
||||
/* change particle position if it is out of canvas */
|
||||
if(p.x - p.radius > pJS.canvas.w) p.x = p.radius;
|
||||
else if(p.x + p.radius < 0) p.x = pJS.canvas.w + p.radius;
|
||||
if(p.y - p.radius > pJS.canvas.h) p.y = p.radius;
|
||||
else if(p.y + p.radius < 0) p.y = pJS.canvas.h + p.radius;
|
||||
|
||||
/* Check distance between each particle and mouse position */
|
||||
for(var j = i + 1; j < pJS.particles.array.length; j++){
|
||||
var p2 = pJS.particles.array[j];
|
||||
|
||||
/* link particles if enable */
|
||||
if(pJS.particles.line_linked.enable_auto){
|
||||
pJS.fn.vendors.distanceParticles(p,p2);
|
||||
}
|
||||
|
||||
/* set interactivity if enable */
|
||||
if(pJS.interactivity.enable){
|
||||
|
||||
/* interactivity mode */
|
||||
switch(pJS.interactivity.mode){
|
||||
case 'grab':
|
||||
pJS.fn.vendors.interactivity.grabParticles(p,p2);
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
pJS.fn.particlesDraw = function(){
|
||||
/* clear canvas */
|
||||
pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
|
||||
|
||||
/* move particles */
|
||||
pJS.fn.particlesAnimate();
|
||||
|
||||
/* draw each particle */
|
||||
for(var i = 0; i < pJS.particles.array.length; i++){
|
||||
var p = pJS.particles.array[i];
|
||||
p.draw('rgba('+p.color.r+','+p.color.g+','+p.color.b+','+p.opacity+')');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
pJS.fn.particlesRemove = function(){
|
||||
pJS.particles.array = [];
|
||||
};
|
||||
|
||||
|
||||
/* ---------- VENDORS functions ------------ */
|
||||
|
||||
pJS.fn.vendors.distanceParticles = function(p1, p2){
|
||||
|
||||
var dx = p1.x - p2.x,
|
||||
dy = p1.y - p2.y,
|
||||
dist = Math.sqrt(dx*dx + dy*dy);
|
||||
|
||||
/* Check distance between particle and mouse mos */
|
||||
if(dist <= pJS.particles.line_linked.distance) {
|
||||
|
||||
/* draw the line */
|
||||
var color_line = pJS.particles.line_linked.color_rgb_line;
|
||||
pJS.canvas.ctx.beginPath();
|
||||
pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.particles.line_linked.opacity-dist/pJS.particles.line_linked.distance) +')';
|
||||
pJS.canvas.ctx.moveTo(p1.x, p1.y);
|
||||
pJS.canvas.ctx.lineTo(p2.x, p2.y);
|
||||
pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
|
||||
pJS.canvas.ctx.stroke();
|
||||
pJS.canvas.ctx.closePath();
|
||||
|
||||
/* condensed particles */
|
||||
if(pJS.particles.line_linked.condensed_mode.enable){
|
||||
var dx = p1.x - p2.x,
|
||||
dy = p1.y - p2.y,
|
||||
ax = dx/(pJS.particles.line_linked.condensed_mode.rotateX*1000),
|
||||
ay = dy/(pJS.particles.line_linked.condensed_mode.rotateY*1000);
|
||||
p2.vx += ax;
|
||||
p2.vy += ay;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
pJS.fn.vendors.interactivity.listeners = function(){
|
||||
|
||||
/* init el */
|
||||
if(pJS.interactivity.detect_on == 'window'){
|
||||
var detect_el = window;
|
||||
}else{
|
||||
var detect_el = pJS.canvas.el;
|
||||
}
|
||||
|
||||
/* el on mousemove */
|
||||
detect_el.onmousemove = function(e){
|
||||
|
||||
if(detect_el == window){
|
||||
var pos_x = e.clientX,
|
||||
pos_y = e.clientY;
|
||||
}
|
||||
else{
|
||||
var pos_x = e.offsetX||e.clientX,
|
||||
pos_y = e.offsetY||e.clientY;
|
||||
}
|
||||
|
||||
if(pJS){
|
||||
|
||||
pJS.interactivity.mouse.pos_x = pos_x;
|
||||
pJS.interactivity.mouse.pos_y = pos_y;
|
||||
|
||||
if(pJS.retina){
|
||||
pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;
|
||||
pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;
|
||||
}
|
||||
|
||||
pJS.interactivity.status = 'mousemove';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/* el on onmouseleave */
|
||||
detect_el.onmouseleave = function(e){
|
||||
|
||||
if(pJS){
|
||||
pJS.interactivity.mouse.pos_x = 0;
|
||||
pJS.interactivity.mouse.pos_y = 0;
|
||||
pJS.interactivity.status = 'mouseleave';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/* el on onclick */
|
||||
if(pJS.interactivity.events.onclick.enable){
|
||||
switch(pJS.interactivity.events.onclick.mode){
|
||||
case 'push':
|
||||
detect_el.onclick = function(e){
|
||||
if(pJS){
|
||||
for(var i = 0; i < pJS.interactivity.events.onclick.nb; i++){
|
||||
pJS.particles.array.push(
|
||||
new pJS.fn.particle(
|
||||
pJS.particles.color_rgb,
|
||||
pJS.particles.opacity,
|
||||
{
|
||||
'x': pJS.interactivity.mouse.pos_x,
|
||||
'y': pJS.interactivity.mouse.pos_y
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
detect_el.onclick = function(e){
|
||||
pJS.particles.array.splice(0, pJS.interactivity.events.onclick.nb);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
pJS.fn.vendors.interactivity.grabParticles = function(p1, p2){
|
||||
var dx = p1.x - p2.x,
|
||||
dy = p1.y - p2.y,
|
||||
dist = Math.sqrt(dx*dx + dy*dy);
|
||||
|
||||
var dx_mouse = p1.x - pJS.interactivity.mouse.pos_x,
|
||||
dy_mouse = p1.y - pJS.interactivity.mouse.pos_y,
|
||||
dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
|
||||
|
||||
/* Check distance between 2 particles + Check distance between 1 particle and mouse position */
|
||||
if(dist <= pJS.particles.line_linked.distance && dist_mouse <= pJS.interactivity.mouse.distance && pJS.interactivity.status == 'mousemove'){
|
||||
/* Draw the line */
|
||||
var color_line = pJS.particles.line_linked.color_rgb_line;
|
||||
pJS.canvas.ctx.beginPath();
|
||||
pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.interactivity.line_linked.opacity-dist_mouse/pJS.interactivity.mouse.distance) +')';
|
||||
pJS.canvas.ctx.moveTo(p1.x, p1.y);
|
||||
pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
|
||||
pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
|
||||
pJS.canvas.ctx.stroke();
|
||||
pJS.canvas.ctx.closePath();
|
||||
}
|
||||
};
|
||||
|
||||
pJS.fn.vendors.destroy = function(){
|
||||
cancelAnimationFrame(pJS.fn.requestAnimFrame);
|
||||
canvas_el.remove();
|
||||
delete pJS;
|
||||
};
|
||||
|
||||
|
||||
/* --------- LAUNCH ----------- */
|
||||
|
||||
function launchParticles(){
|
||||
pJS.fn.canvasInit();
|
||||
pJS.fn.canvasSize();
|
||||
pJS.fn.canvasPaint();
|
||||
pJS.fn.particlesCreate();
|
||||
pJS.fn.particlesDraw();
|
||||
};
|
||||
|
||||
|
||||
function launchAnimation(){
|
||||
pJS.fn.particlesDraw();
|
||||
pJS.fn.requestAnimFrame = requestAnimFrame(launchAnimation);
|
||||
};
|
||||
|
||||
|
||||
launchParticles();
|
||||
|
||||
if(pJS.particles.anim.enable){
|
||||
launchAnimation();
|
||||
}
|
||||
|
||||
if(pJS.interactivity.enable){
|
||||
pJS.fn.vendors.interactivity.listeners();
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
/* --- VENDORS --- */
|
||||
|
||||
window.requestAnimFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback){
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
window.cancelRequestAnimFrame = ( function() {
|
||||
return window.cancelAnimationFrame ||
|
||||
window.webkitCancelRequestAnimationFrame ||
|
||||
window.mozCancelRequestAnimationFrame ||
|
||||
window.oCancelRequestAnimationFrame ||
|
||||
window.msCancelRequestAnimationFrame ||
|
||||
clearTimeout
|
||||
} )();
|
||||
|
||||
function hexToRgb(hex){
|
||||
// By Tim Down - http://stackoverflow.com/a/5624139/3493650
|
||||
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
||||
return r + r + g + g + b + b;
|
||||
});
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
};
|
||||
|
||||
|
||||
/* --- LAUNCH --- */
|
||||
|
||||
window.particlesJS = function(tag_id, params){
|
||||
|
||||
/* no string id? so it's object params, and set the id with default id */
|
||||
if(typeof(tag_id) != 'string'){
|
||||
params = tag_id;
|
||||
tag_id = 'particles-js';
|
||||
}
|
||||
|
||||
/* no id? set the id to default id */
|
||||
if(!tag_id){
|
||||
tag_id = 'particles-js';
|
||||
}
|
||||
|
||||
/* create canvas element */
|
||||
var canvas_el = document.createElement('canvas');
|
||||
|
||||
/* set size canvas */
|
||||
canvas_el.style.width = "100%";
|
||||
canvas_el.style.height = "20vw";
|
||||
|
||||
/* append canvas */
|
||||
var canvas = document.getElementById(tag_id).appendChild(canvas_el);
|
||||
|
||||
/* launch particle.js */
|
||||
if(canvas != null){
|
||||
launchParticlesJS(tag_id, params);
|
||||
}
|
||||
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 368 KiB |
Loading…
Reference in new issue