index-u.scss 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. @import '~@/uni_modules/lime-style/index.scss';
  2. $floating-panel-border-radius: create-var(floating-panel-border-radius, 32rpx);
  3. $floating-panel-header-height: create-var(floating-panel-header-height, 60rpx);
  4. $floating-panel-z-index: create-var(floating-panel-z-index, 999);
  5. $floating-panel-background: create-var(floating-panel-background, white);
  6. $floating-panel-bar-width: create-var(floating-panel-bar-width, 60rpx);
  7. $floating-panel-bar-height: create-var(floating-panel-bar-height, 6rpx);
  8. $floating-panel-bar-color: create-var(floating-panel-bar-color, #ddd);
  9. $floating-panel-bar-radius: create-var(floating-panel-bar-radius, 6rpx);
  10. .l-floating-panel {
  11. position: fixed;
  12. left: 0;
  13. bottom: -150rpx;
  14. width: 100%;
  15. z-index: $floating-panel-z-index;
  16. display: flex;
  17. flex-direction: column;
  18. // touch-action: none;
  19. border-top-left-radius: $floating-panel-border-radius;
  20. border-top-right-radius: $floating-panel-border-radius;
  21. background: $floating-panel-background;
  22. transition-property: transform;
  23. // transition-duration: 10ms;
  24. transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  25. // pointer-events: auto;
  26. padding-bottom: 150rpx;
  27. box-sizing: content-box;
  28. &__header {
  29. height: $floating-panel-header-height;
  30. display: flex;
  31. justify-content: center;
  32. align-items: center;
  33. // #ifndef APP-ANDROID || APP-IOS || APP-HARMONY
  34. cursor: grab;
  35. user-select: none;
  36. // #endif
  37. &-bar {
  38. height: $floating-panel-bar-height;
  39. width: $floating-panel-bar-width;
  40. border-radius: $floating-panel-bar-radius;
  41. background: $floating-panel-bar-color;
  42. }
  43. }
  44. &__content {
  45. flex: 1;
  46. background-color: $floating-panel-background;
  47. // user-select: none;
  48. }
  49. // &::after {
  50. // content: '';
  51. // display: block;
  52. // position: absolute;
  53. // bottom: -100vh;
  54. // height: 100vh;
  55. // width: 750rpx;
  56. // background-color: inherit;
  57. // }
  58. }