优化样式

src/components/MultipleItemRanking/index.vue

@@ -9,7 +9,7 @@
         <div class="rankingBox">
           <div class="top">
             <div class="item two">
-              <div>
+              <div v-if="twoObj?.faceCheckStu?.student_id">
                 <div class="userInfo">
                   <div class="maozi maozi2">
                     <div class="num">2</div>
@@ -20,14 +20,14 @@
                     <img src="@/assets/images/test/profilePicture2.png" v-else />
                   </div>
                   <div class="name">
-                    {{ twoObj?.faceCheckStu?.name || "名字" }}
+                    {{ twoObj?.faceCheckStu?.name || "" }}
                   </div>
                 </div>
-                <div class="score">{{ twoObj.count || 0 }} <span>{{unit}}</span></div>
+                <div class="score">{{ twoObj.count || 0 }} <span>{{ unit }}</span></div>
               </div>
             </div>
             <div class="item one">
-              <div>
+              <div v-if="oneObj?.faceCheckStu?.student_id">
                 <div class="userInfo">
                   <div class="maozi maozi1">
                     <div class="num">1</div>
@@ -38,14 +38,14 @@
                     <img src="@/assets/images/test/profilePicture2.png" v-else />
                   </div>
                   <div class="name">
-                    {{ twoObj?.faceCheckStu?.name || "名字" }}
+                    {{ twoObj?.faceCheckStu?.name || "" }}
                   </div>
                 </div>
-                <div class="score">{{ oneObj.count || 0 }} <span>{{unit}}</span></div>
+                <div class="score">{{ oneObj.count || 0 }} <span>{{ unit }}</span></div>
               </div>
             </div>
             <div class="item three">
-              <div>
+              <div v-if="threeObj?.faceCheckStu?.student_id">
                 <div class="userInfo">
                   <div class="maozi maozi3">
                     <div class="num">3</div>
@@ -56,10 +56,10 @@
                     <img src="@/assets/images/test/profilePicture2.png" v-else />
                   </div>
                   <div class="name">
-                    {{ twoObj?.faceCheckStu?.name || "名字" }}
+                    {{ threeObj?.faceCheckStu?.name || "" }}
                   </div>
                 </div>
-                <div class="score">{{ threeObj.count || 0 }} <span>{{unit}}</span></div>
+                <div class="score">{{ threeObj.count || 0 }} <span>{{ unit }}</span></div>
               </div>
             </div>
           </div>
@@ -93,7 +93,7 @@ const data = reactive<any>({
   threeObj: {},
 });
 
-const {unit, windowState, oneObj, twoObj, threeObj } = toRefs(data);
+const { unit, windowState, oneObj, twoObj, threeObj } = toRefs(data);
 
 //打开
 const open = () => {
@@ -175,7 +175,9 @@ defineExpose({
     justify-content: space-around;
 
     .item {
+      width: calc(100% / 3);
       display: flex;
+      justify-content: center;
 
       .userInfo {
         display: flex;
@@ -264,7 +266,8 @@ defineExpose({
         font-family: 'Saira-ExtraBold';
         display: flex;
         justify-content: center;
-        span{
+
+        span {
           font-size: 2vw;
           display: block;
           margin-left: 5px;
@@ -290,6 +293,7 @@ defineExpose({
     background: url('@/assets/images/ranking/jiangtai.png') center center no-repeat;
     background-size: 100% 100%;
   }
+
   .closeBtn {
     width: 3vw;
     height: 3vw;