TVscreen/TAT/css/index.css

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }

 .screen-container {
   width: 100%;
   height: 100vh;
   background: url(../images/bg2.jpg);
   background-size: 100% 100%;
   padding: 10px 20px 5px 30px;
 }

 .screen-header {
   position: relative;
   width: 100%;
   height: 60px;
 }

 .screen-title {
   font-size: 1.875rem;
   color: rgba(14, 253, 255, 1);
   text-align: center;
   font-weight: bold;
   text-align: center;
   line-height: 50px;
 }

 .screen-time {
   position: absolute;
   right: 80px;
   font-size: 20px;
   color: #0ef;
   font-weight: 700;
   top: 10px;
 }



 .border_bg_leftTop {
   position: absolute;
   left: -0.125rem;
   top: -0.625rem;
   width: 5.78125rem;
   height: 0.78125rem;
   display: block;
   background: #01279d url(../images/title_left_bg.png) no-repeat;
   background-size: cover;
 }

 .border_bg_rightTop {
   position: absolute;
   right: -0.15625rem;
   top: -0.15625rem;
   width: 1.5625rem;
   height: 1.5625rem;
   display: block;
   background: url(../images/border_bg.jpg) no-repeat;
   background-size: cover;
 }

 .border_bg_leftBottom {
   position: absolute;
   left: -0.125rem;
   bottom: -0.125rem;
   width: 1.5625rem;
   height: 1.5625rem;
   display: block;
   background: url(../images/border_bg.jpg) no-repeat;
   background-size: cover;
 }

 .border_bg_rightBottom {
   position: absolute;
   right: -0.15625rem;
   bottom: -0.15625rem;
   width: 1.25rem;
   height: 1.25rem;
   display: block;
   background: url(../images/title_right_bg.png) no-repeat;
   background-size: cover;
 }

 .div__body {
   padding: 12px;
 }

 .grid-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   /* 上下两行高度均分 */
   gap: 10px;
   flex: 1;
   min-height: 0;
   height: calc(100% - 80px);
 }

 .card {
   border: 1px solid #0efdff;
   padding: 5px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   min-height: 0;
 }

 .card-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 5px;
   border-bottom: 1px solid #0099ff;
   color: #fff;
   font-size: 20px;
   font-weight: bold;
 }

 .red-text {
   color: #ff4444;
   font-weight: bold;
 }

 .table-box {
   flex: 1;
   min-height: 0;
  }

 table {
   width: 100%;
   /* height: 100%; */
   border-collapse: collapse !important;
   border: 1px solid #0099ff;
  }

 th {
   background: rgba(30, 104, 195, 1);
   color: #ffffff;
   font-size: 16px;
   font-weight: bold;
   border: 1px solid #0099ff;
   padding: 3px;
   text-align: left;
   height: 30px;
 }

 td {
   background: transparent;
   color: #ffffff;
   font-size: 15px;
   border: 1px solid #0099ff;
   padding: 3px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 180px;
   height: 30px;
 }

 /* 隔行变色 */
 tbody tr:nth-child(even) td {
   background: rgba(0, 153, 255, 0.1);
   min-height: 30px;
 }

 /* 文字溢出悬浮完整提示 */
 td {
   position: relative;
 }

 td:hover::after {
   content: attr(data-tip);
   position: absolute;
   left: 0;
   top: 100%;
   background: rgba(0, 18, 36, 0.95);
   border: 1px solid #0efdff;
   padding: 6px 10px;
   z-index: 10;
   white-space: normal;
   max-width: 400px;
   border-radius: 4px;
 }




 .timeout {
   color: #00ff00;
   font-weight: bold;
   font-size: 16px;
 }

 .tips {
   margin-top: 8px;
   font-size: 12px;
   color: #ff4d4f;
 }

 /* 右上角关闭叉号按钮 透明悬浮 */
 .close-btn-box {
   position: fixed;
   right: 30px;
   top: 20px;
   z-index: 9999;
 }

 .close-icon-btn {
   width: 44px;
   height: 44px;
   line-height: 44px;
   text-align: center;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
   border-radius: 50%;
   cursor: pointer;
   font-size: 24px;
   font-weight: bold;
   user-select: none;
 }

 .close-icon-btn:hover {
   background: rgba(255, 0, 0, 0.35);
   border-color: rgba(255, 255, 255, 0.5);
 }