<template>
    <div class="page flex flex_sb flex_col">
      <div class="page-content">
        <slot></slot>
      </div>
      <!--<div class="function" :class="{ani:visible}">-->
        <!--<ul class="function-menu">-->
          <!--<li class="function-icon-item" :class="{aniHome:visible}">-->
            <!--<a @click="home">-->
              <!--<img :src="baseUrl+'/static/icons/home.png'" class="function-icon home" alt="">-->
            <!--</a>-->
          <!--</li>-->
          <!--<li class="function-icon-item" :class="{aniMine:visible}">-->
            <!--<a href="###">-->
              <!--<img :src="baseUrl+'/static/icons/mine.png'" class="function-icon mine" alt="">-->
            <!--</a>-->
          <!--</li>-->
          <!--<li class="function-icon-item function-icon-item-close" :class="{aniClose:visible}" @click="closeFunction">-->
            <!--<img :src="baseUrl+'/static/icons/close.png'" class="function-icon close" alt="">-->
          <!--</li>-->
        <!--</ul>-->
      <!--</div>-->
      <div class="mark flex flex_ct">
        <!--<span :class="{dflex:!visible}" class="function-button flex flex_ct flex_ac" @click="showFunction">-->
          <!--<img :src="baseUrl+'/static/icons/more.png'" class="function-button-icon" alt="">-->
        <!--</span>-->
        <span class="mark-content bc tc">阜新银行出品</span>
      </div>
    </div>
</template>
<script>
    import config from '../../lib/config'
    export default {
        name: "page",
        data(){
            return{
              baseUrl:config.baseUrl,
              visible:false,
            }
        },
        created(){

        },
        methods:{
          home(){
            location.href = config.naviUrl;
          },
          showFunction(){
            console.log(121)
            this.visible = true
          },
          closeFunction(){
            this.visible = false
          },
        }
    }
</script>
<style scoped>
  .dflex{
    display: flex !important;
  }
  .page{
    height: 100%;
    overflow-y: auto;
  }
  .mark{
    /*height: 2.56rem;*/
    position: relative;
     display: block;
    padding-bottom: .2rem;
    margin-left: 2.65rem;
  }
  .function{
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.6);
    z-index: 10;
  }
  .function-menu{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .3rem;
  }
  .function-icon-item{
    margin-top: .3rem;
    background: linear-gradient(225deg,#5351ff,#6590dc);
    border-radius: 50%;
    padding: .3rem;
    box-sizing: border-box;
    width: 1.06rem;
    height: 1.06rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .function-icon-item:nth-child(1),.function-icon-item:nth-child(2){
    transform: translateY(20px);
  }
  .function-icon-item-close{
    background: #585b72;
  }
  .function-icon{
    width: .5rem;
    height: .47rem;
  }
  .function-icon.mine{
    width: .42rem;
  }
  .function-icon.close{
    width: .32rem;
    height: .32rem;
  }
  .function-button{
    display: none;
    position: absolute;
    top: 1.24rem;
    right: .3rem;
    border-radius: 50%;
    width: 1.04rem;
    height: 1.04rem;
    background: linear-gradient(225deg,#5351ff,#6590dc);
    box-shadow: 0 1px 6px rgba(19,47,124,.4);
    color: #ffffff;
  }
  .function-button-icon{
    width: .38rem;
  }
  .mark-content{
    /*margin-top: 1.8rem;*/
    margin-top: .2rem;
    width: 2.2rem;
    /*height: .44rem;*/
    color: #999;
    position: relative;
  }
  .mark-content:before,.mark-content:after{
    content: '';
    display: inline-block;
    width: .22rem;
    height: 2px;
    background: #999;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
  }
  .mark-content:before{
    left: 0;
  }
  .mark-content:after{
    right: 0;
  }
  .aniHome{
    animation: aniHome .3s .05s 1 ease-in-out forwards;
  }
  .aniMine{
    animation: aniMine .3s 0s 1 ease-in-out forwards;
  }
  .aniClose{
    animation: aniClose .3s 0s 1 ease-in-out;
  }
  .ani{
    animation: ani .35s 0s 1 linear forwards;
  }
  @keyframes ani{
    to{
      opacity: 1;
      right: 0;
    }
  }
  @keyframes aniClose{
    50%{
      transform: rotate(60deg);
    }
  }
  @keyframes aniMine{
    100%{
      transform: translateY(0);
    }
  }
  @keyframes aniHome{
    100%{
      transform: translateY(0);
    }
  }
</style>
