11 changed files with 2175 additions and 310 deletions
@ -1,5 +1,7 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader" |
|||
"title":"/pages/component/TitleHeader", |
|||
"code":"../../order/components/wxqrCode/index" |
|||
|
|||
} |
|||
} |
|||
@ -1,32 +1,216 @@ |
|||
<!--pages/info/showInfo/index.wxml--> |
|||
<!--pages/info/hotelProductInfo/index.wxml--> |
|||
<wxs src="../../../utils/filter.wxs" module="tool" /> |
|||
<title title="产品详情"></title> |
|||
<title title="演出详情"></title> |
|||
|
|||
|
|||
<view wx:if="{{info}}"> |
|||
<swiper class="swiper" indicator-dots="{{true}}" |
|||
autoplay="{{true}}" interval="{{2000}}" duration="{{300}}"> |
|||
<block wx:for="{{info.listimg}}" wx:key="*this"> |
|||
<swiper-item> |
|||
<image src="{{item}}" mode="aspectFill"></image> |
|||
</swiper-item> |
|||
</block> |
|||
</swiper> |
|||
<view class="top-box"> |
|||
<view class="title">{{info.title}}</view> |
|||
<view class="tags"> |
|||
<view class="tag" wx:for="{{info.display_tags}}">{{item}}</view> |
|||
</view> |
|||
<view class="time">演出时间:<text wx:for="{{info.sku[0].sku_model.next_show_date}}">{{item}}</text></view> |
|||
<view class="show-location">{{info.scene_name}}</view> |
|||
<view class="show-address"><text class="iconfont icon-location"></text>{{info.scene_address}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="all-title">演出详情</view> |
|||
<rich-text wx:if="{{info}}" class="detail" nodes="{{tool.formateRichText(info.content)}}"></rich-text> |
|||
<view class="all-title">预定须知</view> |
|||
<!-- <rich-text class="detail"></rich-text> --> |
|||
<rich-text wx:if="{{info}}" class="detail" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text> |
|||
<view style="height:120rpx"></view> |
|||
<view class="top-info"> |
|||
<view class="product-base-info"> |
|||
<image class="headImg" src="{{info.headimg}}"></image> |
|||
<view class="base-info"> |
|||
<view class="title textOver2">{{info.title}}</view> |
|||
<view class="tags-box textOver"> |
|||
<view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}<view class="line"></view> |
|||
</view> |
|||
</view> |
|||
<view class="subtitle">演出时间:<text wx:for="{{info.sku[0].sku_model.next_show_date}}">{{item}}</text></view> |
|||
|
|||
<view class="bottom-price"> |
|||
<view class="tags-price"> |
|||
<text>¥</text><text>{{info.price/100}}</text><text>起</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view class="address-info" bindtap="gotolocation"> |
|||
<view class="map-container"> |
|||
|
|||
<view style="width: 526rpx;"> |
|||
<view class="textOver" style="font-size: 31rpx;color: #000000;padding-top: 12rpx;">{{info.scene_name}}</view> |
|||
<view class="textOver2" style="padding-top: 26rpx;">{{info.scene_address}}</view> |
|||
</view> |
|||
<view style="text-align: center;"> |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20241119/a98e35f23497c1a8ddf7c7769fbd4fd1.png"></image> |
|||
<view style="padding-top: 14rpx;">25.5km</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="show-tip"> |
|||
<view class="com-flex"><image src="https://static.ticket.sz-trip.com/uploads/20241119/a98e35f23497c1a8ddf7c7769fbd4fd1.png"></image>不支持退款</view> |
|||
<view class="com-flex">不支持退款</view> |
|||
|
|||
<view class="com-flex">不支持退款</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="scroll-all-box" id="menus" wx:if="{{info}}"> |
|||
<view class="scroll-menus{{fixed?' fixed-menus':''}}" style="top:{{top}}px"> |
|||
<view class="scroll-menu-item{{type==1?' active':''}}" bindtap="changeMenu" data-index="1">详情</view> |
|||
<view class="scroll-menu-item{{type==2?' active':''}}" bindtap="changeMenu" data-index="2">须知</view> |
|||
<view class="scroll-menu-item{{type==3?' active':''}}" bindtap="changeMenu" data-index="3">推荐</view> |
|||
</view> |
|||
<view style="height:85rpx" wx:if="{{fixed}}"></view> |
|||
|
|||
|
|||
<view class="content-text"> |
|||
<view class="info-box info-box-line" id="box1"> |
|||
<view class="info-title">演出详情</view> |
|||
<view class="{{showDetail?'':'max-details'}}"> |
|||
<rich-text class="details" nodes="{{tool.formateRichText(info.content)}}"></rich-text> |
|||
<view wx:if="{{!showDetail}}" class="white-placholder">123</view> |
|||
</view> |
|||
<view class="show-btn"> |
|||
<view bindtap="changeShowDetail" data-flag="{{true}}">展开全部</view> |
|||
<view bindtap="changeShowDetail" data-flag="{{false}}">收起</view> |
|||
</view> |
|||
</view> |
|||
<view class="info-box" id="box2"> |
|||
<view class="info-title">演出须知</view> |
|||
<rich-text class="details" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text> |
|||
</view> |
|||
<view class="info-box info-box-line" > |
|||
<view class="info-title">观看提示</view> |
|||
<rich-text class="details" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text> |
|||
</view> |
|||
|
|||
<view class="info-box" id="box3"> |
|||
<view class="info-title">推荐演出</view> |
|||
<view class="pro-list"> |
|||
<view class="proitem" wx:for="{{tjList}}" bindtap="gotoDetail" data-item="{{item}}"> |
|||
<view class="item-hd"> |
|||
<image src="{{item.headimg}}"></image> |
|||
</view> |
|||
<view class="item-bm"> |
|||
<view class="protitle textOver">{{item.title}}</view> |
|||
<view class="pro-price"> |
|||
{{item.price/100}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
|
|||
<view style="height:140rpx"></view> |
|||
<view class="fixed-bottom"> |
|||
<view class="btn" bindtap="order" wx:if="{{info && info.flag==1}}">立即预约</view> |
|||
<view class="btn disable" wx:else>该商品已下架</view> |
|||
<view class="['left-img',{{!iShop?'no-shop':''}}]"> |
|||
<navigator url="/pages/index/index" class="shop-box"> |
|||
<view class="shop-box"> |
|||
<image class="icon-shop" src="https://static.ticket.sz-trip.com/uploads/20241119/868addcaedbc5d63ebdfa150fcace34d.png" mode="aspectFill"/> |
|||
<view>首页</view> |
|||
</view> |
|||
</navigator> |
|||
<navigator url="/pages/user/service/index" catchtap="pagePoint" data-event='product_customservice' class="kefu-box"> |
|||
<view class="iconfont icon-kefu"></view> |
|||
<view>客服</view> |
|||
</navigator> |
|||
<view bindtap="like" class="kefu-box"> |
|||
<view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}"></view> |
|||
<view>收藏</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="btns"> |
|||
<!-- <view class="btn" bindtap="showCart">加入购物车</view> --> |
|||
<view class="btn" bindtap="showOrder" >立即购买</view> |
|||
|
|||
<!-- <view class="btn" bindtap="showOrder" wx:if="{{info && info.flag==1}}">立即购买</view> |
|||
<view class="btn disable" wx:elif="{{info}}">该商品已下架</view> --> |
|||
</view> |
|||
</view> |
|||
<!-- 购物车悬浮框 --> |
|||
<navigator url="/pages/user/cartlist/list" catchtap="pagePoint" data-event='product_cart_click' class="cart-box" id="cart"> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/cart.png" mode="widthFix"></image> |
|||
<view class="cart-num">{{cartCount}}</view> |
|||
</navigator> |
|||
|
|||
|
|||
<view class="mask" wx:if="{{skuFlag}}"> |
|||
<view class="mask-bg" bindtap="hideSku"></view> |
|||
<view class="mask-content"> |
|||
<view class="iconfont icon-close" bindtap="hideSku"></view> |
|||
<view class="sku-info-box"> |
|||
<image id="skuImg" src="{{info.sku[skuIndex].headimg}}" mode="aspectFill"></image> |
|||
<view class="sku-info"> |
|||
<view class="sku-price">{{info.sku[skuIndex].price/100}} |
|||
<view class="allowance" wx:if="{{allowance_data}}"> |
|||
补贴价:¥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view> |
|||
</view> |
|||
<view class="sku-name">已选择:{{info.sku[skuIndex].sku_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="sku-names"> |
|||
<view bindtap="selectSku" data-index="{{index}}" class="sku-name-item textOver{{index==skuIndex?' active':''}}" wx:for="{{info.sku}}">{{item.sku_name}}</view> |
|||
</view> |
|||
<view class="number-box"> |
|||
<text>数量</text> |
|||
<view class="iconfont icon-sami-select" bindtap="minus"></view> |
|||
<view class="number">{{producNum}}</view> |
|||
<view class="iconfont icon-add-select" bindtap="add"></view> |
|||
</view> |
|||
<view style="height:138rpx"></view> |
|||
<view class="btn-box"> |
|||
<view class="mask-btn" bindtap="order" wx:if="{{info.sku[skuIndex].flag=='on'}}">{{skuFlag=='cart'?'确认':'立即购买'}} |
|||
</view> |
|||
<view class="mask-btn disable" wx:else>该商品已下架</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view style="position:absolute;right:0;left:-10000rpx;top:-20000rpx;z-index:-1"> |
|||
<canvas canvas-id='imageCanvas' class='imageCanvas' style="width:551rpx;height:643rpx;" disable-scroll='true'> |
|||
</canvas> |
|||
<canvas class="canvasCode" style="opacity:0;width:500px;height:500px" canvas-id="myQrcode"></canvas> |
|||
</view> |
|||
|
|||
<!-- 分享 --> |
|||
<view class="mask" wx:if="{{showShareFlag}}" style="align-items: center;"> |
|||
<view class="mask-bg" bindtap="share"></view> |
|||
<view class="mask-content share-img-box"> |
|||
<image class="share-img" src="{{shareImg}}" mode="widthFix"></image> |
|||
<view class="share-tips"> |
|||
<view style="position:relative"> |
|||
<image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/img.png" mode="widthFix"> |
|||
</image> |
|||
<view>保存图片到相册</view> |
|||
<view class="tipimg"> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok.png" mode="widthFix"></image> |
|||
</view> |
|||
</view> |
|||
<image style="width:36rpx" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/arrow2.png" mode="widthFix"></image> |
|||
<view style="position:relative"> |
|||
<image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/code.png" mode="widthFix"> |
|||
</image> |
|||
<view>微信识别二维码</view> |
|||
<view class="tipimg"> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok1.png" mode="widthFix"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="save-btn" bindtap="save">保存到相册</view> |
|||
</view> |
|||
</view> |
|||
<view class="mask mask-allowance" wx:if="{{showAllowance}}"> |
|||
<view bindtap="changeAllowance" class="mask-bg"></view> |
|||
<view class="mask-content rule-box"> |
|||
<view class="rule-title">{{allowance_data.title}}</view> |
|||
<rich-text nodes="{{allowance_data.content}}"></rich-text> |
|||
</view> |
|||
</view> |
|||
<code showModel="{{showQrCode}}" qrcode = "{{wxqrcode}}"> |
|||
</code> |
|||
@ -1,86 +1,898 @@ |
|||
/* pages/info/showInfo/index.wxss */ |
|||
/* pages/info/hotelProductInfo/index.wxss */ |
|||
page { |
|||
background: #f6f6f6; |
|||
background: white; |
|||
} |
|||
.swiper,.swiper image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 330rpx; |
|||
|
|||
|
|||
.top-info { |
|||
background: white; |
|||
margin-top: -20rpx; |
|||
padding: 48rpx 28rpx 28rpx; |
|||
} |
|||
.top-box { |
|||
border-bottom: 1rpx solid #ccc; |
|||
padding: 22rpx 27rpx; |
|||
|
|||
|
|||
.product-base-info{ |
|||
display: flex; |
|||
} |
|||
.top-box .title { |
|||
font-size: 32rpx; |
|||
color: #000; |
|||
.product-base-info .headImg{ |
|||
width: 187rpx; |
|||
height: 240rpx; |
|||
background: #D1D7CB; |
|||
border-radius: 13rpx; |
|||
margin-right: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.product-base-info .title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #111111; |
|||
} |
|||
|
|||
.product-base-info .subtitle { |
|||
margin-top: 20rpx; |
|||
font-weight: 500; |
|||
margin-bottom: 10rpx; |
|||
font-size: 27rpx; |
|||
color: #888888; |
|||
} |
|||
.base-info{ |
|||
flex: 1; |
|||
width: 1rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.top-box .tags { |
|||
.product-base-info .tags-box { |
|||
margin-top: 18rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 50rpx; |
|||
overflow-y: hidden; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
.tags-box .tag { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #0B898E; |
|||
font-size: 20rpx; |
|||
margin-bottom: 20rpx; |
|||
padding: 7rpx 16rpx; |
|||
background: #E6F3F3; |
|||
border-radius: 19rpx; |
|||
margin-right: 13rpx; |
|||
} |
|||
.top-box .tag { |
|||
margin-right: 20rpx; |
|||
padding: 0 15rpx; |
|||
line-height: 30rpx; |
|||
border-radius: 16rpx; |
|||
border: 1rpx solid; |
|||
|
|||
.tags-box .tag .line { |
|||
content: "1"; |
|||
display: block; |
|||
font-size: 0; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
background: #DAF3E9; |
|||
height: 8rpx; |
|||
top: 30rpx; |
|||
z-index: -1; |
|||
} |
|||
.top-box .time { |
|||
font-size: 27rpx; |
|||
color: #333; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 1rpx solid #ccc; |
|||
|
|||
.bottom-price { |
|||
flex: 1; |
|||
height: 1rpx; |
|||
color: #E52910; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
} |
|||
.show-location { |
|||
margin: 20rpx 0; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
|
|||
.tags-price text:nth-child(1) { |
|||
font-size: 21rpx; |
|||
} |
|||
|
|||
.tags-price text:nth-child(2) { |
|||
font-size: 37rpx; |
|||
font-weight: bold; |
|||
} |
|||
.show-address { |
|||
|
|||
.tags-price text:nth-child(3) { |
|||
font-size: 21rpx; |
|||
color: #999999; |
|||
margin-left: 4rpx; |
|||
} |
|||
|
|||
.tags-box .iconfont { |
|||
margin-left: 4rpx; |
|||
font-size: 24rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.show-location .iconfont { |
|||
font-size: 26rpx; |
|||
margin-right: 10rpx; |
|||
|
|||
.address-info{ |
|||
margin-top: 26rpx; |
|||
padding-top: 15rpx; |
|||
border-top: 1px solid #D8D8D8; |
|||
} |
|||
.all-title { |
|||
margin: 27rpx; |
|||
|
|||
.map-container{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 35rpx; |
|||
font-size: 24rpx; |
|||
color: #888; |
|||
box-sizing: border-box; |
|||
} |
|||
.map-container image{ |
|||
width: 53rpx; |
|||
height: 53rpx; |
|||
} |
|||
|
|||
.show-tip{ |
|||
margin-top: 27rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
height: 80rpx; |
|||
background: #E6F3F3; |
|||
border-radius: 13rpx; |
|||
padding: 0 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
|
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #111111; |
|||
} |
|||
|
|||
.show-tip image{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
margin-right: 12rpx; |
|||
} |
|||
.detail { |
|||
padding: 0 27rpx; |
|||
|
|||
.scroll-all-box { |
|||
margin: 20rpx 0; |
|||
background: white; |
|||
} |
|||
|
|||
.scroll-menus { |
|||
padding: 0 107rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
height: 84rpx; |
|||
} |
|||
|
|||
.scroll-menu-item { |
|||
position: relative; |
|||
line-height: 84rpx; |
|||
} |
|||
.scroll-menu-item.active{ |
|||
color: #0B898E; |
|||
} |
|||
|
|||
.scroll-menu-item.active::after { |
|||
content: "1"; |
|||
font-size: 0; |
|||
display: block; |
|||
position: absolute; |
|||
width: 46rpx; |
|||
height: 6rpx; |
|||
border-radius: 3rpx; |
|||
background: #0B898E; |
|||
left: 50%; |
|||
margin-left: -23rpx; |
|||
bottom: 0rpx; |
|||
} |
|||
|
|||
.fixed-menus { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.content-text{ |
|||
padding: 0 40rpx; |
|||
} |
|||
.info-box { |
|||
padding: 30rpx 0rpx 39rpx; |
|||
} |
|||
.info-box-line{ |
|||
border-bottom: 1px solid #D8D8D8; |
|||
} |
|||
.info-title { |
|||
font-size: 35rpx; |
|||
font-weight: bold; |
|||
color: #000; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
#box1{ |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.max-details{ |
|||
position: relative; |
|||
max-height: 650rpx; |
|||
overflow: hidden; |
|||
} |
|||
.white-placholder{ |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 333rpx; |
|||
background-image: linear-gradient(to bottom, transparent, #fff); |
|||
} |
|||
.show-btn{ |
|||
padding-top: 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
padding-right: 70rpx; |
|||
} |
|||
.show-btn view{ |
|||
width: 158rpx; |
|||
height: 44rpx; |
|||
border-radius: 22rpx; |
|||
border: 1px solid #0B898E; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #0B898E; |
|||
text-align: center; |
|||
line-height: 44rpx; |
|||
margin-right: 29rpx; |
|||
} |
|||
|
|||
.box { |
|||
/* margin: 20rpx; */ |
|||
/* background: white; */ |
|||
/* border-radius: 13rpx; */ |
|||
background: #f2f2f2; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.box-top { |
|||
line-height: 95rpx; |
|||
border-bottom: 1rpx solid #d9d9d9; |
|||
font-weight: 500; |
|||
color: #000; |
|||
font-size: 35rpx; |
|||
padding: 0 20rpx; |
|||
background: #fff; |
|||
border-radius: 13rpx 13rpx 0 0; |
|||
} |
|||
|
|||
.box-top .iconfont { |
|||
color: #0B898E; |
|||
font-size: 33rpx; |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
.empty-box { |
|||
text-align: center; |
|||
padding: 40rpx 0; |
|||
font-size: 23rpx; |
|||
color: #333; |
|||
background: #fff; |
|||
border-radius: 0 0 13rpx 13rpx; |
|||
} |
|||
|
|||
.empty-btn { |
|||
margin: 0 auto; |
|||
margin-top: 30rpx; |
|||
width: 283rpx; |
|||
line-height: 79rpx; |
|||
border: 1rpx solid #0B898E; |
|||
border-radius: 39rpx; |
|||
color: #0B898E; |
|||
font-size: 32rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.box-top .score { |
|||
color: #D62828; |
|||
font-size: 30rpx; |
|||
font-weight: 400; |
|||
margin-left: 11rpx; |
|||
} |
|||
|
|||
|
|||
.fixed-bottom { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
height: 104rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
bottom: 0; |
|||
height: 140rpx; |
|||
background: white; |
|||
display: flex; |
|||
align-items: center; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
padding: 0 40rpx; |
|||
color: #666666; |
|||
font-size: 23rpx; |
|||
justify-content: space-between; |
|||
text-align: center; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.fixed-bottom .iconfont { |
|||
font-size: 34rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.btns { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
border-radius: 39rpx; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.btns .btn { |
|||
width: 240rpx; |
|||
line-height: 78rpx; |
|||
background: #D62828; |
|||
border-radius: 39rpx; |
|||
} |
|||
/* |
|||
.btns .btn:nth-child(1) { |
|||
margin-right: 3rpx; |
|||
border-radius: 39rpx 0 0 39rpx; |
|||
} |
|||
|
|||
.btns .btn:nth-child(2) { |
|||
border-radius: 0 39rpx 39rpx 0; |
|||
} */ |
|||
|
|||
.btns .btn.disable { |
|||
background: #ccc; |
|||
} |
|||
|
|||
.mask-content { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.mask-content .icon-close { |
|||
position: absolute; |
|||
right: 40rpx; |
|||
top: 40rpx; |
|||
} |
|||
|
|||
.sku-info-box { |
|||
margin: 50rpx 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.sku-info-box image { |
|||
width: 218rpx; |
|||
height: 180rpx; |
|||
border-radius: 13rpx; |
|||
display: block; |
|||
margin-right: 40rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.sku-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.sku-price { |
|||
font-size: 40rpx; |
|||
font-weight: 500; |
|||
color: #D62828; |
|||
margin: 20rpx 0; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
|
|||
.sku-price::before { |
|||
content: "¥"; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
.sku-price view { |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
background-color: #D62828; |
|||
border-radius: 22rpx; |
|||
line-height: 44rpx; |
|||
margin-left: 7rpx; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.sku-name { |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.sku-names { |
|||
display: flex; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
margin: 0 40rpx; |
|||
text-align: center; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 20rpx; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.sku-name-item { |
|||
background: #EFEFEF; |
|||
border: 1rpx solid #EFEFEF; |
|||
/* width: 318rpx; */ |
|||
line-height: 77rpx; |
|||
border-radius: 14rpx; |
|||
margin-bottom: 25rpx; |
|||
margin-right: 30rpx; |
|||
max-width: 100%; |
|||
padding: 0 15rpx; |
|||
min-width: 270rpx; |
|||
} |
|||
|
|||
.sku-name-item:nth-child(2n) { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.sku-name-item.active { |
|||
color: #0B898E; |
|||
border-color: #0B898E; |
|||
background: rgba(11, 137, 142, 0.1); |
|||
} |
|||
|
|||
.number-box { |
|||
display: flex; |
|||
align-items: center; |
|||
border-top: 1rpx solid #ccc; |
|||
justify-content: space-between; |
|||
margin: 0 40rpx; |
|||
padding: 40rpx 0; |
|||
} |
|||
|
|||
.number-box text { |
|||
flex: 1; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.number-box view { |
|||
border: 1rpx solid #666; |
|||
border-radius: 7rpx; |
|||
text-align: center; |
|||
width: 67rpx; |
|||
line-height: 67rpx; |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.number-box view.disable { |
|||
border-color: #ccc; |
|||
color: #999; |
|||
} |
|||
|
|||
.number-box view.number { |
|||
width: 94rpx; |
|||
margin: 0 15rpx; |
|||
} |
|||
|
|||
.btn-box { |
|||
height: 138rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
.fixed-bottom .btn { |
|||
width: 391rpx; |
|||
line-height: 74rpx; |
|||
|
|||
.mask-btn { |
|||
width: 670rpx; |
|||
line-height: 78rpx; |
|||
background: #D62828; |
|||
border-radius: 37rpx; |
|||
border-radius: 39rpx; |
|||
color: #fff; |
|||
font-size: 31rpx; |
|||
text-align: center; |
|||
font-size: 33rpx; |
|||
font-weight: 500; |
|||
} |
|||
.fixed-bottom .btn.disable { |
|||
|
|||
.mask-btn.disable { |
|||
background: #ccc; |
|||
} |
|||
|
|||
/* .icon-xin,.icon-shoucang { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
margin-top: 20rpx; |
|||
width: 60rpx; |
|||
line-height: 60rpx; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
z-index: 1; |
|||
} */ |
|||
.icon-fenxiang { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
margin-top: 20rpx; |
|||
width: 60rpx; |
|||
line-height: 60rpx; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.icon-shoucang { |
|||
color: #D62828; |
|||
font-size: 40rpx !important; |
|||
|
|||
} |
|||
|
|||
/* 购物车 */ |
|||
.cart-box { |
|||
position: fixed; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2); |
|||
border-radius: 50%; |
|||
right: 20rpx; |
|||
bottom: 166rpx; |
|||
} |
|||
|
|||
.cart-box image { |
|||
display: block; |
|||
width: 49rpx; |
|||
} |
|||
|
|||
.cart-num { |
|||
width: 26rpx; |
|||
border: 1rpx solid; |
|||
border-radius: 50%; |
|||
line-height: 26rpx; |
|||
text-align: center; |
|||
font-size: 23rpx; |
|||
color: #D20000; |
|||
position: absolute; |
|||
right: -2rpx; |
|||
top: -5rpx; |
|||
} |
|||
|
|||
|
|||
.share-img-box { |
|||
/* width: 551rpx; */ |
|||
position: static; |
|||
background: none; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.share-img { |
|||
display: block; |
|||
width: 551rpx; |
|||
} |
|||
|
|||
.share-tips { |
|||
width: 426rpx; |
|||
height: 150rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 25rpx; |
|||
margin-top: 25rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 65rpx; |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.share-tips .img { |
|||
display: block; |
|||
width: 55rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.tipimg { |
|||
position: absolute; |
|||
left: 50%; |
|||
margin-left: 16rpx; |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
background: #D62828; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
top: 34rpx; |
|||
} |
|||
|
|||
.tipimg image { |
|||
width: 21rpx; |
|||
display: block; |
|||
|
|||
} |
|||
|
|||
.save-btn { |
|||
width: 403rpx; |
|||
line-height: 77rpx; |
|||
background: #D62828; |
|||
border-radius: 39rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 31rpx; |
|||
font-weight: 500; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.allowance-box { |
|||
height: 113rpx; |
|||
background: url("https://sz-qd.oss-cn-hangzhou.aliyuncs.com/uploads/20220602/7762b9c4be5adac1f3d0ab5228569821.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: no-repeat; |
|||
padding: 30rpx 30rpx 10rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
margin-top: -60rpx; |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: start; |
|||
align-items: baseline; |
|||
} |
|||
|
|||
.allowance-box .com-price { |
|||
font-size: 30rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.allowance-box .com-price:before { |
|||
font-size: 18rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.allowance-box .com-price:after { |
|||
font-size: 18rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.allowance-box .yellow { |
|||
color: #DF2115; |
|||
padding: 8rpx 14rpx; |
|||
background-color: #FDEDD4; |
|||
margin-left: 20rpx; |
|||
border-radius: 30rpx; |
|||
} |
|||
|
|||
.mask-allowance .mask-content { |
|||
margin: auto; |
|||
width: auto; |
|||
top: initial; |
|||
bottom: initial; |
|||
padding: 20rpx; |
|||
width: 80%; |
|||
} |
|||
|
|||
.mask-allowance .mask-content .rule-title { |
|||
text-align: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.imgs{ |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin: 10rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
.img-box{ |
|||
display: inline-block; |
|||
position: relative; |
|||
} |
|||
.all{ |
|||
color: #fff; |
|||
position:absolute; |
|||
bottom: 17rpx; |
|||
right: 10rpx; |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 8rpx; |
|||
background-color: rgba(0, 0, 0, .5); |
|||
} |
|||
.all view{ |
|||
text-align: center; |
|||
} |
|||
.all view:first-child{ |
|||
font-size: 45rpx; |
|||
margin-top: 40rpx; |
|||
} |
|||
.all view:last-child{ |
|||
margin-top: 10rpx; |
|||
} |
|||
.sku{ |
|||
margin-left: 10rpx; |
|||
color: #666; |
|||
font-size: 24rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
.proad{ |
|||
margin: 20rpx; |
|||
} |
|||
.proad-title{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
.proad-title image{ |
|||
width: 292rpx; |
|||
height: 34rpx; |
|||
} |
|||
.pro-list{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
.proitem{ |
|||
width: 213rpx; |
|||
} |
|||
.item-hd image{ |
|||
width: 213rpx; |
|||
height: 273rpx; |
|||
background: #D1D7CB; |
|||
border-radius: 13rpx; |
|||
} |
|||
.item-bm{ |
|||
padding: 8rpx 12rpx; |
|||
} |
|||
.protitle{ |
|||
|
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 29rpx; |
|||
color: #111111; |
|||
|
|||
} |
|||
.pro-price{ |
|||
color: #E52910; |
|||
font-weight: 500; |
|||
font-size: 30rpx; |
|||
} |
|||
.pro-price:before { |
|||
display: inline-block; |
|||
content:"¥"; |
|||
color: #E52910; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.pro-price:after { |
|||
display: inline-block; |
|||
content:'起'; |
|||
color: #999999; |
|||
font-size: 10px; |
|||
} |
|||
.icon-shop{ |
|||
width: 34rpx; |
|||
height: 36rpx; |
|||
} |
|||
.left-img{ |
|||
display: flex; |
|||
width: 290rpx; |
|||
flex-shrink: 0; |
|||
justify-content: space-between; |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.no-shop{ |
|||
width: 230rpx; |
|||
} |
|||
.shop-box{ |
|||
display:flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 70rpx; |
|||
} |
|||
|
|||
.wineScene-price-container { |
|||
width: 750rpx; |
|||
height: 100rpx; |
|||
background: linear-gradient(-90deg,#FF413B, #FFAB2E); |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 26rpx; |
|||
box-sizing: border-box; |
|||
color: #FFFFFF; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.wineScene-price-container .wineSecne-price { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
.wineScene-price-container .wineSecne-money { |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
text-decoration-line: line-through; |
|||
padding-left: 14rpx; |
|||
} |
|||
.wineScene-price-container .wineSecne-price::before { |
|||
font-size: 24rpx; |
|||
content: '¥'; |
|||
} |
|||
|
|||
.hotel-custom-detail{ |
|||
display: flex; |
|||
/* justify-content: space-between; */ |
|||
height: fit-content; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.hotel-custom-detail .tip-info{ |
|||
width: 33rpx; |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
} |
|||
.hotel-custom-detail .tip-info .tip{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 23rpx; |
|||
color: #FFFFFF; |
|||
width: 33rpx; |
|||
height: 33rpx; |
|||
background: #6394FD; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
text-align: center; |
|||
line-height: 33rpx; |
|||
} |
|||
.hotel-custom-detail .tip-info .info{ |
|||
width: 11rpx; |
|||
height: 100%; |
|||
background: #D0DFFE; |
|||
border-radius: 5rpx; |
|||
} |
|||
|
|||
.hotel-custom-right>view{ |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.hotel-custom-right>view:last-of-type{ |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
|
|||
@ -1,17 +1,62 @@ |
|||
<!--pages/order/show/index.wxml--> |
|||
<title title="选择场次"></title> |
|||
<title title="选择票档"></title> |
|||
<view class="order-top" wx:if="{{product}}"> |
|||
<view class="order-name">{{product.title}}</view> |
|||
<view class="order-subtitle">{{product.subtitle}}</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view class="order-name box-title">场次</view> |
|||
<view wx:for="{{times}}" wx:for-item="date" wx:for-index="dateIndex"> |
|||
<view wx:for="{{date.screen}}" bindtap="selectTime" data-dateindex="{{dateIndex}}" data-timeindex="{{index}}" class="order-line-item{{item.is_ticket==0?' disable':''}}{{timeindex==index && dateIndex==dateindex?' active':''}}" ><text>{{date.sale_date}}</text><text>{{item.start_time}} ~ {{item.end_time}}</text> <view class="state">{{item.is_ticket==1?'有票':'售罄'}}</view></view> |
|||
<view class="box-content"> |
|||
<view class="box-title">选择日期</view> |
|||
<view class="flex-between"> |
|||
<view class="tag {{dateindex==0?'active':''}}" bindtap="changeDate" data-date="0">今天 {{dateArr[0].short_date}}</view> |
|||
<view class="tag {{dateindex==1?'active':''}}" bindtap="changeDate" data-date="1">明天 {{dateArr[1].short_date}}</view> |
|||
<view class="tag {{dateindex==2?'active':''}}" bindtap="changeDate" data-date="2">后天 {{dateArr[2].short_date}}</view> |
|||
<view class="tag">更多</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="box-content"> |
|||
<view class="box-title">场次</view> |
|||
<view class="flex-wrap flex-between"> |
|||
<view wx:for="{{times}}" date-item="{{item}}" class="tag {{dateindex==key?'active':''}} {{item.stock_number<=0?'disabled':''}}" |
|||
bindtap="changeTime" data-date="{{key}}"> |
|||
{{item.sale_date}} {{item.week}} {{item.start_time}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="box-content"> |
|||
<view class="box-title">票档</view> |
|||
<view class="sku-box"> |
|||
<view wx:for="{{times}}" date-item="{{item}}" class="tag {{dateindex==key?'active':''}} {{item.stock_number<=0?'disabled':''}}" |
|||
bindtap="changeSku" data-date="{{key}}"> |
|||
{{item.sale_date}} {{item.week}} {{item.start_time}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="number-box box-content"> |
|||
<text>数量</text> |
|||
<view class="iconfont icon-sami-select" bindtap="minus"></view> |
|||
<view class="number">{{producNum}}</view> |
|||
<view class="iconfont icon-add-select add" bindtap="add"></view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<view style="height:138rpx"></view> |
|||
<view class="fixed-bottom"> |
|||
<view class="fixed-btn" bindtap="next">下一步</view> |
|||
<view>总价:<text class="bottom-price">¥560.00</text></view> |
|||
<view class="btns"> |
|||
<view class="btn" bindtap="showCart">加入购物车</view> |
|||
<view class="btn" bindtap="showOrder" >立即购买</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 购物车悬浮框 --> |
|||
<navigator url="/pages/user/cartlist/list" catchtap="pagePoint" data-event='product_cart_click' class="cart-box" id="cart"> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/cart.png" mode="widthFix"></image> |
|||
<view class="cart-num">{{cartCount}}</view> |
|||
</navigator> |
|||
@ -1,92 +1,203 @@ |
|||
/* pages/order/show/index.wxss */ |
|||
page { |
|||
background: #f6f6f6; |
|||
background: white; |
|||
} |
|||
.order-top { |
|||
border-bottom: 1rpx solid #ccc; |
|||
padding: 30rpx 47rpx; |
|||
|
|||
} |
|||
.order-name { |
|||
font-weight: 500; |
|||
color: #000; |
|||
font-size: 33rpx; |
|||
} |
|||
.order-subtitle { |
|||
margin-top: 20rpx; |
|||
font-size: 27rpx; |
|||
color: #666; |
|||
background: #E6F3F3; |
|||
width: 100%; |
|||
padding: 26rpx 32rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #111111; |
|||
} |
|||
|
|||
.box { |
|||
margin: 30rpx 25rpx; |
|||
background: white; |
|||
border-radius: 9rpx; |
|||
padding-bottom: 30rpx; |
|||
padding: 48rpx 26rpx; |
|||
} |
|||
.box-title { |
|||
line-height: 113rpx; |
|||
border-bottom: 1rpx solid #ccc; |
|||
padding: 0 20rpx; |
|||
|
|||
.box-content{ |
|||
margin-bottom: 50rpx; |
|||
width: 100%; |
|||
} |
|||
.order-line-item { |
|||
margin: 0 20rpx; |
|||
|
|||
.box-title{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #333333; |
|||
margin-bottom: 38rpx; |
|||
} |
|||
.flex-between{ |
|||
display: flex; |
|||
align-items: center; |
|||
border: 1rpx solid #333; |
|||
border-radius: 10rpx; |
|||
margin-top: 30rpx; |
|||
font-size: 27rpx; |
|||
padding: 0 22rpx; |
|||
line-height: 70rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.order-line-item text { |
|||
margin-right: 15rpx; |
|||
justify-content: space-between; |
|||
} |
|||
.order-line-item .state { |
|||
width: 78rpx; |
|||
line-height: 34rpx; |
|||
border: 1rpx solid; |
|||
border-radius: 17rpx; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
color: #D62828; |
|||
.flex-wrap{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.order-line-item.disable .state { |
|||
color: #666; |
|||
border-color: #ccc; |
|||
.sku-box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.order-line-item.disable { |
|||
color: #666666; |
|||
.sku-box .tag{ |
|||
width: fit-content; |
|||
} |
|||
.order-line-item.active .state { |
|||
color: #fff; |
|||
.tag{ |
|||
padding: 0rpx 19rpx; |
|||
border: 1px solid #999999; |
|||
height: 67rpx; |
|||
line-height: 67rpx; |
|||
text-align: center; |
|||
border-radius: 13rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #333333; |
|||
margin-bottom: 17rpx; |
|||
} |
|||
.order-line-item.active { |
|||
|
|||
.tag.active{ |
|||
background: #0B898E; |
|||
border-color: #0B898E; |
|||
color: #fff; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.tag.disabled{ |
|||
background: #CCCCCC; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.number-box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.number-box text { |
|||
flex: 1; |
|||
font-size: 35rpx; |
|||
color: #333; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.number-box view { |
|||
border: 1rpx solid #999999; |
|||
border-radius: 10rpx; |
|||
text-align: center; |
|||
width: 67rpx; |
|||
line-height: 67rpx; |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.number-box view.disable { |
|||
border-color: #ccc; |
|||
color: #999; |
|||
} |
|||
|
|||
.number-box view.number { |
|||
width: 80rpx; |
|||
margin: 0 10rpx; |
|||
border: none; |
|||
} |
|||
.number-box .add{ |
|||
background: #0B898E; |
|||
border-radius: 10rpx; |
|||
border: none; |
|||
color: white; |
|||
} |
|||
|
|||
|
|||
.fixed-bottom { |
|||
height: 138rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
justify-content: space-between; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
padding:0 26rpx; |
|||
color: #333333; |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
} |
|||
.fixed-btn { |
|||
width: 657rpx; |
|||
line-height: 78rpx; |
|||
background: #D62828; |
|||
border-radius: 39rpx; |
|||
|
|||
|
|||
/* 购物车 */ |
|||
.cart-box { |
|||
position: fixed; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2); |
|||
border-radius: 50%; |
|||
right: 20rpx; |
|||
bottom: 166rpx; |
|||
} |
|||
|
|||
.cart-box image { |
|||
display: block; |
|||
width: 49rpx; |
|||
} |
|||
|
|||
.cart-num { |
|||
width: 26rpx; |
|||
border: 1rpx solid; |
|||
border-radius: 50%; |
|||
line-height: 26rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 33rpx; |
|||
font-weight: 500; |
|||
} |
|||
font-size: 23rpx; |
|||
color: #D20000; |
|||
position: absolute; |
|||
right: -2rpx; |
|||
top: -5rpx; |
|||
} |
|||
|
|||
.btns { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 39rpx; |
|||
border: 1px solid #D62828; |
|||
color: #D62828; |
|||
} |
|||
|
|||
.btns .btn { |
|||
width: 200rpx; |
|||
height: 73rpx; |
|||
line-height: 73rpx; |
|||
background: #D62828; |
|||
} |
|||
|
|||
.btns .btn:nth-child(1) { |
|||
border-radius: 39rpx 0 0 39rpx; |
|||
background: white; |
|||
|
|||
} |
|||
|
|||
.btns .btn:nth-child(2) { |
|||
border-radius: 0 39rpx 39rpx 0; |
|||
color: white; |
|||
} |
|||
|
|||
.btns .btn.disable { |
|||
background: #ccc; |
|||
} |
|||
|
|||
.bottom-price{ |
|||
color: #D62828; |
|||
font-size: 36rpx; |
|||
} |
|||
Loading…
Reference in new issue