123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <template>
- <u-overlay :show="active" @click="active = false">
- <view class="tabbar-box-wrap">
- <view class="tabbar-box">
- <view class="item">
- <navigator url="/packageA/signIn/index" class="nav">
- <view class="icon">
- <text class="iconfont icon-a-wodemendianxinxidizhi" />
- </view>
- 签到
- </navigator>
- </view>
- </view>
- </view>
- </u-overlay>
- </template>
- <script>
- export default {
- name: "TabControl",
- props: {},
- data() {
- return {
- active: false
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .tabbar-box-wrap {
- position: absolute;
- width: 100%;
- padding: 6.667vw;
- box-sizing: border-box;
- bottom: calc(13.867vw + env(safe-area-inset-bottom) / 2);
- left: 0;
- .tabbar-box {
- position: relative;
- padding: 2.000vw 2.667vw;
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- background: #fff;
- border-radius: 2.667vw;
- box-sizing: border-box;
- z-index: 2;
- box-shadow: 0.000vw 0.533vw 1.333vw 0.533vw rgba(0, 0, 0, 0.1);
- &:after {
- content: '';
- position: absolute;
- bottom: -2.133vw;
- left: 0;
- right: 0;
- margin: auto;
- width: 6.667vw;
- height: 6.667vw;
- transform: rotate(45deg);
- background: #fff;
- z-index: 1;
- box-shadow: 0.533vw 0.533vw 1.333vw 0.267vw rgba(0, 0, 0, 0.1);
- border-radius: 0.533vw;
- }
- &:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: #ffffff;
- border-radius: 2.667vw;
- z-index: 2;
- }
- .item {
- width: 33.33%;
- .nav {
- position: relative;
- z-index: 3;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- padding: 6px;
- border-radius: 4px;
- .icon {
- width: 44px;
- height: 44px;
- text-align: center;
- line-height: 44px;
- background: #3874F6;
- border-radius: 4px;
- margin-bottom: 6px;
- .iconfont {
- color: #fff;
- font-size: 24px;
- }
- }
- }
- }
- }
- }
- </style>>
|