/* components/page/index.wxss */
@import '../../styles/style.wxss';
  .dflex{
    display: flex !important;
  }
  .page{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mark{
    /* height: 256rpx; */
    position: relative;
    display: block;
    padding-bottom: 20rpx; 
    margin-left: 265rpx; 
    margin-bottom: 20rpx;
  }
  .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: 30rpx;
  }
  .function-icon-item{
    margin-top: 30rpx;
    background: linear-gradient(225deg,#5351ff,#6590dc);
    border-radius: 50%;
    padding: 30px;
    box-sizing: border-box;
    width: 106rpx;
    height: 106rpx;
    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: 50rpx;
    height: 47rpx;
  }
  .function-icon.mine{
    width: 42rpx;
  }
  .function-icon.closeX{
    width: 34rpx;   
     height: 34rpx; 
  }
  .function-button{
    display: none;
    position: absolute;
    /* top: 124rpx; */
    right: 30rpx;
    border-radius: 50%;
    width: 104rpx;
    height: 104rpx;
    background: linear-gradient(225deg,#5351ff,#6590dc);
    box-shadow: 0 1px 6px rgba(19,47,124,.4);
    color: #ffffff;
  }
  .function-button-icon{
    width: 38rpx;
    height: 32rpx;
  }
  .mark-content{
    /* margin-top: 180rpx; */
    margin-top: 40rpx;
    width: 220rpx;
    height: 44rpx;
    color: #999;
    position: relative;
  }
  .mark-content:before,.mark-content:after{
    content: '';
    display: inline-block;
    width: 22rpx;
    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);
    }
  }