After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 83 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 576 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 7.8 KiB |
After Width: | Height: | Size: 534 KiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 47 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 685 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 617 B |
After Width: | Height: | Size: 623 B |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 651 B |
After Width: | Height: | Size: 690 B |
Before Width: | Height: | Size: 11 KiB |
@ -1,54 +1,56 @@
|
|||||||
.gPagination {
|
.gMainTable {
|
||||||
background-color: transparent;
|
.gPagination {
|
||||||
}
|
background-color: transparent;
|
||||||
/deep/.el-pagination {
|
|
||||||
.el-pagination__total {
|
|
||||||
color: #ffffff;
|
|
||||||
height: 34px;
|
|
||||||
line-height: 34px;
|
|
||||||
}
|
}
|
||||||
.el-pagination__sizes {
|
/deep/.el-pagination {
|
||||||
.el-input__inner {
|
.el-pagination__total {
|
||||||
|
color: #ffffff;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
.el-pagination__sizes {
|
||||||
|
.el-input__inner {
|
||||||
|
height: 32px;
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
border: solid 1px #28847e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-prev {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
min-width: 32px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: solid 1px #28847e;
|
border: solid 1px #28847e;
|
||||||
}
|
}
|
||||||
}
|
.btn-next {
|
||||||
.btn-prev {
|
|
||||||
height: 32px;
|
|
||||||
min-width: 32px;
|
|
||||||
background: transparent;
|
|
||||||
color: #fff;
|
|
||||||
border: solid 1px #28847e;
|
|
||||||
}
|
|
||||||
.btn-next {
|
|
||||||
height: 32px;
|
|
||||||
min-width: 32px;
|
|
||||||
background: transparent;
|
|
||||||
color: #fff;
|
|
||||||
border: solid 1px #28847e;
|
|
||||||
}
|
|
||||||
.el-pager {
|
|
||||||
.number {
|
|
||||||
height: 32px;
|
height: 32px;
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: solid 1px #28847e;
|
border: solid 1px #28847e;
|
||||||
&.active {
|
}
|
||||||
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
.el-pager {
|
||||||
background-size: 100% 100% !important;
|
.number {
|
||||||
|
height: 32px;
|
||||||
|
min-width: 32px;
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
border: solid 1px #28847e;
|
||||||
|
&.active {
|
||||||
|
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.el-pagination__jump {
|
||||||
.el-pagination__jump {
|
|
||||||
color: #fff;
|
|
||||||
.el-input__inner {
|
|
||||||
height: 32px;
|
|
||||||
background: transparent;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: solid 1px #28847e;
|
.el-input__inner {
|
||||||
|
height: 32px;
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
border: solid 1px #28847e;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,164 @@
|
|||||||
|
.loveflowscreen {
|
||||||
|
.tableWrap {
|
||||||
|
}
|
||||||
|
.el-table {
|
||||||
|
border: none; //solid 1px rgba(82, 107, 127, 0.7);
|
||||||
|
border-right: none;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
|
border-top: none;
|
||||||
|
background: transparent;
|
||||||
|
font-size: vw(12) !important;
|
||||||
|
|
||||||
|
.el-table__header-wrapper {
|
||||||
|
.el-table__header {
|
||||||
|
background: url("~@/assets/images/base/stablet.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
tr {
|
||||||
|
background: transparent;
|
||||||
|
th {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #d9e7ff;
|
||||||
|
.cell {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
td.el-table__cell,
|
||||||
|
th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: none//1px solid #526b7f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
.el-table__body {
|
||||||
|
tbody {
|
||||||
|
color: #ffffff;
|
||||||
|
tr {
|
||||||
|
background: transparent;
|
||||||
|
td {
|
||||||
|
border-bottom: none;
|
||||||
|
//border-right-color: rgba(82, 107, 127, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table__row--striped {
|
||||||
|
.el-table__cell {
|
||||||
|
background: rgba(61, 85, 102, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gPagination {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.el-pagination {
|
||||||
|
padding: 2px 0;
|
||||||
|
.el-pagination__total {
|
||||||
|
height: auto;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-pagination__sizes {
|
||||||
|
.el-input__inner {
|
||||||
|
background: #3c4b4a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-prev {
|
||||||
|
background: #3c4b4a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-next {
|
||||||
|
background: #3c4b4a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-pager {
|
||||||
|
.number {
|
||||||
|
background: #3c4b4a;
|
||||||
|
color: #fff;
|
||||||
|
&.active {
|
||||||
|
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-pagination__jump {
|
||||||
|
color: #fff;
|
||||||
|
.el-input__inner {
|
||||||
|
background: #3c4b4a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gScreenTable {
|
||||||
|
.gScreenTableWrap {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.screenTable {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
font-size: vw(14);
|
||||||
|
.thead {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
.tr {
|
||||||
|
color: #d9e7ff;
|
||||||
|
height: 28px;
|
||||||
|
background: url("~@/assets/images/base/stablet.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
.th {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tbody {
|
||||||
|
padding-top: 28px;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
overflow-y: scroll;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.tr {
|
||||||
|
height: vw(32);
|
||||||
|
.td {
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background: rgba(61, 85, 102, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<div class="gScreenTable">
|
||||||
|
<el-table
|
||||||
|
v-if="show"
|
||||||
|
ref="gScreenTable"
|
||||||
|
:size="size"
|
||||||
|
:data="tableData"
|
||||||
|
:rowKey="rowKey ? rowKey : ''"
|
||||||
|
@selection-change="selectionChange"
|
||||||
|
v-bind="$attrs"
|
||||||
|
>
|
||||||
|
<!-- 多选批量操作 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="rowSelection"
|
||||||
|
type="selection"
|
||||||
|
width="55"
|
||||||
|
:reserve-selection="rowKey ? true : false"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<template v-for="(item, index) in columns">
|
||||||
|
<el-table-column
|
||||||
|
v-if="item.slot"
|
||||||
|
:key="item.prop + index"
|
||||||
|
:label="item.label"
|
||||||
|
v-bind="item.attrs || {}"
|
||||||
|
>
|
||||||
|
<!-- slot内容 -->
|
||||||
|
<template v-slot="scope">
|
||||||
|
<slot :name="item.slot" :scope="scope" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
v-else
|
||||||
|
:key="item.prop + index"
|
||||||
|
:prop="item.prop"
|
||||||
|
:label="item.label"
|
||||||
|
v-bind="item.attrs || {}"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="gScreenTableWrap">
|
||||||
|
<table class="screenTable">
|
||||||
|
<thead class="thead">
|
||||||
|
<tr class="tr">
|
||||||
|
<th class="th" v-for="item in columns" :key="item.label + item.id">
|
||||||
|
{{ item.label }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="tbody">
|
||||||
|
<tr
|
||||||
|
class="tr"
|
||||||
|
v-for="(data, index) in tableData"
|
||||||
|
:key="data.id + index"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="td"
|
||||||
|
v-for="item in columns"
|
||||||
|
:key="item.label + item.id + index"
|
||||||
|
>
|
||||||
|
{{ data[item.prop] }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gPagination" v-if="pagination">
|
||||||
|
<el-pagination
|
||||||
|
:small="true"
|
||||||
|
background
|
||||||
|
v-bind="{ ...pagination }"
|
||||||
|
@size-change="pageSizeChange"
|
||||||
|
@current-change="currentPageChange"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "gScreenTable",
|
||||||
|
props: {
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return "mini";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
rowSelection: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
rowKey: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//每页条数发生改变
|
||||||
|
pageSizeChange(item) {
|
||||||
|
this.$emit("pageSizeChange", item);
|
||||||
|
},
|
||||||
|
//当前页码发生改变
|
||||||
|
currentPageChange(item) {
|
||||||
|
this.$emit("currentPageChange", item);
|
||||||
|
},
|
||||||
|
//多选行操作
|
||||||
|
selectionChange(item) {
|
||||||
|
this.$emit("selectionChange", item, this.rowKey);
|
||||||
|
},
|
||||||
|
//清除选择项
|
||||||
|
clearSelection() {
|
||||||
|
this.$refs.gScreenTable.clearSelection();
|
||||||
|
this.$emit("onClearSelected");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.gScreenTable {
|
||||||
|
height: calc(100% - 34px);
|
||||||
|
.el-table {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gPagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 4px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<div class="digitWrap">
|
||||||
|
<div class="num" v-for="(item, index) in numArr" :key="index">
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
num: {
|
||||||
|
type: [Number, String],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
numArr: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setNum();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setNum() {
|
||||||
|
this.num = this.num + "";
|
||||||
|
this.numArr = [];
|
||||||
|
let length = this.num.length;
|
||||||
|
console.log(length);
|
||||||
|
console.log(this.num);
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
this.numArr.push(this.num.charAt(i));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
num: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setNum();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.digitWrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding-top: vw(16);
|
||||||
|
padding-left: vw(20);
|
||||||
|
padding-right: vw(20);
|
||||||
|
width: vw(377);
|
||||||
|
height: vw(105);
|
||||||
|
background: url("~@/assets/images/topic/numb.png") no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: vw(38);
|
||||||
|
height: vw(44);
|
||||||
|
background: url("~@/assets/images/topic/num.png") no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(28);
|
||||||
|
color: #f3fff9;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-shadow: 0px 0px 9px rgba(87, 238, 255, 0.88);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="loveflowscreen">
|
||||||
|
<div class="tableWrap">
|
||||||
|
<gScreenTable
|
||||||
|
stripe
|
||||||
|
ref="gScreenTable"
|
||||||
|
:tableData="dataSource"
|
||||||
|
:columns="columns"
|
||||||
|
rowKey="id"
|
||||||
|
:pagination="ipagination"
|
||||||
|
@pageSizeChange="handlePageSizeChange"
|
||||||
|
@currentPageChange="handleCurrentPageChange"
|
||||||
|
>
|
||||||
|
</gScreenTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [tableListMixins],
|
||||||
|
props: {
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disableMixinCreated: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.ipagination.pageSize = 10;
|
||||||
|
this.ipagination.pageSizes = [];
|
||||||
|
this.ipagination.layout = "total, prev, pager, next";
|
||||||
|
this.loadData();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.loveflowscreen {
|
||||||
|
height: 100%;
|
||||||
|
.tableWrap {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|