<template> <div id="detail-frame" :style="`height:${heights}px`"> <el-scrollbar style="height:100%"> <el-card style="background:rgb(231, 224, 235);border-radius: 60px;" shadow="hover"> <el-row> <el-col :span="24" class="title"> <span v-if="returns"> <el-button size="mini" plan circle @click="$router.push({ path: returns })" 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.875rem;"> <slot></slot> </div> </el-card> </el-scrollbar> </div> </template> <script> 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: {}, }; </script> <style lang="less" scoped> .title { font-size: 1rem; font-weight: 700; padding: 1rem; } /deep/.el-scrollbar__wrap { overflow-x: auto; } </style>