learning-system-mobile/pages/learnPath/allPath.vue

<template>
	<view class="all_path">
		<view class="headers">
			<text>全岗位路径图</text>
			<view class="go_to" @click="goSearch">
				<text class="text">筛选</text>
				<image class="img" src="../../static/images/learnpath/uotdown.png" mode=""></image>
			</view>
		</view>
		<view class="path">
			<view class="item">
				<image class="img" src="../../static/images/learnpath/thispath.png" mode=""></image>
				<text class="text">当前路径</text>
			</view>
			<view class="item">
				<image class="img" src="../../static/images/learnpath/otherpath.png" mode=""></image>
				<text class="text">当前路径</text>
			</view>
			<view class="item">
				<image class="img" src="../../static/images/learnpath/notpath.png" mode=""></image>
				<text class="text">当前路径</text>
			</view>
		</view>
		<view class="table">
			<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>
</template>

<script>
	export default {
		data() {
			return {
				 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() {
			
		},
		methods: {
			goSearch(){
				uni.navigateTo({
					url: '/pages/learnPath/pathSearch'
				})
			},
		}
	}
</script>

<style>
.all_path{
	padding: 0 30rpx;
	padding-top: 38rpx;
	background: #fff;
	height: 100vh;
	.table {
	  .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;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		.go_to{
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;
			top: 0;
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				text-align: left;
				margin-right: 16rpx;
			}
			.img{
				width: 24rpx;
				height: 16rpx;
			}
		}
	}
	.path{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		.item{
			display: flex;
			align-items: center;
			.img{
				width: 40rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
			}
		}
	}
}
</style>