wechat/src/pages/user/placeOrderDetail/page.scss

.mainPage{
  >div.content{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    >h2{
      width: 100%;
      display: block;
      line-height: .3rem;
      font-size: .17rem;
      text-align: center;
      margin: .28rem auto 0;
    }
    .list{
      >div.flex-item{
        margin: 0 .2rem;
        position: relative;
        overflow: hidden;
        &>ul{
          width: 100%;
          position: relative;
          overflow: hidden;
          margin: .18rem auto 0;
          &>li{
            align-items: center;
            padding: .08rem 0;
            border-bottom: .01rem solid #eee;
            >div{
              >div{
                width: 100%;
                position: relative;
                overflow: hidden;
                >span{
                  width: 100%;
                  display: block;
                  line-height: .26rem;
                  font-size: .11rem;
                  text-align: right;
                }
              }
              &:nth-child(1){
                >div{
                  span{
                    text-align: left;
                    font-size: .14rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
              &:nth-child(2){
                margin: 0 .05rem;
                >div{
                  span{
                    text-align: center;
                    color: #666;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
            }
            a{
              font-size: 0;
              white-space: nowrap;
              *{
                display: inline-block;
                line-height: .26rem;
                font-size: .11rem;
                color: #ccc;
              }
              &.active{
                *{
                  color: #fd684a;
                  font-size: .14rem;
                }
              }
            }
          }
        }
      }
    }
    h6{
      width: 100%;
      display: block;
      line-height: .34rem;
      font-size: .14rem;
      text-indent: .2rem;
      margin: .3rem auto 0;
    }
    .remark{
      >div{
        margin: 0 .2rem;
        >div{
          width: 100%;
          position: relative;
          overflow: hidden;
          background: #f2f2f2;
          border-radius: .06rem;
          textarea{
            margin: 0 .1rem;
            width: 100%;
            line-height: .2rem;
            padding: .1rem 0;
            background: none;
          }
        }
      }
    }
    >span{
      width: 100%;
      display: block;
      line-height: .36rem;
      font-size: .13rem;
      color: #666;
      text-indent: .2rem;
    }
    .bottom{
      width: 100%;
      position: relative;
      overflow: hidden;
      text-align: center;
      font-size: 0;
      white-space: nowrap;
      margin: .1rem auto .4rem;
      a{
        display: inline-block;
        line-height: .32rem;
        border-radius: .05rem;
        border: .01rem solid #333;
        padding: 0 .4rem;
        font-size: .15rem;
        color: #333;
        &:nth-child(2){
          color: #fd684a;
          border-color: #fd684a;
          margin-left: .4rem;
        }
      }
    }
  }
  .selectLayer{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0,0,0,.5);
    display: none;
    &.show{
      display: block;
    }
    >div{
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      overflow: hidden;
    }
  }
  .selectCouponLayer{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0,0,0,.5);
    display: none;
    &.show{
      display: block;
    }
    >div{
      width: 100%;
      height: 4rem;
      position: absolute;
      overflow: hidden;
      left: 0;
      bottom: 0;
      background: #fff;
      border-radius: .1rem .1rem 0 0;
      >div{
        width: 100%;
        &:first-child{
          text-align: right;
          margin-top: .1rem;
          >i{
            margin-right: .1rem;
            font-size: .2rem;
            color: #666;
          }
        }
        &.flex-item{
          position: relative;
          overflow: visible;
          >div{
            width: 100%;
            position: absolute;
            overflow: visible;
            left: 0;
            top: 0;
            bottom: 0;
            >div{
              width: 100%;
              overflow-y: scroll;
              -webkit-overflow-scrolling: touch;
              transform: translateZ(0);
              -webkit-transform: translateZ(0);
              overflow-x: visible;
              ul{
                width: 100%;
                position: relative;
                overflow: visible;
                li{
                  width: 100%;
                  position: relative;
                  overflow: visible;
                  margin: .1rem auto 0;
                  >i{
                    display: none;
                    font-size: .2rem;
                    color: #fd684a;
                    position: absolute;
                    right: .1rem;
                    top: .1rem;
                    z-index: 110;
                  }
                  &.active{
                    >i{
                      display: block;
                    }
                  }
                }
              }
            }
          }
        }
      }
      >a{
        width: 100%;
        display: block;
        text-align: center;
        font-size: .16rem;
        color: #fff;
        background: #fd684a;
        line-height: .5rem;
      }
    }
    // >div{
    //   width: 100%;
    //   max-height: 3rem;
    //   overflow: hidden;
    //   position: absolute;
    //   left: 0;
    //   bottom: 0;
    //   background: #fff;
    //   border-radius: .1rem .1rem 0 0;
    //   >div{
    //     width: 100%;
    //     position: relative;
    //     overflow: visible;
    //     &:first-child{
    //       text-align: right;
    //     }
    //     i{
    //       font-size: .2rem;
    //       color: #666;
    //       margin-right: .1rem;
    //     }
    //     >ul{
    //       position: relative;
    //       overflow: visible;
    //       margin: 0 .2rem;
    //       >li{
    //         width: 100%;
    //         position: relative;
    //         overflow: visible;
    //         margin: .1rem auto 0;
    //       }
    //     }
    //   }
    //   >a{
    //     width: 100%;
    //     display: block;
    //     text-align: center;
    //     font-size: .16rem;
    //     color: #fff;
    //     background: #fd684a;
    //     line-height: .5rem;
    //   }
    // }
  }
}