完成首页布局

2026-06-01 19:57:43 +08:00
parent 2b58b672d5
commit f0d97e58d1
32 changed files with 4009 additions and 48 deletions
@@ -0,0 +1,99 @@
+<template>
+  <!-- 底部导航栏容器 -->
+  <view class="tab-bar">
+    <!-- 导航栏项 -->
+    <view
+      v-for="(tab, index) in tabs"
+      :key="index"
+      :class="['tab-item', { active: activeTab === index }]"
+      @click="activeTab = index"
+    >
+      <!-- 导航栏图标 -->
+      <image :src="activeTab === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
+      <!-- 导航栏标签文字 -->
+      <text class="tab-label">{{ tab.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 当前激活的导航栏索引
+const activeTab = ref(0)
+
+// 导航栏数据列表
+const tabs = [
+  {
+	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png',
+	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png',
+	  label: '首页',
+  },
+  {
+	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/course.png',
+	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/course.png',
+	  label: '课程'
+  },
+  {
+	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/train.png',
+	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/train.png',
+	  label: '训练' ,
+  },
+  {
+	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/discover.png',
+	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/discover.png',
+	  label: '发现',
+  },
+  {
+	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/profile.png',
+	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/profile.png',
+	  label: '我的',
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+/* 底部导航栏容器样式 */
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120rpx;
+  background: #1A4A6F;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+  border-radius: 32rpx 32rpx 0 0;
+}
+
+/* 导航栏项样式 */
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+  padding: 12rpx 24rpx;
+}
+
+/* 导航栏图标样式 */
+.tab-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+/* 导航栏标签文字样式 */
+.tab-label {
+  font-size: 22rpx;
+  color: #94a3b8;
+}
+
+/* 导航栏激活状态文字样式 */
+.tab-item.active .tab-label {
+  color: #f97316;
+  font-weight: 600;
+}
+</style>