新增人物介绍列表页和敬请期待

app.js

@@ -24,6 +24,20 @@ App({
       })
     }
   },
+  onShow: function(){
+    // wx.navigateTo({
+    //   url: './pages/listman/listman',
+    //   success: function(res){
+        
+    //   },
+    //   fail: function() {
+        
+    //   },
+    //   complete: function() {
+        
+    //   }
+    // })
+  },
   globalData:{
     userInfo:null
   }

app.json

@@ -1,7 +1,9 @@
 {
   "pages":[
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/logs/logs",
+    "pages/listman/listman",
+    "pages/detailman/detailman"
   ],
   "window":{
     "backgroundTextStyle":"light",

pages/detailman/detailman.js

@@ -0,0 +1,13 @@
+//index.js
+//获取应用实例
+var app = getApp()
+Page({
+  data: {
+    "name": ""
+  },
+  onLoad: function (options) {
+    this.setData({
+        name: options.name
+    })
+  }
+})

pages/detailman/detailman.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "人物介绍"
+}

pages/detailman/detailman.wxml

@@ -0,0 +1,13 @@
+<view class="detailman-container">
+  <!--<view class="detailman-top">
+    <image src="{{pic}}"></image>
+    <text class="name">{{name}}</text>
+  </view> 
+  <view class="detailman-text">
+    <text class="intro">{{intro}}</text>
+    <text class="intro-text">{{intro-text}}</text>
+    <text class="skill">{{skill}}</text>
+    <text class="skill-text">{{skill-text}}</text>
+  </view> -->
+   <text class="name">{{name}}</text>
+</view>

pages/detailman/detailman.wxss

@@ -0,0 +1,47 @@
+/**人物介绍列表页**/
+
+page {
+  background: #eff3f8;
+  padding:10rpx 0;
+}
+
+/**每个人物 box**/
+
+.itemman-container {
+  width: 630rpx;
+  height: 106rpx;
+  background: #fff;
+  box-shadow: 0 4rpx 6rpx 0 #e2e2e2;
+  margin: 30rpx auto;
+  border-radius: 10rpx;
+  padding: 30rpx 40rpx;
+}
+
+.itemman-pic {
+  width: 106rpx;
+  height: 106rpx;
+  float: left;
+}
+
+.itemman-pic image {
+  width: 106rpx;
+  height: 106rpx;
+}
+
+.itemman-text {
+  float: left;
+  margin-left: 30rpx;
+}
+
+.itemman-text .name {
+  color: #333;
+  font-size: 34rpx;
+  display: block;
+  margin-top: 11rpx;
+  margin-bottom: 18rpx;
+}
+
+.itemman-text .intro {
+  color: #b3b3b3;
+  font-size: 28rpx;
+}

pages/index/index.js

@@ -3,9 +3,16 @@
 var app = getApp()
 Page({
   data: {
-    
+
   },
   onLoad: function () {
-    
+
+  },
+  comingsoon: function () {
+    wx.showToast({
+      title: '敬请期待',
+      icon: 'success',
+      duration: 1500
+    })
   }
 })

pages/index/index.wxml

@@ -5,22 +5,22 @@
   <text>狼人杀盒子</text>
 </view>
 <view class="index-btn-wrap">
-  <button class="index-btn" type="default" hover-class="index-button-hover">开始面杀</button>
+  <view class="index-btn" type="default" hover-class="index-button-hover" bindtap="comingsoon">开始面杀</view>
 </view>
 <view class="index-bottom">
-  <view class="index-bottom-item">
+  <view class="index-bottom-item" bindtap="comingsoon">
     <image src="./images/gameinfo.png"></image>
     <text>游戏介绍</text>
   </view>
-  <view class="index-bottom-item">
+  <navigator class="index-bottom-item" url="../listman/listman" open-type="navigate" hover-class="index-bottom-item-hover">
     <image src="./images/maninfo.png"></image>
     <text>人物介绍</text>
-  </view>
-  <view class="index-bottom-item">
+  </navigator>
+  <view class="index-bottom-item" bindtap="comingsoon">
     <image src="./images/goodman.png"></image>
     <text>好人玩法</text>
   </view>
-  <view class="index-bottom-item">
+  <view class="index-bottom-item" bindtap="comingsoon">
     <image src="./images/wolfman.png"></image>
     <text>狼人玩法</text>
   </view>

pages/index/index.wxss

@@ -40,6 +40,8 @@ page {
   margin-top: -60rpx;
   border-radius: 60rpx;
   font-size: 36rpx;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .index-button-hover {

pages/listman/listman.js

@@ -0,0 +1,55 @@
+//index.js
+//获取应用实例
+var app = getApp()
+Page({
+  data: {
+    dataList:[
+      //村民
+      {
+          "pic": "./images/cunmin.png",
+          "title": "cunmin",
+          "name": "村民",
+          "intro": "全场最懵的角色"
+      },
+      //女巫
+      {
+          "pic": "./images/nvwu.png",
+          "title": "nvwu",
+          "name": "女巫",
+          "intro": "可乐的代言人"
+      },
+      //猎人
+      {
+          "pic": "./images/lieren.png",
+          "title": "lieren",
+          "name": "猎人",
+          "intro": "全场最叼的角色"
+      },
+      //预言家
+      {
+          "pic": "./images/yuyanjia.png",
+          "title": "yuyanjia",
+          "name": "预言家",
+          "intro": "全场最惨的角色"
+      },
+      //盗贼
+      {
+          "pic": "./images/daozei.png",
+          "title": "daozei",
+          "name": "盗贼",
+          "intro": "全场最gay的角色"
+      },
+      //丘比特
+      {
+          "pic": "./images/qiubite.png",
+          "title": "qiubite",
+          "name": "丘比特",
+          "intro": "全场最色情的角色"
+      },
+      
+    ]
+  },
+  onLoad: function () {
+    
+  }
+})

pages/listman/listman.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "人物介绍"
+}

pages/listman/listman.wxml

@@ -0,0 +1,15 @@
+<template name="itemman">
+  <navigator class="itemman-container" url="../detailman/detailman?name={{name}}" open-type="navigate">
+    <view class="itemman-pic">
+      <image src="{{pic}}"></image>
+    </view> 
+    <view class="itemman-text">
+      <text class="name">{{name}}</text>
+      <text class="intro">{{intro}}</text>
+    </view> 
+  </navigator>
+</template>
+
+<block wx:for="{{dataList}}" wx:key="item">
+    <template is="itemman" data="{{...item}}"></template>
+</block>

pages/listman/listman.wxss

@@ -0,0 +1,47 @@
+/**人物介绍列表页**/
+
+page {
+  background: #eff3f8;
+  padding:10rpx 0;
+}
+
+/**每个人物 box**/
+
+.itemman-container {
+  width: 630rpx;
+  height: 106rpx;
+  background: #fff;
+  box-shadow: 0 4rpx 6rpx 0 #e2e2e2;
+  margin: 30rpx auto;
+  border-radius: 10rpx;
+  padding: 30rpx 40rpx;
+}
+
+.itemman-pic {
+  width: 106rpx;
+  height: 106rpx;
+  float: left;
+}
+
+.itemman-pic image {
+  width: 106rpx;
+  height: 106rpx;
+}
+
+.itemman-text {
+  float: left;
+  margin-left: 30rpx;
+}
+
+.itemman-text .name {
+  color: #333;
+  font-size: 34rpx;
+  display: block;
+  margin-top: 5rpx;
+  margin-bottom: 10rpx;
+}
+
+.itemman-text .intro {
+  color: #b3b3b3;
+  font-size: 28rpx;
+}