2025-06-19 17:33:18 +08:00

431 lines
8.3 KiB
Plaintext

.container {
height: 100vh;
padding-top: 2px;
box-sizing: border-box;
background: #EFF1F4;
position: relative;
.row {
margin-bottom: 8px;
display: flex;
justify-content: space-between;
.label {
color: #858CA0;
font-size: 14px;
}
.val {
color: #2E3A4F;
font-size: 14px;
}
}
.repair {
width: 100%;
.row {
width: 100%;
height: 36px;
padding: 8px 10px;
margin-bottom: 8px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #E6EAF2;
display: flex;
align-items: center;
.icon {
width: 20px;
height: 20px;
margin-right: 8px;
image {
width: 100%;
height: 100%;
}
}
input {
flex: 1;
font-size: 14px;
}
}
}
.item-container {
height: calc(100vh - 72px);
max-height: calc(100vh - 72px);
overflow-y: auto;
// background-color: #bfa;
.item {
padding: 12px 10px;
background: #fff;
position: relative;
&:not(:last-child) {
margin-bottom: 8px;
}
.require {
&::after {
content: '*';
width: 6px;
height: 100%;
color: red;
margin-left: 8px;
display: inline-block;
}
}
.title {
font-size: 14px;
font-weight: bold;
color: #333F53;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
width: 4px;
height: 22px;
background: linear-gradient(180deg, #4E87FC 0%, #38B1FE 100%);
border-radius: 2px;
margin-right: 8px;
}
}
.car-info {
width: calc(100% - 16px);
background: #ECEFF5;
border-radius: 4px;
padding: 8px 8px 4px;
margin-top: 8px;
.paroject-select {
display: flex;
justify-content: space-between;
.select-row {
width: calc(50% - 4px);
height: 36px;
padding: 8px 10px;
margin-bottom: 8px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #E6EAF2;
display: flex;
align-items: center;
background-color: #fff;
&::before {
content: '*';
width: 6px;
height: 100%;
color: red;
margin-right: 8px;
display: inline-block;
}
picker {
width: 100%;
position: relative;
.picker {
width: 100%;
height: 38px;
box-sizing: border-box;
border-radius: 4px;
font-size: 14px;
display: flex;
align-items: center;
}
.picker::after {
content: '';
width: 0;
height: 0;
border-top: 6px solid #636B83;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-2px);
}
}
}
}
}
.classify-select {
width: 100%;
display: flex;
flex-wrap: wrap;
.classify-button {
width: 30%;
height: 36px;
margin-right: 8px;
margin-top: 8px;
border-radius: 4px;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
.classify-button-select {
background: #E9F2FF;
border: 1px solid #24A2FE;
}
.classify-button-notSelect {
background: #FFFFFF;
border: 1px solid #E6EAF2;
}
}
.weui-input {
border-radius: 8px;
border: 1px solid #E6EAF2;
width: calc(100% - 16px);
height: 83px;
padding: 8px;
margin-top: 8px;
}
.picker view:first-child {
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
}
.select-row {
&::before {
content: '*';
width: 6px;
height: 100%;
color: red;
margin-right: 8px;
display: inline-block;
}
}
}
.bottom {
width: 100%;
padding: 10px 8px 14px;
background: #fff;
box-sizing: border-box;
border-radius: 8px 8px 0 0;
box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 0;
left: 0;
.row {
width: 100%;
height: 36px;
padding: 8px 10px;
margin-bottom: 8px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #E6EAF2;
display: flex;
align-items: center;
.icon {
width: 20px;
height: 20px;
margin-right: 8px;
image {
width: 100%;
height: 100%;
}
}
input {
flex: 1;
font-size: 14px;
}
}
.select-row {
// width: calc((100% - 6px) / 2);
picker {
width: 100%;
position: relative;
.picker {
width: 100%;
height: 38px;
// padding-left: 14px;
box-sizing: border-box;
// border: 1px solid #E6EAF2;
border-radius: 4px;
font-size: 14px;
display: flex;
// justify-content: space-between;
align-items: center;
}
.picker::after {
content: '';
width: 0;
height: 0;
border-top: 6px solid #636B83;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-2px);
}
}
}
.btn-box {
width: 100%;
display: flex;
justify-content: space-between;
.btn {
width: 100%;
height: 40px;
background-color: #FFFFFF;
line-height: 40px;
border-radius: 8px;
color: #2E3A4F;
text-align: center;
border: 1px solid #D6D6D6;
}
.apply {
background: linear-gradient(90deg, #3B7CFC 0%, #548BFC 100%);
color: #2E3A4F;
color: #fff;
font-size: 15px;
font-weight: bold;
}
}
}
.input-content {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
.input-label {
// width: 17%;
color: #2F3B50;
font-size: 14px;
}
.input {
margin-right: 8px;
display: flex;
align-items: center;
.icon {
width: 20px;
height: 20px;
margin-right: 8px;
image {
width: 100%;
height: 100%;
}
}
}
}
.searchBox {
position: absolute;
width: 100%;
left: 0;
top: 80rpx;
z-index: 63;
}
.arrow {
width: 0;
height: 0;
border-left: 11rpx solid transparent;
border-right: 11rpx solid transparent;
border-top: 13rpx solid #636B83;
margin-left: 18rpx;
}
.delete {
width: 12px;
height: 12px;
margin-left: 8px;
}
.requireItem {
&::before {
content: '*';
width: 6px;
height: 100%;
color: red;
margin-right: 4px;
display: inline-block;
}
}
.picker {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.upload {
padding: 12px 0;
}
.echoFile {
display: flex;
flex-wrap: wrap;
}
.photo-list {
width: 64px;
height: 64px;
margin-left: 8px;
border-radius: 4px;
position: relative;
margin-top: 8px;
image {
width: 100%;
height: 100%;
display: block;
}
.del {
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
image {
width: 100%;
height: 100%;
display: block;
}
}
}
}