155 lines
2.7 KiB
CSS
155 lines
2.7 KiB
CSS
/* .long-long {
|
|
background: url('../../../../assets/long-long.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
} */
|
|
|
|
.long-middle {
|
|
background: url('../../../assets/long-middle.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.long-short {
|
|
background: url('../../../assets/long-short.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.middle-long {
|
|
background: url('../../../assets/middle-middle.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.middle-full {
|
|
background: url('../../../assets/middle-long.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.middle-middle {
|
|
background: url('../../../assets/middle-middle-2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.middle-short {
|
|
/* background: url('../../../assets/middle-short.png') no-repeat; */
|
|
/* background: url('../../../assets/energy.png') no-repeat; */
|
|
background: url('../../../assets/bg-bottom-item.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
/*
|
|
* more...
|
|
*/
|
|
|
|
.graphBase {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* justify-content: flex-end;
|
|
align-items: center; */
|
|
position: relative;
|
|
padding: 24px;
|
|
}
|
|
|
|
.graphBaseTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.graphBaseTitle > img {
|
|
width: 24px;
|
|
}
|
|
|
|
.graphBaseTitle > h2 {
|
|
font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
|
|
BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
|
|
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
|
margin: 0;
|
|
margin-left: 6px;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
letter-spacing: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.graphBaseContent {
|
|
height: 1px;
|
|
flex: 1;
|
|
/* background: #fff3; */
|
|
}
|
|
|
|
.graphBaseDesc {
|
|
margin-left: 8px;
|
|
/* position: absolute;
|
|
top: 25px;
|
|
left: 150px; */
|
|
font-size: 19px;
|
|
color: #76fff9;
|
|
}
|
|
|
|
.graphBaseSwitch {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 258px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.graphBaseDate {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 24px;
|
|
color: #fff;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.radioGroup {
|
|
user-select: none;
|
|
}
|
|
|
|
.radioGroup * {
|
|
border: none !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.radioGroup *:focus-within {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.radioGroup *::before {
|
|
width: 0 !important;
|
|
}
|
|
|
|
.switchLabel {
|
|
color: white;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.legend {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 360px;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.legendItem {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.lengedItemPrefix {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
margin-right: 4px;
|
|
}
|