.deal 
  width: 100vw
  height: 100vh
  position: relative
  overflow: hidden

  .deal-content
    width: 100vw
    height: calc(100vh - 112rpx)

  .deal-carousel
    width: 100vw
    height: 100vw / 3 * 2

    swiper
      width: 100vw
      height: 100vw / 3 * 2

    .deal-carousel-media
      width: 100vw
      height: 100vw / 3 * 2

    .deal-carousel-item
      position: absolu
      top: 0

  .deal-body
    padding: .6 * $gutter $gutter

    .deal-price

      .price
        font-size: $headline
        position: relative
        margin-left: $supplement - 10rpx
        color: $teal-800
        display: inline

        &:before
          content: '¥'
          width: $supplement
          position: absolute
          top: 0
          left: -$supplement
          font-size: $supplement
          text-align: right

        &:after
          content: attr(data-price)
          width: $content2
          position: absolute
          font-size: $content2
          bottom: 0
          right: -$content2
          text-align: left
    .deal-title
      +title

    .deal-intro
      margin-top: .8 * $gutter
      +subheading(1.6)

  .pay-content
    width: 100vw
    background-color: $grey-100
    position: absolute
    bottom: 0
    left: 0
    border-top: 2rpx solid$grey-300
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    z-index: 3
    transform: translate(0, 100%)
    transition: all 200ms $fastOutSlowIn

    .pay-header
      width: 100vw
      height: 2.6 * $body1
      display: flex
      justify-content: space-between
      align-items: center
      border-bottom: 1px solid$grey-300
      font-size: $body1
      color: $grey-700

      .close
        font-weight: 300
        color: $blue
        margin-right: $gutter

    .pay-body
      width: calc(100vw - 4 * #{$gutter})
      padding: 0 2 * $gutter

      .pay-item
        display: flex
        border-bottom: 1px solid$grey-300
        padding: 20rpx 0

        image
          width: 100rpx
          height: 100rpx
          border-radius: 8rpx
          margin-right: $gutter

        .pay-item-body
          flex: 1

          .pay-item-name
            color: $grey-800
            font-size: $supplement

          .pay-item-price
            color: $grey-400
            font-size: $supplement
            margin-top: 10rpx


      .input-group
        padding: 20rpx 0
        border-bottom: 1px solid$grey-300
        display: flex
        align-items: center

        .label
          width: 100rpx
          text-align: right
          color: $grey-400
          font-size: $supplement
          height: $supplement
          margin: .4 * $supplement 20rpx .4 * $supplement 0

        input
          flex: 1
          color: $grey-900
          font-size: $supplement
          height: $supplement
          margin: .4 * $supplement 0

    .pay-action
      font-size: $title
      color: $teal
      height: 3 * $title
      display: flex
      justify-content: center
      align-items: center

  .buy
    width: 100vw
    height: 112rpx
    position: absolute
    bottom: 0
    left: 0
    border-top: 2rpx solid$grey-300
    display: flex
    justify-content: center
    align-items: center
    z-index: 2

    .btn
      width: 320rpx
      height: 72rpx
      background-color: $teal
      border-radius: $radius-2db
      color: $white
      font-size: $button
      display: flex
      justify-content: center
      align-items: center


  .deal-table
    width: calc(100vw - 2 * #{$gutter} - 96rpx)
    margin-top: $gutter
    padding: 26rpx 48rpx
    background-color: $teal-100
    border-radius: $radius-2db

    .table-line
      width: 100%
      height: $content2 + 56rpx
      color: $grey-700
      display: flex
      font-size: $content2
      align-items: center
      justify-content: center
      border-top: 2rpx solid$grey-100

      &:first-child
        border-top: none

      .key
        flex: 1

      .val
        flex: 1

  .deal-ps
    font-size: $headline
    color: $grey-800
    margin-top: $gutter

    .ps-line
      color: $grey-700
      font-size: $content2
      height: 1.6 * $content2

      &:first-child
        margin-top: .6 * $content2