You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<!-- 面包屑下标题 -->
|
|
<div class="wrap-title" v-if="$route.meta.name">
|
|
<span class="wrap-title-text">
|
|
<slot name="title">{{ title }}</slot>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- header -->
|
|
<div class="wrap-header">
|
|
<slot name="header"></slot>
|
|
<slot name="button"></slot>
|
|
</div>
|
|
|
|
<!-- container-->
|
|
<div class="wrap-cont">
|
|
<div class="wrap-cont-cover">
|
|
<div class="wrap-container">
|
|
<!-- 默认插槽 -->
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<div class="wrap-footer bg-white">
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
export default {
|
|
name: "content-view",
|
|
data() {
|
|
return {
|
|
title: "",
|
|
footerStyle: false
|
|
};
|
|
},
|
|
watch: {
|
|
$route(route) {
|
|
this.title = route.meta.title || route.meta.name;
|
|
}
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.title = this.$route.meta.title || this.$route.meta.name;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
.wrap {
|
|
/*display: flex;*/
|
|
/*flex-direction: column;*/
|
|
/*flex: 1;*/
|
|
/*position: relative;*/
|
|
/*&-title {*/
|
|
/* padding: 0 32px 24px;*/
|
|
/* background: #fff;*/
|
|
/* display: flex;*/
|
|
/* justify-content: space-between;*/
|
|
/* align-items: center;*/
|
|
|
|
/* &-text {*/
|
|
/* font-weight: bold;*/
|
|
/* flex: 1;*/
|
|
/* }*/
|
|
/*}*/
|
|
|
|
/*&-header {*/
|
|
/* background: #fff;*/
|
|
/* padding: 0 32px;*/
|
|
/* border-bottom: 1px solid #e1e1e1;*/
|
|
/*}*/
|
|
|
|
/*&-cont {*/
|
|
/* display: flex;*/
|
|
/* flex-direction: column;*/
|
|
/* flex: 1;*/
|
|
/* padding: 0 24px;*/
|
|
|
|
/* &-cover {*/
|
|
/* flex: 1;*/
|
|
/* display: flex;*/
|
|
/* flex-direction: column;*/
|
|
/* padding: 24px 0;*/
|
|
/* }*/
|
|
/*}*/
|
|
|
|
/*&-container {*/
|
|
/* flex: 1;*/
|
|
/* position: relative;*/
|
|
/* display: flex;*/
|
|
/* flex-direction: column;*/
|
|
/* overflow-x: auto;*/
|
|
/* background-color: #fff;*/
|
|
/* & > div {*/
|
|
/* padding: 24px;*/
|
|
/* overflow-x: hidden;*/
|
|
/* }*/
|
|
/*}*/
|
|
/*&-footer {*/
|
|
/* position: fixed;*/
|
|
/* left: 0;*/
|
|
/* bottom: 0;*/
|
|
/* padding-left: 256px;*/
|
|
/* // padding-left: 50%;*/
|
|
/* width: 100%;*/
|
|
/* text-align: center;*/
|
|
/* z-index: 2;*/
|
|
/*}*/
|
|
}
|
|
</style>
|