样式优化

src/components/ShootProgress2.vue

@@ -80,34 +80,33 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 12vw;
+  margin-left: 10rpx;
 }
 .container > image {
   width: 360rpx;
   height: 80rpx;
-  transform: translateY(7px);
+  transform: translateY(24rpx);
 }
 .container > view:last-child {
   width: 100%;
   text-align: center;
   background-color: #444444;
   border-radius: 20px;
-  font-size: 12px;
-  height: 15px;
-  line-height: 15px;
+  height: 24rpx;
   position: relative;
   overflow: hidden;
 }
 .container > view:last-child > view {
-  position: absolute;
-  height: 15px;
+  height: 24rpx;
   border-radius: 15px;
   transition: all 1s linear;
 }
 .container > view:last-child > text {
-  font-size: 10px;
-  line-height: 15px;
+  font-size: 18rpx;
   color: #fff;
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 </style>

src/components/TeamAvatars.vue

@@ -55,7 +55,10 @@ watch(
     <image
       :src="isRed ? '../static/flag-red.png' : '../static/flag-blue.png'"
       class="flag"
-      :style="{ [isRed ? 'left' : 'right']: '10rpx' }"
+      :style="{
+        [isRed ? 'left' : 'right']: '10rpx',
+        top: youTurn ? '-44rpx' : '-30rpx',
+      }"
     />
     <view
       v-for="(item, index) in team"
@@ -63,12 +66,12 @@ watch(
       class="player"
       :style="{
         width:
-          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 8 : 30) + 'px',
         height:
-          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 8 : 30) + 'px',
         borderColor: isRed ? '#ff6060' : '#5fadff',
         zIndex: team.length - ((players[item.id] || {}).sort || 0),
-        top: youTurn ? ((players[item.id] || {}).sort || 0) * 2 + 'px' : '6px',
+        top: youTurn ? ((players[item.id] || {}).sort || 0) * 4 + 'px' : '6px',
         left:
           (isRed
             ? ((players[item.id] || {}).sort || 0) * 20
@@ -87,7 +90,8 @@ watch(
       class="truncate"
       :style="{
         color: isRed ? '#ff6060' : '#5fadff',
-        [isRed ? 'left' : 'right']: 0,
+        left: isRed ? '-4rpx' : 'unset',
+        right: isRed ? 'unset' : '-12rpx',
       }"
       >{{ firstName }}</text
     >
@@ -100,15 +104,16 @@ watch(
   align-items: center;
   position: relative;
   width: 20vw;
-  height: 45px;
+  height: 10rpx;
   margin: 0 20rpx;
 }
 .container > text {
   position: absolute;
   font-size: 10px;
   text-align: center;
-  width: 40px;
-  bottom: -12px;
+  width: 90rpx;
+  bottom: -100rpx;
+  transform: translateY(-50% - 40rpx);
 }
 .player {
   transition: all 0.3s ease;
@@ -123,7 +128,7 @@ watch(
 }
 .player > text {
   position: absolute;
-  font-size: 8px;
+  font-size: 16rpx;
   text-align: center;
   width: 40px;
   left: 0px;
@@ -134,6 +139,6 @@ watch(
   position: absolute;
   width: 45rpx;
   height: 45rpx;
-  top: -30rpx;
+  transition: all 0.3s ease;
 }
 </style>

src/pages/team-battle.vue

@@ -391,7 +391,7 @@ onHide(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: -7vw;
-  margin-top: -3vw;
+  margin-top: -1%;
+  margin-bottom: 6%;
 }
 </style>