xt_pad/src/pages/main/index.vue

<template>
<div class="mainBox">
    <side-bar :active_index="0"></side-bar>
    <div class="mainContent">
      <record-page></record-page>
    </div>
</div>  
</template>   


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

<style style="stylesheet/scss" lang="scss"   scoped>
html,
body {
  height: 100%;
}
.mainBox {
  height: 100%;
  font-size:0.3rem;
  background: #fff;
  .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>