提交

src/view/motorVehicle/components/four.vue

@@ -2,13 +2,13 @@
   <div class="page_item">
     <van-image width="326" height="53" class="fourtitle0" :src="fourtitle0" />
     <van-image width="203" height="27" class="fourtitle1" :src="fourtitle1" />
-    <van-image width="202" height="20" class="fourtitle2" :src="fourtitle2" />
+    <van-image width="125" height="20" class="fourtitle2" :src="fourtitle2" />
     <van-image width="262" height="25" class="fourtitle4" :src="fourtitle4" />
     <van-image width="304" height="24" class="fourtitle5" :src="fourtitle5" />
     <van-image width="251" height="46" class="fourtitle6" :src="fourtitle6" />
 
     <div class="chepai chepaihao" style="width: 363px">
-      <div class="item" style="padding-top: 1px;">
+      <div class="item" style="padding-top: 1px">
         <van-image width="35" height="31" :src="chepai" />
       </div>
       <div
@@ -19,11 +19,18 @@
       ></div>
     </div>
 
-    <div class="precedence" v-text="car.carOrderUnreal"></div>
+    <div class="precedence">
+      <countTo
+        :startVal="2000000"
+        :endVal="car.carOrderUnreal"
+        :duration="2000"
+      />
+      <van-image width="25" height="20" class="fourtitle7" :src="fourtitle7" />
+    </div>
   </div>
 </template>
 <script setup>
-import { defineProps } from "vue";
+import { defineProps } from 'vue';
 // import { onMounted, reactive } from "vue";
 import chepai from '@/assets/img/chepai.png';
 import fourtitle0 from '@/assets/img/chuxing.png';
@@ -32,11 +39,13 @@ import fourtitle2 from '@/assets/img/fourtitle2.png';
 import fourtitle4 from '@/assets/img/fourtitle4.png';
 import fourtitle5 from '@/assets/img/dashi.png';
 import fourtitle6 from '@/assets/img/bottomText.png';
+import fourtitle7 from '@/assets/img/wei.png';
+import countTo from '@/components/counto/vue-countTo.vue';
 const props = defineProps({
   car: {
     type: Object,
-  }
-})
+  },
+});
 const chepaiData = props.car.carId.split('');
 </script>
 <style scoped>
@@ -73,7 +82,7 @@ const chepaiData = props.car.carId.split('');
   margin-right: 3px;
 }
 
-.fourtitle0{
+.fourtitle0 {
   top: 107px;
   left: 25px;
   position: absolute;
@@ -108,12 +117,18 @@ const chepaiData = props.car.carId.split('');
   position: absolute;
 }
 
-.precedence{
+.fourtitle7 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 3px;
+}
+
+.precedence {
   position: absolute;
-  top: 368px;
-  left: 155px;
+  top: 370px;
+  left: 165px;
   text-align: center;
-  width: 4.3em;
+  width: 7.3em;
   font-size: 18px;
   color: #1e3c95;
 }

src/view/motorVehicle/index.vue

@@ -49,19 +49,6 @@ const car = ref({
   carOrderUnreal: 0,
 });
 
-const formmate = num => {
-  if (num === 0) return num;
-  let N = num || 0;
-  switch (true) {
-    case N >= 10000:
-      N = (N / 10000).toFixed(2) - 0 + "万";
-      break;
-    case N >= 100000000:
-      N = (N / 100000000).toFixed(2) - 0 + "亿";
-      break;
-  }
-  return N;
-};
 let P = window.localStorage.getItem('chepai') || '';
 P = P.replace(/,/g, "")
 if (P)
@@ -71,7 +58,7 @@ if (P)
     car.value = {
       drivingAge: res.drivingAge,
       carId: res.carId.replace('陕', ''),
-      carOrderUnreal: formmate(res.carOrderUnreal),
+      carOrderUnreal: res.carOrderUnreal,
     };
   });
 
@@ -92,7 +79,7 @@ const removeThis = (index, chepai) => {
     car.value = {
       drivingAge: res.drivingAge,
       carId: res.carId.replace('陕', ''),
-      carOrderUnreal: formmate(res.carOrderUnreal),
+      carOrderUnreal: res.carOrderUnreal,
     };
   });
 };