UI调整

src/components/PlayersRow.vue

@@ -115,6 +115,9 @@ defineProps({
   overflow: hidden;
   width: 120px;
   transition: all 0.3s linear;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .avatar {
   width: 40px;

src/components/UserHeader.vue

@@ -35,7 +35,12 @@ const toUserPage = () => {
 
 <template>
   <view class="container" :style="{ width: containerWidth }">
-    <Avatar :frame="true" :src="user.avatarUrl" :onClick="toUserPage" />
+    <Avatar
+      :frame="true"
+      :src="user.avatarUrl"
+      :onClick="toUserPage"
+      :size="42"
+    />
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>
@@ -60,12 +65,13 @@ const toUserPage = () => {
         src="../static/global-rank.png"
         mode="widthFix"
       />
-      <text>本赛季全国</text>
-      <text class="rank-number"
+      <text>本赛季</text>
+      <text>暂未上榜</text>
+      <!-- <text class="rank-number"
         >第<text :style="{ color: '#ffd700' }"
           >{{ user.points }}/{{ user.rankLvl }}</text
         >名</text
-      >
+      > -->
     </view>
   </view>
 </template>
@@ -82,7 +88,7 @@ const toUserPage = () => {
 .user-details {
   display: flex;
   flex-direction: column;
-  padding-left: 5px;
+  padding-left: 10px;
 }
 
 .user-name {
@@ -92,7 +98,7 @@ const toUserPage = () => {
 }
 
 .user-name > text:first-child {
-  font-size: 16px;
+  font-size: 13px;
   max-width: 100px;
   white-space: nowrap;
   overflow: hidden;
@@ -115,7 +121,7 @@ const toUserPage = () => {
 }
 
 .level-tag-first {
-  width: 45px;
+  width: 40px;
   background: #5f51ff;
 }
 
@@ -127,7 +133,7 @@ const toUserPage = () => {
 .level-tag,
 .rank-tag {
   border-radius: 12px;
-  font-size: 10px;
+  font-size: 9px;
 }
 
 .rank-tag {
@@ -156,6 +162,8 @@ const toUserPage = () => {
   position: relative;
   color: #b3b3b3;
   padding-left: 8px;
+  display: flex;
+  flex-direction: column;
 }
 
 .rank-info-image {

src/pages/first-try.vue

@@ -26,6 +26,7 @@ const stepButtonTexts = [
   "",
   "退出新手试炼",
 ];
+const title = ref("新手试炼场");
 const start = ref(false);
 const practiseResult = ref({});
 const power = ref(0);
@@ -68,12 +69,16 @@ onUnmounted(() => {
 const nextStep = async () => {
   if (step.value === 0) {
     step.value = 1;
+    title.value = "凹造型";
   } else if (step.value === 1) {
     btnDisabled.value = true;
     step.value = 2;
+    title.value = "感知距离";
   } else if (step.value === 2) {
     step.value = 3;
+    title.value = "小试牛刀";
   } else if (step.value === 3) {
+    title.value = "新手试炼场";
     scores.value = [];
     await createPractise(total);
     step.value = 4;
@@ -96,9 +101,14 @@ const onClose = () => {
 </script>
 
 <template>
-  <Container :bgType="1" title="新手试炼场">
+  <Container :bgType="1" :title="title">
     <view class="container">
-      <Guide v-if="step !== 4" :tall="step === 2 || step === 5">
+      <Guide
+        v-if="step !== 4"
+        :tall="
+          (step === 1 && user.nickName.length > 6) || step === 2 || step === 5
+        "
+      >
         <text v-if="step === 0">
           hi，<text :style="{ color: '#fed847' }">{{ user.nickName }}</text>
           ，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）

src/pages/my-device.vue

@@ -192,6 +192,7 @@ const backToHome = () => {
   width: 40%;
   color: #fff;
   font-size: 14px;
+  margin: 35% 0;
 }
 .scan-code > view:first-child > image {
   width: 100%;
@@ -270,6 +271,13 @@ const backToHome = () => {
   margin-bottom: 5px;
   border-radius: 10px;
 }
+.device-binded > view > text {
+  width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 .device-binded > image {
   width: 16vw;
   margin: 0 20px;

src/pages/user.vue

@@ -7,7 +7,7 @@ import Avatar from "@/components/Avatar.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user } = storeToRefs(store);
+const { user, device } = storeToRefs(store);
 const { updateUser } = store;
 
 const toOrderPage = () => {
@@ -17,6 +17,12 @@ const toOrderPage = () => {
 };
 
 const toFristTryPage = () => {
+  if (!device.value.deviceId) {
+    return uni.showToast({
+      title: "请先绑定设备",
+      icon: "none",
+    });
+  }
   uni.navigateTo({
     url: "/pages/first-try",
   });