diff --git a/pages/learnPath/allPath.vue b/pages/learnPath/allPath.vue index d00518d..1b47b88 100644 --- a/pages/learnPath/allPath.vue +++ b/pages/learnPath/allPath.vue @@ -22,11 +22,112 @@ - - - {{ cell }} + + + + + + + + + + + + + + + + + + + + + + +
+ name + Band1Band2Band3Band4Band5
{{ row.name }} + + + + + + + + + + + + + + + + + + + +
-
@@ -35,11 +136,42 @@ export default { data() { return { - tableData: [ - ['Header 1', 'Header 2', 'Header 3'], - ['Row 1, Cell 1', 'Row 1, Cell 2', 'Row 1, Cell 3'], - ['Row 2, Cell 1', 'Row 2, Cell 2', 'Row 2, Cell 3'] - ] + gridData: [{ + name: '市场企划岗', + marketStatus: 0, + saleStatus: 1, + productStatus: 2, + FAEStatusL: 0, + salesManagement: 1 + }, { + name: '销售岗', + marketStatus: 1, + saleStatus: 2, + productStatus: 1, + FAEStatusL: 0, + salesManagement: 1 + }, { + name: '产品企划岗', + marketStatus: 2, + saleStatus: 0, + productStatus: 0, + FAEStatusL: 0, + salesManagement: 1 + }, { + name: 'FAE岗', + marketStatus: 0, + saleStatus: 1, + productStatus: 2, + FAEStatusL: 0, + salesManagement: 1 + }, { + name: '销售管理岗位', + marketStatus: 1, + saleStatus: 2, + productStatus: 0, + FAEStatusL: 0, + salesManagement: 1 + }], } }, onLoad() { @@ -62,20 +194,58 @@ background: #fff; height: 100vh; .table { - display: table; - width: 100%; - } - .table-row { - display: table-row; - } - - .table-cell { - display: table-cell; - border: 1px solid #ddd; - padding: 10px; - text-align: center; - vertical-align: middle; + .table-container { + width: 100%; + overflow-x: auto; + } + table { + width: 100%; + border-collapse: collapse; + } + + th { + padding: 12px 20px; + text-align: center; + border: 2rpx solid #F0F6FC; + background: #F0F6FC; + } + td{ + padding: 12px 16px; + text-align: center; + border: 2rpx solid #F0F6FC; + color: #333333; + font-weight: 400; + font-size: 28rpx; + } + + th { + font-weight: bold; + color: #387DF7; + } + .first{ + display: block; + text-align: center; + .text{ + width: 212rpx; + border-collapse: collapse; + } + } + + tbody tr:nth-child(odd) { + background-color: #ffffff; + } + + tbody tr:hover { + background-color: rgba(0, 0, 0, .05); + } + + image { + width: 40rpx; + height: 36rpx; + vertical-align: middle; + } } + .headers{ /* margin-top: 38rpx; */ position: relative; diff --git a/pages/learnPath/learnPath.vue b/pages/learnPath/learnPath.vue index bee65c9..e150737 100644 --- a/pages/learnPath/learnPath.vue +++ b/pages/learnPath/learnPath.vue @@ -1,7 +1,7 @@