生鲜部分静态页

+//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/index/index",
+    "pages/my/orderDetail/orderDetail",
+    "pages/my/big/big",
+    "pages/my/activityInformation/activityInformation",
+    "pages/my/serach/serach",
+    "pages/my/selectAddress/selectAddress",
+    "pages/my/editAddress2/editAddress2",
+    "pages/my/editAddress/editAddress",
+    "pages/index/production_steps/production_steps",
+    "pages/my/myCollection/myCollection",
+    "pages/index/goodsDetial2/goodsDetial2",
+    "pages/index/goodsDetial/goodsDetial",
+    "pages/my/modifyPersonInformation/modifyPersonInformation",
+    "pages/my/modifyName/modifyName",
+    "pages/my/invitationList/invitationList",
+    "pages/my/invoiceInformation/invoiceInformation",
+    "pages/my/invoice/invoice",
+    "pages/my/commonProblems/commonProblems",
+    "pages/my/myAddress/myAddress",
+    "pages/my/invitationPolite/invitationPolite",
+    "pages/my/comment/comment",
+    "pages/my/coupons/coupons",
+    "pages/my/balance _center2/balance _center2",
+    "pages/my/charger_code/charger_code",
+    "pages/my/balance _center/balance _center",
+    "pages/my/my",
+    "pages/cart/cart"
+  ],
+  "window": {
+    "backgroundTextStyle": "dark",
+    "navigationBarBackgroundColor": "#1a191f",
+    "navigationBarTitleText": "HI，鲜生",
+    "navigationBarTextStyle": "white"
+  },
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于小程序位置接口的效果展示"
+    }
+  },
+  "tabBar": {
+    "selectedColor": "#222222",
+    "list": [
+      {
+        "selectedIconPath": "pages/imgs/nav02@2x.png",
+        "iconPath": "pages/imgs/nav01@2x.png",
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      },
+      {
+        "selectedIconPath": "pages/imgs/nav04@2x.png",
+        "iconPath": "pages/imgs/nav03@2x.png",
+        "pagePath": "pages/cart/cart",
+        "text": "购物车"
+      },
+      {
+        "selectedIconPath": "pages/imgs/nav06@2x.png",
+        "iconPath": "pages/imgs/nav05@2x.png",
+        "pagePath": "pages/my/my",
+        "text": "个人中心"
+      }
+    ]
+  },
+  "networkTimeout": {
+    "request": 1000,
+    "connectSocket": 1000,
+    "uploadFile": 1000,
+    "downloadFile": 1000
+  }
+}

