UI更新

src/pages/practise.vue

@@ -1,6 +1,12 @@
 <script setup>
 import Container from "@/components/Container.vue";
 import Guide from "@/components/Guide.vue";
+import Avatar from "@/components/Avatar.vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
 const toPractiseOne = () => {
   uni.navigateTo({
@@ -26,12 +32,37 @@ const toPractiseTwo = () => {
           >坚持练习就能你快速升级，早日加入全国排位赛！</text
         >
       </Guide>
-      <image
-        src="../static/practise-bg.png"
-        class="practise-bg"
-        mode="widthFix"
-        :style="{ marginTop: 0 }"
-      />
+      <view class="practise-data">
+        <view>
+          <view>
+            <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
+            <text>{{ user.nickName }}</text>
+          </view>
+          <view>
+            <text>已练习打卡</text>
+            <text>12121</text>
+            <text>天</text>
+          </view>
+        </view>
+        <view>
+          <view>
+            <view><text>1111</text><text>组</text></view>
+            <text>个人练习量</text>
+          </view>
+          <view>
+            <view><text>1111</text><text>箭</text></view>
+            <text>射箭量</text>
+          </view>
+          <view>
+            <view>
+              <text>射灵</text>
+              <text>{{ user.lvl }}</text>
+              <text>级</text>
+            </view>
+            <text>当前等级</text>
+          </view>
+        </view>
+      </view>
       <view class="practise-btn" @click="toPractiseOne">
         <image
           src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668e2vdtqh0otq.png"
@@ -39,11 +70,6 @@ const toPractiseTwo = () => {
           mode="widthFix"
         />
       </view>
-      <image
-        src="../static/practise-bg.png"
-        class="practise-bg"
-        mode="widthFix"
-      />
       <view class="practise-btn" @click="toPractiseTwo">
         <image
           src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668eehkvyicc08.png"
@@ -51,25 +77,78 @@ const toPractiseTwo = () => {
           mode="widthFix"
         />
       </view>
-      <image
-        src="../static/practise-bg.png"
-        class="practise-bg"
-        mode="widthFix"
-      />
     </view>
   </Container>
 </template>
 
 <style scoped>
+.practise-data,
 .practise-btn {
-  width: 100%;
-  margin-top: -6px;
+  width: calc(100% - 30px);
+  margin: 15px;
+  margin-top: 0;
+  border-radius: 20px;
+  border: 1px solid #473f25;
+  overflow: hidden;
+}
+.practise-data > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff9;
+  font-size: 11px;
+}
+.practise-data > view:first-child {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #48494e;
+  margin: 15px;
+  margin-bottom: 0;
+}
+.practise-data > view:first-child > view {
+  display: flex;
+  align-items: flex-end;
+}
+.practise-data > view:first-child > view:first-child > text {
+  color: #fff;
+  margin-left: 10px;
+  font-size: 16px;
+}
+.practise-data > view:first-child > view:last-child > text:nth-child(2) {
+  color: #f7d247;
+  margin: 0 3px;
+  font-size: 18px;
+  font-weight: 600;
+  transform: translateY(3px);
+}
+.practise-data > view:last-child {
+  margin-bottom: 15px;
+}
+.practise-data > view:last-child > view {
+  width: 33%;
+  margin-top: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.practise-data > view:last-child > view:nth-child(2) {
+  border-left: 1px solid #48494e;
+  border-right: 1px solid #48494e;
+}
+.practise-data > view:last-child > view > view {
+  display: flex;
+  align-items: flex-end;
+}
+.practise-data > view:last-child > view > view > text:nth-last-child(2) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 3px;
+  transform: translateY(3px);
+}
+.practise-data > view:last-child > view > text {
+  margin-top: 5px;
 }
 .practise-btn > image {
   width: 100%;
 }
-.practise-bg {
-  width: 100%;
-  margin-top: -6px;
-}
 </style>