新增首页

app.json

@@ -5,8 +5,8 @@
   ],
   "window":{
     "backgroundTextStyle":"light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle":"black"
+    "navigationBarBackgroundColor": "#2F3E75",
+    "navigationBarTitleText": "狼人杀",
+    "navigationBarTextStyle":"#ffffff"
   }
 }

pages/index/index.js

@@ -3,24 +3,9 @@
 var app = getApp()
 Page({
   data: {
-    motto: 'Hello World',
-    userInfo: {}
-  },
-  //事件处理函数
-  bindViewTap: function() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
+    
   },
   onLoad: function () {
-    console.log('onLoad')
-    var that = this
-    //调用应用实例的方法获取全局数据
-    app.getUserInfo(function(userInfo){
-      //更新数据
-      that.setData({
-        userInfo:userInfo
-      })
-    })
+    
   }
 })

pages/index/index.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "狼人杀"
+}

pages/index/index.wxml

@@ -1,10 +1,27 @@
+
 <!--index.wxml-->
-<view class="container">
-  <view  bindtap="bindViewTap" class="userinfo">
-    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
-    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+<view class="index-top">
+  <image src="./images/logo.png"></image>
+  <text>狼人杀盒子</text>
+</view>
+<view class="index-btn-wrap">
+  <button class="index-btn" type="default" hover-class="index-button-hover">开始面杀</button>
+</view>
+<view class="index-bottom">
+  <view class="index-bottom-item">
+    <image src="./images/gameinfo.png"></image>
+    <text>游戏介绍</text>
   </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
+  <view class="index-bottom-item">
+    <image src="./images/maninfo.png"></image>
+    <text>人物介绍</text>
   </view>
-</view>
+  <view class="index-bottom-item">
+    <image src="./images/goodman.png"></image>
+    <text>好人玩法</text>
+  </view>
+  <view class="index-bottom-item">
+    <image src="./images/wolfman.png"></image>
+    <text>狼人玩法</text>
+  </view>
+</view>

pages/index/index.wxss

@@ -1,21 +1,81 @@
-/**index.wxss**/
-.userinfo {
+/**首页样式**/
+
+page {
+  height: 100%;
+  background: #eff3f8;
+}
+
+/** 顶部样式 **/
+
+.index-top {
   display: flex;
   flex-direction: column;
   align-items: center;
+  background: #2f3e75;
+  height: 36%;
+  justify-content: center;
 }
 
-.userinfo-avatar {
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
+.index-top image {
+  width: 180rpx;
+  height: 180rpx;
+  margin-bottom: 20rpx;
+  margin-top: -20rpx;
 }
 
-.userinfo-nickname {
-  color: #aaa;
+.index-top text {
+  color: #fff;
+  font-size: 32rpx;
 }
 
-.usermotto {
-  margin-top: 200px;
-}
+/**开始面杀样式**/
+
+.index-btn {
+  width: 590rpx;
+  height: 120rpx;
+  background: #6882ff;
+  color: #fff;
+  line-height: 120rpx;
+  text-align: center;
+  margin-top: -60rpx;
+  border-radius: 60rpx;
+  font-size: 36rpx;
+}
+
+.index-button-hover {
+  background: #5874fa;
+}
+
+/**底部样式**/
+
+.index-bottom {
+  display: flex;
+  flex-wrap: wrap;
+  height: 550rpx;
+  justify-content: center;
+  align-content: space-between;
+  margin-top:70rpx;
+}
+
+.index-bottom-item {
+  width: 330rpx;
+  height: 250rpx;
+  background: #fff;
+  border-radius: 10rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20rpx;
+}
+
+.index-bottom-item image {
+  width: 129rpx;
+  height: 122rpx;
+  margin-bottom: 20rpx;
+}
+
+.index-bottom-item text {
+  font-size: 30rpx;
+  color: #666;
+}