wechat/src/module/user/mainPage/coffeeIndex/page.scss

.mainPage{
  .top{
    position: relative;
    overflow: hidden;
    // align-items: center;
    // background: rgba(0, 0, 0, .3);
    // padding: .05rem 0;
    // &>*{
    //   margin-left: .05rem;
    //   line-height: .2rem;
    //   font-size: .12rem;
    //   color: #fff;
    // }
    // i{
    //   font-size: .15rem;
    // }
    // a{
    //   color: #fb6b2f;
    //   text-decoration: underline;
    //   margin-left: .1rem;
    // }
    // &>*:first-child{
    //   margin-left: .2rem;
    // }
    // &>div{
    //   text-align: right;
    //   margin-right: .2rem;
    //   font-size: 0;
    //   span{
    //     font-size: .12rem;
    //     color: #fff;
    //   }
    // }
  }
  .content{
    &>div{
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      &>div.flex-h{
        &>div{
          margin: 0 .2rem;
          position: relative;
          overflow: visible;
          .areaList{
            &:last-child{
              margin-bottom: .2rem;
            }
            .title{
              font-size: 0;
              white-space: nowrap;
              margin-top: .22rem;
              *{
                line-height: .26rem;
                font-size: .14rem;
              }
              i{
                color: red;
                margin-right: .05rem;
              }
            }
            .subAreaList{
              position: relative;
              overflow: visible;
              flex-wrap: wrap;
              -webkit-flex-wrap: wrap;
              &>li{
                position: relative;
                overflow: hidden;
                border-radius: .06rem;
                background: #fff;
                padding: .15rem 0;
                box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
                min-width: 40%;
                margin-top: .2rem;
                align-items: center;
                &:nth-child(2n){
                  margin-left: .2rem;
                }
                &.noData{
                  box-shadow: none;
                  background: none;
                }
                &>i{
                  display: inline-block;
                  position: absolute;
                  right: .1rem;
                  top: .05rem;
                  font-size: .36rem;
                  z-index: 1;
                  color: rgba(255, 0, 0, .1);
                }
                .itemNo{
                  width: .44rem;
                  position: relative;
                  overflow: hidden;
                  margin-left: .15rem;
                  z-index: 2;
                  a{
                    width: 100%;
                    display: block;
                    padding-bottom: 100%;
                    box-sizing: border-box;
                    border: .01rem solid #eee;
                    border-radius: 100%;
                    position: relative;
                    overflow: hidden;
                    div{
                      width: 100%;
                      text-align: center;
                      font-size: 0;
                      white-space: nowrap;
                      i{
                        display: inline-block;
                        font-size: .13rem;
                        color: #666;
                      }
                    }
                  }
                }
                &>div.flex-item{
                  margin: 0 .1rem;
                  position: relative;
                  overflow: hidden;
                  z-index: 2;
                  &>div{
                    width: 100%;
                    position: relative;
                    overflow: hidden;
                    span{
                      width: 100%;
                      display: block;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-size: .13rem;
                      color: #666;
                      line-height: .24rem;
                    }
                    a{
                      line-height: .22rem;
                      color: #fb6b2f;
                      font-size: .13rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .selectCase{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 100;
  }
}