1

app.js

@@ -15,12 +15,14 @@ App({
     wx.getSystemInfo({
       success: (res) => {
         this.globalData.height = res.statusBarHeight
+        this.globalData.windowHeight = res.windowHeight
       }
     })
   },
   globalData: {
     userInfo: null,
-    height: 0
+    height: 0,
+    windowHeight: 0
   }
 })
 

app.json

@@ -1,9 +1,10 @@
 {
   "pages": [
+    "pages/news/index",
+    "pages/news/detail",
     "pages/reserve/index",
     "pages/home/index",
     "pages/login/index",
-    "pages/news/index",
     "pages/my/index"
   ],
   "usingComponents": {

commpents/newsList/detail.js

@@ -0,0 +1,23 @@
+// commpents/newsList/detail.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    detail: { type: Object }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

commpents/newsList/detail.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

commpents/newsList/detail.wxml

@@ -0,0 +1,11 @@
+<view class="main">
+  <view class="title">
+    {{detail.title}}
+  </view>
+  <view class="date">
+    发布时间:{{detail.create_time}}
+  </view>
+  <view class="content">
+    {{detail.content}}
+  </view>
+</view>

commpents/newsList/detail.wxss

@@ -0,0 +1,16 @@
+.main .title {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 0 8px 0;
+}
+
+.main .date {
+  font-size: 14px;
+  margin: 0 0 8px 0;
+  color: #666;
+}
+
+.main .title .content {
+  font-size: 14px;
+  color: #666;
+}

commpents/newsList/index.js

@@ -0,0 +1,25 @@
+// commpents/newsList/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    list: { type: Array }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    detail: function (e) {
+      this.triggerEvent('detail', { id: e.currentTarget.dataset.id })
+    }
+  }
+})

pages/index/index.json

@@ -1,3 +1,4 @@
 {
+  "component": true,
   "usingComponents": {}
 }

commpents/newsList/index.wxml

@@ -0,0 +1,18 @@
+<view class="main">
+  <view class="list" wx:key="item" wx:for="{{list}}" bindtap="detail" data-id="{{item.id}}">
+    <view class="left">
+      <view class="title">
+        {{item.title}}
+      </view>
+      <view class="brief">
+        {{item.brief}}
+      </view>
+      <view class="date">
+        {{item.create_time}}
+      </view>
+    </view>
+    <view class="right">
+      <image src="{{item.url}}"></image>
+    </view>
+  </view>
+</view>

commpents/newsList/index.wxss

@@ -0,0 +1,52 @@
+.main {
+  margin: 8px 0 0 0;
+}
+
+.main .list {
+  float: left;
+  width: 95%;
+  background-color: #ffffff;
+  margin: 0 0 8px 0;
+  padding: 8px;
+}
+
+.main .list .left {
+  float: left;
+  width: 70%;
+}
+
+.main .list .left .title {
+  font-size: 14px;
+  color: #000;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.main .list .left .brief {
+  font-size: 12px;
+  color: #666666;
+  margin: 0 0 5px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.main .list .left .date {
+  font-size: 12px;
+  color: #666666;
+}
+
+.main .list .right {
+  float: left;
+  width: 30%;
+}
+
+.main .list .right image {
+  width: 100%;
+  height: 66px;
+  overflow: hidden;
+  border-radius: 5px;
+}

pages/logs/logs.json

@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "查看启动日志",
-  "usingComponents": {}
-}

pages/news/detail.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "nav-bar": "/commpents/navbar/index",
+    "news-detail": "/commpents/newsList/detail"
+  }
+}

pages/news/detail.wxml

@@ -0,0 +1,6 @@
+<nav-bar navbar-data='{{navbarData}}'></nav-bar>
+<view class="main" style="padding-top:{{height}}px;height:{{windowHeight-height}}px">
+  <view class="one" style="height:{{windowHeight-height}}px">
+    <news-detail detail="{{detailInfo}}"></news-detail>
+  </view>
+</view>

