初始化项目

src/views/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+	<i_head></i_head>
+<div class="banner">
+<swiper  ref="swiper" :options="swiperOption" >
+    <swiper-slide v-for="banner in banners" :key="banner.img" >
+			<img :src="banner.img" width="100%" />
+<div class="carousel">
+  <div class="infoBoxes">
+  <div  class="infoBox fromLeft" >
+					<div class="infoBoxContent">
+						<div class="infoBoxHead">
+							<span class="triangleRight"></span>
+							<span class="infoBoxTitle"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">IFRS16</font></font></span>						
+						</div>
+						<div class="bread"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">自2019年1月1日起，IFRS16成为强制性要求。</font><font style="vertical-align: inherit;">我们准备好了。</font><font style="vertical-align: inherit;">是吗</font></font></div>
+						<div class="seeMoreContainer">
+							<a href="javascript:void()" class="linkSeeMore"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">看到更多</font></font></a>
+						</div>
+            </div>
+          </div>
+    </div>
+  </div>
+		</swiper-slide>
+
+    <div class="directionControl  swiper-button-prev" slot="button-prev">  </div> 
+    <div class="directionControl  swiper-button-next" slot="button-next" >  </div> 
+    <div class="swiper-pagination" slot="pagination">  </div> 
+</swiper>
+
+	</div>
+
+	<div class="scrollToContentWrapper">
+		<a href="javascript:void(0)" id="scrollToBoxes" class="scrollToContent bottomShadowSegmentLight">
+			<img src="../assets/img/svg/ic_caret.svg" alt="">
+		</a>
+	</div>
+
+	<div id="pageBoxesContainer" class="page pageBoxes">
+
+		<div  class="box" v-for="product in  productData" :key="product.name" >
+			<img width="100%" :src="product.img"/>
+			<div class="boxTableHeader">
+				<div class="h2">{{product.name}}</div>
+			</div>
+			<router-link :to="product.url">	</router-link>
+		</div>
+	</div>
+		<i_footer></i_footer>
+  </div>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      swiperOption: {
+        autoplay: 2000,
+        speed: 1000,
+        loop:true,
+        navigation: {
+          nextEl: ".swiper-button-next", //前进按钮的css选择器或HTML元素。
+          prevEl: ".swiper-button-prev" //后退按钮的css选择器或HTML元素。
+        },
+        pagination: {
+          el: ".swiper-pagination",
+          type: "bullets",
+          bulletElement: "li", 
+          clickable: true 
+        }
+      },
+      banners: [
+        { img: require("../assets/img/banner_index0.png") },
+        { img: require("../assets/img/banner_index1.png") },
+        { img: require("../assets/img/banner_index2.png") },
+        { img: require("../assets/img/banner_index3.png") }
+      ],
+      productData: [
+        {
+          name: "设施管理",
+          img: require("../assets/img/boxbg_facilitiesmanagement.png"),
+          url: ""
+        },
+        {
+          name: "房地产",
+          // img: require("../assets/img/boxbg_propertyandrealestate.jpg"),
+          img: require("../assets/img/boxbg_errands.png"),
+          url: ""
+        },
+        {
+          name: "智能建筑",
+          img: require("../assets/img/boxbg_smartbuildings.png"),
+          url: ""
+        },
+        {
+          name: "清洁管理",
+          img: require("../assets/img/boxbg_cleaning.png"),
+          url: ""
+        },
+        {
+          name: "建筑系统",
+          img: require("../assets/img/boxbg_propertyandrealestate.png"),
+          url: ""
+        },
+        { name: "物联网", img: require("../assets/img/boxbg_iot.png"), url: "" }
+      ]
+    };
+  },
+
+  methods: {
+    onSlideChangeStart(currentPage) {
+      console.log("onSlideChangeStart", currentPage);
+    },
+    onSlideChangeEnd(currentPage) {
+      console.log("onSlideChangeEnd", currentPage);
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.swiper-pagination
+{
+  bottom: 10%;
+}
+</style>