储运页面
wangyunfei
4 weeks ago
parent
1e278bbae6
commit
8dec135a70
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
@ -1,81 +1,480 @@
|
|||||||
@panel-border: #bfe3e3;
|
@section-border: rgba(118, 194, 181, 1);
|
||||||
@panel-bg: #f6fbfb;
|
@section-bg: rgba(243, 249, 248, 1);
|
||||||
|
|
||||||
.container {
|
.phycontainer {
|
||||||
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
// 顶部区域 - 基本信息
|
||||||
|
.topSection {
|
||||||
|
flex: 0 0 40%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 5px 15px 0 15px;
|
||||||
|
border: 1px solid @section-border;
|
||||||
|
background: @section-bg;
|
||||||
|
padding: 12px 20px;
|
||||||
|
|
||||||
|
// 区域头部
|
||||||
|
.sectionHeader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
|
||||||
|
// 装饰条
|
||||||
|
.sectionBar {
|
||||||
|
width: 2px;
|
||||||
|
height: 16px;
|
||||||
|
background: rgba(0, 102, 101, 1);
|
||||||
|
border-radius: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
// 标题
|
||||||
margin-bottom: 16px;
|
.sectionTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 顶部内容区域
|
||||||
|
.topContent {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
// 基本信息表单
|
||||||
|
.basicForm {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
gap: 32px;
|
||||||
|
|
||||||
|
// 所有表单输入框边框颜色
|
||||||
|
:global {
|
||||||
|
|
||||||
|
// Input 输入框
|
||||||
|
.ant-input {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select 下拉选择框
|
||||||
|
.ant-select-selector {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select:hover .ant-select-selector {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select-focused .ant-select-selector {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TextArea 文本域
|
||||||
|
.ant-input-textarea {
|
||||||
|
.ant-input {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单块A和B - 左右平分
|
||||||
|
.formBlockA,
|
||||||
|
.formBlockB {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
// 块标题
|
||||||
.blockTitle {
|
.blockTitle {
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 450;
|
||||||
color: #2f4f4f;
|
color: #333;
|
||||||
margin-bottom: 12px;
|
min-height: 22px; // 占位高度，与有文字时的高度一致
|
||||||
|
// margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
// 表单行
|
||||||
border: 1px solid @panel-border;
|
.formRow {
|
||||||
background: @panel-bg;
|
display: flex;
|
||||||
border-radius: 6px;
|
gap: 24px;
|
||||||
padding: 12px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-form-item) {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 180px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 带操作按钮的表单行
|
||||||
|
.formRowWithActions {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.tenBoilingPointItem {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 180px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formActions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
// 保存修改按钮（主按钮）
|
||||||
|
:global(.ant-btn-primary) {
|
||||||
|
background-color: rgba(4, 95, 94, 0.5) !important;
|
||||||
|
border-color: rgba(0, 143, 142, 1) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(4, 95, 94, 0.7) !important;
|
||||||
|
border-color: rgba(0, 143, 142, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: rgba(4, 95, 94, 0.5) !important;
|
||||||
|
border-color: rgba(0, 143, 142, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消按钮（非主按钮）
|
||||||
|
:global(.ant-btn:not(.ant-btn-primary)) {
|
||||||
|
background-color: rgba(183, 229, 213, 0.2) !important;
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
border-image-source: conic-gradient(
|
||||||
|
from 102.75deg at 50% 52.91%,
|
||||||
|
rgba(249, 249, 249, 0.5) -32.95deg,
|
||||||
|
rgba(140, 160, 156, 0.5) 10.52deg,
|
||||||
|
rgba(140, 160, 156, 0.35) 32.12deg,
|
||||||
|
rgba(255, 255, 255, 0.5) 60.28deg,
|
||||||
|
rgba(255, 255, 255, 0.5) 107.79deg,
|
||||||
|
rgba(140, 160, 156, 0.35) 187.59deg,
|
||||||
|
#F9F9F9 207.58deg,
|
||||||
|
rgba(255, 255, 255, 0.5) 287.31deg,
|
||||||
|
rgba(249, 249, 249, 0.5) 327.05deg,
|
||||||
|
rgba(140, 160, 156, 0.5) 370.52deg
|
||||||
|
) !important;
|
||||||
|
border-image-slice: 1 !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(183, 229, 213, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formGrid {
|
&:focus {
|
||||||
display: grid;
|
background-color: rgba(183, 229, 213, 0.2) !important;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
}
|
||||||
grid-column-gap: 16px;
|
}
|
||||||
grid-row-gap: 12px;
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.formItem {
|
// 表单左侧（保留原有样式，以防其他地方使用）
|
||||||
|
.formLeft {
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
// 表单行
|
||||||
|
.formRow {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
:global(.ant-form-item) {
|
||||||
color: #666;
|
flex: 1;
|
||||||
font-size: 12px;
|
margin-bottom: 0;
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单右侧
|
||||||
|
.formRight {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
// 描述输入项
|
||||||
|
.descriptionItem {
|
||||||
|
// flex: 1;
|
||||||
|
display: flex;
|
||||||
|
width: 70%;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
.required {
|
:global(.ant-input) {
|
||||||
color: #fa541c;
|
flex: 1;
|
||||||
margin-left: 2px;
|
}
|
||||||
|
|
||||||
|
:global(.ant-input-textarea) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsRight {
|
// 表单操作按钮
|
||||||
|
.formActions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
gap: 12px;
|
||||||
margin-top: 12px;
|
flex-shrink: 0;
|
||||||
|
align-self: flex-end;
|
||||||
|
|
||||||
|
// 保存修改按钮（主按钮）
|
||||||
|
:global(.ant-btn-primary) {
|
||||||
|
background-color: rgba(4, 95, 94, 0.5) !important;
|
||||||
|
border-color: rgba(0, 143, 142, 1) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(4, 95, 94, 0.7) !important;
|
||||||
|
border-color: rgba(0, 143, 142, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: rgba(4, 95, 94, 0.5) !important;
|
||||||
|
border-color: rgba(0, 143, 142, 1) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.listHeader {
|
// 取消按钮（非主按钮）
|
||||||
|
:global(.ant-btn:not(.ant-btn-primary)) {
|
||||||
|
background-color: rgba(183, 229, 213, 0.2) !important;
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
border-image-source: conic-gradient(
|
||||||
|
from 102.75deg at 50% 52.91%,
|
||||||
|
rgba(249, 249, 249, 0.5) -32.95deg,
|
||||||
|
rgba(140, 160, 156, 0.5) 10.52deg,
|
||||||
|
rgba(140, 160, 156, 0.35) 32.12deg,
|
||||||
|
rgba(255, 255, 255, 0.5) 60.28deg,
|
||||||
|
rgba(255, 255, 255, 0.5) 107.79deg,
|
||||||
|
rgba(140, 160, 156, 0.35) 187.59deg,
|
||||||
|
#F9F9F9 207.58deg,
|
||||||
|
rgba(255, 255, 255, 0.5) 287.31deg,
|
||||||
|
rgba(249, 249, 249, 0.5) 327.05deg,
|
||||||
|
rgba(140, 160, 156, 0.5) 370.52deg
|
||||||
|
) !important;
|
||||||
|
border-image-slice: 1 !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(183, 229, 213, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: rgba(183, 229, 213, 0.2) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部区域 - 油品列表
|
||||||
|
.bottomSection {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// border: 1px solid @section-border;
|
||||||
|
background: #fff;
|
||||||
|
padding: 12px 20px;
|
||||||
|
|
||||||
|
// 区域头部
|
||||||
|
.sectionHeader {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 12px;
|
gap: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
// 装饰条
|
||||||
|
.sectionBar {
|
||||||
|
width: 2px;
|
||||||
|
height: 16px;
|
||||||
|
background: rgba(0, 102, 101, 1);
|
||||||
|
border-radius: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filterRow {
|
// 标题
|
||||||
|
.sectionTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 筛选内容区域
|
||||||
|
.filterContent {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 20px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 20px;
|
||||||
}
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
// 筛选项
|
||||||
.filterItem {
|
.filterItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 12px;
|
||||||
}
|
|
||||||
|
|
||||||
|
// 筛选标签
|
||||||
.filterLabel {
|
.filterLabel {
|
||||||
color: #666;
|
color: #333;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
white-space: nowrap;
|
}
|
||||||
|
|
||||||
|
:global {
|
||||||
|
.ant-select {
|
||||||
|
min-width: 140px;
|
||||||
|
|
||||||
|
// 选择框样式
|
||||||
|
.ant-select-selector {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
border-radius: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover .ant-select-selector {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ant-select-focused .ant-select-selector {
|
||||||
|
border-color: rgba(44, 158, 157, 1) !important;
|
||||||
|
box-shadow: 0 0 0 2px rgba(44, 158, 157, 0.2) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 筛选按钮组
|
||||||
|
.filterButtons {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧按钮组
|
||||||
|
.filterButtonsRight {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格包装器
|
||||||
|
.tableWrapper {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
:global(.ant-table-wrapper) {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表头样式
|
||||||
|
:global {
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
color: rgba(51, 51, 51, 1) !important;
|
||||||
|
font-weight: 450 !important;
|
||||||
|
background-color: rgba(240, 247, 247, 1) !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表体样式
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
color: rgba(78, 88, 86, 1) !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作列按钮样式
|
||||||
|
.viewDetailBtn {
|
||||||
|
color: rgba(0, 102, 101, 1) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgba(0, 102, 101, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.editBtn {
|
||||||
|
color: rgba(45, 158, 157, 1) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgba(45, 158, 157, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.deleteBtn {
|
||||||
|
color: rgba(255, 130, 109, 1) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgba(255, 130, 109, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态列 Switch 样式
|
||||||
|
.statusSwitch {
|
||||||
|
// 启用状态背景色
|
||||||
|
&.ant-switch-checked {
|
||||||
|
background-color: rgba(20, 106, 89, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 停用状态背景色
|
||||||
|
&:not(.ant-switch-checked) {
|
||||||
|
background-color: rgba(153, 153, 153, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 复选框样式
|
||||||
|
.ant-checkbox-inner {
|
||||||
|
border-color: rgba(0, 102, 101, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
|
||||||
|
.ant-checkbox:hover .ant-checkbox-inner {
|
||||||
|
border-color: rgba(0, 102, 101, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-checkbox-checked .ant-checkbox-inner {
|
||||||
|
background-color: rgba(0, 102, 101, 1) !important;
|
||||||
|
border-color: rgba(0, 102, 101, 1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue