原生div实现租金对比

 

 

<div class="section">
  <div class="top" *ngIf="tagData['data']['myValue'];else falsyTemplate" [ngStyle]="{
      'margin-left':
        tagData['data']['myValue'] <= tagData['data']['maxValue'] / 2
          ? (tagData['data']['myValue'] / tagData['data']['maxValue'] + 0.01) *
              100 +
            '%'
          : 0,
      'text-align':
        tagData['data']['myValue'] <= tagData['data']['maxValue'] / 2
          ? 'left'
          : 'right',
      'margin-right':
        tagData['data']['myValue'] > tagData['data']['maxValue'] / 2
          ? (1.01 - tagData['data']['myValue'] / tagData['data']['maxValue']) *
              100 +
            '%'
          : 0
    }">
    <div class="headBox" *ngIf="tagData['data']['myValue'] <= tagData['data']['maxValue'] / 2">
      <div class="slash"></div>
      <div class="line"></div>
    </div>
    <div class="text">
      <span>{{ tagData["data"]["myLabel"] }}</span>
    </div>
    <div class="tailBox" *ngIf="tagData['data']['myValue'] > tagData['data']['maxValue'] / 2">
      <div class="line"></div>
      <div class="slash"></div>
    </div>
  </div>
  <ng-template #falsyTemplate>
    <div style="background-color: transparent;color: transparent;">&nbsp;</div>
  </ng-template>
  <div class="middle">
    <span class="head">{{ tagData["data"]["minValue"] }}</span>
    <span class="tail">{{ tagData["data"]["maxValue"] }}</span>
    <div class="graph"></div>
  </div>
  <div class="bottom" [ngStyle]="{
      'margin-left':
        tagData['data']['avgValue'] <= tagData['data']['maxValue'] / 2
          ? (tagData['data']['avgValue'] / tagData['data']['maxValue'] + 0.01) *
              100 +
            '%'
          : 0,
      'text-align':
        tagData['data']['avgValue'] <= tagData['data']['maxValue'] / 2
          ? 'left'
          : 'right',
      'margin-right':
        tagData['data']['avgValue'] > tagData['data']['maxValue'] / 2
          ? (1.01 - tagData['data']['avgValue'] / tagData['data']['maxValue']) *
              100 +
            '%'
          : 0
    }">
    <div class="headBox" *ngIf="tagData['data']['avgValue'] <= tagData['data']['maxValue'] / 2">
      <div class="slash"></div>
      <div class="line"></div>
    </div>
    <div class="text">
      <span>{{ tagData["data"]["avgLabel"] }}</span>
    </div>
    <div class="tailBox" *ngIf="tagData['data']['avgValue'] > tagData['data']['maxValue'] / 2">
      <div class="line"></div>
      <div class="slash"></div>
    </div>
  </div>
</div>

