bixi/src/app/styles/home.less

企业级中后台前端解决方案

@index-home-color: #8995a0;
@index-home-bg: #007cfe;
@index-home-max-width: 1200px;
@white: #fff;
@whiteFontColor: darken(@white, 15%);
@darkerWhiteFontColor: darken(@white, 35%);

@blackFontColor: darken(#000, 15%);


.index-page {

  .header-wrapper{
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 78px;
    background: linear-gradient(135deg, #1841C3 0%, #086DD9 100%);
    .bg-placeholder {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url('/assets/img/solution-bg.svg');
      background-size: cover;
    }
    .header-content {
      width: 1135px;
      height: 100%;
      margin: 0 auto;
      .app-logo {
        margin-left: 0;
        background-image: url('/assets/img/logo-white.svg');
      }
      #nav {
        &.ant-menu-horizontal {
          & > .ant-menu-item {
            color: @whiteFontColor;
            border-top: none;
          }
          .ant-menu-item-selected {
            color: @white;
          }
        }
      }
      #header {
        box-shadow: none;
      }
      .header-menu {
        .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector,
        .ant-select-arrow {
          color: @whiteFontColor;
          background-color: transparent;
        }
      }
      #nav.ant-menu-horizontal > .ant-menu-item-selected {
        border-top: none;
      }
    }
  }
  .home-wrapper {
    color: @whiteFontColor;
    h1, h2, h3 {
      margin-bottom: 20px;
      color: @white;
      font-weight: 600;
    }
    p {
      font-weight: 400;
      font-size: 14px;
    }
    dt {
      font-size: 22px;
      text-align: center;
    }
    .bg-placeholder {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #1841C3 0%, #086DD9 100%);
    }
    .fix-size {
      width: 1135px;
      height: 100%;
      margin: 0 auto;
    }
    .card-wrapper {
      margin-bottom: 60px;
      &:last-child {
        margin-bottom: 0;
      }
      &.solution {
        position: relative;
        height: 585px;
        text-align: center;
        background-image: url('/assets/img/solution-bg.svg');
        background-size: cover;
        .fix-size {
          display: flex;
          padding-top: 125px;
        }
        .left {
          position: relative;
          flex: 1;
        }
        .right {
          flex: 1;
          text-align: left;
          img {
            width: 672px;
            height: 462px;
          }
        }
        .desc {
          position: absolute;
          top: 110px;
          right: 0;
          color: @bixi-white-light;
          text-align: left;
          h1 {
            margin-bottom: 15px;
            font-size: 32px;
          }
          p {
            font-size: 18px;
          }
        }
        .btn-group {
          margin-top: 30px;
          > a {
            margin-right: 24px;
            padding: 8px 11px;
            color: @whiteFontColor;
            font-size: 16px;
            border: 1px solid rgba(255, 255, 255, 0.65);
            border-radius: 2px;
            &:active, &.active {
              color: #107CEE;
              background-color: #fff;
            }
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }

      &.introduce {
        // height: 326px;
        .fix-size {
          display: flex;
        }
        .introduce-item {
          display: inline-block;
          width: 33%;
          margin: 0 10px;
          border: 1px solid #EDF1F7;
          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            margin-right: 0;
          }
          &:hover {
            box-shadow: 0 0 10px 3px #eee;
          }
          img {
            width: 100%;
            height: 175px;
          }
          h1 {
            margin: 20px 0 10px;
            color: @blackFontColor;
            font-weight: 500;
            font-size: 22px;
            text-align: center;
          }
          p {
            // padding: 0 10px;
            padding: 0 28px;
            color: @darkerWhiteFontColor;
            font-size: 16px;
          }
        }
      }

      &.feature {
        position: relative;
        height: 840px;
        color: @whiteFontColor;
        background-image: url('/assets/img/feature-bg.svg');
        background-size: cover;
        dt {
          padding: 60px 0;
          color: @white;
          font-size: 36px;
        }
        dd {
          position: relative;
          float: left;
          width: 33%;
          height: 300px;
          margin: 0;
          text-align: center;
          border: 1px solid #003A84;
          &:nth-child(2), &:nth-child(3), &:nth-child(4) {
            border-bottom-width: 0;
          }
          &:nth-child(2), &:nth-child(3), &:nth-child(5), &:nth-child(6) {
            border-right-width: 0;
          }
          .color-block {
            position: absolute;
            top: 0;
            left: 0;
            width: 16px;
            height: 16px;
          }
          &.mature-design .color-block {
            background-color: #fa0;
          }
          &.stable-reliable .color-block {
            background-color: #42AAFF;
          }
          &.strong-expansibility .color-block {
            background-color: @white;
          }
          &.excellent-performance .color-block {
            background-color: #0095FF;
          }
          &.module-decoupling .color-block {
            background-color: #F26C4F;
          }
          &.rapid-development .color-block {
            background-color: #2DE69B;
          }
          h1 {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 24px;
          }
          p {
            display: inline-block;
            padding: 0 28px;
            color: @bixi-white-light;
            font-size: 16px;
            text-align: left;
          }
          img {
            width: 98px;
            height: 98px;
            margin-top: 32px;
          }

        }
      }

      &.consumer {
        dt {
          margin: 20px 0 45px;
          padding-bottom: 12px;
          color: @blackFontColor;
          font-size: 36px;
        }
        dd {
          display: inline-block;
          width: 20%;
          padding: 5px;
          img {
            width: 210px;
            height: 113px;
            // outline: 1px dashed #ddd;
          }
        }
      }

    }
  }

  @media (max-width: @screen-sm-width) {
    .header-wrapper {
      .header-content {
        width: 720px;
      }
    }
    .home-wrapper {
      .fix-size {
        width: 720px;
      }
      .card-wrapper {
        &.solution {
          height: 445px;
          .fix-size {
            padding-top: 60px;
          }
          .right img{
            width: 465px;
            height: 320px;
            margin-top: 66px;
          }
          .desc {
            top: 70px;
            h1 {
              margin-bottom: 15px;
              font-size: 22px;
            }
            p {
              font-size: 15px;
            }
          }
          .btn-group {
            > a {
              padding: 8px 15px;
              font-size: 14px;
            }
          }
        }
        &.introduce {
          // height: 245px;
          .introduce-item {
            img {
              height: 115px;
            }
            h1 {
              margin: 20px 0 10px;
              font-size: 18px;
            }
            p {
              padding: 0 10px;
              font-size: 14px;
            }
          }
        }
        &.feature {
          height: 600px;
          dt {
            padding: 45px 0 30px;
            font-size: 30px;
          }
          dd {
            height: 220px;
            h1 {
              margin-bottom: 10px;
              font-size: 20px;
            }
            p {
              padding: 0 10px;
              font-size: 14px;
            }
            img {
              width: 80px;
              height: 80px;
              margin-top: 25px;
            }
          }
        }
        &.consumer {
          dt {
            margin-bottom: 35px;
            font-size: 30px;
          }
          dd img {
            width: 130px;
            height: 70px;
          }
        }
      }
    }
  }
  @media (max-width: @screen-mobile-width) {
    .xheader-wrapper {
      height: 45px;
      .header-content {
        width: 100%;
      }
    }
    .home-wrapper {
      .fix-size {
        width: 100%;
      }
      .card-wrapper {
        margin-bottom: 30px;
        &.solution {
          height: 518px;
          .fix-size {
            display: block;
          }
          .right {
            overflow: hidden;
            img{
              width: 100%;
              height: 220px;
            }
          }
          .desc {
            position: static;
            padding: 0 10px;
            h1 {
              margin-bottom: 10px;
              font-size: 20px;
            }
            p {
              font-size: 14px;
            }
          }
          .btn-group {
            padding-left: 10px;
            text-align: left;
            > a {
              font-size: 12px;
            }
          }
        }
        &.introduce {
          height: auto;
          padding: 0 10px;
          .fix-size {
            display: block;
          }
          .introduce-item {
            width: 100%;
            margin: 10px 0;
            img {
              height: 188px;
            }
            h1 {
              margin: 15px 0 5px;
              font-size: 18px;
            }
            p {
              padding: 0 10px;
              font-size: 14px;
            }
          }
        }
        &.feature {
          height: 1295px;
          .fix-size {
            padding: 0 30px;
          }
          dt {
            padding: 25px 0 15px;
            font-size: 20px;
          }
          dd {
            width: 100%;
            height: 200px;
            border-width: 1px !important;
            border-bottom-width: 0 !important;
            &:last-child {
              border-bottom-width: 1px !important;
            }
            h1 {
              margin: 10px 0;
              font-size: 18px;
            }
            p {
              padding: 0 25px;
              font-size: 14px;
            }
            img {
              width: 66px;
              height: 66px;
              margin-top: 15px
            }
          }
        }
        &.consumer {
          padding-left: 13px;
          dt {
            margin-bottom: 25px;
            padding-bottom: 5px;
            font-size: 22px;
          }
          dd {
            width: 33%;
            padding: 0;
            img {
              width: 108px;
              height: 58px;
            }
          }
        }
      }
    }
  }

  // color: #697b8c;

  // #header {
  //   width: 100%;
  //   // max-width: 1200px;
  //   margin: 0 auto;
  //   // padding: 0 24px;
  //   box-shadow: none;
  // }
  // .page-banner__slogan-btn {
  //   button {
  //     background-color: @index-home-bg !important;
  //     border-color: @index-home-bg !important;
  //   }
  // }

  // #nav.ant-menu-horizontal > .ant-menu-item-selected {
  //   border-top: none;
  // }

  // .page {
  //   position: relative;
  //   width: 100%;
  //   max-width: @index-home-max-width;
  //   margin: auto;
  //   padding: 0 24px;
  //   &-wrapper {
  //     position: relative;
  //     z-index: 1;
  //     overflow: inherit;
  //     color: @index-home-color;
  //     font-family: Avenir, 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
  //       'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  //     font-variant: tabular-nums;
  //     background: @component-background;
  //   }
  //   h2 {
  //     padding: 80px 0 40px;
  //     color: @index-home-color;
  //     font-weight: 400;
  //     font-size: 38px;
  //     line-height: 46px;
  //     text-align: center;
  //   }
  // }

  // .page-banner {
  //   position: relative;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   width: 100%;
  //   max-width: @index-home-max-width;
  //   height: 520px;
  //   margin: auto;
  //   padding: 0 40px;
  //   &__slogan {
  //     width: 54%;
  //     min-width: 420px;
  //     max-width: 500px;
  //     min-height: 336px;
  //     color: #0d1a26;
  //     h1 {
  //       margin: 12px 0;
  //       font-size: 54px;
  //       font-family: 'Futura', 'Helvetica Neue For Number', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC',
  //         'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  //     }
  //     p {
  //       font-size: 20px;
  //     }
  //     .ant-btn {
  //       min-width: 110px;
  //       height: 40px;
  //       margin-right: 16px;
  //       font-size: 16px;
  //       border-radius: 20px;
  //     }
  //     &-btn {
  //       display: flex;
  //       align-items: center;
  //       margin-top: 64px;
  //       line-height: 40px;
  //       .github {
  //         display: flex;
  //       }
  //     }
  //   }
  //   &__img {
  //     position: absolute;
  //     right: 0;
  //     bottom: 0;
  //     width: 46%;
  //     max-width: 522px;
  //     height: 420px;
  //     padding-right: 40px;
  //     overflow: hidden;
  //     img {
  //       height: 100%;
  //       border-radius: 8px;
  //     }
  //   }
  // }

  // .page-feature {
  //   position: relative;
  //   padding-bottom: 80px;
  //   color: #fff;
  //   &__bg {
  //     position: absolute;
  //     top: 0;
  //     right: 0;
  //     bottom: 0;
  //     left: 0;
  //     margin: 0;
  //     background: @index-home-bg;
  //     transform: skewY(-4.5deg);
  //     &-bottom {
  //       position: absolute;
  //       right: 0;
  //       bottom: 0;
  //       left: 0;
  //       height: 200px;
  //       background: @index-home-bg;
  //     }
  //   }
  //   h2,
  //   h3 {
  //     color: #fff;
  //   }
  //   h2 {
  //     padding-top: 100px;
  //   }
  //   h3 {
  //     font-size: 18px;
  //   }
  //   &__item {
  //     display: flex;
  //     height: 100px;
  //     margin-bottom: 56px;
  //   }
  //   .anticon {
  //     margin-right: 16px;
  //     padding-top: 8px;
  //     font-size: 36px;
  //   }
  // }

  // .page-theme {
  //   margin-bottom: 48px;
  //   overflow: hidden;
  //   background: #fff;
  //   &__item {
  //     display: block;
  //     margin-bottom: 32px;
  //     color: @index-home-color;
  //     text-align: center;

  //     &:hover {
  //       color: @index-home-bg;
  //     }
  //     img {
  //       max-width: 80%;
  //     }

  //     h3,
  //     p {
  //       margin-top: 16px;
  //     }
  //   }
  // }

  // // 768
  // @media (max-width: @screen-md-max) {
  //   #logo {
  //     padding-left: 0;
  //   }
  //   .page-banner {
  //     &__slogan {
  //       width: 100%;
  //       min-width: 100%;
  //       max-width: 100%;
  //       text-align: center;
  //       &-btn {
  //         flex-wrap: wrap;
  //         justify-content: center;
  //         > a {
  //           margin-bottom: 16px;
  //         }
  //       }
  //     }
  //     &__img {
  //       display: none;
  //     }
  //   }
  //   .page-feature {
  //     &__item {
  //       flex-direction: column;
  //       text-align: center;
  //       .anticon {
  //         margin: 0 0 16px 0;
  //       }
  //     }
  //   }
  // }
}

.color-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 4px 0;
  .inner-box {
    padding: 8px 0;
    background: #0092ff;
  }
  .color-example {
    .color-group {
      margin-bottom: 32px;
      padding: 0;

      .color-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        margin-right: 0;
        padding: 6px 25px 6px 16px;
        font-weight:400;
        box-shadow: 1px 1px 3px 0 #d9d9d9;
        cursor: pointer;
        transition: all .3s linear;
        .value {
          padding-left: 10px;
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
          -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
          transition: all .5s linear;
        }

        &:last-child {
          border-radius: 0 0 5px 5px;
        }
        &:first-child {
          border-radius: 5px 5px 0 0;
        }
        &:hover {
          margin-right: -15px;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
      .color-item-main {
        height: 64px;
      }
    }
    .ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}


.ant-back-top {
  right: 87px !important;
  bottom: 25px !important;
}