/*matchLayout*/
<template>
  <div class="matchLayout">
    <div class="footer-img">
      <img src="@/assets/match/beijin.png" />
    </div>
    <div class="content">
      <div class="title"><img src="@/assets/match/dasai.png" /></div>
      <div class="container">
        <div class="container-bg">
          <img src="@/assets/match/content.png" />
        </div>
        <div class="container-box">
          <div class="slot-container">
            <transition name="fade-transform" mode="out-in">
              <router-view />
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'matchLayout',
  components: {},
  data() {
    return {
      currentPage: 'notice',
    }
  },
  created() {
    const path = this.$route.path
    let pathArr = path.split('/')
    if (pathArr.length == 3 && pathArr[2]) {
      this.currentPage = pathArr[2]
    } else {
      this.currentPage = 'notice'
    }
    if (path === '/' || path === '/matchLayout' || path === '/matchLayout/') {
      this.$router.replace({ path: '/matchLayout/' + this.currentPage })
    }
  },
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.matchLayout {
  @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);
      text-align: center;
      img {
        height: 100%;
      }
    }

    .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: 45px 3.8% 70px;
        overflow: hidden;

        .slot-container {
          @include w_h(100%, 100%);
          padding: 20px 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);
          }
        }
      }
    }
  }
}
</style>
