wanyu_frontend/static/css/form.scss
2025-03-25 21:39:49 +08:00

405 lines
9.3 KiB
SCSS

.form-area {
margin-top: 20rpx;
width: 100%;
padding: 20rpx 40rpx;
box-sizing: border-box;
background: var(--blockBgColor);
border-radius: 16rpx;
.form-area-title {
width: 100%;
height: 60rpx;
font-size: 34rpx;
color: var(--contentColor50);
line-height: 60rpx;
text-align: left;
margin-bottom: 20rpx;
}
.uni-forms-item {
margin-bottom: 0 !important;
.uni-forms-item__content {
width: 100%;
}
}
.input-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
margin-bottom: 20rpx;
.title {
width: 100%;
height: 60rpx;
font-weight: 500;
font-size: 30rpx;
color: var(--contentColor90);
line-height: 60rpx;
text-align: left;
.left {
height: 100%;
width: 300rpx;
}
.right {
width: 300rpx;
height: 100%;
//添加项目
.add-project {
width: 140rpx;
height: 60rpx;
background: var(--themeColor10);
border-radius: 8rpx;
font-weight: 500;
font-size: 24rpx;
color: var(--themeColor);
}
.setting {
width: 140rpx;
height: 100%;
font-size: 28rpx;
font-weight: 400;
}
}
}
.required::before {
content: '*';
font-weight: 500;
font-size: 32rpx;
color: #E6521F;
left: -24rpx;
position: absolute;
}
.value {
width: 100%;
min-height: 100rpx;
.input-textarea {
height: 120rpx;
padding: 20rpx 0;
font-size: 30rpx;
color: var(--contentColor90);
line-height: 40rpx;
width: 100%;
}
.mixed-payment-items {
width: 100%;
margin-bottom: 20rpx;
animation: animation-fade-out 0.3s ease-out 0s 1;
.item {
width: 100%;
.icon {
width: 56rpx;
height: 80rpx;
}
.content {
width: 558rpx;
height: 80rpx;
.title {
width: 202rpx;
height: 80rpx;
font-size: 30rpx;
color: var(--contentColor90);
line-height: 80rpx;
text-align: left;
font-weight: 400;
.help {
width: 50rpx;
height: 80rpx;
}
}
.detail {
width: 372rpx;
height: 80rpx;
font-size: 28rpx;
color: var(--contentColor90);
line-height: 56rpx;
.price {
width: 160rpx;
height: 56rpx;
background: var(--contentColor05);
border-radius: 8rpx;
.unit {
width: 40rpx;
height: 56rpx;
text-align: center;
}
.val {
width: 120rpx;
height: 56rpx;
.uni-input {
width: 100%;
min-height: 56rpx;
text-align: center;
padding: 0 8rpx;
box-sizing: border-box;
}
}
}
}
}
}
}
.uni-input {
width: 100%;
min-height: 100rpx;
font-size: 30rpx;
color: var(--contentColor90);
line-height: 100rpx;
text-align: left;
}
.item-image {
margin-top: 20rpx;
margin-bottom: 24rpx;
.empty-image {
width: 630rpx;
height: 384rpx;
border-radius: 40rpx;
border: 1rpx solid var(--contentColor10);
box-sizing: border-box;
.upload-image {
width: 120rpx;
height: 128rpx;
.icon {
width: 100%;
height: 80rpx;
}
.upload-text {
width: 100%;
height: 48rpx;
font-size: 30rpx;
color: var(--contentColor30);
line-height: 48rpx;
text-align: center;
}
}
}
.image-container {
width: 630rpx;
height: 384rpx;
.image {
height: 100%;
width: 100%;
border-radius: 40rpx;
}
}
}
.select-project {
.empty-project {
animation: animation-fade-out 0.3s ease-out 0s 1;
.input-or-select {
width: 100%;
height: 100rpx;
.input-area {
height: 100%;
width: 100%;
}
}
}
.project-list {
margin-top: 16rpx;
margin-bottom: 16rpx;
.project {
width: 100%;
min-height: 80rpx;
.name {
min-height: 80rpx;
width: 314rpx;
font-size: 30rpx;
color: var(--contentColor90);
line-height: 48rpx;
text-align: left;
}
.other {
height: 100%;
width: 316rpx;
.price,.balance {
width: 110rpx;
height: 48rpx;
}
.price {
border-bottom: 1rpx solid var(--themeColor);
.uni-input {
width: 100%;
height: 48rpx;
font-size: 28rpx;
color: var(--themeColor);
line-height: 48rpx;
text-align: center;
min-height: 48rpx;
}
}
.balance {
font-size: 24rpx;
color: var(--contentColor50);
line-height: 48rpx;
text-align: center;
}
.num-area {
height: 100%;
width: 176rpx;
.reduce,.add {
width: 48rpx;
height: 48rpx;
}
.num {
width: 80rpx;
height: 100%;
font-weight: 500;
font-size: 28rpx;
color: var(--contentColor90);
line-height: 80rpx;
text-align: center;
}
}
}
}
}
}
.val-area {
height: 100%;
width: 350rpx;
font-size: 30rpx;
line-height: 100rpx;
text-align: left;
}
.val-hint {
height: 100%;
width: 280rpx;
.hint {
height: 100%;
width: 224rpx;
font-size: 28rpx;
color: var(--contentColor50);
line-height: 100rpx;
text-align: right;
}
}
.unit {
width: 280rpx;
font-size: 30rpx;
height: 100rpx;
color: var(--contentColor90);
text-align: right;
line-height: 100rpx;
}
//区间筛选
.section-value {
width: 100%;
height: 100rpx;
.min,.max {
width: 280rpx;
height: 100rpx;
font-size: 30rpx;
color: var(--contentColor90);
line-height: 100rpx;
text-align: left;
}
.parting {
width: 70rpx;
height: 100rpx;
font-size: 30rpx;
color: var(--contentColor50);
line-height: 100rpx;
text-align: center;
}
.max {
text-align: right;
.uni-input {
text-align: right;
}
}
}
}
.desc {
width: 100%;
height: 60rpx;
text-align: left;
font-size: 28rpx;
color: var(--contentColor30);
}
}
.input-item-switch {
width: 100%;
min-height: 120rpx;
position: relative;
.content-area {
margin-bottom: 20rpx;
}
.left {
height: 100%;
.title {
font-weight: 500;
font-size: 30rpx;
color: var(--contentColor90);
line-height: 120rpx;
text-align: left;
}
.help {
width: 56rpx;
height: 56rpx;
}
.title-area {
width: 460rpx;
height: 120rpx;
.title-val {
height: 60rpx;
line-height: 60rpx;
width: 100%;
}
.desc {
height: 48rpx;
font-size: 28rpx;
color: var(--contentColor30);
line-height: 48rpx;
text-align: left;
width: 100%;
}
}
}
.right {
width: 140rpx;
height: 100%;
position: absolute;
right: -12rpx;
}
}
.input-avatar {
.avatar {
width: 100%;
height: 100rpx;
margin-bottom: 20rpx;
.desc {
width: 500rpx;
height: 100%;
font-size: 30rpx;
color: var(--contentColor30);
line-height: 100rpx;
text-align: left;
}
.store-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
}
}
}
.input-select {
.value {
width: 100%;
height: 100rpx;
.val {
width: 566rpx;
height: 100%;
font-size: 30rpx;
line-height: 100rpx;
text-align: left;
}
}
}
}