Bläddra i källkod

修改一下继续教育的底部导航栏

littleblue55 1 månad sedan
förälder
incheckning
9ba5367f2b
1 ändrade filer med 43 tillägg och 1 borttagningar
  1. 43 1
      pages/goOnEdu/course/index.vue

+ 43 - 1
pages/goOnEdu/course/index.vue

@@ -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>