newcpms/ui/src/style/common.scss

#materialBalance {
    padding: 0.2rem;
    height: 8.7rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
        height: 8.5rem;
        border-radius: 0.125rem;
      }
      .text {
        color: #c3cbde;
      }
      .chart-box {
        margin-top: 0.2rem;
        width: 2.125rem;
        height: 2.125rem;
        .active-ring-name {
          padding-top: 0.125rem;
        }
      }
  
      .bottom-data {
        .item-box {
          float: right;
          position: relative;
          width: 50%;
          color: #d3d6dd;
          // 金币
          .coin {
            position: absolute;
            left: 0.1rem;
            top: 0.2125rem;
            font-size: 0.25rem;
            color: #ffc107;
          }
          .colorYellow {
            color: yellowgreen;
          }
        }
      }
      .arrow {
        width: 120px;
        height: 20px;
        background: skyblue;
        // transform: rotate(-10deg);
        // animation:  ;
        background-color: red; /* 针对不支持渐变的浏览器 */
        background-image: linear-gradient(to right, black, skyblue);
      }
    .layout {
        display: flex;
        flex-direction: row;
        .layout_left {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: flex-start;
            justify-content: flex-start;
            padding-top: 20px;
            img {
              width: 6em;
              height: 4.8em;
              margin-bottom: 1.2em;
              padding-bottom: 1.6em;
            }
        }
        .layout_center {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: flex-start;
            justify-content: flex-start;
            padding-top: 20px;
            padding-left: 23px;
            img {
              width: 6em;
              height: 4.8em;
              margin-bottom: 1.2em;
              padding-bottom: 1.6em;
            }
        }
        .layout_right {
            padding-top: 2em;
            // padding-left: 23px;
            border: 1px dashed;
            width: 25em;
            margin-left: 2em;
            .row {
                width: 100%;
                display: flex;
                flex-direction: row;
                .col {
                    img {
                      width: 6em;
                      height: 7.8em;
                      padding-bottom: 0.9em;
                    }
                }
            }
        }
        .layout_arrow {
            margin-left: 2em;
            img {
              position: relative;
              top: 26em;
              /* right: 0em; */
              padding-bottom: 1.2em;
              width: 12em;
              width: 10em;
              height: 4.8em;
            }
        }
        .layout_EOB {
          .thin_EOB {
            width: 7em;
            height: 5.8em;
            margin-bottom: 1.2em;
            padding-bottom: 1.6em;
            position: relative;
            right: 1em;
          }
        }
        .layout_thin_arrow {
          position: relative;
          right: 10em;
          bottom: 2em;
          .thin_arrow {
            width: 2em;
            height: 18em;
            position: relative;
            left: 4em;
            top: 7em;
          }
          img {
            position: relative;
            top: 18em;
            right: -1em;
            padding-bottom: 0.9em;
            width: 4.9em;
          }
        }
        .layout_stove {
          img {
            position: relative;
            right: 9em;
            top: 4.5em;
            padding-bottom: 1em;
            width: 12em;
          }
        }
        .layout_cricle_stove {
          .stove_1 {
            position: relative;
            top: 22.3em;
            right: 19em;
          }
          .stove_2 {
            position: relative;
            top: 22.3em;
            right: 8em;
          }
          .stove_3 {
            position: relative;
            right: 13em;
            top: 5em;
          }
          .stove_4 {
            position: relative;
            top: 40em;
            left: -33.7em;
          }
          img {
            padding-bottom: 0.9em;
            width: 4.9em;
          }
        }
    }
}