实现背景图模块

  //我的积分
  renderIntegral() {
    return (
      <View className="myIntegralView">
        <Image className="bg" src={require("../../assets/my/sign/bg.png")} />
        <View className="myIntegral">
          <View className="topView">
            <Text className="dot"></Text>
            <Text className="line"></Text>
            <Text className="integral">我的积分</Text>
            <Text className="line"></Text>
            <Text className="dot"></Text>
          </View>
          <Text className="num">50</Text>
          <Text className="desc">连续签到领翻倍积分</Text>
        </View>
      </View>
    );
  }

 //我的积分
  .myIntegralView {
    position: relative;
    left: 30px;
    top: 27px;
    width: 690px; //图片宽度
    height: 246px; //图片高度

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .myIntegral {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      color: #996f23;
      display: flex;
      flex-direction: column;
      align-items: center;

      .topView {
        display: flex;
        align-items: center;
        font-size: 28px;

        .integral {
          margin: 0 14px;
        }

        .dot {
          width: 6px;
          height: 6px;
          background-color: #996f23;
          margin-right: 4px;
        }

        .dot:last-child {
          margin-left: 4px;
        }

        .line {
          width: 21px;
          height: 6px;
          background-color: #996f23;
        }
      }

      .num {
        font-size: 60px;
        font-weight: bold;
        margin: 10px 0 20px 0;
      }

      .desc {
        font-size: 24px;
      }
    }

  }