liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

12.26 监控大屏

Browse Source
This commit is contained in:
jl-zhoujl2
2022-12-26 09:01:17 +08:00
parent d9a5f4c951
commit e30573e862
27 changed files with 3655 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

941
src/pages/ElecEvaluation/Monitor/style.less Normal file
View File

@ -0,0 +1,941 @@
@import '~antd/lib/style/themes/default.less';
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.screen-global {
width: 100%;
height: 100%;
background: url("~@/assets/monitor/background-3.jpg") left top no-repeat;
background-size: cover;
// background-color: #0a0c11;
.screen-wrapper {
height: 100vh;
width: calc(100vh * 16 / 9);
overflow: hidden;
margin: 0 auto;
position: relative;
z-index: 1;
.screen-main {
display: inline-block;
width: 1920px; //设计稿的宽度
height: 1080px; //设计稿的高度
transform-origin: 0 0;
position: absolute;
background: rgb(0, 0, 0);
// left: 50%;
}
}
.screen-bg-title {
position: absolute;
top: 38px;
z-index: 0;
.screen-bg-img {
width: 100%;
height: 11px;
}
}
}
.monitor-main {
height: 100%;
// background-color: #0a0c11;
background: url("~@/assets/monitor/background-3.jpg") left top no-repeat;
background-size: cover;
.monitor-title {
background: url("~@/assets/monitor/global-title-bg.png") left top no-repeat;
background-size: 100% 100%;
height: 114px;
width: 100%;
text-align: center;
&>span {
font-size: 38px;
font-weight: bold;
line-height: 72px;
letter-spacing: 3.2px;
text-indent: 3.2px;
color: #FFFFFF;
}
}
.monitor-flex {
width: 1860px;
// height: 100%;
margin: -24px auto 0;
.top-main {
width: 100%;
margin-bottom: 40px;
.monitor-top-main-flex {
margin-left: 80px;
margin-top: 20px;
}
.monitor-top-space-flex {
margin-left: 0;
margin-top: 20px;
display: flex;
justify-content: space-between;
.monitor-gauge {
width: 200px;
height: 100%;
text-align: center;
&>div>span {
font-size: 18px;
font-weight: normal;
line-height: 31px;
letter-spacing: 0px;
color: #FFFFFF;
}
}
}
.monitor-today-overview-width {
.line-overview-main {
padding: 18px 18px 12px 18px;
}
.line-overview-content {
width: 132px;
}
}
.monitor-top-space-top {
margin-top: 20px;
}
}
.top-main-bottom {
margin-bottom: 20px;
}
.screen-label-main {
height: 33.85px;
display: flex;
justify-content: flex-start;
.left-rect-1 {
width: 4px;
height: 33.85px;
opacity: 1;
background: #1B7EF2;
}
.right-rect-2 {
height: 33.85px;
background: #12304eb3;
margin-left: 2px;
opacity: 1;
width: calc(100% - 6px);
display: flex;
justify-content: space-between;
align-items: center;
.right-rect-icon {
height: 6.5px;
opacity: 1;
color: #29F1FA;
position: relative;
top: -2px;
margin-left: 4px;
}
.monitor-label {
font-size: 20px;
font-weight: normal;
line-height: 34px;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.87);
margin-left: 12px;
}
.monitor-label-right {
font-size: 16px;
font-weight: normal;
line-height: 31px;
letter-spacing: 0px;
color: #29F1FA;
margin-right: 24px;
}
}
}
.monitor-left-main {
margin-right: 16px;
.active-supplier {
margin-top: 10px;
height: 390px;
}
.scroll-table {
height: 320px;
margin-top: 20px;
margin-bottom: 20px;
}
.monitor-supplier-select-label {
font-size: 14px;
font-weight: normal;
line-height: 31px;
letter-spacing: 0px;
color: #FFFFFF;
}
}
.monitor-center-main {
margin: 0 8px;
.review-distribution {
height: 540px;
// background-color: rgb(10, 36, 83);
background-clip: border-box;
margin-top: 20px;
margin-bottom: 20px;
filter: blur(0px);
}
.review-distribution-title {
height: 33.85px;
&>span {
font-size: 20px;
font-weight: normal;
line-height: 34px;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.87);
margin-left: 16px;
}
}
.bid-evaluation {
height: 170px;
background-clip: border-box;
filter: blur(0px);
.card-default-01 {
background-image: url('~@/assets/screen/default_pic01.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 120px;
margin-top: 20px;
position: relative;
.flex-center;
&>img {
height: 50%;
}
.card-text-orange {
font-family: "Microsoft Yahei", Arial, sans-serif;
font-size: 14px;
color: rgb(245, 166, 35);
font-weight: normal;
justify-content: center;
text-align: center;
position: absolute;
top: 2px;
left: 6px;
}
.card-text-green {
.card-text-orange;
color: rgb(126, 211, 33);
}
.card-text-purple {
.card-text-orange;
color: rgb(189, 16, 224);
}
}
.evaluation-text {
font-size: 16px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.87);
text-align: center;
margin-top: 12px;
}
}
}
.monitor-right-main {
margin-left: 16px;
.monitor-bid-opening {
background-clip: border-box;
filter: blur(0px);
margin-top: 20px;
margin-bottom: 20px;
.bid-opening-top {
height: 155px;
background-color: #12304e66;
padding: 18px 16px;
display: flex;
justify-content: flex-start;
align-items: center;
.bid-opening-text {
width: 70px;
text-align: center;
&>div:first-child {
font-size: 18px;
font-weight: 500;
line-height: 32px;
letter-spacing: 0px;
color: #FFFFFF;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
&>div:last-child {
font-size: 10px;
font-weight: normal;
line-height: 14px;
text-align: center;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.5);
margin-top: 4px;
}
}
.bid-opening-card {
width: 152px;
height: 100%;
margin-left: 16px;
.flex-center;
&>div>div:first-child {
font-size: 14px;
// font-weight: bold;
line-height: 22px;
letter-spacing: 0px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
&>div>div:last-child {
font-size: 20px;
font-weight: 500;
line-height: 20px;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
}
}
.bid-opening-card-first {
background: #1B7EF2;
}
.bid-opening-card-second {
background: rgba(27, 126, 242, 0.6);
}
.bid-opening-card-third {
background: rgba(27, 126, 242, 0.3);
}
}
.bid-opening-end {
margin-top: 10px;
}
}
.tender-agent {
height: 390px;
margin-top: 10px;
}
}
.monitor-exception-card {
margin-top: 20px;
margin-bottom: 20px;
}
.monitor-tender-card {
margin-top: 20px;
}
.monitor-supplier-card {
margin-top: 20px;
text-align: right;
}
.monitor-category-style {
height: 350px;
}
.monitor-tender-map {
margin-top: 20px;
height: 690px;
}
.monitor-supplier-rank {
margin-top: 20px;
height: 760px;
}
}
}
.line-box-main {
box-sizing: border-box;
display: flex;
.card-icon {
height: 72px;
width: 72px;
z-index: 0;
}
.line-box-content {
margin-left: 16px;
}
.card-number {
font-size: 32px;
font-weight: bold;
line-height: 45px;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.87);
z-index: 0;
}
.card-title {
font-size: 20px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.64);
z-index: 0;
}
.card-unit {
margin-left: 8px;
}
}
.line-overview-main {
background: #00000A;
box-sizing: border-box;
border: 1px solid #1B7EF2;
box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
padding: 20px 18px;
display: flex;
align-items: center;
.line-overview-content {
width: 144px;
.overview-title {
height: 42px;
&>span {
font-size: 18px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0px;
color: #FFFFFF;
}
}
.overview-number {
font-size: 30px;
font-weight: normal;
line-height: 36px;
letter-spacing: 0px;
color: #29F1FA;
}
.overview-unit {
font-size: 12px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0px;
color: #29F1FA;
margin-left: 2px;
}
}
.overview-icon {
width: 65px;
height: 50px;
margin-left: 8px;
}
}
.line-progress-main {
background: #00000A;
box-sizing: border-box;
border: 1px solid #1B7EF2;
box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
padding: 12px 24px 8px 12px;
width: 243px;
.line-progress-top {
display: flex;
justify-content: space-around;
align-items: center;
.progress-title {
&>span {
font-size: 18px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0px;
color: #FFFFFF;
}
}
}
.line-progress-bottom {
display: flex;
justify-content: space-around;
margin-top: 10px;
.progress-bottom-title {
text-align: center;
&>span {
font-size: 14px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0px;
color: #1B7EF2;
}
}
.progress-bottom-number {
text-align: center;
margin-top: 4px;
&>span {
font-size: 20px;
font-weight: bold;
line-height: 16px;
letter-spacing: 0px;
color: #1B7EF2;
}
}
.progress-bottom-right {
&>span {
color: #29F1FA;
}
}
}
}
.monitor-scroll-table {
.ant-table {
background: #081a3066 !important;
}
.ant-table-container table>thead>tr:first-child th:first-child {
border-radius: 0;
}
.ant-table-container table>thead>tr:first-child th:last-child {
border-radius: 0;
}
.ant-table-tbody>tr.ant-table-row:hover>td {
background: #1b7ef266;
}
.monitor-table-header {
background: #045da866;
color: #fff;
font-size: 18px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
border: 0;
padding: 12px 8px !important;
}
.monitor-table-content {
.monitor-table-header;
font-size: 14px;
background: #081a3066;
border-bottom: 1px solid #2384DD;
cursor: pointer;
}
::-webkit-scrollbar {
display: none;
}
.ant-table-cell-scrollbar {
display: none;
}
.ant-table-tbody>tr.ant-table-placeholder:hover>td {
background: transparent;
}
.ant-empty-description {
color: #FFFFFF;
}
.ant-table-tbody>tr>td {
border-bottom: 0;
}
}
.monitor-statistic-table {
.ant-table {
background: transparent !important;
}
.ant-table-container table>thead>tr:first-child th:first-child {
border-radius: 0;
}
.ant-table-container table>thead>tr:first-child th:last-child {
border-radius: 0;
}
.ant-table-tbody>tr.ant-table-row:hover>td {
background: #1b7ef2;
}
.monitor-table-header {
background: transparent;
color: #fff;
font-size: 14px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
border: 0;
padding: 8px !important;
}
.monitor-table-content {
.monitor-table-header;
background: transparent;
cursor: pointer;
}
.ant-table-thead>tr>th {
background-color: transparent;
font-size: 16px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0px;
padding: 8px !important;
border-bottom: 1px solid rgba(2, 86, 255, 0.6);
}
::-webkit-scrollbar {
display: none;
}
.ant-table-cell-scrollbar {
display: none;
}
.monitor-table-crown-1 {
height: 18px;
width: 18px;
background: url("~@/assets/monitor/vip-crown-1-fill.png") left top no-repeat;
line-height: 18px;
font-size: 12px;
color: #ffffff;
text-align: center;
display: inline-block
}
.monitor-table-crown-2 {
.monitor-table-crown-1;
background: url("~@/assets/monitor/vip-crown-2-fill.png") left top no-repeat;
}
.monitor-table-crown-3 {
.monitor-table-crown-1;
background: url("~@/assets/monitor/vip-crown-3-fill.png") left top no-repeat;
}
.monitor-table-index {
color: #0256FF;
}
.ant-table-tbody>tr.ant-table-placeholder:hover>td {
background: transparent;
}
.ant-empty-description {
color: #FFFFFF;
}
.ant-table-tbody>tr>td {
border-bottom: 0;
}
}
.monitor-stage-card {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 18px 16px 16px 20px;
gap: 40px;
background: rgba(27, 126, 242, 0.12);
.stage-left-img {
width: 179.18px;
height: 179.18px;
box-sizing: border-box;
padding: 10px;
.box-wrap {
--front-color: #1b7ef2;
--back-color: #1b7ef2;
--outer-border-color: #1b7ef2;
--outer-border-width: 4px;
--outer-padding: 4px;
--inner-background: transparent;
--water-height: 50%;
--wave-display: none;
--border-radius: 50%;
width: 100%;
height: 100%;
border: var(--outer-border-width) solid var(--outer-border-color);
padding: var(--outer-padding);
box-sizing: border-box;
border-radius: var(--border-radius);
}
.box {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: var(--border-radius);
/** 解决增加圆角后超出部分不隐藏bug */
z-index: 1;
overflow: hidden;
background-color: var(--inner-background);
}
/* 波纹填充区域 */
.fill-area {
position: absolute;
left: 0;
bottom: -123.33%;
width: 100%;
height: 100%;
transform: translateY(calc(0% - var(--water-height)));
background-color: var(--front-color);
}
.waves {
position: absolute;
left: 0;
bottom: 100%;
width: 200%;
stroke: none;
/* 解决水球图中间有一条线问题 */
box-shadow: 0 10px 4px 4px var(--front-color);
}
.front-wave {
fill: var(--front-color);
transform: translate(-50%, 0);
animation: front-wave-move 3s linear infinite;
}
.back-wave {
display: var(--wave-display);
fill: var(--back-color);
transform: translate(0, 0);
animation: back-wave-move 1.5s linear infinite;
}
@keyframes front-wave-move {
100% {
transform: translate(0, 0);
}
}
@keyframes back-wave-move {
100% {
transform: translate(-50%, 0);
}
}
/* 插槽内容样式 */
.slot-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.slot-font1 {
color: #fff;
font-size: 28px;
font-weight: bold;
position: relative;
left: 2px;
}
}
.stage-middle-content {
text-align: center;
&>span {
font-size: 20px;
font-weight: normal;
line-height: 22px;
letter-spacing: 0.8px;
color: #FFFFFF;
}
&>div {
font-size: 36px;
font-weight: normal;
line-height: 50px;
letter-spacing: 0px;
color: #129BFF;
margin-top: 8px;
}
}
.stage-right-content {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
height: 128px;
.stage-text {
.stage-pane {
display: inline-block;
width: 12px;
height: 12px;
opacity: 1;
}
.stage-title {
font-size: 16px;
font-weight: normal;
line-height: 22px;
letter-spacing: 0.8px;
color: #FFFFFF;
margin-left: 8px;
}
.stage-number {
font-size: 16px;
font-weight: normal;
line-height: 22px;
letter-spacing: 0.8px;
margin-left: 8px;
}
.stage-pane-blue {
background: #1B7EF2;
}
.stage-pane-green {
background: #29F0F9;
}
.stage-pane-yellow {
background: #FFD502;
}
.stage-number-blue {
color: #1B7EF2;
}
.stage-number-green {
color: #29F0F9;
}
.stage-number-yellow {
color: #FFD502;
}
}
}
}
.monitor-select-dropdown {
.ant-dropdown-menu {
background-color: #081a30;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
color: #FFFFFF;
}
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
background-color: #1b7ef2;
}
}
.monitor-select-btn {
outline: none;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
background-color: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
user-select: none;
touch-action: manipulation;
line-height: 1.5714285714285714;
height: 32px;
padding: 4px 15px;
border-radius: 6px;
&>span {
font-size: 14px;
color: #FFFFFF;
}
&:hover {
background-color: #12304e99;
}
&:active {
background-color: #12304ecc;
}
}