yapi/client/containers/Home/Home.scss

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

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

.home-main {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  .main-one{
    @include wrap-width-limit;
    .home-des{
      color: $color-blue-grey-lighter;
      padding: .4rem 0 0;
      .title{
        font-size: .6rem;
      }
      .detail{
        font-size: .2rem;
      }
    }
    .login-form{
      color: $color-white;
    }
    .img-container{
      margin-bottom: -.3rem;
      img{
        width: 100%;
        height: 100%;
        //box-shadow : 0 0 3px 0 $color-black-lighter;
        box-shadow : 0 30px 60px rgba(0,0,0,0.2);
        border-radius: .03rem;
      }
    }
    .main-one-left{
      padding-right: .15rem;
      margin-top: .2rem;
    }
    .main-one-right{
      padding-left: .5rem;
      padding-top: .3rem;
    }
  }
  .user-home{
    display: flex;
    align-items: center;
    height: 100%;
    @include row-width-limit;
    margin: 1rem auto 0;
    .user-des{
      @include row-width-limit;
      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;
    height: 5.8rem;
    @include wrap-width-limit;
    &:nth-child(odd){
      background-color: $color-blue-lighter;
    }
    &:nth-child(even){
      background-color: $color-white;
    }
  }
  .feat-part{
    @include wrap-width-limit;
    padding: .9rem .5rem;
    background-color: $color-white;
    p{
      display: flex;
      height: .3rem;
      align-items: center;
      padding: 0 .1rem;
      margin-bottom: .2rem;
      //color: #333;
      &:before, &:after{
        content: "";
        display: inline-block;
        height: .02rem;
        flex: 1;
        border-top: .01rem solid #e6e6e6;
      }
      span{
        font-size: .24rem;
        padding: 0 .1rem;
        font-weight: normal;
      }
    }
  }
  .container{
    @include row-width-limit;
    margin: 0 auto;
    height:100%;
    position: relative;
  }
  .feat-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    .feat-img {
      height: 1.2rem;
      width: 1.2rem;
      border-radius: 100%;
      margin-bottom: .2rem;
      color: $color-white;
      i {
        line-height: 1.2rem;
        font-size: .6rem;
      }
    }
    .feat-title {
      font-size: .16rem;
      line-height: .3rem;
    }
    &:first-child {
      .feat-img {
        background-color: rgb(248, 88, 96);
      }
    }
    &:nth-child(2) {
      .feat-img {
        background-color: #f9bb13;
      }
    }
    &:nth-child(3) {
      .feat-img {
        background-color: #20ab8e;
      }
    }
    &:nth-child(4) {
      .feat-img {
        background-color: rgb(66, 165, 245);
      }
    }
  }
}