Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

闫增涛

2024-06-13 89b824fa0610622e869510c1e0df6c7d3560b943

 src/books/artAndDrama/assets/main.less

@@ -421,7 +421,9 @@
    margin-bottom: 20px;
    box-shadow: 0 3px 6px 1px #00000029;
    background-color: #fff;
    padding-bottom: 117px;
  }

  ul {
    list-style: none;
    margin: 0;
@@ -510,9 +512,90 @@
      outline: none;
    }
  }
  .page-footer {
    position: relative;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    /* 垂直居中 */
  }
  
  .page-footer-image {
    /* 图片样式 */
    max-width: 100%;
    height: auto;
    position: relative;
    /* 确保.page-footer-number可以相对于图片定位 */
    z-index: 1;
    /* 确保页码数字在图片上方 */
  }
  
  .page-footer-number-left {
    color: black;
    left: 15%;
    position: absolute;
    /* 绝对定位页码 */
    font-size: 2em;
    /* 你可以根据需要调整字体大小 */
    z-index: 2;
  
    /* 确保页码数字在图片上方 */
    /* 使用::before伪元素创建绿色圆形背景 */
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      /* 垂直居中 */
      left: 50%;
      /* 水平居中 */
      transform: translate(-50%, -50%);
      /* 移动到中心 */
      width: 1.2em;
      /* 你可以根据需要调整圆形大小 */
      height: 1.2em;
      border-radius: 50%;
      /* 圆形 */
      background-color: rgba(208, 226, 179);
      /* 背景颜色 */
      z-index: -1;
      /* 确保圆形背景在文本下方 */
    }
  }
  .page-footer-number-right {
    color: black;
    right: 15%;
    position: absolute;
    /* 绝对定位页码 */
    font-size: 2em;
    /* 你可以根据需要调整字体大小 */
    z-index: 2;
  
    /* 确保页码数字在图片上方 */
    /* 使用::before伪元素创建绿色圆形背景 */
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      /* 垂直居中 */
      left: 50%;
      /* 水平居中 */
      transform: translate(-50%, -50%);
      /* 移动到中心 */
      width: 1.2em;
      /* 你可以根据需要调整圆形大小 */
      height: 1.2em;
      border-radius: 50%;
      /* 圆形 */
      background-color: rgba(208, 226, 179);
      /* 背景颜色 */
      z-index: -1;
      /* 确保圆形背景在文本下方 */
    }
  }
}
  /* 媒体查询做基础响应式布局 */
  @media (max-width: 430px) {
/* 媒体查询做基础响应式布局 */
@media (max-width: 430px) {
    .ans-drama  {
      .page-box {
        min-height: 750px;
@@ -535,6 +618,9 @@
      .video-box {
        max-width: 260px;
      }
      .page-box{
        min-height: 500px;
      }
    }
  }
  @media (min-width: 660px) {
@@ -548,6 +634,7 @@
      .video-box {
        max-width: 370px;
      }

    }
  }
::-webkit-scrollbar {