修改模板

src/pages/Storeboard/index.css

-.kb-container {
-  width: 100%;
-  height: calc(100vh - 98px) !important;
-  background-color: rgba(26, 32, 44);
-}
-.kb-container header {
-  height: 64px;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-.kb-container header h2 {
-  color: aliceblue;
-  font-weight: 600;
-  font-size: 30px;
-  text-shadow: 1px 1px 2px white;
-}
-.kb-container header > div {
-  flex: 1;
-}
-.kb-container .kb-content {
-  height: calc(100% - 64px);
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-}
-.kb-container .kb-content .Left {
-  width: 33.33%;
-}
-.kb-container .kb-content .Left .unit {
-  flex: 1;
-}
-.kb-container .kb-content .Center {
-  flex: 2;
-}
-.kb-container .kb-content .Center > .unit:first-child {
-  flex: 2;
-  display: flex;
-  flex-direction: row;
-}
-.kb-container .kb-content .Center > .unit:first-child > div:first-child {
-  flex: 1;
-  height: 100%;
-}
-.kb-container .kb-content .Center > .unit:first-child > div:last-child {
-  flex: 3;
-}
-.kb-container .kb-content .Center > .unit:last-child {
-  flex: 1;
-}
-.kb-container .kb-content .Right {
-  flex: 1;
-}
-.kb-container .kb-content .Right > .unit:first-child {
-  flex: 2;
-}
-.kb-container .kb-content .Right > .unit:nth-child(2) {
-  flex: 2;
-}
-.kb-container .kb-content .Right > .unit:last-child {
-  flex: 1;
-}
-.kb-container .kb-content .Left,
-.kb-container .kb-content .Center,
-.kb-container .kb-content .Right {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.kb-container .kb-content .unit {
-  background-color: rgba(49, 60, 77, 0.8);
-  border-radius: 20px;
-  margin: 8px;
-  padding: 8px;
-}
-.kb-container .data-content {
-  height: 100%;
-  width: 100%;
-}
-.kb-container .data-content .content-title {
-  width: 100%;
-  height: 48px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-.kb-container .data-content .content-title span {
-  flex: 1;
-  color: #fff;
-  text-align: center;
-  font-size: 14px;
-}
-.kb-container .content-charts {
-  width: 100%;
-  height: calc(100% - 32px);
-}
-.kb-container .content-header {
-  height: 32px;
-  width: 100%;
-  border-bottom: 1px solid;
-  border-image: linear-gradient(to left, rgba(255, 255, 255, 0.1) 10%, rgba(177, 95, 231, 0.637) 50%, #00bbf2 100%) 2 2 2 2;
-  color: #fff;
-  font-size: 18px;
-}
-.kb-container .content-div {
-  height: calc(100% - 32px);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-.kb-container .content-div > div {
-  flex: 1;
-  margin: 12px 24px;
-  background-position: 0 0;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0 20px;
-  align-items: center;
-}
-.kb-container .content-div > div img {
-  width: 34px;
-  height: 34px;
-}
-.kb-container .content-div > div p {
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-  display: block;
-  width: 30px;
-}
-.kb-container .content-div > div span {
-  font-size: 35px;
-  color: #fff;
-  font-weight: 600;
-  text-shadow: 1px 1px 2px #fff;
-}
-.kb-container .content-div > div:nth-child(1) {
-  background-image: url('../../../public/img/cover1.png');
-}
-.kb-container .content-div > div:nth-child(2) {
-  background-image: url('../../../public/img/cover2.png');
-}
-.kb-container .content-div > div:nth-child(3) {
-  background-image: url('../../../public/img/cover3.png');
-}
-.kb-container .content-div > div:nth-child(4) {
-  background-image: url('../../../public/img/cover3.png');
-}
-.kb-container .dv-scroll-board {
-  background-image: var(--bgUrl--);
-  background-position: 0 0;
-  background-size: 100% 100%;
-  height: calc(100% - 80px);
-  background-color: transparent;
-}
-.kb-container .dv-scroll-board .row {
-  width: 100%;
-  height: 100%;
-}
-.kb-container .dv-scroll-board .row-item {
-  background-color: transparent !important;
-  text-align: center;
-  width: 100%;
-}
-.kb-container .realTime {
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51)), linear-gradient(176deg, #77F7F7 -1054%, rgba(145, 143, 220, 0.94) 128%, #313C4D 1124%);
-}
-.kb-container .realTime > div:last-child {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-  justify-self: center;
-}
-.kb-container .realTime .realTime-content {
-  width: 200px;
-  height: 70px;
-  background: #1A202C;
-  border-radius: 11px;
-  box-shadow: inset 1px 1px 2px 1px rgba(255, 255, 255, 0.3);
-  text-align: center;
-  line-height: 70px;
-  margin-right: 10px;
-}
-.kb-container .realTime .realTime-content span {
-  color: #1FDBDB;
-  font-size: 25px;
-  font-weight: 600;
-}
-.kb-container .jk-content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 500px;
-  padding: 12px 0px 24px 24px;
-}
-.kb-container .jk-content .ant-carousel {
-  width: 100% ;
-  height: 100%;
-}
-.kb-container .jk-content .jk-content-unit {
-  width: 500px;
-  padding: 16px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin-left: 6px;
-  gap: 2px;
-  height: 500px;
-}
-.kb-container .jk-content .jk-content-unit .jk-statusBottom {
-  width: 100%;
-  position: absolute;
-  top: 1;
-  height: 100%;
-}
-.kb-container .jk-content .statusDiv {
-  height: auto;
-  flex: 9%;
-  background-color: #00bbf2;
-  border: 1px red;
-  margin: 1px;
-}
-.kb-container .jk-content .statusLine {
-  width: 100%;
-  background-color: green;
-  height: 10px;
-}
-.kb-container .jk-content .jk-status {
-  height: 10px;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-}
-.kb-container .jk-content .statusLine {
-  border-radius: 32px;
-}
-.kb-container .jk-content .bgline1 {
-  background: linear-gradient(90deg, #00bbf277 0%, #ffffff77 100%);
-}
-.kb-container .jk-content .bgline3 {
-  background: linear-gradient(90deg, #00bbf277 0%, #ffffff77 100%);
-}
-.kb-container .jk-content .jk-statusContent {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  position: relative;
-  height: 100%;
-}
-.kb-container .jk-content .jk-statusContent .jk-statusBottom {
-  position: absolute;
-  left: -18px;
-  height: calc(100% - 10px);
-  display: flex;
-  flex-direction: column;
-}
-.kb-container .jk-content .jk-statusContent .jk-statusBottom span {
-  flex: 1;
-  display: flex;
-  font-size: 16px;
-  flex-direction: column;
-  justify-content: center;
-  color: skyblue;
-  font-weight: 600;
-}
-.kb-container .numStatus {
-  position: absolute;
-  left: -20px;
-}
-.kb-container .numStatus .numberStatus {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-self: center;
-  height: auto;
-  width: 100%;
-}
-.kb-container .numStatus .numberStatus span {
-  color: #fff;
-  flex: 1;
-  height: auto;
-  text-align: center;
-  font-size: 16px;
-  padding-top: 6px;
-}
-.kb-container .statuslogo > div {
-  display: flex;
-  flex-direction: row;
-  color: #fff;
-  margin-right: 12px;
-  align-items: center;
-}
-.kb-container .statustitle {
-  width: 16px;
-  height: 13px;
-  border-radius: 2px;
-  margin-right: 3px;
-}