cfd-adi-web/src/views/megagame/topic/components/DetailLayout/index.vue

/*DetailLayout*/
<template>
  <div class="details">
    <div class="footer-img">
      <img src="@/assets/match/litibj.png" />
    </div>
    <div class="content">
      <div class="title">
        <div class="back" @click="back">
          <img src="@/assets/match/r.png" alt="图片" />
        </div>
        <h3>{{ title }}</h3>
      </div>
      <div class="container">
        <div class="container-bg">
          <img src="@/assets/match/content.png" />
        </div>
        <div class="container-box">
          <div class="slot-container">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailLayout',
  props: {
    title: {
      type: String,
      default: () => '标题',
    },
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.details {
  @include w_h(100%, 100%);
  @include flex(center);
  position: relative;
  background: $color_0;
  .footer-img {
    @include w_h(100%);
    @include position(fixed, auto, -3px, 0, 0);
    background: $color_0;
    img {
      @include w_h(100%);
    }
  }
  .content {
    @include w_h(95%, 90%);
    min-width: 900px;
    min-height: 560px;
    .title {
      @include w_h(100%, 60px);
      @include flex();
      .back {
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
      h3 {
        @include w_h(100%);
        font-size: 28px;
        text-align: center;
        color: #007af9;
      }
    }

    .container {
      @include w_h(100%, calc(100% - 60px));
      position: relative;
      overflow: hidden;
      &-bg {
        @include position(absolute, 0, 0, 0, 0);
        img {
          @include w_h(100%, 100%);
        }
      }

      &-box {
        @include w_h(100%, 100%);
        position: relative;
        padding: 40px 3.8%;
        overflow: hidden;

        .slot-container {
          @include w_h(100%, 100%);
          padding: 0 30px;
          overflow: auto;

          /*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
          /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
          &::-webkit-scrollbar {
            width: 8px;
            height: 3px;
            background: transparent;
          }
          /*定义滚动条轨道 内阴影+圆角*/
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background: transparent;
          }

          /*定义滑块 内阴影+圆角*/
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background: #0196fb;
          }

          /*滑块效果*/
          &::-webkit-scrollbar-thumb:hover {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 139, 250, 0.9);
          }
        }

        .detail {
          @include w_h();
          @include flex(space-between, flex-start);
          .content-left {
            @include w_h(70%);
            color: $color_f;
            padding: 15px 0;
            .title {
              font-size: 22px;
              color: $color_f;
            }
            .dec {
              font-size: 16px;
              line-height: 26px;
              img {
                vertical-align: middle;
              }
            }
            .imgs {
              padding: 10px 0;
              text-align: center;
              img {
                max-width: 100%;
              }
              p {
                font-size: 12px;
                line-height: 28px;
              }
            }
          }
          .content-right {
            @include w_h(26%);
            .title {
              font-size: 22px;
              color: #fde800;
            }
          }
        }
      }
    }
  }
}
</style>