.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.24rem; height: 0.5rem; 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; :global { .ant-select { margin: 0 0.4rem 0 0.1rem; // background-color: #284e83; } } } .timePicker { // background-color: #284e83; } .form { width: 100%; margin-bottom: 0.14rem; display: flex; align-items: center; justify-content: space-between; :global { .ant-picker { background: #2f4d83; .ant-picker-input > input { color: #ffffff; } .ant-picker-separator { color: #ffffff; } .ant-picker-suffix { color: #ffffff; } } } } body .formDropDown :global { .ant-picker-range-arrow::after { background: #2f4d83; } .ant-picker-panel-container { background: #2f4d83; } .ant-picker-header { color: #ffffff; } table { background-color: #2f4d83; } .ant-picker-content th { color: white; } .ant-picker-cell { color: white; } } .tableSelect { background: rgba(145, 192, 238, 0.16) !important; } .tabContent { :global { .ant-table-tbody > tr:nth-child(even) { background: inherit; } } }