oak-pay-business/es/components/pay/detail/index.less

199 lines
4.0 KiB
Plaintext

@import '../../../config/styles/mp/mixins.less';
@import '../../../config/styles/mp/index.less';
.container {
display: flex;
align-items: stretch;
flex-direction: column;
height: 100%;
padding: 24rpx;
box-sizing: border-box;
.safe-area-inset-bottom();
.info {
background-color: @oak-bg-color-container;
border-radius: 20rpx;
padding: 30rpx;
.title-bar-wrapper {
width: 100%;
.title-bar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 28rpx 0;
.title {
font-weight: bold;
font-size: larger;
}
}
}
.title-bar-wrapper::after {
content: '';
height: 1px;
display: block;
margin: 0 auto;
width: 100%;
border-bottom: 0.1px solid rgba(0, 0, 0, 0.09);
border-bottom-width: 80%;
}
}
}
.meta {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
.qrCodeTips {
margin-top: 28px;
}
.counter {
font-size: var(--oak-font-size-headline-medium);
font-weight: bolder;
}
.qrCode:hover {
cursor: pointer;
}
}
.wariningAlert {
background: #fff2f0;
border: 2rpx solid #ffccc7;
padding: 12rpx 16rpx;
display: flex;
align-items: center;
word-wrap: break-word;
border-radius: 10rpx;
}
.infoAlert {
background: #e6f4ff;
border: 2rpx solid #91caff;
padding: 12rpx 16rpx;
display: flex;
align-items: center;
word-wrap: break-word;
border-radius: 10rpx;
}
.notSameApp {
margin: 40rpx 0;
border-radius: 20rpx;
padding: 22rpx;
background-color: @oak-color-warning;
color: @oak-color-primary;
display: flex;
flex-direction: row;
.tips {
margin-left: 16rpx;
text-wrap: wrap;
}
}
.defaultBtn {
color: #333;
border: 2rpx solid #eee;
padding: 12rpx 16rpx;
border-radius: 8rpx;
background-color: #fff;
}
// .offline {
// .tips {
// margin: 40rpx 0;
// border-radius: 20rpx;
// padding: 22rpx;
// background-color: @oak-color-info
// }
// .info {
// margin: 40rpx 0;
// border-radius: 20rpx;
// padding: 22rpx;
// .list {
// .left {
// width: 200rpx;
// }
// .right {
// margin-left: 24rpx;
// flex: 1;
// .tips2 {
// flex: 1;
// word-break: break-all;
// text-decoration: underline;
// }
// .offline-option {
// margin-left: 12rpx;
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// l-tag {
// margin-left: 6rpx;
// }
// .selected {
// background: #333 !important;
// color: #fff !important;
// }
// }
// .textarea {
// min-width: 400rpx;
// margin: 18rpx 0;
// }
// }
// }
// }
// }
.paid {
display: flex;
flex-direction: column;
align-items: center;
padding: 24rpx;
margin-top: 90rpx;
text {
margin-top: 40rpx;
font-weight: bold;
color: green;
font-size: xx-large;
}
}
.my-panel-class {
padding: 40rpx;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: #fff;
overflow-y: auto;
.safe-area-inset-bottom();
}
.padding {
flex: 1;
}
.btn {
padding: 16rpx;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32rpx;
}