提交

src/view/motorVehicle/components/four.vue

@@ -1,19 +1,15 @@
 <template>
   <div class="page_item">
-    <van-image
-      width="120"
-      height="40"
-      class="jiaotonglogo"
-      :src="jiaotonglogo"
-    />
-    <van-image width="45" height="18" class="chepai" :src="chepaifour" />
-    <van-image width="305" height="30" class="fourtitle1" :src="fourtitle1" />
-    <van-image width="308" height="56" class="fourtitle2" :src="fourtitle2" />
-    <van-image width="292" height="27" class="fourtitle4" :src="fourtitle4" />
+    <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="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="font-size: 0;height: 30px;padding-top: 1px;">
-        <img :src="chepai" style="width: 25px; height: 21px" />
+      <div class="item" style="padding-top: 1px;">
+        <van-image width="35" height="31" :src="chepai" />
       </div>
       <div
         class="item"
@@ -29,12 +25,13 @@
 <script setup>
 import { defineProps } from "vue";
 // import { onMounted, reactive } from "vue";
-import jiaotonglogo from '../../../assets/img/logo1.png';
 import chepai from '@/assets/img/chepai.png';
-import chepaifour from '@/assets/img/chepaifour.png';
+import fourtitle0 from '@/assets/img/chuxing.png';
 import fourtitle1 from '@/assets/img/fourtitle1.png';
 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';
 const props = defineProps({
   car: {
     type: Object,
@@ -53,20 +50,16 @@ const chepaiData = props.car.carId.split('');
 }
 
 .chepai {
-  top: 158px;
-  left: 28px;
+  top: 213px;
+  left: 27px;
   position: absolute;
-}
-
-.chepaihao{
-  top: 149px;
-  left: 78px;
   display: flex;
 }
 
 .chepai .item {
   height: 100%;
-  width: 33px;
+  width: 44px;
+  height: 44px;
   font-size: 26px;
   color: #1e3c95;
   line-height: 1em;
@@ -80,34 +73,47 @@ const chepaiData = props.car.carId.split('');
   margin-right: 3px;
 }
 
+.fourtitle0{
+  top: 107px;
+  left: 25px;
+  position: absolute;
+}
+
 .fourtitle1 {
-  top: 227px;
-  left: 33px;
+  top: 295px;
+  left: 85px;
   position: absolute;
 }
 .fourtitle2 {
-  top: 287px;
-  left: 34px;
+  top: 370px;
+  left: 39px;
   position: absolute;
 }
 .fourtitle4 {
-  top: 453px;
-  left: 41px;
+  bottom: 143px;
+  left: 52px;
+  position: absolute;
+}
+
+.fourtitle5 {
+  top: 403px;
+  left: 39px;
   position: absolute;
 }
 
-.jiaotonglogo {
+.fourtitle6 {
+  bottom: 39px;
+  left: 50%;
+  transform: translateX(-50%);
   position: absolute;
-  top: 22px;
-  right: 27px;
 }
 
 .precedence{
   position: absolute;
-  top: 284px;
-  left: 125px;
+  top: 365px;
+  left: 160px;
   text-align: center;
-  width: 2.5em;
+  width: 2.3em;
   font-size: 26px;
   color: #1e3c95;
 }