.index {
  // background-color: #002329;
  // width: 100vw;
  // height: 100vh;
  padding: 40px;

  .index-title {
    display: flex;
    flex-direction: row;
    font-weight: 700;
    align-items: center;
    .yidooplanet {
      margin-left: 20px;
    }
  }

  .index-tags {
    margin-top: 20px;
    .index-AtTag {
      background-color: rgb(99 102 241);
      color: white;
    }
  }

  .index-article {
    margin-top: 60px;
    // background-color: yellow;
    font-size: 30px;
    .spanText {
      font-weight: 700;
    }
  }

  .index-list {
    margin-top: 60px;
  }

  .index-book {
    margin-top: 60px;
    // width: 100%;
    height: 300px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: center;
    // background-color: #f0f0f0;
    background-color: #f0f5ff;
    .bookImg {
      width: 40%;
      height: 100%;
      // background-color: #1bb14e;
    }

    .book-middle {
      width: 20px;
      height: 100%;
    }
    .nomad-right {
      // margin-left: 20px;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-between;
      // background-color: yellow;
      // width: 100%;
      flex: 1;
      height: 100%;

      .nomad-title {
        font-size: 35px;
        display: flex;
        flex-direction: row;
        align-items: center;
        // justify-content: space-between;
        // background-color: red;
        .bookNmae {
          margin-left: 10px;
        }
      }
      .subtitle {
        font-size: 20px;
        color: red;
      }
      .bookText {
        font-size: 20px;
      }
      .bookPrice {
        font-size: 30px;
        display: flex;
        flex-direction: row-reverse;
        .join {
          font-size: 20px;
          width: 100px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          background-color: #1bb14e;
          color: #fff;
          border-radius: 15%;
          position: relative;
          bottom: 10px;
          right: 10px;
        }
      }
    }
  }

  .software {
    margin-top: 60px;
    font-size: 30px;
    padding: 30px;
    .emojiTitle {
      color: rgb(99 102 241);
    }
    .emojitext {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-size: 28px;
    }
    .software-emoji {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .index-meetup {
    margin-top: 60px;

    .meetup-card {
      display: flex;
      flex-direction: row;
      // background-color: yellow;

      .meetup-left {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        // background-color: red;
      }
      .meetup-right {
        font-size: 20px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        // align-items: center;
        justify-content: space-between;
        // background-color: green;
        flex: 1;
        .title {
        }
        .address {
          // margin-top: 30px;
        }
        .meetBtn {
          display: flex;
          // flex-direction: row-reverse;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .meetupSrcItem{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            // background-color: red;

            .meetupSrc {
              // width: 20px;
              // height:20px;
              border-radius: 15%;
              // background-color: yellow;
              margin-left: 10px;
            }
          }
      
          .join {
            width: 100px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background-color: #1bb14e;
            color: #fff;
            border-radius: 15%;
            position: relative;
            // bottom: 10px;
            right: -10px;
          }
        }
      }
    }
  }

  .contack {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .wechatNum {
      font-size: 34px;
      color: #1bb14e;
    }
  }

  .emojiModel {
    .modelText {
      font-size: 22px;
    }
    .model-emoji {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }

  .payBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
