//首页总体布局及格式
.mobile-content {
  .mb-header {
    background-color: #326FF4;
  }

  .mb-body {
    background-color: #ffffff;

    img{
      width: 100%;
    }
  }

  .mb-footer {
  }

  .el-tabs__item:hover {
    color: #326FF4 !important;
  }

  .el-tabs__item.is-active {
    color: #326FF4 !important;
  }

  .el-tabs__active-bar {
    background-color: #326FF4 !important;
  }
}

//首页楼层信息
.mobile-content {
  .mb-body {
    .mb-body-bg {
      height: 199px;
    }
    .mb-body-main {
      background-color: #ffffff;

      background-size: 100%;
      background-repeat: no-repeat;

      background-color: #fff;

      padding-top: 45%;

      .mb-body-main-box {
        border-radius: 25px;
        background-color: #fff;
        padding: 10px 12px 10px 12px;
        .mb-flooer-1 {
          .mb-box-body {
            .mb-box-body-item {
              .mb-box-body-remark {
                font-weight: 500;
                font-size: 11px;
                color: #424242;
                line-height: 18px;
              }
              .mb-box-body-event {
                .mb-box-body-event-label {
                  font-weight: bold;
                  font-size: 14px;
                  color: #326FF4;
                }
                .mb-box-body-event-items {
                  display: flex;
                  flex-wrap: wrap;
                  padding: 12px 12px 12px 12px;
                  background-color: #f7f7fa;
                  .mb-not-frist-row {
                    margin-top: 11px;
                  }
                  .mb-box-body-event-item {
                    display: flex;
                    justify-content: flex-start;
                    width: 50%;

                    .mb-box-body-event-item-img {
                      height: 36px;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      img {
                        width: 21px;
                        height: 21px;
                      }
                    }

                    .mb-box-body-event-item-label {
                      font-weight: 500;
                      font-size: 11px;
                      color: #424242;
                      margin-left: 7px;
                    }
                  }
                }
                .mb-box-body-event-prices {
                  display: flex;
                  justify-content: center;
                  margin-top: 17px;
                  flex-wrap: wrap;
                  .mb-box-body-event-price {
                    .mb-box-body-event-price-img-row {
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      .mb-box-body-event-price-img {
                        border: 1px solid #326FF4;
                        border-radius: 50%;

                        width: 43px;
                        height: 43px;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        display: flex;
                        img {
                          width: 22px;
                          height: 22px;
                        }
                      }
                    }

                    .mb-box-body-event-price-label {
                      font-weight: 500;
                      font-size: 12px;
                      color: #282828;
                      width: 120px;
                      text-align: center;

                      margin-top: 12px;
                    }
                  }
                }
                .mb-box-body-event-bt {
                  margin-top: 20px;
                  width: 100%;
                  background-color: #326FF4;
                  border-radius: 7px;
                  height: 45px;
                  line-height: 45px;
                  text-align: center;

                  font-weight: 500;
                  font-size: 16px;
                  color: #ffffff;
                }
              }
            }
          }
        }
        .mb-flooer-2 {
          margin-top: 21px;

          .mb-box-body {
            .mb-box-img {
              img {
                width: 100%;
                height: 145px;
              }
            }

            .mb-box-trips {
              display: flex;
              justify-content: flex-start;
              overflow-x: auto;
              .mb-box-trip {
                .mb-box-trip-box {
                  .mb-box-trip-box-title {
                    font-weight: 800;
                    font-size: 16px;
                    color: #d4a1c7;
                    display: flex;

                    .mb-box-trip-box-title-fh {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      .mb-box-trip-box-title-fh-icon {
                        width: 12px;
                        height: 12px;
                        background-color: #326FF4;
                        border-radius: 50%;
                      }
                    }

                    .mb-box-trip-box-title-label {
                      margin-left: 6px;
                    }
                  }
                  .mb-box-trip-box-body {
                    .mb-box-trip-content {
                    }
                    .mb-box-trip-img {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      img {
                        width: 375px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .mb-flooer-3 {
          margin-top: 21px;
          .mb-box-body {
            .mb-box-body-rows {
              display: flex;
              flex-wrap: wrap;
              .mb-box-body-item {
                width: 50%;
                padding: 11px 12px 11px 12px;
                background-color: #f7f7fa;
                .mb-box-body-img {
                  img {
                    width: 21px;
                  }
                }
                .mb-box-body-title {
                  font-weight: 800;
                  font-size: 12px;
                  color: #282828;

                  margin-top: 8px;
                }
                .mb-box-body-remark {
                  font-weight: 500;
                  font-size: 10px;
                  color: #282828;
                  line-height: 13px;
                  opacity: 0.7;

                  margin-top: 9px;
                }
              }
            }
          }
        }
      }
    }
  }
}

//box样式及格式
.mobile-content {
  .mb-box {
    .mb-box-header {
      .mb-box-header-fh-box {
        display: flex;
        flex-direction: column;
        justify-content: center;

        margin-right: 4px;
        .mb-box-header-fh {
          border-top: 3px solid #326FF4;
          width: 15px;
        }
      }
      .mb-box-header-label {
        font-weight: 800;
        font-size: 18px;
        color: #424242;
      }
    }

    .mb-box-body {
      margin-top: 14px;
    }
  }
}

//背景图片的统一样式
.mobile-content {
  .mb-bg-img-1 {
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

.mobile-content {
  .mb-title-flex-1 {
    display: flex;
    justify-content: flex-start;

    .mb-mb-title-flex-fh-box {
      display: flex;
      flex-direction: column;
      justify-content: center;

      margin-right: 4px;

      .mb-mb-title-flex-fh {
        border-left: 3px solid #a7c655;
        height: 15px;
      }
    }
  }
}