480 lines
7.3 KiB
CSS
480 lines
7.3 KiB
CSS
@charset "utf-8";
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
*, body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
color: #222;
|
|
font-family: "微软雅黑";
|
|
}
|
|
|
|
body {
|
|
background: #000d4a url(../images/bg.jpg) center top;
|
|
background-size: cover;
|
|
color: #666;
|
|
padding-bottom: 30px;
|
|
font-size: .1rem;
|
|
/* overflow:hidden; */
|
|
}
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
i {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
text-indent: 0px;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
max-width: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #399bff;
|
|
}
|
|
|
|
a.active, a:focus {
|
|
outline: none!important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
ol, ul, p, h1, h2, h3, h4, h5, h6 {
|
|
padding: 0;
|
|
margin: 0
|
|
}
|
|
|
|
a:hover {
|
|
color: #06c;
|
|
text-decoration: none!important
|
|
}
|
|
|
|
.clearfix:after, .clearfix:before {
|
|
display: table;
|
|
content: " "
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
|
|
.pulll_left {
|
|
float: left;
|
|
}
|
|
|
|
|
|
/*谷哥滚动条样式*/
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
position: absolute
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #5bc0de
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: #ddd
|
|
}
|
|
|
|
/***/
|
|
|
|
.loading {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
font-size: .1rem;
|
|
z-index: 100000000;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #1a1a1c;
|
|
text-align: center;
|
|
}
|
|
|
|
.loadbox {
|
|
position: absolute;
|
|
width: 160px;
|
|
height: 150px;
|
|
color: #324e93;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-top: -100px;
|
|
margin-left: -75px;
|
|
}
|
|
|
|
.loadbox img {
|
|
margin: 10px auto;
|
|
display: block;
|
|
width: 40px;
|
|
}
|
|
|
|
/* 标题 */
|
|
.head-wrap {
|
|
width: 100%;
|
|
height: 1.05rem;
|
|
background: url(../images/head_bg.png) no-repeat center center;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
}
|
|
.head-wrap span{
|
|
height: 70px;
|
|
line-height: 70px;
|
|
color: #3266b2;
|
|
font-size: 0.17rem;
|
|
position: absolute;
|
|
padding: 0 16px;
|
|
top: 0;
|
|
}
|
|
.head-wrap span img{
|
|
width: 0.3rem;
|
|
margin-right: 6px;
|
|
}
|
|
.head-wrap span input{
|
|
width: 1.6rem;
|
|
height: 36px;
|
|
background-color: #020f44;
|
|
color: #3266b2;
|
|
border-radius: 18px;
|
|
border: 1px solid #1e2656;
|
|
box-sizing: border-box;
|
|
padding: 0 40px 0 20px;
|
|
}
|
|
.head-wrap span input:focus{
|
|
outline:none;
|
|
width: 3.5rem;
|
|
transition: width 500ms;
|
|
}
|
|
.head-wrap h1 {
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: .42rem;
|
|
line-height: .75rem;
|
|
}
|
|
|
|
.head-wrap h1 img {
|
|
width: 0.8rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: .2rem
|
|
}
|
|
|
|
/* 内容 */
|
|
.mainbox {
|
|
padding: .4rem .4rem 0rem .4rem;
|
|
}
|
|
|
|
.mainbox>ul {
|
|
margin-left: -.4rem;
|
|
margin-right: -.4rem;
|
|
}
|
|
|
|
.mainbox>ul>li {
|
|
float: left;
|
|
padding: 0 .4rem
|
|
}
|
|
|
|
.mainbox>ul>li {
|
|
width: 30%
|
|
}
|
|
|
|
.mainbox>ul>li:nth-child(2) {
|
|
width: 40%
|
|
}
|
|
|
|
.boxall {
|
|
width: 100%;
|
|
border: 1px solid #6481bb;
|
|
padding: 0 .3rem .15rem .3rem;
|
|
background: rgba(255, 255, 255, .04) url(../images/line.png);
|
|
background-size: 100% auto;
|
|
position: relative;
|
|
margin-bottom: .3rem;
|
|
z-index: 10;
|
|
text-align: center;
|
|
box-shadow: 0 0 6px rgba(2,166,181,0.7);
|
|
}
|
|
|
|
.boxall:before, .boxall:after {
|
|
position: absolute;
|
|
width: .1rem;
|
|
height: .1rem;
|
|
content: "";
|
|
border-top: 2px solid #02a6b5;
|
|
top: 0;
|
|
}
|
|
|
|
.boxall:before, .boxfoot:before {
|
|
border-left: 2px solid #02a6b5;
|
|
left: 0;
|
|
}
|
|
|
|
.boxall:after, .boxfoot:after {
|
|
border-right: 2px solid #02a6b5;
|
|
right: 0;
|
|
}
|
|
|
|
.alltitle {
|
|
font-size: .18rem;
|
|
color: #fff;
|
|
width: auto;
|
|
padding: 0px 16px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: .4rem;
|
|
border: 1px solid rgba(255, 255, 255, .2);
|
|
border-top: 1px solid transparent;
|
|
border-bottom-right-radius:10px;
|
|
border-bottom-left-radius:10px;
|
|
}
|
|
|
|
.boxfoot {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.boxfoot:before, .boxfoot:after {
|
|
position: absolute;
|
|
width: .1rem;
|
|
height: .1rem;
|
|
content: "";
|
|
border-bottom: 2px solid #02a6b5;
|
|
bottom: 0;
|
|
}
|
|
.focus{
|
|
position: relative;
|
|
}
|
|
.focus:after{
|
|
position: absolute;
|
|
font-size: .11rem;
|
|
color: #fff;
|
|
line-height: .12rem;
|
|
top: 0.12rem;
|
|
left: 0.35rem;
|
|
background: #cf2a61;
|
|
border-radius: .13rem;
|
|
text-align: center;
|
|
width: .13rem;
|
|
height: .13rem;
|
|
content: "3";
|
|
}
|
|
.news-wrap{
|
|
width: 100%;
|
|
height: 0.2rem;
|
|
overflow: hidden;
|
|
}
|
|
.news{
|
|
width: 100%;
|
|
margin-top: 0;
|
|
}
|
|
.news li{
|
|
width: 100%;
|
|
height: 0.2rem;
|
|
}
|
|
.news li h2{
|
|
width: auto;
|
|
color: #f20a5f;
|
|
text-align: center;
|
|
height: 0.2rem;
|
|
font-weight: normal;
|
|
font-size: 0.17rem;
|
|
line-height: 0.2rem;
|
|
/* display: inline; */
|
|
|
|
}
|
|
/* 进度条 */
|
|
.percent{
|
|
width: 100%;
|
|
height: 0.15rem;
|
|
background-color: rgba(255,255,255,0.05);
|
|
margin-top: 10px;
|
|
border-radius: .15rem;
|
|
box-shadow: 1px 1px 8px #02a6b5;
|
|
}
|
|
.percent div{
|
|
width: 87%;
|
|
color: #fff;
|
|
text-align: center;
|
|
height: 0.15rem;
|
|
border-radius: .15rem;
|
|
box-shadow: 1px 1px 8px #02a6b5;
|
|
background: linear-gradient(to right, #2af1eb , #1395eb);
|
|
}
|
|
/**********/
|
|
.bar {
|
|
background: rgba(101, 132, 226, .1);
|
|
padding: .15rem;
|
|
}
|
|
|
|
.barbox li, .barbox2 li {
|
|
width: 50%;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.barbox:before, .barbox:after {
|
|
position: absolute;
|
|
width: .3rem;
|
|
height: .1rem;
|
|
content: "";
|
|
}
|
|
|
|
.barbox:before {
|
|
border-left: 2px solid #02a6b5;
|
|
left: 0;
|
|
border-top: 2px solid #02a6b5;
|
|
}
|
|
|
|
.barbox:after {
|
|
border-right: 2px solid #02a6b5;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-bottom: 2px solid #02a6b5;
|
|
}
|
|
|
|
.barbox li:first-child:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 50%;
|
|
width: 1px;
|
|
background: rgba(255, 255, 255, .2);
|
|
right: 0;
|
|
top: 25%;
|
|
}
|
|
|
|
.barbox {
|
|
border: 1px solid rgba(25, 186, 139, .17);
|
|
position: relative;
|
|
}
|
|
|
|
.barbox li {
|
|
font-size: .4rem;
|
|
color: #ffeb7b;
|
|
padding: .05rem 0;
|
|
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
|
|
font-weight: bold;
|
|
}
|
|
.barbox li:nth-of-type(2):before{
|
|
content: '¥: ';
|
|
}
|
|
.map {
|
|
position: relative;
|
|
height: 7.2rem;
|
|
z-index: 9;
|
|
}
|
|
|
|
.map4 {
|
|
width: 200%;
|
|
height: 7rem;
|
|
position: relative;
|
|
left: -50%;
|
|
/* top: 4%; */
|
|
margin-top: -0.4rem;
|
|
z-index: 5;
|
|
}
|
|
|
|
.map1, .map2, .map3 {
|
|
position: absolute;
|
|
}
|
|
|
|
.map1 {
|
|
width: 6.43rem;
|
|
z-index: 2;
|
|
top: .45rem;
|
|
left: .4rem;
|
|
animation: myfirst2 15s infinite linear;
|
|
}
|
|
|
|
.map2 {
|
|
width: 5.66rem;
|
|
top: .85rem;
|
|
left: .77rem;
|
|
z-index: 3;
|
|
opacity: 0.2;
|
|
animation: myfirst 10s infinite linear;
|
|
}
|
|
|
|
.map3 {
|
|
width: 5.18rem;
|
|
top: 1.07rem;
|
|
left: 1.13rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sycm {
|
|
width: 100%;
|
|
/* padding: 2px 0; */
|
|
}
|
|
|
|
/* 运营管理分析 */
|
|
.sycm .customer{
|
|
height: calc(2.5rem - 59px);
|
|
color: #0082d2;
|
|
text-align: center;
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
.sycm .customer .customer-child{
|
|
height: calc((2.5rem - 59px)/2);
|
|
}
|
|
.sycm .customer .customer-child img{
|
|
width: 0.6rem;
|
|
margin-top: 5px;
|
|
}
|
|
.sycm .customer .customer-child div{
|
|
color: #fff;
|
|
margin-top: 5px;
|
|
|
|
}
|
|
.sycm .customer .title{
|
|
color: #0082d2;
|
|
height: 0.16rem;
|
|
}
|
|
.sycm .customer .table-wrap{
|
|
width: 100%;
|
|
height: calc(2.4rem - 59px);
|
|
overflow: hidden;
|
|
|
|
}
|
|
.sycm .customer table tr{
|
|
height: 0.2rem;
|
|
}
|
|
.sycm .customer table td{
|
|
margin-top: 0.1rem;
|
|
color: #456ba8;
|
|
}
|
|
.sycm .customer table tr:nth-of-type(1) td{
|
|
color: #9aa77b;
|
|
}
|
|
.sycm .customer table tr:nth-of-type(2) td{
|
|
color: #67bcd4;
|
|
}
|
|
.sycm .customer table tr:nth-of-type(3) td{
|
|
color: #9cb7cf;
|
|
}
|
|
|
|
@keyframes myfirst2 {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@keyframes myfirst {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(-359deg);
|
|
}
|
|
} |