loveflow
7 months ago
|
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 |
@ -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>
|
||||