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

  }
   .tabs-header {
    background-color: @color;
    margin-bottom: 25px;
    div {
      width: @container-width;
      margin: 0 auto;
      line-height: 1;
       a {
        display: block;
        float: left;
        padding: 20px 60px;
        font-size: 18px;
        font-weight: 300;
        color: #fff;
        &.active,
        &:hover {
          background-color: @highlightColor;
        }
      }
    }
  }
  .section {
    min-height: 500px;
    .tabs-panels-item {
      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);
    }
    .main {
      border-left: 8px solid transparent;

      padding: 0 60px 0 230px;
      transition: border .5s;
      .main-left,
      .main-right {
        float: left;
        //min-height: 300px;
        color: @color;
        position: relative;
      }
      .main-left {
        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;
            }
            &.main-left-01 {
              font-size: 30px;
              color: @highlightColor;
              p:after {
                content: '预期收益';
              }
            }
            &.main-left-02 {
              p:after {
                content: '起投(万)';
              }
            }
            &.main-left-03 {
              p:after {
                content: '期限';
              }
            }
          }
        }
      }
      .main-right {
        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 {
          .main {
            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();
}

