BigScreen/src/components/ChartBox/style.js

import styled from "styled-components";

export const ModelBox = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font-size: 0.14rem;
  background: linear-gradient(rgba(29, 56, 104, 0.72), rgba(4, 18, 51, 0.76));
  border: 1px solid;
  border-image: linear-gradient(
      45deg,
      rgba(74, 196, 253, 0.45),
      rgba(173, 219, 240, 0.34),
      rgba(146, 213, 249, 0.28)
    )
    1;
  opacity: 1;

  .tabBox {
    width: 100%;
    padding: 0.16rem;
    padding-bottom: 0;
  }
  ::-webkit-scrollbar {
    background: transparent;
  }
  .main {
    padding: 10px 14px 0;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 10px;

    .titleImg {
      width: 4px;
      height: 30px;
      margin-right: 18px;
    }
    .titleBg {
      width: 100%;
      height: 46.5px;
    }

    .title {
      font-size: 18px;
      // font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #c9efff;
      letter-spacing: 2px;
      margin-top: -4px;
    }
    .icon {
      width: 20px;
      height: 20px;
      pointer-events: initial;
      flex-shrink: 0;
    }

    .titleBorder {
      position: absolute;
      top: 40px;
      left: 13px;
      width: 100%;
      height: 1px;
    }

    .arrow {
      position: absolute;
      right: 14px;
      top: 29px;
      width: 26px;
      height: 26px;
      pointer-events: initial;
      transition: transform 0.2s;
    }

    .titleBg {
      height: 47px;
      width: 100%;
      background: url(${require("../../assets/chartBox/title-bg.png")});
      background-size: 100% 100%;
    }
    .titleBgMini {
      background-image: url(${require("../../assets/chartBox/title-bg-mini.png")});
    }

    .titleLeft {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
      display: flex;
      align-items: center;
    }
    .titleRight {
      flex-shrink: 0;
      width: 50px;
    }
  }
`;