activity/src/view/motorVehicle/components/four.vue

<template>
  <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="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">
        <van-image width="35" height="31" :src="chepai" />
      </div>
      <div
        class="item"
        v-for="(item, index) in chepaiData"
        :key="index"
        v-text="item"
      ></div>
    </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 { onMounted, reactive } from "vue";
import chepai from '@/assets/img/chepai.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';
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>
.page_item {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(../../../assets/img/chezhubg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.chepai {
  top: 213px;
  left: 27px;
  position: absolute;
  display: flex;
}

.chepai .item {
  height: 100%;
  width: 44px;
  height: 44px;
  font-size: 26px;
  color: #1e3c95;
  line-height: 1.5em;
  text-align: center;
  display: inline-block;
  border: 2px solid #1e3c95;
  border-radius: 3px;
  vertical-align: middle;
}
.chepai .item:not(:last-child) {
  margin-right: 3px;
}

.fourtitle0 {
  top: 107px;
  left: 25px;
  position: absolute;
}

.fourtitle1 {
  top: 295px;
  left: 85px;
  position: absolute;
}
.fourtitle2 {
  top: 370px;
  left: 39px;
  position: absolute;
}
.fourtitle4 {
  bottom: 143px;
  left: 52px;
  position: absolute;
}

.fourtitle5 {
  top: 403px;
  left: 39px;
  position: absolute;
}

.fourtitle6 {
  bottom: 39px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.fourtitle7 {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
}

.precedence {
  position: absolute;
  top: 370px;
  left: 165px;
  text-align: center;
  width: 7.3em;
  font-size: 24px;
  color: #1e3c95;
}
</style>