pwh6feynr
/
123
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11111

Browse Source
master
13451294168 1 year ago
parent 69b0930e7b
commit c211d2e42d
52 changed files with 5363 additions and 4633 deletions
Show Stats Download Patch File Download Diff File

BIN
poem/001 政务服务大数据可视化监管平台.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

BIN
poem/004 政务大数据共享交换平台.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 322 KiB

33
poem/css/circulationSales.css
Unescape View File

@ -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%;
} */

548
poem/css/index.css
Unescape View File

@ -0,0 +1,548 @@
/**/
/**/
/**/
.main_con {
position: absolute;
width: 97%;
height: 95%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* background: white; */
}
.main_top {
width: 100%;
height: 37%;
}
.main_top_left {
float: left;
width: 17.3%;
height: 100%;
/* background: gold; */
}
.main_top_left_top {
position: relative;
width: 100%;
height: 46%;
/* background: green; */
}
.main_top_left_bottom {
margin-top: 4%;
}
.main_top_left_bottom_num {
width: 100%;
}
.main_top_left_bottom_num span {
float: left;
display: block;
font-size: .65vw;
/* -webkit-transform-origin-x: 0;
transform: scale(0.9);
-webkit-transform: scale(0.9); */
}
.main_top_left_bottom_num_list {
float: left;
width: 8%;
height: 1.4vw;
line-height: 1.4vw;
margin-left: .2vw;
text-indent: .4vw;
font-size: .8vw;
color: white;
margin-top: .2vw;
background: #37D2D4;
}
.main_top_left_bottom_bar {
float: left;
width: 100%;
height: .6vw;
line-height: 0;
margin-top: .6vw;
}
.main_top_left_bottom_bar span {
position: relative;
float: left;
display: block;
font-size: .65vw;
top: -.15vw;
-webkit-transform-origin-x: 0;
transform: scale(0.7);
-webkit-transform: scale(0.7);
}
.main_top_left_bottom_bar .bar_num {
color: #0EFCFF;
margin-left: 3%;
-webkit-transform-origin-x: 0;
transform: scale(0.7);
-webkit-transform: scale(0.7);
}
.bar_father {
float: left;
position: relative;
width: 75%;
background: rgba(31,103,163,0.2);
height: 100%;
margin-left: 3%;
border-radius: 90px;
}
.bar_child {
position: absolute;
left: 0;
width: 0%;
height: 100%;
border-radius: 90px;
transition: all 2s;
background-image: linear-gradient(90deg, #3E94CD 0%, #56D4F1 49%, #38E1E1 99%);
}
.main_top_left_top img {
position: absolute;
width: 100%;
height: 100%;
}
.main_top_left_top_title {
text-align: center;
color: #0EFCFF;
font-size: .75vw;
padding-top: .2vw;
}
.main_top_left_top_con {
width: 92%;
height: 71%;
margin: auto;
margin-top: 3%;
color: white;
/* margin-left: 4%; */
/* text-indent: .5vw; */
font-size: .7vw;
/* letter-spacing: .15vw; */
}
.main_top_left_top_con span {
display: inline-block;
margin-top: .4vw;
text-indent: 0vw;
}
.main_top_left_top_con_left {
float: left;
height: 48%;
width: 49%;
text-align: center;
margin-top: 1.5%;
}
.main_top_left_t_c_l_left,.main_top_left_t_c_l_right,.main_top_left_t_c_r_right,.main_top_left_t_c_r_left {
float: left;
width: 48%;
height: 100%;
text-align: center;
background: #FD9133;
font-size: .7vw;
}
.main_top_left_t_c_l_right,.main_top_left_t_c_r_right {
background: #F6D10E;
margin-left: 4%;
}
.main_top_left_t_c_r_right {
background: #F6580E;
}
.main_top_left_t_c_r_left {
background: #2E8CFF;
}
.main_top_left_top_con_left .main_top_left_c_l_n {
/* -webkit-transform-origin-x: 0; */
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
.main_top_left_top_con_left p {
/* -webkit-transform-origin-x: 0; */
transform: scale(0.8);
-webkit-transform: scale(0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main_top_left_top_con_right {
float: right;
height: 48%;
width: 49%;
text-align: center;
margin-top: 1.5%;
}
.main_top_left_top_con_right .main_top_left_c_l_n {
/* -webkit-transform-origin-x: 0; */
transform: scale(0.8);
-webkit-transform: scale(0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main_top_left_top_con_right p {
/* -webkit-transform-origin-x: 0; */
transform: scale(0.8);
-webkit-transform: scale(0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main_top_left_top_con_right2 p {
margin-top: -7%;
}
.main_top_left_top_con_list {
float: left;
height: 48%;
width: 32%;
text-align: center;
margin-left: 2%;
}
.main_top_left_top_con_list .main_top_left_c_l_n {
/* -webkit-transform-origin-x: 0; */
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
.main_top_left_top_con_list p {
/* -webkit-transform-origin-x: 0; */
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
.main_top_left_top_con_list:nth-child(1) {
background: #37D2D4;
margin-left: 0;
}
.main_top_left_top_con_list:nth-child(2) {
background: #19CA88;
}
.main_top_left_top_con_list:nth-child(3) {
background: #858FF8;
}
.main_top_middle {
float: left;
width: 63%;
height: 100%;
margin-left: 1.2%;
}
.main_top_middle_top_title {
position: relative;
width: 100%;
text-align: center;
font-size: 1.7vw;
font-weight: bold;
color: #0EFCFF;
height: 14%;
}
.main_top_middle_top_title .title_bg {
position: absolute;
left: 7%;
top: -20%;
width: 86%;
height: 140%;
}
.title_web {
position: absolute;
right: -.8%;
top: 0;
padding: .5% 2%;
font-size: .7vw;
color: #0EFCFF;
border: 1px solid #0EFCFF;
-webkit-transform-origin-x: 0;
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
.title_admin {
position: absolute;
left: 0;
top: 0;
padding: .5% 2%;
font-size: .7vw;
color: #0EFCFF;
border: 1px solid #0EFCFF;
-webkit-transform-origin-x: 0;
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
.main_top_middle_num_title {
float: left;
color: #0EFCFF;
font-size: 1.5vw;
margin-left: 13%;
line-height: 4.5vw;
width: 18%;
margin-top: .5vw;
}
.main_top_middle_num {
float: left;
width: 55%;
height: 23%;
margin: .7% auto;
margin-top: 1.5%;
}
.main_top_middle_num_list {
position: relative;
float: left;
height: 100%;
width: 12%;
margin-left: 2.6%;
font-size: 2vw;
font-weight: bold;
color: #0EFCFF;
line-height: 240%;
}
.main_top_middle_num_list p {
text-align: center;
}
.main_top_middle_num_list:nth-child(1) {
margin-left: 0;
}
.main_top_middle_num_list img {
position: absolute;
width: 100%;
height: 100%;
}
.main_top_middle_bottom {
float: left;
width: 100%;
height: 49.8%;
margin-top: .5%;
}
.main_top_middle_bottom_echarts {
position: relative;
float: left;
width: 49%;
height: 100%;
}
.main_top_middle_bottom_echarts_right {
float: right;
}
.main_top_middle_bottom_echarts img {
position: absolute;
width: 100%;
height: 100%;
}
.main_top_echarts_con {
width: 92%;
height: 82%;
margin: 2% auto;
/* background: white; */
}
.main_top_echarts_con_title {
font-size: .8vw;
color: #0EFCFF;
}
.main_top_echarts_pie {
width: 100%;
height: 90%;
}
.main_top_right {
float: right;
}
.main_top_right .main_top_left_top_con_left {
float: left;
height: 48%;
width: 49%;
background: #37D2D4;
}
.main_top_right .main_top_left_top_con_right {
float: right;
height: 48%;
width: 49%;
background: #19CA88;
}
.main_top_right .main_top_left_top_con_list {
float: left;
height: 48%;
width: 32%;
margin-left: 2%;
margin-top: 1.5%;
}
.main_top_right .main_top_left_top_con_list:nth-child(3) {
background: #858FF8;
margin-left: 0;
}
.main_top_right .main_top_left_top_con_list:nth-child(4) {
background: #2E8CFF;
}
.main_top_right .main_top_left_top_con_list:nth-child(5) {
background: #FD9133;
}
/* 中部样式 */
.main_middle {
height: 7.1%;
width: 100%;
}
.main_middle_list {
position: relative;
float: left;
width: 18.5%;
height: 100%;
background: rgba(11,76,151,0.10);
margin-left: 1.875%;
box-shadow: 1px 2px 10px 1px rgba(14,252,255,0.53), inset 5px 4px 100px 1px rgba(14,252,255,0.34);
}
.main_middle_list img {
position: absolute;
width: 100%;
height: 100%;
}
.main_middle_list:nth-child(1) {
margin-left: 0;
}
.main_list_title {
font-size: .75vw;
color: #0EFCFF;
text-indent: .8vw;
padding-top: .5vw;
}
.main_middle_list span {
display: inline-block;
width: 100%;
font-size: 1.4vw;
font-weight: bold;
color: white;
text-align: center;
letter-spacing: .2vw;
margin-top: -.5vw;
}
/* 底部样式 */
.main_bottom {
height: 55.9%;
/* height：55.9% */
width: 100%;
}
.main_bottom_top {
float: left;
width: 100%;
height: 36.5%;
margin-top: 1.5%;
}
.main_bottom_top_list {
position: relative;
float: left;
width: 32%;
height: 100%;
margin-left: 2%;
}
.main_bottom_top_list:nth-child(1) {
margin-left: 0;
}
.main_bottom_top_list img {
position: absolute;
width: 100%;
height: 100%;
}
.main_bottom_t_l_title {
z-index: 80;
position: relative;
width: 100%;
padding-top: 1.6vw;
font-size: .8vw;
color: white;
text-indent: 3.2vw;
}
.main_bottom_t_l_chart {
z-index: 77;
position: relative;
width: 90%;
height: 84%;
margin: auto;
margin-top: -5%;
}
.main_bottom_t_l_con {
z-index: 77;
position: relative;
width: 92%;
height: 60%;
margin: auto;
margin-top: 3%;
/* overflow: hidden; */
}
.main_bottom_t_l_main,.main_bottom_t_l_main2 {
width: 100%;
/* height: 100%; */
}
.main_bottom_t_l_main_list {
font-size: .7vw;
line-height: 1.6vw;
height: 1.6vw;
color: white;
}
.main_bottom_t_l_main2 .main_bottom_t_l_main_list {
font-size: .7vw;
line-height: 1.6vw;
height: 1.6vw;
color: white;
}
.main_bottom_t_list_title {
float: left;
width: 70%;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main_bottom_t_list_time {
float: left;
width: 30%;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.main_bottom_bottom {
float: left;
width: 100%;
height: 54%;
margin-top: 1%;
}
.main_bottom_b_left,.main_bottom_b_right {
position: relative;
float: left;
width: 17.3%;
height: 100%;
}
.main_bottom_b_left img {
position: absolute;
width: 100%;
height: 100%;
}
.main_bottom_b_middle1,.main_bottom_b_middle2 {
position: relative;
float: left;
width: 30%;
height: 100%;
margin-left: 1.8%;
}
.main_bottom_b_right {
margin-left: 1.8%;
}
.main_bottom_b_right img {
position: absolute;
width: 100%;
height: 100%;
}
.main_bottom_b_middle1 img {
position: absolute;
width: 100%;
height: 100%;
}
.main_bottom_b_middle2 img {
position: absolute;
width: 100%;
height: 100%;
}
.main_bottom_b_title {
font-size: .8vw;
text-align: center;
color: #0EFCFF;
padding-top: .3vw;
}
.main_bottom_b_con {
width: 90%;
height: 75%;
margin: auto;
margin-top: 8%;
}
.main_bottom_b_con2 {
height: 70%;
}

314
poem/css/land_flow.css
Unescape View File

@ -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;
}

690
poem/css/new_index.css
Unescape View File

@ -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--- */

467
poem/css/production.css
Unescape View File

@ -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;
}

378
poem/css/production_testing.css
Unescape View File

@ -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;
}

396
poem/css/reset.css
Unescape View File

@ -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;
}

292
poem/css/test-1024.css
Unescape View File

@ -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;
}

294
poem/css/test-1280.css
Unescape View File

@ -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;
}

294
poem/css/test-1920.css
Unescape View File

@ -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;
}

BIN
poem/font/Fette-Engschrift.ttf
View File

Binary file not shown.

19
poem/icon/iconfont.css
Unescape View File

@ -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"; }

BIN
poem/images/admin_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 B

BIN
poem/images/center_num.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 B

BIN
poem/images/choose-item.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 867 B

BIN
poem/images/interact.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 345 KiB

BIN
poem/images/left-bottom2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
poem/images/left-top3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
poem/images/main_bootm_middle.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
poem/images/main_bottom_bottom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
poem/images/main_bottopm_top1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
poem/images/main_bottopm_top2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
poem/images/main_middle.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
poem/images/main_top_bottom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
poem/images/main_top_left.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
poem/images/nums.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
poem/images/resource-use-data.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
poem/images/title_bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
poem/images/web_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 868 B

BIN
poem/images/光-表格.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
poem/images/光晕1-1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
poem/images/光晕1-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
poem/images/光晕1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
poem/images/光晕2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
poem/images/光晕3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
poem/images/光线1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
poem/images/光线2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

1624
poem/index.html
View File

File diff suppressed because it is too large Load Diff

133
poem/js/app.js
Unescape View File

@ -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"
}
}
);

43
poem/js/dataScoll.js
Unescape View File

@ -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();

10
poem/js/digitalScroll.js
Unescape View File

@ -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);

38
poem/js/echarts.min.js vendored
View File

File diff suppressed because one or more lines are too long

364
poem/js/jcarousellite.js
Unescape View File

@ -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">&lt;&lt;</button>
* <button class="next">&gt;&gt;</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);

11
poem/js/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

544
poem/js/particles.js
Unescape View File

@ -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);
}
};

9
poem/js/particles.min.js vendored
View File

File diff suppressed because one or more lines are too long

1165
poem/js/test-1024.js
View File

File diff suppressed because it is too large Load Diff

1165
poem/js/test-1280.js
View File

File diff suppressed because it is too large Load Diff

1165
poem/js/test-1920.js
View File

File diff suppressed because it is too large Load Diff

BIN
poem/更多内容关注公众号.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 KiB

Write Preview
Loading…
Cancel
Save