|
@@ -4,7 +4,7 @@
|
|
|
<course-home v-if="tabValue === 'courseHome'"></course-home>
|
|
|
<course-mine v-if="tabValue === 'courseMine'"></course-mine>
|
|
|
</view>
|
|
|
- <view class="tabbar-block"></view>
|
|
|
+ <!-- <view class="tabbar-block"></view>
|
|
|
<view class="tabbar">
|
|
|
<view class="tab-item" :class="{ active: tabValue === 'courseHome' }" @click="selectTab('courseHome')">
|
|
|
<image src="/static/tabbar-icon/home-fill.png" v-if="tabValue === 'courseHome'"></image>
|
|
@@ -16,6 +16,19 @@
|
|
|
<image src="/static/tabbar-icon/user-line.png" v-else></image>
|
|
|
<text>我的</text>
|
|
|
</view>
|
|
|
+ </view> -->
|
|
|
+ <view class="bottom-block"></view>
|
|
|
+ <view class="bottom-box">
|
|
|
+ <view class="menu-box">
|
|
|
+ <view class="menu-item-box" :class="{'is-active': tabValue === 'courseHome'}" @click="selectTab('courseHome')">
|
|
|
+ <view class="iconfont icon-home"></view>
|
|
|
+ <view class="text">首页</view>
|
|
|
+ </view>
|
|
|
+ <view class="menu-item-box" :class="{'is-active': tabValue === 'courseMine'}" @click="selectTab('courseMine')">
|
|
|
+ <view class="iconfont icon-user-s"></view>
|
|
|
+ <view class="text">我的</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -117,4 +130,33 @@
|
|
|
/* 激活状态下的文本颜色 */
|
|
|
|
|
|
}
|
|
|
+ .bottom-block {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ height: calc(112rpx + env(safe-area-inset-bottom, 0));
|
|
|
+ }
|
|
|
+ .bottom-box {
|
|
|
+ padding: 5rpx 20rpx;
|
|
|
+ background-color: $uni-bg-color-grey;
|
|
|
+ border: 1rpx solid #E9E9E9;
|
|
|
+ padding-bottom: calc(5rpx + env(safe-area-inset-bottom, 0));
|
|
|
+ @include bottomMagnet();
|
|
|
+ .menu-box {
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .menu-item-box {
|
|
|
+ width: calc(100% / 2);
|
|
|
+ text-align: center;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 55rpx;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: $uni-font-size-2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|