列表

pages/learnPath/allPath.vue

@@ -22,11 +22,112 @@
 			</view>
 		</view>
 		<view class="table">
-			<view class="table-row" v-for="(row, rowIndex) in tableData" :key="rowIndex">
+			<view class="table-container">
-			  <view class="table-cell" v-for="(cell, cellIndex) in row" :key="cellIndex">
+			    <table width="100%">
-				{{ cell }}
+			      <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: [
+				 gridData: [{
-				         ['Header 1', 'Header 2', 'Header 3'],
+					 name: '市场企划岗',
-				         ['Row 1, Cell 1', 'Row 1, Cell 2', 'Row 1, Cell 3'],
+					 marketStatus: 0,
-				         ['Row 2, Cell 1', 'Row 2, Cell 2', 'Row 2, Cell 3']
+					 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;
+	  .table-container {
-	  width: 100%;
+	    width: 100%;
-	}
+	    overflow-x: auto;
-	.table-row {
+	  }
-	  display: table-row;
+	  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;
+	  }
 	}
 	
-	.table-cell {
-	  display: table-cell;
-	  border: 1px solid #ddd;
-	  padding: 10px;
-	  text-align: center;
-	  vertical-align: middle;
-	}
 	.headers{
 		/* margin-top: 38rpx; */
 		position: relative;

pages/learnPath/learnPath.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="learn_path">
 		<view class="path_header">
-			<view class="text">成长路径图</view>
+			<view class="text">{{$route.query.name}}</view>
 		</view>
 		<view class="path_body">
 			<view class="body_header">
@@ -44,7 +44,7 @@
 							</view>
 						</view>
 					</view>
-					<view class="learn_text" :style="{
+					<view @click="showPopup(index)" class="learn_text" :style="{
 								left: getPositionText(item.name, index).left + 'rpx',
 								top: getPositionText(item.name, index).top + 'rpx'
 							}">
@@ -66,10 +66,10 @@
 				<view class="pregress">
 					<view class="text">学习进度</view>
 					<view class="prp">
-						<u-line-progress :percentage="currentItem.currentRatio" :showText="false" height="5" activeColor="#ff0000">
+						<u-line-progress style="width:100%;" :percentage="currentItem.currentRatio" :showText="false" height="5" activeColor="#387DF7 ">
 							
 						</u-line-progress>
-						<!-- <view class="text">{{currentItem.progress || 0}}</view> -->
+						<view class="text">{{currentItem.currentRatio || 0}}%</view>
 					</view>
 				</view>
 				<view class="tea_text">
@@ -429,7 +429,12 @@
 			 }
 			 .prp{
 				 display: flex;
+				 position: relative;
+				 width: 444rpx;
 				 .text{
+					 position: absolute;
+					 right: -78rpx;
+					 top: -14rpx;
 					 font-weight: 400;
 					 font-size: 28rpx;
 					 color: #666666;
@@ -493,15 +498,20 @@
 		 justify-content: center;
 		 margin-bottom: 38rpx;
 		 .text{
+			 max-width: 80%;
 			 margin-top: 26rpx;
 			 height: 60rpx;
 			 font-weight: 600;
 			 font-size: 44rpx;
 			 color: #FFFFFF;
 			 line-height: 60rpx;
+			 overflow: hidden;
+			 white-space: nowrap;
+			 text-overflow: ellipsis;
 		 }
 	 }
 	 .path_body{
+		 height: 100vh;
 		 background: #FFFFFF;
 		 border-radius: 40rpx 40rpx 0rpx 0rpx;
 		 /* height: 100vh; */
@@ -677,8 +687,8 @@
 			 position: absolute;
 			 bottom: 0;
 			 left: 0;
-			 width: 64rpx;
+			 width: 32px;
-			 height: 64rpx;
+			 height: 32px;
 			 clip: rect(16px 64px 32px 16px);
 			 background: inherit;
 			 transform: rotate(45deg);

pages/study/index.vue

@@ -200,7 +200,7 @@
 							<view>总进度</view>
 							<view>{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
 							<view class="line">
-								<u-line-progress :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))" activeColor="#ff0000"></u-line-progress>
+								<u-line-progress :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))" activeColor="#387DF7"></u-line-progress>
 							</view>
 						</view>
 					</view>