.bg { position: relative; width: 100%; min-height: 100%; background-color: #ffffff; } .topbox{ padding: 25rpx 0; } .add-button{ margin: 15rpx; background: #eab86a; padding: 15rpx; text-align: center; color: #fff; border-radius: 15rpx; width: calc(70% - 30rpx); display: inline-block; vertical-align: middle; } .scan-button{ width: 33%; display: inline-block; text-align: center; font-size: 30rpx; color: #eab86a; vertical-align: middle; } .scan-button .image{ width: 60rpx; height: 60rpx; display: inline-block; } .scan-button .text{ display: block; } .list-title{ font-size: 24rpx; margin: 25rpx; color: #999; text-align: left; } .order-list{} .time-box{ background: #eee; font-size: 28rpx; padding: 5rpx 25rpx; color: #666; } .order-card{ margin: 15rpx; padding: 25rpx; background: #eab86a; color: #fff; overflow: hidden; border-radius: 10rpx; position: relative; } .order-card.unuse{ background: #ececec; color: #999; } .order-card.unuse::after{ content:'失效'; font-size: 50rpx; position: absolute; right: 10%; top: 0; transform: rotate(-25deg)translateY(35rpx); padding: 0 30rpx; border: 1px dashed; } .order-card.isuse{ background: #ececec; color: #999; } .order-card.isuse::after{ content:'已使用'; font-size: 50rpx; position: absolute; right: 10%; top: 0; transform: rotate(-25deg)translateY(35rpx); padding: 0 30rpx; border: 1px dashed; } .order-card .title{ font-size: 40rpx; } .order-card .info{ float: left; font-size: 24rpx; } .order-card .num{ float: right; font-size: 24rpx; } .order-card .num .del{ margin-left: 10rpx; color: #3F51B5; text-decoration: underline; display: inline; } /* 遮罩层样式 */ .modalmask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); /* 半透明黑色背景 */ display: flex; justify-content: center; align-items: center; z-index: 999; /* 确保弹出框位于顶层 */ } /* 弹出框样式 */ .modal { background: #fff; border-radius: 5px; padding: 20px; width: 75%; text-align: center; } /* 弹出框标题样式 */ .modal-title { font-size: 38rpx; font-weight: bold; margin-bottom: 10px; } /* 弹出框内容样式 */ .modal-content { font-size: 32rpx; margin-bottom: 20px; } /* 弹出框按钮样式 */ .modal-cancel, .modal-confirm { display: inline-block; padding: 10px 20px; margin: 0 10px; border: 1px solid #eab86a; border-radius: 5px; background: #eab86a; color: #fff; text-align: center; cursor: pointer; font-size: 30rpx; } .modal-cancel{ border: 1px solid #999; background: #999; } .modal-tool{ overflow: hidden; margin-bottom: 25px; } .ctorder-numbox{ display: inline-block; vertical-align: middle; } .cartlist_num{float: right;} .cartlist_num button{ width: 50rpx; height: 50rpx; line-height: 40rpx; text-align: center; display: inline-block; border: 1px solid #ddd; border-radius: 50%; } .cartlist_num button.mius{ border:1px solid #eab86a; color:#eab86a; } .cartlist_num button.add{ background: #eab86a; color: #FFF; border: 0; line-height: 45rpx; } .cartlist_num input{ width: 50rpx; height: 40rpx; text-align: center; display: inline-block; border-left: 0; border-right: 0; font-size: 40rpx; margin: 0 10rpx; }