frame/layout/admin/detail-frame.vue

<template>
  <div id="detail-frame" :style="`height:${heights}px;overflow:auto`">
    <!-- <el-scrollbar style="height:100%"> -->
    <el-card style="background-image: linear-gradient(315deg, #CCF, transparent);border-radius: 60px;" shadow="hover">
      <el-row>
        <el-col :span="24" class="title">
          <span v-if="returns">
            <el-button size="mini" plan circle @click="toReturn" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <span class="el-icon-arrow-left" style="zoom:1.5;font-weight:700"></span>
            </el-button>
          </span>
          <slot name="title">
            {{ title }}
          </slot>
        </el-col>
      </el-row>
      <div style="padding:1.25rem;overflow: inherit;overflow-x: auto;">
        <!-- <el-scrollbar style="height:100%"> -->
        <slot></slot>
        <!-- </el-scrollbar> -->
      </div>
    </el-card>
    <!-- </el-scrollbar> -->
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'detail-frame',
  props: {
    title: { type: String },
    returns: { type: null, default: null },
  },
  components: {},
  data: () => ({
    heights: document.documentElement.clientHeight - 80,
  }),
  created() {},
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight - 80;
        that.heights = window.fullHeight;
      })();
    };
  },
  computed: {},
  methods: {
    toReturn() {
      if (_.isString(this.returns)) this.$router.push({ path: this.returns });
      else if (_.isFunction(this.returns)) {
        let fun = _.get(this, `returns`);
        fun();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.8rem;
}
/deep/.el-scrollbar__wrap {
  overflow-x: auto;
}
/deep/.el-card__body {
  overflow: inherit;
}
</style>