储运页面
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;
|
||||
@panel-bg: #f6fbfb;
|
||||
@section-border: rgba(118, 194, 181, 1);
|
||||
@section-bg: rgba(243, 249, 248, 1);
|
||||
|
||||
.container {
|
||||
.phycontainer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.blockTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2f4f4f;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid @panel-border;
|
||||
background: @panel-bg;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.formGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 16px;
|
||||
grid-row-gap: 12px;
|
||||
}
|
||||
|
||||
.formItem {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
// 顶部区域 - 基本信息
|
||||
.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;
|
||||
|
||||
.required {
|
||||
color: #fa541c;
|
||||
margin-left: 2px;
|
||||
}
|
||||
// 区域头部
|
||||
.sectionHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
// margin-bottom: 20px;
|
||||
|
||||
.actionsRight {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
// 装饰条
|
||||
.sectionBar {
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: rgba(0, 102, 101, 1);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.listHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
// 标题
|
||||
.sectionTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.filterRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
// 顶部内容区域
|
||||
.topContent {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.filterItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
// 基本信息表单
|
||||
.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 {
|
||||
font-size: 14px;
|
||||
font-weight: 450;
|
||||
color: #333;
|
||||
min-height: 22px; // 占位高度，与有文字时的高度一致
|
||||
// margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// 表单行
|
||||
.formRow {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
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;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba(183, 229, 213, 0.2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单左侧（保留原有样式，以防其他地方使用）
|
||||
.formLeft {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 表单行
|
||||
.formRow {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global(.ant-form-item) {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单右侧
|
||||
.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;
|
||||
|
||||
:global(.ant-input) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:global(.ant-input-textarea) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单操作按钮
|
||||
.formActions {
|
||||
display: flex;
|
||||
gap: 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;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消按钮（非主按钮）
|
||||
: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;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
// 装饰条
|
||||
.sectionBar {
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: rgba(0, 102, 101, 1);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
// 标题
|
||||
.sectionTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选内容区域
|
||||
.filterContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
// 筛选项
|
||||
.filterItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
// 筛选标签
|
||||
.filterLabel {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
// 复选框样式
|
||||
.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