.room-btn {
  opacity: 0.3;
}

.room-title {
  display: flex;
  justify-content: space-between;
}

.effect_box {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center; 
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  /* margin: 10px; */
  z-index: -1;
}

.effect_light {
  /* 超出部分要隐藏 */
  overflow: hidden;
  /* 背景颜色 */
  background-color: #22292f;
  padding: 25px;

  /* 小圆角 */
  border-radius: 8px;
  /* 文字颜色、大小 */
  color: #66ddf7;
  font-size: 8px;

  /* 简单定位 */
  /* position: relative; */
  /* 显示层级最上面 */
  z-index: 0;
}
.effect_light::before {
  content: "";

  /* 宽高要超过父级默认的大小 */
  width: 250%;
  height: 250%;
  /* 基础背景颜色 */
  background-color: #22292f;
  /* conic-gradient 围绕中心点旋转的渐变 */
  background-image: conic-gradient(transparent, #fff, transparent 15%);

  /* 定位到中间 */
  position: absolute;
  left: -75%;
  top: -75%;
  /* 显示层级最底层 */
  z-index: -1;

  /* 旋转整个灯光渐变这一层 */
  animation: rotate 15s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.effect_light::after {
  content: "";

  /* 往内撑开盒子宽高，正好小一圈当做边框 */
  inset: 4px;
  background: #242424;
  border-radius: 8px;

  position: absolute;
  /* 显示层级中间，盖住最后一层的灯光 */
  z-index: -1;
}