UI调整

src/components/AppBackground.vue

@@ -34,6 +34,7 @@ const props = defineProps({
   left: 0;
   top: 0;
   z-index: -1;
+  background-color: #050b19;
 }
 
 .bg-image {

src/components/BowTarget.vue

@@ -199,7 +199,7 @@ const simulShoot2 = async () => {
 <style scoped>
 .container {
   width: calc(100% - 30px);
-  padding: 15px;
+  padding: 5px 15px;
   position: relative;
 }
 .target {
@@ -260,7 +260,7 @@ const simulShoot2 = async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: -10px;
+  margin-bottom: -40px;
 }
 .header > image:first-child {
   width: 40px;

src/components/ShootProgress.vue

@@ -223,13 +223,13 @@ onUnmounted(() => {
   transform: translateX(-10px);
 }
 .container > view:first-child > image:first-child {
-  width: 80px;
+  width: 22vw;
   transform: translateX(10px);
 }
 .container > view:first-child > text {
   color: #fed847;
   font-size: 18px;
-  transform: translateY(-10px);
+  transform: translateY(-10px) translateX(-10px);
 }
 .container > view:first-child > button:last-child {
   overflow: visible;
@@ -239,27 +239,32 @@ onUnmounted(() => {
   transform: translateX(10px) translateY(-10px);
 }
 .container > view:last-child {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   z-index: -1;
   width: clac(100% - 30px);
   margin: 0 15px;
   text-align: center;
   background-color: #ffffff80;
   border-radius: 20px;
-  margin-top: -20px;
+  margin-top: -16px;
   font-size: 12px;
-  height: 20px;
-  line-height: 20px;
+  height: 15px;
+  line-height: 15px;
   position: relative;
   overflow: hidden;
 }
 .container > view:last-child > view {
   position: absolute;
-  height: 20px;
-  border-radius: 20px;
+  height: 15px;
+  border-radius: 15px;
   z-index: -1;
   transition: all 1s linear;
 }
 .container > view:last-child > text {
+  font-size: 10px;
+  line-height: 15px;
   z-index: 1;
   color: #000;
 }