@font-face {
  font-family: 'AliShuHei';
  src: url('../fonts/阿里妈妈数黑体.ttf') format('truetype');
}
/* 1. 基础重置：清除所有元素的内外边距 */
* {
  margin: 0;
  padding: 0;
  /* 可选：设置盒模型为 border-box，避免 padding 影响宽高 */
  box-sizing: border-box;
}
[v-cloak] {
  display: none;
}
.el-dropdown-menu {
  background-color: #0a2a30 !important;
  border: 1px solid rgba(0, 138, 150, 0.4) !important;
}
.el-dropdown-menu .el-dropdown-menu__item {
  color: #fff !important;
}
.el-dropdown-menu .el-dropdown-menu__item:hover {
  background-color: rgba(0, 229, 229, 0.15) !important;
  color: #00e5e5 !important;
}
.el-popper .popper__arrow {
  border-bottom-color: #0a2a30 !important;
}
.el-popper .popper__arrow::after {
  border-bottom-color: #0a2a30 !important;
}
/* 2. 清除列表默认样式（ul、ol、li） */
ul,
ol,
li {
  list-style: none;
  /* 去掉默认列表符号 */
}
body {
  overflow: hidden;
}
#app {
  width: 1920px;
  height: 1080px;
  background-image: url(../img/bg.png);
  background-size: 100% 100%;
  overflow: hidden;
}
.header {
  width: 100%;
  height: 83px;
  background-image: url("../img/header.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 33px;
}
.header .logo {
  display: flex;
  align-items: center;
}
.header .logo img {
  width: 49px;
  height: 42px;
  margin-right: 16px;
}
.header .logo p {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
}
.header .title {
  cursor: pointer;
}
.header .title .title-dropdown {
  font-family: 'AliShuHei';
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 42px;
  color: #fff;
}
.header .title .title-dropdown img {
  width: 24px;
  height: 16px;
}
.header .date {
  display: flex;
  align-items: center;
  color: #fff;
  gap: 24px;
  font-size: 24px;
}
.content {
  padding: 24px;
}
.content .content-top {
  height: 464px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.content .content-top .top-right,
.content .content-top .top-left {
  width: 455px;
  height: 100%;
  background: linear-gradient(#012229, #012e35);
}
.content .content-top .top-right .box-header,
.content .content-top .top-left .box-header {
  height: 42px;
  background-image: url(../img/box-header.png);
  background-repeat: no-repeat;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  padding-left: 36px;
  padding-top: 2px;
}
.content .content-top .top-center {
  flex: 1;
  height: 100%;
  background: linear-gradient(#012229, #012e35);
}
.content .content-top .top-center .box-header-max {
  height: 42px;
  background-image: url(../img/box-header-max.png);
  background-repeat: no-repeat;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  padding-left: 36px;
  padding-top: 2px;
}
.content .content-top .top-right .ccb,
.content .content-top .top-left .ccb {
  width: 414px;
  height: 90px;
  background-image: url(../img/chanchu.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 24px auto ;
  font-size: 32px;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-left: 40px;
}
.content .content-top .top-right .material-list,
.content .content-top .top-left .material-list {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.content .content-top .top-right .material-list .material-item,
.content .content-top .top-left .material-list .material-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.content .content-top .top-right .material-list .material-item .item-title,
.content .content-top .top-left .material-list .material-item .item-title {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}
.content .content-top .top-right .material-list .material-item .progress-wrap,
.content .content-top .top-left .material-list .material-item .progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  height: 12px;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .progress-bar,
.content .content-top .top-left .material-list .material-item .progress-wrap .progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: visible;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .progress-bar::before,
.content .content-top .top-left .material-list .material-item .progress-wrap .progress-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--p, 0%);
  border-radius: 3px;
  background: #08ffff;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .progress-bar .progress-value,
.content .content-top .top-left .material-list .material-item .progress-wrap .progress-bar .progress-value {
  position: absolute;
  top: -24px;
  left: 100%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .output-ratio,
.content .content-top .top-left .material-list .material-item .progress-wrap .output-ratio {
  width: 110px;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  margin-left: 10px;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .output-ratio span,
.content .content-top .top-left .material-list .material-item .progress-wrap .output-ratio span {
  font-weight: 700;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .output-ratio span.text-high,
.content .content-top .top-left .material-list .material-item .progress-wrap .output-ratio span.text-high {
  color: #00e5e5;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .output-ratio span.text-medium,
.content .content-top .top-left .material-list .material-item .progress-wrap .output-ratio span.text-medium {
  color: #ff9500;
}
.content .content-top .top-right .material-list .material-item .progress-wrap .output-ratio span.text-low,
.content .content-top .top-left .material-list .material-item .progress-wrap .output-ratio span.text-low {
  color: #ff3b30;
}
.content .content-top .top-right .material-list .material-item .item-info,
.content .content-top .top-left .material-list .material-item .item-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.content .content-bottom {
  height: 464px;
  width: 100%;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.content .content-bottom .bottom-right,
.content .content-bottom .bottom-left {
  width: 455px;
  height: 100%;
  background: linear-gradient(#012229, #012e35);
}
.content .content-bottom .bottom-right .box-header,
.content .content-bottom .bottom-left .box-header {
  height: 42px;
  background-image: url(../img/box-header.png);
  background-repeat: no-repeat;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  padding-left: 36px;
  padding-top: 2px;
}
.content .content-bottom .bottom-right .box-list,
.content .content-bottom .bottom-left .box-list {
  height: calc(100% - 42px);
  width: 100%;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai,
.content .content-bottom .bottom-left .box-list #main-body-haocai {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  padding: 0 16px;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .jiankonglist,
.content .content-bottom .bottom-left .box-list #main-body-haocai .jiankonglist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-right: 1px;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .jiankonglist .active,
.content .content-bottom .bottom-left .box-list #main-body-haocai .jiankonglist .active {
  background: #023f46;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai div,
.content .content-bottom .bottom-left .box-list #main-body-haocai div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .xs,
.content .content-bottom .bottom-left .box-list #main-body-haocai .xs {
  width: 10%;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .sm,
.content .content-bottom .bottom-left .box-list #main-body-haocai .sm {
  width: 20%;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .md,
.content .content-bottom .bottom-left .box-list #main-body-haocai .md {
  width: 30%;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .lg,
.content .content-bottom .bottom-left .box-list #main-body-haocai .lg {
  width: 35%;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .xl,
.content .content-bottom .bottom-left .box-list #main-body-haocai .xl {
  width: 40%;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .buju,
.content .content-bottom .bottom-left .box-list #main-body-haocai .buju {
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
}
.content .content-bottom .bottom-right .box-list #main-body-haocai .contain,
.content .content-bottom .bottom-left .box-list #main-body-haocai .contain {
  /* 必需要设置合适的高,因为他的原理是往列表最后添加列表重复元素，所以这个组件高不要大于其内容原先的最大高度 */
  height: 80%;
  width: 100%;
  overflow: hidden;
}
.content .content-bottom .bottom-center {
  flex: 1;
  height: 100%;
  background: linear-gradient(#012229, #012e35);
}
.content .content-bottom .bottom-center .box-header-max {
  height: 42px;
  background-image: url(../img/box-header-max.png);
  background-repeat: no-repeat;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  padding-left: 36px;
  padding-top: 2px;
}