添加游戏详情页底部动作条

src/app.wpy

@@ -1,12 +1,13 @@
 <style lang="less">
-.container {
+  @import "style/zanui/index.wxss";
-  height: 100%;
+  .container {
-  display: flex;
+    height: 100%;
-  flex-direction: column;
+    display: flex;
-  align-items: center;
+    flex-direction: column;
-  justify-content: space-between;
+    align-items: center;
-  box-sizing: border-box;
+    justify-content: space-between;
-}
+    box-sizing: border-box;
+  }
 </style>
 
 <script>

src/components/game-bottom-bar.wpy

@@ -0,0 +1,64 @@
+<!--游戏底部动作栏-->
+<style lang="less">
+  /*begin of bottom action bar*/
+  .vote-bottom-action-bar {
+    border-top: 1px solid #ccc;
+    height: 100rpx;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: fixed;
+    background: #f5f5f6;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    display: flex;
+    flex-flow: row nowrap;
+    padding:0 40rpx;
+    z-index: 100;
+  }
+  .vote-bottom-main {
+    width: 70%;
+  }
+  .vote-bottom-second i {
+    margin-right: 10rpx;
+  }
+  .vote-bottom-main i {
+    margin-right: 10rpx;
+  }
+  .vote-bottom-action-bar .zan-btn--small {
+    height:36px;
+    line-height:36px;
+  }
+</style>
+<template>
+  <view class="vote-bottom-action-bar {{ config.hide ? 'hidden' : ''}}">
+    <view class="vote-bottom-main zan-btn zan-btn--small zan-btn--primary" @tap="mainBtnTap"><i class="{{config.mainBtnIconClass}}"></i>{{config.mainBtnTitle}}</view>
+    <view class="vote-bottom-second zan-btn zan-btn--small" @tap="secondBtnTap"><i class="{{config.secondBtnIconClass}}"></i>{{config.secondBtnTitle}}</view>
+  </view>
+</template>
+<script>
+  import wepy from 'wepy'
+
+  export default class gameBottomBar extends wepy.component {
+    props = {
+      config: {
+        hide: true,
+        mainBtnIconClass: '',
+        mainBtnTitle: '',
+        secondBtnIconClass: '',
+        secondBtnTitle: ''
+      }
+    }
+    data = {
+    }
+    methods = {
+      mainBtnTap(e) {
+        this.$emit('bottomMainTap')
+      },
+      secondBtnTap(e) {
+        this.$emit('bottomSecondTap')
+      }
+    }
+  }
+</script>

src/pages/gameInfo.wpy

@@ -1,23 +1,80 @@
 <style lang="less">
+  .top-bar {
+    display: flex;
+    margin: 20rpx;
+  }
+  .top-game-icon {
+    width: 130rpx;
+    height: 130rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+  .top-game-icon image {
+    width: 100%;
+    height: 100%;
+    margin-right: 20rpx;
+  }
+  .top-bar .top-game-info {
+    margin-left: 20rpx;
+    display: flex;
+    flex-direction: column;
+  }
+  .top-bar .top-game-title {
+    color: #000;
+  }
+  .top-bar .top-game-desc {
+    color: #aaa;
+  }
+  .center-game-info {
+    background-color: #06BF04;
+  }
+  .bottom-game-info {
+    background-color: #3283fa;
+  }
 </style>
 <template>
+  <view class="top-bar">
+    <view class="top-game-icon">
+      <image src="http://pub.hoh8.cn/files/game/gba/1100283/icon.jpg"></image>
+    </view>
+    <view class="top-game-info">
+      <view class="top-game-title">魂斗罗</view>
+      <view class="top-game-desc">123123</view>
+    </view>
+  </view>
   <view class="container">
     <imageSwiper :imageList.sync="imageList" @tapBanner.user="imageTap"></imageSwiper>
   </view>
+  <view class="center-game-info">
+    center
+  </view>
+  <view class="bottom-game-info">
+    bottom
+  </view>
+  <gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap" @bottomSecondTap.user="bottomSecondTap"/>
 </template>
 
 <script>
 
   import wepy from 'wepy'
   import imageSwiper from '../components/image-swiper';
+  import gameBottomBar from '../components/game-bottom-bar';
 
   export default class GameInfoPage extends wepy.page {
     components = {
-      imageSwiper: imageSwiper
+      imageSwiper: imageSwiper,
+      gameBottomBar: gameBottomBar
     };
     data = {
       id: '',
-      imageList:[]
+      imageList:[],
+      bottomActionCfg: {
+        hide: false,
+        mainBtnIconClass: 'icon-plus',
+        mainBtnTitle: '开始游戏',
+        secondBtnIconClass: 'icon-mk_info',
+        secondBtnTitle: '领取金币'
+      },
     };
     methods = {
       imageTap: function(index) {
@@ -26,7 +83,13 @@
           current: this.imageList[index],
           urls: this.imageList
         })
-      }
+      },
+      bottomMainTap(e) {
+        console.log('bottomMainTap');
+      },
+      bottomSecondTap(e) {
+        console.log('bottomSecondTap');
+      },
     };
 
     onLoad(params) {