no message
This commit is contained in:
chenxuanThinkpad
@@ -0,0 +1,33 @@
|
||||
.centerBoxTop{
|
||||
width: 100%;
|
||||
height:49%;
|
||||
|
||||
}
|
||||
.centerBoxBottom{
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
.chain-item{
|
||||
float: left;
|
||||
width: 21%;
|
||||
height: 10vw;
|
||||
background-color: rgba(13, 226, 232, .2);
|
||||
/* opacity: .8; */
|
||||
margin-left: .5vw;
|
||||
margin-top: 1vw;
|
||||
color: #0dd8df;
|
||||
text-align: center;
|
||||
}
|
||||
.chain-item h3{
|
||||
font-size: .8vw;
|
||||
padding:.5vw 0;
|
||||
}
|
||||
.chain-item p{
|
||||
font-size: .5vw;
|
||||
padding:.1vw 0;
|
||||
}
|
||||
/* #liquidfill-chart{
|
||||
background: url(../img/2019072517094175.gif) no-repeat center bottom;
|
||||
background-size: 100% 100%;
|
||||
} */
|
||||
@@ -0,0 +1,542 @@
|
||||
.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%;
|
||||
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%;
|
||||
}
|
||||
@@ -0,0 +1,314 @@
|
||||
.longBox {
|
||||
/* position: relative; */
|
||||
width: 99.5%;
|
||||
}
|
||||
.cardType {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.landCondition, .landFertility, .landIrrigate, .landDrainage, .landType {
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
}
|
||||
.percent{
|
||||
font-size: .8vw;
|
||||
color: #fff;
|
||||
}
|
||||
.percent .pec1{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 60%;
|
||||
}
|
||||
.percent .pec2 {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
left: 58%;
|
||||
}
|
||||
.percent .pec3 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 32%;
|
||||
}
|
||||
.utilizeActuality {
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
display: flex;
|
||||
color: #0EFCFF;
|
||||
font-weight: 10;
|
||||
}
|
||||
.utilizeActuality table {
|
||||
/* width: 90%; */
|
||||
/* height: 78%; */
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
border: 0 solid #0EFCFF;
|
||||
}
|
||||
.utilizeActuality table thead {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
}
|
||||
.trBox {
|
||||
height: 18%;
|
||||
}
|
||||
|
||||
|
||||
.textBox {
|
||||
margin-left: 2.5%;
|
||||
margin-top: .2vw;
|
||||
width: 95%;
|
||||
height: 45%;
|
||||
border: 1px solid #0EFCFF;
|
||||
color: #39DCF4;
|
||||
}
|
||||
.textBox .topText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.topText .topOne {
|
||||
margin-left: .5vw;
|
||||
}
|
||||
.topText .topTwo {
|
||||
margin-left: 2.5vw;
|
||||
}
|
||||
.textBox .middleText {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 2vw;
|
||||
background-color: rgba(14,252,255,.22);
|
||||
font-size: .8vw;
|
||||
}
|
||||
.middleText span {
|
||||
/* margin-top: .8vw; */
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16.5%;
|
||||
height: 100%;
|
||||
line-height: 2vw;
|
||||
text-align: center;
|
||||
border-right: 2px solid rgba(14,252,255,.16);
|
||||
}
|
||||
.middleText .tipBox {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
background-color: red;
|
||||
display: inline-block;
|
||||
width: 29%;
|
||||
height: 29%;
|
||||
border: 1px solid rgba(14,252,255,0.48);
|
||||
background: rgba(2,57,99,0.77);
|
||||
color: #0EFCFF;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.middleText .tipOne {
|
||||
left: -4%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipTwo {
|
||||
left: 12%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipThree {
|
||||
left: 28%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipFour {
|
||||
left: 44%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipFive {
|
||||
left: 59%;
|
||||
display: none;
|
||||
}
|
||||
.middleText .tipSix {
|
||||
left: 73%;
|
||||
display: none;
|
||||
}
|
||||
.tipBox div {
|
||||
margin: .25vw;
|
||||
}
|
||||
.bottomText {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.bottomText .soilContamination {
|
||||
width: 100%;
|
||||
margin-left: .5vw;
|
||||
margin-top: .55vw;
|
||||
}
|
||||
.soilContamination .sencondBox {
|
||||
margin-left: .8vw;
|
||||
}
|
||||
.bottomText .soilData {
|
||||
width: 100%;
|
||||
margin-left: .5vw;
|
||||
margin-top: .55vw;
|
||||
}
|
||||
.soilData span {
|
||||
margin-left: .5vw;
|
||||
}
|
||||
.videoBox {
|
||||
margin-top: 2%;
|
||||
margin-left: 2.5%;
|
||||
width: 95%;
|
||||
height: 34%;
|
||||
}
|
||||
.videoBox .vedioIn {
|
||||
display: inline-block;
|
||||
width: 23.5%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.mlRight {
|
||||
margin-right: 1%;
|
||||
}
|
||||
.videoIn video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: red; */
|
||||
}
|
||||
/* .tipBox {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 58%;
|
||||
width: 29%;
|
||||
height: 29%;
|
||||
border: 1px solid rgba(14,252,255,0.48);
|
||||
background: rgba(2,57,99,0.77);
|
||||
color: #0EFCFF;
|
||||
font-size: .65vw;
|
||||
}
|
||||
.tipBox div {
|
||||
margin: .3vw;
|
||||
} */
|
||||
|
||||
|
||||
.centerBox .topData {
|
||||
width: 100%;
|
||||
height: 22%;
|
||||
border: 1px solid #0EFCFF;
|
||||
}
|
||||
.topData .topContent {
|
||||
width: 95%;
|
||||
height: 50%;
|
||||
margin-left: 2.5%;
|
||||
border-bottom: 1px solid rgba(14,252,255,0.42);;
|
||||
|
||||
}
|
||||
.topData .content, ul {
|
||||
width: 95%;
|
||||
height: 50%;
|
||||
/* margin-left: 2%; */
|
||||
/* border-bottom: 1px solid #0EFCFF; */
|
||||
display: -webkit-flex;
|
||||
-webkit-justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
.content li {
|
||||
text-align: center;
|
||||
}
|
||||
.content ul P {
|
||||
font-size: .7VW;
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.content ul .num {
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
}
|
||||
.content ul .unit {
|
||||
color: #0EFCFF;
|
||||
font-size: .6vw;
|
||||
}
|
||||
.bottomData {
|
||||
width: 100%;
|
||||
height: 75.5%;
|
||||
margin-top: 3%;
|
||||
/* background-color: green; */
|
||||
background-image: url(../img/centerBg.jpg);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/* ========= 地图样式 stat========== */
|
||||
.map{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 44%;
|
||||
margin-top: 10%;
|
||||
/* background: white; */
|
||||
}
|
||||
.map img {
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.mapActived1 {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 43.5%;
|
||||
width: 1.5vw;
|
||||
height: 3vw;
|
||||
border-radius: 90px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mapActived2 {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 23%;
|
||||
width: 3vw;
|
||||
height: 2vw;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.mapActived3 {
|
||||
position: absolute;
|
||||
top: 44%;
|
||||
right: 13.5%;
|
||||
width: 1.8vw;
|
||||
height: 4vw;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mapContent1 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 47%;
|
||||
top: -5%;
|
||||
background: rgba(255,255,255, .2);
|
||||
}
|
||||
.mapContent2 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 70%;
|
||||
top: 5%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContent3 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
right: 15%;
|
||||
top: 12%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContentFont {
|
||||
width: 85%;
|
||||
margin-left: 12%;
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
letter-spacing: .05vw;
|
||||
}
|
||||
.mapContentFont:nth-child(1) {
|
||||
margin-top: .6vw;
|
||||
}
|
||||
.mapContentFont span {
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,685 @@
|
||||
/* 左侧第一个盒子start--- */
|
||||
.firstBox {
|
||||
width: 90%;
|
||||
margin-left: 6%;
|
||||
height: 90%;
|
||||
}
|
||||
.firstBox .pic {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
}
|
||||
.pic img {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
height: 80%;
|
||||
margin-top: 1vw;
|
||||
|
||||
}
|
||||
.first_top1 {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.first_top2 {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.picText {
|
||||
color: #0EFCFF;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.picText .text_second {
|
||||
margin-left: 6vw;
|
||||
}
|
||||
|
||||
/* 声波动画start--- */
|
||||
.voice_animation {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin-top: 1vw;
|
||||
background-image: url(../img/voice_pic.png);
|
||||
background-size: 90% 90%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
/* 声波动画over--- */
|
||||
|
||||
|
||||
/* 进度条start--- */
|
||||
.progress {
|
||||
width: 93%;
|
||||
height: 10%;
|
||||
margin-top: 1vw;
|
||||
margin-left: .6vw;
|
||||
background-image: url(../img/progress_pic.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/* 进度条over--- */
|
||||
|
||||
|
||||
.about_illness {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
margin-top: 1.5vw;
|
||||
margin-left: .6vw;
|
||||
color: #fff;
|
||||
font-size: .6vw;
|
||||
}
|
||||
.about_illness > div {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
background-image: url(../img/illness_pic.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.prevent {
|
||||
margin-left: .5vw;
|
||||
text-indent: .2vw;
|
||||
}
|
||||
.symptom {
|
||||
/* text-indent: .2vw; */
|
||||
/* font-size: .5vw; */
|
||||
}
|
||||
.symptom_content, .prevent_content {
|
||||
color: #0EFCFF;
|
||||
margin-top: .5vw;
|
||||
margin: .6vw .2vw .2vw .5vw;
|
||||
}
|
||||
.symptom_title .prevent_title {
|
||||
font-size: .1vw;
|
||||
color: red;
|
||||
}
|
||||
/* 左侧第一个盒子over--- */
|
||||
|
||||
|
||||
/* center部分start--- */
|
||||
.maps {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
margin-top: 2%;
|
||||
/* background: pink; */
|
||||
/* background-image: url(../img/landLevel.png); */
|
||||
/* background-size: 95% 100%; */
|
||||
/* background-repeat: no-repeat; */
|
||||
/* background-position: center; */
|
||||
}
|
||||
.maps .land_level {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin-left: 2.5%;
|
||||
}
|
||||
.maps .wifi_gif {
|
||||
position: absolute;
|
||||
right: 27%;
|
||||
top: -3.5%;
|
||||
width: 5%;
|
||||
height: 10%;
|
||||
}
|
||||
.maps .sun_pic {
|
||||
position: absolute;
|
||||
top: -5%;
|
||||
left: 18%;
|
||||
width: 10%;
|
||||
height: 15%;
|
||||
|
||||
animation:mymove 3s infinite;
|
||||
-webkit-animation:mymove 3s infinite; /*Safari and Chrome*/
|
||||
animation-direction:alternate;/*轮流反向播放动画。*/
|
||||
animation-timing-function: ease-in-out; /*动画的速度曲线*/
|
||||
/* Safari 和 Chrome */
|
||||
-webkit-animation:mymove 3s infinite;
|
||||
-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
}
|
||||
@keyframes mymove
|
||||
{
|
||||
0%{
|
||||
transform: scale(1); /*开始为原始大小*/
|
||||
}
|
||||
25%{
|
||||
transform: scale(1.1); /*放大1.1倍*/
|
||||
}
|
||||
50%{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
75%{
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove /*Safari and Chrome*/
|
||||
{
|
||||
0%{
|
||||
transform: scale(1); /*开始为原始大小*/
|
||||
}
|
||||
25%{
|
||||
transform: scale(1.1); /*放大1.1倍*/
|
||||
}
|
||||
50%{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
75%{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.maps .wrj_pic {
|
||||
position: absolute;
|
||||
width: 8%;
|
||||
height: 8%;
|
||||
left: 30%;
|
||||
animation: myfirst 5s infinite;
|
||||
-moz-animation: myfirst 5s infinite;
|
||||
/* Firefox */
|
||||
-webkit-animation: myfirst 5s infinite;
|
||||
/* Safari 和 Chrome */
|
||||
-o-animation: myfirst 5s infinite;
|
||||
/* Opera */
|
||||
/* animation: btn-load-loop 1s linear infinite; */
|
||||
}
|
||||
|
||||
|
||||
@keyframes myfirst
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:150px; top:300px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
@-moz-keyframes myfirst
|
||||
/* Firefox */
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:500px; top:200px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes myfirst
|
||||
/* Safari 和 Chrome */
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:500px; top:200px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
@-o-keyframes myfirst
|
||||
/* Opera */
|
||||
{
|
||||
0% { left:250px; top:0px;}
|
||||
25% {left:300px; top:0px;}
|
||||
50% {left:500px; top:200px;}
|
||||
75% { left:250px; top:200px;}
|
||||
100% {left:250px; top:0px;}
|
||||
}
|
||||
|
||||
.wind_gif {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
width: 10%;
|
||||
height: 19%;
|
||||
}
|
||||
|
||||
.plant_pic {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 60%;
|
||||
width: 8%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.windows, .window_two, .window_three, .window_four, .window_five, .window_six{
|
||||
padding: 1.5%;
|
||||
color: #0EFCFF;
|
||||
background: rgba(40, 229, 233, .2);
|
||||
}
|
||||
.windows {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 3%;
|
||||
}
|
||||
.windows li:nth-of-type(1) {
|
||||
font-size: .9vw;
|
||||
}
|
||||
.windows li {
|
||||
margin-bottom: .2vw;
|
||||
}
|
||||
.window_two {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
/* right: 1%; */
|
||||
top: 5%;
|
||||
}
|
||||
.window_two li:nth-of-type(1) {
|
||||
font-size: .9vw;
|
||||
}
|
||||
.window_three {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 60%;
|
||||
}
|
||||
.window_four {
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: 10%;
|
||||
}
|
||||
.window_five {
|
||||
position: absolute;
|
||||
bottom: 15%;
|
||||
left: 20%;
|
||||
}
|
||||
.window_six{
|
||||
position: absolute;
|
||||
/* border: 1px solid red; */
|
||||
right: 40%;
|
||||
top: 0%;
|
||||
}
|
||||
.peasant {
|
||||
position: absolute;
|
||||
right: 17%;
|
||||
top: 27%;
|
||||
width: 5.5%;
|
||||
height:9%;
|
||||
cursor: pointer;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.display_box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.land_box1 {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
top: 32%;
|
||||
width: 13%;
|
||||
height: 30%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.land_box2 {
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 65%;
|
||||
width: 20%;
|
||||
height: 15%;
|
||||
transform:rotate(150deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.land_box3 {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 40%;
|
||||
width: 20%;
|
||||
height: 15%;
|
||||
transform:rotate(150deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.land_box4 {
|
||||
position: absolute;
|
||||
right: 41%;
|
||||
top: 0%;
|
||||
width: 10%;
|
||||
height: 25%;
|
||||
transform:rotate(140deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.plant {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 35%;
|
||||
width: 25%;
|
||||
height: 30%;
|
||||
cursor: pointer;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.soil_data {
|
||||
position: absolute;
|
||||
bottom:23%;
|
||||
left: 45%;
|
||||
width: 55%;
|
||||
height: 10%;
|
||||
transform:rotate(150deg);
|
||||
}
|
||||
.weather_info {
|
||||
position: absolute;
|
||||
top: -5%;
|
||||
left: 18%;
|
||||
width: 10%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
/* center部分over--- */
|
||||
|
||||
|
||||
/* left bottom start--- */
|
||||
.leftBottom {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 32%;
|
||||
height: 80%;
|
||||
font-size: .6vw;
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.leftBottom .land_data p {
|
||||
position: absolute;
|
||||
left: 52%;
|
||||
top: 14%;
|
||||
}
|
||||
.land_data p:nth-child(2) {
|
||||
top: 24%;
|
||||
left: 57%;
|
||||
}
|
||||
.land_data p:nth-child(3) {
|
||||
top: 32%;
|
||||
left: 67%;
|
||||
}
|
||||
.right_box {
|
||||
float: right;
|
||||
width: 65%;
|
||||
height: 70%;
|
||||
/* margin: 2%; */
|
||||
margin-top: 1%;
|
||||
margin-right: 1%;
|
||||
/* background-color: red; */
|
||||
}
|
||||
.grow_data {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.grow_data img {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
height: 80%;
|
||||
margin-top: .8vw;
|
||||
}
|
||||
.grow_data p {
|
||||
color: #0EFCFF;
|
||||
position: absolute;
|
||||
}
|
||||
.grow_data p:nth-of-type(1) {
|
||||
top: 3%;
|
||||
left: 5%;
|
||||
}
|
||||
.grow_data p:nth-of-type(2) {
|
||||
top: 47%;
|
||||
left: 22%;
|
||||
}
|
||||
.grow_data p:nth-of-type(3) {
|
||||
top: 80%;
|
||||
left: 5%;
|
||||
}
|
||||
.grow_data span {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
left: 13%;
|
||||
padding: .15vw .6vw;
|
||||
border-radius: 1vw;
|
||||
display: inline-block;
|
||||
color: #0EFCFF;
|
||||
background: rgba(40, 229, 233, .2);
|
||||
}
|
||||
.specialistSuggest {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -15%;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
padding: 1vw;
|
||||
color: #0EFCFF;
|
||||
font-size: .6vw;
|
||||
}
|
||||
|
||||
.specialistSuggest div:nth-of-type(1) {
|
||||
font-size: .7vw;
|
||||
}
|
||||
|
||||
.fertilizationSuggest {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 55%;
|
||||
display: inline-block;
|
||||
width: 35%;
|
||||
padding: 1vw;
|
||||
color: #0EFCFF;
|
||||
font-size: .6vw;
|
||||
}
|
||||
.fertilizationSuggest div:nth-of-type(1) {
|
||||
font-size: .7vw;
|
||||
}
|
||||
|
||||
.weather_data {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
margin-top: .5%;
|
||||
font-size: .6vw;
|
||||
/* background-color: yellow; */
|
||||
background-image: url(../img//bottom_icons.png);
|
||||
background-size: 90% 80%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.weather_text {
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.weather_text span {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
}
|
||||
.weather_text span:nth-of-type(1) {
|
||||
left: -5%;
|
||||
}
|
||||
.weather_text span:nth-of-type(2) {
|
||||
left: 24%;
|
||||
}
|
||||
.weather_text span:nth-of-type(3) {
|
||||
left: 50%;
|
||||
}
|
||||
.weather_text span:nth-of-type(4) {
|
||||
left: 75%;
|
||||
}
|
||||
.text_two span {
|
||||
top: 85%;
|
||||
}
|
||||
.text_two span:nth-of-type(1) {
|
||||
left: 0%;
|
||||
}
|
||||
.text_two span:nth-of-type(2) {
|
||||
left: 30%;
|
||||
}
|
||||
.text_two span:nth-of-type(3) {
|
||||
left: 65%;
|
||||
}
|
||||
/* .text_one {
|
||||
margin-top: 14%;
|
||||
|
||||
}
|
||||
.text_two {
|
||||
margin-top: 18%;
|
||||
} */
|
||||
|
||||
|
||||
/* left bottom over--- */
|
||||
|
||||
|
||||
/* 右侧三个内容框start--- */
|
||||
|
||||
/* 硬件设备展示start--- */
|
||||
.boxLis {
|
||||
width: 68%;
|
||||
z-index: 9999;
|
||||
height: 1.5vw;
|
||||
margin-left: 3.5vw;
|
||||
margin-top: 1vw;
|
||||
font-size: .6vw;
|
||||
/* background-color: pink; */
|
||||
border-bottom: .02vw solid rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.boxLis>li {
|
||||
/* width: 21.1%; */
|
||||
/* height: 1.4vw; */
|
||||
z-index: 9999;
|
||||
padding: .1vw;
|
||||
display: block;
|
||||
background: rgba(40, 229, 233, .5);
|
||||
margin-right: 2.5%;
|
||||
line-height: 1.4vw;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
/* border-bottom: .02vw solid rgb(40, 229, 233); */
|
||||
}
|
||||
.boxLis li:nth-child(4) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.boxLis > .active {
|
||||
/* border-bottom: none; */
|
||||
/* color: #0EFCFF; */
|
||||
border-top: .02vw solid rgb(40, 229, 233);
|
||||
border-right: .02vw solid rgb(40, 229, 233);
|
||||
border-left: .02vw solid rgb(40, 229, 233);
|
||||
}
|
||||
.equipment_pic {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #031426;
|
||||
}
|
||||
.equipment_pic img {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
.equipment_pic img:nth-child(2) {
|
||||
display: none;
|
||||
width: 45%;
|
||||
height: 50%;
|
||||
}
|
||||
.equipment_pic img:nth-child(3) {
|
||||
width: 40%;
|
||||
height: 65%;
|
||||
display: none;
|
||||
}
|
||||
.equipment_pic img:nth-child(4) {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.liSpan {
|
||||
width: 100%;
|
||||
margin-top: -1%;
|
||||
text-align: center;
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.liP {
|
||||
width: 66%;
|
||||
margin: .3vw auto 0;
|
||||
text-align: left;
|
||||
font-size: .6vw;
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
/* 硬件设备展示over--- */
|
||||
|
||||
|
||||
/* 灌溉数据start--- */
|
||||
.irrigate_data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: yellow; */
|
||||
}
|
||||
.centerList {
|
||||
/* float: left; */
|
||||
display: inline-block;
|
||||
width: 37%;
|
||||
height: 80%;
|
||||
padding-top: 3%;
|
||||
text-align: center;
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.centerListFont {
|
||||
font-size: .8vw;
|
||||
color: #0EFCFF;
|
||||
}
|
||||
|
||||
.centerListNum {
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
margin-top: .2vw;
|
||||
}
|
||||
.irrigate_bottom {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
margin-top: .2vw;
|
||||
}
|
||||
.irrigate_bottom .every_line {
|
||||
width: 90%;
|
||||
height: 25%;
|
||||
margin-left: 5%;
|
||||
margin-bottom: 3%;
|
||||
background-color: rgba(14,252,255,.2);
|
||||
}
|
||||
.every_line span {
|
||||
color: #0EFCFF;
|
||||
margin-left: .7vw;
|
||||
font-size: .7vw;
|
||||
}
|
||||
.every_line i {
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-right: .8vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
/* 灌溉数据over--- */
|
||||
|
||||
/* 数据日志start--- */
|
||||
.data_day {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: .55vw;
|
||||
color: #fff;
|
||||
}
|
||||
.data_day table {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
overflow:hidden;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
margin-left: 5%;
|
||||
}
|
||||
.data_day .head {
|
||||
color: #0EFCFF;
|
||||
}
|
||||
.data_day ul {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 数据日志over--- */
|
||||
|
||||
|
||||
|
||||
/* 右侧三个内容框over--- */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,468 @@
|
||||
|
||||
.main .unit {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 3%;
|
||||
left: 13%;
|
||||
font-size: 0.8vw;
|
||||
color: #fff;
|
||||
}
|
||||
.dataGet, .dataStorage, .gettingDate, .dataClean, .dataSave, .dataDesensitization{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* border: 1px solid #ccc; */
|
||||
/* padding: 10px; */
|
||||
background-color: #080F1F;
|
||||
|
||||
color: #383F4E;
|
||||
/* margin-top: -10%; */
|
||||
}
|
||||
.gettingDate{
|
||||
margin-top: -10%;
|
||||
}
|
||||
.textBox {
|
||||
width: 100%;
|
||||
}
|
||||
.textBox .pieText, .pieText2 {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
left: 18%;
|
||||
/* margin-top: 20%; */
|
||||
}
|
||||
.textBox .pieText {
|
||||
top: 50%;
|
||||
}
|
||||
.textBox .pieText2 {
|
||||
top: 95%;
|
||||
}
|
||||
.textBox .pieText .text2 {
|
||||
margin-left: 3.6vw;
|
||||
}
|
||||
.textBox .pieText2 .text2 {
|
||||
margin-left: 3.2vw;
|
||||
}
|
||||
|
||||
/* 我的 */
|
||||
.service{
|
||||
overflow: hidden;
|
||||
margin: .6vw 1vw;
|
||||
padding: .3vw 0;
|
||||
border-bottom: 1px solid #0efcff;
|
||||
}
|
||||
.service span{
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
}
|
||||
.service-data{
|
||||
overflow: hidden;
|
||||
margin: .6vw 1vw;
|
||||
padding: .3vw 0;
|
||||
}
|
||||
.service-data .img-box{
|
||||
width: 4vw;
|
||||
height: 4vw;
|
||||
}
|
||||
.service-data .img-box img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.service-data span{
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
margin-top: .2vw;
|
||||
}
|
||||
.service-data .right ul li{
|
||||
float: right;
|
||||
color: #0efcff;
|
||||
font-size: .6vw;
|
||||
padding: .4vw;
|
||||
text-align: center;
|
||||
}
|
||||
.service-data .right ul li p{
|
||||
margin: .5vw 0;
|
||||
}
|
||||
.boxMain {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
/* background: red; */
|
||||
}
|
||||
|
||||
.centerdiv {
|
||||
width: 100%;
|
||||
height: 32.46%;
|
||||
position: relative;
|
||||
border: 1px solid #6176AF;
|
||||
background: rgba(11, 21, 44, 0.60);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.boxend {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 32.3%;
|
||||
border: 1px solid #6176AF;
|
||||
background: rgba(11, 21, 44, 0.60);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.bottoms {
|
||||
margin-bottom: 1.5%;
|
||||
}
|
||||
|
||||
.boxRader {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 生长图片 */
|
||||
.boxImg {
|
||||
width: 85%;
|
||||
height: 80%;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: row;
|
||||
-webkit-justify-content: space-between;
|
||||
-webkit-flex-wrap: wrap;
|
||||
margin: 3% auto 0;
|
||||
}
|
||||
|
||||
.boxImg img,.boxImg video {
|
||||
width: 48%;
|
||||
height: 5vw;
|
||||
}
|
||||
|
||||
/* 加工详情 */
|
||||
.processing {
|
||||
width: 90%;
|
||||
margin: 1% 0 0 8.2%;
|
||||
font-size: .8vw;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.processing>p {
|
||||
line-height: 1.6vw;
|
||||
}
|
||||
|
||||
.processing>p>span:nth-child(1) {
|
||||
color: #0efcff;
|
||||
}
|
||||
|
||||
/* 工程流程 */
|
||||
.boxSize {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.boxContent {
|
||||
width: 89%;
|
||||
color: #fff;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
margin: 2% auto 2%;
|
||||
font-size: .5vw;
|
||||
}
|
||||
|
||||
.boxContent>div>p {
|
||||
line-height: 1vw;
|
||||
|
||||
}
|
||||
|
||||
.boxContent>div>p>span:nth-child(1) {
|
||||
color: #0efcff;
|
||||
}
|
||||
|
||||
.boxSizestxt {
|
||||
color: #fff;
|
||||
font-size: .5vw;
|
||||
width: 89%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.centerBoxTop {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
border: .01vw solid #0efcff;
|
||||
}
|
||||
|
||||
|
||||
.colors {
|
||||
color: #0efcff;
|
||||
}
|
||||
|
||||
.colorccc {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.leftBox_left {
|
||||
float: left;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.boxNums {
|
||||
width: 90%;
|
||||
margin: 3% auto 0;
|
||||
}
|
||||
|
||||
.boxNums ul {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-webkit-justify-content: space-between;
|
||||
}
|
||||
|
||||
.boxNumstit {
|
||||
width: 32%;
|
||||
height: .8vw;
|
||||
text-align: center;
|
||||
line-height: .8vw;
|
||||
background: #0D8891;
|
||||
color: #fff;
|
||||
font-size: .5vw;
|
||||
}
|
||||
|
||||
.boxNums ul>li {
|
||||
width: 50%;
|
||||
margin-bottom: 4%;
|
||||
}
|
||||
|
||||
.type>img {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
margin: 10% 10% 0 0;
|
||||
}
|
||||
|
||||
.type {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
color: #fff;
|
||||
}
|
||||
.typeSpan{
|
||||
font-size: .57vw;
|
||||
}
|
||||
.typeSpan>p>span:nth-child(1) {
|
||||
color: #0efcff;
|
||||
line-height: 1.1vw;
|
||||
}
|
||||
|
||||
/* 品种拆分 */
|
||||
.varieties {
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
margin: 2% auto 0;
|
||||
}
|
||||
|
||||
.varieties ul {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content:space-around;
|
||||
}
|
||||
|
||||
.varietiesBotm {
|
||||
margin-top: 2%
|
||||
}
|
||||
|
||||
.varietiesBotm>li {
|
||||
width: 20%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-right: 2%;
|
||||
font-size: .8vw;
|
||||
}
|
||||
|
||||
.varietiesBotm>li>p {
|
||||
line-height: 1.1vw;
|
||||
}
|
||||
|
||||
.varietiesBotm>li>p:nth-child(1) {
|
||||
color: #0DFCFC;
|
||||
}
|
||||
|
||||
.boxLis {
|
||||
width: 13%;
|
||||
height: 1.8vw;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.8vw;
|
||||
margin: 0 4.5% 0 2.5%;
|
||||
}
|
||||
.varietiesUl{
|
||||
position: relative;
|
||||
font-size: .8vw;
|
||||
}
|
||||
.boxLisimg{
|
||||
position: absolute;
|
||||
top:.3vw;
|
||||
right:0vw;
|
||||
width: 1.3vw;
|
||||
height: 1.1vw;
|
||||
}
|
||||
.boxLis:hover{
|
||||
background: #0B7180;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background: #0B7180;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.solid {
|
||||
width: .08vw;
|
||||
height: .8vw;
|
||||
background: #0efcff;
|
||||
}
|
||||
|
||||
.boxRadius {
|
||||
width: 3.5vw;
|
||||
height: 3.5vw;
|
||||
text-align: center;
|
||||
line-height: 4vw;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: column;
|
||||
-webkit-justify-content:center;
|
||||
align-items: center;
|
||||
font-size: .9vw;
|
||||
border: .15vw solid #F98001;
|
||||
border-radius: 50%;
|
||||
margin: .5vw auto 0;
|
||||
}
|
||||
.boxRadius img{
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-bottom: .4vw;
|
||||
|
||||
}
|
||||
.boxRadius span{
|
||||
width: 100%;
|
||||
height: 1vw;
|
||||
line-height: 1vw;
|
||||
}
|
||||
|
||||
/* ========= 地图样式 stat========== */
|
||||
.map{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 84%;
|
||||
/* margin-top: -3%; */
|
||||
/* background: white; */
|
||||
}
|
||||
.map img {
|
||||
width: 70%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
.mapActived1 {
|
||||
position: absolute;
|
||||
top: 41.5%;
|
||||
left: 44%;
|
||||
width: 1.3vw;
|
||||
height: 2.1vw;
|
||||
border-radius: 90px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mapActived2 {
|
||||
position: absolute;
|
||||
top: 52%;
|
||||
right: 25%;
|
||||
width: 3vw;
|
||||
height: 1.5vw;
|
||||
cursor: pointer;
|
||||
border-radius: 90px;
|
||||
}
|
||||
.mapActived3 {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
right: 18%;
|
||||
width: 1.5vw;
|
||||
height: 4vw;
|
||||
cursor: pointer;
|
||||
border-radius: 90px;
|
||||
}
|
||||
.mapContent1 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 48%;
|
||||
top: -14%;
|
||||
background: rgba(255,255,255, .2);
|
||||
}
|
||||
.mapContent2 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
left: 68%;
|
||||
top: -2%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContent3 {
|
||||
position: absolute;
|
||||
height: 6vw;
|
||||
width: 8vw;
|
||||
right: 19%;
|
||||
top: 0%;
|
||||
background: rgba(255,255,255, .2);
|
||||
display: none;
|
||||
}
|
||||
.mapContentFont {
|
||||
width: 85%;
|
||||
margin-left: 12%;
|
||||
font-size: .6vw;
|
||||
color: #0efcff;
|
||||
letter-spacing: .05vw;
|
||||
}
|
||||
.mapContentFont:nth-child(1) {
|
||||
margin-top: .6vw;
|
||||
}
|
||||
.mapContentFont span {
|
||||
color: white;
|
||||
}
|
||||
/* ========= 地图样式 end========== */
|
||||
.mapAllNum {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
left: 1vw;
|
||||
top: 2.5vw;
|
||||
color: #0efcff;
|
||||
font-size: .8vw;
|
||||
letter-spacing: .05vw;
|
||||
}
|
||||
.mapAllNum span {
|
||||
color: white;
|
||||
font-size: 1.1vw;
|
||||
}
|
||||
.mapfooterFont {
|
||||
position: absolute;
|
||||
right: 0vw;
|
||||
top: 0.7vw;
|
||||
width: 7vw;
|
||||
height: 3vw;
|
||||
color: #0efcff;
|
||||
font-size: .7vw;
|
||||
}
|
||||
.mapfooterFont img {
|
||||
width: 50%;
|
||||
padding-top: .3vw;
|
||||
margin: 0 .3vw;
|
||||
}
|
||||
.mapFootertitle {
|
||||
margin-bottom: .3vw;
|
||||
}
|
||||
@@ -0,0 +1,373 @@
|
||||
.clear{
|
||||
clear: both;
|
||||
}
|
||||
.flexLeft{
|
||||
float: left;
|
||||
}
|
||||
.flexRight{
|
||||
float: right;
|
||||
}
|
||||
.boxMain {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
/* background: red; */
|
||||
}
|
||||
|
||||
.boxRader {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.centerBox {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.centerBoxTop {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
border: .01vw solid #0efcff;
|
||||
}
|
||||
|
||||
.centerBoxTop ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.centerBoxTop ul>li {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p-li {
|
||||
color: #0efcff;
|
||||
font-size: 1.4vw;
|
||||
}
|
||||
|
||||
.boxBottomtxt {
|
||||
width: 80%;
|
||||
margin: 4% auto 0;
|
||||
padding-left: 4%;
|
||||
color: rgb(40, 229, 233);
|
||||
|
||||
}
|
||||
|
||||
.boxBottomtxt>span {
|
||||
float: left;
|
||||
margin-right: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.boxFont {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.boxDatelis {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: -webkit-flex;
|
||||
-webkit-justify-content: center;
|
||||
font-size: .6vw;
|
||||
}
|
||||
|
||||
.boxDatelis ul {
|
||||
width: 50%;
|
||||
margin-left:5%;
|
||||
}
|
||||
|
||||
.boxDatelis ul>li {
|
||||
line-height: 1.5vw;
|
||||
text-align: left;
|
||||
}
|
||||
/* 种植 */
|
||||
.plant{
|
||||
width: 90%;
|
||||
height: 4vw;
|
||||
margin:8% auto 0;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
-webkit-justify-content:space-between;
|
||||
-moz-justify-content:space-between;
|
||||
|
||||
|
||||
|
||||
}
|
||||
.plant li{
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: rgba(0,235,255,.08);
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: column;
|
||||
-webkit-justify-content: space-between;
|
||||
display: -moz-flex;
|
||||
-moz-flex-direction: column;
|
||||
-moz-justify-content: space-between;
|
||||
}
|
||||
.plant li>div>img{
|
||||
width: .88vw;
|
||||
height: .88vw;
|
||||
float: right;
|
||||
}
|
||||
.plant li>p{
|
||||
width: 80%;
|
||||
font-size: 1.5vw;
|
||||
color: #fff;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.plant li>div{
|
||||
width: 80%;
|
||||
margin:5% auto 0;
|
||||
}
|
||||
.plant li>div>span{
|
||||
font-size: .8vw;
|
||||
color: #0efcff;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.spans1{
|
||||
width: 80%;
|
||||
height: 8%;
|
||||
background: #0efcff;
|
||||
}
|
||||
.spans2{
|
||||
width: 80%;
|
||||
height: 8%;
|
||||
background: #FE0000;
|
||||
}
|
||||
.spans3{
|
||||
width: 80%;
|
||||
height: 8%;
|
||||
background: #F78001;
|
||||
}
|
||||
/* 地图 */
|
||||
.map{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height:38%;
|
||||
margin-top:8%
|
||||
}
|
||||
/* 种植地数量 */
|
||||
.plantDdetails{
|
||||
width: 85%;
|
||||
height: 25%;
|
||||
margin: 8% auto 0;
|
||||
}
|
||||
.plantDdetails li{
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.plantNum{
|
||||
width: 7.97vw;
|
||||
height: 2.5vw;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 1vw;
|
||||
color: #01FEFE;
|
||||
}
|
||||
.plantNum span{
|
||||
line-height: 2.5vw;
|
||||
}
|
||||
.plantNum img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
}
|
||||
.plantNumbers{
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
margin-left:5%;
|
||||
}
|
||||
.plantNumbers>li{
|
||||
width:2.2vw;
|
||||
height: 2.2vw;
|
||||
position: relative;
|
||||
font-size: 1.5vw;
|
||||
color: #01FEFE;
|
||||
text-align: center;
|
||||
margin-right:2%;
|
||||
}
|
||||
.plantNumbers>li>span{
|
||||
line-height: 100%;
|
||||
}
|
||||
.plantNumbers>li img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
.ptlanTxts{
|
||||
font-size: 1.2vw;
|
||||
color: #01FEFE;
|
||||
margin-left:2%;
|
||||
}
|
||||
.boximgs {
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
margin: 1vw auto 0;
|
||||
display: -webkit-flex;
|
||||
display: -o-flex;
|
||||
-webkit-flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-webkit-justify-content: space-between;
|
||||
-o-flex-direction: row;
|
||||
-o-flex-wrap: wrap;
|
||||
-o-justify-content: space-between;
|
||||
}
|
||||
|
||||
.boximgs img {
|
||||
width: 47%;
|
||||
height: 42%;
|
||||
|
||||
}
|
||||
|
||||
.boxVideo {
|
||||
width: 90%;
|
||||
height: 60%;
|
||||
margin: 1vw auto 0;
|
||||
}
|
||||
|
||||
.boxVideo video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.colors {
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.colorccc {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: rgb(40, 229, 233);
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.boxFont {
|
||||
font-size: 1.2VW;
|
||||
}
|
||||
|
||||
.leftBox_left {
|
||||
float: left;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftBox_left:nth-child(2) {
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.leftBox_left .baseBox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.leftBox_left .baseBox:nth-child(2) {
|
||||
margin: 3% 0;
|
||||
}
|
||||
|
||||
.FiveBox {
|
||||
height: 49.1%;
|
||||
}
|
||||
|
||||
.boxTable {
|
||||
width: 95%;
|
||||
color: #0efcff;
|
||||
font-size: .6vw;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
table-layout: fixed;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
|
||||
.boxTable tr {
|
||||
height: 2.2vw;
|
||||
}
|
||||
|
||||
.boxTable tr:nth-child(1) {
|
||||
font-size: .8vw;
|
||||
}
|
||||
|
||||
/* .boxTable tr:nth-child(1) td:nth-child(1) {
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
} */
|
||||
.boxTable tr td:nth-child(1) {
|
||||
text-align: left;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left:1vw;
|
||||
}
|
||||
|
||||
.boxTable tr td:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.boxTable tr td:nth-child(3) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.boxTable2 tr td:nth-child(1) {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.boxTable2 tr td:nth-child(3) {
|
||||
width: 30%;
|
||||
color: #e98732;
|
||||
}
|
||||
|
||||
|
||||
#all {
|
||||
margin-top: 6%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.amount {
|
||||
/* float: left; */
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
}
|
||||
/* 数字滚动 */
|
||||
#all .t_num i {
|
||||
/* float: left; */
|
||||
width: 2.2vw;
|
||||
height: 2.2vw;
|
||||
display: inline-block;
|
||||
background: url(./img/number3.png) no-repeat;
|
||||
/* background-size: 33px 47px; */
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#all .unit {
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: 61%;
|
||||
/* vertical-align: baseline; */
|
||||
color: #11F9FD;
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
@@ -0,0 +1,393 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user