lixin-web/webapp/less/page/about-inline.less

vue and bootstrap

@import "../variables";
@import "../mixins";
@import (reference) "../plugins/font-awesome";
.about-features{
  background: @module-bg;
  text-align: center;
  padding-top: 40px;
  @media(min-width:@screen-sm){
    padding-top: 280px;
  }
  li {
    > div{
      border-radius:50%;
      width: 120px;
      height: 120px;
      position: relative;
      display: inline-block;
      margin-bottom: 20px;
      span{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto;

      }
    }
  }
  p{
    display: inline-block;
    color: @gray;
    font-size:@font-size-large;
    line-height: 28px;
    max-width: 306px;
  }
}

.icon-about-safe{
  background: @brand-warning;
}

.icon-about-honor{
  background: @brand-info;
}
.icon-about-just{
  background: @brand-success;
}

.about-brand{
  padding-top: 48px;
  > .container{
    position: relative;
  }
  li{
    margin-bottom: 20px;
    img{
      .img-responsive();
    }
  }
  h2{
    text-align: center;
    font-size: 26px;
    margin-top: 30px;
    margin-bottom: 25px;
    div{
      font-size:@font-size-base;
      color: @gray;
      padding-top: 10px;
    }
  }
  p{
    color: @gray;
    font-size: @font-size-medium;
    text-indent: 1.5em;
    padding-left: 10px;
    padding-right: 10px;

  }
}

.about-contact{
  background: #f4f9fb;
  padding: 20px 0;
  h3{
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 20px;
    span{
      font-size: @font-size-medium;
      margin-left: 5px;
    }
  }
  p{
    font-size: @font-size-medium;
    line-height: 24px;
    max-width: 630px;
    margin-bottom: 15px;
  }
  strong{
    color: @gray;
    font-size: 22px;
  }
  ul{
    margin-top: 15px;
  }
  li{
    color: @gray;
    line-height: 22px;
  }
}
.about-contact-circle{
  display: none;
}
@media(min-width:@screen-md){
  .about-brand{
    li:last-child{
      position: absolute;
      left: 0;
      right: 0;
      background: #eef3f5;
      border-radius:50%;
      width: 95px;
      height: 95px;
      border:6px solid #fff;
      margin:75px auto 0;
      svg{
        width: 50px;
        margin:auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    }
  }
  .about-contact{
    height: 340px;
    padding: 45px 0;
  }
  .about-contact-circle{
    display: block;
    position: relative;
    width: 247px;
    height: 247px;
    //.fa-spin;
    animation-duration: 4s;
    &,&:before,&:after{
      border-radius:50%;
      border:1px dashed #d7d7d7;
    }
    &:before,&:after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin:auto;
    }
    &:before{
      width: 129px;
      height: 129px;
    }
    &:after{
      width: 182px;
      height: 182px;
    }
    > div{
      position: absolute;
      width: 40px;
      height: 40px;
      color: #fff;
      border-radius:50%;
      text-align: center;
      //animation: inner-circle 4s 0.01s infinite linear;
      line-height: 40px;


      &:first-child{
        background: @brand-success;
        left: 22px;
        top: 14px;
      }
      &:last-child{
        background: @brand-primary;
        left: 72px;
        bottom: -16px;
      }

    }
    .fa{
      font-size: 20px;
    }
    .icon-about-service{
      background: @brand-info;
      right: -15px;
      top: 60px;
      span{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin:auto;

      }
    }
  }

  //@keyframes inner-circle {
  //  0% {
  //    transform: rotate(0deg);
  //  }
  //  100% {
  //    transform: rotate(-360deg);
  //  }
  //}
}