kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

需求变更-1

Browse Source
This commit is contained in:
aixianling
2024-10-22 10:54:10 +08:00
parent fcb2fe3b47
commit 7bd7174966
2 changed files with 119 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/assets/main.css
View File

@@ -1,245 +1,246 @@
#app { #app {
font-weight: normal; font-weight: normal;
} }
a, .green { a, .green {
text-decoration: none; text-decoration: none;
color: hsla(160, 100%, 37%, 1); color: hsla(160, 100%, 37%, 1);
transition: 0.4s; transition: 0.4s;
} }
@media (hover: hover) { @media (hover: hover) {
a:hover { a:hover {
background-color: hsla(160, 100%, 37%, 0.2); background-color: hsla(160, 100%, 37%, 0.2);
} }
} }
.AppSelect .el-input__inner { .AppSelect .el-input__inner {
background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%); background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
border: 1px solid #1760AE; border: 1px solid #1760AE;
border-radius: 0; border-radius: 0;
color: #fff; color: #fff;
} }
.el-table:before, .el-table:after { .el-table:before, .el-table:after {
background: transparent; background: transparent;
} }
.el-table .gutter { .el-table .gutter {
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
} }
.flex { .flex {
display: flex; display: flex;
} }
.fill { .fill {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
.mb-8 { .mb-8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.mr-8 { .mr-8 {
margin-right: 8px; margin-right: 8px;
} }
.dv-scroll-board { .dv-scroll-board {
overflow: hidden; overflow: hidden;
} }
.dv-scroll-board .header { .dv-scroll-board .header {
align-items: center; align-items: center;
padding: 6px 0; padding: 6px 0;
} }
.dv-scroll-board .header-item, .tableHead .item { .dv-scroll-board .header-item, .tableHead .item {
height: initial !important; height: initial !important;
line-height: 17px !important; line-height: 17px !important;
font-weight: bold; font-weight: bold;
} }
.dv-scroll-board .ceil { .dv-scroll-board .ceil {
padding: 6px 10px !important; padding: 6px 10px !important;
} }
.dv-scroll-board .row-item { .dv-scroll-board .row-item {
overflow: hidden; overflow: hidden;
} }
.dv-scroll-board .ceil, .dv-scroll-board .header-item { .dv-scroll-board .ceil, .dv-scroll-board .header-item {
text-wrap: unset !important; text-wrap: unset !important;
word-break: break-all; word-break: break-all;
font-size: 12px; font-size: 12px;
line-height: 17px line-height: 17px
} }
.summary { .summary {
height: 30px; height: 30px;
align-items: center; align-items: center;
color: #66FFFF; color: #66FFFF;
background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
} }
.tableHead { .tableHead {
height: 30px; height: 30px;
align-items: center; align-items: center;
background-color: rgba(13, 48, 99, 0.6); background-color: rgba(13, 48, 99, 0.6);
} }
.summary .item, .tableHead .item { .summary .item, .tableHead .item {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
padding: 0 6px; padding: 0 6px;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
line-height: 17px; line-height: 17px;
flex-shrink: 0; flex-shrink: 0;
} }
.summary .item { .summary .item {
white-space: wrap; white-space: wrap;
word-break: break-all; word-break: break-all;
} }
.dialogTable { .dialogTable {
position: fixed !important; position: fixed !important;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 600px !important; width: 600px !important;
height: 300px; height: 300px;
z-index: 9999; z-index: 9999;
background-color: #07193D; background-color: #07193D;
box-shadow: #66FFFF 0 0 20px; box-shadow: #66FFFF 0 0 20px;
} }
.scrollTable { .scrollTable {
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box;
background: transparent !important; background: transparent !important;
border-color: transparent; border-color: transparent;
} }
.scrollTable .tableHeader { .scrollTable .tableHeader {
background: rgba(13, 48, 99, 0.6) !important; background: rgba(13, 48, 99, 0.6) !important;
color: #fff; color: #fff;
border-color: transparent !important; border-color: transparent !important;
} }
.scrollTable tr { .scrollTable tr {
background-color: transparent !important; background-color: transparent !important;
} }
.scrollTable .el-table__footer-wrapper tr { .scrollTable .el-table__footer-wrapper tr {
background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
} }
.scrollTable .el-table__footer-wrapper .is-leaf { .scrollTable .el-table__footer-wrapper .is-leaf {
color: #66FFFF; color: #66FFFF;
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
} }
.scrollTable:before { .scrollTable:before {
background: transparent !important; background: transparent !important;
} }
.scrollTable .el-table__cell.gutter, .scrollTable [name=gutter] { .scrollTable .el-table__cell.gutter, .scrollTable [name=gutter] {
display: none; display: none;
} }
.scrollTable .simplebar-scrollbar:before { .scrollTable .simplebar-scrollbar:before {
background: #ddd; background: #ddd;
} }
.scrollTable .el-table__body { .scrollTable .el-table__body {
width: 100% !important; width: 100% !important;
} }
.scrollTable .el-table__body-wrapper { .scrollTable .el-table__body-wrapper {
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.scrollTable .tableCell { .scrollTable .tableCell {
color: #fff; color: #fff;
border-color: transparent !important; border-color: transparent !important;
} }
.scrollTable .cell { .scrollTable .cell {
text-wrap: unset !important; text-wrap: unset !important;
word-break: break-all; word-break: break-all;
font-size: 12px; font-size: 12px;
padding-left: 6px !important; padding-left: 6px !important;
padding-right: 6px !important; padding-right: 6px !important;
} }
.scrollTable .el-table__cell { .scrollTable .el-table__cell {
padding: 3px 0 !important; padding: 3px 0 !important;
} }
.scrollTable tr.el-table__row--striped { .scrollTable tr.el-table__row--striped {
--odd-bg: #09265B; --odd-bg: #09265B;
background-color: #081F48; background-color: #081F48;
background-image: linear-gradient( background-image: linear-gradient(
-45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%, -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent); var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
background-size: 10px 10px; background-size: 10px 10px;
} }
.scrollTable tr.el-table__row--striped .tableCell { .scrollTable tr.el-table__row--striped .tableCell {
background-color: transparent !important; background-color: transparent !important;
} }
.scrollTable tr:hover > .tableCell { .scrollTable tr:hover > .tableCell {
background-color: rgba(255, 255, 255, .1) !important; background-color: rgba(255, 255, 255, .1) !important;
} }
.AppSubTitle { .AppSubTitle {
height: 48px; height: 48px;
padding: 8px 0 8px 38px; padding: 8px 0 8px 38px;
margin-bottom: 24px; margin-bottom: 12px;
box-sizing: border-box; box-sizing: border-box;
line-height: 32px; line-height: 32px;
background-image: url("http://10.0.97.209/img/kengee/kengee4.png"); background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 400px 100%;
color: #fff; color: #fff;
max-width: 400px; max-width: 100%;
display: flex; min-width: 400px;
align-items: center; display: flex;
gap: 16px; align-items: center;
position: relative; gap: 16px;
position: relative;
} }
.AppSubTitle span { .AppSubTitle span {
font-size: 12px; font-size: 12px;
color: #215A8E; color: #215A8E;
} }
.AppSubTitle > .right { .AppSubTitle > .right {
position: absolute; position: absolute;
right: -30px; right: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.AppSubTitle .el-select { .AppSubTitle .el-select {
width: 120px; width: 120px;
} }

8
src/views/AppKeyGoods.vue
View File

@@ -1,9 +1,6 @@
<script> <script>
import AppSubTitle from "@/views/AppSubTitle.vue";
export default { export default {
name: "AppKeyGoods", name: "AppKeyGoods",
components: {AppSubTitle},
label: "市场看板-重点单品", label: "市场看板-重点单品",
data() { data() {
return { return {
@@ -37,7 +34,7 @@ export default {
getTableData() { getTableData() {
const {$http, $waitFor} = window const {$http, $waitFor} = window
const {goodsCategoryId} = this const {goodsCategoryId} = this
$waitFor($http).then(() => $http.post("/data-boot/ca/screen/scStoreKeyGoods/list", { $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/marketKeyGoods", {
...this.search, limit: 999, goodsCategoryId ...this.search, limit: 999, goodsCategoryId
})).then(res => { })).then(res => {
if (res?.data) { if (res?.data) {
@@ -75,4 +72,7 @@ export default {
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
.AppKeyGoods .dv-scroll-board, .AppKeyGoods .scrollTable {
height: calc(100% - 60px) !important;
}
</style> </style>