252 lines
4.5 KiB
Plaintext
252 lines
4.5 KiB
Plaintext
body,
|
|
html {
|
|
width: 100%;
|
|
height: 99%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-image: url(../img/bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
height: 9%;
|
|
width: 100%;
|
|
}
|
|
|
|
.location {
|
|
width: 30%;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
text-indent: 3px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
color: #ffffff;
|
|
letter-spacing: 2px;
|
|
text-indent: 90px;
|
|
width: 40%;
|
|
}
|
|
|
|
.date {
|
|
display: flex;
|
|
width: 30%;
|
|
color: #ffffff;
|
|
align-items: center;
|
|
justify-content: end;
|
|
letter-spacing: 2px;
|
|
text-indent: 15px;
|
|
}
|
|
|
|
.map-container {
|
|
position: relative;
|
|
height: 88%;
|
|
}
|
|
|
|
.full-screen-map {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 99%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
/* 确保图片覆盖全屏 */
|
|
z-index: 1;
|
|
/* 确保图片在侧边栏下方 */
|
|
}
|
|
|
|
.sidebar {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
z-index: 2;
|
|
/* 确保侧边栏在图片上方 */
|
|
/* background: rgba(0,36,61, 0.85); */
|
|
/* background: rgba(255, 255, 255, 0.7); */
|
|
/* 半透明背景以便看到地图 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* 垂直居中内容 */
|
|
justify-content: center;
|
|
/* 水平居中内容 */
|
|
padding: 20px;
|
|
/* 内边距 */
|
|
}
|
|
|
|
.left {
|
|
left: 0;
|
|
width: 20%;
|
|
background: linear-gradient(to right, #002032, transparent);
|
|
/* 宽度可以根据需要调整 */
|
|
}
|
|
|
|
.left-top {
|
|
height: 36%;
|
|
width: 100%;
|
|
}
|
|
|
|
.left-conter {
|
|
margin-top: 1%;
|
|
height: 36%;
|
|
width: 100%;
|
|
}
|
|
|
|
.left-bottom {
|
|
margin-top: 1%;
|
|
height: 25%;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
/* 使用Flexbox布局 */
|
|
display: flex;
|
|
justify-content: center;
|
|
/* 水平居中 */
|
|
align-items: center;
|
|
/* 垂直居中 */
|
|
height: 100vh;
|
|
/* 视口高度 */
|
|
width: 100vw;
|
|
/* 视口宽度，但这里可能不需要，因为只关心高度 */
|
|
}
|
|
|
|
.vertical-name {
|
|
display: flex;
|
|
height: 8%;
|
|
width: 100%;
|
|
letter-spacing: 1px;
|
|
text-indent: 5px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.vertical-name-echarts {
|
|
height: 92%;
|
|
width: 100%;
|
|
}
|
|
|
|
.vh100 {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.vertical-line {
|
|
/* 宽度和背景色与之前相同 */
|
|
width: 4px;
|
|
background-color: #00A5FF;
|
|
/* 竖线的高度可以是100%，这样它就会占据整个容器的高度 */
|
|
height: 20px;
|
|
}
|
|
|
|
.installation-scale {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.scale-flex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.scale-flex-conter {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.scale-flex-conter-text-top {
|
|
color: #98A5AC;
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.scale-flex-conter-text-bottom {
|
|
font-size: 18px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.carbon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.carbon-top {
|
|
position: relative;
|
|
top: 15%;
|
|
font-size: 18px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.right {
|
|
right: 0;
|
|
width: 20%;
|
|
/* 宽度可以根据需要调整 */
|
|
background: linear-gradient(to left, #002032, transparent);
|
|
}
|
|
|
|
.right-top {
|
|
height: 33%;
|
|
width: 100%;
|
|
}
|
|
|
|
.right-conter {
|
|
margin-top: 1%;
|
|
height: 33%;
|
|
width: 100%;
|
|
}
|
|
|
|
.right-bottom {
|
|
margin-top: 1%;
|
|
height: 32%;
|
|
width: 100%;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
/* 取消默认的单元格边框间距 */
|
|
width: 100%;
|
|
height: 95%;
|
|
margin-top: 5%;
|
|
/* 可选，根据需求设置表格宽度 */
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
tr {
|
|
border: 1px solid #0076B9;
|
|
/* 设置每行的外边框 */
|
|
border-bottom: none;
|
|
/* 最后一行不需要底部边框，因为下一行会覆盖 */
|
|
background-color: #004269;
|
|
/* 初始背景色，第一行使用 */
|
|
}
|
|
|
|
td{
|
|
background-color: #002B46;
|
|
color: #6ACFFF;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
border: none;
|
|
/* 取消默认的单元格边框 */
|
|
padding: 8px;
|
|
/* 可选，设置单元格内边距 */
|
|
}
|
|
|
|
/* 最后一行需要手动添加一个底部边框 */
|
|
tr:last-child {
|
|
border-bottom: 1px solid #0076B9;
|
|
} |