pages/news/detail.wxss

@@ -0,0 +1,6 @@
+.main .one {
+  float: left;
+  width: 95%;
+  padding: 8px;
+  overflow-y: auto;
+}

pages/news/index.js

@@ -7,11 +7,65 @@ Page({
    */
   data: {
     height: app.globalData.height * 2 + 25,
+    windowHeight: app.globalData.windowHeight,
     navbarData: {
       name: '新闻'
+    },
+    currentTab: 0,
+    // 國内新聞
+    list: [
+      {
+        id: '1',
+        title: '國内信息',
+        brief: '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        create_time: '2021-01-01',
+        url: '/image/home/image1.jpg'
+      },
+      {
+        id: '2',
+        title: '國内信息',
+        brief: '信息简介',
+        create_time: '2021-01-01',
+        url: '/image/home/image1.jpg'
+      },
+    ],
+    lists: [
+      {
+        id: '1',
+        title: '健康资讯',
+        brief: '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
+        create_time: '2021-01-01',
+        url: '/image/home/image1.jpg'
+      },
+      {
+        id: '2',
+        title: '健康资讯',
+        brief: '信息简介',
+        create_time: '2021-01-01',
+        url: '/image/home/image1.jpg'
+      },
+    ]
+  },
+  // 禁止左右滑动
+  stopTab: function (e) {
+    return false
+  },
+  //点击切换
+  clickTab: function (e) {
+    var that = this;
+    if (this.data.currentTab === e.target.dataset.current) {
+      return false;
+    } else {
+      that.setData({
+        currentTab: e.target.dataset.current
+      })
     }
   },
-
+  detail: function (data) {
+    wx.navigateTo({
+      url: `/pages/news/detail?id=${data.detail.id}`
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/news/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "nav-bar": "/commpents/navbar/index"
+    "nav-bar": "/commpents/navbar/index",
+    "news-list": "/commpents/newsList/index"
   }
 }

pages/news/index.wxml

@@ -1,4 +1,21 @@
 <nav-bar navbar-data='{{navbarData}}'></nav-bar>
-<view class="main" style="padding-top:{{height}}px">
-  内容
+<view class="main" style="padding-top:{{height}}px;height:{{windowHeight-height}}px">
+  <el-col class="one" style="height:{{windowHeight-height}}px">
+    <view class="swiper-tab">
+      <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">国内新闻</view>
+      <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">健康资讯</view>
+    </view>
+    <swiper current="{{currentTab}}" style="height:{{windowHeight-height-40}}px">
+      <swiper-item catchtouchmove="stopTab">
+        <view class="one_1" style="height:{{windowHeight-height-40}}px">
+          <news-list list="{{list}}" bind:detail="detail"></news-list>
+        </view>
+      </swiper-item>
+      <swiper-item catchtouchmove="stopTab">
+        <view class="one_1" style="height:{{windowHeight-height-40}}px">
+          <news-list list="{{lists}}" bind:detail="detail"></news-list>
+        </view>
+      </swiper-item>
+    </swiper>
+  </el-col>
 </view>

pages/news/index.wxss

@@ -1 +1,33 @@
-/* pages/news/index.wxss */
+.main .one {
+  float: left;
+  width: 100%;
+  overflow: hidden;
+}
+
+.main .one .one_1 {
+  float: left;
+  width: 100%;
+  overflow-y: auto;
+  background-color: #f1f1f1;
+}
+
+.main .one .swiper-tab {
+  width: 100%;
+  border-bottom: 1rpx solid #f1f1f1;
+  text-align: center;
+  height: 39px;
+  line-height: 39px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}
+
+.main .one .swiper-tab-item {
+  width: 50%;
+  color: #434343;
+}
+
+.main .one .active {
+  color: #409eff;
+  border-bottom: 2rpx solid #409eff;
+}

pages/reserve/index.js

@@ -1,5 +1,5 @@
 // pages/reserve/index.js
-import moment from '../../utils/moment.min';
+import moment, { parseTwoDigitYear } from '../../utils/moment.min';
 moment.locale('en', {
   longDateFormat: {
     l: "YYYY-MM-DD",
@@ -14,25 +14,183 @@ Page({
    */
   data: {
     height: app.globalData.height * 2 + 25,
+    windowHeight: app.globalData.windowHeight,
     navbarData: {
       name: '报餐'
     },
     restaurant: '当前餐厅',
     today: '',
     // 点餐
-    active: 0
-
+    currentTab: 0,
+    // 早餐，午餐，晚餐
+    infoTab: 0,
+    // 餐列表
+    breakfastList: [],
+    lunchList: [],
+    dinnerList: [],
+    // 餐数量
+    oneStepper: 0,
+    twoStepper: 0,
+    thrStepper: 0,
+    // 选餐表单
+    form: {
+      breakfast: { reserve: 0, list: [], },
+      lunch: { reserve: 0, list: [], },
+      dinner: { reserve: 0, list: [], },
+    },
   },
   // 选择日期
   bindDateChange: function (e) {
     console.log('picker发送选择改变，携带值为', e.detail.value)
     this.setData({ today: e.detail.value })
   },
+  // 禁止左右滑动
+  stopTab: function (e) {
+    return false
+  },
+  //点击切换
+  clickTab: function (e) {
+    var that = this;
+    if (this.data.currentTab === e.target.dataset.current) {
+      return false;
+    } else {
+      that.setData({
+        currentTab: e.target.dataset.current
+      })
+    }
+  },
+  // 点击选择餐食
+  infoClickTab: function (e) {
+    var that = this;
+    let data = e.target.dataset.current;
+    if (this.data.infoTab === data) return false;
+    else that.setData({ infoTab: data });
+
+  },
+  // 选择餐数量
+  // 早餐,午餐，晚餐
+  oneChange: function (e) {
+    if (this.data.infoTab == 0) this.setData({ oneStepper: e.detail })
+    else if (this.data.infoTab == 1) this.setData({ twoStepper: e.detail })
+    else if (this.data.infoTab == 2) this.setData({ thrStepper: e.detail })
+  },
+  // 增加
+  onePlus: function (e) {
+    console.log('增加');
+    let data = e.target.dataset.data;
+    let type = this.data.infoTab;
+    if (type == 0) {//早餐
+      var meal = this.data.form.breakfast;
+      // 计算卡路里
+      let reserve = meal.reserve + data.reserve;
+      this.setData({ 'form.breakfast.reserve': reserve })
+    } else if (type == 1) {//午餐
+      var meal = this.data.form.lunch;
+      // 计算卡路里
+      let reserve = meal.reserve + data.reserve;
+      this.setData({ 'form.lunch.reserve': reserve })
+    } else if (type == 2) {//晚餐
+      var meal = this.data.form.dinner;
+      // 计算卡路里
+      let reserve = meal.reserve + data.reserve;
+      this.setData({ 'form.dinner.reserve': reserve })
+    }
+    // 查询下标
+    let res = meal.list.findIndex(i => i.id === data.id);
+    // 查询数据
+    let arr = meal.list.find(i => i.id === data.id);
+    if (arr) {//已有值
+      let qwe = { id: arr.id, title: arr.title, num: arr.num + 1 }
+      meal.list.splice(res, 1, qwe)
+    } else {//没有值
+      let arr = { id: data.id, title: data.title, num: 1 }
+      meal.list.push(arr)
+    }
+  },
+  // 减少
+  oneMinus: function (e) {
+    console.log('减少');
+    let data = e.target.dataset.data;
+    let type = this.data.infoTab;
+    if (type == 0) {//早餐
+      var meal = this.data.form.breakfast;
+      // 计算减少卡路里
+      let reserve = meal.reserve - data.reserve;
+      this.setData({ 'form.breakfast.reserve': reserve })
+    } else if (type == 1) {//午餐
+      var meal = this.data.form.lunch;
+      // 计算减少卡路里
+      let reserve = meal.reserve - data.reserve;
+      this.setData({ 'form.lunch.reserve': reserve })
+    } else if (type == 2) {//晚餐
+      var meal = this.data.form.dinner;
+      // 计算减少卡路里
+      let reserve = meal.reserve - data.reserve;
+      this.setData({ 'form.dinner.reserve': reserve })
+    }
+    // 查询下标
+    let res = meal.list.findIndex(i => i.id === data.id);
+    // 查询数据
+    let arr = meal.list.find(i => i.id === data.id);
+    if (arr) {
+      let qwe = { id: arr.id, title: arr.title, num: arr.num - 1 }
+      meal.list.splice(res, 1, qwe)
+    }
+  },
+  // 提交
+  onSubmit: function () {
+    console.log(this.data.form);
+    wx.showToast({
+      title: '完成点餐',
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    this.searchDate()
+    this.searchDate();
+    let one = [{
+      id: '1',
+      url: '/image/home/image2.jpg',
+      title: '早餐1',
+      num: '1000',
+      reserve: 15
+    }, {
+      id: '2',
+      url: '/image/home/image2.jpg',
+      title: '早餐2',
+      num: '1000',
+      reserve: 15
+    },]
+    if (one) this.setData({ breakfastList: one })
+    let two = [{
+      id: '3',
+      url: '/image/home/image2.jpg',
+      title: '午餐1',
+      num: '1000',
+      reserve: 15
+    }, {
+      id: '4',
+      url: '/image/home/image2.jpg',
+      title: '午餐2',
+      num: '1000',
+      reserve: 15
+    },]
+    if (two) this.setData({ lunchList: two })
+    let thr = [{
+      id: '5',
+      url: '/image/home/image2.jpg',
+      title: '晚餐1',
+      num: '1000',
+      reserve: 15
+    }, {
+      id: '6',
+      url: '/image/home/image2.jpg',
+      title: '晚餐2',
+      num: '1000',
+      reserve: 15
+    },]
+    if (thr) this.setData({ dinnerList: thr })
   },
   // 查询时间
   searchDate: function () {

pages/reserve/index.wxml

@@ -1,5 +1,5 @@
 <nav-bar navbar-data='{{navbarData}}'></nav-bar>
-<view class="main" style="padding-top:{{height}}px;padding-bottom: 48px;">
+<view class="main" style="padding-top:{{height}}px;height:{{windowHeight-height}}px">
   <view class="one">
     <view class="one_1">您的绑定餐厅为:{{restaurant}}</view>
     <view class="one_2">
@@ -12,11 +12,106 @@
     </view>
   </view>
   <view class="two">
-    <van-tabs active="{{ active }}" color="#409eff">
-      <van-tab title="点餐">
-
-      </van-tab>
-      <van-tab title="评价">评价</van-tab>
-    </van-tabs>
+    <view class="swiper-tab">
+      <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">点餐</view>
+      <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">评价</view>
+    </view>
+    <swiper current="{{currentTab}}" style="height:{{windowHeight-height-138}}px">
+      <swiper-item catchtouchmove="stopTab">
+        <view class="two_1" style="height:{{windowHeight-height-138}}px">
+          <view class="info" style="height:{{windowHeight-height-188}}px">
+            <view class="info_left" style="height:{{windowHeight-height-188}}px">
+              <view class="infoTab {{infoTab==0?'infoActive':''}}" data-current="0" bindtap="infoClickTab">早餐</view>
+              <view class="infoTab {{infoTab==1?'infoActive':''}}" data-current="1" bindtap="infoClickTab">午餐</view>
+              <view class="infoTab {{infoTab==2?'infoActive':''}}" data-current="2" bindtap="infoClickTab">晚餐</view>
+            </view>
+            <view class="info_right">
+              <swiper current="{{infoTab}}" style="height:{{windowHeight-height-188}}px">
+                <swiper-item catchtouchmove="stopTab">
+                  <view class="info_right1" style="height:{{windowHeight-height-188}}px">
+                    <view class="list" wx:key="item" wx:for="{{breakfastList}}">
+                      <view class="image">
+                        <image src='{{item.url}}'></image>
+                      </view>
+                      <view class="other">
+                        <view class="other_1">{{item.title}}</view>
+                        <view class="other_2">
+                          <view class="other_2num">已售:<text>{{item.num}}</text></view>
+                          <view class="other_2btn">
+                            <van-stepper value="{{ item.oneStepper }}" min="0" bind:plus="onePlus" bind:minus="oneMinus"
+                              disable-input="true" bind:change="oneChange" data-data="{{item}}" input-width="28px"
+                              button-size="20px" />
+                          </view>
+                        </view>
+                        <view class="other_3">热量:{{item.reserve}}卡</view>
+                      </view>
+                      <view>
+                      </view>
+                    </view>
+                  </view>
+                </swiper-item>
+                <swiper-item catchtouchmove="stopTab">
+                  <view class="info_right1" style="height:{{windowHeight-height-188}}px">
+                    <view class="list" wx:key="item" wx:for="{{lunchList}}">
+                      <view class="image">
+                        <image src='{{item.url}}'></image>
+                      </view>
+                      <view class="other">
+                        <view class="other_1">{{item.title}}</view>
+                        <view class="other_2">
+                          <view class="other_2num">已售:<text>{{item.num}}</text></view>
+                          <view class="other_2btn">
+                            <van-stepper value="{{ item.twoStepper }}" min="0" bind:plus="onePlus" bind:minus="oneMinus"
+                              disable-input="true" bind:change="oneChange" data-data="{{item}}" input-width="28px"
+                              button-size="20px" />
+                          </view>
+                        </view>
+                        <view class="other_3">热量:{{item.reserve}}卡</view>
+                      </view>
+                      <view>
+                      </view>
+                    </view>
+                  </view>
+                </swiper-item>
+                <swiper-item catchtouchmove="stopTab">
+                  <view class="info_right1" style="height:{{windowHeight-height-188}}px">
+                    <view class="list" wx:key="item" wx:for="{{dinnerList}}">
+                      <view class="image">
+                        <image src='{{item.url}}'></image>
+                      </view>
+                      <view class="other">
+                        <view class="other_1">{{item.title}}</view>
+                        <view class="other_2">
+                          <view class="other_2num">已售:<text>{{item.num}}</text></view>
+                          <view class="other_2btn">
+                            <van-stepper value="{{ item.thrStepper }}" min="0" bind:plus="onePlus" bind:minus="oneMinus"
+                              disable-input="true" bind:change="oneChange" data-data="{{item}}" input-width="28px"
+                              button-size="20px" />
+                          </view>
+                        </view>
+                        <view class="other_3">热量:{{item.reserve}}卡</view>
+                      </view>
+                      <view>
+                      </view>
+                    </view>
+                  </view>
+                </swiper-item>
+              </swiper>
+            </view>
+          </view>
+          <view class="btn">
+            <view class="btn_1">
+              卡路里:{{form.breakfast.reserve+form.lunch.reserve+form.dinner.reserve}}
+            </view>
+            <view class="btn_2">
+              <button type="primary" bindtap="onSubmit">完成</button>
+            </view>
+          </view>
+        </view>
+      </swiper-item>
+      <swiper-item catchtouchmove="stopTab">
+        <view>评价</view>
+      </swiper-item>
+    </swiper>
   </view>
 </view>

pages/reserve/index.wxss

@@ -1,43 +1,191 @@
-.main {
-  float: left;
-  width: 100%;
-}
-
 .main .one {
+  float: left;
+  width: 95%;
+  height: 50px;
+  overflow: hidden;
   padding: 0 20rpx;
 }
 
 .main .one .one_1 {
+  float: left;
+  width: 100%;
   font-size: 28rpx;
   font-weight: bold;
-  margin: 10rpx 0;
+  padding: 5px 0;
 }
 
 .main .one .one_2 {
   float: left;
   width: 100%;
-  font-size: 22rpx;
-  color: #666;
-  margin: 0 0 10rpx 0;
 }
 
 .main .one .one_2 view {
   float: left;
   width: 50%;
+  font-size: 22rpx;
+  color: #666;
 }
 
-.main .one .one_2 view:nth-child(2) {
+.main .one .one_2 view:nth-child(2) view {
+  width: 100%;
   text-align: right;
+  color: #000000;
+  font-weight: bold;
+}
+
+.main .two {
+  float: left;
+  width: 100%;
+}
+
+.main .two .two_1 {
+  width: 100%;
+}
+
+.main .two .two_1 .info {
+  float: left;
+  width: 100%;
+}
+
+.main .two .two_1 .info .info_left {
+  float: left;
+  width: 20%;
+  background-color: #f0f0f0;
+}
+
+.main .two .two_1 .info .info_left .infoTab {
+  text-align: center;
+  padding: 10px 0px;
+  border-bottom: 1px dashed #ccc;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.main .two .two_1 .info .info_left .infoActive {
+  color: #409eff;
+}
+
+.main .two .two_1 .info .info_right {
+  float: left;
+  width: 80%;
+}
+
+.main .two .two_1 .info .info_right .info_right1 {
+  float: left;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list {
+  float: left;
+  width: 93%;
+  padding: 8px;
+  border-bottom: 1px solid #f1f1f1;
+
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list .image {
+  float: left;
+  width: 30%;
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list .image image {
+  width: 100%;
+  height: 66px;
+  border-radius: 10px;
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list .other {
+  float: left;
+  width: 68%;
+  padding: 0 0 0 5px;
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list .other .other_1 {
+  float: left;
+  width: 100%;
+  font-size: 15px;
   font-weight: bold;
   color: #000000;
 }
 
-.main .one .one_2 view:nth-child(2) view {
+.main .two .two_1 .info .info_right .info_right1 .list .other .other_2 {
   float: left;
   width: 100%;
 }
 
-.main .two {
+.main .two .two_1 .info .info_right .info_right1 .list .other .other_2 .other_2num {
+  float: left;
+  width: 45%;
+  font-size: 12px;
+  padding: 5px 0;
+  color: #666;
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list .other .other_2 .other_2num text {
+  color: #ff0000;
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list .other .other_2 .other_2btn {
+  float: left;
+  width: 55%;
+}
+
+.main .two .two_1 .info .info_right .info_right1 .list .other .other_3 {
+  float: left;
+  width: 100%;
+  color: #ff0000;
+  font-size: 15px;
+}
+
+.main .two .two_1 .btn {
   float: left;
   width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background-color: #ffffff;
+}
+
+.main .two .two_1 .btn .btn_1 {
+  float: left;
+  width: 64%;
+  padding: 0 10px;
+  color: #ff0000;
+  font-size: 20px;
+}
+
+.main .two .two_1 .btn .btn_2 {
+  float: left;
+  width: 30%;
+  text-align: center;
+}
+
+.main .two .two_1 .btn .btn_2 button {
+  height: 50px;
+  background-color: #409eff;
+}
+
+.main .two .swiper-tab {
+  width: 100%;
+  border-bottom: 1rpx solid #f1f1f1;
+  text-align: center;
+  height: 39px;
+  line-height: 39px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}
+
+.main .two .swiper-tab-item {
+  width: 50%;
+  color: #434343;
+}
+
+.main .two .active {
+  color: #409eff;
+  border-bottom: 2rpx solid #409eff;
+}
+
+.van-stepper {
+  float: right;
 }