contract/src/components/multiColorBackground.vue

<template>
  <div class="main-bg">
    <div v-if="showGoBack" class="icon go-back" @click="handleClick"><</div>
    <div class="bg-top" :style="{height:(topHeight||4)+'rem'}">

    </div>
    <div class="fixed multi-blue">
      <slot name="header"></slot>
    </div>
    <div class="content" :class="{'full-height':showGoBack}">
      <slot></slot>
    </div>

  </div>

</template>

<script>
    export default {
        name: "multiColorBackground",
      props:['topHeight','showGoBack'],
      methods:{
          handleClick(){
            this.$router.go(-1);
          }
      }
    }
</script>

<style scoped>
    .bg-top{
      width: 100%;
      height: 4rem;
      background-color: #60c0ff;
    }
   .main-bg{
     /*position: relative;*/
     height: 100%;
     background-color: #e8eff5;
   }
   .icon{
     position: absolute;
     display: inline-block;
     top:0.6rem;
     left: 0.5rem;
     font-size: 0.4rem;
     height: 0.4rem;
     width: 0.2rem;
     color: white;
     z-index: 6;
   }

  .content{
    position: absolute;
    width: 100%;
    /*left: 0.4rem;*/
    top:0;
    height: 100%;
    overflow-y: scroll;
    z-index: 4;

  }
  .content.full-height{
    height: 100%;
  }
</style>