麦夫子页面

+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

+{
+  "pages": [
+    "pages/mall/charge/charge",
+    "pages/mall/mall",
+    "pages/signIn/dailySignIn/dailySignIn",
+    "pages/signIn/daySignIn/daySignIn",
+    "pages/signIn/Weight/Weight",
+    "pages/signIn/bodyWeght/bodyWeght",
+    "pages/my/my",
+    "pages/signIn/signIn",
+    "pages/index/index",
+    "pages/logs/logs"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#FFAD50",
+    "navigationBarTitleText": "麦夫子",
+    "navigationBarTextStyle": "#FFFFFF"
+  }
+}

+/**app.wxss**/
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
+blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
+ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
+dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
+figcaption, footer, header, menu, nav, output, ruby, section, summary, time,
+mark, audio, video, input, view, text, template, blockquote, page {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font-weight: normal;
+    vertical-align: baseline;
+    box-sizing: border-box;
+    font-family: 'pingfang';
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure, footer, header, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+    height: 100%;
+    position: relative;
+}
+
+blockquote, q {
+    quotes: none;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+html, body {
+    width: 100%;
+}
+
+/* custom */
+
+a {
+    color: #000;
+    text-decoration: none;
+    -webkit-backface-visibility: hidden;
+}
+
+li {
+    list-style: none;
+}
+
+body {
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+img {
+    border: 0;
+    margin: 0;
+}
+
+input, textarea {
+    height: 100%;
+    width: 100%;
+    border: 0;
+    outline: none;
+    background: none;
+}
+
+/* fontIcon */
+@font-face {
+  font-family: 'iconfont';  /* project id 921699 */
+  src: url('//at.alicdn.com/t/font_921699_itl48k5kvp.eot');
+  src: url('//at.alicdn.com/t/font_921699_itl48k5kvp.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_921699_itl48k5kvp.woff') format('woff'),
+  url('//at.alicdn.com/t/font_921699_itl48k5kvp.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_921699_itl48k5kvp.svg#iconfont') format('svg');
+}
+
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow-right:before { content: "\e600"; }

+//index.js
+//获取应用实例
+const app = getApp()
+
+Page({
+  data: {
+    motto: 'Hello World',
+    userInfo: {},
+    hasUserInfo: false,
+    canIUse: wx.canIUse('button.open-type.getUserInfo')
+  },
+  //事件处理函数
+  bindViewTap: function() {
+    wx.navigateTo({
+      url: '../logs/logs'
+    })
+  },
+  onLoad: function () {
+    if (app.globalData.userInfo) {
+      this.setData({
+        userInfo: app.globalData.userInfo,
+        hasUserInfo: true
+      })
+    } else if (this.data.canIUse){
+      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+      // 所以此处加入 callback 以防止这种情况
+      app.userInfoReadyCallback = res => {
+        this.setData({
+          userInfo: res.userInfo,
+          hasUserInfo: true
+        })
+      }
+    } else {
+      // 在没有 open-type=getUserInfo 版本的兼容处理
+      wx.getUserInfo({
+        success: res => {
+          app.globalData.userInfo = res.userInfo
+          this.setData({
+            userInfo: res.userInfo,
+            hasUserInfo: true
+          })
+        }
+      })
+    }
+  },
+  getUserInfo: function(e) {
+    console.log(e)
+    app.globalData.userInfo = e.detail.userInfo
+    this.setData({
+      userInfo: e.detail.userInfo,
+      hasUserInfo: true
+    })
+  }
+})

+{}

+<!--index.wxml-->
+<view class="container">
+  <view class="userinfo">
+    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
+    <block wx:else>
+      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+    </block>
+  </view>
+  <view class="usermotto">
+    <text class="user-motto">{{motto}}</text>
+  </view>
+</view>

+/**index.wxss**/
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.userinfo-avatar {
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.userinfo-nickname {
+  color: #aaa;
+}
+
+.usermotto {
+  margin-top: 200px;
+}

+//logs.js
+const util = require('../../utils/util.js')
+
+Page({
+  data: {
+    logs: []
+  },
+  onLoad: function () {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map(log => {
+        return util.formatTime(new Date(log))
+      })
+    })
+  }
+})

+{
+  "navigationBarTitleText": "查看启动日志"
+}

+<!--logs.wxml-->
+<view class="container log-list">
+  <block wx:for="{{logs}}" wx:for-item="log">
+    <text class="log-item">{{index + 1}}. {{log}}</text>
+  </block>
+</view>

+.log-list {
+  display: flex;
+  flex-direction: column;
+  padding: 40rpx;
+}
+.log-item {
+  margin: 10rpx;
+}

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

+{
+  "navigationBarTitleText": "立即兑换"
+}

+<!--pages/mall/charge/charge.wxml-->
+<view class='content_box'>
+  <view class='list_box'>
+    <view class='item_list'>
+      <view>
+        <view>
+          <text>向昱筱</text>
+          <text>13252648165</text>
+        </view>
+        <view>天津市和平区气象台路1088号中环公寓</view>
+      </view>
+      <view class='iconfont icon-arrow-right'></view>
+    </view>
+  </view>
+  <view class='list_box'>
+    <view class='list_title'>订单信息</view>
+    <view class='item_list'>
+      <view class='list_info_box'>
+        <view class='list_img'>
+          <image src='/images/good.png'></image>
+        </view>
+        <view>
+          <view>百草味 肉干肉脯 白芝麻猪肉脯</view>
+          <view>100克</view>
+          <view class='good_num_box'>
+            <text>
+              <text class='good_num'>150</text>
+              <text>积分</text>
+            </text>
+            <text class='original_price'>250积分</text>
+          </view>
+        </view>
+      </view>
+      <view class=''>X1</view>
+    </view>
+  </view>
+</view>

+/* pages/mall/charge/charge.wxss */
+
+page {
+  background: #fcfbfa;
+}
+
+.content_box {
+  padding: 16rpx 30rpx;
+}
+
+.list_box {
+  background: #fff;
+  border-radius: 20rpx;
+  margin-bottom: 16rpx;
+  padding: 30rpx;
+  box-sizing: border-box;
+}
+
+.item_list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 26rpx;
+  color: #1a1a1a;
+}
+
+.list_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #26363a;
+  margin-bottom: 30rpx;
+}
+.list_info_box{
+  display: flex;
+  align-items: center;
+}
+.list_img{
+  width: 128rpx;
+  height: 128rpx;
+  border-radius: 5rpx;
+  margin-right: 30rpx;
+}
+.list_img image{
+  width: 100%;
+  height: 100%;
+}

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