+/**app.wxss**/
+
+@font-face {
+    font-family: 'pingfang';
+    src: url('pages/src/fonts/PingFangLight.ttf');
+    font-family: 'pingfanglight';
+    src: url('pages/src/fonts/PingFangLight.ttf');
+}
+
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+
+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, image {
+    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;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+    height: 5px;
+    background-color: rgba(125, 125, 125, 0.7);
+    -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    width: 5px;
+    background-color: rgba(125, 125, 125, 0.7);
+    -webkit-border-radius: 6px;
+}
+
+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;
+}
+
+
+
+
+.rmb {
+    font-size: 22rpx;
+    color: #222;
+}
+
+.nav_type_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 24rpx;
+    color: #222;
+    padding: 29rpx 23rpx;
+    border-bottom: 1rpx solid #f2f2f2;
+    background-color: #fff;
+}
+
+.nav_type_left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.nav_type {
+    display: flex;
+    align-items: center;
+    margin-right: 30rpx;
+}
+
+.nav_type .iconfont, .nav_type_right .iconfont {
+    font-size: 24rpx;
+    margin: 0 11rpx 0 0;
+}
+
+.nav_type_right {
+    display: flex;
+    align-items: center;
+}
+
+.type_active {
+    color: #ffda44;
+}
+
+/* 单个商品列表样式 */
+
+.goodbox {
+    background-color: #fff;
+
+}
+
+.good_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 50rpx 22rpx;
+    border-bottom: 1rpx solid #f2f2f2;
+}
+
+.good_img {
+    width: 225rpx;
+    height: 217rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.good_right {
+    flex: 2;
+    margin-left: 20rpx;
+}
+
+.good_name {
+    color: #222;
+    font-size: 30rpx;
+    padding: 0 0 10rpx 0;
+}
+
+.good_stand {
+    font-size: 24rpx;
+    color: #888;
+}
+
+.rmb {
+    font-size: 22rpx;
+}
+
+.good_pprice {
+    font-size: 26rpx;
+    color: #222;
+    font-weight: bold;
+    padding: 0 10rpx;
+}
+
+.good_oprice {
+    font-size: 22rpx;
+    color: #888;
+}
+
+.good_vip {
+    color: #f44;
+    font-size: 34rpx;
+    font-weight: bold;
+}
+
+.good_vipbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.good_vipbox_left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.good_vip_spec {
+    font-size: 18rpx;
+    height: 25rpx;
+    background-color: #f44;
+    padding: 3rpx;
+    text-align: center;
+    color: #fff;
+    line-height: 100%;
+    margin-left: 5rpx;
+    /* background-image: url('../imgs/') */
+}
+
+.good_btn {
+    height: 60rpx;
+    width: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #ffda44;
+    box-shadow: 5rpx 0px 5rpx rgba(248, 207, 38, 0.3);
+}
+
+.icon-gouwuche {
+    font-size: 29rpx;
+    color: #444;
+}
+
+/* 头部信息 */
+
+.banner {
+  height: 86rpx;
+  width: 100%;
+  overflow: hidden;
+  line-height: 80rpx;
+  background: #fff;
+  display: flex;
+  font-size: 34rpx;
+  color: #222;
+  border-bottom: 1rpx solid #ededed;
+  padding: 0 26rpx;
+  box-sizing: border-box;
+
+}
+
+.coupons {
+  font-weight: bold;
+  margin: 0 auto;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@font-face {
+  font-family: 'iconfont';  /* project id 636259 */
+  src: url('//at.alicdn.com/t/font_636259_xrf3sdkafk.eot');
+  src: url('//at.alicdn.com/t/font_636259_xrf3sdkafk.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_636259_xrf3sdkafk.woff') format('woff'),
+  url('//at.alicdn.com/t/font_636259_xrf3sdkafk.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_636259_xrf3sdkafk.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-vip:before { content: "\e62f"; }
+
+.icon-jia:before { content: "\e65b"; }
+
+.icon-jiantouarrow486:before { content: "\e6aa"; }
+
+.icon-quan:before { content: "\e741"; }
+
+.icon-gouwuche:before { content: "\e6be"; }
+
+.icon-cuowu:before { content: "\e657"; }
+
+.icon-icondayu:before { content: "\e632"; }
+
+.icon-huangguan:before { content: "\e640"; }
+
+.icon-3:before { content: "\e62c"; }
+
+.icon-one-off:before { content: "\e62d"; }
+
+.icon-two-off:before { content: "\e62e"; }
+
+.icon-shangyinhao:before { content: "\e63f"; }
+
+.icon-xiaoyu:before { content: "\e74c"; }
+
+.icon-diandian:before { content: "\e631"; }
+
+.icon-location:before { content: "\e601"; }
+
+.icon-search:before { content: "\e602"; }
+
+.icon-message:before { content: "\e603"; }
+
+.icon-fenlei:before { content: "\e604"; }
+
+.icon-jiance:before { content: "\e605"; }
+
+.icon-xingzhuang:before { content: "\e606"; }
+
+.icon-xingzhuang1:before { content: "\e607"; }
+
+.icon-datu:before { content: "\e608"; }
+
+.icon-wangge:before { content: "\e609"; }
+
+.icon-liebiao:before { content: "\e60a"; }
+
+.icon-shaixuan:before { content: "\e60b"; }
+
+.icon-chakanguize:before { content: "\e600"; }
+
+.icon-tianxie:before { content: "\e60c"; }
+
+.icon-xingzhuang2:before { content: "\e60d"; }
+
+.icon-fanhui:before { content: "\e60e"; }
+
+.icon-dingwei:before { content: "\e60f"; }
+
+.icon-lishisousuo:before { content: "\e610"; }
+
+.icon-remensousuo:before { content: "\e611"; }
+
+.icon-quxiao:before { content: "\e612"; }
+
+.icon-shanchu:before { content: "\e613"; }
+
+.icon-zhankai:before { content: "\e614"; }
+
+.icon-meipingfen:before { content: "\e615"; }
+
+.icon-maishoutuijian:before { content: "\e616"; }
+
+.icon-shoucang:before { content: "\e617"; }
+
+.icon-jinru:before { content: "\e618"; }
+
+.icon-pingfen:before { content: "\e619"; }
+
+.icon-genghuan:before { content: "\e630"; }
+
+.icon-location1:before { content: "\e61a"; }
+
+.icon-weixuanzhong:before { content: "\e61b"; }
+
+.icon-time:before { content: "\e61c"; }
+
+.icon-xuanzhong:before { content: "\e61d"; }
+
+.icon-fenxiangyouli:before { content: "\e61e"; }
+
+.icon-wodeshoucang:before { content: "\e61f"; }
+
+.icon-location2:before { content: "\e620"; }
+
+.icon-yonghuzhinan:before { content: "\e621"; }
+
+.icon-yijianfankui:before { content: "\e622"; }
+
+.icon-qiandao:before { content: "\e623"; }
+
+.icon-zhangdanmingxi:before { content: "\e624"; }
+
+.icon-chuxuyouli:before { content: "\e625"; }
+
+.icon-saoma:before { content: "\e626"; }
+
+.icon-pingjia:before { content: "\e627"; }
+
+.icon-cai:before { content: "\e628"; }
+
+.icon-zan:before { content: "\e629"; }
+
+.icon-kefu:before { content: "\e62a"; }
+
+.icon-quxiao1:before { content: "\e62b"; }
+
+.icon-dangqian:before { content: "\e64a"; }
+
+.icon-meipingfen-copy:before { content: "\e6bf"; }

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

+{}

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

+/* pages/cart/cart.wxss */

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

+{}

+<!--pages/index/goodsDetial/goodsDetial.wxml-->
+<view>
+  <view class='banner'>
+    <view class='iconfont icon-fanhui'></view>
+    <view class='coupons'>
+      <view class='goods_detail'>商品详情</view>
+      <view class='graphic_detail'>图文详情</view>
+    </view>
+    <view class='share'>分享</view>
+  </view>
+  <view class='banner_box'>
+    <view class='banner_img'>
+      <image src='../../imgs/caipu.png'></image>
+    </view>
+  </view>
+  
+  <view class='content_item'>
+    <view class='item_list'>
+      <view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
+      <view class='introduce'>量大好吃无限回购</view>
+      <view class='banner_character'>
+        <view class='banner_price'>
+          <view class=''>
+            <text class='money_icon'>￥</text>
+            <text class='money'>26.0</text>
+            <text class='original_price'>￥52.0</text>
+          </view>
+          <view class='display_box'>
+            <text class='money_icon2'>￥</text>
+            <text class='money2'>20.0</text>
+            <text class='vip'>会员专享</text>
+          </view>
+        </view>
+        <view>已售出：1566份</view>
+      </view>
+    </view>
+
+    <view class='item_list'>
+      <view class='list_content'>
+        <view class='content_title'>
+          <view class='title'>商品规格</view>
+          <view class='content'>选择 处理方式 份量</view>
+        </view>
+        <view class='iconfont icon-jinru'></view>
+      </view>
+      <view class='list_content'>
+        <view class='content_title'>
+          <view class='title'>基本参数</view>
+          <view class='content'>重量：500g*包 场地/品牌：大理弥渡 ...</view>
+        </view>
+        <view class='iconfont icon-jinru'></view>
+      </view>
+    </view>
+
+    <view class='item_list7'>
+      <view class='list_content'>
+        <view>
+          <view class='attribute'>
+            <view class='attribute_titel'>难度</view>
+            <view class='stars'>
+              <view class='iconfont icon-pingfen'></view>
+              <view class='iconfont icon-pingfen'></view>
+              <view class='iconfont icon-pingfen'></view>
+              <view class='iconfont icon-pingfen'></view>
+              <view class='iconfont icon-pingfen'></view>
+            </view>
+          </view>
+          <view class='attribute'>
+            <view class='attribute_titel'>难度</view>
+            <view class='stars'>10分钟</view>
+          </view>
+        </view>
+        <view>
+          <view class='attribute'>
+            <view class='attribute_titel'>难度</view>
+            <view class='attribute_content'>微辣</view>
+          </view>
+          <view class='attribute'>
+            <view class='attribute_titel'>难度</view>
+            <view class='attribute_content'>10分钟</view>
+          </view>
+
+        </view>
+      </view>
+      <view class='more_box'>
+        <view>展开更多</view>
+        <view class='iconfont icon-zhankai'></view>
+      </view>
+    </view>
+
+
+    <view class='item_list1'>
+      <view class='hint1'>
+        <view>15元升级SVIP，立享5特权</view>
+        <view class='cash_back'>
+          本商品
+          <text class='red_font'>更返2元</text>
+        </view>
+      </view>
+      <view class='hint1'>
+        <view>15元升级SVIP，立享5特权</view>
+        <view class='cash_back'>
+          本商品
+          <text class='red_font'>更返2元</text>
+        </view>
+      </view>
+    </view>
+
+    <view class='item_list2'>
+      <view class='user_evaluation'>
+        <view class='user_evaluation_title'>用户评价</view>
+        <view class='user_evaluation_time'>
+          <view>(26)</view>
+          <view class='iconfont icon-jinru'></view>
+        </view>
+      </view>
+      <view class='user_information_box'>
+        <view class='user_information'>
+          <view class='the_star'>
+            <view class='head_portrait'>
+              <image src='../../imgs/icon32.png'></image>
+            </view>
+            <view class='star_box'>
+              <view class='user_name'>叶晓林</view>
+              <view class='stars1'>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+              </view>
+            </view>
+          </view>
+          <view class='title'>2017-04-23</view>
+        </view>
+        <view class='evaluation'>第一次用Hi,鲜生，准时送达，送货上门，主动联系，态度很好,配送很快.感觉挺好。期待下一次购物~</view>
+        <view class='evaluation_img'>
+          <view class='upload_img_box'>
+            <view class='upload_img'>
+              <image src='../../imgs/pic38.png'></image>
+            </view>
+            <view class='upload_img'>
+              <image src='../../imgs/pic38.png'></image>
+            </view>
+            <view class='upload_img'>
+              <image src='../../imgs/pic38.png'></image>
+            </view>
+          </view>
+        </view>
+        <view class='comments_btn'>
+          <view class='iconfont icon-message'></view>
+          <view class='comments'>评论</view>
+        </view>
+      </view>
+    </view>
+
+    <view class='item_list3'>
+      <view class='package_title'>购买含本商品套餐更优惠</view>
+      <view class='package_box'>
+        <view class='package_img_box'>
+          <view class='package_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view class='package_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view class='package_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view class='package_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+        </view>
+        <view class='package_content'>
+          <view>粤菜大礼包 春节团圆系列</view>
+          <view class='package_hint'>为大家精选挑选的菜系</view>
+          <view class='pickage_display'>最多可省
+            <text class='money_icon2'>￥</text>
+            <text class='money2'>65.0</text> </view>
+        </view>
+      </view>
+    </view>
+
+    <view class='item_list4'>
+      <view class='detection'>
+        <view class='line1'></view>
+        <view class='detection_title'>安心检测</view>
+        <view class='line2'></view>
+      </view>
+      <view class='detection_hint'>经过14项感官排查，100%可溯，点标签查看。</view>
+      <view class='detection_item'>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+      </view>
+    </view>
+
+
+    <view class='itme_list5'>
+      <view class='recommended_box'>
+        <view class='iconfont icon-maishoutuijian'></view>
+        <view>买手推荐</view>
+      </view>
+      <view class='foretaste_box'>
+        <view class='head_portrait'>
+          <image src='../../imgs/icon32.png'></image>
+        </view>
+        <view class='buyer_recommend'>
+          <view class='buyer_name'>杨军</view>
+          <view>被称为挑剔的试吃官，力求让每个家庭吃上安心蔬菜</view>
+        </view>
+      </view>
+      <view class='aaa'></view>
+
+      <view class='recommend_content'>
+        <view class='iconfont icon-shangyinhao'></view>
+        <view class='recommend_character'>沃柑生产于广西，南方温和气候有着充足的日照环境，使其沃柑更甘甜水润。沃柑个大皮薄，容易剥皮，果肉脆嫩，粒粒果肉饱满，容易剥皮，果汁多易化渣。看得到的鲜嫩美味。</view>
+        <view class='triangle'></view>
+      </view>
+
+      <view class='ingredients'>
+        <view class='ingredients_title'>食材包内含20件</view>
+        <view class='ingredients_box'>
+          <view class='ingredients_img'>
+            <image src='../../imgs/icon32.png'></image>
+          </view>
+          <view>
+            <view class='ingredients_item'>
+              <view class='ingredients_name'>主料</view>
+              <view class='ingredients_content'>
+                <view> 排骨</view>
+                <view> 排骨</view>
+                <view> 排骨</view>
+                <view> 排骨</view>
+                <view> 排骨</view>
+              </view>
+            </view>
+            <view class='ingredients_item'>
+              <view class='ingredients_name'>主料</view>
+              <view class='ingredients_content'>
+                <view> 排骨</view>
+                <view> 排骨</view>
+                <view> 排骨</view>
+                <view> 排骨</view>
+                <view> 排骨</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class='graphic_ingredients_box'>
+        <view class='graphic_ingredients'>
+          <view class='graphic_ingredients_background'>
+            <view class='graphic_ingredients_border'>浏览图文食谱</view>
+          </view>
+        </view>
+        <view class='graphic_ingredients'>
+          <view class='graphic_ingredients_background'>
+            <view class='graphic_ingredients_border'>浏览图文食谱</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class='item_list6'>
+
+      <view class='collocation_title'>建议搭配 酸梅汁或红酒 解腻助消化</view>
+      <view class='collocation'>
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+            <view class=''>
+              <text class='money_icon2'>￥</text>
+              <text class='money2'>20.0</text>
+              <text class='original_price'>￥52.0</text>
+            </view>
+          </view>
+        </view>
+
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+            <view class=''>
+              <text class='money_icon2'>￥</text>
+              <text class='money2'>20.0</text>
+              <text class='original_price'>￥52.0</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+    </view>
+  </view>
+
+  <view class='bottom_btn'>
+    <view class='hint_btn'>
+      <view class='shop_car'>
+        <view class='iconfont icon-gouwuche'></view>
+        <view>购物车</view>
+      </view>
+      <view>
+        <view class='iconfont icon-shoucang'></view>
+        <view class='shop_car'>收藏</view>
+      </view>
+    </view>
+    <view class='join_btn'>加入购物车</view>
+    <view class='immediately_btn'>立即购买</view>
+  </view>
+
+</view>

+/* pages/index/goodsDetial/goodsDetial.wxss */
+
+page {
+  background: #f3f5f5;
+}
+
+.coupons {
+  font-size: 30rpx;
+  color: #222;
+  display: flex;
+}
+
+.goods_detail {
+  font-weight: bold;
+  border-bottom: 3rpx solid #ffda44;
+}
+
+.graphic_detail {
+  font-weight: bold;
+  margin-left: 56rpx;
+}
+
+.share {
+  font-size: 28rpx;
+  color: #222;
+}
+
+.banner_img {
+  height: 630rpx;
+}
+
+.banner_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.item_list {
+  padding: 32rpx 25rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.banner_title {
+  font-size: 34rpx;
+  color: #222;
+}
+
+.introduce {
+  font-size: 28rpx;
+  color: #888;
+}
+
+.banner_character {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 24rpx;
+  color: #888;
+  margin-top: 40rpx;
+}
+
+.banner_price {
+  display: flex;
+  /* align-items: center; */
+}
+
+.money_icon {
+  font-size: 22rpx;
+  color: #222;
+}
+
+.money {
+  font-size: 38rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.original_price {
+  color: #888;
+  text-decoration: line-through;
+}
+
+.display_box {
+  margin-left: 40rpx;
+}
+
+.money_icon2 {
+  font-size: 22rpx;
+  color: #f44;
+}
+
+.money2 {
+  font-size: 38rpx;
+  font-weight: bold;
+  color: #f44;
+}
+
+.vip {
+  color: #fff;
+  background-color: #f44;
+  margin-left: 5rpx;
+}
+
+.list_content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content_title {
+  display: flex;
+}
+
+.title {
+  font-size: 24rpx;
+  color: #888;
+}
+
+.content {
+  font-size: 24rpx;
+  color: #222;
+  margin-left: 47rpx;
+}
+
+.icon-jinru {
+  font-size: 22rpx;
+  color: #c7c7c7;
+}
+
+.more_box {
+  font-size: 24rpx;
+  color: #949a9a;
+  border-top: 1rpx solid #ededed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 24rpx;
+  margin-top: 35rpx;
+}
+
+.icon-zhankai {
+  font-size: 14rpx;
+  margin-left: 10rpx;
+}
+
+.item_list1 {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19rpx 16rpx;
+}
+
+.hint1 {
+  font-size: 22rpx;
+  color: #222;
+  background-color: #fafafa;
+  border-radius: 12rpx;
+  padding: 25rpx 39rpx;
+}
+
+.cash_back {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.red_font {
+  font-weight: bold;
+  color: #f44;
+}
+
+.item_list7 {
+  padding: 31rpx 25rpx 25rpx 25rpx;
+}
+
+.attribute {
+  width: 375rpx;
+  display: flex;
+  align-items: center;
+  /* margin-left: 49rpx; */
+}
+
+.attribute_titel {
+  font-size: 26rpx;
+  color: #94999a;
+}
+
+.stars {
+  display: flex;
+  font-size: 26rpx;
+  color: #222;
+  margin-left: 35rpx;
+}
+
+.icon-pingfen {
+  font-size: 26rpx;
+  color: #222;
+}
+
+.attribute_content {
+  font-size: 26rpx;
+  color: #222;
+  margin-left: 113rpx;
+}
+
+.item_list2, .item_list3, .item_list4, .itme_list5, .item_list6, .item_list7 {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.user_evaluation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rpx solid #f3f5f5;
+  padding: 31rpx 25rpx;
+}
+
+.user_evaluation_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.user_evaluation_time {
+  font-size: 24rpx;
+  color: #c7c7c7;
+  display: flex;
+  align-items: center;
+}
+
+.comments_btn {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 23rpx;
+  color: #949a9a;
+  margin-top: 24rpx;
+}
+
+.icon-message {
+  font-size: 22rpx;
+  color: #949a9a;
+  margin-right: 10rpx;
+}
+
+.user_information_box {
+  padding: 31rpx 25rpx 25rpx 25rpx;
+}
+
+.user_information {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.head_portrait {
+  width: 62rpx;
+  height: 62rpx;
+}
+
+.head_portrait image {
+  width: 100%;
+  height: 100%;
+}
+
+.star_box {
+  margin-left: 25rpx;
+}
+
+.the_star {
+  display: flex;
+  align-items: center;
+}
+
+.stars1 {
+  display: flex;
+}
+
+.user_name {
+  font-size: 26rpx;
+  color: #222;
+}
+
+.evaluation {
+  font-size: 24rpx;
+  color: #222;
+  margin-top: 25rpx;
+}
+
+.evaluation_img {
+  margin-top: 21rpx;
+}
+
+.upload_img_box {
+  display: flex;
+}
+
+.upload_img {
+  width: 160rpx;
+  height: 160rpx;
+  margin-right: 20rpx;
+}
+
+.upload_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.item_list3 {
+  padding: 39rpx 25rpx 40rpx 25rpx;
+}
+
+.package_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.package_box {
+  display: flex;
+  margin-top: 44rpx;
+}
+
+.package_img_box {
+  width: 200rpx;
+  height: 200rpx;
+  display: flex;
+  flex-wrap: wrap;
+  /* justify-content: flex-end;
+    align-content: space-between;  */
+}
+
+.package_img {
+  width: 95rpx;
+  height: 95rpx;
+}
+
+.package_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.package_content {
+  font-size: 30rpx;
+  color: #222;
+  margin-left: 40rpx;
+}
+
+.package_hint {
+  font-size: 24rpx;
+  color: #94999a;
+}
+
+.pickage_display {
+  font-size: 24rpx;
+  color: #f44;
+  margin-top: 47rpx;
+}
+
+.item_list4 {
+  padding: 46rpx 44rpx;
+}
+
+.detection_item {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 58rpx;
+}
+
+.detection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.line1 {
+  width: 115rpx;
+  height: 1rpx;
+  background: linear-gradient(to right, #fff, #bbb);
+}
+
+.line2 {
+  width: 115rpx;
+  height: 1rpx;
+  background: linear-gradient(to left, #fff, #bbb);
+}
+
+.detection_title {
+  font-size: 26rpx;
+  color: #222;
+  margin: 0 30rpx;
+}
+
+.detection_box {
+  font-size: 26rpx;
+  color: #222;
+}
+
+.detection_img {
+  margin: 0 auto;
+  width: 54rpx;
+  height: 54rpx;
+}
+
+.detection_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.detection_hint {
+  font-size: 22rpx;
+  color: #94999a;
+  text-align: center;
+  margin-top: 20rpx;
+}
+
+.itme_list5 {
+  position: relative;
+  padding: 45rpx 25rpx 30rpx 25rpx;
+  box-sizing: border-box;
+}
+
+.recommended_box {
+  width: 150rpx;
+  height: 45rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffda44;
+  border-radius: 0 0 16rpx 16rpx;
+  font-size: 22rpx;
+  color: #333;
+  position: absolute;
+  right: 24rpx;
+  top: 0;
+}
+
+.foretaste_box {
+  display: flex;
+  align-items: center;
+  font-size: 30rpx;
+}
+
+.buyer_recommend {
+  font-size: 22rpx;
+  color: #94999a;
+  margin-left: 20rpx;
+}
+
+.buyer_name {
+  font-size: 30rpx;
+  color: #222;
+}
+
+.recommend_content {
+  background-color: #fafafa;
+  border-radius: 16rpx;
+  padding: 25rpx 25rpx 25rpx 25rpx;
+  margin-top: 30rpx;
+  font-size: 26rpx;
+  color: #222;
+  position: relative;
+}
+
+.icon-shangyinhao {
+  font-size: 22rpx;
+  color: #e3e3e3;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-left: 60rpx solid #fafafa;
+  border-top: 30rpx solid transparent;
+  border-bottom: 30rpx solid transparent;
+  position: absolute;
+  top: -30rpx;
+  left: 50rpx;
+}
+
+.recommend_character {
+  margin-left: 10rpx;
+}
+
+.ingredients {
+  margin-top: 40rpx;
+}
+
+.ingredients_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+  text-align: center;
+}
+
+.ingredients_img {
+  width: 280rpx;
+  height: 280rpx;
+}
+
+.ingredients_box {
+  display: flex;
+}
+
+.ingredients_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.ingredients_item {
+  width: 400rpx;
+  font-size: 26rpx;
+  display: flex;
+  /* margin-left: 34rpx; */
+  margin-top: 34rpx;
+  border: 1px solid red;
+}
+
+.ingredients_name {
+  color: #94999a;
+  width: 80rpx;
+}
+
+.ingredients_content {
+  width: 300rpx;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 30rpx;
+  border: 1px solid red;
+}
+
+.graphic_ingredients_box {
+  margin-top: 40rpx;
+}
+
+.graphic_ingredients {
+  height: 200rpx;
+  border: 1rpx solid red;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url('http://hifresh.w.bronet.cn/assets/wxapp/keshihua@2x.png');
+  margin-bottom: 20rpx;
+}
+
+.graphic_ingredients_background {
+  width: 450rpx;
+  height: 110rpx;
+  background-color: #ffb244;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.graphic_ingredients_border {
+  font-size: 38rpx;
+  color: #fff;
+  width: 430rpx;
+  height: 90rpx;
+  border: 1rpx solid #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item_list6 {
+  padding: 30rpx 25rpx;
+}
+
+.collocation_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+  margin-bottom: 40rpx;
+}
+
+.collocation {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.collocation_box {
+  width: 340rpx;
+  border: 1rpx solid red;
+  border-radius: 16rpx;
+  overflow: hidden;
+  /* margin-left: 20rpx; */
+}
+
+.collocation_img {
+  width: 340rpx;
+  height: 340rpx;
+}
+
+.collocation_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.collocation_content {
+  background: #fafafa;
+  font-size: 30rpx;
+  color: #222;
+  padding: 22rpx;
+}
+
+.bottom_btn {
+  height: 100rpx;
+  background: #fff;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.hint_btn {
+  width: 218rpx;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.shop_car {
+  font-size: 18rpx;
+  color: #747b7d;
+}
+
+.join_btn {
+  width: 266rpx;
+  height: 100rpx;
+  background: linear-gradient(to left, #ffda44, #ffb244);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #fff;
+}
+
+.immediately_btn {
+  width: 266rpx;
+  height: 100rpx;
+  background: linear-gradient(to left, #f99115, #f56800);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #fff;
+}

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

+{}

+<!--pages/index/goodsDetial/goodsDetial.wxml-->
+<view>
+  <view class='banner'>
+    <view class='iconfont icon-fanhui'></view>
+    <view class='coupons'>商品详情</view>
+    <view class='share'>分享</view>
+  </view>
+  <view class='banner_box'>
+    <view class='banner_img'>
+      <image src='../../imgs/caipu.png'></image>
+    </view>
+    <view class='banner_img'>
+      <image src='../../imgs/caipu.png'></image>
+    </view>
+    <view class='banner_img'>
+      <image src='../../imgs/caipu.png'></image>
+    </view>
+    <view class='banner_img'>
+      <image src='../../imgs/caipu.png'></image>
+    </view>
+  </view>
+  <view class='content_item'>
+    <view class='item_list'>
+      <view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
+      <view class='introduce'>量大好吃无限回购</view>
+      <view class='banner_character'>
+        <view class='banner_price'>
+          <view class=''>
+            <text class='money_icon'>￥</text>
+            <text class='money'>26.0</text>
+            <text class='original_price'>￥52.0</text>
+          </view>
+          <view class='display_box'>
+            <text class='money_icon2'>￥</text>
+            <text class='money2'>20.0</text>
+            <text class='vip'>会员专享</text>
+          </view>
+        </view>
+        <view>已售出：1566份</view>
+      </view>
+    </view>
+
+
+    <view class='item_list2'>
+      <view class='user_evaluation'>
+        <view class='user_evaluation_title'>用户评价</view>
+        <view class='user_evaluation_time'>
+          <view>(26)</view>
+          <view class='iconfont icon-jinru'></view>
+        </view>
+      </view>
+      <view class='user_information_box'>
+        <view class='user_information'>
+          <view class='the_star'>
+            <view class='head_portrait'>
+              <image src='../../imgs/icon32.png'></image>
+            </view>
+            <view class='star_box'>
+              <view class='user_name'>叶晓林</view>
+              <view class='stars1'>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+                <view class='iconfont icon-pingfen'></view>
+              </view>
+            </view>
+          </view>
+          <view class='title'>2017-04-23</view>
+        </view>
+        <view class='evaluation'>第一次用Hi,鲜生，准时送达，送货上门，主动联系，态度很好,配送很快.感觉挺好。期待下一次购物~</view>
+        <view class='evaluation_img'>
+          <view class='upload_img_box'>
+            <view class='upload_img'>
+              <image src='../../imgs/pic38.png'></image>
+            </view>
+            <view class='upload_img'>
+              <image src='../../imgs/pic38.png'></image>
+            </view>
+            <view class='upload_img'>
+              <image src='../../imgs/pic38.png'></image>
+            </view>
+          </view>
+        </view>
+        <view class='comments_btn'>
+          <view class='iconfont icon-message'></view>
+          <view class='comments'>评论</view>
+        </view>
+      </view>
+    </view>
+
+
+    <view class='item_list1'>
+      <view class='hint1'>
+        <view>15元升级SVIP，立享5特权</view>
+        <view class='cash_back'>
+          本商品
+          <text class='red_font'>更返2元</text>
+        </view>
+      </view>
+      <view class='hint1'>
+        <view>15元升级SVIP，立享5特权</view>
+        <view class='cash_back'>
+          本商品
+          <text class='red_font'>更返2元</text>
+        </view>
+      </view>
+    </view>
+
+    <view class='item_list3'>
+      <view class='detection'>
+        <view class='line1'></view>
+        <view class='detection_title'>安心检测</view>
+        <view class='line2'></view>
+      </view>
+      <view class='detection_hint'>经过14项感官排查，100%可溯，点标签查看。</view>
+      <view class='detection_item'>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+        <view class='detection_box'>
+          <view class='detection_img'>
+            <image src='../../imgs/pic38.png'></image>
+          </view>
+          <view>可视化种植</view>
+        </view>
+      </view>
+    </view>
+
+    <view class='itme_list5'>
+      <view class='recommended_box'>
+        <view class='iconfont icon-maishoutuijian'></view>
+        <view>买手推荐</view>
+      </view>
+      <view class='foretaste_box'>
+        <view class='head_portrait'>
+          <image src='../../imgs/icon32.png'></image>
+        </view>
+        <view class='buyer_recommend'>
+          <view class='buyer_name'>杨军</view>
+          <view>被称为挑剔的试吃官，力求让每个家庭吃上安心蔬菜</view>
+        </view>
+      </view>
+      <view class='recommend_content'>
+        <view class='iconfont icon-shangyinhao'></view>
+        <view class='recommend_character'>沃柑生产于广西，南方温和气候有着充足的日照环境，使其沃柑更甘甜水润。沃柑个大皮薄，容易剥皮，果肉脆嫩，粒粒果肉饱满，容易剥皮，果汁多易化渣。看得到的鲜嫩美味。</view>
+        <view class='triangle'></view>
+      </view>
+    </view>
+
+    <view class='item_list4'>
+      <view class='detection'>
+        <view class='line1'></view>
+        <view class='detection_title'>商品包内容</view>
+        <view class='line2'></view>
+      </view>
+      <view class='detection_hint'>经过14项感官排查，100%可溯，点标签查看。</view>
+      <view class='collocation'>
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+          </view>
+        </view>
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+          </view>
+        </view>
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+          </view>
+        </view>
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+          </view>
+        </view>
+      </view>
+      <view class='charge_btn'>
+        <view class='iconfont icon-genghuan'></view>
+        <view>更换菜品</view>
+      </view>
+    </view>
+
+
+<view class='tips'>
+    <view class='item_list7'>
+      <view class='detection'>
+        <view class='line1'></view>
+        <view class='detection_title'>小贴士</view>
+        <view class='line2'></view>
+      </view>
+      <view class='tips_content'>
+        <view>01 烤翅中时，在烤盘底部刷一层油再放入烤箱中烤，这样就不会粘盘。</view>
+        <view>02 将腌制好的翅中再涂一层蜂蜜，这样会给翅中提鲜，烤出的翅中肉质更细嫩可口。</view>
+        <view>03 用翅中和香菇一起烹煮，可令两种食物中的纤维效果加倍，双重营养，使人体更容易消化吸收。</view>
+      </view>
+    </view>
+</view>
+
+
+    <view class='item_list6'>
+      <view class='collocation_title'>建议搭配 酸梅汁或红酒 解腻助消化</view>
+      <view class='collocation'>
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+            <view class=''>
+              <text class='money_icon2'>￥</text>
+              <text class='money2'>20.0</text>
+              <text class='original_price'>￥52.0</text>
+            </view>
+          </view>
+        </view>
+
+        <view class='collocation_box'>
+          <view class='collocation_img'>
+            <image src='../../imgs/pic43.png'></image>
+          </view>
+          <view class='collocation_content'>
+            <view>泰式冬阴功秘制虾汤...</view>
+            <view class='introduce'>量大好吃无限回购</view>
+            <view class=''>
+              <text class='money_icon2'>￥</text>
+              <text class='money2'>20.0</text>
+              <text class='original_price'>￥52.0</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class='bottom_btn'>
+    <view class='hint_btn'>
+      <view class='shop_car'>
+        <view class='iconfont icon-gouwuche'></view>
+        <view>购物车</view>
+      </view>
+      <view>
+        <view class='iconfont icon-shoucang'></view>
+        <view class='shop_car'>收藏</view>
+      </view>
+    </view>
+    <view class='join_btn'>加入购物车</view>
+    <view class='immediately_btn'>立即购买</view>
+  </view>
+
+</view>

+/* pages/index/goodsDetial/goodsDetial.wxss */
+
+page {
+  background: #f3f5f5;
+}
+
+.coupons {
+  font-size: 30rpx;
+  color: #222;
+  display: flex;
+}
+
+.goods_detail {
+  font-weight: bold;
+  border-bottom: 3rpx solid #ffda44;
+}
+
+.graphic_detail {
+  font-weight: bold;
+  margin-left: 56rpx;
+}
+
+.share {
+  font-size: 28rpx;
+  color: #222;
+}
+
+.banner_box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.banner_img {
+  width: 370rpx;
+  height: 315rpx;
+}
+
+.banner_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.item_list {
+  padding: 32rpx 25rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.banner_title {
+  font-size: 34rpx;
+  color: #222;
+}
+
+.introduce {
+  font-size: 28rpx;
+  color: #888;
+}
+
+.banner_character {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 24rpx;
+  color: #888;
+  margin-top: 40rpx;
+}
+
+.banner_price {
+  display: flex;
+  /* align-items: center; */
+}
+
+.money_icon {
+  font-size: 22rpx;
+  color: #222;
+}
+
+.money {
+  font-size: 38rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.original_price {
+  color: #888;
+  text-decoration: line-through;
+}
+
+.display_box {
+  margin-left: 40rpx;
+}
+
+.money_icon2 {
+  font-size: 22rpx;
+  color: #f44;
+}
+
+.money2 {
+  font-size: 38rpx;
+  font-weight: bold;
+  color: #f44;
+}
+
+.vip {
+  color: #fff;
+  background-color: #f44;
+  margin-left: 5rpx;
+}
+
+.list_content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content_title {
+  display: flex;
+}
+
+.title {
+  font-size: 24rpx;
+  color: #888;
+}
+
+.content {
+  font-size: 24rpx;
+  color: #222;
+  margin-left: 47rpx;
+}
+
+.icon-jinru {
+  font-size: 22rpx;
+  color: #c7c7c7;
+}
+
+.more_box {
+  font-size: 24rpx;
+  color: #949a9a;
+  border-top: 1rpx solid #ededed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 24rpx;
+  margin-top: 35rpx;
+}
+
+.icon-zhankai {
+  font-size: 14rpx;
+  margin-left: 10rpx;
+}
+
+.item_list1 {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19rpx 16rpx;
+}
+
+.hint1 {
+  font-size: 22rpx;
+  color: #222;
+  background-color: #fafafa;
+  border-radius: 12rpx;
+  padding: 25rpx 39rpx;
+}
+
+.cash_back {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.red_font {
+  font-weight: bold;
+  color: #f44;
+}
+
+.attribute {
+  width: 375rpx;
+  display: flex;
+  align-items: center;
+  /* margin-left: 49rpx; */
+}
+
+.attribute_titel {
+  font-size: 26rpx;
+  color: #94999a;
+}
+
+.stars {
+  display: flex;
+  font-size: 26rpx;
+  color: #222;
+  margin-left: 35rpx;
+}
+
+.icon-pingfen {
+  font-size: 26rpx;
+  color: #222;
+}
+
+.attribute_content {
+  font-size: 26rpx;
+  color: #222;
+  margin-left: 113rpx;
+}
+
+.item_list2, .item_list3, .item_list4, .itme_list5, .item_list6 {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.user_evaluation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rpx solid #f3f5f5;
+  padding: 31rpx 25rpx;
+}
+
+.user_evaluation_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.user_evaluation_time {
+  font-size: 24rpx;
+  color: #c7c7c7;
+  display: flex;
+  align-items: center;
+}
+
+.comments_btn {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 23rpx;
+  color: #949a9a;
+  margin-top: 24rpx;
+}
+
+.icon-message {
+  font-size: 22rpx;
+  color: #949a9a;
+  margin-right: 10rpx;
+}
+
+.user_information_box {
+  padding: 31rpx 25rpx 25rpx 25rpx;
+}
+
+.user_information {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.head_portrait {
+  width: 62rpx;
+  height: 62rpx;
+}
+
+.head_portrait image {
+  width: 100%;
+  height: 100%;
+}
+
+.star_box {
+  margin-left: 25rpx;
+}
+
+.the_star {
+  display: flex;
+  align-items: center;
+}
+
+.stars1 {
+  display: flex;
+}
+
+.user_name {
+  font-size: 26rpx;
+  color: #222;
+}
+
+.evaluation {
+  font-size: 24rpx;
+  color: #222;
+  margin-top: 25rpx;
+}
+
+.evaluation_img {
+  margin-top: 21rpx;
+}
+
+.upload_img_box {
+  display: flex;
+}
+
+.upload_img {
+  width: 160rpx;
+  height: 160rpx;
+  margin-right: 20rpx;
+}
+
+.upload_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.item_list3 {
+  padding: 46rpx 44rpx;
+}
+
+.item_list4 {
+  padding: 30rpx 25rpx;
+}
+
+.charge_btn {
+  height: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 26rpx;
+  color: #f44;
+  border: 1rpx solid #f44;
+  border-radius: 40rpx;
+  margin-top: 30rpx;
+}
+
+.detection_item {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 58rpx;
+}
+
+.detection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.line1 {
+  width: 115rpx;
+  height: 1rpx;
+  background: linear-gradient(to right, #fff, #bbb);
+}
+
+.line2 {
+  width: 115rpx;
+  height: 1rpx;
+  background: linear-gradient(to left, #fff, #bbb);
+}
+
+.detection_title {
+  font-size: 26rpx;
+  font-weight: bold;
+  color: #222;
+  margin: 0 30rpx;
+}
+
+.detection_box {
+  font-size: 26rpx;
+  color: #222;
+}
+
+.detection_img {
+  margin: 0 auto;
+  width: 54rpx;
+  height: 54rpx;
+}
+
+.detection_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.detection_hint {
+  font-size: 22rpx;
+  color: #94999a;
+  text-align: center;
+  margin-top: 20rpx;
+}
+
+.itme_list5 {
+  position: relative;
+  padding: 45rpx 25rpx 30rpx 25rpx;
+  box-sizing: border-box;
+}
+
+.recommended_box {
+  width: 150rpx;
+  height: 45rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffda44;
+  border-radius: 0 0 16rpx 16rpx;
+  font-size: 22rpx;
+  color: #333;
+  position: absolute;
+  right: 24rpx;
+  top: 0;
+}
+
+.foretaste_box {
+  display: flex;
+  align-items: center;
+  font-size: 30rpx;
+}
+
+.buyer_recommend {
+  font-size: 22rpx;
+  color: #94999a;
+  margin-left: 20rpx;
+}
+
+.buyer_name {
+  font-size: 30rpx;
+  color: #222;
+}
+
+.recommend_content {
+  background-color: #fafafa;
+  border-radius: 16rpx;
+  padding: 25rpx 25rpx 25rpx 25rpx;
+  margin-top: 30rpx;
+  font-size: 26rpx;
+  color: #222;
+  position: relative;
+}
+
+.icon-shangyinhao {
+  font-size: 22rpx;
+  color: #e3e3e3;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-left: 60rpx solid #fafafa;
+  border-top: 30rpx solid transparent;
+  border-bottom: 30rpx solid transparent;
+  position: absolute;
+  top: -30rpx;
+  left: 50rpx;
+}
+
+.recommend_character {
+  margin-left: 10rpx;
+}
+
+.ingredients {
+  margin-top: 40rpx;
+}
+
+.ingredients_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+  text-align: center;
+}
+
+.ingredients_img {
+  width: 280rpx;
+  height: 280rpx;
+}
+
+.ingredients_box {
+  display: flex;
+}
+
+.ingredients_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.ingredients_item {
+  width: 400rpx;
+  font-size: 26rpx;
+  display: flex;
+  /* margin-left: 34rpx; */
+  margin-top: 34rpx;
+  border: 1px solid red;
+}
+
+.ingredients_name {
+  color: #94999a;
+  width: 80rpx;
+}
+
+.ingredients_content {
+  width: 300rpx;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 30rpx;
+  border: 1px solid red;
+}
+
+.graphic_ingredients_box {
+  margin-top: 40rpx;
+}
+
+.graphic_ingredients {
+  height: 200rpx;
+  border: 1rpx solid red;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url('http://hifresh.w.bronet.cn/assets/wxapp/keshihua@2x.png');
+  margin-bottom: 20rpx;
+}
+
+.graphic_ingredients_background {
+  width: 450rpx;
+  height: 110rpx;
+  background-color: #ffb244;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.graphic_ingredients_border {
+  font-size: 38rpx;
+  color: #fff;
+  width: 430rpx;
+  height: 90rpx;
+  border: 1rpx solid #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item_list6 {
+  padding: 30rpx 25rpx;
+}
+
+.collocation_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+  margin-bottom: 40rpx;
+}
+
+.collocation {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 39rpx;
+}
+
+.collocation_box {
+  width: 340rpx;
+  border: 1rpx solid red;
+  border-radius: 16rpx;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+}
+
+.collocation_img {
+  width: 340rpx;
+  height: 340rpx;
+}
+
+.collocation_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.collocation_content {
+  background: #fafafa;
+  font-size: 30rpx;
+  color: #222;
+  padding: 22rpx;
+}
+
+.bottom_btn {
+  height: 100rpx;
+  background: #fff;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.hint_btn {
+  width: 218rpx;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.shop_car {
+  font-size: 18rpx;
+  color: #747b7d;
+}
+
+.join_btn {
+  width: 266rpx;
+  height: 100rpx;
+  background: linear-gradient(to left, #ffda44, #ffb244);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #fff;
+}
+
+.immediately_btn {
+  width: 266rpx;
+  height: 100rpx;
+  background: linear-gradient(to left, #f99115, #f56800);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #fff;
+}
+
+.tips{
+  padding: 0 25rpx;
+  box-sizing: border-box;
+}
+.tips_content{
+  margin-top: 30rpx;
+  line-height: 40rpx;
+}
+.item_list7 {
+  height: 368rpx;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 16rpx;
+  box-shadow: 15rpx 0rpx 30rpx rgba(214, 214, 214, 0.6);
+  font-size: 26rpx;
+  color: #222;
+  margin: 0 auto;
+  margin-bottom: 20rpx;
+  padding: 34rpx 49rpx;
+}

+// pages/cart/cart.js
+var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
+var qqmapsdk;
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    city: '',
+    imgUrls: [
+      1, 2, 2
+    ],
+    num: 5,
+    current_index: 0,
+    showad: true, //首页广告控制显示
+    popup_state: false
+  },
+  cancleMask() {
+    this.setData({
+      popup_state: false
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function(options) {
+    qqmapsdk = new QQMapWX({
+      key: 'KLXBZ-KAFCF-6LVJZ-JQAAL-NCI65-XTF52'
+    });
+    this.getaddress()
+  },
+  active_btn() {
+    this.setData({
+      current_index: 1
+    })
+  },
+  getaddress() {
+    var that = this
+    wx.getLocation({
+      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
+      success: function(res) {
+        console.log(res)
+        var latitude = res.latitude
+        var longitude = res.longitude
+        qqmapsdk.reverseGeocoder({
+          location: {
+            latitude: latitude,
+            longitude: longitude
+          },
+          success: function(res) {
+            console.log(res);
+            var ctiy = res.result.address_component.district
+            that.setData({
+              city: ctiy
+            })
+          },
+          fail: function(res) {
+            console.log(res);
+          },
+          complete: function(res) {
+            console.log(res);
+          }
+        });
+      }
+    })
+
+  },
+  //控制广告
+  show_ad() {
+    this.setData({
+      showad: false
+    })
+  },
+  //广告页的跳转
+  goad() {
+    console.log(1)
+  },
+
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function() {
+
+  }
+})

+{}

+<view class='index_top'>
+  <view class='index_add' bindtap='getaddress'>
+    <view class='iconfont icon-location'></view>
+    <text class='city_box'>{{city}}</text>
+  </view>
+  <view class='index_input'>
+    <input placeholder='有机红颜草莓' placeholder-class='holder'></input>
+    <icon type='search' size='16' color='#222'></icon>
+  </view>
+  <view class='iconfont  icon-message'></view>
+</view>
+<view class='nav_box'>
+  <swiper display-multiple-items='{{num}}' class='swiper_nav_box'>
+    <swiper-item>
+      <text class='nav_swiper_active'>推荐</text>
+    </swiper-item>
+    <swiper-item bindtap='active_btn'>
+      <text>中餐</text>
+    </swiper-item>
+    <swiper-item>
+      <text>中餐</text>
+    </swiper-item>
+    <swiper-item>
+      <text>美味海鲜</text>
+    </swiper-item>
+    <swiper-item>
+      <text>美味海鲜</text>
+    </swiper-item>
+  </swiper>
+  <view class='nav_text'>
+    <text class='iconfont icon-fenlei'></text>
+  </view>
+</view>
+<swiper previous-margin='40rpx' next-margin='40rpx' circular='true' display-multiple-items='1' class='swiper_banner_box'>
+  <swiper-item>
+    <image src='../imgs/pic2.png'></image>
+  </swiper-item>
+  <swiper-item>
+    <image src='../imgs/pic1.png'></image>
+  </swiper-item>
+  <swiper-item>
+    <image src='../imgs/pic2.png'></image>
+  </swiper-item>
+</swiper>
+<view class='safe_box'>
+  <view>
+    <text class='iconfont icon-jiance'></text>
+    <text>安心检测</text>
+  </view>
+  <view>
+    <text class='iconfont icon-xingzhuang'></text>
+    <text>优选源头</text>
+  </view>
+  <view>
+    <text class='iconfont icon-xingzhuang1'></text>
+    <text>赔付保证</text>
+  </view>
+</view>
+<view class='classfy'>
+  <image src='../imgs/pic2.png'></image>
+</view>
+<view class="safety_box function">
+  <navigator class="safe_item clo" url='goods_detial/goods_detial' hover-class="none">
+    <image src="../imgs/ic01@2x.png" alt="" mode='aspectFit'></image>
+    <text>会员俱乐部</text>
+  </navigator>
+  <navigator href="" class="safe_item clo" hover-class="none">
+    <image src="../imgs/ic02@2x.png" alt="" mode='aspectFit'></image>
+    <text>储值送券</text>
+  </navigator>
+  <navigator href="" class="safe_item clo" hover-class="none">
+    <image src="../imgs/ic03@2x.png" alt="" mode='aspectFit'></image>
+    <text>邀请有礼</text>
+  </navigator>
+  <navigator href="" class="safe_item clo" hover-class="none">
+    <image src="../imgs/ic04@2x.png" alt="" mode='aspectFit'></image>
+    <text>每日签到</text>
+  </navigator>
+</view>
+<view class='new_person_box'>
+  <view class="index_title">
+    <text class="title_left"></text>
+    <text class="title_mid">超值新人礼包</text>
+    <text class="title_right"></text>
+  </view>
+  <scroll-view class='scroll_box' scroll-x>
+    <view class='new_person_item'>
+      <image src='../imgs/pic1.png'></image>
+      <view class='goods_name'>三纹鱼片</view>
+      <view>
+        <text class='rmb'>￥</text>
+        <text class='pprice'>26.0</text>
+        <text class='oprice'>￥52.0</text>
+      </view>
+    </view>
+    <view class='new_person_item'>
+      <image src='../imgs/pic1.png'></image>
+      <view class='goods_name'>三纹鱼片</view>
+      <view>
+        <text class='rmb'>￥</text>
+        <text class='pprice'>26.0</text>
+        <text class='oprice'>￥52.0</text>
+      </view>
+    </view>
+    <view class='new_person_item'>
+      <image src='../imgs/pic1.png'></image>
+      <view class='goods_name'>三纹鱼片</view>
+      <view>
+        <text class='rmb'>￥</text>
+        <text class='pprice'>26.0</text>
+        <text class='oprice'>￥52.0</text>
+      </view>
+    </view>
+  </scroll-view>
+</view>
+<view class='nav_type_box'>
+  <view class='nav_type_left'>
+    <view class='nav_type type_active'>
+      <text class='iconfont icon-liebiao'></text>
+      <text>列表</text>
+    </view>
+    <view class='nav_type'>
+      <text class='iconfont icon-wangge'></text>
+      <text>网格</text>
+    </view>
+    <view class='nav_type'>
+      <text class='iconfont icon-datu'></text>
+      <text>大图</text>
+    </view>
+  </view>
+  <view class='nav_type_right'>
+    <text class='iconfont icon-shaixuan'></text>
+    <text>筛选</text>
+  </view>
+</view>
+<view class='classfy' style='padding-top:40rpx;'>
+  <image src='../imgs/pic2.png'></image>
+</view>
+<view class='goodbox'>
+  <view class='good_item'>
+    <view class='good_img'>
+      <image src='../imgs/pic2.png'></image>
+    </view>
+    <view class='good_right'>
+      <view class='good_name'>泰式冬阴功秘制虾汤620g</view>
+      <view class='good_stand'>量大好吃无限回购</view>
+      <view>
+        <text class='good_pprice'><text class='rmb'>￥</text>26.0</text>
+        <text class='good_oprice'><text class='rmb'>￥</text>52.0</text>
+      </view>
+      <view>
+        <view class='good_vipbox'>
+          <view class='good_vipbox_left'>
+            <text class='good_vip'><text class='rmb'>￥</text> 25.0</text>
+            <view class='good_vip_spec'>会员专享</view>
+          </view>
+          <view class='good_btn'>
+            <view class='iconfont icon-gouwuche'></view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class='good_item'>
+    <view class='good_img'>
+      <image src='../imgs/pic2.png'></image>
+    </view>
+    <view class='good_right'>
+      <view class='good_name'>泰式冬阴功秘制虾汤620g</view>
+      <view class='good_stand'>量大好吃无限回购</view>
+      <view>
+        <text class='good_pprice'><text class='rmb'>￥</text>26.0</text>
+        <text class='good_oprice'><text class='rmb'>￥</text>52.0</text>
+      </view>
+      <view>
+        <view class='good_vipbox'>
+          <view class='good_vipbox_left'>
+            <text class='good_vip'><text class='rmb'>￥</text> 25.0</text>
+            <view class='good_vip_spec'>会员专享</view>
+          </view>
+          <view class='good_btn'>
+            <view class='iconfont icon-gouwuche'></view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+<view class='ad_box' bindtap='show_ad' wx:if='{{showad}}'>
+  <image src='../imgs/atan@2x.png' mode='widthFix' catchtap='goad'></image>
+  <view class='iconfont icon-quxiao'></view>
+</view>
+
+<!-- 筛选弹窗LXY  -->
+<view class='masx_box' bindtap='cancleMask' wx:if='{{popup_state}}'>
+  <view class='popup_box'>
+    <view class='popup_content'>
+      <view class='popup_title'>烹饪时间</view>
+      <view class='popup_item'>
+        <view class='popup_item_content'>10分钟</view>
+        <view class='popup_item_content'>10分钟</view>
+        <view class='popup_item_content'>10分钟</view>
+      </view>
+    </view>
+
+    <view class='popup_content'>
+      <view class='popup_title'>烹饪时间</view>
+      <view class='popup_item'>
+        <view class='popup_item_content'>1~2星</view>
+        <view class='popup_item_content'>1~2星</view>
+        <view class='popup_item_content'>1~2星</view>
+      </view>
+    </view>
+
+    <view class='popup_content'>
+      <view class='popup_title'>烹饪时间</view>
+      <view class='popup_item'>
+        <view class='popup_item_content'>微辣</view>
+        <view class='popup_item_content'>微辣</view>
+        <view class='popup_item_content'>微辣</view>
+        <view class='popup_item_content'>微辣</view>
+      </view>
+    </view>
+
+    <view class='popup_content'>
+      <view class='popup_title'>烹饪时间</view>
+      <view class='popup_item'>
+        <view class='popup_item_content'>
+          <text class='iconfont icon-xiaoyu'></text>500cal </view>
+        <view class='popup_item_content'> 500~2000cal </view>
+        <view class='popup_item_content'> >2000cal</view>
+      </view>
+    </view>
+
+    <view class='popup_content'>
+      <view class='popup_title'>烹饪时间</view>
+      <view class='popup_item'>
+        <view class='popup_item_content'>10分钟</view>
+        <view class='popup_item_content'>10分钟</view>
+        <view class='popup_item_content'>10分钟</view>
+      </view>
+    </view>
+
+    <view class='popup_content'>
+      <view class='popup_title'>饮食禁忌/过敏（多选）</view>
+      <view class='popup_item'>
+        <view class='popup_item_content'>鸡蛋</view>
+        <view class='popup_item_content'>乳制品</view>
+        <view class='popup_item_content'>海鲜</view>
+        <view class='popup_item_content'>鸡蛋</view>
+        <view class='popup_item_content'>乳制品</view>
+        <view class='popup_item_content'>海鲜</view>
+        <view class='popup_item_content'>鸡蛋</view>
+        <view class='popup_item_content'>乳制品</view>
+        <view class='popup_item_content'>后台自定义</view>
+      </view>
+    </view>
+
+    <view class='popup_hint'>菜系（↓往下轮播可筛选更多属性）</view>
+    <view class='popup_btn'>
+      <view class='btn1'>重置</view>
+      <view class='btn2'>完成</view>
+    </view>
+  </view>
+</view>

+page {
+  background-color: #fafafa;
+}
+
+.index_top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 28rpx;
+  color: #222;
+  padding: 15rpx 25rpx;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background-color: #fff;
+  border-radius: 16rpx;
+}
+
+.city_box {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-align: center;
+  /* width:80rpx; */
+}
+
+.index_add {
+  display: flex;
+  align-items: center;
+  margin-right: 20rpx;
+  width: 130rpx;
+}
+
+.index_input {
+  display: flex;
+  align-items: center;
+  border-radius: 16rpx;
+  flex: 2;
+  padding: 10rpx 22rpx;
+  background-color: #f5f5f5;
+}
+
+.index_input icon {
+  color: #222;
+}
+
+.holder {
+  color: #adadad;
+  font-size: 24rpx;
+}
+
+.icon-location {
+  color: #222;
+  font-size: 36rpx;
+  margin-right: 10rpx;
+}
+
+.icon-message {
+  font-size: 36rpx;
+  color: #222;
+  margin-left: 30rpx;
+}
+
+.nav_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 25rpx 0 0;
+  height: 85rpx;
+  position: fixed;
+  width: 100%;
+  top: 100rpx;
+  left: 0;
+  border-bottom: 1px solid #ededed;
+  z-index: 2;
+  background-color: #fff;
+}
+
+.swiper_nav_box {
+  height: 100%;
+  flex: 1;
+}
+
+.nav_box  .icon-fenlei {
+  font-size: 30rpx;
+  color: #888;
+}
+
+.nav_text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 10rpx;
+}
+
+.swiper_nav_box swiper-item {
+  color: #888;
+  font-size: 28rpx;
+  text-align: center;
+}
+
+.swiper_nav_box swiper-item text {
+  padding: 26rpx 0 23rpx 0;
+  height: 100%;
+  display: inline-block;
+}
+
+.nav_swiper_active {
+  color: #222;
+  border-bottom: 2px solid #ffda44;
+}
+
+.swiper_banner_box {
+  height: 350rpx;
+  margin-top: 220rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+.swiper_banner_box swiper-item{
+  width: 100%;
+
+}
+.swiper_banner_box  image {
+  box-shadow: 1rpx 8rpx 30rpx rgba(38, 84, 9, 0.3);
+  height: 320rpx; 
+  margin: 0 auto;
+  display: block;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.safe_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  font-size: 24rpx;
+  color: #222;
+  /* margin: 30rpx 0 0 0; */
+  background-color: #fff;
+  padding: 0 0 30rpx 0;
+}
+
+.safe_box .iconfont {
+  font-size: 28rpx;
+  margin: 0 10rpx 0 0;
+}
+
+/* .ad_mold{
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.4)
+} */
+
+.classfy {
+  /* padding: 20rpx 25rpx; */
+  background-color: #fff;
+  height: 200rpx;
+  overflow: hidden;
+  /* margin: 0 0 15rpx 0; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.good_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.classfy image {
+  width: 100%;
+  height: 100%;
+  margin: 20rpx 25rpx;
+  border-radius: 16rpx;
+}
+
+.index_title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 145rpx;
+  font-size: 38rpx;
+  color: #26363a;
+  font-weight: 600;
+  background-color: #fff;
+}
+
+.title_left {
+  display: inline-block;
+  flex: 1;
+  height: 1px;
+  background: -webkit-linear-gradient(left, #fff, gray, #000);
+  background: -o-linear-gradient(left, #fff, gray, #000);
+  background: -moz-linear-gradient(left, #fff, gray, #000);
+  background: linear-gradient(left, #fff, gray, #000);
+}
+
+.title_right {
+  display: inline-block;
+  flex: 1;
+  height: 1rpx;
+  background: -webkit-linear-gradient(left, #000, gray, #fff);
+  background: -o-linear-gradient(left, #000, gray, #fff);
+  background: -moz-linear-gradient(left, #000, gray, #fff);
+  background: linear-gradient(left, #000, gray, #fff);
+}
+
+.title_mid {
+  margin: 0 46rpx;
+}
+
+.safety_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 32rpx 0;
+  font-size: 24rpx;
+  text-align: center;
+  background-color: #fff;
+  margin: 0 0 24rpx 0;
+}
+
+.safety_box .safe_item {
+  color: #455255;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  text-align: center;
+}
+
+.safety_box image {
+  height: 90rpx;
+  width: 100%;
+}
+
+.clo {
+  flex-direction: column;
+}
+
+.new_person_box {
+  padding: 50rpx 0 0 0;
+  margin-bottom: 24rpx;
+  background-color: #fff;
+}
+
+.new_person_swiper {
+  height: 300rpx;
+  padding: 0 30rpx;
+}
+
+.scroll_box {
+  white-space: nowrap;
+  padding: 30rpx 20rpx;
+}
+
+.scroll_box {
+  margin-top: 30rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.scroll_box .new_person_item {
+  width: 289rpx;
+  height: 270rpx;
+  display: inline-block;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
+  border-radius: 16rpx;
+  margin-right: 30rpx;
+  margin-bottom: 20rpx;
+  padding: 0 11rpx;
+  text-align: center;
+}
+
+.goods_name {
+  font-size: 24rpx;
+  color: #222;
+}
+
+.new_person_item image {
+  width: 267rpx;
+  height: 170rpx;
+  border-radius: 16rpx;
+  /* position: absolute;
+  top: -50rpx; */
+  z-index: 10;
+}
+
+.pprice {
+  font-size: 28rpx;
+  color: #222;
+  margin: 0 10rpx 0 0;
+}
+
+.oprice {
+  font-size: 20rpx;
+  color: #888;
+  text-decoration: line-through;
+}
+
+.ad_box {
+  height: 100%;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.ad_box image {
+  width: 600rpx;
+}
+
+.ad_box .iconfont {
+  color: #fff;
+}
+
+.nav_type_right {
+}
+
+/* 筛选弹窗  */
+
+.masx_box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 5;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.popup_box {
+  width: 573rpx;
+  height: 100%;
+  background-color: #fff;
+  position: absolute;
+  right: 0;
+  overflow-y: scroll;
+  padding: 0 0 130rpx 0;
+}
+
+.popup_content {
+  padding: 0rpx 25rpx;
+}
+
+.popup_title {
+  font-size: 22rpx;
+  color: #222;
+  margin-top: 40rpx;
+}
+
+.popup_item {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.popup_item::after {
+  content: "";
+  position: relative;
+  width: 161rpx;
+}
+
+.popup_item_content {
+  width: 161rpx;
+  height: 65rpx;
+  font-size: 24rpx;
+  color: #222;
+  background-color: #f7f7f7;
+  border-radius: 10rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15rpx;
+}
+
+.popup_hint {
+  font-size: 22rpx;
+  color: #222;
+  margin-left: 25rpx;
+  margin-top: 49rpx;
+}
+
+.popup_btn {
+  display: flex;
+  font-size: 30rpx;
+  color: #222;
+  position: fixed;
+  bottom: 0;
+}
+
+.btn1, .btn2 {
+  width: 287rpx;
+  height: 100rpx;
+  background-color: #f7f7f7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn2 {
+  background-color: #ffda44;
+}

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

+{}

+<!--pages/index/production_steps/production_steps.wxml-->
+<view>
+  <view class='banner'>
+    <view class='iconfont icon-fanhui'></view>
+    <view class='coupons'>2/5</view>
+  </view>
+  <view class='banner_img'>
+    <image src='../../imgs/caipu.png'></image>
+  </view>
+  <view class='content_item'>
+    <view class='production_step'>步骤2</view>
+    <view class='content'>小米提前淘洗一遍，然后用清水泡2个小时左右。 
+    </view>
+    <view class='tips'>Tipip：稍候我们会把小米打成糊，所以要提前多泡一会儿，搅拌的时候才会细腻一些。</view>
+  </view>
+</view>

+/* pages/index/production_steps/production_steps.wxss */
+.banner_img{
+  width: 750rpx;
+  height: 750rpx;
+}
+.banner_img image{
+  width: 100%;
+  height: 100%;
+}
+.content_item{
+  padding: 0 25rpx;
+  font-size: 30rpx;
+  color: #333;
+}
+.production_step{
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+  margin-top: 51rpx;
+}
+.content{
+  margin-top: 30rpx;
+}
+.tips{
+  margin-top: 45rpx;
+}

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

+{}

+<!--pages/my/coupons/coupons.wxml-->
+
+<view class='banner'>
+  <view class='iconfont icon-fanhui'></view>
+  <view class='coupons'>消息</view>
+  <view class='clear_box'>
+    <view class='iconfont icon-shanchu'></view>
+    <view>全部清空</view>
+  </view>
+</view>
+
+<view class='tab'>
+  <view>活动消息</view>
+  <view>通知消息</view>
+</view>
+
+<view class='content_item'>
+  <view class='item_list'>
+    <view class='content_img'>
+      <image src='../../imgs/pic19.png'></image>
+    </view>
+    <view class='list_content'>
+      <view class='content_title'>春节焕新，万券齐发！</view>
+      <view class='time_box'>
+        <view class='time'>2018/03/09</view>
+        <view class='iconfont icon-diandian'></view>
+      </view>
+    </view>
+  </view>
+
+  <!-- <view class='item_list'>
+    <view class='content_img'>
+      <image src='../../imgs/pic19.png'></image>
+    </view>
+    <view class='list_content'>
+      <view class='content_title'>春节焕新，万券齐发！</view>
+      <view class='time_box'>
+        <view class='time'>2018/03/09</view>
+        <view class='iconfont icon-diandian'></view>
+      </view>
+    </view>
+  </view>
+
+  <view class='item_list'>
+    <view class='content_img'>
+      <image src='../../imgs/pic19.png'></image>
+    </view>
+    <view class='list_content'>
+      <view class='content_title'>春节焕新，万券齐发！</view>
+      <view class='time_box'>
+        <view class='time'>2018/03/09</view>
+        <view class='iconfont icon-diandian'></view>
+      </view>
+    </view>
+  </view> -->
+
+
+  <view class='item_list1'>
+    <view class='item_top'>
+      <view class='list_left'>
+        <view class='title'>订单已签收</view>
+        <view class='content'>香乐丝贝尔蒸蛋糕 608g 牛奶夹心零食散装整箱</view>
+      </view>
+      <view>
+        <view class='head_portrait'>
+          <image src='../../imgs/pic19.png'></image>
+        </view>
+      </view>
+    </view>
+    <view class='item_bottom'>
+      <view class='number'>运单编号：480486451242</view>
+      <view>18/03/09</view>
+    </view>
+  </view>
+
+
+  <view class='item_list1'>
+    <view class='item_top'>
+      <view class='list_left'>
+        <view class='title'>订单已签收</view>
+        <view class='content'>香乐丝贝尔蒸蛋糕 608g 牛奶夹心零食散装整箱</view>
+      </view>
+      <view>
+        <view class='head_portrait'>
+          <image src='../../imgs/pic19.png'></image>
+        </view>
+      </view>
+    </view>
+    <view class='item_bottom'>
+      <view class='number'>查看详情 ></view>
+      <view>18/03/09</view>
+    </view>
+  </view>
+
+
+
+</view>

+page {
+  background-color: #fafafa;
+}
+
+.banner {
+  height: 86rpx;
+  width: 100%;
+  overflow: hidden;
+  line-height: 80rpx;
+  background: #fff;
+  display: flex;
+  font-size: 34rpx;
+  color: #222;
+  border-bottom: 1rpx solid #ededed;
+  box-sizing: border-box;
+  padding: 0 26rpx;
+}
+
+.coupons {
+  font-weight: bold;
+  margin: 0 auto;
+}
+
+.clear_box {
+  font-size: 28rpx;
+  color: #222;
+  display: flex;
+}
+
+.icon-shanchu {
+  font-size: 25rpx;
+  color: #222;
+  margin-right: 8rpx;
+}
+
+.tab {
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  padding: 26rpx 85rpx;
+  font-size: 28rpx;
+  color: #222;
+  border-bottom: 1rpx solid #ededed;
+}
+
+.content_item {
+  padding: 0 25rpx;
+}
+
+.item_list {
+  border-radius: 16rpx;
+  box-shadow: 15rpx 10rpx 10rpx rgba(0, 0, 0, 0.05);
+  margin-top: 30rpx;
+}
+
+.content_img {
+  width: 700rpx;
+  height: 250rpx;
+}
+
+.content_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.list_content {
+  padding: 25rpx 21rpx;
+}
+
+.content_title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.time_box {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 17rpx;
+}
+
+.time {
+  font-size: 24rpx;
+  color: #888;
+}
+
+.icon-diandian {
+  font-size: 32rpx;
+  color: #949a9a;
+}
+
+/* 通知消息 */
+
+.item_list1 {
+  border-radius: 16rpx;
+  box-shadow: 15rpx 10rpx 10rpx rgba(0, 0, 0, 0.05);
+  margin-top: 30rpx;
+  padding: 30rpx;
+}
+
+.list_left {
+  width: 416rpx;
+}
+
+.title {
+  font-size: 30rpx;
+  color: #222;
+}
+
+.content {
+  font-size: 26rpx;
+  color: #333;
+  margin-top: 22rpx;
+}
+
+.item_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.item_bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 22rpx;
+  color: #888;
+  margin-top: 24rpx;
+}
+
+.head_portrait {
+  width: 105rpx;
+  height: 105rpx;
+}
+
+.head_portrait image {
+  width: 100%;
+  height: 100%;
+  border-radius: 50rpx;
+}

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

+{}

+<!--pages/my/balance _center/balance _center.wxml-->
+<view class='banner_box'>
+  <view class='banner_top'>
+    <view class='iconfont icon-fanhui'></view>
+    <view class='hello'>你好，Rico
+    </view>
+    <view class='charge_code'>兑换码充值</view>
+  </view>
+  <view class='banner_middle'>
+    <view class='banner_img'>
+      <image src='http://hifresh.w.bronet.cn/assets/wxapp/coin@2x.png' mode='widthFix'></image>
+    </view>
+    <view class='my_balance'>
+      <view class='balance'>我的余额</view>
+      <view class='balance_num'>280.00元</view>
+    </view>
+  </view>
+  <view class='banner_bottom'>
+    <view class='bottom_btn'>
+      <view class='iconfont icon-chuxuyouli'></view>
+      <view class='btn_character'>储值有礼</view>
+    </view>
+    <view class='bottom_btn1'>
+      <view class='iconfont icon-zhangdanmingxi'></view>
+      <view class='btn_character'>账单明细</view>
+    </view>
+  </view>
+</view>
+<view class='content_item'>
+  <view class='item_list'>
+    <view class='list_information'>
+      <view>充值</view>
+      <view>+60.2</view>
+    </view>
+    <view class='time'>2018/3/13 12:23:16</view>
+  </view>
+  <view class='item_list'>
+    <view class='list_information'>
+      <view>退款</view>
+      <view>+28.6</view>
+    </view>
+    <view class='time'>2018/3/13 12:23:16</view>
+  </view>
+   <view class='item_list'>
+    <view class='list_information'>
+      <view>消费</view>
+      <view>-60.6</view>
+    </view>
+    <view class='time'>2018/3/13 12:23:16</view>
+  </view>
+  <view class='item_list bottom'>
+    <view class='list_information'>
+      <view>会员卡返现</view>
+      <view>+10.0</view>
+    </view>
+    <view class='time'>2018/3/13 12:23:16</view>
+  </view>
+</view>

+/* pages/my/balance _center/balance _center.wxss */
+
+.banner_box {
+  padding: 28rpx 25rpx 0 25rpx;
+}
+
+.banner_box {
+  background-color: #ffda44;
+}
+
+.banner_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hello {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.charge_code {
+  font-size: 28rpx;
+}
+
+.banner_middle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 35rpx;
+}
+
+.banner_img {
+  width: 238rpx;
+  height: 210rpx;
+}
+
+.banner_img image {
+  width: 100%;
+}
+
+.my_balance {
+  margin-left: 56rpx;
+}
+
+.balance {
+  font-size: 30rpx;
+  color: #333;
+}
+
+.balance_num {
+  font-size: 76rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.banner_bottom {
+  display: flex;
+  margin-top: 32rpx;
+}
+
+.bottom_btn,.bottom_btn1  {
+  color: #949a9a;
+  width: 100%;
+  font-size: 30rpx;
+  padding: 32rpx 92rpx;
+  display: flex;
+  align-items: center;
+  background-color: #f4f6f4;
+  border-radius: 16rpx 0rpx 0rpx 0rpx;
+}
+
+.bottom_btn1 {
+  color: red;
+  background-color: #fff;
+  border-radius: 0rpx 16rpx 0rpx 0rpx;
+}
+.btn_character{
+  margin-left: 15rpx;
+}
+
+.content_item {
+  padding: 20rpx 65rpx;
+}
+
+.item_list {
+  padding: 50rpx 0;
+  border-bottom: 1rpx solid #f2f2f2;
+}
+.bottom{
+  border: 0;
+}
+
+.list_information {
+  font-size: 30rpx;
+  color: #27363b;
+  display: flex;
+  justify-content: space-between;
+}
+
+.time {
+  font-size: 22rpx;
+  color: #949a9a;
+}

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

+{}

+<!--pages/my/balance _center/balance _center.wxml-->
+<view class='banner_box'>
+  <view class='banner_top'>
+    <view class='iconfont icon-fanhui'></view>
+    <view class='hello'>你好，Rico
+    </view>
+    <view class='charge_code'>兑换码充值</view>
+  </view>
+  <view class='banner_middle'>
+    <view class='banner_img'>
+      <image src='http://hifresh.w.bronet.cn/assets/wxapp/coin@2x.png' mode='widthFix'></image>
+    </view>
+    <view class='my_balance'>
+      <view class='balance'>我的余额</view>
+      <view class='balance_num'>280.00元</view>
+    </view>
+  </view>
+  <view class='banner_bottom'>
+    <view class='bottom_btn'>
+      <view class='iconfont icon-chuxuyouli'></view>
+      <view class='btn_character'>储值有礼</view>
+    </view>
+    <view class='bottom_btn1'>
+      <view class='iconfont icon-zhangdanmingxi'></view>
+      <view class='btn_character'>账单明细</view>
+    </view>
+  </view>
+</view>
+<view class='content_item'>
+  <view class='content_title'>
+    <view class='recharge_amount'>充值金额</view>
+    <view class='amount_hint'>(储值金额暂不支持提现功能)</view>
+  </view>
+  <view class='species_box'>
+    <view class='species1' wx:for="{{[1,2,3,4]}}">
+      <view>100
+        <text>元</text> </view>
+      <view class='species_content'>送20元红包+1月会员</view>
+    </view>
+  </view>
+</view>
+<view class='bottom_btn2'>使用微信充值</view>
+<view class='hint'>点击立即充值，表示您已经同意<text class='hint_font'>《充送活动协议》</text> </view>

+/* pages/my/balance _center/balance _center.wxss */
+
+.banner_box {
+  padding: 28rpx 25rpx 0 25rpx;
+}
+
+.banner_box {
+  background-color: #ffda44;
+}
+
+.banner_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hello {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.charge_code {
+  font-size: 28rpx;
+}
+
+.banner_middle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 35rpx;
+}
+
+.banner_img {
+  width: 238rpx;
+  height: 210rpx;
+}
+
+.banner_img image {
+  width: 100%;
+}
+
+.my_balance {
+  margin-left: 56rpx;
+}
+
+.balance {
+  font-size: 30rpx;
+  color: #333;
+}
+
+.balance_num {
+  font-size: 76rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.banner_bottom {
+  display: flex;
+  margin-top: 32rpx;
+}
+
+.bottom_btn, .bottom_btn1 {
+  color: #949a9a;
+  width: 100%;
+  font-size: 30rpx;
+  padding: 32rpx 0;
+  text-align: center;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  background-color: #f4f6f4;
+  border-radius: 16rpx 0rpx 0rpx 0rpx;
+  flex: 1
+}
+
+.bottom_btn1 {
+  background-color: #fff;
+  border-radius: 0rpx 16rpx 0rpx 0rpx;
+}
+
+.btn_character {
+  margin-left: 15rpx;
+}
+
+.content_item {
+  padding: 0 55rpx;
+  box-sizing: border-box;
+}
+
+.content_title {
+  display: flex;
+  padding: 42rpx 0; 
+  box-sizing: border-box;
+}
+
+.recharge_amount {
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.amount_hint{
+  font-size:22rpx;
+  color: #888; 
+}
+.species_box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.species1 {
+  padding: 47rpx 33rpx 24rpx 33rpx;
+  border: 2rpx solid #ffda44;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+}
+
+.species_content {
+  font-size: 25rpx;
+  color: #333;
+  margin-top: 33rpx;
+}
+
+.bottom_btn2 {
+  width: 90%;
+  height: 80rpx;
+  background-color: #ffda44;
+  border-radius: 40rpx;
+  box-shadow: 10rpx 10rpx 30rpx rgba(255, 204, 68, 0.6);
+  font-size: 26rpx;
+  color: #333;
+  text-align: center;
+  line-height: 80rpx;
+  margin: 100rpx auto 0 auto;
+}
+
+.hint {
+  font-size: 22rpx;
+  color: #222;
+  text-align: center;
+  margin-top: 44rpx;
+  margin-bottom: 58rpx;
+}
+
+.hint_font {
+  color: #f44;
+}

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

+{}

+<!--pages/my/big/big.wxml-->
+<view class='content_item'>
+  <view class='banner_img'>
+    <image src='../../imgs/pic6.png'></image>
+  </view>
+  <view class='item_list'>
+    <view class='content_img'>
+      <image src='../../imgs/caipu.png'></image>
+      <view class='label'>促销标签</view>
+    </view>
+    <view class='content_character'>
+      <view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
+      <view class='introduce'>量大好吃无限回购</view>
+      <view class='banner_character'>
+        <view class='banner_price'>
+          <view class='money_box'>
+            <text class='money_icon'>￥</text>
+            <text class='money'>26.0</text>
+            <text class='original_price'>￥52.0</text>
+          </view>
+          <view class='display_box'>
+            <text class='money_icon2'>￥</text>
+            <text class='money2'>20.0</text>
+            <text class='vip'>会员专享</text>
+          </view>
+        </view>
+        <view class='shop_car'>
+          <view class='iconfont icon-gouwuche'></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+
+
+<view class='content_item'>
+  <view class='banner_img'>
+    <image src='../../imgs/pic6.png'></image>
+  </view>
+  <view class='item_list'>
+    <view class='content_img'>
+      <image src='../../imgs/caipu.png'></image>
+       <view class='label2'>距离团购结束  21时49分</view>
+    </view>
+    <view class='content_character'>
+      <view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
+      <view class='introduce'>
+        <view class='progress_bar_box'>
+          <view class='progress_bar'>
+            <view class='bar'></view>
+          </view>
+          <view>38%</view>
+        </view>
+        <view class='object_hint'>
+          <text>已拼320份</text><text class='object'>目标500份</text>
+        </view>
+      </view>
+      <view class='banner_character'>
+        <view class='banner_price'>
+          <view class='display_box'>
+            <text class='money_icon2'>￥</text>
+            <text class='money2'>20.0</text>
+            <text class='original_price'>￥52.0</text>
+          </view>
+        </view>
+        <view class='shop_car'>
+          <view class='iconfont icon-gouwuche'></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

+/* pages/my/big/big.wxss */
+
+page {
+  background-color: #ededed;
+}
+
+.content_item {
+  background-color: #fff;
+  padding: 25rpx 25rpx;
+  margin-top: 25rpx;
+}
+
+.banner_img {
+  height: 180rpx;
+  /* padding: 25rpx 25rpx 0 25rpx; */
+}
+
+.banner_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.content_img {
+  height: 630rpx;
+  position: relative;
+}
+
+.content_img image {
+  width: 100%;
+  height: 100%;
+}
+
+.label {
+  width: 140rpx;
+  height: 140rpx;
+  font-size: 40rpx;
+  color: #333;
+  padding: 28rpx 31rpx;
+  background-color: #ffda44;
+  position: absolute;
+  top: 0;
+  left: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.label2 {
+  width: 100%;
+  height: 45rpx;
+  font-size: 30rpx;
+  color: #333;
+  background: linear-gradient(to right, #ffda44, rgba(0, 0, 0, 0));
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding-left: 20rpx;
+}
+
+.progress_bar_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.progress_bar {
+  width: 87%;
+  height: 14rpx;
+  border-radius: 6rpx;
+  background-color: #e7e7e7;
+  position: relative;
+}
+
+.bar {
+  width: 50%;
+  height: 14rpx;
+  border-radius: 6rpx;
+  background-color: #ffd15d;
+  position: absolute;
+}
+
+.object_hint {
+  font-size: 24rpx;
+  color: #94999a;
+}
+
+.object {
+  margin-left: 30rpx;
+}
+
+.item_list {
+  border-radius: 16rpx;
+  overflow: hidden;
+  margin-top: 40rpx;
+  /* margin-bottom: 20rpx; */
+}
+
+.content_character {
+  background-color: #fafafa;
+  padding: 25rpx 21rpx;
+}
+
+.banner_title {
+  font-size: 34rpx;
+  color: #222;
+}
+
+.introduce {
+  font-size: 28rpx;
+  color: #888;
+}
+
+.banner_character {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 24rpx;
+  color: #888;
+}
+
+.banner_price {
+  display: flex;
+  /* align-items: center; */
+}
+
+.money_box {
+  margin-right: 40rpx;
+}
+
+.money_icon {
+  font-size: 22rpx;
+  color: #222;
+}
+
+.money {
+  font-size: 38rpx;
+  font-weight: bold;
+  color: #222;
+}
+
+.original_price {
+  color: #888;
+  text-decoration: line-through;
+}
+
+.money_icon2 {
+  font-size: 22rpx;
+  color: #f44;
+}
+
+.money2 {
+  font-size: 38rpx;
+  font-weight: bold;
+  color: #f44;
+}
+
+.vip {
+  color: #fff;
+  background-color: #f44;
+  margin-left: 5rpx;
+}
+
+.shop_car {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50rpx;
+  background-color: #ffda44;
+  box-shadow: 5rpx 0rpx 5rpx rgba(255, 218, 68, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-gouwuche {
+  font-size: 29rpx;
+  color: #333;
+}

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

+{}

+<!--pages/my/charger_code/charger_code.wxml-->
+<view class='container'>
+  <view class='banner'>
+    <view class='iconfont icon-fanhui'></view>
+    <view class='title'>兑换码充值</view>
+  </view>
+  <view class='charge_code'>
+    <view class='input_box'>
+      <input type='text' placeholder='请输入兑换码' placeholder-class='input_font'></input>
+    </view>
+    <view class='iconfont icon-saoma'></view>
+  </view>
+  <view class='bottom_btn'>确认兑换</view>
+  <view class='hint'>*每个兑换码仅可以使用一次</view>
+</view>