@import "../../../customGlobal.scss";
.section {
  margin: 1.25rem 1.25rem 0;
  .top {
    .headBox {
      display: inline-block;
      vertical-align: bottom;
      margin-right: 0.31rem;
      .line {
        display: inline-block;
        vertical-align: bottom;
        width: 1.25rem;
        height: 1.56rem;
        background: linear-gradient(0deg, transparent calc(100% - 0.5px), #ff9401 0.5px);
      }
      .slash {
        display: inline-block;
        vertical-align: bottom;
        width: 1.56rem;
        height: 1.56rem;
        background: linear-gradient(
          to bottom right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) calc(50% - 0.5px),
          #ff9401 50%,
          rgba(0, 0, 0, 0) calc(50% + 0.5px),
          rgba(0, 0, 0, 0) 100%
        );
      }
    }
    .text {
      display: inline-block;
      vertical-align: middle;
      height: 1.88rem;
      background: linear-gradient(90deg, rgba(255, 99, 20, 1) 0%, rgba(255, 149, 0, 1) 100%);
      box-shadow: 0rem 0.13rem 0.25rem 0rem rgba(255, 103, 15, 0.3);
      @if $appType == "LJ" {
        background: linear-gradient(90deg, #ffca3a 0%, #ffe14a 100%);
        box-shadow: 0rem 0.13rem 0.25rem 0rem rgba(255, 170, 0, 0.3);
      }
      border-radius: 0.94rem;
      padding: 0 1.06rem;
      margin-bottom: 0.63rem;
      span {
        font-size: 0.81rem;
        font-weight: 400;
        color: #ffffff;
        @if $appType == "LJ" {
          color: $LJLabelColor;
        }
        line-height: 1.88rem;
      }
    }
    .tailBox {
      display: inline-block;
      vertical-align: bottom;
      margin-left: 0.31rem;
      .line {
        display: inline-block;
        vertical-align: bottom;
        width: 1.25rem;
        height: 1.56rem;
        background: linear-gradient(0deg, transparent calc(100% - 0.5px), #ff9401 0.5px);
      }
      .slash {
        display: inline-block;
        vertical-align: bottom;
        width: 1.56rem;
        height: 1.56rem;
        background: linear-gradient(
          to top right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) calc(50% - 0.5px),
          #ff9401 50%,
          rgba(0, 0, 0, 0) calc(50% + 0.5px),
          rgba(0, 0, 0, 0) 100%
        );
      }
    }
  }
  .middle {
    position: relative;
    span {
      font-size: 0.81rem;
      font-weight: 400;
      color: #27282e;
      line-height: 0.81rem;
    }
    .head {
      position: absolute;
      left: 0;
      bottom: 0.81rem;
    }
    .tail {
      position: absolute;
      right: 0;
      bottom: 0.81rem;
    }
    .graph {
      height: 0.5rem;
      background: linear-gradient(270deg, rgba(255, 99, 20, 1) 0%, rgba(255, 149, 0, 1) 100%);
      @if $appType == "LJ" {
        background: linear-gradient(90deg, #ffe14a 0%, #ffca3a 100%);
      }
      border-radius: 0.31rem;
    }
  }
  .bottom {
    .headBox {
      display: inline-block;
      vertical-align: top;
      margin-right: 0.31rem;
      .line {
        display: inline-block;
        vertical-align: top;
        width: 1.25rem;
        height: 1.56rem;
        background: linear-gradient(180deg, transparent calc(100% - 0.5px), #b6b7bf 0.5px);
      }
      .slash {
        display: inline-block;
        vertical-align: top;
        width: 1.56rem;
        height: 1.56rem;
        background: linear-gradient(
          to top right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) calc(50% - 0.5px),
          #b6b7bf 50%,
          rgba(0, 0, 0, 0) calc(50% + 0.5px),
          rgba(0, 0, 0, 0) 100%
        );
      }
    }
    .text {
      display: inline-block;
      vertical-align: middle;
      height: 1.88rem;
      background: #ffffff;
      box-shadow: 0rem 0.06rem 0.31rem 0rem rgba(39, 40, 46, 0.25);
      @if $appType == "LJ" {
        box-shadow: 0rem 0.06rem 0.31rem 0rem rgba(37, 38, 41, 0.2);
      }
      border-radius: 0.94rem;
      opacity: 0.95;
      padding: 0 1.06rem;
      margin-top: 0.63rem;
      span {
        font-size: 0.81rem;
        font-weight: 400;
        color: #27282e;
        @if $appType == "LJ" {
          color: $LJLabelColor;
        }
        line-height: 1.88rem;
      }
    }
    .tailBox {
      display: inline-block;
      vertical-align: top;
      margin-left: 0.31rem;
      .line {
        display: inline-block;
        vertical-align: top;
        width: 1.25rem;
        height: 1.56rem;
        background: linear-gradient(180deg, transparent calc(100% - 0.5px), #b6b7bf 0.5px);
      }
      .slash {
        display: inline-block;
        vertical-align: top;
        width: 1.56rem;
        height: 1.56rem;
        background: linear-gradient(
          to bottom right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) calc(50% - 0.5px),
          #b6b7bf 50%,
          rgba(0, 0, 0, 0) calc(50% + 0.5px),
          rgba(0, 0, 0, 0) 100%
        );
      }
    }
  }
}