.flash-sale { position: fixed; height: 100vh; width: 100%; left: 0; top: 0; z-index: 66; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中,如果需要的话 */ } .sale-bg-box { position: absolute; background: #000; opacity: 0.8; width: 100%; height: 100vh; z-index: 67; } .sale-content-box { position: relative; top: 10%; background: #fff; opacity: 0.7; width: 1100px; margin:0 auto; height: 80%; border-radius: 40px; z-index: 68; } .time-count { font-size: 36px; display: inline-block; padding:12px 8px; margin:0 8px; border-radius:8px; background:#f2f2f2; color:red; } .sale-context { position: relative; width: 800px; margin:5% auto; height: 80%; background: #fff; border-radius: 40px; padding: 24px; opacity: 1; z-index: 70; } .imgs-box { overflow-y: auto; padding: 18px; } .grid-container { display: flex; flex-direction: row; justify-content: center; flex-wrap:wrap; gap: 12px; /* 格子之间的间距 */ width: 100%; /* 容器宽度 */ height: 80%; /* 容器高度 */ padding: 10px; box-sizing: border-box; overflow-y: auto; border:1px solid #ddd; border-radius: 12px; } .grid-item { background-color: rgba(207, 208, 210, 0.2); color: white; font-size: 24px; border-radius: 8px; border:1px solid transparent; padding: 8px; cursor: pointer; } .checked{ background-color: rgba(87, 153, 239, 0.5); border:1px solid #ddd; } .el-dialog__body{ padding: 0px; } .el-dialog{ border-radius: 32px; } .el-dialog__header{ padding-top: 12px; }