@import "variable";

@color: #2d2f33;
@highlightColor: #ff4a4a;
@seal-size: 150px;
@corner-width: 80px;
@corner-height: 150 / 125 * @corner-width;
.icon(@w, @h) {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: @w;
  height: @h;
}

.absolute(@t:auto,@l:auto, @r:auto, @b:auto) {
  position: absolute;
  top: @t;
  left: @l;
  right: @r;
  bottom: @b;
}

.tabs {
  padding-bottom: 50px;
  .loading {
    text-align: center;
    min-height: 500px;
    line-height: 500px;
    color: #ccc;
    font-size: 32px;
    border: none !important;

  }
  & > header {
    background-color: @color;
    margin-bottom: 25px;
    & > div {
      width: @container-width;
      margin: 0 auto;
      line-height: 1;
      & > a {
        display: block;
        float: left;
        padding: 20px 40px;
        font-size: 18px;
        font-weight: 300;
        color: #fff;
        &.active,
        &:hover {
          background-color: @highlightColor;
        }
      }
    }
  }
  & > section {
    min-height: 500px;
    & > div {
      width: @container-width;
      margin: 0 auto;
      display: none;
      &.active {
        display: block;
      }
    }
  }
}

.products {
  //width: @container-width;
  //margin: 0 auto;
  li {
    position: relative;
    border: 1px solid #939393;
    margin-bottom: 20px;
    & > .seal {
      .absolute(50%, 45px);
      .icon(@seal-size, @seal-size);
      margin-top: -@seal-size/2;
      & > span {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 24px;
        margin-top: -4px;
        text-align: center;
        line-height: 24px;
        font-size: 24px;
        font-style: normal;
        color: @highlightColor;
      }
    }
    & > .corner {
      .absolute(0, auto, 0);
      .icon(@corner-width, @corner-height);
    }
    & > div {
      border-left: 8px solid transparent;

      padding: 0 60px 0 230px;
      transition: border .5s;
      & > div {
        float: left;
        //min-height: 300px;
        color: @color;
        position: relative;
        &:first-child {
          width: 60%;
          padding: 40px 0;
          &:after {
            content: '';
            .absolute(0, 100%, 0, 0);
            width: 0;
            height: 100%;
            border-right: 1px solid #939393;
          }
          h2 {
            font-size: 18px;

          }
          h3 {
            color: @highlightColor;
            font-size: 16px;
            margin: 10px 0;
            &:before {
              margin-right: 1em;
              content: '总额度';
              color: @color;
            }
          }
          & > div {

            span {
              float: left;
              width: 33%;
              //text-align: center;
              font-size: 16px;
              line-height: 50px;
              & > p {
                float: left;
                text-align: center;
              }
              & > p:after {
                font-size: 16px;
                color: #848484;
                line-height: 16px;
                display: block;
              }
              &:nth-child(1) {
                font-size: 30px;
                color: @highlightColor;
                & > p:after {
                  content: '预期收益';
                }
              }
              &:nth-child(2) {
                & > p:after {
                  content: '起投(万)';
                }
              }
              &:nth-child(3) {
                & > p:after {
                  content: '期限';
                }
              }
            }
          }
        }
        &:last-child {
          width: 40%;
          & > div {
            padding: 20px 30px;
          }
          h4 {
            color: #000;
            font-size: 16px;
            border-left: 5px solid @color;
            padding-left: .5em;
            line-height: 1;
          }
          p {
            font-size: 14px;
            margin-top: 15px;
          }
        }
      }
    }

    .status(@index, @seal, @corner, @color) {
      &.status-@{index} {
        & > .seal {
          background-image: url(@seal);
        }
        & > .corner {
          background-image: url(@corner);
        }
        &:hover {
          & > div {
            border-left-color: @color;
          }
        }
      }
    }
    .status(11, 'https://res.fudou6.com/c/4/20160730/yetaWNvbi1zeWVk_235x235.png',
            'https://res.fudou6.com/c/4/20160730/vjbc3RhdHVzXzAz_125x158.png', @highlightColor);
    .status(5, 'https://res.fudou6.com/c/4/20160730/9m3aWNvbi13YWl0_236x236.png',
            'https://res.fudou6.com/c/4/20160730/37nc3RhdHVzXzEw_125x158.png', #000);
    .status(17, 'https://res.fudou6.com/c/4/20160730/9w0aWNvbi1wYXVzZQ==_236x236.png',
            'https://res.fudou6.com/c/4/20160730/g33c3RhdHVzXzE1_125x158.png', #43abb6);
    .status(21, 'https://res.fudou6.com/c/4/20160730/9r8aWNvbi15Zno=_236x236.png',
            'https://res.fudou6.com/c/4/20160730/cwnc3RhdHVzXzE5_125x158.png', #7a7b7c);
    .status(31, 'https://res.fudou6.com/c/4/20160730/q9gaWNvbi15d2M=_236x236.png',
            'https://res.fudou6.com/c/4/20160730/52mc3RhdHVzXzIz_125x158.png', #c5c5c5);
  }

  .product-item {
    cursor: pointer;
  }
}

.pagination {
  text-align: center;
  padding: 20px 0;
  a {
    padding: 5px 15px;
    margin: 0 1em;
    font-size: 16px;
    color: #fff;
    background-color: #939393;
    border-radius: 8px;
    &:hover {
      background-color: @color;
    }
  }
}

.screen() {
  .media(@screen-width-small, @container-width-small);
  .media(@screen-width, @container-width);
  .media(@screen-width-large, @container-width-large);
}

.media(@sw, @cw) {
  @media screen and (min-width: @sw) {
    .rules(@cw);
  }
}

.rules(@cw) {
  .tabs {
    & > header {
      & > div {
        width: @cw;
      }
    }
    & > section > div {
      width: @cw;
    }
  }
}

body {
  .screen();
}