// 星妈实验室详情页面样式
.xingmalabdetailpage {
  width: 750rpx;
  height: 1624rpx;
  left: 0rpx;
  top: 0rpx;
  position: absolute;
  
  .xingmalabdetailpagebg {
    width: 750rpx;
    height: 1624rpx;
    left: 0rpx;
    top: 0rpx;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .xingmalabdetailpagetext {
    width: 295rpx;
    height: 31rpx;
    left: 233rpx;
    top: 1232rpx;
    position: absolute;
    font-size: 32rpx;
    line-height: 31rpx;
    color: rgba(29, 30, 37, 1);
    text-align: center;
  }
  
  .xingmalabdetailpagepicbg {
    width: 730rpx;
    height: 1030rpx;
    left: 10rpx;
    top: 191rpx;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .xingmalabdetailpagepic {
    width: 688rpx;
    height: 914rpx;
    left: 31rpx;
    top: 207rpx;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .xingmalabdetailpagenum {
    width: 348rpx;
    height: 26rpx;
    left: 207rpx;
    top: 1144rpx;
    position: absolute;
    font-size: 28rpx;
    line-height: 26rpx;
    color: rgba(178, 124, 30, 1);
    text-align: center;
  }
  
  .xingmalabdetailpagebottomcon {
    width: 750rpx;
    height: 218rpx;
    left: 0rpx;
    top: 1406rpx;
    position: absolute;
    
    .xingmalabdetailpagebottomconbg {
      width: 750rpx;
      height: 218rpx;
      left: 0rpx;
      top: 0rpx;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .xingmalabdetailpagebottomconlikebtn {
      width: 119rpx;
      height: 44rpx;
      left: 135rpx;
      top: 56rpx;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      
      transition: opacity 0.3s ease;
      
      &:hover {
        opacity: 0.8;
      }
    }
    
    .xingmalabdetailpagebottomconsharebtn {
      width: 121rpx;
      height: 42rpx;
      left: 498rpx;
      top: 58rpx;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      
      transition: opacity 0.3s ease;
      
      &:hover {
        opacity: 0.8;
      }
    }
  }
  
  .xingmalabdetailpagetime {
    width: 203rpx;
    height: 23rpx;
    left: 41rpx;
    top: 1337rpx;
    position: absolute;
    font-size: 24rpx;
    line-height: 23rpx;
    color: rgba(111, 109, 103, 1);
  }
}

// 响应式适配
@media screen and (max-width: 750px) {
  .xingmalabdetailpage {
    width: 100vw;
    height: 100vh;
    
    .xingmalabdetailpagebg,
    .xingmalabdetailpagepicbg,
    .xingmalabdetailpagepic,
    .xingmalabdetailpagebottomcon {
      width: 100%;
      height: auto;
      left: 0;
      top: 0;
    }
    
    .xingmalabdetailpagetext,
    .xingmalabdetailpagenum,
    .xingmalabdetailpagetime {
      position: relative;
      left: auto;
      top: auto;
      margin: 20rpx auto;
      text-align: center;
    }
  }
}

// 动画效果
.xingmalabdetailpage {
  animation: fadeIn 0.5s ease-in-out;
  
  .xingmalabdetailpagepic {
    animation: slideInUp 0.8s ease-out 0.2s both;
  }
  
  .xingmalabdetailpagebottomcon {
    animation: slideInUp 0.8s ease-out 0.4s both;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 点赞状态样式
.xingmalabdetailpage {
  .xingmalabdetailpagebottomconlikebtn {
    &.liked {
      filter: brightness(1.2);
      transform: scale(1.1);
    }
  }
}
