mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-12 20:36:43 +08:00
feat: U选小课堂内层头部更改
This commit is contained in:
mx00085@163.com
@@ -19,7 +19,7 @@
|
||||
<el-dropdown-item command='one'>BOE系列公开课</el-dropdown-item>
|
||||
<el-dropdown-item command='two' divided>Grow180</el-dropdown-item>
|
||||
<el-dropdown-item command='three' divided>管理者进阶</el-dropdown-item>
|
||||
<el-dropdown-item command='four' divided>U选小课堂</el-dropdown-item>
|
||||
<el-dropdown-item command='for' divided>U选小课堂</el-dropdown-item>
|
||||
<el-dropdown-item command='five' divided>社招新员工</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
@@ -119,6 +119,53 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
<gonggao></gonggao>
|
||||
<div class="u-class">
|
||||
<el-dialog :visible.sync="uClassShow" 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>
|
||||
</template>
|
||||
|
||||
@@ -133,6 +180,7 @@ export default {
|
||||
components:{InterestCollection,GuideBox,gonggao},
|
||||
data() {
|
||||
return {
|
||||
uClassShow: false,
|
||||
isTiao:false,
|
||||
interestShow:false,
|
||||
checked:true,
|
||||
@@ -201,16 +249,20 @@ export default {
|
||||
// four: 'https://m.qingxuetang.com/x/?appId=qxtcorp306130',
|
||||
// five: process.env.VUE_APP_BOE_WEB_URL+'/boe/new-employee/index.html'
|
||||
// };
|
||||
let urlPre=window.location.protocol+'//'+window.location.host;
|
||||
if (val === "for") {
|
||||
this.uClassShow = true;
|
||||
} else {
|
||||
let urlPre = window.location.protocol + "//" + window.location.host;
|
||||
// process.env.VUE_APP_BOE_WEB_URL
|
||||
let obj = {
|
||||
one: urlPre+'/web/teacherLesson',
|
||||
two: urlPre+'/grow180/login',
|
||||
three: this.webBaseUrl + '/study/index?study=1',
|
||||
four: 'https://m.qingxuetang.com/x/?appId=qxtcorp306130',
|
||||
five: urlPre+'/boe/new-employee/index.html'
|
||||
one: urlPre + "/web/teacherLesson",
|
||||
two: urlPre + "/grow180/login",
|
||||
three: this.webBaseUrl + "/study/index?study=1",
|
||||
// four: 'https://m.qingxuetang.com/x/?appId=qxtcorp306130',
|
||||
five: urlPre + "/boe/new-employee/index.html",
|
||||
};
|
||||
window.open(obj[val]);
|
||||
}
|
||||
},
|
||||
handleUcCommand(val){
|
||||
if(val == 'logout'){
|
||||
@@ -258,6 +310,173 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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: 150px;
|
||||
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(137,104,242,0.19);
|
||||
}
|
||||
.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(137,104,242,0.19);
|
||||
}
|
||||
}
|
||||
}
|
||||
.img {
|
||||
width: 835px;
|
||||
margin-left: -1px;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
|
||||
background-color: #fff !important;
|
||||
color: #0059FF !important;
|
||||
|
||||
Reference in New Issue
Block a user