mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-16 14:26:43 +08:00
修改路径
This commit is contained in:
zhangsir
@@ -3,9 +3,24 @@
|
||||
<div class="growth_heads">
|
||||
<div class="growth_left">
|
||||
<div class="left_text">我的成长路径</div>
|
||||
<div class="growth_i" @click="explainBody=!explainBody">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="437"
|
||||
trigger="click"
|
||||
:visible-arrow="false"
|
||||
v-model="explainBody"
|
||||
popper-class="growth_explain"
|
||||
>
|
||||
<div slot="reference" class="growth_i">
|
||||
<div class="growth_mark">?</div>
|
||||
</div>
|
||||
<div class="growth_explain1">
|
||||
<div class="growth_explain_text">
|
||||
根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～
|
||||
<div class="explain_close" @click="explainBody = false"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="growth_right">
|
||||
<div class="right_text">什么是成长路径</div>
|
||||
@@ -13,12 +28,6 @@
|
||||
<img class="img" src="../../assets/images/growth/mark.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="explainBody" class="growth_explain">
|
||||
<div class="growth_explain_text">
|
||||
根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～
|
||||
<div class="explain_close" @click="explainBody = false"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="growth_body">
|
||||
<div class="body_head">
|
||||
@@ -31,27 +40,40 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="growth_body_shared" @click="downBody = true">
|
||||
<el-popover
|
||||
placement="bottom-end"
|
||||
width="300"
|
||||
trigger="click"
|
||||
:visible-arrow="false"
|
||||
v-model="downBody"
|
||||
offset="0"
|
||||
popper-class="growth_body_down"
|
||||
>
|
||||
<div slot="reference" class="growth_body_shared">
|
||||
<img class="shared_img" src="../../assets/images/growth/growthRight.png" alt="">
|
||||
<span class="shared_text">共享文档</span>
|
||||
</div>
|
||||
<div class="growth_body_down" v-show="downBody">
|
||||
<div class="growth_body_down">
|
||||
<div class="down_head">
|
||||
<span class="down_head_text">共享文档</span>
|
||||
<div class="down_close" @click="handleClose">
|
||||
<div class="down_close" @click="downBody = false">
|
||||
<img class="down_close_img" src="../../assets/images/growth/close.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="down_body">
|
||||
<div class="down_over">
|
||||
<div class="down_body" v-for="itme in 10">
|
||||
<div class="down_body_left">
|
||||
<img class="left_img" src="../../assets/images/growth/ppt.png" alt="">
|
||||
<span class="left_text">人工智能启蒙讲解讲义.pptx</span>
|
||||
<span title="人工智能启蒙讲解讲义.pptx" class="left_text">人工智能启蒙讲解讲义.pptx</span>
|
||||
</div>
|
||||
<div class="down_btn">
|
||||
<span class="down_btn_text">下载</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<div class="body_explain">
|
||||
<div class="body_explain_icon">
|
||||
<img class="body_explain_img" src="../../assets/images/growth/growthLeft.png" alt="">
|
||||
@@ -132,9 +154,6 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.downBody = false
|
||||
},
|
||||
startLearn(){
|
||||
this.$router.push({
|
||||
path: '/growthpath'
|
||||
@@ -154,6 +173,125 @@ export default {
|
||||
::v-deep .el-dialog__body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.growth_body_down{
|
||||
background-image: url(../../assets/images/growth/fileBack.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:100%;
|
||||
width: 487px;
|
||||
max-height: 452px;
|
||||
position: absolute;
|
||||
right: -120px;
|
||||
top: -22px;
|
||||
padding-right: 32px;
|
||||
.down_head{
|
||||
margin-top: 57px;
|
||||
margin-bottom: 34px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.down_head_text{
|
||||
width: 96px;
|
||||
height: 28px;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: #387DF7;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
.down_close{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 37px;
|
||||
top: -18px;
|
||||
.down_close_img{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.down_over{
|
||||
padding: 0px 40px 0px 63px;
|
||||
overflow-y: auto;
|
||||
max-height: 309px;
|
||||
.down_body{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 22px;
|
||||
.down_body_left{
|
||||
display: flex;
|
||||
.left_img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.left_text{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 18px;
|
||||
width: 210px;
|
||||
height: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #677D86;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.down_btn{
|
||||
cursor: pointer;
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #387DF7;
|
||||
text-align: center;
|
||||
.down_btn_text{
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #387DF7;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.growth_explain{
|
||||
top: 347xp !important;
|
||||
.growth_explain1{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 487px;
|
||||
height: 170px;
|
||||
margin: -37px;
|
||||
background: url("../../assets/images/growth/explain.png") no-repeat;
|
||||
background-size: 100%;
|
||||
.growth_explain_text{
|
||||
width: 376px;
|
||||
height: 56px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
.explain_close{
|
||||
cursor: pointer;
|
||||
background-image: url(../../assets/images/growth/close.png);
|
||||
z-index: 99999;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
right: -21px;
|
||||
top: -26px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.growth{
|
||||
.dialog_body{
|
||||
height: 238px;
|
||||
@@ -246,36 +384,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.growth_explain{
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
top: -13px;
|
||||
left: 118px;
|
||||
width: 487px;
|
||||
height: 170px;
|
||||
background-image: url(../../assets/images/growth/explain.png);
|
||||
.growth_explain_text{
|
||||
width: 376px;
|
||||
height: 56px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
margin: 56px 54px 58px 57px;
|
||||
position: relative;
|
||||
.explain_close{
|
||||
cursor: pointer;
|
||||
background-image: url(../../assets/images/growth/close.png);
|
||||
z-index: 99999;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
right: -21px;
|
||||
top: -26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.growth_body{
|
||||
max-width: 1340px;
|
||||
@@ -305,77 +413,6 @@ export default {
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
.growth_body_down{
|
||||
background-image: url(../../assets/images/growth/fileBack.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:100%;
|
||||
width: 487px;
|
||||
max-height: 452px;
|
||||
position: absolute;
|
||||
right: 23px;
|
||||
top: 116px;
|
||||
.down_head{
|
||||
margin-top: 57px;
|
||||
margin-bottom: 34px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.down_head_text{
|
||||
width: 96px;
|
||||
height: 28px;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: #387DF7;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
.down_close{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 37px;
|
||||
top: -18px;
|
||||
.down_close_img{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.down_body{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 64px 72px 72px 63px;
|
||||
.down_body_left{
|
||||
.left_img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.left_text{
|
||||
margin-left: 18px;
|
||||
width: 210px;
|
||||
height: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #677D86;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.down_btn{
|
||||
cursor: pointer;
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #387DF7;
|
||||
text-align: center;
|
||||
.down_btn_text{
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #387DF7;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.body_head{
|
||||
max-width: 1340px;
|
||||
height: 88px;
|
||||
|
||||
Reference in New Issue
Block a user