c端预定

+// components/stat/stat.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    stat: {
+      type: Number,
+      value:4,
+    },
+    color:{
+      type:String,
+      value:'',
+    }
+  }
+  ,
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {}
+})

+{
+    "component": true,
+    "usingComponents": {}
+}

+<!--components/stat/stat.wxml-->
+<view class="stat">
+    <view class="bg" style="background-color: {{$color}};width: {{(stat/5)*100}}%"></view>
+    <image src="http://qn.colorcun.com/custom/lite-online/image/%E9%95%82%E7%A9%BA%E6%98%9F%E6%98%9F.png"></image>
+</view>

+/* components/stat/stat.wxss */
+.stat{
+  width: 168rpx;
+  height: 30rpx;
+  position: relative;
+  background-color: #E0E0E0;
+  overflow: hidden;
+}
+.stat .bg{
+  position: absolute;
+  left: 0;
+  width: 80%;
+  top:0;
+  height: 100%;
+  background-color: #F05522;
+  z-index: 1;
+}
+.stat image{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top:0;
+  z-index: 2;
+}

+// pages/me/follow.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

+{
+  "usingComponents": {}
+}

+<!--pages/me/follow.wxml-->
+<text>pages/me/follow.wxml</text>

+/* pages/me/follow.wxss */

@@ -4,6 +4,7 @@
   "navigationBarTitleText":"一键订",
   "navigationBarTitleText":"一键订",
   "usingComponents": {
   "usingComponents": {
     "formids":"/components/formids/formids",
     "formids":"/components/formids/formids",
+    "stat":"/components/stat/stat",
     "nav":"/components/nav/nav"
     "nav":"/components/nav/nav"
   }
   }
 }
 }

@@ -19,8 +19,8 @@
             <view class="name">陕西风味面馆</view>
             <view class="name">陕西风味面馆</view>
             <view class="ping flex-cc">
             <view class="ping flex-cc">
                 <view class="item flex-lr fen">
                 <view class="item flex-lr fen">
-                    <view>*****</view>
-                    <view>4.0分</view>
+                    <stat stat="2"></stat>
+                    <view class="text">4.0分</view>
                 </view>
                 </view>
                 <view class="item">西北菜</view>
                 <view class="item">西北菜</view>
                 <view class="item">人均60元</view>
                 <view class="item">人均60元</view>
@@ -63,7 +63,7 @@
     <view class="block">
     <view class="block">
         <view class="header flex-ll">
         <view class="header flex-ll">
             <view class="line"></view>
             <view class="line"></view>
-            <view class="name">包间环境</view>
+            <view class="name">推荐菜品</view>
         </view>
         </view>
         <scroll-view
         <scroll-view
                 scroll-y
                 scroll-y
@@ -81,3 +81,20 @@
         </scroll-view>
         </scroll-view>
     </view>
     </view>
 </view>
 </view>
+<view class="footer flex-lr">
+    <view class="left flex-cc">
+        <formids class="flex-vc" url="/pages/customer/index">
+            <image src="http://qn.colorcun.com/custom/lite-online/image/%E9%A6%96%E9%A1%B5.png"></image>
+            <view class="text">首页</view>
+        </formids>
+        <formids class="follow flex-vc" bindclick="follow">
+            <image src="http://qn.colorcun.com/custom/lite-online/image/%E6%94%B6%E8%97%8F.png"></image>
+            <view class="text">收藏</view>
+        </formids>
+    </view>
+    <view class="reserve">
+        <formids class="flex-vc" bindclick="reserve">
+            <view class="text">电话预定</view>
+        </formids>
+    </view>
+</view>

@@ -48,6 +48,9 @@
   margin-left: 0;
   margin-left: 0;
   padding-left: 0;
   padding-left: 0;
 }
 }
+.base .ping .fen .text{
+  margin-left: 10rpx;
+}
 .base .peitao{
 .base .peitao{
   margin-top: 10rpx;
   margin-top: 10rpx;
 }
 }
@@ -79,6 +82,10 @@
 
 
 .block{
 .block{
   padding: 80rpx 0 60rpx;
   padding: 80rpx 0 60rpx;
+  border-bottom: 2rpx solid #F5F5F5;
+}
+.block:last-child{
+  border-width: 0;
 }
 }
 .block .header{
 .block .header{
   height: 44rpx;
   height: 44rpx;
@@ -97,4 +104,47 @@
   font-size: 24rpx;
   font-size: 24rpx;
   color: #FFFFFF;
   color: #FFFFFF;
   text-align: center;
   text-align: center;
+}
+.footer{
+  height: 100rpx;
+  line-height: 100rpx;
+  box-shadow: 0 0 8rpx 0 #E0E0E0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #FFFFFF;
+}
+.footer .left{
+  width: 50%;
+  height: 100%;
+}
+.footer .left formids{
+  height: 70rpx;
+  line-height: 34rpx;
+}
+.footer .left image{
+  width: 36rpx;
+  height: 34rpx;
+  line-height: 34rpx;
+}
+.footer .left .text{
+  line-height: 28rpx;
+  height: 28rpx;
+  font-size: 20rpx;
+  margin-top: 8rpx;
+}
+.footer .follow{
+  margin-left: 110rpx;
+}
+.footer .reserve{
+  width: 50%;
+  height: 100%;
+  background-color: #242320;
+}
+.footer .reserve .text{
+  line-height: 42rpx;
+  height: 42rpx;
+  font-size: 30rpx;
+  color:#ffffff;
 }
 }