Skip to content

S
study
Commit 4c48c94c authored by linwenqing's avatar linwenqing
Browse files
Options

refactor:证书表格样式修改

parent cbc3674e
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 24 deletions
src/components/t-table/t-table.vue 0 → 100644
View file @ 4c48c94c
<template>
<view class="t-table" :style="{ 'border-width': border + 'px', 'border-color': borderColor }">
<slot />
</view>
</template>
<script>
export default {
props: {
border: {
type: String,
default: '1'
},
borderColor: {
type: String,
default: '#d0dee5'
},
isCheck: {
type: Boolean,
default: false
}
},
provide() {
return {
table: this
};
},
data() {
return {};
},
created() {
this.childrens = [];
this.index = 0;
},
methods: {
fire(e, index, len) {
let childrens = this.childrens;
console.log(childrens);
// 全选
if (index === 0) {
childrens.map((vm, index) => {
vm.checkboxData.checked = e;
return vm;
});
} else {
let isAll = childrens.find((n, ids) => ids !== 0 && !n.checkboxData.checked);
childrens[0].checkboxData.checked = isAll ? false : true;
}
let fireArr = [];
for (let i = 0; i < childrens.length; i++) {
if (childrens[i].checkboxData.checked && i !== 0) {
fireArr.push(childrens[i].checkboxData.value - 1);
}
}
this.$emit('change', {
detail: fireArr
});
}
}
};
</script>
<style scoped>
.t-table {
width: 100%;
border: 1px #d0dee5 solid;
border-left: none;
border-top: none;
box-sizing: border-box;
}
.t-table>>>t-tr {
display: flex;
}
.t-table>>>t-tr:nth-child(2n) {
background: #f5f5f5;
}
/* #ifdef H5 */
.t-table>>>.t-tr:nth-child(2n) {
background: #f5f5f5;
}
/* #endif */
</style>
src/components/t-table/t-td.vue 0 → 100644
View file @ 4c48c94c
<template>
<view
class="t-td"
:style="{
'border-width': thBorder + 'px',
'border-color': borderColor,
'font-size': fontSize + 'px',
color: color,
'justify-content': tdAlignCpd,
}"
>
<slot></slot>
</view>
</template>
<script>
export default {
props: {
align: String,
},
data() {
return {
thBorder: '1',
borderColor: '#d0dee5',
fontSize: '14',
color: '#555c60',
tdAlign: 'center',
}
},
inject: ['table', 'tr'],
created() {
this.thBorder = this.table.border
this.borderColor = this.table.borderColor
this.fontSize = this.tr.fontSize
this.color = this.tr.color
if (this.align) {
this.tdAlign = this.align
} else {
this.tdAlign = this.tr.align
}
},
computed: {
tdAlignCpd() {
let nameAlign = ''
switch (this.tdAlign) {
case 'left':
nameAlign = 'flex-start'
break
case 'center':
nameAlign = 'center'
break
case 'right':
nameAlign = 'flex-end'
break
default:
nameAlign = 'center'
break
}
return nameAlign
},
},
}
</script>
<style>
.t-td {
flex: 1;
display: flex;
align-items: center;
width: 100%;
padding: 14upx;
border-top: 1px #d0dee5 solid;
border-left: 1px #d0dee5 solid;
text-align: center;
color: #555c60;
font-size: 28upx;
}
</style>
src/components/t-table/t-th.vue 0 → 100644
View file @ 4c48c94c
<template>
<view class="t-th" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor,'font-size':fontSize+'px' ,'color':color,'justify-content':thAlignCpd}">
<slot></slot>
</view>
</template>
<script>
export default {
props: {
align: String,
},
data() {
return {
thBorder: '1',
borderColor: '#d0dee5',
fontSize: '15',
color: '#3b4246',
thAlign: 'center'
};
},
inject: ['table', 'tr'],
created() {
this.thBorder = this.table.border;
this.borderColor = this.table.borderColor;
this.fontSize = this.tr.fontSize;
this.color = this.tr.color;
if (this.align) {
this.thAlign = this.align;
} else {
this.thAlign = this.tr.align
}
},
computed: {
thAlignCpd() {
let nameAlign = '';
switch (this.thAlign) {
case 'left':
nameAlign = 'flex-start'
break;
case 'center':
nameAlign = 'center'
break;
case 'right':
nameAlign = 'flex-end'
break;
default:
nameAlign = 'center'
break;
}
return nameAlign
}
}
};
</script>
<style>
.t-th {
flex: 1;
display: flex;
align-items: center;
font-size: 30upx;
font-weight: bold;
text-align: center;
color: #3b4246;
border-left: 1px #d0dee5 solid;
border-top: 1px #d0dee5 solid;
padding: 15upx;
}
</style>
src/components/t-table/t-tr.vue 0 → 100644
View file @ 4c48c94c
<template>
<view class="t-tr">
<view v-if="isCheck" class="t-check-box" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor}">
<checkbox-group @change="checkboxChange">
<checkbox :value="checkboxData.value + ''" :checked="checkboxData.checked" />
</checkbox-group>
</view>
<slot></slot>
</view>
</template>
<script>
export default {
props: {
fontSize: String,
color: String,
align: String
},
inject: ['table'],
provide() {
return {
tr: this
};
},
data() {
return {
isCheck: false,
checkboxData: {
value: 0,
checked: false
},
checked: false,
thBorder: '1',
borderColor: '#d0dee5'
};
},
created() {
this.thBorder = this.table.border;
this.borderColor = this.table.borderColor;
this.table.childrens.push(this);
this.checkboxData.value = this.table.index++;
this.isCheck = this.table.isCheck;
},
methods: {
checkboxChange(e) {
this.checkboxData.checked = !this.checkboxData.checked;
this.table.childrens[this.checkboxData.value] = this;
this.table.fire(e.detail.value[0] ? true : false, this.checkboxData.value, this.table.index);
}
}
};
</script>
<style>
.t-tr {
width: 100%;
display: flex;
}
.t-tr t-th,
.t-tr t-td {
display: flex;
flex: 1;
}
.t-tr .t-check-box {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80upx;
color: #3b4246;
border-left: 1px #d0dee5 solid;
border-top: 1px #d0dee5 solid;
}
.t-tr .t-check-box checkbox {
transform: scale(0.8);
}
</style>
src/pages/cert/detail.vue
View file @ 4c48c94c
...@@ -17,17 +17,13 @@ ...@@ -17,17 +17,13 @@
<view class="item" v-for="(data, k) in dataList"> <view class="item" v-for="(data, k) in dataList">
<view class="name">{{ certName[k] }}</view> <view class="name">{{ certName[k] }}</view>
<view class="table"> <view class="table">
<u-table border-color="#9EA5BB"> <t-table @change="change" border-color="#9EA5BB">
<u-tr v-for="(item, i) in data" :key="i" class="u-tr"> <t-tr v-for="item in data" :key="item.id">
<u-td <t-td v-for="(val, name, index) in item" :key="index">{{
v-for="(val, name, index) in item" val
:key="index" }}</t-td>
class="u-td bg-td" </t-tr>
> </t-table>
{{ val }}
</u-td>
</u-tr>
</u-table>
</view> </view>
</view> </view>
</view> </view>
...@@ -41,7 +37,18 @@ ...@@ -41,7 +37,18 @@
</template> </template>
<script> <script>
import tTable from '@/components/t-table/t-table.vue'
import tTh from '@/components/t-table/t-th.vue'
import tTr from '@/components/t-table/t-tr.vue'
import tTd from '@/components/t-table/t-td.vue'
export default { export default {
components: {
tTable,
tTh,
tTr,
tTd,
},
data() { data() {
return { return {
dataList: [], dataList: [],
...@@ -104,6 +111,15 @@ export default { ...@@ -104,6 +111,15 @@ export default {
}, },
}, },
methods: { methods: {
change(e) {
console.log(e.detail)
},
edit(item) {
uni.showToast({
title: item.name,
icon: 'none',
})
},
formatDataByType() { formatDataByType() {
console.log('shoudao param', getApp().globalData.certItemData) console.log('shoudao param', getApp().globalData.certItemData)
if (!getApp().globalData.certItemData) { if (!getApp().globalData.certItemData) {
...@@ -171,7 +187,7 @@ export default { ...@@ -171,7 +187,7 @@ export default {
background-color: #ffffff; background-color: #ffffff;
text-align: center; text-align: center;
border-radius: 12rpx; border-radius: 12rpx;
padding: 30rpx; padding: 24rpx;
position: relative; position: relative;
.top { .top {
height: 116rpx; height: 116rpx;
...@@ -192,15 +208,19 @@ export default { ...@@ -192,15 +208,19 @@ export default {
.table { .table {
/* background-color: #2953ff; */ /* background-color: #2953ff; */
min-height: 200rpx; min-height: 200rpx;
::v-deep .u-td { ::v-deep t-td .t-td {
font-weight: bold; font-size: 22rpx !important;
color: #5a6073; font-weight: bold !important;
padding: 24rpx 2rpx !important;
} }
::v-deep .bg-td:nth-of-type(2n + 1) { ::v-deep t-td:nth-of-type(2n + 1) .t-td {
background-color: #e8ebf3 !important; background-color: #e8ebf3 !important;
font-weight: bold !important;
color: #191c27; color: #191c27;
} }
::v-deep t-td:nth-of-type(2n) .t-td {
background-color: #ffffff !important;
color: #5a6073;
}
} }
} }
.foot { .foot {
...@@ -223,12 +243,5 @@ export default { ...@@ -223,12 +243,5 @@ export default {
font-size: 24rpx; font-size: 24rpx;
color: #5a6073; color: #5a6073;
} }
.u-tr ::v-deep .u-td {
font-size: 22rpx !important;
height: 80rpx;
}
.u-tr ::v-deep .u-td .u-td {
padding: 5rpx 0 !important;
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment