Commit 57acef2a by 高淑倩

add: 关联商品弹框_输入框

parent b3526761
<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup" />
<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
<view class="modal-content{{show ? ' active' : ''}}"> <view class="modal-content{{show ? ' active' : ''}}">
<view class="modal-header"> <view class="modal-header">
<image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix"></image> <image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix" />
<text class="modal-title">选择优惠券</text> <text class="modal-title">选择订单商品</text>
<image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/close.png" bindtap="hidePopup"></image> <image
class="modal-close"
mode="widthFix"
src="/assets/imgs/7_1_0/close.png"
bindtap="hidePopup"
/>
</view> </view>
<view class="modal-info"> <view class="modal-info">
<view class="order-input weui-flex weui-progress">
<input class="order-name border_box" placeholder=" 请输入商品名称" auto-focus />
<text class="order-search">搜索</text>
</view>
<view class="coupon-list" bindtap="selectCoupon"> <view class="coupon-list" bindtap="selectCoupon">
<image wx:if="{{false}}" class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
<image class="coupon-bg" src="/assets/imgs/7_1_0/disabled-coupon.png" mode="widthFix"></image> <image
wx:if="{{false}}"
class="coupon-bg"
src="/assets/imgs/7_1_0/coupon-bg.png"
mode="widthFix"
/>
<image class="coupon-bg" src="/assets/imgs/7_1_0/disabled-coupon.png" mode="widthFix" />
<view class="coupon-info"> <view class="coupon-info">
<view class="left-price"> <view class="left-price">
<view class="top-price"> <view class="top-price">
...@@ -30,17 +45,24 @@ ...@@ -30,17 +45,24 @@
</view> </view>
<view class="select-radio"> <view class="select-radio">
<view class="{{isSelect ? 'theme-color' : ''}} coupon-radio" > <view class="{{isSelect ? 'theme-color' : ''}} coupon-radio">
<image wx:if="{{isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image> <image
wx:if="{{isSelect}}"
class="tick-success"
src="/assets/imgs/7_1_0/tick-success.png"
mode="widthFix"
/>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="empty-coupon"> <view class="empty-coupon">
暂无可用优惠券 暂无订单
</view> </view>
</view> </view>
<view class="post-notes fixed-bottom0">确认添加</view>
</view> </view>
/* component/selectRelatedGoods/selectRelatedGoods.wxss */ /* component/selectRelatedGoods/selectRelatedGoods.wxss */
@import "/app.wxss"; @import '/app.wxss';
@import './../../base/base.wxss';
.order-input {
height: 112rpx;
line-height: 112rpx;
background-color: rgba(246, 246, 246, 1);
}
.order-name {
width: 550rpx;
height: 60rpx;
border-radius: 5rpx;
margin: 0 20rpx;
background-color: rgba(255, 255, 255, 1);
}
.order-search {
width: 122rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 5rpx;
background-color: rgba(203, 60, 60, 1);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: left;
font-family: PingFangSC-Regular;
text-align: center;
}
.modal-container { .modal-container {
position: fixed; position: fixed;
width: 100%; width: 100%;
...@@ -12,13 +37,23 @@ ...@@ -12,13 +37,23 @@
transition: opacity 200ms; transition: opacity 200ms;
z-index: 98; z-index: 98;
} }
.post-notes {
text-align: center;
height: 88rpx;
line-height: 88rpx;
background-color: rgba(203, 60, 60, 1);
color: rgba(255, 255, 255, 1);
font-size: 25rpx;
font-family: PingFangSC-Medium;
}
.modal-container.active { .modal-container.active {
opacity: 1; opacity: 1;
transform: translateY(0); } transform: translateY(0);
}
.modal-content.active { .modal-content.active {
transform: translateY(0); } transform: translateY(0);
}
.modal-content { .modal-content {
position: fixed; position: fixed;
...@@ -30,88 +65,89 @@ ...@@ -30,88 +65,89 @@
transition: transform 300ms; transition: transform 300ms;
transform: translateY(100%); transform: translateY(100%);
height: 1000rpx; height: 1000rpx;
} }
.modal-content .modal-close { .modal-content .modal-close {
position: absolute; position: absolute;
right: 24rpx; right: 24rpx;
top: 35rpx; top: 35rpx;
width: 25rpx; width: 25rpx;
} }
.modal-to-back{ .modal-to-back {
width: 18rpx; width: 18rpx;
position: absolute; position: absolute;
left: 24rpx; left: 24rpx;
top: 35rpx; top: 35rpx;
transform: rotate(180deg); transform: rotate(180deg);
} }
.modal-title{ .modal-title {
color: #333333; color: #333333;
font-size: 32rpx; font-size: 32rpx;
position: absolute; position: absolute;
left: 295rpx; left: 295rpx;
top: 28rpx; top: 28rpx;
} }
.coupon-list{ .coupon-list {
width: 702rpx; width: 702rpx;
height: 174rpx; height: 174rpx;
position: relative; position: relative;
margin-bottom: 25rpx; margin-bottom: 25rpx;
} }
.coupon-bg{ .coupon-bg {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.modal-info{ .modal-info {
padding: 0 24rpx; padding: 0 24rpx;
margin-top: 95rpx; margin-top: 95rpx;
} }
.left-price,.right-info{ .left-price,
.right-info {
display: inline-block; display: inline-block;
} }
.left-price{ .left-price {
font-size: 18rpx; font-size: 18rpx;
color:#CB3C3C; color: #cb3c3c;
position: absolute; position: absolute;
top: 36rpx; top: 36rpx;
left: 48rpx; left: 48rpx;
} }
.amount{ .amount {
font-size: 54rpx; font-size: 54rpx;
} }
.right-info{ .right-info {
position: absolute; position: absolute;
top: 33rpx; top: 33rpx;
left: 205rpx; left: 205rpx;
} }
.coupon-title{ .coupon-title {
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
} }
.coupon-time{ .coupon-time {
color: #aaaaaa; color: #aaaaaa;
font-size: 20rpx; font-size: 20rpx;
} }
.coupon-desc{ .coupon-desc {
color: #aaaaaa; color: #aaaaaa;
font-size: 22rpx; font-size: 22rpx;
margin-top: 12rpx; margin-top: 12rpx;
} }
.modal-info{ .modal-info {
max-height: 900rpx; max-height: 900rpx;
overflow: scroll; overflow: scroll;
} }
.empty-coupon{ .empty-coupon {
width: 100%; width: 100%;
color: #aaaaaa; color: #aaaaaa;
margin-top:211rpx ; margin-top: 211rpx;
text-align: center; text-align: center;
} }
.coupon-radio{ .coupon-radio {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
border-radius: 50%; border-radius: 50%;
...@@ -119,14 +155,14 @@ ...@@ -119,14 +155,14 @@
line-height: 26rpx; line-height: 26rpx;
text-align: center; text-align: center;
} }
.tick-success{ .tick-success {
width: 18rpx; width: 18rpx;
} }
.select-radio{ .select-radio {
position: absolute; position: absolute;
top: 71rpx; top: 71rpx;
right: 30rpx; right: 30rpx;
} }
.theme-color{ .theme-color {
border: none; border: none;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment