.topContent { padding: 0.08rem 0.12rem; margin: 0.16rem 0; color: #1c50b3; font-size: 0.28rem; .titleContent { display: flex; align-items: center; justify-content: space-between; .time { // font-size: 0.2rem; color: #6e6e6e; } .iconLeft { width: 0.38rem; height: 0.38rem; background: url('@/assets/smartOps/icon06.png') no-repeat center; background-size: 100% 100%; } .iconRight { .iconLeft; margin-left: 0.2rem; background: url('@/assets/smartOps/icon07.png') no-repeat center; background-size: 100% 100%; } } .middle { margin: 0.1rem 0; display: flex; align-items: center; justify-content: center; .left { position: relative; .in { width: 2.12rem; height: 2.12rem; background: url('@/assets/smartOps/icon04.png') no-repeat center; background-size: 100% 100%; animation-name: scaleUp; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } .out { position: absolute; left: 0; top: 0; width: 2.12rem; height: 2.12rem; background: url('@/assets/smartOps/icon05.png') no-repeat center; background-size: 100% 100%; animation-name: spin; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; } } .right { display: flex; flex-direction: column; align-items: flex-end; .item { width: 5.85rem; height: 0.52rem; white-space: nowrap; margin-bottom: 0.1rem; background: url('@/assets/smartOps/icon01.png') no-repeat center; background-size: 100% 100%; line-height: 0.52rem; } .item1 { .item; padding-left: 0.96rem; } .item2 { .item; width: 5.27rem; padding-left: 0.4rem; background-image: url('@/assets/smartOps/icon02.png'); } .item3 { .item; width: 5.27rem; padding-left: 0.4rem; background-image: url('@/assets/smartOps/icon03.png'); } .item4 { .item; margin-bottom: 0; padding-left: 0.96rem; background-image: url('@/assets/smartOps/icon08.png'); } } } .text { padding: 0.08rem 0.2rem; line-height: 0.24rem; font-size: 0.24rem; color: #4a90e2; // text-align: center; } } .btnDate { margin-right: 0.2rem; font-size: 0.2rem; line-height: 0.2rem; padding: 0.1rem; height: auto !important; // background-color: #2f4d83; } .btnSelect { .btnDate; background-color: #329bfe; } .anaBtn { font-size: 0.12rem !important; padding: 0.06rem; line-height: 0.12rem; height: auto !important; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes scaleUp { 0% { transform: translate(0rem, 0rem); } 25% { transform: translate(0rem, -0.05rem); } 75% { transform: translate(0rem, 0.05rem); } 100% { transform: translate(0rem, 0rem); } } .marginBottom { margin-bottom: 0.2rem; } .marginLeft { margin-left: 0.2rem; } .marginRight { margin-right: 0.2rem; } .searchContent { display: flex; align-items: center; margin-bottom: 0.2rem; color: #4a4a4a; font-size: 0.24rem; white-space: nowrap; width: 100%; :global { .ant-select { margin: 0 0.25rem 0 0.1rem; } .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { height: 0.48rem; .ant-select-selection-search-input { height: 100%; } .ant-select-selection-placeholder, .ant-select-selection-item { line-height: 0.38rem; } } } } .timePicker { // background-color: #284e83; // width: 10rem; :global { .ant-picker-input { min-width: 1rem; } } } .form { width: 100%; margin-bottom: 0.14rem; display: flex; align-items: center; justify-content: space-between; :global { .ant-picker { font-size: 0.18rem; padding: 0.06rem 0.2rem; } .ant-form-item { line-height: normal; .ant-form-item-control-input { min-height: auto; } } } } .tableSelect { background: rgba(145, 192, 238, 0.16) !important; } .tabContent { :global { .ant-table-tbody > tr:nth-child(even) { background: inherit; } .ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-tbody > tr > td { font-size: 0.24rem; } } }