hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-14 21:36:45 +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

202
pages/learnPath/allPath.vue
View File

@@ -22,10 +22,111 @@
</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>
<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>
@@ -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;
.table-container {
width: 100%;
overflow-x: auto;
}
.table-row {
display: table-row;
table {
width: 100%;
border-collapse: collapse;
}
.table-cell {
display: table-cell;
border: 1px solid #ddd;
padding: 10px;
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;

22
pages/learnPath/learnPath.vue
View File

@@ -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;
height: 64rpx;
width: 32px;
height: 32px;
clip: rect(16px 64px 32px 16px);
background: inherit;
transform: rotate(45deg);

2
pages/study/index.vue
View File

@@ -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>