nova-trip/nova-tourism/pages/shop/select-store/index.less

page {
  background: #f6f6f6;

  .store {

    .current {
      .title {
        padding-left: 15rpx;
        line-height: 60rpx;
        color: #ffffff;
        // text-shadow: -2rpx 2rpx 0 #333, 2rpx 2rpx 0 #333, 2rpx -2rpx 0 #333, -2rpx -2rpx 0 #333;
        background: #46a9a4;
      }

      .store {
        display: flex;
        padding: 15rpx;
        margin: 20rpx 30rpx;
        border: 5rpx solid #fff;
        border-radius: 10rpx;
        background: #46a9a4;
        color: #ffffff;
        box-shadow: 0 5rpx 8rpx rgb(0 0 0 / 20%);

        .cover {
          width: 200rpx;
          height: 200rpx;
          border: 6rpx solid #fff;
          box-sizing: border-box;

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

        .storeInfo {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          margin-left: 20rpx;

        }
      }

      .empty {
        min-height: 200rpx;
        margin: 20rpx 30rpx;
        text-align: center;
        line-height: 200rpx;
        font-size: 34rpx;
        border: 5rpx solid #fff;
        border-radius: 10rpx;
        color: #ffffff;
        // text-shadow: -2rpx 2rpx 0 #333, 2rpx 2rpx 0 #333, 2rpx -2rpx 0 #333, -2rpx -2rpx 0 #333;
        background: #46a9a4;
        box-shadow: 0 5rpx 8rpx rgb(0 0 0 / 20%);
      }
    }

    .allStore {
      overflow: hidden;

      .title {
        padding-left: 15rpx;
        line-height: 80rpx;
        border: 5rpx solid #fff;
        color: #ffffff;
        // text-shadow: -2rpx 2rpx 0 #333, 2rpx 2rpx 0 #333, 2rpx -2rpx 0 #333, -2rpx -2rpx 0 #333;
        background: #46a9a4;
      }

      .storeList {
        float: left;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        width: calc(50% - 30rpx);
        margin-left: 20rpx;
        margin-top: 20rpx;
        border-radius: 10rpx;
        box-shadow: 0 5rpx 8rpx rgb(0 0 0 / 30%);
        overflow: hidden;

        >.cover {
          width: 100%;
          height: 200rpx;
          overflow: hidden;

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

        .storeInfo {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-end;
          width: 100%;
          background: #fff;

          .cover {
            position: absolute;
            top: -50rpx;
            left: 15rpx;
            width: 96rpx;
            height: 96rpx;
            border: 5rpx solid #fff;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 5rpx 10rpx rgb(0 0 0 / 30%);

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

          .storeName {
            margin: 10rpx 0;
            margin-right: 30rpx;
            color: #333;
            font-weight: bold;
          }

          .mobile {
            margin-right: 30rpx;
            font-size: 28rpx;
          }
        }

        transition: all .4s;
      }
    }
  }
}