提交

src/view/motorVehicle/components/one.vue

@@ -1,30 +1,60 @@
 <template>
-  <div class="motorVehicle">
-    <van-swipe vertical>
-      <van-swipe-item>1</van-swipe-item>
-      <van-swipe-item>2</van-swipe-item>
-      <van-swipe-item>3</van-swipe-item>
-    </van-swipe>
+  <div class="page_item">
+    <van-image
+      width="147"
+      height="48"
+      class="jiaotonglogo"
+      :src="jiaotonglogo"
+    />
+    <div class="title">
+      <span class="bigTitle">2023</span>
+      年
+      <span class="bigTitle">4</span>
+      月
+      <span class="bigTitle">X</span>
+      日
+      <div>
+        西安市机动车保有量正式迈入
+        <span class="bigTitle">
+            <countTo :startVal="400" :endVal="500" :duration="3000"></countTo>
+        </span>
+        万大关
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
 // import { onMounted, reactive } from "vue";
-// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-/**
- * window.$originData.orginParames.title 页面标题
- * window.$originData.orginParames.parameters 固定参数值
- * window.$originData.urlParames url参数
- */
-console.log(window.$originData);
+import jiaotonglogo from '../../../assets/img/jiaotong.png';
+import countTo from '@/components/counto/vue-countTo.vue';
 </script>
-<style>
-.motorVehicle .van-swipe,
-.motorVehicle {
-  width: 100vw;
-  height: 100vh;
+<style scoped>
+.page_item {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url(../../../assets/img/banner1.jpg);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
 
-.motorVehicle .van-swipe__indicators {
-    display: none
+.jiaotonglogo {
+  position: absolute;
+  top: 13px;
+  right: 11px;
+}
+.title {
+  font-size: 16px;
+  line-height: 23px;
+  font-family: SourceHanSansSC-Heavy;
+  width: 350px;
+  height: 57px;
+  margin: 0 auto;
+  position: absolute;
+  top: 70px;
+  left: 14px;
+}
+.bigTitle {
+  font-size: 23px;
 }
 </style>

src/view/motorVehicle/components/three.vue

@@ -1,30 +1,14 @@
 <template>
-  <div class="motorVehicle">
-    <van-swipe vertical>
-      <van-swipe-item>1</van-swipe-item>
-      <van-swipe-item>2</van-swipe-item>
-      <van-swipe-item>3</van-swipe-item>
-    </van-swipe>
+  <div class="page_item">
+    3哈
   </div>
 </template>
 <script setup>
 // import { onMounted, reactive } from "vue";
-// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-/**
- * window.$originData.orginParames.title 页面标题
- * window.$originData.orginParames.parameters 固定参数值
- * window.$originData.urlParames url参数
- */
-console.log(window.$originData);
 </script>
-<style>
-.motorVehicle .van-swipe,
-.motorVehicle {
-  width: 100vw;
-  height: 100vh;
-}
-
-.motorVehicle .van-swipe__indicators {
-    display: none
+<style scoped>
+.page_item{
+    width: 100%;
+    height: 100%;
 }
 </style>

src/view/motorVehicle/components/two.vue

@@ -1,30 +1,14 @@
 <template>
-  <div class="motorVehicle">
-    <van-swipe vertical>
-      <van-swipe-item>1</van-swipe-item>
-      <van-swipe-item>2</van-swipe-item>
-      <van-swipe-item>3</van-swipe-item>
-    </van-swipe>
+  <div class="page_item">
+    2哈
   </div>
 </template>
 <script setup>
 // import { onMounted, reactive } from "vue";
-// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-/**
- * window.$originData.orginParames.title 页面标题
- * window.$originData.orginParames.parameters 固定参数值
- * window.$originData.urlParames url参数
- */
-console.log(window.$originData);
 </script>
-<style>
-.motorVehicle .van-swipe,
-.motorVehicle {
-  width: 100vw;
-  height: 100vh;
-}
-
-.motorVehicle .van-swipe__indicators {
-    display: none
+<style scoped>
+.page_item{
+    width: 100%;
+    height: 100%;
 }
 </style>

src/view/motorVehicle/index.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="motorVehicle">
     <van-swipe vertical>
-      <van-swipe-item>1</van-swipe-item>
-      <van-swipe-item>2</van-swipe-item>
-      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item><div class="page">
+        <one></one>
+      </div></van-swipe-item>
+      <van-swipe-item><div class="page">
+        <two></two>
+      </div></van-swipe-item>
+      <van-swipe-item><div class="page">
+        <three></three>
+      </div></van-swipe-item>
     </van-swipe>
   </div>
 </template>
@@ -15,13 +21,19 @@
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
+import one from "./components/one.vue";
+import two from "./components/two.vue";
+import three from "./components/three.vue";
 console.log(window.$originData);
 </script>
 <style>
 .motorVehicle .van-swipe,
-.motorVehicle {
+.motorVehicle,
+.page {
   width: 100vw;
   height: 100vh;
+  color: #fff;
+  font-weight: 500;
 }
 
 .motorVehicle .van-swipe__indicators {