hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-14 05:16:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

列表

Browse Source
This commit is contained in:
zhangsir
2024-06-24 10:55:00 +08:00
parent 8ff5c71e3f
commit aad9b7cb96
3 changed files with 209 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
pages/learnPath/allPath.vue
View File

@@ -22,11 +22,112 @@
</view>
</view>
<view class="table">
<view class="table-row" v-for="(row, rowIndex) in tableData" :key="rowIndex">
<view class="table-cell" v-for="(cell, cellIndex) in row" :key="cellIndex">
{{ cell }}
<view class="table-container">
<table width="100%">
<thead>
<tr>
<th class="first" align="center"><view class="text">
name
</view></th>
<th align="center">Band1</th>
<th align="center">Band2</th>
<th align="center">Band3</th>
<th align="center">Band4</th>
<th align="center">Band5</th>
</tr>
</thead>
<tbody>
<tr v-for="row in gridData" :key="row.id">
<td class="first" align="center"><view class="text">{{ row.name }}</view></td>
<td align="center">
<image
v-if="row.marketStatus === 0"
src="@/static/images/learnpath/thispath.png"
mode="aspectFit"
/>
<image
v-else-if="row.marketStatus === 1"
src="@/static/images/learnpath/otherpath.png"
mode="aspectFit"
/>
<image
v-else
src="@/static/images/learnpath/notpath.png"
mode="aspectFit"
/>
</td>
<td align="center">
<image
v-if="row.saleStatus === 0"
src="@/static/images/learnpath/thispath.png"
mode="aspectFit"
/>
<image
v-else-if="row.saleStatus === 1"
src="@/static/images/learnpath/otherpath.png"
mode="aspectFit"
/>
<image
v-else
src="@/static/images/learnpath/notpath.png"
mode="aspectFit"
/>
</td>
<td align="center">
<image
v-if="row.productStatus === 0"
src="@/static/images/learnpath/thispath.png"
mode="aspectFit"
/>
<image
v-else-if="row.productStatus === 1"
src="@/static/images/learnpath/otherpath.png"
mode="aspectFit"
/>
<image
v-else
src="@/static/images/learnpath/notpath.png"
mode="aspectFit"
/>
</td>
<td align="center">
<image
v-if="row.FAEStatusL === 0"
src="@/static/images/learnpath/thispath.png"
mode="aspectFit"
/>
<image
v-else-if="row.FAEStatusL === 1"
src="@/static/images/learnpath/otherpath.png"
mode="aspectFit"
/>
<image
v-else
src="@/static/images/learnpath/notpath.png"
mode="aspectFit"
/>
</td>
<td align="center">
<image
v-if="row.salesManagement === 0"
src="@/static/images/learnpath/thispath.png"
mode="aspectFit"
/>
<image
v-else-if="row.salesManagement === 1"
src="@/static/images/learnpath/otherpath.png"
mode="aspectFit"
/>
<image
v-else
src="@/static/images/learnpath/notpath.png"
mode="aspectFit"
/>
</td>
</tr>
</tbody>
</table>
</view>
</view>
</view>
</view>
</template>
@@ -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;