Browse Source

优化

master
dai 3 years ago
parent
commit
6c1c18aba5
  1. 11
      src/assets/scss/main-shuju.scss
  2. 127
      src/views/modules/visual/cpts/tb.vue

11
src/assets/scss/main-shuju.scss

@ -176,9 +176,9 @@
// box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
background: linear-gradient(180deg, #00023f, #176dec);
box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35);
font-size: 18px;
font-size: 19px;
.el-menu-item {
font-size: 18px;
font-size: 19px;
}
.navbar--colorful {
@ -426,9 +426,10 @@
}
.el-dropdown {
color: #fff;
font-size: 16px;
.el-icon-arrow-down {
width: auto;
font-size: 12px;
font-size: 16px;
margin: 0 0 0 5px;
transition: transform 0.3s;
}
@ -472,9 +473,9 @@
.navbar__avatar {
.el-dropdown-link {
> img {
width: 36px;
width: 42px;
height: auto;
margin-right: 5px;
margin-right: 7px;
border-radius: 100%;
vertical-align: middle;
}

127
src/views/modules/visual/cpts/tb.vue

@ -1,75 +1,89 @@
<template>
<div class="m-table">
<table class="table"
border="0"
cellspacing="0"
cellpadding="0">
<col :align="item.align"
:width="item.width"
:key="'col' + index"
v-for="(item, index) in colList" />
<table class="table" border="0" cellspacing="0" cellpadding="0">
<col
:align="item.align"
:width="item.width"
:key="'col' + index"
v-for="(item, index) in colList"
/>
<thead>
<tr class="table-header">
<th class="table-header-th"
v-for="item in header"
:key="item">
<th class="table-header-th" v-for="item in header" :key="item">
{{ item }}
</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-body-tr"
v-for="(value, index) in list"
:key="index"
@click="handleClickRow(index)">
<td class="td"
v-for="(item, indexs) in value"
:key="indexs">
<div v-if="typeof item === 'string' || typeof item === 'number'">
<tr
class="table-body-tr"
v-for="(value, index) in list"
:key="index"
@click="handleClickRow(index)"
>
<td class="td" v-for="(item, indexs) in value" :key="indexs">
<div
v-if="typeof item === 'string' || typeof item === 'number'"
:title="item"
>
{{ item }}
</div>
<div v-if="typeof item === 'object'&& item.type === 'img'">
<div v-if="typeof item === 'object' && item.type === 'img'">
<!-- <span>{{ item.type+ item.src}}</span> -->
<img style="width:18px;height:18px"
:src="item.src"
alt="" />
<img style="width: 18px; height: 18px" :src="item.src" alt="" />
</div>
<div v-if="typeof item === 'object' && item && item.type == 'index'">
<img v-if="highlightTop3 && index == 0"
src="@/assets/img/shuju/top/1.png"
alt="" />
<img v-else-if="highlightTop3 && index == 1"
src="@/assets/img/shuju/top/2.png"
alt="" />
<img v-else-if="highlightTop3 && index == 2"
src="@/assets/img/shuju/top/3.png"
alt="" />
<div
v-if="typeof item === 'object' && item && item.type == 'index'"
>
<img
v-if="highlightTop3 && index == 0"
src="@/assets/img/shuju/top/1.png"
alt=""
/>
<img
v-else-if="highlightTop3 && index == 1"
src="@/assets/img/shuju/top/2.png"
alt=""
/>
<img
v-else-if="highlightTop3 && index == 2"
src="@/assets/img/shuju/top/3.png"
alt=""
/>
<span v-else>{{ index + 1 }}</span>
</div>
<a v-else-if="typeof item === 'object' && item && item.type == 'operate'"
v-for="btn in item.list"
:key="'operate' + index + btn"
@click="handleClickBtn(index, btn)">{{ btn }}</a>
<a v-else-if="typeof item === 'object' && item && item.type == 'people'"
@click="handleClickPeople(item)">{{ item.name }}</a>
<a
v-else-if="
typeof item === 'object' && item && item.type == 'operate'
"
v-for="btn in item.list"
:key="'operate' + index + btn"
@click="handleClickBtn(index, btn)"
>{{ btn }}</a
>
<a
v-else-if="
typeof item === 'object' && item && item.type == 'people'
"
@click="handleClickPeople(item)"
>{{ item.name }}</a
>
</td>
</tr>
</tbody>
</table>
<div class="table-status"
v-if="loading">
<div class="table-status" v-if="loading">
<screen-loading>加载中</screen-loading>
</div>
<div class="table-status"
v-if="list.length == 0 && !loading">
<div class="table-status" v-if="list.length == 0 && !loading">
<div class="no-data">
<img src="@/assets/img/modules/visual/noData.png"
class="no-data-img" />
<img src="@/assets/img/modules/visual/noData.png" class="no-data-img" />
</div>
</div>
</div>
@ -77,7 +91,6 @@
<script>
import ScreenLoading from "./loading";
import Vue from "vue";
export default {
name: "table",
@ -138,24 +151,24 @@ export default {
default: false,
},
},
data () {
data() {
return {};
},
watch: {},
mounted () { },
mounted() {},
created () { },
created() {},
methods: {
//
handleClickRow (index) {
handleClickRow(index) {
this.$emit("handleClickRow", index);
},
handleClickBtn (index, type) {
handleClickBtn(index, type) {
this.$emit("operate", index, type);
},
handleClickPeople (item) {
handleClickPeople(item) {
this.$router.push({
path: `/main-shuju/visual-basicinfo-people/${item.uid}`,
});
@ -177,9 +190,10 @@ export default {
width: 100%;
height: 50px;
background: rgba(8, 37, 134, 0.85);
font-size: 16px;
font-size: 17px;
font-weight: 400;
color: #ffffff;
line-height: 50px;
&-th {
text-align: center;
@ -191,9 +205,10 @@ export default {
&-body {
box-sizing: border-box;
width: 100%;
font-size: 16px;
font-size: 18px;
font-weight: 400;
color: #ffffff;
line-height: 40px;
&-tr {
box-sizing: border-box;
@ -214,7 +229,7 @@ export default {
}
a {
font-size: 16px;
font-size: 18px;
font-weight: 400;
color: #e4dc00;
position: relative;

Loading…
Cancel
Save