@import 'app/style/default.scss';

#chart-content {
  background: #fff;
  .chart-menu {
    display: flex;
    display: -webkit-flex;
    height: pxToRem(32);
    line-height: pxToRem(33);
    border-bottom: 1px solid #F6F5F7;
    padding: 0 pxToRem(10);
    li {
      flex: 1;
      -webkit-flex: 1;
      text-align: center;
      &.active {
        color: #DFB774;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          display: block;
          background: #DFB774;
          width: 30%;
          left: 35%;
          height: 3px;
          bottom: 0;
        }
      }
      &.iconfont {
        width: pxToRem(35);
        flex: none;
        -webkit-flex: none;
      }
    }
  }
  #chart-box {
    line-height: pxToRem(200);
    text-align: center;
  }
}

#h-chart-content {
  position: fixed;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  .h-chart-head {
    font-size: pxToRem(14);
    .pro-name {
      font-size: pxToRem(14);
      padding: 0 10px;
    }
    .pro-price, .up-o-down {
      font-size: pxToRem(12);
    }
    .up-o-down {
      span {
        padding: 0 pxToRem(2);
      }
    }
    .pro-price {
      padding-left: pxToRem(6);
      > span {
        padding: 0 6px;
      }
    }
    .h-quote-info {
      position: relative;
      background: -webkit-linear-gradient(left top, #ffd898, #D0A256);
      background: linear-gradient(to bottom right, #ffd898, #D0A256);
      color: #fff;
      height: 40px;
      line-height: 40px;
      span {
        display: inline-block;
      }
      .iconfont {
        float: right;
        font-size: pxToRem(22);
        padding: 0 10px;
      }
    }
  }
  .h-chart-menu {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border: 1px solid #dddddd;
    li {
      flex: 1;
      -webkit-flex: 1;
      text-align: center;
      &.active {
        color: #DFB774;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          display: block;
          background: #DFB774;
          width: 30%;
          left: 35%;
          height: 3px;
          bottom: 0px;
        }
      }
      &.iconfont {
        font-size: pxToRem(24);
        width: pxToRem(35);
        flex: none;
        -webkit-flex: none;
      }
    }
  }
}