|
|
@@ -159,8 +159,234 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped >
|
|
|
::v-deep .el-col-md-8 {
|
|
|
width: 24.33333% !important;
|
|
|
}
|
|
|
+
|
|
|
+.forecast-summary {
|
|
|
+ .el-tag {
|
|
|
+ &.el-tag--success {
|
|
|
+ background-color: #f0f9ff;
|
|
|
+ border-color: #67c23a;
|
|
|
+ color: #67c23a;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-tag--warning {
|
|
|
+ background-color: #fdf6ec;
|
|
|
+ border-color: #e6a23c;
|
|
|
+ color: #e6a23c;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-tag--danger {
|
|
|
+ background-color: #fef0f0;
|
|
|
+ border-color: #f56c6c;
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-tag--info {
|
|
|
+ background-color: #f4f4f5;
|
|
|
+ border-color: #909399;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 表格行样式
|
|
|
+ .avue-crud {
|
|
|
+ .el-table {
|
|
|
+ .el-table__row {
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 表头样式
|
|
|
+ .el-table__header-wrapper {
|
|
|
+ .el-table__header {
|
|
|
+ th {
|
|
|
+ background-color: #fafafa;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 单元格样式
|
|
|
+ .el-table__body-wrapper {
|
|
|
+ .el-table__body {
|
|
|
+ td {
|
|
|
+ padding: 8px 0;
|
|
|
+
|
|
|
+ .cell {
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分页样式
|
|
|
+ .el-pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .el-pagination__total {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pager {
|
|
|
+ .number {
|
|
|
+ &.active {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索区域样式
|
|
|
+ .avue-crud__search {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input,
|
|
|
+ .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avue-crud__search-btn {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数字右对齐
|
|
|
+ .text-right {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文本省略
|
|
|
+ .text-ellipsis {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 状态标签样式增强
|
|
|
+ .status-tag {
|
|
|
+ font-weight: 500;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 响应式设计
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .avue-crud {
|
|
|
+ .avue-crud__search {
|
|
|
+ .el-form-item {
|
|
|
+ .el-form-item__label {
|
|
|
+ width: 100% !important;
|
|
|
+ text-align: left !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__content {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 全局样式覆盖
|
|
|
+.el-table {
|
|
|
+ .forecast-quantity-cell {
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .approval-status-cell {
|
|
|
+ .el-tag {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .datetime-cell {
|
|
|
+ color: #909399;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+ // 行展开区样式（复用订单页样式类名，便于统一风格）
|
|
|
+ .order-expand-content {
|
|
|
+ padding: 16px 24px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ border-left: 3px solid #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ margin: 0;
|
|
|
+ color: #303133;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-code {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand-body {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .forecast-summary .toolbar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .el-button + .el-button {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .forecast-summary {
|
|
|
+ .toolbar {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
yz