.title { display: flex; justify-content: space-between; align-items: center; font-size: 32px; color: #4a90e2; padding: 40px 20px; margin-top: 52px; background: #d9e7f9; box-shadow: 0px 0px 12px 7px rgba(40, 94, 120, 0.03); border-radius: 16px; span { color: #f5a623; } } .form { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .dateTabs { display: flex; border: 1px solid #d5d5d5; height: 60px; .dateTabsItem { width: 128px; text-align: center; cursor: pointer; border-right: 1px solid #d5d5d5; line-height: 60px; font-size: 24px; font-weight: 400; color: #4a4a4a; &:last-child { border-right: none; } &.active { background: #4a90e2; color: #fff; } } } .chartBox { padding-bottom: 40px; } .pageContent { :global { .ant-collapse { border: none !important; } .ant-collapse > .ant-collapse-item { border-radius: 8px; box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2); border: 1px solid #eee; background: #4a4a4a; padding: 0 30px; margin-bottom: 30px; > .ant-collapse-header { background: transparent; color: #4a4a4a; height: 108px; font-size: 28px; padding: 0; border-bottom: 1px solid transparent; display: flex; align-items: center; .ant-collapse-arrow { font-size: 28px; right: 0; color: #c0c2c8; } .ant-collapse-extra { position: absolute; right: 30px; } } } .ant-collapse-expand-icon { order: 0 !important; } .ant-collapse-content { padding: 0; border-top: none; } .ant-collapse-content-box { padding: 0 !important; } } }