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 {
padding-left: 50rpx;
padding-right: 50rpx;
}
.padding-lr-xxl {
padding-left: 60rpx;
padding-right: 60rpx;
}
.padding-tb-xs {
padding-top: 10rpx;
... ... @@ -3808,8 +3812,8 @@ scroll-view.cu-steps .cu-item {
}
.txt-24-h{
font-size: 24rpx;
height: calc(24rpx * 1.4);
line-height: calc(24rpx * 1.4);
height: 34rpx;
line-height: 34rpx;
}
.txt-26-h{
font-size: 26rpx;
... ... @@ -3818,18 +3822,18 @@ scroll-view.cu-steps .cu-item {
}
.txt-28-h{
font-size: 28rpx;
height: calc(28rpx * 1.4);
line-height: calc(28rpx * 1.4);
height: 40rpx;
line-height: 40rpx;
}
.txt-30-h{
font-size: 30rpx;
height: calc(30rpx * 1.4);
line-height: calc(30rpx * 1.4);
height: 42rpx;
line-height: 42rpx;
}
.txt-32-h{
font-size: 32rpx;
height: calc(32rpx * 1.4);
line-height: calc(32rpx * 1.4);
height: 44rpx;
line-height: 44rpx;
}
.txt-34-h{
font-size: 34rpx;
... ... @@ -3848,8 +3852,15 @@ scroll-view.cu-steps .cu-item {
}
.txt-40-h{
font-size: 40rpx;
height: calc(40rpx * 1.4);
line-height: calc(40rpx * 1.4);
height: 60rpx;
line-height: 60rpx;
}
.txt-52-h{
font-size: 52rpx;
height: 74rpx;
line-height: 74rpx;
}
.text-xs {
... ...
... ... @@ -97,4 +97,9 @@ Page({
current:e.detail.current
})
},
toggleRule(){
this.setData({
hasShowRule:!this.data.hasShowRule,
})
}
})
\ No newline at end of file
... ...
<!--pages/taocan/index.wxml-->
<nav hasHome>套餐详情</nav>
<view class="view">
<swiper
display-multiple-items="3"
class="view margin-left-lg"
bindchange="swiperChange"
current="{{current}}"
style="height: 80rpx;">
<block wx:for="{{packs}}" wx:key="*this">
<swiper-item
bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
class="swiper-item {{activityId==item.id?'active':''}} flex align-center">
<view class="txt-28-h">招牌六十人餐</view>
</swiper-item>
</block>
</swiper>
<swiper
display-multiple-items="3"
class="view margin-left-lg header"
bindchange="swiperChange"
current="{{current}}"
style="height: 80rpx;">
<block wx:for="{{packs}}" wx:key="*this">
<swiper-item
bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
class="swiper-item {{activityId==item.id?'active':''}} flex align-center">
<view class="txt-28-h">招牌六十人餐</view>
</swiper-item>
</block>
</swiper>
<view class="view" style="padding-bottom: 150rpx;padding-top: 80rpx;">
<view class="view box margin-lr margin-top-lg margin-bottom-sm padding">
<view class="view txt-40-h text-bold">招牌花开富贵六十人餐</view>
<view class="view flex align-end">
... ... @@ -29,20 +29,69 @@
<view class="view margin-left-xs txt-24-h" style="margin-bottom: 10rpx;">8折</view>
</view>
</view>
<view class="view flex align-center txt-28-h margin-bottom" style="margin-top: 10rpx;">
<view class="view margin-right">
<view class="icon"></view>
<view>1111</view>
<view class="view flex align-center txt-28-h margin-bottom labels" style="margin-top: 10rpx;">
<view class="view margin-right flex align-center">
<view class="view icon icon1"></view>
<view class="view txt-28-h bg-white">包间可用</view>
</view>
<view class="view margin-right">
<view class="icon"></view>
<view>1111</view>
<view class="view margin-right flex align-center">
<view class="view icon icon2"></view>
<view class="view txt-28-h bg-white">免预约</view>
</view>
<view class="view margin-right">
<view class="icon"></view>
<view>1111</view>
<view class="view margin-right flex align-center">
<view class="view icon icon3"></view>
<view class="view txt-28-h bg-white">随时退</view>
</view>
</view>
<image src="" style="width:100%;" mode="widthFix"></image>
<image src="" style="width:100%;background-color: #cccccc;" mode="widthFix"></image>
</view>
<view class="view box margin-lr margin-top-sm margin-bottom-sm">
<view class="txt-30-h padding solid-bottom">购买须知</view>
<view class="view padding block">
<view class="flex align-center margin-bottom-sm">
<view class="dot"></view>
<view class="txt-30-h text-bold">有效期</view>
</view>
<view class="text-df">123123</view>
</view>
<view class="view padding block">
<view class="flex align-center margin-bottom-sm">
<view class="dot"></view>
<view class="txt-30-h text-bold">使用时间</view>
</view>
<view class="text-df">123123</view>
</view>
<view class="view padding block padding-bottom-sm">
<view class="flex align-center margin-bottom-sm">
<view class="dot"></view>
<view class="txt-30-h text-bold">使用规则</view>
</view>
<view class="text-df" wx:if="{{hasShowRule}}">
<text>123123</text>
</view>
<view class="flex justify-center align-center rule margin-top-sm margin-bottom-sm" bindtap="toggleRule">
<view class="txt-28-h">{{hasShowRule?'收起':'展开更多'}}</view>
<view class="view icon {{hasShowRule?'show':''}}"></view>
</view>
</view>
</view>
</view>
<view class="view bottom flex align-center justify-between padding-lr-xl">
<view class="view flex align-end margin-right">
<view class="text-orange txt-40-h" style="margin-bottom: 4rpx;">¥</view>
<view class="text-orange txt-52-h margin-right-sm text-bold">123</view>
</view>
<view class="view flex flex-direction justify-center align-center">
<view class="view flex text-orange align-center" >
<view class="view tag"></view>
<view class="view margin-left-xs txt-24-h">8折</view>
</view>
<view class="huaxian flex align-end">
<view class="txt-24-h" style="margin-bottom: 2rpx;">¥</view>
<view class="txt-32-h">123</view>
</view>
</view>
<view class="flex flex-treble justify-end">
<view class="buyButton txt-36-h text-bold flex align-center justify-center bg-blue-blue">立即抢购</view>
</view>
</view>
... ...
... ... @@ -36,5 +36,56 @@
.tag{
width: 22rpx;
height: 22rpx;
background: #FF7A00;
background-image: url("http://nosqn.colorcun.com/taocan/1%20%281%29.png");
}
.labels .icon{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
.labels .icon1{
background-image: url("http://nosqn.colorcun.com/taocan/1%20%287%29.png");
}
.labels .icon2{
background-image: url("http://nosqn.colorcun.com/taocan/1%20%288%29.png");
}
.labels .icon3{
background-image: url("http://nosqn.colorcun.com/taocan/1%20%289%29.png");
}
.block .dot{
width: 8rpx;
height: 26rpx;
background: linear-gradient(180deg, #3BBFF5 0%, #57A0FF 100%);
margin-right: 20rpx;
}
.rule .icon{
width: 22rpx;
height: 12rpx;
margin-left: 20rpx;
background-image: url("http://nosqn.colorcun.com/taocan/1%20%285%29.png");
}
.rule .icon.show{
background-image: url("http://nosqn.colorcun.com/taocan/1%20%286%29.png");
}
.header{
position: fixed;
width: 100%;
background-color: #fefefe;
z-index: 9;
}
.bottom{
position: fixed;
bottom: 0;
height: 116rpx;
width: 100%;
background: #FFFFFF;
box-shadow: 0px 0px 8rpx 0px #EEF0F2;
}
.buyButton{
width: 310rpx;
height: 84rpx;
background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
border-radius: 42rpx;
}
\ No newline at end of file
... ...