rongxin.nongjing.expo/src/components/pannel/index.scss

.pannel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  // 頭部區域
  .header_box {
    position: relative;
    height: 35px;
    overflow: visible !important;

    .top_line {
      display: flex;
      justify-content: space-between;
      background-color: rgba(22, 60, 114, 1);
      width: 100%;
      height: 2px;

      .left_sign {
        height: 2px;
        width: 13px;
        background-color: rgba(53, 143, 255, 1);
      }

      .right_sign {
        height: 2px;
        width: 13px;
        background-color: rgba(53, 143, 255, 1);
      }
    }

    .header {
      margin-top: 2px;
      height: 32px;
      background: rgba(8, 33, 71, 1);

      .title_bk {
        // font-style: italic;
        font-weight: 600;
        height: 50px;
        margin-left: 20px;
        line-height: 32px;
        text-align: center;

        .icon {
          display: block;
          background: url('./icon.png');
          background-size: 100% 100%;
          width: 18px;
          height: 18px;
        }

        p {
          margin-left: 10px;
        }
      }

      .more {
        margin-right: 20px;
      }
    }

    .light {
      position: absolute;
      bottom: -15px;
      left: 30px;
      background: url('./light.png');
      background-size: 100% 100%;
      width: 280px;
      height: 30px;
      animation: lightmove 4s infinite;
    }
  }

  // 内容区域
  .body {
    margin: 2px;
    padding: 10px;
    width: 100%;
    position: relative;
    flex: 1;
    background-color: rgba(11, 28, 58, 1);
    overflow: hidden;

    .bottom_line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      background-color: rgba(22, 60, 114, 1);
      width: 100%;
      height: 2px;

      .left_sign {
        height: 2px;
        width: 13px;
        background-color: rgba(53, 143, 255, 1);
      }

      .right_sign {
        height: 2px;
        width: 13px;
        background-color: rgba(53, 143, 255, 1);
      }
    }

    div {
      width: 100%;
      height: 100%;
    }
  }
}

@keyframes lightmove {

  /* 动画关键帧 */
  0% {
    opacity: 1;
    transform: translateX(0px);
    /* 样式 */
  }

  50% {
    opacity: 0.2;
    transform: translateX(170px);
  }

  /* 。。。 */
  100% {
    opacity: 1;
    transform: translateX(0px);
    /* 样式 */
  }
}