feat: 外层header所有页面新增U选小课堂弹窗

This commit is contained in:
mx00085@163.com
2023-03-13 16:08:34 +08:00
parent dfb22b97b3
commit 6b53e3a3a8
6 changed files with 1143 additions and 5 deletions

View File

@@ -235,6 +235,12 @@ export default {
this.$store.dispatch('refrashMsg');
},
methods: {
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
setCurIdentity(iden){
this.$store.dispatch('SetCurIdentity',iden);
},

View File

@@ -1,7 +1,7 @@
2<template>
<div id="article-list-content" class="article-list-content">
<div class="article-banner">
<portal-header current="article" textColor="#ffffff" @emitInput="emitInput"></portal-header>
<portal-header current="article" textColor="#ffffff" @emitInput="emitInput" @showClass="showClass"></portal-header>
</div>
<!--内容区域-->
<div style="padding-top:30px" class="">
@@ -120,6 +120,53 @@
</el-dialog>
<portal-footer></portal-footer>
<portalFloatTools></portalFloatTools>
<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>
</template>
@@ -153,6 +200,7 @@ export default {
},
data() {
return {
showUClass: false,
ankIds:[],
resonimg:{},
moreState:1,// 1 加载更多 2 加载中 3无数据
@@ -207,6 +255,17 @@ export default {
window.removeEventListener("scroll",this.handleScroll);
},
methods: {
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
showClass(flag) {
if (flag) {
this.showUClass = flag;
}
},
banJump() {
if(this.resonimg.JumpUrl) {
window.open(this.resonimg.JumpUrl);
@@ -422,6 +481,173 @@ export default {
</script>
<style scoped lang="scss">
.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;
}
}
}
.orinfo-text{
font-size: 13px;
color: #666666;

View File

@@ -1,7 +1,7 @@
<template>
<div id="case-list-content">
<div style="margin-bottom:30px" class="case-banner">
<portal-header current="case" textColor="#fff" @emitInput="emitInput"></portal-header>
<portal-header current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
</div>
<div class="xcontent2">
<div class="xcontent2-main" style="margin-right: 30px;">
@@ -215,6 +215,54 @@
</div>
<portal-footer></portal-footer>
<portalFloatTools></portalFloatTools>
<!-- U课堂弹窗 -->
<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>
</template>
@@ -245,6 +293,7 @@ export default {
},
data() {
return {
showUClass: false,
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
resonimg:{},
domain: [],//组织领域
@@ -380,6 +429,17 @@ export default {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
showClass(flag) {
if (flag) {
this.showUClass = flag;
}
},
saveLocalFilters(){
let typeCodeList=[];
this.tagList.forEach(item=>{
@@ -881,6 +941,173 @@ export default {
</script>
<style scoped lang="scss">
.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;
}
}
}
.fieldbox{
display: flex;

View File

@@ -1,7 +1,7 @@
<template>
<div id="couser-list-content" class="couser-list-content">
<div class="course-banner">
<portal-header current="course" textColor="#fff" @emitInput="emitInput"></portal-header>
<portal-header current="course" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
</div>
<div style="padding-top:30px" class="">
<div class="xcontent2">
@@ -298,6 +298,54 @@
</div>
<portal-footer></portal-footer>
<portalFloatTools ref="floatTools"></portalFloatTools>
<!-- U课堂弹窗 -->
<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>
</template>
<script>
@@ -420,6 +468,7 @@ export default {
},
data() {
return {
showUClass: false,
ctypeList:[
{type:1,id:20,name:'录播课',checked:false},
{type:1,id:30,name:'线下课',checked:false},
@@ -548,6 +597,17 @@ export default {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
showClass(flag) {
if (flag) {
this.showUClass = flag;
}
},
saveLocalFilters(){
let typeCodeList=[];
this.stagList.forEach(item=>{
@@ -1154,6 +1214,173 @@ export default {
</script>
<style scoped lang="scss">
.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;
}
}
}
.couresstartTime{
line-height: 26px;
height: 26px;

View File

@@ -1,7 +1,7 @@
<template>
<div class="follow-page">
<div class="follow-banner">
<portal-header current="follow" textColor="#fff" :hideSearch="true" @emitInput="emitInput"></portal-header>
<portal-header current="follow" textColor="#fff" :hideSearch="true" @emitInput="emitInput" @showClass="showClass"></portal-header>
</div>
<div>
<div class="home-page-left">
@@ -168,6 +168,53 @@
<div style="height:200px"></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>
</template>
@@ -198,6 +245,7 @@
components:{portalHeader,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
data(){
return{
showUClass: false,
pageId:'',
loading:false,
loading1:false,
@@ -252,6 +300,17 @@
this.loadOrgDomain();
},
methods:{
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
showClass(flag) {
if (flag) {
this.showUClass = flag;
}
},
emitInput(){
},
@@ -695,6 +754,173 @@
</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;
}
}
}
.div-pagination{
text-align: center;
margin-top:50px;

View File

@@ -1,7 +1,7 @@
<template>
<div id="qa-list-content" class="qa-list-content">
<div class="qa-banner">
<portal-header current="qa" textColor="#000000" class="qa-nav" @emitInput="emitInput"></portal-header>
<portal-header current="qa" textColor="#000000" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portal-header>
</div>
<div style="padding-top:30px" class="portal-content">
@@ -130,6 +130,53 @@
</el-dialog>
<portal-footer></portal-footer>
<portalFloatTools @sure="getQaData(true)"></portalFloatTools>
<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>
</template>
@@ -168,6 +215,7 @@ export default {
// },
data() {
return {
showUClass: false,
ankIds:[],
resonimg:{},
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
@@ -215,6 +263,17 @@ export default {
window.removeEventListener("scroll",this.handleScroll);
},
methods: {
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
showClass(flag) {
if (flag) {
this.showUClass = flag;
}
},
banJump() {
if(this.resonimg.JumpUrl) {
window.open(this.resonimg.JumpUrl);
@@ -453,6 +512,173 @@ export default {
</script>
<style scoped lang="scss">
.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;
}
}
}
.four-line-ellipsis{
display: -webkit-box;
// white-space:pre-wrap;