xt_pad/src/pages/advice/index.vue

<template>
  <div class="mainBox">
    <div class="mainContent">
      <AdvicePage></AdvicePage>
    </div>
    <side-bar :active_index="2"></side-bar>
  </div>
</template>


<script>
import SideBar from "@/pages/layout/SideBar";
import AdvicePage from "./AdvicePage";
export default {
  name: "index",
  components: {
    AdvicePage,
    SideBar
  }
};
</script>

<style style="stylesheet/scss" lang="scss"   scoped>
html,
body {
  height: 100%;
}
.mainBox {
  overflow: hidden;
  height: 100%;
  font-size: 0.3rem;
  display: flex;
  flex-direction: column;
  > :first-child {
    flex: 1;
    overflow: auto;
  }
  .sideColumn {
    .column {
      .head {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        @include justify-content-center;
        margin: 0.5rem 0 0.5rem 0;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
          width: 0.7rem;
          height: 0.7rem;
        }
      }
      .sidebar {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        padding: 0;
        li {
          padding: 0 0 0.8rem 0;
          a {
            color: #a8b3ba;
            display: inline-block;
            padding: 0;
            margin: 0;
            p {
              font-size: 0.24rem;
              margin-top: 0.2rem;
            }
            .iconfont {
              font-size: 0.5rem;
              display: inline-block;
            }
          }
          &.active {
            a {
              color: #409eff;
            }
          }
        }
      }
    }
  }
}
.mainContent {
  // margin: 0 0 0 1.58rem;
}
</style>