mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 19:06:43 +08:00
147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<template>
|
|
<section class="app-main xuc-content">
|
|
<div style="display: flex;">
|
|
<div style="height: 100%;width: 210px;">
|
|
<uc-menu></uc-menu>
|
|
<!-- <div style="height: 20px;"></div> -->
|
|
</div>
|
|
<!-- width: 990px; -->
|
|
<div class="main-body" :style="{
|
|
backgroundColor: bgColor,
|
|
padding
|
|
}" style="flex:1; margin-left: 20px;">
|
|
<!-- <div style="margin-bottom: 10px;padding:10px; border-bottom: 1px solid #dbdbdb;"> -->
|
|
<!-- <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item :to="{ path: '/uc/index' }"><i class="el-icon-arrow-right"></i>个人中心</el-breadcrumb-item>
|
|
<el-breadcrumb-item>{{breadcrumbName}}</el-breadcrumb-item>
|
|
</el-breadcrumb> -->
|
|
<!-- </div> -->
|
|
<transition name="fade-transform" mode="out-in">
|
|
<keep-alive :include="cachedViews">
|
|
<div :style="{
|
|
backgroundColor: bgColor
|
|
}" style="min-height: 600px;padding-bottom: 50px;">
|
|
<router-view :key="key" />
|
|
</div>
|
|
</keep-alive>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import ucMenu from '@/components/UserCenter/menu.vue'
|
|
export default {
|
|
name: 'AppMain',
|
|
components:{ucMenu},
|
|
computed: {
|
|
cachedViews() {
|
|
return this.$store.state.tagsView.cachedViews
|
|
},
|
|
breadcrumbName(){
|
|
return this.$route.meta.title;
|
|
},
|
|
key() {
|
|
console.log(this.$route)
|
|
return this.$route.path
|
|
},
|
|
bgColor() {
|
|
return this.$route.path === "/growth/growthPage" ? "rgba(0,0,0,0)" : "#fff";
|
|
},
|
|
padding(){
|
|
return this.$route.path === "/growth/growthPage" ? "0" : "30px 20px";
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.upicon{
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
i{font-size: 30px;color: #ffaa00;}
|
|
div{color: #565656;padding: 5px 0px 10px 0px;}
|
|
}
|
|
.app-main {
|
|
/* 50= navbar 50 */
|
|
//min-height: calc(100vh - 50px);
|
|
// min-width: 1366px;
|
|
// max-width: 1500px;
|
|
//width: 1500px;
|
|
// width: 1000px;
|
|
// margin: 0 auto;
|
|
padding-top: 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.main-body{
|
|
width: calc(100% - 210px);
|
|
}
|
|
.fixed-header+.app-main {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.hasTagsView {
|
|
.app-main {
|
|
/* 84 = navbar + tags-view = 50 + 34 */
|
|
min-height: calc(100vh - 84px);
|
|
}
|
|
|
|
.fixed-header+.app-main {
|
|
padding-top: 84px;
|
|
}
|
|
}
|
|
.uc-menu{
|
|
padding: 5px;
|
|
margin: 5px 10px;
|
|
.uc-menu-header{
|
|
font-size: 16px;
|
|
color:#757575;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #ececec;
|
|
}
|
|
|
|
}
|
|
.uc-menu-item{
|
|
padding: 5px;
|
|
text-align: center;
|
|
display: block;
|
|
margin: 5px 10px;
|
|
}
|
|
.xuc-content{
|
|
margin: 0px auto;
|
|
}
|
|
@media screen and (max-width: 1366px){
|
|
.xuc-content {
|
|
width: 1100px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1680px) and (min-width:1367px){
|
|
.xuc-content {
|
|
width: 1300px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
|
.xuc-content {
|
|
width: 1600px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1921px){
|
|
.xuc-content {
|
|
width: 1800px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
// fix css style bug in open el-dialog
|
|
.el-popup-parent--hidden {
|
|
.fixed-header {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
</style>
|