CommonFooter.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="footBox-container">
  3. <view class="footBox">
  4. <view class="add" @click="leftClick" v-if="leftText">
  5. <uni-icons type="plus" size="20" color="#fff"></uni-icons>
  6. {{ leftText }}
  7. </view>
  8. <view class="reg" @click="rightClick" v-if="rightText">
  9. <uni-icons type="scan" size="20" color="#fff" v-if="icon"></uni-icons>
  10. {{ rightText }}
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. props: {
  18. leftText: {
  19. type: String,
  20. default: ''
  21. },
  22. rightText: {
  23. type: String,
  24. default: ''
  25. },
  26. icon: {
  27. type: Boolean,
  28. default: true
  29. }
  30. },
  31. data() {
  32. return {}
  33. },
  34. methods: {
  35. leftClick() {
  36. this.$emit('leftClick')
  37. },
  38. rightClick() {
  39. this.$emit('rightClick')
  40. }
  41. }
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. .footBox-container {
  46. // height: 100rpx;
  47. width: 100vw;
  48. }
  49. .footBox {
  50. position: fixed;
  51. left: 0px;
  52. bottom: 0px;
  53. height: 100rpx;
  54. width: 100%;
  55. display: flex;
  56. align-items: center;
  57. justify-content: space-between;
  58. view {
  59. width: 100%;
  60. height: 100%;
  61. text-align: center;
  62. color: #fff;
  63. display: flex;
  64. align-items: center;
  65. justify-content: center;
  66. }
  67. .add {
  68. background: $uni-color-success;
  69. }
  70. .reg {
  71. background: $u-success-dark;
  72. }
  73. .uni-icons {
  74. margin-right: 8rpx !important;
  75. font-weight: bold;
  76. }
  77. }
  78. </style>