mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 11:26:43 +08:00
样式
This commit is contained in:
NiSen
@@ -1,11 +1,404 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="growth">
|
||||||
成长路径
|
<div style="background-color: #0078fc;">
|
||||||
|
<portalHeader textColor="#fff" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portalHeader>
|
||||||
|
</div>
|
||||||
|
<div class="growth-content">
|
||||||
|
<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
|
||||||
|
<div class="pathdetails">
|
||||||
|
<div class="address">
|
||||||
|
<div class="icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pdname">
|
||||||
|
销售岗Band6路径图
|
||||||
|
</div>
|
||||||
|
<div class="detailinfo">
|
||||||
|
<div class="select">
|
||||||
|
<div>必修</div>
|
||||||
|
<div class="select-radio">选修</div>
|
||||||
|
<div class="select-radio">已完成</div>
|
||||||
|
</div>
|
||||||
|
<div class="detailContent">
|
||||||
|
<div class="detailbgc"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="u-class">
|
||||||
|
<el-dialog :visible.sync="showUClass" width="833px">
|
||||||
|
<div class="ClassBoxContent">
|
||||||
|
<img src="@/assets/images/u_class.png" alt="" class="img" />
|
||||||
|
<div class="ContentBox">
|
||||||
|
<div class="left">
|
||||||
|
<div class="title">U选小课堂</div>
|
||||||
|
<div class="jy">项目简介</div>
|
||||||
|
<div class="msg">
|
||||||
|
于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
|
||||||
|
</div>
|
||||||
|
<div class="bottom"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="tyl" @click="tylClick">
|
||||||
|
<div class="tyl_title">
|
||||||
|
<img src="@/assets/images/dc.png" alt="" class="tyl_title_img" />
|
||||||
|
<span class="tyl_title_msg">通用力专区</span>
|
||||||
|
</div>
|
||||||
|
<div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
|
||||||
|
<div class="tyl_msg">
|
||||||
|
内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cyl" @click="cylClick">
|
||||||
|
<div class="tyl_title">
|
||||||
|
<img src="@/assets/images/cyl.png" alt="" class="tyl_title_img" />
|
||||||
|
<span class="tyl_title_msg">创新力专区</span>
|
||||||
|
</div>
|
||||||
|
<div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
|
||||||
|
<div class="tyl_msg">
|
||||||
|
内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import portalHeader from '@/components/PortalHeader.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'Growth'
|
name: 'Growth',
|
||||||
|
components: { portalHeader },
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showUClass: false,
|
||||||
|
remark: '111',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showClass(flag) {
|
||||||
|
if (flag) {
|
||||||
|
this.showUClass = flag;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emitInput(val) {
|
||||||
|
this.queryKeyWord = val;
|
||||||
|
this.isSeach = true;
|
||||||
|
this.search();
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.address {
|
||||||
|
position: relative;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #b8e3b8;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
clip: rect(26px 100px 50px 26px);
|
||||||
|
background-color: #b8e3b8;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "99%";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
background-color: #8bc94b;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.growth-content {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.pathdetails {
|
||||||
|
padding: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.pdname {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailinfo {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 30px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding-left: 45px;
|
||||||
|
padding-right: 45px;
|
||||||
|
padding-top: 23px;
|
||||||
|
|
||||||
|
.select {
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.select-radio {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailContent {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.detailbgc {
|
||||||
|
width: 1232px;
|
||||||
|
height: 1011px;
|
||||||
|
min-width: 1232px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.u-class {
|
||||||
|
::v-deep .el-dialog {
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
.el-dialog__headerbtn .el-dialog__close {
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__body {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ClassBoxContent {
|
||||||
|
width: 100%;
|
||||||
|
height: 456px;
|
||||||
|
// background: red;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
.ContentBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
padding-left: 30px;
|
||||||
|
width: 48%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 200px;
|
||||||
|
height: 59px;
|
||||||
|
line-height: 59px;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: -8px;
|
||||||
|
font-size: 38px;
|
||||||
|
color: white;
|
||||||
|
margin-top: 42.97px;
|
||||||
|
padding-top: 5px;
|
||||||
|
text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jy {
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 87.53px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
width: 326px;
|
||||||
|
text-align: justify;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 100px;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
// padding-left: 10px;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
.tyl {
|
||||||
|
cursor: pointer;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 160px;
|
||||||
|
margin-top: 83px;
|
||||||
|
|
||||||
|
.tyl_title {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
.tyl_title_img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tyl_title_msg {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tyl_jy {
|
||||||
|
margin-top: 6.5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding-left: 20px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tyl_msg {
|
||||||
|
width: 350.36px;
|
||||||
|
margin-top: 13px;
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tyl:hover {
|
||||||
|
border: 0.96px solid rgba(140, 105, 242, 1);
|
||||||
|
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyl {
|
||||||
|
cursor: pointer;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 160px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.tyl_title {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
.tyl_title_img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tyl_title_msg {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tyl_jy {
|
||||||
|
margin-top: 6.5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding-left: 20px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tyl_msg {
|
||||||
|
width: 350.36px;
|
||||||
|
margin-top: 13px;
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyl:hover {
|
||||||
|
border: 0.96px solid rgba(140, 105, 242, 1);
|
||||||
|
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 835px;
|
||||||
|
margin-left: -1px;
|
||||||
|
margin-top: -1px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user