taocan

@@ -16,8 +16,9 @@
 }
 .nav .part .title{
   width: 100%;
-  overflow: hidden;
   white-space:nowrap;
+  position: relative;
+  height:100%;
 }
 .nav .part .opt{
   min-width: 188rpx;

@@ -98,7 +98,7 @@ image{
   background-image: url("http://nosqn.colorcun.com/taocan/1%20%2819%29.png");
 }
 .picon.p4{
-  background-image: url("http://nosqn.colorcun.com/taocan/1%20%2819%29.png");
+  background-image: url("http://nosqn.colorcun.com/taocan/1%20%2824%29.png");
 }
 .picon.p2{
   background-image: url("http://nosqn.colorcun.com/taocan/1%20%2820%29.png");

 <!--pages/customer/list.wxml-->
-<nav>我的订单</nav>
-<view class="view tabs flex padding-lg padding-top-xs">
+<nav>
+    <view class="view header-tabs flex align-end">
+        <view class="view item {{tabType<5?'active':''}} margin-right-lg" data-type="1" bindtap="switchType">我的订单</view>
+        <view class="view item {{tabType>4?'active':''}}" data-type="5" bindtap="switchType">我的套餐</view>
+    </view>
+</nav>
+<view class="view tabs flex padding-lg padding-top-xs justify-between" wx:if="{{tabType<5}}">
     <view class="view item {{tabType==1?'active':''}}" data-type="1" bindtap="switchType">等待确认</view>
     <view class="view item {{tabType==2?'active':''}}" data-type="2" bindtap="switchType">预订成功</view>
     <view class="view item {{tabType==3?'active':''}}" data-type="3" bindtap="switchType">历史订单</view>
     <view class="view item {{tabType==4?'active':''}}" data-type="4" bindtap="switchType">无效预订</view>
 </view>
+<view class="view tabs flex padding-lg padding-top-xs justify-between" wx:else="">
+    <view class="view item {{tabType==5?'active':''}}" data-type="5" bindtap="switchType">全部套餐</view>
+    <view class="view item {{tabType==6?'active':''}}" data-type="6" bindtap="switchType">待使用</view>
+    <view class="view item {{tabType==7?'active':''}}" data-type="7" bindtap="switchType">已使用</view>
+    <view class="view item {{tabType==8?'active':''}}" data-type="8" bindtap="switchType">已退款</view>
+</view>
 <view class="view pages">
     <block wx:if="{{list[tabType].length==0}}">
         <view class="flex-vc empry">

 /* pages/customer/list.wxss */
 @import "../../colorui/main.wxss";
-.pages{
-  margin-top: 100rpx;
+.header-tabs{
+  position: absolute;
+  left:-144rpx;
+  top:10rpx;
 }
-.tabs{
-  font-size: 32rpx;
+.header-tabs .item{
+  position: relative;
+  width: 50%;
+  height: 40rpx;
+  font-size: 28rpx;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #333333;
-  line-height: 44rpx;
-
-  position: fixed;
-  background-color: #fff;
-  z-index: 9;
-  width: 100%;
-}
-.tabs .item{
-  position: relative;
-  width: 25%;
-  text-align: center;
+  color: #999999;
+  line-height: 40rpx;
 }
-.tabs .active{
-  font-weight: 600;
-  color: #42A5FF;
+.header-tabs .active{
+  height: 50rpx;
+  font-size: 36rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  line-height: 50rpx;
 }
-.tabs .active:after{
+.header-tabs .active:after{
   display: block;
   position: absolute;
   content: "";
@@ -35,6 +34,24 @@
   background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
   border-radius: 3rpx;
 }
+.pages{
+  margin-top: 100rpx;
+}
+.tabs .item{
+  width: calc(calc(100% - 60rpx) / 4);
+  border: 2rpx solid #E0E0E0;
+  height: 60rpx;
+  line-height: 60rpx;
+  text-align: center;
+  color: #999999;
+  font-size: 28rpx;
+}
+.tabs .active{
+  color:#42A5FF;
+  background-color: #E6F3FF;
+  border-color: #E6F3FF;
+}
+
 .empry{
   font-size: 28rpx;
   margin-top: 210rpx;