<template> <div class="c-page-container"> <!-- <div class="title" v-if="showTitle"> <i class="el-icon-location" style="color: #409eff;"></i> <span>{{ title }}</span> </div> --> <div class="c-page-container-div"> <slot></slot> </div> </div> </template> <script> export default { props: ["title"], computed: { // showTitle() { // return this.$route.path.startsWith('/review'); // } } }; </script> <style scoped> .title { margin: 0; padding: 8px; padding-left: 20px; font-size: 14px; border-bottom: 1px solid var(--darkbgcolor); background-color: var(--darkbgcolor); } .c-page-container { height: 100%; display: flex; flex-direction: column; /* overflow-x: hidden; */ overflow: inherit; } .fast-button { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-start; text-align: center; margin-right: 10px; position: absolute; top: -35px; right: 0px; } .fast-button .el-button { border: none; border-radius: 0px; margin-left: 0px !important; background-color: #1561e0; color: white; border-right: solid 1px; position: relative; height: 25px; } .fast-button .el-button:focus, .fast-button .el-button:hover { background: white; border-color: white; color: #1561e0; } .c-page-container-div { flex: 1; padding: 0px 15px 5px; position: relative } @media screen and (min-width: 2561px) { .c-page-container-div { padding: 0px 20px 5px; } } @media screen and (min-width: 1921px) and (max-width: 2560px) { .c-page-container-div { padding: 0px 20px 5px; } } @media screen and (min-width: 1441px) and (max-width: 1920px) { .c-page-container-div { padding: 0px 20px 5px; } } @media screen and (min-width: 1200px) and (max-width: 1440px) { .c-page-container-div { padding: 0px 15px 5px; } } @media screen and (max-width: 1199px) { .c-page-container-div { padding: 0px 10px 5px; } } </style>