@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;
}

.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;
    }
    & > .corner {
      .absolute(0, auto, 0);
      .icon(@corner-width, @corner-height);
    }
    & > div {
      border-left: 8px solid transparent;

      padding: 0 125px 0 236px;
      transition: border .5s;
      & > div {
        float: left;
        min-height: 300px;
        color: @color;
        position: relative;
        &:first-child {
          width: 60%;
          &: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;
            &:before {
              margin-right: 1em;
              content: '总额度';
              color: @color;
            }
          }
          & > div {
            span {
              float: left;
              width: 33%;
              text-align: center;
              font-size: 16px;
              line-height: 50px;
              &:after {
                font-size: 16px;
                color: #848484;
                line-height: 16px;
              }
              &:nth-child(1) {
                font-size: 30px;
                color: @highlightColor;
                &:after {
                  content: '预期收益';
                }
              }
              &:nth-child(2) {
                &:after {
                  content: '起投(万)';
                }
              }
              &:nth-child(3) {
                &:after {
                  content: '期限';
                }
              }
            }
          }
        }
        &:last-child {
          width: 40%;
          h4 {
            color: #000;
            font-size: 16px;
            border-left: 5px solid @color;
          }
          p {
            font-size: 14px;
          }
        }
      }
    }

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

}