小程序 手寫 規格 彈框

<!--規格-->

<view wx:if="{{spec_modal}}" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.65);z-index:999998">

</view>

<view wx:if="{{spec_modal}}" style="position:fixed;left:50%;top:50%;width:80%;transform:translate(-50%,-50%);min-height:100rpx;background:white;border-radius:10rpx;z-index:999999;box-sizing:border-box;">

<view style="padding:40rpx 20rpx;width:100%;">

<view style="position:absolute;top:20rpx;right:20rpx;">

<icon type="clear" size="30" color="grey" bindtap="closeModal" />

</view>

<view style="text-align:center;margin-bottom:20rpx;"><text style="font-size:36rpx;color:black;">商品名稱</text></view>

<view style="margin-bottom:20rpx;" wx:for="{{specs}}">

<text style="font-size:28rpx;">{{item.title}}</text>

<view>

<text wx:for="{{specs2}}" wx:for-item="spec" bindtap="setSpecActive" class="spec-button {{spec_active == spec.id ? 'spec-button-active' : ''}}" data-id="{{spec.id}}">{{spec.title}}</text>

</view>

</view>

</view>

<view style="width:100%;background:#deeede;padding:20rpx;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;">

<text>￥20</text>

<button data-id="{{spec_active}}" bindtap="addToCart" style="background:orange;color:black;border-radius:20rpx;margin:0;" size="mini" disabled="{{!spec_active}}">+加入購物車</button>

</view>

</view>