Files
number_zj/portal/Digitalgovernment/town/h5/home.less
2022-01-11 14:22:25 +08:00

969 lines
22 KiB
Plaintext

body {
background: #efefef;
// width: 100%;
}
* {
margin: 0;
padding: 0;
}
.yinying {
// height: 1080px;
background: rgba(0, 0, 0, 0.4);
width: 100%;
position: absolute;
top: 60px;
z-index: 96;
// visibility: visible;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
b {
font-weight: normal;
}
.homeTitle {
padding: 10px 0;
padding-left: 20px;
background: #299cff;
color: #ffffff;
// width: 1900px;
height: 40px;
line-height: 40px;
background: url(./image/banner.png) no-repeat;
background-size: 100% 114%;
overflow: hidden;
}
.container {
padding: 15px 20px;
z-index: -1;
.main {
margin-right: 200px;
.news {
display: flex;
// 三个标题
> div {
background: #ffffff;
box-shadow: 0px 0px 2px 2px #e2e2e2;
margin-right: 20px;
> :nth-child(1) {
display: flex;
align-items: center;
border-bottom: 1px solid #e1e1e1;
padding: 10px 0;
img {
height: 20px;
margin-right: 7px;
margin-left: 20px;
}
}
}
// 左边部分
> :nth-child(1) {
width: 40%;
.lunbotu {
position: relative;
padding: 10px 0;
// 两个箭头按钮
> :nth-child(1) {
width: 86%;
position: absolute;
left: 7%;
top: 50%;
transform: translateY(-25px);
display: flex;
justify-content: space-between;
> div {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
span {
display: block;
height: 10px;
width: 10px;
border-right: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg);
}
}
> :nth-child(1) {
span {
transform: rotate(135deg);
}
}
}
a {
display: block;
width: 100%;
text-align: center;
}
img {
width: 90%;
// height: 264px;
height: 332px;
}
// 底部文字和小白条
> :nth-child(3) {
bottom: 10px;
left: 5%;
color: white;
width: 90%;
height: 30px;
line-height: 30px;
position: absolute;
display: flex;
justify-content: space-between;
background: rgba(0, 0, 0, 0.7);
// right: 50px;
.linkTitle {
margin-left: 10px;
width: 60%;
p {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:nth-child(n + 2) {
display: none;
}
}
// 三个小白条
> :nth-child(2) {
position: absolute;
right: 10px;
left: 70%;
top: 50%;
transform: translateY(-2px);
display: flex;
justify-content: space-between;
align-items: center;
span {
width: 32%;
max-width: 50px;
height: 4px;
border-radius: 3px;
background: #777777;
display: inline-block;
}
}
}
.lunbotuColor {
background: #ffffff !important;
}
}
}
.middle {
width: 30%;
> span {
display: block;
white-space: nowrap;
width: 90%;
margin: 15px auto;
padding: 10px 0;
padding-left: 20px;
overflow: hidden;
text-overflow: ellipsis;
color: #797979;
font-size: 14px;
}
> span:nth-child(odd) {
background: #f1f5fe;
}
> span:nth-child(even) {
background: #fbf8f4;
}
}
.right {
width: 30%;
> :nth-child(n + 2) {
text-decoration: none;
display: block;
> div {
margin: 12px 20px 5px;
height: 70px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: black;
// img {
// width: 100%;
// // height: 50px;
// }
img {
height: 40px;
margin-right: 20px;
}
}
}
.pink {
border: 1px solid #fed199;
background: #fff3e5;
}
.blue {
border: 1px solid #ccdafe;
background: #ecf2fe;
}
}
}
.category {
background: #ffffff;
margin-top: 20px;
margin-right: 20px;
> :nth-child(1) {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e1e1e1;
img {
height: 20px;
margin-left: 20px;
margin-right: 7px;
}
}
> :nth-child(2) {
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px 0;
position: relative;
a,
div {
display: block;
width: 20%;
cursor: pointer;
}
img {
// height: 100px;
width: 100%;
}
// div {
// position: absolute;
// width: 100%;
// top: 50%;
// left: 0;
// display: flex;
// justify-content: space-around;
// align-items: center;
// height: 30px;
// transform: translateY(-15px);
// color: white;
// span {
// text-align: center;
// font-size: 20px;
// margin-left: -100px;
// font-weight: bold;
// font-size: 22px;
// }
// }
}
}
.core {
// display: none;
background: #ffffff;
margin-top: 20px;
margin-right: 20px;
box-shadow: 0 0 2px 2px #e6e6e6;
// width: 100%;
> :nth-child(1) {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e1e1e1;
img {
height: 20px;
margin-right: 7px;
margin-left: 20px;
}
}
b {
font-size: 26px;
color: black;
font-weight: normal;
}
.echartTitle {
display: flex;
align-items: center;
color: #797979;
> div {
display: flex;
align-items: center;
margin-right: 20px;
// width: 200px;
padding: 10px 0;
padding-right: 20px;
> :nth-child(1) {
display: none;
}
img {
height: 20px;
margin-left: 20px;
margin-right: 5px;
}
}
}
.fourPage {
// position: relative;
width: 100%;
}
.echartArea {
display: flex;
justify-content: space-between;
background: #f2f2f2;
padding: 10px 20px;
padding-bottom: 20px;
// display: none;
box-shadow: 0 0 2px 2px #e6e6e6;
> div {
width: 32%;
background: #ffffff;
h4 {
padding: 10px 0;
padding-left: 20px;
border-bottom: 1px solid #e1e1e1;
}
> div {
.flex {
justify-content: left;
padding-left: 20px;
margin-top: 10px;
> span {
width: 50%;
color: #797979;
}
b {
font-size: 26px;
font-weight: normal;
color: black;
}
i {
font-style: normal;
color: #2f9eff;
}
}
> :nth-child(3) {
// width: 500px;
width: 96%;
height: 300px;
text-align: center;
margin: 20px auto 0;
}
}
}
}
.cityBuild {
display: flex;
justify-content: space-between;
background: #f2f2f2;
padding: 10px 20px;
padding-bottom: 20px;
display: none;
box-shadow: 0 0 2px 2px #e6e6e6;
// width: 100%;
h3 {
padding: 10px 0;
padding-left: 20px;
border-bottom: 1px solid #e1e1e1;
}
h4 {
padding: 10px 0;
border-bottom: 1px solid #f5eaea;
}
b {
font-size: 26px;
color: black;
font-weight: normal;
}
> div {
width: 32%;
background: #ffffff;
}
.left {
.box {
padding-left: 10px;
margin: 10px 10px 0;
padding-bottom: 10px;
div {
padding: 20px 0;
}
li {
padding: 10px 0;
list-style: none;
&::before {
content: "●";
color: #1492ff;
margin-right: 5px;
}
}
ul {
li:nth-child(even) {
margin-bottom: 15px;
}
}
}
}
.middle {
.flex {
padding-left: 20px;
> div {
width: 50%;
}
span {
display: block;
margin: 10px 0;
color: #797979;
}
b {
margin-right: 10px;
}
i {
font-style: normal;
color: #269bff;
}
}
.echart01 {
margin-top: 40px !important;
height: 300px;
// width: 400px;
width: 90%;
margin: 0 auto;
}
p {
padding-left: 20px;
margin-top: 10px;
color: #797979;
}
// i {
// font-style: normal;
// }
.echart02 {
height: 100px;
// width: 400px;
width: 90%;
}
}
.right {
h4 {
padding-left: 30px;
border-bottom: none;
}
.flex {
padding-left: 20px;
> div {
width: 50%;
span {
display: block;
margin: 10px 0;
color: #797979;
}
b {
margin-right: 10px;
}
i {
font-style: normal;
color: #1492ff;
}
}
}
div[class^="echart"] {
// width: 500px;
width: 90%;
height: 260px;
margin: 0 auto;
}
.echart03 {
margin-bottom: 20px;
}
}
}
.townBuild {
display: flex;
justify-content: space-between;
background: #f2f2f2;
padding: 10px 20px;
padding-bottom: 20px;
display: none;
box-shadow: 0 0 2px 2px #e6e6e6;
h3 {
padding: 10px 0;
padding-left: 20px;
border-bottom: 1px solid #e1e1e1;
}
h4 {
padding: 20px 0;
border-bottom: 1px solid #e1e1e1;
}
div[class^="echart"] {
// width: 500px;
width: 95%;
height: 350px;
margin: 0 auto;
}
> div {
width: 32%;
background: #ffffff;
}
.flex {
padding-left: 20px;
> div {
width: 50%;
span {
display: block;
margin: 10px 0;
color: #797979;
}
b {
margin-right: 10px;
}
i {
font-style: normal;
color: #269bff;
}
}
}
.province {
> :nth-child(1) {
text-align: right;
padding-right: 30px;
margin-top: 20px;
span {
margin-right: -5px;
border: 1px solid #e6e6e6;
box-shadow: 0 0 1px 1px #e6e6e6;
padding: 10px;
display: inline-block;
border-radius: 2px;
}
.provinceTypeColor {
background: #1492ff;
color: #ffffff;
}
}
.echart05 {
// width: 500px;
width: 95%;
height: 500px;
margin-top: 100px;
}
.echart055 {
display: none;
// width: 500px;
width: 95%;
height: 500px;
margin-top: 100px;
}
.color {
background: #1492ff;
}
}
.middle {
h4 {
padding-left: 10px;
margin: 0 20px;
border-bottom: none;
}
}
.right {
h4 {
padding-left: 30px;
border-bottom: none;
}
li {
list-style: none;
color: #797979;
padding: 10px 0;
padding-left: 20px;
&::before {
content: "●";
color: #1492ff;
margin-right: 10px;
}
}
.echart08 {
// width: 500px;
width: 95%;
height: 600px;
margin: 20px auto 0;
}
}
}
.occupation {
background: #f2f2f2;
padding: 10px 10px;
padding-bottom: 20px;
display: none;
box-shadow: 0 0 2px 2px #e6e6e6;
// width: 100%;
h3 {
padding: 10px 0;
padding-left: 20px;
border-bottom: 1px solid #e1e1e1;
}
h4 {
padding: 20px 0;
padding-left: 20px;
// border-bottom: 1px solid #e1e1e1;
}
span {
display: block;
}
.topBox {
width: 100%;
> .flex {
width: 100%;
align-items: flex-start;
// height: 570px;
> .left {
width: 38%;
background: #ffffff;
div[class^="echart"] {
width: 90%;
// width: 520px;
// max-width: 90%;
height: 200px;
margin: 0 auto;
}
}
> .right {
width: 60%;
background: #ffffff;
// min-height: 570px;
> .flex {
align-items: flex-start;
padding-top: 10px;
position: relative;
.left {
width: 56%;
height: 310px;
margin-left: 10px;
// margin-right: 2px;
// box-shadow: 0 0 1px 1px #e1e1e1;
h4 {
// border-bottom: 1px solid #e1e1e1;
padding: 10px;
}
.echart012 {
width: 98%;
// width: 450px;
// max-width: 100%;
height: 300px;
margin: 0 auto;
}
}
> .right {
// height: 290px;
top: 10px;
bottom: 0;
left: 56%;
right: 10px;
position: absolute;
padding-left: 20px;
// margin-top: 15px;
// padding: 10px 20px 0;
// box-shadow: 0 0 1px 1px #e1e1e1;
background: #f8faff;
// margin-right: 10px;
b {
font-size: 26px;
color: #ffa333;
margin-right: 10px;
}
i {
font-style: normal;
color: #26b6ff;
}
> :nth-child(1) {
display: flex;
justify-content: space-between;
padding-right: 30px;
margin-top: 10px;
i {
color: #e17040 !important;
}
}
.smallBox {
display: flex;
justify-content: left;
color: #797979;
align-items: center;
background: #ffffff;
margin: 15px 10px 0 0px;
position: relative;
.echart013 {
width: 70px;
// width: 30%;
// max-width: 30%;
height: 200px;
}
ul {
// width: 70%;
position: absolute;
left: 70px;
right: 0;
li {
list-style: none;
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-left: 10px;
padding-right: 20px;
align-items: flex-end;
flex-wrap: wrap;
span {
margin-left: -13px;
&::before {
content: "● ";
color: #ffd199;
}
}
i {
color: #e25d26;
// margin-left: 30px;
}
}
}
}
}
}
h4 {
border-bottom: none;
padding: 10px;
padding-left: 20px;
}
table {
width: 95%;
margin: 0 auto 20px;
tr {
height: 40px;
}
th {
background: #3e9ef5;
color: white;
}
tbody {
text-align: center;
tr {
background: #f8f8f8;
}
}
}
.fourTitle {
display: flex;
justify-content: space-between;
padding: 0 20px;
span:nth-child(2) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
b {
font-size: 26px;
font-weight: normal;
margin-right: 10px;
}
i {
color: #26a8ff;
font-style: normal;
}
}
}
}
}
.bottomBox {
margin-top: 20px;
.flex {
align-items: flex-start;
> div {
width: 33%;
background: #ffffff;
padding-bottom: 20px;
> :nth-child(2) {
// width: 400px;
width: 90%;
margin: 10px auto 0;
height: 300px;
}
> :nth-child(3) {
padding: 20px 0;
text-align: center;
margin: 0 10px;
box-shadow: 0 0 1px 1px #e1e1e1;
}
}
}
}
}
}
}
.mainTitle {
position: absolute;
top: 73px;
right: 20px;
width: 200px;
height: 800px;
background: #ffffff;
box-shadow: 0px 0px 1px 1px #e2e2e2;
z-index: 97;
> :nth-child(1) {
display: flex;
align-items: center;
justify-content: left;
padding: 10px 0;
border-bottom: 1px solid #e1e1e1;
img {
height: 17px;
margin-right: 7px;
margin-left: 20px;
}
}
> ul > li {
list-style: none;
text-align: center;
padding: 10px 0;
> :nth-child(1) {
> :nth-child(1) {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 5px auto;
border-radius: 20%;
width: 40px;
background: #269bff;
img {
height: 20px;
// background: #269bff;
}
}
> :nth-child(2) {
text-align: center;
}
}
> :nth-child(2) {
display: none;
}
}
}
}
.sanjiao {
top: 200px;
position: absolute;
z-index: 99;
right: 225px;
display: none;
// height: 10px;
width: 0;
// background-color: turquoise;
border-top: 20px solid transparent;
border-left: 40px solid #ffffff;
border-bottom: 20px solid transparent;
// box-shadow: 0 0 2px 2px #ffffff;
}
.totalEchart {
> div {
z-index: 100;
left: 20px !important;
right: 240px !important;
width: unset !important;
}
}
.x {
font-size: 30px;
color: white;
position: absolute;
right: 240px;
z-index: 101;
display: none;
top: 73px;
cursor: pointer;
// text-align: center;
height: 20px;
line-height: 20px;
width: 20px;
// border-radius: 50%;
background: red;
span {
position: absolute;
top: -4px;
left: 2px;
}
}
.m4 {
width: 25%;
}
.m5 {
width: 30%;
}
.m62 {
width: 27.08%;
}
.m7 {
width: 6.01%;
}
.m8 {
width: 25.3%;
}
.m0 {
width: 83.5%;
}