smart-canteen/pages/home/index.wxml

<nav-bar navbar-data='{{navbarData}}' needBack="{{false}}"></nav-bar>
<view class="main" style="padding-top:{{height}}px;padding-bottom: 48px;">
  <view class="one" style="background-image:url({{background}})">
    <view class="one_1">
      <view class="tit">健康均衡饮食</view>
      <view class="info">
        <view class="info_1">
          <view>摄入</view>
          <view>440</view>
          <view><text class="iconfont icon-qialuli"></text></view>
        </view>
        <view class="info_1">
          <view>热量占比</view>
          <view>
            <van-circle value="{{heat}}" color="{{ heatColor }}" text="{{heat}}%" size="66" />
          </view>
        </view>
        <view class="info_1">
          <view>运动</view>
          <view>{{step}}</view>
          <view><text class="iconfont icon-icon"></text></view>
        </view>
      </view>
    </view>
  </view>
  <view class="two">
    <view class="tit"></view>
    <view class="info">
      <view class="two_1" bindtap="twoBtn" data-smile='1'>
        <view><text class="iconfont icon-swticondingcan1"></text></view>
        <view>报餐</view>
      </view>
      <view class="two_1" bindtap="twoBtn" data-smile='2'>
        <view><text class="iconfont icon-chuyulaji-shengcaishengfan"></text></view>
        <view>余菜打包</view>
      </view>
      <view class="two_1" bindtap="twoBtn" data-smile='3'>
        <view><text class="iconfont icon-reliangtiaodubiao"></text></view>
        <view>卡路里计算</view>
      </view>
    </view>
  </view>
  <view class="thr" wx:if="{{thrList.length>0}}">
    <view class="thr_1">
      <text>用餐卡:</text>
      <text>{{tenant}}</text>
      <text>【{{thrTitle}}】</text>
    </view>
    <view class="thr_2">
      <view class="thr_2Qrcode">
        <canvas class="qrcode" canvas-id="myQrcode"></canvas>
      </view>
      <view class="thr_2List">
        <view class="list">
          <text>菜名</text>
          <text>份数</text>
          <text>热量</text>
        </view>
        <view class="list" wx:key="item" wx:for="{{thrList}}">
          <text>{{item.name}}</text>
          <text>{{item.num}}</text>
          <text>{{item.reserve}}</text>
        </view>
      </view>
    </view>
  </view>
  <view class="four" bindtap="reserveBtn">
    <view class="tit">本周菜谱<text class="iconfont icon-jiantou"></text></view>
    <view class="image">
      <image src="/image/home/image2.jpg"></image>
    </view>
  </view>
</view>