+{
+  "navigationBarTitleText": "积分商城"
+}

+<!--pages/mall/mall.wxml-->
+<view class='goods_box'>
+  <view class='good_item' wx:for='{{[1,1,1,1,1]}}'>
+    <view class='good_img'>
+      <image src='/images/good.png'></image>
+    </view>
+    <view class='good_info_box'>
+      <view class='good_title'>红枣酿造酒贵族经典</view>
+      <view class='good_info'>奶油味夏威夷果200g/袋</view>
+      <view class='good_num_box'>
+        <view>
+          <text class='good_num'>150</text>
+          <text>积分</text>
+        </view>
+        <view class='original_price'>250积分</view>
+      </view>
+      <view class='charge_btn'>立即兑换</view>
+    </view>
+  </view>
+</view>

+/* pages/mall/mall.wxss */
+
+.goods_box{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.good_item{
+  margin-bottom: 40rpx;
+}
+.good_img {
+  width: 370rpx;
+  height: 370rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.good_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.charge_btn {
+  width: 189rpx;
+  height: 60rpx;
+  background: rgba(255, 173, 80, 1);
+  border-radius: 30rpx;
+  font-size: 30rpx;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 27rpx;
+}
+
+.good_info_box {
+  padding: 20rpx 32rpx;
+}
+
+.good_title {
+  font-size: 28rpx;
+  color: #000;
+}
+
+.good_info {
+  font-size: 26rpx;
+  color: #666;
+  margin-top: 20rpx;
+}
+
+.good_num_box {
+  font-size: 24rpx;
+  color: #f00;
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.good_num {
+  font-size: 32rpx;
+}
+
+.original_price {
+  color: #a5a6a8;
+  text-decoration: line-through;
+  margin-left: 26rpx;
+}

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

+{}

+<!--pages/my/my.wxml-->
+<text>pages/my/my.wxml</text>

+/* pages/my/my.wxss */

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

+{}

+<!--pages/signIn/Weight/Weight.wxml-->
+<text>pages/signIn/Weight/Weight.wxml</text>

+/* pages/signIn/Weight/Weight.wxss */

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

+{
+  "navigationBarTitleText": "添加孕期体重"
+}

+<!--pages/signIn/bodyWeght/bodyWeght.wxml-->
+<view class='content_box'>
+  <view class='list_box'>
+    <view class='item_list'>
+      <view>测量日期</view>
+      <view class='list_input'>2018年12月19日</view>
+    </view>
+    <view class='item_list'>
+      <view>测量日期</view>
+      <view class='list_input'><input placeholder='请输入当天体重kg' placeholder-class='input_color'></input></view>
+    </view>
+  </view>
+   <view class='list_box'>
+    <view class='item_list'>
+      <view>我的体重数据</view>
+      <view class='list_input'><text class='iconfont icon-arrow-right'></text></view>
+    </view>
+  </view>
+</view> 
+<view class='bottom_btn'>保存</view>

+/* pages/signIn/bodyWeght/bodyWeght.wxss */
+
+page {
+  background: #fcfbfa;
+}
+
+.list_box {
+  margin-top: 20rpx;
+}
+
+.item_list {
+  font-size: 30rpx;
+  color: #000;
+  border-bottom: 1rpx solid #ebebeb;
+  background: #fff;
+  padding: 28rpx 33rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.item_list:last-child {
+  border: 0;
+}
+
+.list_input {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.list_input input {
+  text-align: right;
+}
+
+.input_color, .icon-arrow-right {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.bottom_btn {
+  width: 90%;
+  height: 80rpx;
+  background: rgba(255, 173, 80, 1);
+  border-radius: 40rpx;
+  font-size: 30rpx;
+  color: #fff;
+  position: fixed;
+  bottom: 30rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

+{
+  "navigationBarTitleText": "每日签到"
+}

+<!--pages/signIn/dailySignIn/dailySignIn.wxml-->
+<view class='content_box'>
+  <view class='hint_box'>累计天数:That Girl——Olly Murs——24HRS(deluxe)</view>
+  <view class='list_img'>
+    <image src='/images/img.png'></image>
+  </view>
+  <view class='list_info'>
+    <view>冬天太冷了，记得多穿几条秋裤，还有保暖~~~</view>
+    <view>——麦夫子</view>
+  </view>
+</view>
+<view class='bottom_box'>恭喜您签到成功，积分+5</view>

+/* pages/signIn/dailySignIn/dailySignIn.wxss */
+
+.content_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 35rpx 32rpx;
+}
+
+.hint_box {
+  width: 100%;
+  height: 60rpx;
+  line-height: 60rpx;
+  background: linear-gradient(to right, rgba(255, 201, 136, 0.9), #ffad50);
+  box-shadow: 0rpx 15rpx 30rpx 0rpx rgba(255, 214, 167, 1);
+  border-radius: 30rpx;
+  font-size: 27rpx;
+  color: #fff;
+  padding: 0 14rpx;
+  box-sizing: border-box;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+
+.list_img {
+  width: 100%;
+  height: 448rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 36rpx;
+}
+
+.list_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.list_info {
+  width: 100%;
+  font-size: 28rpx;
+  color: #000;
+  margin-top: 59rpx;
+  line-height: 60rpx;
+}
+
+.bottom_box {
+  width: 100%;
+  height: 165rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 173, 80, 1);
+  border-radius: 36rpx 36rpx 0rpx 0rpx;
+  font-size: 28rpx;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

+{
+  "navigationBarTitleText": "日打卡"
+}

+<!--pages/signIn/daySignIn/daySignIn.wxml-->
+<view class='banner_box'>
+  <view class='banner_item'>累计天数</view>
+  <view class='banner_item'>连续天数</view>
+  <view class='banner_item'>最长连续</view>
+  <view class='banner_item banner_value'>3</view>
+  <view class='banner_item banner_value'>2</view>
+  <view class='banner_item banner_value'>1</view>
+</view>
+<view class='content_box'>
+  <view class='list_info'>稳定血糖，从规律饮食开始！</view>
+  <view class='circle_box'>
+    <view>签到</view>
+    <view class='time_info'>07:23:34</view>
+  </view>
+  <view class='list_info'>已进入早打卡时间范围</view>
+</view>
+<view class='footer_box'>
+  <view class='footer_item'>
+    <view>早</view>
+    <view>午</view>
+    <view>晚</view>
+    <view>睡前</view>
+  </view>
+  <view class='footer_item footer_time'>
+    <view class='footer_info'>
+      <view>2018/10/19</view>
+      <view>7:23:13</view>
+    </view>
+    <view class='footer_info'>
+      <view>2018/10/19</view>
+      <view>7:23:13</view>
+    </view>
+    <view class='footer_info'>
+      <view>2018/10/19</view>
+      <view>7:23:13</view>
+    </view>
+    <view class='footer_info'>
+      <view>2018/10/19</view>
+      <view>7:23:13</view>
+    </view>
+  </view>
+</view>

+/* pages/signIn/daySignIn/daySignIn.wxss */
+
+.banner_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 30rpx 35rpx;
+}
+
+.banner_item {
+  width: 212rpx;
+  height: 78rpx;
+  background: #ffad50;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8rpx;
+}
+
+.banner_value {
+  background: #f5f6fa;
+  color: #000;
+}
+
+.content_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.circle_box {
+  width: 300rpx;
+  height: 300rpx;
+  background: linear-gradient(100deg, rgba(255, 201, 136, 0.8), #ffad50);
+  box-shadow: 0rpx 15rpx 30rpx 0rpx rgba(255, 211, 160, 1);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 48rpx;
+  color: #fff;
+}
+
+.time_info {
+  font-size: 32rpx;
+  margin-top: 35rpx;
+}
+
+.list_info {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #000;
+  text-align: center;
+  margin: 50rpx auto;
+}
+
+.footer_box {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.footer_item {
+  height: 100rpx;
+  background: #ffad50;
+  border-radius: 16rpx 16rpx 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer_item view {
+  width: 25%;
+  text-align: center;
+  font-size: 28rpx;
+  color: #fff;
+}
+
+.footer_time {
+  height: 117rpx;
+  background: #f5f6fa;
+}
+
+.footer_time view {
+  font-size: 24rpx;
+  color: #000;
+  text-align: center;
+}
+
+.footer_info view{
+  width: 100%;
+  text-align: center;
+}

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

+{}

+<!--pages/signIn/signIn.wxml-->
+<text>pages/signIn/signIn.wxml</text>

+/* pages/signIn/signIn.wxss */

+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.4.0",
+	"appid": "wx48319d952ea4e37f",
+	"projectname": "%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}

+const formatTime = date => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
+}
+
+const formatNumber = n => {
+  n = n.toString()
+  return n[1] ? n : '0' + n
+}
+
+module.exports = {
+  formatTime: formatTime
+}