FE_review/src/layouts/home/index.vue

<template>
  <div :class="inIframe ? 'full' : 'frame'">
    <v-head v-if="inIframe" />
    <div class="main">
      <v-navbar v-if="!inIframe" class="nav" />
      <div class="layout">
        <div class="content">
          <transition name="move" mode="out-in">
            <router-view class="view"></router-view>
          </transition>
          <el-backtop target=".content"></el-backtop>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/setting'
import vHead from '../header/index.vue'
import vNavbar from '../navbar/index.vue'
import vFooter from '../footer'
export default {
  data () {
    return {
      inIframe: !Setting.inIframe // 当前被嵌入到iframe里则说明是中台职站里进入的，只显示左侧导航；否则就是专家端登录的，只显示顶部导航
    };
  },
  components: {
    vHead,
    vNavbar,
    vFooter
  },
  mounted () {
    const { token } = this.$route.query
    Setting.isDev && token && localStorage.setItem('review_token', token)
  },
};
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  min-width: 1300px;
  height: 100%;
  overflow: hidden;

  .nav {
    width: 190px;
    margin-right: 24px;
  }

  .layout {
    width: calc(100% - 214px);

    .content {
      height: 100vh;
      overflow: auto;

      .view {
        min-height: 100%;
      }
    }
  }
}

.frame {
  height: 100%;
}

.full {
  padding: 20px;

  .layout {
    width: 100%;

    .content {
      height: auto;
    }
  }
}
</style>