update at 2026-01-14 16:54:50
This commit is contained in:
douboer@gmail.com
245
src/App.vue
245
src/App.vue
@@ -599,8 +599,8 @@ const addTop2Animation = () => {
|
|||||||
|
|
||||||
.top2-scale {
|
.top2-scale {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(1296px * var(--top2-scale));
|
width: calc(1438px * var(--top2-scale));
|
||||||
height: calc(692px * var(--top2-scale));
|
height: calc(832px * var(--top2-scale));
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -608,72 +608,71 @@ const addTop2Animation = () => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 1296px;
|
width: 1438px;
|
||||||
height: 692px;
|
height: 832px;
|
||||||
background: #2543a5;
|
background: #2543a5;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: scale(var(--top2-scale));
|
transform: scale(var(--top2-scale));
|
||||||
transform-origin: top left;
|
transform-origin: top left;
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.top2-header {
|
gap: 16px;
|
||||||
position: absolute;
|
padding: 16px;
|
||||||
left: 16px;
|
|
||||||
top: 16px;
|
|
||||||
width: 1264px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 16px;
|
|
||||||
background: #e5e5e5;
|
|
||||||
border: 0.297px solid #9fbaff;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top2-header {
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(229, 229, 229, 0);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.top2-title {
|
.top2-title {
|
||||||
position: absolute;
|
|
||||||
left: 516.1px;
|
|
||||||
top: 7.78px;
|
|
||||||
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
font-size: 28.491px;
|
font-size: 32px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #2543a5;
|
color: #f9d1b0;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-content {
|
.top2-content {
|
||||||
position: absolute;
|
flex: 1;
|
||||||
left: 16px;
|
display: flex;
|
||||||
top: 82px;
|
gap: 16px;
|
||||||
width: 1264px;
|
|
||||||
height: 594px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-left-col {
|
.top2-left-col {
|
||||||
position: absolute;
|
width: 314.937px;
|
||||||
left: 0;
|
height: 734px;
|
||||||
top: 26.055px;
|
display: flex;
|
||||||
width: 232.377px;
|
flex-direction: column;
|
||||||
height: 541.889px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-center-col {
|
.top2-center-col {
|
||||||
position: absolute;
|
|
||||||
left: 248.377px;
|
|
||||||
top: 25.15px;
|
|
||||||
width: 744.126px;
|
width: 744.126px;
|
||||||
height: 543.699px;
|
height: 734px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-right-col {
|
.top2-right-col {
|
||||||
position: absolute;
|
width: 314.937px;
|
||||||
left: 1008.503px;
|
height: 734px;
|
||||||
top: 25.907px;
|
display: flex;
|
||||||
width: 232.377px;
|
flex-direction: column;
|
||||||
height: 542.186px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-outline {
|
.panel-outline {
|
||||||
position: absolute;
|
position: relative;
|
||||||
border: 0.297px solid #f0e2e2;
|
border: 0.297px solid #f0e2e2;
|
||||||
border-radius: 10.684px;
|
border-radius: 10.684px;
|
||||||
background: rgba(217, 217, 217, 0);
|
background: rgba(217, 217, 217, 0);
|
||||||
@@ -681,61 +680,126 @@ const addTop2Animation = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.panel-left-top {
|
.panel-left-top {
|
||||||
left: 0;
|
width: 314.937px;
|
||||||
top: 0;
|
height: 234px;
|
||||||
width: 232.377px;
|
}
|
||||||
height: 259.977px;
|
|
||||||
|
.panel-left-middle {
|
||||||
|
width: 314.937px;
|
||||||
|
height: 234px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-left-bottom {
|
.panel-left-bottom {
|
||||||
left: 0;
|
width: 314.937px;
|
||||||
top: 275.977px;
|
height: 234px;
|
||||||
width: 232.377px;
|
|
||||||
height: 265.912px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-right-top {
|
.panel-right-top {
|
||||||
left: 0;
|
width: 314.937px;
|
||||||
top: 0;
|
height: 359px;
|
||||||
width: 232.377px;
|
|
||||||
height: 259.977px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-right-bottom {
|
.panel-right-bottom {
|
||||||
left: 0;
|
width: 314.937px;
|
||||||
top: 275.977px;
|
height: 359px;
|
||||||
width: 232.377px;
|
|
||||||
height: 266.209px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-center-bottom-left {
|
.panel-center-bottom-left {
|
||||||
left: 0;
|
width: 364.063px;
|
||||||
top: 0;
|
height: 187.992px;
|
||||||
width: 360.668px;
|
|
||||||
height: 175.692px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-center-bottom-right {
|
.panel-center-bottom-right {
|
||||||
left: 386.668px;
|
width: 364.063px;
|
||||||
top: 0;
|
height: 187.992px;
|
||||||
width: 357.216px;
|
|
||||||
height: 175.692px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-center {
|
.top2-center {
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 743.928px;
|
width: 743.928px;
|
||||||
height: 352.007px;
|
height: 333.004px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-bottom-row {
|
.top2-bottom-row {
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 368.007px;
|
|
||||||
width: 744.126px;
|
width: 744.126px;
|
||||||
height: 175.692px;
|
height: 187.992px;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-cards {
|
||||||
|
height: 114px;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-card {
|
||||||
|
width: 180.032px;
|
||||||
|
height: 98px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(37, 67, 165, 0.51);
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-card-icon {
|
||||||
|
width: 51px;
|
||||||
|
height: 49px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-card-icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-card-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-card-label {
|
||||||
|
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-card-value {
|
||||||
|
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-card-sub {
|
||||||
|
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(191, 191, 191, 0.61);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2-subheader {
|
||||||
|
height: 51px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-wrapper.is-top2 {
|
.svg-wrapper.is-top2 {
|
||||||
@@ -752,45 +816,22 @@ const addTop2Animation = () => {
|
|||||||
|
|
||||||
.panel-label {
|
.panel-label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 20px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
font-size: 18.994px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
letter-spacing: 0.2px;
|
letter-spacing: 0.2px;
|
||||||
}
|
text-align: center;
|
||||||
|
width: 220px;
|
||||||
.label-metric-11 {
|
|
||||||
left: 61.73px;
|
|
||||||
top: 91.7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-metric-21 {
|
|
||||||
left: 61.73px;
|
|
||||||
top: 121.68px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-metric-22 {
|
|
||||||
left: 132.11px;
|
|
||||||
top: 76.27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-metric-23 {
|
|
||||||
left: 126.11px;
|
|
||||||
top: 76.27px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-alarm {
|
.label-alarm {
|
||||||
left: 78.35px;
|
|
||||||
top: 18.7px;
|
|
||||||
color: #f02525;
|
color: #f02525;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-fault {
|
|
||||||
left: 78.35px;
|
|
||||||
top: 22.85px;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-wrapper :deep(svg) {
|
.svg-wrapper :deep(svg) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user