22

app.json

@@ -1,14 +1,15 @@
 {
   "pages": [
+    "pages/index/index",
     "pages/paiming/paiming",
     "pages/personInfo/personInfo",
     "pages/finishInfo/finishInfo",
     "pages/updatepassword/updatepassword",
     "pages/login/login",
-   
+
     "pages/visitandinfo/visitandinfo",
-    "pages/index/index",
    
+  
     "pages/collectInfo/collectInfo"
   ],
   "window": {

pages/index/index.js

@@ -2,7 +2,25 @@ const app = require('../../utils/util.js');
 const tools = require('../../utils/tools.js');
 Page({
   data: {
-
+    // 轮播
+    backgrounds: [{
+        "pic": "/images/banner1.png",
+        // link:'../aboutme/index',
+      },
+      {
+        "pic": "/images/banner2.png",
+        // link:'../aboutme/index',
+      },
+      {
+        "pic": "/images/banner3.png",
+        // link:'../aboutme/index',
+      },
+    ],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: true,
+    interval: 5000,
+    duration: 500
   },
 
   onLoad() {

pages/index/index.wxml

@@ -1,3 +1,31 @@
-<view>
-	首页的
+<view class="home">
+	<view class="top">
+		<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+			<block wx:key="unique" wx:for="{{backgrounds}}" wx:for-item="item">
+				<swiper-item>
+					<image src="{{item.pic}}"></image>
+				</swiper-item>
+			</block>
+		</swiper>
+	</view>
+	<view class="flex-box">
+		<image src="/images/tongzhi.png" style="width: 80rpx; height: 31rpx;"></image>
+		<view class="bck">今日探访老人可得双倍积分</view>
+	</view>
+	<view class="shu-top2">
+		<view class="shu"></view>
+		<view class="top2">长春市朝阳区数据统计</view>
+	</view>
+	<view class="top3">
+		<view class="top3-box">a</view>
+		<view class="top3-box">a</view>
+		<view class="top3-box">a</view>
+	</view>
+
+
+
+	<view class="shu-top2">
+		<view class="shu"></view>
+		<view class="top2">快速通道</view>
+	</view>
 </view>

pages/index/index.wxss

@@ -0,0 +1,79 @@
+.home {
+  width: 92%;
+  margin: 0 auto;
+}
+
+.home .top {
+  height: 350rpx;
+
+}
+
+.home .top swiper-item {
+  width: 100%;
+  height: 350rpx;
+  border-radius: 20rpx;
+}
+
+.home .top image {
+  width: 100%;
+  height: 350rpx;
+  border-radius: 20rpx;
+}
+
+.home .top swiper {
+  height: 350rpx;
+}
+
+.flex-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30rpx;
+}
+
+.bck {
+  background: #dbe9f6;
+  border-radius: 6px;
+  color: #3994f7;
+  margin-left: 20rpx;
+  padding: 10rpx 20rpx;
+  width: 90%;
+}
+
+.shu-top2 {
+  margin-top: 20rpx;
+  display: flex;
+  align-items: center;
+
+}
+
+.shu {
+  height: 36rpx;
+  width: 8rpx;
+  background: rgba(31, 135, 247, 1);
+  border-radius: 4px;
+
+}
+
+.top2 {
+  font-family: SourceHanSansCN;
+  font-weight: bold;
+  margin-left: 20rpx;
+}
+.top3 {
+  display: flex;
+  margin-top: 20rpx;
+}
+.top3-box {
+  background-color: #e5f6ff;
+  width: 220rpx;
+  height: 224rpx;
+  border-radius:10rpx;
+  text-align: center;
+}
+.top3-box:nth-child(2) {
+  margin-left: 20rpx;
+}
+.top3-box:nth-child(3) {
+  margin-left: 20rpx;
+}