xt / xcx-book · Commits

Go to a project

Commit cfc6f02fe91a252216ff4483f5a7b2079cf8f7a4

Authored by vking
1 parent 5c103a25
build: skipped

taocan

Inline Side-by-side
Showing 4 changed files with 53 additions and 24 deletions
@@ -16,8 +16,9 @@ @@ -16,8 +16,9 @@
16 } 16 }
17 .nav .part .title{ 17 .nav .part .title{
18 width: 100%; 18 width: 100%;
19 - overflow: hidden;  
20 white-space:nowrap; 19 white-space:nowrap;
  20 + position: relative;
  21 + height:100%;
21 } 22 }
22 .nav .part .opt{ 23 .nav .part .opt{
23 min-width: 188rpx; 24 min-width: 188rpx;
@@ -98,7 +98,7 @@ image{ @@ -98,7 +98,7 @@ image{
98 background-image: url("http://nosqn.colorcun.com/taocan/1%20%2819%29.png"); 98 background-image: url("http://nosqn.colorcun.com/taocan/1%20%2819%29.png");
99 } 99 }
100 .picon.p4{ 100 .picon.p4{
101 - background-image: url("http://nosqn.colorcun.com/taocan/1%20%2819%29.png"); 101 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%2824%29.png");
102 } 102 }
103 .picon.p2{ 103 .picon.p2{
104 background-image: url("http://nosqn.colorcun.com/taocan/1%20%2820%29.png"); 104 background-image: url("http://nosqn.colorcun.com/taocan/1%20%2820%29.png");
1 <!--pages/customer/list.wxml--> 1 <!--pages/customer/list.wxml-->
2 -<nav>我的订单</nav>  
3 -<view class="view tabs flex padding-lg padding-top-xs"> 2 +<nav>
  3 + <view class="view header-tabs flex align-end">
  4 + <view class="view item {{tabType<5?'active':''}} margin-right-lg" data-type="1" bindtap="switchType">我的订单</view>
  5 + <view class="view item {{tabType>4?'active':''}}" data-type="5" bindtap="switchType">我的套餐</view>
  6 + </view>
  7 +</nav>
  8 +<view class="view tabs flex padding-lg padding-top-xs justify-between" wx:if="{{tabType<5}}">
4 <view class="view item {{tabType==1?'active':''}}" data-type="1" bindtap="switchType">等待确认</view> 9 <view class="view item {{tabType==1?'active':''}}" data-type="1" bindtap="switchType">等待确认</view>
5 <view class="view item {{tabType==2?'active':''}}" data-type="2" bindtap="switchType">预订成功</view> 10 <view class="view item {{tabType==2?'active':''}}" data-type="2" bindtap="switchType">预订成功</view>
6 <view class="view item {{tabType==3?'active':''}}" data-type="3" bindtap="switchType">历史订单</view> 11 <view class="view item {{tabType==3?'active':''}}" data-type="3" bindtap="switchType">历史订单</view>
7 <view class="view item {{tabType==4?'active':''}}" data-type="4" bindtap="switchType">无效预订</view> 12 <view class="view item {{tabType==4?'active':''}}" data-type="4" bindtap="switchType">无效预订</view>
8 </view> 13 </view>
  14 +<view class="view tabs flex padding-lg padding-top-xs justify-between" wx:else="">
  15 + <view class="view item {{tabType==5?'active':''}}" data-type="5" bindtap="switchType">全部套餐</view>
  16 + <view class="view item {{tabType==6?'active':''}}" data-type="6" bindtap="switchType">待使用</view>
  17 + <view class="view item {{tabType==7?'active':''}}" data-type="7" bindtap="switchType">已使用</view>
  18 + <view class="view item {{tabType==8?'active':''}}" data-type="8" bindtap="switchType">已退款</view>
  19 +</view>
9 <view class="view pages"> 20 <view class="view pages">
10 <block wx:if="{{list[tabType].length==0}}"> 21 <block wx:if="{{list[tabType].length==0}}">
11 <view class="flex-vc empry"> 22 <view class="flex-vc empry">
1 /* pages/customer/list.wxss */ 1 /* pages/customer/list.wxss */
2 @import "../../colorui/main.wxss"; 2 @import "../../colorui/main.wxss";
3 -.pages{  
4 - margin-top: 100rpx; 3 +.header-tabs{
  4 + position: absolute;
  5 + left:-144rpx;
  6 + top:10rpx;
5 } 7 }
6 -.tabs{  
7 - font-size: 32rpx; 8 +.header-tabs .item{
  9 + position: relative;
  10 + width: 50%;
  11 + height: 40rpx;
  12 + font-size: 28rpx;
8 font-family: PingFangSC-Regular, PingFang SC; 13 font-family: PingFangSC-Regular, PingFang SC;
9 font-weight: 400; 14 font-weight: 400;
10 - color: #333333;  
11 - line-height: 44rpx;  
12 -  
13 - position: fixed;  
14 - background-color: #fff;  
15 - z-index: 9;  
16 - width: 100%;  
17 -}  
18 -.tabs .item{  
19 - position: relative;  
20 - width: 25%;  
21 - text-align: center; 15 + color: #999999;
  16 + line-height: 40rpx;
22 } 17 }
23 -.tabs .active{  
24 - font-weight: 600;  
25 - color: #42A5FF; 18 +.header-tabs .active{
  19 + height: 50rpx;
  20 + font-size: 36rpx;
  21 + font-family: PingFangSC-Medium, PingFang SC;
  22 + font-weight: 500;
  23 + color: #333333;
  24 + line-height: 50rpx;
26 } 25 }
27 -.tabs .active:after{ 26 +.header-tabs .active:after{
28 display: block; 27 display: block;
29 position: absolute; 28 position: absolute;
30 content: ""; 29 content: "";
@@ -35,6 +34,24 @@ @@ -35,6 +34,24 @@
35 background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%); 34 background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
36 border-radius: 3rpx; 35 border-radius: 3rpx;
37 } 36 }
  37 +.pages{
  38 + margin-top: 100rpx;
  39 +}
  40 +.tabs .item{
  41 + width: calc(calc(100% - 60rpx) / 4);
  42 + border: 2rpx solid #E0E0E0;
  43 + height: 60rpx;
  44 + line-height: 60rpx;
  45 + text-align: center;
  46 + color: #999999;
  47 + font-size: 28rpx;
  48 +}
  49 +.tabs .active{
  50 + color:#42A5FF;
  51 + background-color: #E6F3FF;
  52 + border-color: #E6F3FF;
  53 +}
  54 +
38 .empry{ 55 .empry{
39 font-size: 28rpx; 56 font-size: 28rpx;
40 margin-top: 210rpx; 57 margin-top: 210rpx;