完成首页UI

src/components/AppBackground.vue

@@ -0,0 +1,34 @@
+<template>
+  <view class="background">
+    <image class="bg-image" src="../static/app-bg.png" mode="aspectFill" />
+    <view class="bg-overlay"></view>
+  </view>
+</template>
+
+<style scoped>
+.background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 0;
+}
+
+.bg-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.bg-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.8), rgba(0, 0, 0, 0.8));
+}
+</style>

src/components/AppFooter.vue

@@ -1,34 +1,60 @@
 <script setup>
-function handleClickGithub() {
-  if (typeof window !== 'undefined' && window.open) {
-    window.open('https://github.com/uni-helper/create-uni')
-  }
-  else {
-    uni.showToast({
-      icon: 'none',
-      title: '请使用浏览器打开',
-    })
-  }
+import { ref } from "vue";
+
+const activeTab = ref("member");
+
+const tabs = [
+  { id: "member", image: "../static/tab-vip.png" },
+  { id: "growth", image: "../static/tab-grow.png" },
+  { id: "shop", image: "../static/tab-mall.png" },
+];
+
+function handleTabClick(tabId) {
+  activeTab.value = tabId;
 }
 </script>
 
 <template>
-  <view class="footer" @click="handleClickGithub">
-    <image class="uni-helper-github__image" src="/static/github.svg" />
+  <view class="footer">
+    <image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
+    <view
+      v-for="(tab, index) in tabs"
+      :key="tab.id"
+      class="tab-item"
+      :class="{ active: activeTab === tab.id }"
+      @click="handleTabClick(tab.id)"
+    >
+      <image
+        :src="tab.image"
+        :style="{
+          width: index === 1 ? '100px' : '40px',
+          transform: index === 1 ? '' : 'translateY(10px)',
+        }"
+        mode="widthFix"
+      />
+    </view>
   </view>
 </template>
 
