1 changed files with 106 additions and 0 deletions
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<view class="dark-table-container"> |
||||
|
<scroll-view scroll-x="true" class="table-scroll"> |
||||
|
<view class="table"> |
||||
|
<!-- 表头 --> |
||||
|
<view class="table-row table-header"> |
||||
|
<view class="table-cell" v-for="(col, idx) in columns" :key="idx"> |
||||
|
{{ col.label }} |
||||
|
<text v-if="col.tip" class="tip" @click="showTip(col.tip)">?</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 数据行 --> |
||||
|
<view class="table-row" v-for="(row, rIdx) in data" :key="rIdx"> |
||||
|
<view class="table-cell" v-for="(col, cIdx) in columns" :key="cIdx"> |
||||
|
{{ row[col.key] || '-' }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<!-- 说明弹窗 --> |
||||
|
<uni-popup ref="popup" type="center"> |
||||
|
<view class="popup-content">{{ tipContent }}</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
columns: [ |
||||
|
{ label: '渠道', key: 'channel' }, |
||||
|
{ label: '资源数', key: 'resource', tip: '本月的新资源' }, |
||||
|
{ label: '到访数(一访)', key: 'visit1', tip: '本月资源的一访到访数' }, |
||||
|
{ label: '到访率(一访)', key: 'visitRate1', tip: '一访到访数/本月新资源数' }, |
||||
|
{ label: '到访数(二访)', key: 'visit2', tip: '二访到访数/一访到访数' }, |
||||
|
{ label: '到访率(二访)', key: 'visitRate2', tip: '二访到访数/一访到访数' }, |
||||
|
{ label: '关单数(一访)', key: 'close1', tip: '本月一访到访的关单数' }, |
||||
|
{ label: '关单率(一访)', key: 'closeRate1', tip: '一访关单数/一访到访数' }, |
||||
|
{ label: '关单数(二访)', key: 'close2', tip: '二访到访的关单数' }, |
||||
|
{ label: '关单率(二访)', key: 'closeRate2', tip: '二访关单数/二访到访数' }, |
||||
|
{ label: '月总转', key: 'monthTrans', tip: '关单数（合计）/资源数' }, |
||||
|
{ label: '往月到访数', key: 'lastMonthVisit', tip: '本月资源在往月到访的到访数' }, |
||||
|
{ label: '月共到访', key: 'monthTotalVisit', tip: '本月资源任在本月到访/关单' }, |
||||
|
{ label: '往月关单数', key: 'lastMonthClose', tip: '本月关单-往月关单' }, |
||||
|
{ label: '月共关单', key: 'monthTotalClose', tip: '本月关单+往月关单' }, |
||||
|
], |
||||
|
data: [ |
||||
|
{ channel: '体检包（地推）', resource: 10, visit1: 5, visitRate1: '50%', visit2: 2, visitRate2: '40%', close1: 1, closeRate1: '20%', close2: 1, closeRate2: '50%', monthTrans: '10%', lastMonthVisit: 0, monthTotalVisit: 5, lastMonthClose: 0, monthTotalClose: 1 }, |
||||
|
], |
||||
|
tipContent: '' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showTip(content) { |
||||
|
this.tipContent = content |
||||
|
this.$refs.popup.open() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.dark-table-container { |
||||
|
background: #18181c; |
||||
|
color: #f1f1f1; |
||||
|
min-height: 100vh; |
||||
|
padding: 16rpx; |
||||
|
} |
||||
|
.table-scroll { |
||||
|
width: 100%; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
.table { |
||||
|
min-width: 1200rpx; |
||||
|
} |
||||
|
.table-row { |
||||
|
display: flex; |
||||
|
border-bottom: 1px solid #333; |
||||
|
} |
||||
|
.table-header { |
||||
|
background: #23232a; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.table-cell { |
||||
|
flex: 0 0 180rpx; |
||||
|
padding: 16rpx 8rpx; |
||||
|
text-align: center; |
||||
|
border-right: 1px solid #333; |
||||
|
position: relative; |
||||
|
} |
||||
|
.tip { |
||||
|
color: #ffb300; |
||||
|
margin-left: 8rpx; |
||||
|
font-size: 24rpx; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.popup-content { |
||||
|
background: #23232a; |
||||
|
color: #fff; |
||||
|
padding: 32rpx; |
||||
|
border-radius: 16rpx; |
||||
|
min-width: 300rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue