tips-nearby-store-comp.scss 3.01 KB
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

$contentWidth:690px;

.comp-item {
  @include border-top-radius(32px);
  position: relative;
  background-color: #fff;
  // width: 750px;
  max-height: 860px;

  .cont {
    // width: 750px;


    .nav {
      width: 690px;
      height: 108px;
      margin: 0 auto;
      border-bottom: solid 1px #e0e0e0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .place {
        padding: 0 12px 0 12px;
        color: #333333;
        font-size: 28px;

        .city {
          color: #b83138;
        }
      }

      .area {

        display: flex;
        align-items: center;

        &-item {
          @include ellipsis(1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 168px;
          height: 62px;
          border-radius: 10px;
          border: solid 1px #b83138;
          color: #b93138;
          font-size: 24px;
          @extend .bb;
          padding: 0 20px;
          margin-right: 10px;

          .val {
            @include ellipsis(1);
          }

          .icon {
            width: 30px;
            height: 17px;
          }
        }
      }

      .btn {
        height: 42px;
        line-height: 42px;
        border-radius: 21px;
        background-color: #f7eaeb;
        color: #b83138;
        padding: 0 20px;
        font-size: 26px;
        @extend .bb;
      }
    }

    .nav1 {}

    .nav2 {}

    // 门店坐标
    .pos {
      max-height: 600px;

      &-item {
        margin: 0 auto;
        padding: 0 30px;
        @extend .bb;
        min-height: 196px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px #e0e0e0;

        .check {
          width: 26px;
          height: 20px;
          padding-right: 24px;
          @extend .fcc;
          // @extend .bb;

          .icon {
            width: 26px;
            height: 20px;
          }
        }

        .info {
          flex: 1;
          @extend .bb;
          padding: 0 40px 0 20px;

          .tit {
            display: flex;
            align-items: center;
            font-size: 32px;
            color: #333333;

            .name {}

            .distance {
              margin-left: 16px;
              color: #999999;
              font-size: 24px;
            }
          }

          .address {
            font-size: 20px;
            color: #999999;
            margin-top: 10px;
            font-size: 28px;
          }
        }

        .loc {
          width: 80px;
          text-align: center;
          color: #b83138;
          font-size: 24px;

          .icon {
            width: 40px;
            height: 49px;
          }
        }


      }
    }

    .btn-wrap {
      padding: 36px 0;

      // 按钮
      .store-btn {
        margin: 0 auto;
        @include cb();
      }

      .disable {
        background: transparent;
        background-color: #d2d2d2;
      }
    }

  }
}