提交

src/view/motorVehicle/components/four.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="page_item">
+    <van-image
+      width="120"
+      height="40"
+      class="jiaotonglogo"
+      :src="jiaotonglogo"
+    />
+    <van-image width="313" height="30" 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" />
+  </div>
+</template>
+<script setup>
+// import { onMounted, reactive } from "vue";
+import jiaotonglogo from '../../../assets/img/logo1.png';
+import chepaifour from '@/assets/img/chepaifour.png';
+import fourtitle1 from '@/assets/img/fourtitle1.png';
+import fourtitle2 from '@/assets/img/fourtitle2.png';
+import fourtitle4 from '@/assets/img/fourtitle4.png';
+</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: 158px;
+  left: 28px;
+  position: absolute;
+}
+.fourtitle1 {
+  top: 227px;
+  left: 33px;
+  position: absolute;
+}
+.fourtitle2 {
+  top: 287px;
+  left: 34px;
+  position: absolute;
+}
+.fourtitle4 {
+  top: 453px;
+  left: 41px;
+  position: absolute;
+}
+
+.jiaotonglogo {
+  position: absolute;
+  top: 22px;
+  right: 27px;
+}
+</style>

src/view/motorVehicle/components/one.vue

@@ -16,7 +16,7 @@
       <div>
         西安市机动车保有量正式迈入
         <span class="bigTitle">
-            <countTo :startVal="400" :endVal="500" :duration="3000"></countTo>
+            <countTo :startVal="400" :endVal="500" :duration="2000"></countTo>
         </span>
         万大关
       </div>

src/view/motorVehicle/components/three.vue

@@ -1,14 +1,74 @@
 <template>
-  <div class="page_item">
-    3哈
-  </div>
-</template>
-<script setup>
-// import { onMounted, reactive } from "vue";
-</script>
-<style scoped>
-.page_item{
+    <div class="page_item">
+      <van-image
+        width="242"
+        height="103"
+        class="saveData"
+        :src="saveData"
+      />
+      
+      <van-image
+        width="214"
+        height="74"
+        class="iis"
+        :src="iis"
+      />
+      
+      <van-image
+        width="330"
+        height="53"
+        class="chepai"
+        :src="chepai"
+      />
+      
+      <van-image
+        width="327"
+        height="71"
+        class="jialing"
+        :src="jialing"
+      />
+    </div>
+  </template>
+  <script setup>
+  // import { onMounted, reactive } from "vue";
+  import saveData from '@/assets/img/gethaibao.png';
+  import iis from "@/assets/img/iis.png";
+  import chepai from "@/assets/img/chepai.png";
+  import jialing from "@/assets/img/jialing.png";
+  </script>
+  <style scoped>
+  .page_item {
     width: 100%;
     height: 100%;
+    position: relative;
+    background-image: url(../../../assets/img/banner2.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  
+  .saveData{
+    left: 69px;
+    bottom: 63px;
+    position: absolute;
+  }
+
+  .iis{
+    left: 24px;
+    top: 194px;
+    position: absolute;
+  }
+
+.chepai{
+  top: 280px;
+  left: 24px;
+  position: absolute;
 }
-</style>
+
+.jialing{
+  top: 347px;
+  left: 21px;
+  position: absolute;
+}
+  
+  </style>
+  

src/view/motorVehicle/components/two.vue

@@ -1,14 +1,33 @@
 <template>
   <div class="page_item">
-    2哈
+    
+    <van-image
+      width="267"
+      height="94"
+      class="saveData"
+      :src="saveData"
+    />
   </div>
 </template>
 <script setup>
 // import { onMounted, reactive } from "vue";
+import saveData from '@/assets/img/saveData.png';
 </script>
 <style scoped>
-.page_item{
-    width: 100%;
-    height: 100%;
+.page_item {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url(../../../assets/img/banner2.jpg);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
+
+.saveData{
+  position: absolute;
+  left: 56px;
+  /* transform: translateX(-50%); */
+  bottom: 64px;
+}
+
 </style>

src/view/motorVehicle/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="motorVehicle">
-    <van-swipe vertical>
+    <van-swipe initial-swipe="0" :loop="false" vertical>
       <van-swipe-item><div class="page">
         <one></one>
       </div></van-swipe-item>
@@ -10,6 +10,9 @@
       <van-swipe-item><div class="page">
         <three></three>
       </div></van-swipe-item>
+      <van-swipe-item><div class="page">
+        <four></four>
+      </div></van-swipe-item>
     </van-swipe>
   </div>
 </template>
@@ -24,6 +27,7 @@
 import one from "./components/one.vue";
 import two from "./components/two.vue";
 import three from "./components/three.vue";
+import four from "./components/four.vue";
 console.log(window.$originData);
 </script>
 <style>