yapi/client/containers/Home/Home.scss

@import '../../styles/common.scss';

$color-white : #fff;
$color-blue-lighter : #f1f5ff;
$color-grey-lighter : #F7F7F7;
$color-blue-light: #5dade2;
$color-black-lighter: #404040;


.home-main {
  height:calc(100% - .64rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  background: $color-grey-lighter;
  .main-one{
    padding: .5rem .5rem 0 .5rem;
    //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%);
    .home-des{
      padding: 0 .3rem .3rem 0;
      .title{
        font-size: .6rem;
      }
      .detail{
        font-size: .2rem;
      }
    }
    .login-form{
    }
    .img-container{
      margin-bottom: -.2rem;
      img{
        width: 100%;
        height: 100%;
        box-shadow : 0 0 3px 0 $color-black-lighter;
        border-radius: .03rem;
      }
    }
    .main-one-left{
      padding-right: .15rem;
    }
    .main-one-right{
      padding-left: .15rem;
    }
  }
  .user-home{
    display: flex;
    align-items: center;
    height:calc(100% - 2rem);
    max-width: 11rem;
    margin: 0 auto;
    .user-des{
      max-width: 11rem;
      margin: 0 auto .5rem;
      text-align: center;
      .title{
        font-size: .8rem;
        margin-bottom: .2rem;
      }
      .des{
        font-size: .25rem;
        margin-bottom: .3rem;
      }
      .btn{
        button{
          font-size: .2rem;
          line-height: .2rem;
          height: .5rem;
          padding: .15rem .5rem;
        }
      }
    }
  }
  .main-part{
    padding: .9rem .5rem;
    &:nth-child(odd){
      background-color: $color-blue-lighter;
    }
    &:nth-child(even){
      background-color: $color-white;
    }
  }
  .container{
    max-width: 11rem;
    margin: 0 auto;
  }
}