mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-14 05:16:46 +08:00
路径
This commit is contained in:
zhangsir
166
pages/learnPath/learnPath.vue
Normal file
166
pages/learnPath/learnPath.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="learn_path">
|
||||
<view class="path_header">
|
||||
<view class="text">成长路径图</view>
|
||||
</view>
|
||||
<view class="path_body">
|
||||
<view class="body_header">
|
||||
<view class="left">全岗位路径</view>
|
||||
<view class="right">
|
||||
<u-switch size="14" v-model="openDown" @change="change"></u-switch>
|
||||
<text class="text">高亮显示未完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body_check">
|
||||
<view class="left_check">
|
||||
<view class="left"></view>
|
||||
<view class="text">必修</view>
|
||||
</view>
|
||||
<view class="right_check">
|
||||
<view class="right"></view>
|
||||
<view class="text">选修</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="end_learn">您的学习之旅已结束</view>
|
||||
<view class="learn">
|
||||
<view class="aaa"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
openDown: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.learn_path{
|
||||
background: #387DF7;
|
||||
.path_header{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 38rpx;
|
||||
.text{
|
||||
margin-top: 26rpx;
|
||||
height: 60rpx;
|
||||
font-weight: 600;
|
||||
font-size: 44rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
}
|
||||
.path_body{
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||||
height: 100vh;
|
||||
.body_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 204rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
background: #387DF7;
|
||||
border-radius: 26rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
margin-left: 30rpx;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
margin-right: 34rpx;
|
||||
.text{
|
||||
height: 40rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body_check{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 34rpx;
|
||||
.left_check{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #34CA2B;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
.text{
|
||||
height: 40rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
.right_check{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 102rpx;
|
||||
.right{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #FE9C4A;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
.text{
|
||||
height: 40rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.end_learn{
|
||||
text-align: right;
|
||||
margin-top: 30rpx;
|
||||
margin-right: 24rpx;
|
||||
height: 40rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #387DF7;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.learn{
|
||||
width: 616rpx;
|
||||
height: 952rpx;
|
||||
background: url("../../static/images/learnpath/7learn.png") no-repeat;
|
||||
background-size: 100%;
|
||||
.aaa{
|
||||
width: 64rpx;
|
||||
height: 68rpx;
|
||||
background: linear-gradient( 180deg, #66B1FC 0%, #3C82F7 99%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -130,11 +130,15 @@
|
||||
<view class="learn_header">
|
||||
<view class="learn_left">
|
||||
<text class="text">我的成长路径</text>
|
||||
<image src="../../static/images/learnpath/why.png" class="image"></image>
|
||||
<image @click="contentOn" src="../../static/images/learnpath/why.png" class="image"></image>
|
||||
<view class="up_content" v-show="upContent">
|
||||
<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～</view>
|
||||
<image @click="contentOut" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="learn_right">
|
||||
<text class="text">什么是成长路径</text>
|
||||
<image class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
|
||||
<image @click="onLearnModal" class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
@@ -145,6 +149,25 @@
|
||||
<text>京东方集团股份有限公司</text>
|
||||
<text> 学习状态：进行中</text>
|
||||
</view>
|
||||
<view class="plan_item">
|
||||
<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
|
||||
<text class="text" @click="planDown = true">共享文档</text>
|
||||
<view class="plan_down" v-show="planDown">
|
||||
<image @click="planDown = false" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
|
||||
<view class="header">
|
||||
共享文档
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="left">
|
||||
<image class="img" src="" mode=""></image>
|
||||
<text class="text">人工智能启蒙讲解讲义.pptx</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
下载
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body_item">
|
||||
<view class="body_top">
|
||||
@@ -155,6 +178,30 @@
|
||||
请各位选课的同学提前阅读本课程的 “教学大纲与计划”、“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组每位同学在网上学习的活动轨迹都会自动被系统记录將作为大家个人线上参与的评价依据;请大家务必......
|
||||
</view>
|
||||
</view>
|
||||
<view class="body_item">
|
||||
<view class="body_top">
|
||||
<image class="img" src="../../static/images/learnpath/plan.png" mode=""></image>
|
||||
<text class="text">学习进度</text>
|
||||
</view>
|
||||
<view class="body_plan">
|
||||
<view class="plan_left">
|
||||
<view class="left">
|
||||
<view style="margin-bottom: 24rpx;">总任务：</view>
|
||||
<view>当前任务：</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view style="margin-bottom: 24rpx;">10门</view>
|
||||
<view>产品考试</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="plan_right">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="go_learn" @click="goLearn">
|
||||
开始学习
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy" ref="uModal" :asyncClose="true">
|
||||
@@ -206,6 +253,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay> -->
|
||||
<u-modal :show="learnModal" :showConfirmButton="false" width="200px">
|
||||
<view class="item_modal">
|
||||
<view class="item_title">
|
||||
成长路径说明
|
||||
</view>
|
||||
<view class="item_text">
|
||||
本功能针对学员所在组织、岗位、职级自动匹配成长路径，完成本路径方可晋升
|
||||
</view>
|
||||
<view class="item_btn" @click="outLearnModal">
|
||||
我已阅读
|
||||
</view>
|
||||
<view class="item_check">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox v-model="checked" shape="square" label="下次进入不在弹窗"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@@ -222,6 +287,10 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
planDown: false,
|
||||
upContent: false,
|
||||
checked: false,
|
||||
learnModal: false,
|
||||
Applistatus:'',
|
||||
autonomyStatusShow: false,
|
||||
delData: {},
|
||||
@@ -350,6 +419,23 @@
|
||||
}, 500);
|
||||
},
|
||||
methods: {
|
||||
goLearn() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/learnPath/learnPath'
|
||||
});
|
||||
},
|
||||
contentOn() {
|
||||
this.upContent = true
|
||||
},
|
||||
contentOut() {
|
||||
this.upContent = false
|
||||
},
|
||||
onLearnModal() {
|
||||
this.learnModal = true
|
||||
},
|
||||
outLearnModal() {
|
||||
this.learnModal = false
|
||||
},
|
||||
reSetList() {
|
||||
this.studyList.forEach(item=>{
|
||||
item.delcour = false;
|
||||
@@ -788,6 +874,48 @@
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
padding: 33px 25px 33px 25px;
|
||||
background: linear-gradient( 180deg, #E8ECFF 0%, #FFFFFF 100%);
|
||||
}
|
||||
.item_modal{
|
||||
|
||||
.item_title{
|
||||
margin: 0 auto;
|
||||
margin-top: -22rpx;
|
||||
height: 50rpx;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
line-height: 50rpx;
|
||||
margin-bottom: 38rpx;
|
||||
}
|
||||
.item_text{
|
||||
height: 96rpx;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 48rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.item_btn{
|
||||
width: 220rpx;
|
||||
height: 68rpx;
|
||||
background: linear-gradient( 90deg, #5390FD 0%, #3162FA 100%);
|
||||
border-radius: 8rpx;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
line-height: 68rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 56rpx;
|
||||
}
|
||||
.item_check{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 28rpx;
|
||||
margin-bottom: -14rpx;
|
||||
}
|
||||
}
|
||||
.learn{
|
||||
.line{
|
||||
@@ -802,6 +930,7 @@
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
.learn_left{
|
||||
position: relative;
|
||||
margin-left: 36rpx;
|
||||
.text{
|
||||
width: 192rpx;
|
||||
@@ -819,6 +948,32 @@
|
||||
height: 32rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.up_content{
|
||||
width: 712rpx;
|
||||
height: 264rpx;
|
||||
background: url("../../static/images/learnpath/downImg.png") no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: -50rpx;
|
||||
z-index: 600;
|
||||
.text{
|
||||
width: 488rpx;
|
||||
height: 120rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin: 74rpx 152rpx 70rpx 72rpx;
|
||||
}
|
||||
.down{
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
right: 52rpx;
|
||||
top: 64rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.learn_right{
|
||||
width: 300rpx;
|
||||
@@ -853,6 +1008,7 @@
|
||||
border: 2rpx solid #E4EDFE;
|
||||
margin: 24rpx 28rpx 40rpx 30rpx;
|
||||
padding: 40rpx 28rpx 32rpx 40rpx;
|
||||
position: relative;
|
||||
.name{
|
||||
height: 44rpx;
|
||||
font-weight: 600;
|
||||
@@ -870,6 +1026,86 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.plan_item{
|
||||
position: absolute;
|
||||
top: 216rpx;
|
||||
right: 0;
|
||||
.image{
|
||||
width: 42rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.text{
|
||||
height: 44rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #409EFF;
|
||||
line-height: 44rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.plan_down{
|
||||
position: absolute;
|
||||
z-index: 900;
|
||||
right: -44rpx;
|
||||
top: 26rpx;
|
||||
width: 780rpx;
|
||||
max-height: 756rpx;
|
||||
background: url("../../static/images/learnpath/downppt.png") no-repeat;
|
||||
background-size: 100%;
|
||||
margin-bottom: 36rpx;
|
||||
padding-bottom: 36rpx;
|
||||
.down{
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
right: 66rpx;
|
||||
}
|
||||
.header{
|
||||
margin: 0 auto;
|
||||
margin-top: 80rpx;
|
||||
width: 144rpx;
|
||||
height: 56rpx;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #202020;
|
||||
line-height: 56rpx;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
.body{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
margin-left: 80rpx;
|
||||
.img{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
.text{
|
||||
height: 40rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
text-align: center;
|
||||
width: 140rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #387DF7;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #387DF7;
|
||||
margin-right: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.body_item{
|
||||
@@ -901,6 +1137,46 @@
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.body_plan{
|
||||
margin: 32rpx 30rpx 30rpx 28rpx;
|
||||
height: 228rpx;
|
||||
background: linear-gradient( 186deg, #E5EDFB 0%, #F7F9FC 100%);
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
.plan_left{
|
||||
margin: 62rpx 70rpx 60rpx 48rpx;
|
||||
display: flex;
|
||||
.left{
|
||||
height: 40rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #848593;
|
||||
line-height: 40rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.right{
|
||||
height: 42rpx;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: #3B3C4A;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.go_learn{
|
||||
width: 472rpx;
|
||||
height: 96rpx;
|
||||
background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
|
||||
border-radius: 48rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
margin: 0 auto;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
}
|
||||
.delcoures{
|
||||
|
||||
BIN
static/images/learnpath/7learn.png
Normal file
BIN
static/images/learnpath/7learn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
static/images/learnpath/credit.png
Normal file
BIN
static/images/learnpath/credit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
static/images/learnpath/down.png
Normal file
BIN
static/images/learnpath/down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 502 B |
BIN
static/images/learnpath/downImg.png
Normal file
BIN
static/images/learnpath/downImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
static/images/learnpath/downppt.png
Normal file
BIN
static/images/learnpath/downppt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
static/images/learnpath/plane.png
Normal file
BIN
static/images/learnpath/plane.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/images/learnpath/task.png
Normal file
BIN
static/images/learnpath/task.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Reference in New Issue
Block a user