完成首页3个tab页的移动端改造

src/components/Tabbar.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  selected: {
+    type: Number,
+    default: 0,
+  },
+  onClick: {
+    type: Function,
+    default: (index) => {},
+  },
+});
+const isIOS = computed(() => {
+  const systemInfo = uni.getDeviceInfo();
+  return systemInfo.osName === "ios";
+});
+</script>
+<template>
+  <view class="tabbar" :style="{ paddingBottom: isIOS ? '30rpx' : '0rpx' }">
+    <view @click="onClick(0)">
+      <image
+        :src="`../static/tab-score${selected === 0 ? '-s' : ''}.png`"
+        mode="widthFix"
+      />
+      <text :style="{ color: selected === 0 ? '#333' : '#999999' }">Score</text>
+    </view>
+    <view @click="onClick(1)">
+      <image
+        :src="`../static/tab-history${selected === 1 ? '-s' : ''}.png`"
+        mode="widthFix"
+      />
+      <text :style="{ color: selected === 1 ? '#333' : '#999999' }"
+        >History</text
+      >
+    </view>
+    <view @click="onClick(2)">
+      <image
+        :src="`../static/tab-user${selected === 2 ? '-s' : ''}.png`"
+        mode="widthFix"
+      />
+      <text :style="{ color: selected === 2 ? '#333' : '#999999' }"
+        >Profile</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.tabbar {
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100vw;
+  height: 100rpx;
+}
+.tabbar > view {
+  margin-top: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 20rpx;
+}
+.tabbar > view > image {
+  width: 56rpx;
+  height: 56rpx;
+  margin-bottom: 5rpx;
+}
+</style>