| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | @media screen and (max-width: 1280px) { |
| | | .box-card { |
| | | font-size: 15px; |
| | | width: 128px; |
| | | background: #00aaf1; |
| | | height: 117px; |
| | | text-align: center; |
| | | margin-right: 28px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 36px; |
| | | span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 31px; |
| | | } |
| | | } |
| | | .col-content { |
| | | margin-top: 39px !important; |
| | | } |
| | | .leftEchartTitle.qing { |
| | | right: 10px; |
| | | margin-top: 42px; |
| | | .block1 { |
| | | background: #73c0de; |
| | | margin-top: 11px; |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 100%; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 12px; |
| | | margin: 0px 3px 0px 3px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #73c0de; |
| | | font-size: 15px; |
| | | width: 45px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 12px; |
| | | color: #73c0de; |
| | | } |
| | | } |
| | | .leftEchartTitle.zhong { |
| | | right: 10px; |
| | | margin-top: 83px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 100%; |
| | | background: #fac858; |
| | | margin-top: 11px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 12px; |
| | | margin: 0px 3px 0px 3px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #fac858; |
| | | font-size: 15px; |
| | | width: 45px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 12px; |
| | | color: #fac858; |
| | | } |
| | | } |
| | | .leftEchartTitle.lao { |
| | | right: 10px; |
| | | margin-top: 125px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 100%; |
| | | background: #91cc75; |
| | | margin-top: 11px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 12px; |
| | | margin: 0px 3px 0px 3px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #91cc75; |
| | | font-size: 15px; |
| | | width: 45px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 12px; |
| | | color: #91cc75; |
| | | } |
| | | } |
| | | } |
| | | // 适配分辨率1600*900 |
| | | @media screen and (min-width: 1281px)and (max-width: 1600px) { |
| | | .box-card { |
| | | font-size: 15px; |
| | | width: 128px; |
| | | background: #00aaf1; |
| | | height: 117px; |
| | | text-align: center; |
| | | margin-right: 66px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 36px; |
| | | span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 31px; |
| | | } |
| | | } |
| | | .leftEchartTitle.qing { |
| | | right: 37px; |
| | | margin-top: 42px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | background: #73c0de; |
| | | margin-top: 10px; |
| | | border-radius: 100%; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #73c0de; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #73c0de; |
| | | } |
| | | } |
| | | .leftEchartTitle.zhong { |
| | | right: 37px; |
| | | margin-top: 83px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | background: #fac858; |
| | | margin-top: 10px; |
| | | border-radius: 100%; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #fac858; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #fac858; |
| | | } |
| | | } |
| | | .leftEchartTitle.lao { |
| | | right: 37px; |
| | | margin-top: 125px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | background: #91cc75; |
| | | margin-top: 10px; |
| | | border-radius: 100%; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #91cc75; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #91cc75; |
| | | } |
| | | } |
| | | } |
| | | @media screen and (min-width: 1601px)and (max-width: 1920px) { |
| | | .box-card { |
| | | width: 150px; |
| | | background: #00aaf1; |
| | | height: 135px; |
| | | text-align: center; |
| | | margin-right: 66px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 40px; |
| | | span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 34px; |
| | | } |
| | | } |
| | | .leftEchartTitle.qing { |
| | | right: 37px; |
| | | margin-top: 42px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | background: #73c0de; |
| | | margin-top: 10px; |
| | | border-radius: 100%; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #73c0de; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #73c0de; |
| | | } |
| | | } |
| | | .leftEchartTitle.zhong { |
| | | right: 37px; |
| | | margin-top: 83px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | background: #fac858; |
| | | margin-top: 10px; |
| | | border-radius: 100%; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #fac858; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #fac858; |
| | | } |
| | | } |
| | | .leftEchartTitle.lao { |
| | | right: 37px; |
| | | margin-top: 125px; |
| | | .block1 { |
| | | width: 10px; |
| | | height: 10px; |
| | | background: #91cc75; |
| | | margin-top: 10px; |
| | | border-radius: 100%; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #91cc75; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #91cc75; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .page1 { |
| | | height: 100%; |
| | | width: 100%; |
| | |
| | | font-weight: 600; |
| | | } |
| | | } |
| | | .box-card { |
| | | width: 150px; |
| | | background: #00aaf1; |
| | | height: 135px; |
| | | text-align: center; |
| | | margin-right: 66px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 40px; |
| | | } |
| | | |
| | | .box-card span { |
| | | display: block; |
| | | width: 100%; |
| | | color: #fff; |
| | | } |
| | | .box-card span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 34px; |
| | | } |
| | | .rowTitle { |
| | | height: 40px; |
| | |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #2ec7c9; |
| | | } |
| | | } |
| | | .leftEchartTitle.qing { |
| | | right: 37px; |
| | | margin-top: 42px; |
| | | .block1 { |
| | | width: 30px; |
| | | height: 15px; |
| | | background: #73c0de; |
| | | margin-top: 7px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #73c0de; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #73c0de; |
| | | } |
| | | } |
| | | .leftEchartTitle.zhong { |
| | | right: 37px; |
| | | margin-top: 83px; |
| | | .block1 { |
| | | width: 30px; |
| | | height: 15px; |
| | | background: #fac858; |
| | | margin-top: 7px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #fac858; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #fac858; |
| | | } |
| | | } |
| | | .leftEchartTitle.lao { |
| | | right: 37px; |
| | | margin-top: 125px; |
| | | .block1 { |
| | | width: 30px; |
| | | height: 15px; |
| | | background: #91cc75; |
| | | margin-top: 7px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #91cc75; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #91cc75; |
| | | } |
| | | } |
| | | </style> |