football/pages/app_admin/setting/setting.scss

.setting {
  width: #{750rpx};
  .app-text {
    font-size: #{28rpx};
    color: #353535;
  }
  .set-image {
    width: #{750rpx};
    height: #{260rpx};
    position: absolute;
    top: 0;
    left: 0;
  }
  .head {
    margin: #{114rpx 24rpx 20rpx};
    position: relative;
    height: #{200rpx};
    width: #{702rpx};
    border-radius: #{8rpx};
    background-color: #fff;
    text-align: center;
    z-index: 2;
    box-sizing: border-box;
    padding-top: #{1rpx};
    .logo {
      width: #{140rpx};
      height: #{140rpx};
      border-radius: 50%;
      background-color: white;
      border: #{4rpx} solid white;
      position: absolute;
      top: -40%;
      left: 50%;
      transform: translateX(-50%);
    }
    .name {
      height: #{55rpx};
      line-height: #{55rpx};
      margin-top: #{109rpx};
      .name-text>image {
        width: #{28rpx};
        height: #{28rpx};
        margin-left: #{12rpx};
      }
      .name-text {
        font-size: #{40rpx};
        color: #353535;
        >view {
          max-width: #{650rpx};
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }
  .switch {
    width: #{702rpx};
    border-radius: #{8rpx};
    margin: #{20rpx} #{24rpx};
    background-color: white;
    >view.switch-item {
      height: #{100rpx};
      width: #{638rpx};
      margin: 0 #{32rpx};
      .border {
        border-bottom: #{1rpx} solid #e2e2e2;
      }
      >view {
        width: #{564rpx};
        height: #{100rpx};
        >view {
          height: #{100rpx};
          line-height: #{100rpx};
          .app-switch-view {
            background-color: #14d675 !important;
          }
          .switch-view {
            width: #{88rpx};
            height: #{48rpx};
            border-radius: #{20rpx};
            background-color: #dddddd;
            .click {
              border-radius: 50%;
              background-color: white;
              width: #{38rpx};
              height: #{38rpx};
              margin: #{5rpx} #{6rpx};
            }
            .app-switch {
              transform: translateX(#{40rpx});
            }

        }
      }

      }
      >image {
        width: #{40rpx};
        height: #{40rpx};
        margin-right: #{32rpx};
      }
    }
  }
  .switch-time {
    width: #{702rpx};
    height: #{300rpx};
    background-color: white;
    margin: 0 #{24rpx};
    border-radius: #{8rpx};
    .switch-time-item {
      width: #{702rpx};
      height: #{100rpx};
      padding: 0 #{32rpx};
      box-sizing: border-box;
      >image {
        width: #{40rpx};
        height: #{40rpx};
        margin-right: #{32rpx};
      }
      .switch-time-content {
        width: #{566rpx};
        height: #{100rpx};
       .app-text-switch {
         height: #{100rpx};
         line-height: #{100rpx} ;
       }
        .app-icon-text {
          font-size: #{26rpx};
          color: #999999;
          .app-icon {
            width: #{12rpx};
            height: #{22rpx};
            margin-left: #{14rpx};
          }
        }
      }
    }
    .border {
      border-bottom: #{1rpx} solid #e2e2e2;
    }
  }
  .online-payment {
    width: #{702rpx};
    height: #{142rpx};
    padding: 0 #{24rpx};
    box-sizing: border-box;
    margin: #{20rpx} #{24rpx};
    background-color: white;
    border-radius: #{8rpx};
    .online-payment-content {
      width: #{702rpx};
      height: #{142rpx};
      .app-image {
        width: #{40rpx};
        height: #{40rpx};
        margin-right: #{32rpx};
      }
      .app-icon {
        width: #{12rpx};
        height: #{22rpx};

      }
      >view {
        height: #{142rpx};
        width: #{552rpx};
        .payment-text {
          font-size: #{28rpx};
          color: #353535;
          margin-top: #{38rpx};
        }
        .payment-method-text {
          font-size: #{26rpx};
          color: #999999;
          margin-top: #{18rpx};
        }
      }
    }
  }
  .shipping-return {
    width: #{702rpx};
    height: #{200rpx};
    padding: 0 #{24rpx};
    box-sizing: border-box;
    background-color: white;
    border-radius: #{8rpx};
    margin: 0 #{24rpx};
    .shipping-return-item {
      width: #{702rpx};
      height: #{100rpx};
      .item-image {
        width: #{40rpx};
        height: #{40rpx};
        margin-right: #{32rpx};
      }
      .item-view {
        width: #{566rpx};
        height: #{100rpx};
        .app-text {
          height: #{100rpx};
          line-height: #{100rpx};
        }
        .right {
          >image {
            width: #{12rpx};
            height: #{22rpx};
            margin-left: #{16rpx};
          }
          >view {
            color: #999999;
            font-size: #{26rpx};
          }
        }
      }
    }
  }
  .integral {
    width: #{702rpx};
    height: #{200rpx};
    padding: 0 #{24rpx};
    box-sizing: border-box;
    background-color: white;
    border-radius: #{8rpx};
    margin: #{20rpx} #{24rpx};
    .integral-item {
      width: #{702-48rpx};
      height: #{100rpx};
      >image {
        width: #{40rpx};
        height: #{40rpx};
        margin-right: #{32rpx};
      }
      .text-content {
        width: #{566rpx};
        height: #{100rpx};
        .app-text {
          height: #{100rpx};
          line-height: #{100rpx};
        }
        .right {
          font-size: #{26rpx};
          color: #999999;
          >image {
            width: #{12rpx};
            height: #{22rpx};
            margin-left: #{16rpx};
          }
        }
      }
    }
  }
}
.model {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  z-index: 1600;
  .content {
    width: #{620rpx};
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: white;
    transform: translate(-50%, -50%);
    border-radius: #{16rpx};
    .title {
      margin: #{40rpx} 0;
      font-size: #{32rpx};
      color: #353535;
      text-align: center;
    }
    .content-text {
      .name {
        height: #{80rpx};
        line-height: #{80rpx};
        background-color: #f7f7f7;
        border-radius: #{16rpx};
        box-sizing: border-box;
        padding: #{0 28rpx};
        margin: #{0 28rpx};
        text-align: left;
        margin-bottom: #{24rpx};
      }
      .intergral-change {
        line-height: #{80rpx};
        height: #{80rpx};
        font-size: #{28rpx};
        color: #353535;
        margin-bottom: #{24rpx};
        >view {
          margin-left: #{16rpx};
        }
        .intergral-input {
          height:#{80rpx};
          line-height: #{80rpx};
          background-color: #f7f7f7;
          border-radius: #{8rpx};
          width: #{288rpx};
          padding: #{0 28rpx};
          box-sizing: border-box;
          text-align: left;
          input {
            width: 100%;
            height: 100%;
          }
        }
      }
      .pay-change {
        margin: 0 #{32rpx};
        width: #{556rpx};
        height: #{100+100+100+24+24+24+6rpx};
        .app-active {
          border: #{1rpx} solid #446dfd !important;
          background-color: rgba(236, 240, 255, 0.3);
        }
        .pay-view {
          box-sizing: border-box;
          width: #{556rpx};
          height: #{100rpx};
          border-radius: #{50rpx};
          border: #{1rpx} solid #e2e2e2;
          padding: 0 #{50rpx};
          margin-bottom: #{24rpx};
          position: relative;
          .left {
            >view {
              >image {
                width: #{60rpx};
                height: #{60rpx};
                margin-right: #{20rpx};
              }
              >view {
                height: #{100rpx};
                line-height: #{100rpx};
                font-size: #{28rpx};
                color: #353535;
              }
            }
            .active {
              width: #{32rpx};
              height: #{32rpx};
            }
          }

        }
      }
      .i-modal-body {
        padding: #{17rpx 32rpx 32rpx};
        box-sizing: border-box;
        max-height: #{1000rpx};
        .intergral-change {
          line-height: #{80rpx};
          height: #{80rpx};
          font-size: #{28rpx};
          color: #353535;
          >view {
            padding-left: #{16rpx};
            box-sizing: border-box;
          }
          .intergral-input {
            height: #{80rpx};
            line-height: #{80rpx};
            background-color: #f7f7f7;
            border-radius: #{16rpx};
            width: #{288rpx};
            padding: #{0 28rpx};
            box-sizing: border-box;
            text-align: left;
          }
        }
      }
      .textarea-area {
        height:#{252rpx};
        width: #{556rpx};
        margin: #{24rpx} auto;
        border: #{1rpx} solid #e2e2e2;
        border-radius: #{16rpx};
        .textarea {
          height: 100%;
          width: #{556rpx};
          padding: #{24rpx 32rpx};
          box-sizing: border-box;
          font-size: #{28rpx};
          text-align: left;
        }
      }
    }
    .buttons {
      width: #{620rpx};
      height: #{88rpx};
      border-top: #{1rpx} solid #e2e2e2;
      .line {
        width: #{2rpx};
        height: #{32rpx};
        background-color: #e2e2e2;
      }
      .but {
        width: #{309rpx};
        height: #{88rpx};
        line-height: #{88rpx};
        text-align: center;
        font-size: #{32rpx};
      }
      .cancel {
        color: #{32rpx};
      }
      .confirm {
        color: #446dfd;
      }
    }
  }
}
.bottom-tab {
    width: 100%;
    height: #{96rpx};
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    font-size: #{20rpx};
    color: #9096ad;
    padding-top: #{14rpx};
    box-sizing: border-box;
    z-index: 999;
}
.bottom-tab.iphone_x {
    height: #{146rpx};
    padding-bottom: #{50rpx};
    box-sizing: border-box;
}
.tab-item {
    text-align: center;
}
.tab-icon {
    height: #{48rpx};
    width: #{48rpx};
    display: inline-block;
}
.tab-item.active {
    color: #446dfd;
}
.tab-item view {
    margin-top: #{-5rpx};
}
.bottom-place {
    height: #{116rpx};
}
.bottom-place.iphone_x {
    height: #{166rpx};
}