xt / xcx-book · Commits

Go to a project

Commit 7ccc35be24a6b19d566eb816baa1ee65e7035975

Authored by vking
1 parent 4bcdf52f
build: skipped

taocan

Inline Side-by-side
Showing 4 changed files with 153 additions and 37 deletions
@@ -3326,6 +3326,10 @@ scroll-view.cu-steps .cu-item { @@ -3326,6 +3326,10 @@ scroll-view.cu-steps .cu-item {
3326 padding-left: 50rpx; 3326 padding-left: 50rpx;
3327 padding-right: 50rpx; 3327 padding-right: 50rpx;
3328 } 3328 }
  3329 +.padding-lr-xxl {
  3330 + padding-left: 60rpx;
  3331 + padding-right: 60rpx;
  3332 +}
3329 3333
3330 .padding-tb-xs { 3334 .padding-tb-xs {
3331 padding-top: 10rpx; 3335 padding-top: 10rpx;
@@ -3808,8 +3812,8 @@ scroll-view.cu-steps .cu-item { @@ -3808,8 +3812,8 @@ scroll-view.cu-steps .cu-item {
3808 } 3812 }
3809 .txt-24-h{ 3813 .txt-24-h{
3810 font-size: 24rpx; 3814 font-size: 24rpx;
3811 - height: calc(24rpx * 1.4);  
3812 - line-height: calc(24rpx * 1.4); 3815 + height: 34rpx;
  3816 + line-height: 34rpx;
3813 } 3817 }
3814 .txt-26-h{ 3818 .txt-26-h{
3815 font-size: 26rpx; 3819 font-size: 26rpx;
@@ -3818,18 +3822,18 @@ scroll-view.cu-steps .cu-item { @@ -3818,18 +3822,18 @@ scroll-view.cu-steps .cu-item {
3818 } 3822 }
3819 .txt-28-h{ 3823 .txt-28-h{
3820 font-size: 28rpx; 3824 font-size: 28rpx;
3821 - height: calc(28rpx * 1.4);  
3822 - line-height: calc(28rpx * 1.4); 3825 + height: 40rpx;
  3826 + line-height: 40rpx;
3823 } 3827 }
3824 .txt-30-h{ 3828 .txt-30-h{
3825 font-size: 30rpx; 3829 font-size: 30rpx;
3826 - height: calc(30rpx * 1.4);  
3827 - line-height: calc(30rpx * 1.4); 3830 + height: 42rpx;
  3831 + line-height: 42rpx;
3828 } 3832 }
3829 .txt-32-h{ 3833 .txt-32-h{
3830 font-size: 32rpx; 3834 font-size: 32rpx;
3831 - height: calc(32rpx * 1.4);  
3832 - line-height: calc(32rpx * 1.4); 3835 + height: 44rpx;
  3836 + line-height: 44rpx;
3833 } 3837 }
3834 .txt-34-h{ 3838 .txt-34-h{
3835 font-size: 34rpx; 3839 font-size: 34rpx;
@@ -3848,8 +3852,15 @@ scroll-view.cu-steps .cu-item { @@ -3848,8 +3852,15 @@ scroll-view.cu-steps .cu-item {
3848 } 3852 }
3849 .txt-40-h{ 3853 .txt-40-h{
3850 font-size: 40rpx; 3854 font-size: 40rpx;
3851 - height: calc(40rpx * 1.4);  
3852 - line-height: calc(40rpx * 1.4); 3855 + height: 60rpx;
  3856 + line-height: 60rpx;
  3857 +
  3858 +}
  3859 +.txt-52-h{
  3860 + font-size: 52rpx;
  3861 + height: 74rpx;
  3862 + line-height: 74rpx;
  3863 +
3853 } 3864 }
3854 3865
3855 .text-xs { 3866 .text-xs {
@@ -97,4 +97,9 @@ Page({ @@ -97,4 +97,9 @@ Page({
97 current:e.detail.current 97 current:e.detail.current
98 }) 98 })
99 }, 99 },
  100 + toggleRule(){
  101 + this.setData({
  102 + hasShowRule:!this.data.hasShowRule,
  103 + })
  104 + }
100 }) 105 })
1 <!--pages/taocan/index.wxml--> 1 <!--pages/taocan/index.wxml-->
2 <nav hasHome>套餐详情</nav> 2 <nav hasHome>套餐详情</nav>
3 -<view class="view">  
4 - <swiper  
5 - display-multiple-items="3"  
6 - class="view margin-left-lg"  
7 - bindchange="swiperChange"  
8 - current="{{current}}"  
9 - style="height: 80rpx;">  
10 - <block wx:for="{{packs}}" wx:key="*this">  
11 - <swiper-item  
12 - bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"  
13 - class="swiper-item {{activityId==item.id?'active':''}} flex align-center">  
14 - <view class="txt-28-h">招牌六十人餐</view>  
15 - </swiper-item>  
16 - </block>  
17 - </swiper> 3 +<swiper
  4 + display-multiple-items="3"
  5 + class="view margin-left-lg header"
  6 + bindchange="swiperChange"
  7 + current="{{current}}"
  8 + style="height: 80rpx;">
  9 + <block wx:for="{{packs}}" wx:key="*this">
  10 + <swiper-item
  11 + bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
  12 + class="swiper-item {{activityId==item.id?'active':''}} flex align-center">
  13 + <view class="txt-28-h">招牌六十人餐</view>
  14 + </swiper-item>
  15 + </block>
  16 +</swiper>
  17 +<view class="view" style="padding-bottom: 150rpx;padding-top: 80rpx;">
18 <view class="view box margin-lr margin-top-lg margin-bottom-sm padding"> 18 <view class="view box margin-lr margin-top-lg margin-bottom-sm padding">
19 <view class="view txt-40-h text-bold">招牌花开富贵六十人餐</view> 19 <view class="view txt-40-h text-bold">招牌花开富贵六十人餐</view>
20 <view class="view flex align-end"> 20 <view class="view flex align-end">
@@ -29,20 +29,69 @@ @@ -29,20 +29,69 @@
29 <view class="view margin-left-xs txt-24-h" style="margin-bottom: 10rpx;">8折</view> 29 <view class="view margin-left-xs txt-24-h" style="margin-bottom: 10rpx;">8折</view>
30 </view> 30 </view>
31 </view> 31 </view>
32 - <view class="view flex align-center txt-28-h margin-bottom" style="margin-top: 10rpx;">  
33 - <view class="view margin-right">  
34 - <view class="icon"></view>  
35 - <view>1111</view> 32 + <view class="view flex align-center txt-28-h margin-bottom labels" style="margin-top: 10rpx;">
  33 + <view class="view margin-right flex align-center">
  34 + <view class="view icon icon1"></view>
  35 + <view class="view txt-28-h bg-white">包间可用</view>
36 </view> 36 </view>
37 - <view class="view margin-right">  
38 - <view class="icon"></view>  
39 - <view>1111</view> 37 + <view class="view margin-right flex align-center">
  38 + <view class="view icon icon2"></view>
  39 + <view class="view txt-28-h bg-white">免预约</view>
40 </view> 40 </view>
41 - <view class="view margin-right">  
42 - <view class="icon"></view>  
43 - <view>1111</view> 41 + <view class="view margin-right flex align-center">
  42 + <view class="view icon icon3"></view>
  43 + <view class="view txt-28-h bg-white">随时退</view>
44 </view> 44 </view>
45 </view> 45 </view>
46 - <image src="" style="width:100%;" mode="widthFix"></image> 46 + <image src="" style="width:100%;background-color: #cccccc;" mode="widthFix"></image>
  47 + </view>
  48 + <view class="view box margin-lr margin-top-sm margin-bottom-sm">
  49 + <view class="txt-30-h padding solid-bottom">购买须知</view>
  50 + <view class="view padding block">
  51 + <view class="flex align-center margin-bottom-sm">
  52 + <view class="dot"></view>
  53 + <view class="txt-30-h text-bold">有效期</view>
  54 + </view>
  55 + <view class="text-df">123123</view>
  56 + </view>
  57 + <view class="view padding block">
  58 + <view class="flex align-center margin-bottom-sm">
  59 + <view class="dot"></view>
  60 + <view class="txt-30-h text-bold">使用时间</view>
  61 + </view>
  62 + <view class="text-df">123123</view>
  63 + </view>
  64 + <view class="view padding block padding-bottom-sm">
  65 + <view class="flex align-center margin-bottom-sm">
  66 + <view class="dot"></view>
  67 + <view class="txt-30-h text-bold">使用规则</view>
  68 + </view>
  69 + <view class="text-df" wx:if="{{hasShowRule}}">
  70 + <text>123123</text>
  71 + </view>
  72 + <view class="flex justify-center align-center rule margin-top-sm margin-bottom-sm" bindtap="toggleRule">
  73 + <view class="txt-28-h">{{hasShowRule?'收起':'展开更多'}}</view>
  74 + <view class="view icon {{hasShowRule?'show':''}}"></view>
  75 + </view>
  76 + </view>
  77 + </view>
  78 +</view>
  79 +<view class="view bottom flex align-center justify-between padding-lr-xl">
  80 + <view class="view flex align-end margin-right">
  81 + <view class="text-orange txt-40-h" style="margin-bottom: 4rpx;">¥</view>
  82 + <view class="text-orange txt-52-h margin-right-sm text-bold">123</view>
  83 + </view>
  84 + <view class="view flex flex-direction justify-center align-center">
  85 + <view class="view flex text-orange align-center" >
  86 + <view class="view tag"></view>
  87 + <view class="view margin-left-xs txt-24-h">8折</view>
  88 + </view>
  89 + <view class="huaxian flex align-end">
  90 + <view class="txt-24-h" style="margin-bottom: 2rpx;">¥</view>
  91 + <view class="txt-32-h">123</view>
  92 + </view>
  93 + </view>
  94 + <view class="flex flex-treble justify-end">
  95 + <view class="buyButton txt-36-h text-bold flex align-center justify-center bg-blue-blue">立即抢购</view>
47 </view> 96 </view>
48 </view> 97 </view>
@@ -36,5 +36,56 @@ @@ -36,5 +36,56 @@
36 .tag{ 36 .tag{
37 width: 22rpx; 37 width: 22rpx;
38 height: 22rpx; 38 height: 22rpx;
39 - background: #FF7A00; 39 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%281%29.png");
  40 +}
  41 +.labels .icon{
  42 + width: 24rpx;
  43 + height: 24rpx;
  44 + margin-right: 10rpx;
  45 +
  46 +}
  47 +.labels .icon1{
  48 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%287%29.png");
  49 +}
  50 +.labels .icon2{
  51 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%288%29.png");
  52 +}
  53 +.labels .icon3{
  54 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%289%29.png");
  55 +}
  56 +.block .dot{
  57 + width: 8rpx;
  58 + height: 26rpx;
  59 + background: linear-gradient(180deg, #3BBFF5 0%, #57A0FF 100%);
  60 + margin-right: 20rpx;
  61 +}
  62 +.rule .icon{
  63 + width: 22rpx;
  64 + height: 12rpx;
  65 + margin-left: 20rpx;
  66 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%285%29.png");
  67 +}
  68 +.rule .icon.show{
  69 + background-image: url("http://nosqn.colorcun.com/taocan/1%20%286%29.png");
  70 +}
  71 +.header{
  72 + position: fixed;
  73 + width: 100%;
  74 + background-color: #fefefe;
  75 + z-index: 9;
  76 +}
  77 +.bottom{
  78 + position: fixed;
  79 + bottom: 0;
  80 + height: 116rpx;
  81 + width: 100%;
  82 + background: #FFFFFF;
  83 + box-shadow: 0px 0px 8rpx 0px #EEF0F2;
  84 +}
  85 +.buyButton{
  86 + width: 310rpx;
  87 + height: 84rpx;
  88 + background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
  89 + border-radius: 42rpx;
  90 +
40 } 91 }