UI优化

src/components/UserHeader.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  onSignin: {
+    type: Function,
+    default: () => {},
+  },
 });
 const nextLvlPoints = ref("");
 const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
@@ -39,46 +43,65 @@ onMounted(() => {
 
 <template>
   <view class="container" :style="{ width: containerWidth }">
-    <Avatar :frame="true" :src="user.avatar" :onClick="toUserPage" :size="42" />
-    <view class="user-details">
-      <view class="user-name">
-        <text>{{ user.nickName }}</text>
-        <image
-          class="user-name-image"
-          src="../static/vip1.png"
-          mode="widthFix"
-        />
-      </view>
-      <view class="user-stats">
-        <text class="level-tag level-tag-first">{{ user.lvlName }}</text>
-        <text class="level-tag level-tag-second">L{{ user.lvl }}</text>
-        <view class="rank-tag">
-          <view
-            class="rank-tag-progress"
-            :style="{
-              width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
-            }"
+    <block v-if="user.id"
+      ><Avatar
+        :frame="true"
+        :src="user.avatar"
+        :onClick="toUserPage"
+        :size="42"
+      />
+      <view class="user-details">
+        <view class="user-name">
+          <text>{{ user.nickName }}</text>
+          <image
+            class="user-name-image"
+            src="../static/vip1.png"
+            mode="widthFix"
           />
-          <text class="rank-tag-text">
-            {{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}
-          </text>
+        </view>
+        <view class="user-stats">
+          <text class="level-tag level-tag-first">{{ user.lvlName }}</text>
+          <text class="level-tag level-tag-second">L{{ user.lvl }}</text>
+          <view class="rank-tag">
+            <view
+              class="rank-tag-progress"
+              :style="{
+                width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
+              }"
+            />
+            <text class="rank-tag-text">
+              {{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}
+            </text>
+          </view>
         </view>
       </view>
-    </view>
-    <view v-if="showRank === true" class="rank-info">
-      <image
-        class="rank-info-image"
-        src="../static/global-rank.png"
-        mode="widthFix"
-      />
-      <text>本赛季</text>
-      <text>暂未上榜</text>
-      <!-- <text class="rank-number"
+      <view v-if="showRank === true" class="rank-info">
+        <image
+          class="rank-info-image"
+          src="../static/global-rank.png"
+          mode="widthFix"
+        />
+        <text>本赛季</text>
+        <text>暂未上榜</text>
+        <!-- <text class="rank-number"
         >第<text :style="{ color: '#ffd700' }"
           >{{ user.points }}/{{ user.rankLvl }}</text
         >名</text
       > -->
-    </view>
+      </view>
+    </block>
+    <block v-else>
+      <view class="signin">
+        <image src="../static/user-icon.png" mode="widthFix" />
+        <view @click="() => (showModal = true)">
+          <text>新来的弓箭手你好呀~</text>
+          <view @click="onSignin">
+            <text>微信登录</text>
+            <image src="../static/enter-arrow-blue.png" mode="widthFix" />
+          </view>
+        </view>
+      </view>
+    </block>
   </view>
 </template>
 
@@ -163,23 +186,54 @@ onMounted(() => {
 }
 
 .rank-info {
+  width: 68px;
   text-align: left;
   font-size: 12px;
   position: relative;
   color: #b3b3b3;
   padding-left: 8px;
+  margin-left: 8px;
   display: flex;
   flex-direction: column;
 }
-
 .rank-info-image {
   position: absolute;
   top: -6px;
   left: -9px;
   width: 90px;
 }
-
+.rank-info > text {
+  text-align: center;
+}
 .rank-number {
   display: block;
 }
+.signin {
+  display: flex;
+  align-items: center;
+}
+.signin > image {
+  width: 40px;
+  height: 40px;
+}
+.signin > view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: 12px;
+  font-size: 14px;
+}
+.signin > view > view:last-child {
+  display: flex;
+  align-items: center;
+}
+.signin > view > view:last-child > text {
+  color: #39a8ff;
+  margin-top: 2px;
+}
+.signin > view > view:last-child > image {
+  width: 15px;
+  margin-top: 2px;
+}
 </style>