-<style>
-.footer{
-  position: absolute;
-  bottom: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #888;
+<style scoped>
+.footer {
+  height: 90px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
-.uni-helper-github__image {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
+
+.footer-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+  transform: translateX(5px);
+}
+
+.tab-item {
+  z-index: 1;
 }
 </style>

src/pages.json

@@ -2,7 +2,10 @@
   "pages": [
     {
       "path": "pages/index",
-      "type": "home"
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {

src/pages/index.vue

@@ -1,18 +1,444 @@
 <script setup>
-import AppFooter from '@/components/AppFooter.vue'
-import InputEntry from '@/components/InputEntry.vue'
+import { ref } from "vue";
+import AppFooter from "@/components/AppFooter.vue";
+import AppBackground from "@/components/AppBackground.vue";
+
+const userInfo = ref({
+  name: "打酱油·路过",
+  level: "L100",
+  rank: 1928,
+  rankTotal: 1320,
+});
 </script>
 
 <template>
   <view class="root-container">
-    <InputEntry />
+    <AppBackground />
+    <!-- 用户信息区 -->
+    <view class="user-info">
+      <view class="avatar">
+        <image src="../static/avatar-frame.png" mode="widthFix" />
+        <image src="/static/avatar.png" mode="widthFix" />
+      </view>
+      <view class="user-details">
+        <view class="user-name">
+          <text>{{ userInfo.name }}</text>
+          <image src="../static/vip1.png" mode="widthFix" />
+        </view>
+        <view class="user-stats">
+          <text class="level-tag">钻石1级</text>
+          <text class="level-tag">{{ userInfo.level }}</text>
+          <view class="rank-tag">
+            <view :style="{ width: '40%' }" />
+            <text>158/1928</text>
+          </view>
+        </view>
+      </view>
+      <view class="rank-info">
+        <image src="../static/global-rank.png" mode="widthFix" />
+        <text>本赛季全国</text>
+        <text class="rank-number"
+          >第<text :style="{ color: '#ffd700' }"
+            >{{ userInfo.rank }}/{{ userInfo.rankTotal }}</text
+          >名</text
+        >
+      </view>
+    </view>
+
+    <view class="container">
+      <!-- 功能区域 -->
+      <view class="feature-grid">
+        <!-- 我的弓箭区域 -->
+        <view class="bow-card">
+          <image src="../static/bow-bg.png" mode="widthFix" />
+          <text>我的弓箭</text>
+          <image src="../static/a2@2x.png" mode="widthFix" />
+        </view>
+
+        <!-- 个人练习区域 -->
+        <view class="practice-card">
+          <image src="../static/a2@2x(1).png" mode="widthFix" />
+        </view>
+
+        <!-- 好友约战区域 -->
+        <view class="friend-card">
+          <image src="../static/a3@2x.png" mode="widthFix" />
+        </view>
+      </view>
+
+      <!-- 排位赛区域 -->
+      <view class="ranking-section">
+        <image src="../static/a4@2x.png" mode="widthFix" />
+        <view class="ranking-players">
+          <img src="../static/juezhanbang.png" mode="widthFix" />
+          <view class="player-avatars">
+            <view
+              v-for="i in 6"
+              :key="i"
+              class="player-avatar"
+              :style="{ zIndex: 6 - i }"
+            >
+              <image v-if="i === 1" src="../static/champ1.png" />
+              <image v-if="i === 2" src="../static/champ2.png" />
+              <image v-if="i === 3" src="../static/champ3.png" />
+              <view v-if="i > 3">{{ i }}</view>
+              <image src="../static/avatar.png" mode="aspectFill" />
+            </view>
+            <view class="more-players">4563</view>
+          </view>
+        </view>
+        <view class="region-stats">
+          <view
+            v-for="(region, index) in ['广东', '湖南', '内蒙', '海南', '四川']"
+            :key="index"
+            class="region-item"
+          >
+            <image src="../static/region-bg.png" mode="widthFix" />
+            <image
+              v-if="index === 0"
+              src="../static/region-1.png"
+              mode="widthFix"
+            />
+            <image
+              v-if="index === 1"
+              src="../static/region-2.png"
+              mode="widthFix"
+            />
+            <image
+              v-if="index === 2"
+              src="../static/region-3.png"
+              mode="widthFix"
+            />
+            <image
+              v-if="index === 3"
+              src="../static/region-4.png"
+              mode="widthFix"
+            />
+            <image
+              v-if="index === 4"
+              src="../static/region-5.png"
+              mode="widthFix"
+            />
+            <text>{{ region }}</text>
+            <view>
+              <text :style="{ color: '#fff', marginRight: '2px' }">2323</text>
+              <text>分</text>
+            </view>
+          </view>
+          <view class="region-more">
+            <image src="../static/region-more.png" mode="widthFix" />
+            <text>...</text>
+            <text>更多</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
     <AppFooter />
   </view>
 </template>
 
 <style scoped>
 .root-container {
-  padding: 5rem 2.5rem;
+  height: 100vh;
+  color: white;
+  position: relative;
+}
+
+/* 确保其他内容在背景上层显示 */
+.user-info,
+.container,
+.AppFooter {
+  position: relative;
+  z-index: 1;
+}
+
+/* 用户信息样式 */
+.user-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  width: 72vw;
+  height: 90px;
+  padding-left: 15px;
+}
+
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar > image:first-child {
+  position: absolute;
+  width: 55px;
+  height: 55px;
+}
+
+.avatar > image {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  padding-left: 5px;
+}
+
+.user-name {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.user-name > image {
+  margin-left: 5px;
+  width: 24px;
+}
+
+.user-stats {
+  display: flex;
+  gap: 5px;
+}
+
+.level-tag {
   text-align: center;
+  line-height: 16px;
+}
+.level-tag:first-child {
+  width: 45px;
+  background: #5f51ff;
+}
+.level-tag:nth-child(2) {
+  width: 36px;
+  background: #09c504;
+}
+
+.level-tag,
+.rank-tag {
+  border-radius: 12px;
+  font-size: 10px;
+}
+
+.rank-tag {
+  position: relative;
+  background-color: #00000038;
+  width: 56px;
+  height: 16px;
+}
+
+.rank-tag > view:first-child {
+  background: #ffa711;
+  height: 100%;
+  border-radius: 12px;
+}
+
+.rank-tag > text {
+  position: absolute;
+  top: 0;
+  left: 5px;
+  line-height: 16px;
+}
+
+.rank-info {
+  text-align: left;
+  font-size: 10px;
+  position: relative;
+  padding: 5px;
+  color: #b3b3b3;
+}
+
+.rank-info > image {
+  position: absolute;
+  top: -4px;
+  left: -12px;
+  width: 112%;
+}
+
+.rank-number {
+  display: block;
+}
+
+.container {
+  height: calc(100vh - 220px);
+  padding: 20px 10px;
+}
+
+/* 功能区网格样式 */
+.feature-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "bow practice" "bow friend";
+  row-gap: 5px;
+  column-gap: 10px;
+  margin-bottom: 10px;
+}
+
+.bow-card {
+  grid-area: bow;
+  position: relative;
+}
+
+.feature-grid > view > image {
+  width: 100%;
+}
+
+.bow-card > text {
+  position: absolute;
+  top: 70%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 13px;
+  color: #b3b3b3;
+}
+
+.bow-card > image:first-child {
+  transform: scaleY(1.1) translateY(9px);
+}
+
+.bow-card > image:last-child {
+  transform: translateY(7px);
+}
+
+.practice-card {
+  grid-area: practice;
+  width: 100%;
+}
+
+.friend-card {
+  grid-area: friend;
+  width: 100%;
+}
+
+/* 排位赛区域样式 */
+.ranking-section {
+  border-radius: 15px;
+  padding: 15px;
+  position: relative;
+}
+
+.ranking-section > image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.ranking-players {
+  display: flex;
+  align-items: center;
+  padding-bottom: 20px;
+  margin-top: 36%;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.ranking-players > image:first-child {
+  width: 28%;
+  margin-right: 10px;
+}
+
+.player-avatars {
+  display: flex;
+  align-items: center;
+}
+
+.player-avatar,
+.more-players {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: -10px;
+  border: 1px solid white;
+  position: relative;
+}
+
+.player-avatar > image:first-child,
+.player-avatar > view:first-child {
+  position: absolute;
+  top: -10px;
+  left: 10px;
+  width: 18px;
+  height: 18px;
+}
+.player-avatar > view:first-child {
+  border-radius: 50%;
+  background: #777777;
+  text-align: center;
+  font-size: 11px;
+  line-height: 20px;
+  width: 20px;
+  height: 20px;
+}
+.player-avatar > image:last-child {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.more-players {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  font-size: 10px;
+  line-height: 40px;
+  text-align: right;
+  padding-right: 5px;
+}
+
+.region-stats {
+  display: flex;
+  grid-template-columns: repeat(6, 1fr);
+  margin-top: 20px;
+  justify-content: space-between;
+}
+
+.region-item,
+.region-more {
+  border-radius: 10px;
+  text-align: center;
+  position: relative;
+  width: 13vw;
+  height: 13vw;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.region-item > text {
+  margin-top: 10px;
+}
+.region-more {
+  width: 8vw;
+  height: 13vw;
+}
+.region-item > image:first-child,
+.region-more > image:first-child {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+}
+.region-item > image:nth-of-type(2) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+}
+.region-item > view:last-child {
+  display: flex;
+  justify-content: center;
+  font-size: 10px;
+}
+.region-more > text:first-of-type {
+  font-size: 30px;
+  line-height: 20px;
+  margin-bottom: 5px;
 }
 </style>

src/pages/user.vue

@@ -0,0 +1,96 @@
+<script setup>
+
+</script>
+
+<template>
+  <view class="user-container">
+    <navigator open-type="navigateBack" hover-class="back-hover" class="back-btn">返回</navigator>
+    <view class="user-header">
+      <view class="avatar-box">
+        <image class="avatar" src="/static/avatar.png" mode="aspectFill" />
+      </view>
+      <text class="username">用户名</text>
+    </view>
+    <view class="user-info">
+      <view class="info-item">
+        <text class="label">ID</text>
+        <text class="value">10001</text>
+      </view>
+      <view class="info-item">
+        <text class="label">注册时间</text>
+        <text class="value">2024-01-01</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.user-container {
+  padding: 2rem;
+}
+
+.user-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.avatar-box {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+}
+
+.username {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.user-info {
+  background-color: #ffffff;
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.8rem 0;
+  border-bottom: 1px solid #eee;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.label {
+  color: #666;
+}
+
+.value {
+  color: #333;
+}
+
+.back-btn {
+  position: fixed;
+  top: 2rem;
+  left: 2rem;
+  padding: 0.5rem 1rem;
+  background-color: #007AFF;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.back-hover {
+  opacity: 0.8;
+}
+</style>

src/static/github.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" fill-rule="evenodd" d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2"/></svg>