feat: UI

wupengfei

2 天以前 758d8056dc3dbc6bf92c298aa3627e66b933b5a0

 apps/h5/src/components/PageFooter/PageFooter.vue

@@ -20,158 +20,37 @@
});
</script>

<style lang="scss">
@import '@/styles/common.scss';
<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.page-footer {
  /* height: 112px; */
  background-color: #fff;
  //   position: fixed;
  //   bottom: 0;
  width: 100%;
  display: flex;
  box-shadow: $base-footer-box-shadow;
  position: relative;
  z-index: 1;

  //   padding-bottom: constant(safe-area-inset-bottom);
  //   padding-bottom: env(safe-area-inset-bottom);

  // z-index: 10000;
  display: flex;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    left: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    background-color: #ffffff;
    content: '';
    transform: translateY(100%);
  }

  .page-footer-inner {
    padding: 24px 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    align-items: center;
  }

  &.isOnlyAction {
    .page-footer-inner {
      padding: 16px 0;
      align-items: flex-start;
    }
  }

  .is-button-footer {
    display: flex;
    padding: 12px 0;
    width: 100%;
    height: 100%;
    padding: 25px 30px;
    box-sizing: border-box;

    .common-page-footer-btn-group {
      margin: 0 -12rpx;
      display: flex;
      width: calc(100% + 24rpx);
    }

    .nut-button {
      flex: 1;
      margin: 0 12rpx;
      height: 100%;
      font-size: 32rpx;
      border-radius: 10rpx;
      border: none;
      font-weight: 400;

      &.cancel-btn {
        color: boleGetCssVar('text-color', 'primary') !important;
      }

      &.confirm-btn {
        box-shadow: 0px 3px 7px 0px rgba(240, 67, 73, 0.35);
      }
    }
  }

  .common-page-footer {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;

    .common-page-footer-actions {
      flex: 1;
      display: flex;
      justify-content: space-around;
      min-width: 0;
      padding-right: 20px;

      .common-page-footer-action {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .common-page-footer-action-icon {
          width: 35px;
          height: 35px;
          margin-bottom: 14px;
        }

        .common-page-footer-action-text {
          line-height: 1;
          font-size: 22px;
          color: #1b232f;
        }
      }
    }

    .common-page-footer-btn-group {
      display: flex;
      margin: 0 -20rpx;
      width: auto;

      .nut-button {
        margin: 0 20rpx;
      }

      &.small {
        margin: 0 -12rpx;

        .nut-button {
          margin: 0 12rpx;
        }
      }

      .one-btn {
        width: 364px;
        font-size: 26px;
        border-radius: 36px;
      }
    }

    .common-page-footer-btn-badge {
      z-index: 10;
    }

    .common-page-footer-btn {
      width: 200px;
      height: 80px;
      border-radius: 10px;
      min-width: 0;
      font-size: 32px;
      flex: none;
    }

    .contact-btn {
      margin: 0;
      margin-left: 20px;
    }
  }
}
</style>

<style lang="scss"></style>