123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <template>
- <view class="tab-box">
- <view class="tab-list">
- <navigator class="tab-item" @click="tabClick(0)">
- <view class="tab-item-icon">
- <image v-if="store.tabIndex == 0" src="../../static/tabIcons/home_selected.png" mode="aspectFill"></image>
- <image v-else src="../../static/tabIcons/home.png" mode="aspectFill"></image>
- </view>
- <view class="tab-item-name">
- 首页
- </view>
- </navigator>
- <navigator class="tab-item" @click="tabClick(1)">
- <view class="tab-item-icon">
- <image v-if="store.tabIndex == 1" src="../../static/tabIcons/travel_selected.png" mode="aspectFill"></image>
- <image v-else src="../../static/tabIcons/travel.png" mode="aspectFill"></image>
- </view>
- <view class="tab-item-name">
- 游记
- </view>
- </navigator>
- <navigator class="tab-item" @click="tabClick(2)">
- <view class="tab-item-icon" style="width:80rpx;height:80rpx;">
- <image v-if="store.tabIndex == 2" src="../../static/tabIcons/publish_selected.png" mode="aspectFill"></image>
- <image v-else src="../../static/tabIcons/publish.png" mode="aspectFill"></image>
- </view>
- <!-- <view class="tab-item-name">
- 游记
- </view> -->
- </navigator>
- <navigator class="tab-item" @click="tabClick(3)">
- <view class="tab-item-icon">
- <image v-if="store.tabIndex == 3" src="../../static/tabIcons/chat_selected.png" mode="aspectFill"></image>
- <image v-else src="../../static/tabIcons/chat.png" mode="aspectFill"></image>
- </view>
- <view class="tab-item-name">
- 消息
- </view>
- </navigator>
- <navigator class="tab-item" @click="tabClick(4)">
- <view class="tab-item-icon">
- <image v-if="store.tabIndex == 4" src="../../static/tabIcons/mine_selected.png" mode="aspectFill"></image>
- <image v-else src="../../static/tabIcons/mine.png" mode="aspectFill"></image>
- </view>
- <view class="tab-item-name">
- 我的
- </view>
- </navigator>
- </view>
- </view>
- </template>
- <script setup>
- import {useStore} from "@/store/index.js"
- const store = useStore();
-
- function tabClick(index=0){
- store.tabIndex = index;
- }
- </script>
- <style lang="scss">
- .tab-box {
- width: 100vw;
- background: #fff;
- border-top: 1rpx solid #dedede;
- position: fixed;
- left: 0;
- bottom: 0;
- z-index: 10;
- padding-top: 10rpx;
- padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
- padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
- .tab-list {
- width: 100%;
- height: 100rpx;
- display: flex;
- justify-content: space-between;
- }
- .tab-item {
- width: 20%;
- height: 100rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- // border:1rpx solid red;
- .tab-item-icon {
- width: 60rpx;
- height: 60rpx;
- overflow: hidden;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .tab-item-name {
- font-size: 28rpx;
- color:#8a8a8a;
- // margin-top:20rpx;
- }
- }
- }
- </style>
|