UI更新

src/pages/index.vue

@@ -18,7 +18,8 @@ import { topThreeColors } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { updateConfig, updateUser, updateDevice, updateRank } = store;
+const { updateConfig, updateUser, updateDevice, updateRank, getLvlName } =
+  store;
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user, device, rankData } = storeToRefs(store);
 const showModal = ref(false);
@@ -109,11 +110,10 @@ const comingSoon = () => {
         <view class="feature-grid">
           <view class="bow-card">
             <image
-              src="https://api.shelingxingqiu.com/attachment/2025-07-15/dbciq9qhkpd3pqxawo.webp"
+              src="../static/my-bow.png"
               mode="widthFix"
               @click="() => toPage('/pages/my-device')"
             />
-
             <text v-if="!user.id">我的弓箭</text>
             <text v-if="user.id && !device.deviceId">请绑定设备</text>
             <text
@@ -123,7 +123,7 @@ const comingSoon = () => {
               >{{ device.deviceName }}</text
             >
             <image
-              src="../static/a2@2x.png"
+              src="../static/first-try.png"
               mode="widthFix"
               @click="() => toPage('/pages/first-try')"
             />
@@ -135,20 +135,17 @@ const comingSoon = () => {
               <text>快来报到吧~</text>
             </BubbleTip>
           </view>
-
-          <view class="practice-card" @click="() => toPage('/pages/practise')">
-            <image src="../static/a2@2x(1).png" mode="widthFix" />
-          </view>
-
-          <view
-            class="friend-card"
-            @click="() => toPage('/pages/friend-battle')"
-          >
-            <image src="../static/a3@2x.png" mode="widthFix" />
+          <view class="play-card">
+            <view @click="() => toPage('/pages/practise')">
+              <image src="../static/my-practise.png" mode="widthFix" />
+            </view>
+            <view @click="() => toPage('/pages/friend-battle')">
+              <image src="../static/friend-battle.png" mode="widthFix" />
+            </view>
           </view>
         </view>
         <view class="ranking-section">
-          <image src="../static/a4@2x.png" mode="widthFix" />
+          <image src="../static/rank-bg.png" mode="widthFix" />
           <button
             class="into-btn"
             @click="() => toPage('/pages/ranking')"
@@ -185,7 +182,30 @@ const comingSoon = () => {
               </view>
             </view>
           </view>
-          <view class="region-stats">
+          <view class="my-data">
+            <view @click="() => toPage('/pages/my-growth')">
+              <image src="../static/my-growth.png" mode="widthFix" />
+            </view>
+            <view>
+              <view>
+                <text>段位</text>
+                <text>{{ user.scores ? getLvlName(user.scores) : "-" }}</text>
+              </view>
+              <view>
+                <text>赛季平均环数</text>
+                <text>{{ user.avg_ring ? user.avg_ring + "环" : "-" }}</text>
+              </view>
+              <view>
+                <text>赛季胜率</text>
+                <text>{{
+                  user.avg_win
+                    ? Number((user.avg_win * 100).toFixed(2)) + "%"
+                    : "-"
+                }}</text>
+              </view>
+            </view>
+          </view>
+          <!-- <view class="region-stats">
             <view
               v-for="(region, index) in [
                 { name: '广东', score: 4291 },
@@ -237,7 +257,7 @@ const comingSoon = () => {
               <text>...</text>
               <text>更多</text>
             </view>
-          </view>
+          </view> -->
         </view>
       </view>
       <SModal :show="showModal" :onClose="() => (showModal = false)">
@@ -254,17 +274,19 @@ const comingSoon = () => {
 }
 
 .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;
+  width: 100%;
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.feature-grid > view {
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .bow-card {
-  grid-area: bow;
-  position: relative;
+  width: 50%;
 }
 
 .feature-grid > view > image {
@@ -281,21 +303,16 @@ const comingSoon = () => {
   color: #b3b3b3;
 }
 
-.bow-card > image:first-child {
-  transform: scaleY(1.08) translateY(9px);
-}
-
 .bow-card > image:nth-child(3) {
   transform: translateY(-1px);
 }
 
-.practice-card {
-  grid-area: practice;
-  width: 100%;
+.play-card {
+  width: 48%;
+  margin-left: 2%;
 }
 
-.friend-card {
-  grid-area: friend;
+.play-card > view > image {
   width: 100%;
 }
 
@@ -382,7 +399,7 @@ const comingSoon = () => {
 }
 
 .more-players {
-  background: rgba(255, 255, 255, 0.2);
+  background: #3C445A;
   font-size: 9px;
   line-height: 80rpx;
   text-align: center;
@@ -447,4 +464,39 @@ const comingSoon = () => {
   line-height: 20px;
   margin-bottom: 5px;
 }
+.my-data {
+  display: flex;
+  margin-top: 20px;
+  justify-content: space-between;
+}
+.my-data > view:first-child {
+  width: 28%;
+}
+.my-data > view:first-child > image {
+  width: 100%;
+  transform: translateX(-8px);
+}
+.my-data > view:nth-child(2) {
+  width: 68%;
+  font-size: 12px;
+  color: #fff6;
+  display: flex;
+  justify-content: space-between;
+}
+.my-data > view:nth-child(2) > view:nth-child(2) {
+  width: 38%;
+}
+.my-data > view:nth-child(2) > view {
+  width: 28%;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #303b4c 30%, #2c384a 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.my-data > view:nth-child(2) > view > text:last-child {
+  color: #fff;
+  line-height: 25px;
+}
 </style>