kuailelunwen_new_houtai/src/views/super/Ranking/Ranking.vue

<template>
    <div class="siteSetting-wrap">
        <RankingLeftMenu/>
        <!-- 主内容区域 -->
        <main class="main-content" ref="scrollContainer">
            <router-view></router-view>
            <Footer></Footer>
        </main>
    </div>
</template>
<script>
import Footer from '@/components/Footer.vue';
import RankingLeftMenu from '@/components/super/RankingLeftMenu.vue'

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        Footer,
        RankingLeftMenu,
    },
    data() {
        return {
            path: ''
        }
    },
    mounted() {
        this.path = this.$route.path;
    },
    methods: {}
}
</script>
<style lang="scss">
.demo-wrap {
  width: 100%;
  letter-spacing: 0.08em;

  ::v-deep .el-popover.el-popper {
    padding: 20px;
  }

  .growth-up {
    padding: 0 5px;
    color: #22C55E;
  }

  .growth-down {
    padding: 0 5px;
    color: #EF4444;
  }

  .growth-text {
    color: #9CA3AF;
    padding-left: 5px;
  }

  .edit_icon {
    padding: 0 5px;
    vertical-align: middle;
  }

  .detail_icon {
    vertical-align: text-top;
    padding-left: 5px;
  }

  .custom-select {
    width: 110px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 18px;
    height: 30px;
  }

  .custom-select .el-input__inner {
    background: none;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    color: #1e2226;
    font-weight: bold;
    padding: 0;
  }

  .custom-select .el-input:focus-within {
    background: none;
    border-color: #F5F7FA !important;
    border-radius: 0;
    box-shadow: none;
    outline: none;
  }
}

.pop-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;

  .pop-top {
    h3 {
      font-family: Microsoft YaHei UI;
      font-size: 16px;
      font-weight: bold;
      line-height: 18px;
      letter-spacing: 0.08em;
      color: #1D2129;
      margin: 0;

      span {
        display: inline-block;
        margin-left: 12px;
        font-size: 14px;
        line-height: 18px;
        color: #006AFF;
      }
    }

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.custom-select-dropdown {
  width: 210px;
  margin-left: -16px;
}

.custom-select-dropdown .el-select-dropdown__item {
  color: #1E2226;
  margin: 0 12px;
  padding: 0 12px;
}

.custom-select-dropdown .el-select-dropdown__item:first-child {
  margin-top: 6px;
}

.custom-select-dropdown .el-select-dropdown__item:last-child {
  margin-bottom: 6px;
}

.custom-select-dropdown .el-select-dropdown__item:hover {
  background: #F6F7FA;
}

.custom-select-dropdown .el-select-dropdown__item.selected {
  font-weight: normal;
}

.custom-select-dropdown .el-select-dropdown__item.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('../../../assets/super/select-active.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
}

</style>
<style scoped lang="scss">
.siteSetting-wrap {
  display: flex;
  height: 100%;
}

.main-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}
</style>