FixedButton.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <div class="bottomFixed">
  3. <div class="btn-list" v-if="btnList">
  4. <slot></slot>
  5. </div>
  6. <div class="btn" v-else>
  7. <slot></slot>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'FixedButton',
  14. props: {
  15. btnList: {
  16. type: Boolean,
  17. default: false
  18. }
  19. }
  20. };
  21. </script>
  22. <style lang="less">
  23. .bottomFixed {
  24. height: 60px;
  25. .btn-list {
  26. position: fixed;
  27. background-color: #fff;
  28. left: 0;
  29. right: 0;
  30. bottom: 0;
  31. padding: 8px 10px;
  32. z-index: 99;
  33. box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
  34. display: flex;
  35. align-items: center;
  36. ._van-button {
  37. width: 50%;
  38. box-sizing: border-box;
  39. padding: 0 6px;
  40. }
  41. .van-button {
  42. height: 40px;
  43. }
  44. }
  45. .btn {
  46. position: fixed;
  47. background-color: #fff;
  48. left: 0;
  49. right: 0;
  50. bottom: 0;
  51. padding: 8px 68px;
  52. z-index: 99;
  53. box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
  54. .van-button {
  55. height: 44px;
  56. }
  57. }
  58. }
  59. </style>