bottomTabControl.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <u-overlay :show="active" @click="active = false">
  3. <view class="tabbar-box-wrap">
  4. <view class="tabbar-box">
  5. <view class="item">
  6. <navigator url="/packageA/signIn/index" class="nav">
  7. <view class="icon">
  8. <text class="iconfont icon-a-wodemendianxinxidizhi" />
  9. </view>
  10. 签到
  11. </navigator>
  12. </view>
  13. </view>
  14. </view>
  15. </u-overlay>
  16. </template>
  17. <script>
  18. export default {
  19. name: "TabControl",
  20. props: {},
  21. data() {
  22. return {
  23. active: false
  24. }
  25. },
  26. }
  27. </script>
  28. <style lang="scss" scoped>
  29. .tabbar-box-wrap {
  30. position: absolute;
  31. width: 100%;
  32. padding: 6.667vw;
  33. box-sizing: border-box;
  34. bottom: calc(13.867vw + env(safe-area-inset-bottom) / 2);
  35. left: 0;
  36. .tabbar-box {
  37. position: relative;
  38. padding: 2.000vw 2.667vw;
  39. display: flex;
  40. flex-wrap: wrap;
  41. width: 100%;
  42. background: #fff;
  43. border-radius: 2.667vw;
  44. box-sizing: border-box;
  45. z-index: 2;
  46. box-shadow: 0.000vw 0.533vw 1.333vw 0.533vw rgba(0, 0, 0, 0.1);
  47. &:after {
  48. content: '';
  49. position: absolute;
  50. bottom: -2.133vw;
  51. left: 0;
  52. right: 0;
  53. margin: auto;
  54. width: 6.667vw;
  55. height: 6.667vw;
  56. transform: rotate(45deg);
  57. background: #fff;
  58. z-index: 1;
  59. box-shadow: 0.533vw 0.533vw 1.333vw 0.267vw rgba(0, 0, 0, 0.1);
  60. border-radius: 0.533vw;
  61. }
  62. &:before {
  63. content: '';
  64. position: absolute;
  65. top: 0;
  66. left: 0;
  67. width: 100%;
  68. height: 100%;
  69. background: #ffffff;
  70. border-radius: 2.667vw;
  71. z-index: 2;
  72. }
  73. .item {
  74. width: 33.33%;
  75. .nav {
  76. position: relative;
  77. z-index: 3;
  78. display: flex;
  79. justify-content: center;
  80. align-items: center;
  81. flex-direction: column;
  82. padding: 6px;
  83. border-radius: 4px;
  84. .icon {
  85. width: 44px;
  86. height: 44px;
  87. text-align: center;
  88. line-height: 44px;
  89. background: #3874F6;
  90. border-radius: 4px;
  91. margin-bottom: 6px;
  92. .iconfont {
  93. color: #fff;
  94. font-size: 24px;
  95. }
  96. }
  97. }
  98. }
  99. }
  100. }
  101. </style>>