<template>
|
<view class="full-page-layout app-page" :style="{
|
paddingTop:safetySize.top+'px',
|
paddingBottom:safetySize.bottom+'px',
|
paddingLeft:safetySize.left+'px',
|
paddingRight:safetySize.right+'px',
|
height:full?'100vh':'100%',
|
width:full?'100vw':'100%',
|
backgroundColor:baseBackgroundColor?baseBackgroundColor:'transparent'
|
}">
|
<view class="full-page-layout-containter" :class="[(gradient&&gradientValue==='default')?'gradient-default':'']" :style="{
|
backgroundColor:gradient?'transparent':(backgroundColor?backgroundColor:'transparent'),
|
backgroundImage:gradient?(gradientValue!=='default'?gradientValue:'none'):'none'
|
}">
|
<slot></slot>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name:'fullPageCompontent',
|
props:{
|
/* 是否启用底色渐变（backgroundImage） */
|
gradient:{
|
type:Boolean,
|
default:false
|
},
|
/* 底色渐变(backgroundImage)值，css语法，default时使用默认渐变色 */
|
gradientValue:{
|
type:String,
|
default:'default'
|
},
|
backgroundColor:{
|
type:String,
|
default:''
|
},
|
safety:{
|
type:Boolean,
|
default:true
|
},
|
full:{
|
type:Boolean,
|
default:true
|
},
|
baseBackgroundColor:{
|
type:String,
|
default:''
|
}
|
},
|
data(){
|
return {
|
safetySize:{
|
top:0,
|
bottom:0,
|
left:0,
|
right:0
|
}
|
}
|
},
|
beforeMount(){
|
if (this.safety) {
|
let safety = this.$store.getters['system/getSafety'];
|
if (safety) {
|
this.safetySize.top = safety.top
|
this.safetySize.bottom = safety.bottom
|
this.safetySize.left = safety.left
|
this.safetySize.right = safety.right
|
} else {
|
uni.getSystemInfo({
|
success:(res=>{
|
if (!res.safeAreaInsets) res.safeAreaInsets = {}
|
this.safetySize.top = res.safeAreaInsets.top || 0;
|
this.safetySize.bottom = res.safeAreaInsets.bottom || 0;
|
this.safetySize.left = res.safeAreaInsets.left || 0;
|
this.safetySize.right = res.safeAreaInsets.right || 0;
|
})
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.full-page-layout{
|
.full-page-layout-containter{
|
height: 100%;
|
overflow: auto;
|
position: relative;
|
&.gradient-default{
|
background-image: linear-gradient(to right, $color-paimary-darken, $color-paimary-middle) !important;
|
}
|
}
|
}
|
</style>
|
