hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-10 19:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 文章页面样式修复

Browse Source
This commit is contained in:
mx00085@163.com
2023-03-15 18:32:15 +08:00
parent 89dec9c5ed
commit 5e32513255
1 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/views/portal/article/Index.vue
View File

@@ -122,43 +122,43 @@
<portalFloatTools></portalFloatTools> <portalFloatTools></portalFloatTools>
<div class="uClass"> <div class="uClass">
<el-dialog :visible.sync="showUClass" width="833px"> <el-dialog :visible.sync="showUClass" width="833px">
<div class="ClassBoxContent"> <div class="ClassBoxContentx">
<img src="../../../assets/images/u_class.png" alt="" class="img" /> <img src="../../../assets/images/u_class.png" alt="" class="imgx" />
<div class="ContentBox"> <div class="ContentBoxx">
<div class="leftBox"> <div class="leftBoxx">
<div class="title">U选小课堂</div> <div class="titlex">U选小课堂</div>
<div class="jy">项目简介</div> <div class="jyx">项目简介</div>
<div class="msg"> <div class="msgx">
于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。 于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
</div> </div>
<div class="bottom"></div> <div class="bottomx"></div>
</div> </div>
<div class="rightBox"> <div class="rightBoxx">
<div class="tyl" @click="tylClick"> <div class="tylx" @click="tylClick">
<div class="tyl_title"> <div class="tyl_titlex">
<img <img
src="../../../assets/images/dc.png" src="../../../assets/images/dc.png"
alt="" alt=""
class="tyl_title_img" class="tyl_title_imgx"
/> />
<span class="tyl_title_msg">通用力专区</span> <span class="tyl_title_msgx">通用力专区</span>
</div> </div>
<div class="tyl_jy">加厚职业素养，轻学习、快成长！</div> <div class="tyl_jyx">加厚职业素养，轻学习、快成长！</div>
<div class="tyl_msg"> <div class="tyl_msgx">
内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科 内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
</div> </div>
</div> </div>
<div class="cyl" @click="cylClick"> <div class="cylx" @click="cylClick">
<div class="tyl_title"> <div class="tyl_titlex">
<img <img
src="../../../assets/images/cyl.png" src="../../../assets/images/cyl.png"
alt="" alt=""
class="tyl_title_img" class="tyl_title_imgx"
/> />
<span class="tyl_title_msg">创新力专区</span> <span class="tyl_title_msgx">创新力专区</span>
</div> </div>
<div class="tyl_jy">激发创新潜力，拓视野、促思考！</div> <div class="tyl_jyx">激发创新潜力，拓视野、促思考！</div>
<div class="tyl_msg"> <div class="tyl_msgx">
内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙 内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙
</div> </div>
</div> </div>
@@ -494,25 +494,25 @@ export default {
::v-deep .el-dialog__body { ::v-deep .el-dialog__body {
padding: 0px; padding: 0px;
} }
.ClassBoxContent { .ClassBoxContentx {
width: 100%; width: 100%;
height: 456px; height: 456px;
// background: red; // background: red;
border-radius: 15px; border-radius: 15px;
.ContentBox { .ContentBoxx {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 9; z-index: 9;
display: flex; display: flex;
.left, .leftx,
.right { .rightx {
height: calc(100% - 30px); height: calc(100% - 30px);
} }
.left { .leftx {
padding-left: 30px; padding-left: 30px;
width: 48%; width: 48%;
.title { .titlex {
width: 200px; width: 200px;
height: 59px; height: 59px;
line-height: 59px; line-height: 59px;
@@ -524,30 +524,30 @@ export default {
padding-top: 5px; padding-top: 5px;
text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4); text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
} }
.jy { .jyx {
color: white; color: white;
font-size: 20px; font-size: 20px;
margin-top: 87.53px; margin-top: 87.53px;
font-weight: 400; font-weight: 400;
} }
.msg { .msgx {
margin-top: 5px; margin-top: 5px;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
width: 326px; width: 326px;
text-align: justify; text-align: justify;
line-height: 20px; line-height: 20px;
} }
.bottom { .bottomx {
width: 100px; width: 100px;
height: 1px; height: 1px;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
margin-top: 40px; margin-top: 40px;
} }
} }
.right { .rightx {
// padding-left: 10px; // padding-left: 10px;
width: 50%; width: 50%;
.tyl { .tylx {
cursor: pointer; cursor: pointer;
width: calc(100% - 20px); width: calc(100% - 20px);
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
@@ -555,29 +555,29 @@ export default {
border-radius: 4px; border-radius: 4px;
height: 160px; height: 160px;
margin-top: 83px; margin-top: 83px;
.tyl_title { .tyl_titlex {
width: 100%; width: 100%;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
.tyl_title_img { .tyl_title_imgx {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.tyl_title_msg { .tyl_title_msgx {
font-size: 20px; font-size: 20px;
margin-left: 10px; margin-left: 10px;
color: #333333; color: #333333;
font-weight: 600; font-weight: 600;
} }
} }
.tyl_jy { .tyl_jyx {
margin-top: 6.5px; margin-top: 6.5px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
padding-left: 20px; padding-left: 20px;
color: #333333; color: #333333;
} }
.tyl_msg { .tyl_msgx {
width: 350.36px; width: 350.36px;
margin-top: 13px; margin-top: 13px;
margin-left: 20px; margin-left: 20px;
@@ -588,11 +588,11 @@ export default {
text-align: justify; text-align: justify;
} }
} }
.tyl:hover { .tylx:hover {
border: 0.96px solid rgba(140, 105, 242, 1); border: 0.96px solid rgba(140, 105, 242, 1);
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3); box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
} }
.cyl { .cylx {
cursor: pointer; cursor: pointer;
width: calc(100% - 20px); width: calc(100% - 20px);
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
@@ -600,29 +600,29 @@ export default {
border-radius: 4px; border-radius: 4px;
height: 160px; height: 160px;
margin-top: 10px; margin-top: 10px;
.tyl_title { .tyl_titlex {
width: 100%; width: 100%;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
.tyl_title_img { .tyl_title_imgx {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.tyl_title_msg { .tyl_title_msgx {
font-size: 20px; font-size: 20px;
margin-left: 10px; margin-left: 10px;
color: #333333; color: #333333;
font-weight: 600; font-weight: 600;
} }
} }
.tyl_jy { .tyl_jyx {
margin-top: 6.5px; margin-top: 6.5px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
padding-left: 20px; padding-left: 20px;
color: #333333; color: #333333;
} }
.tyl_msg { .tyl_msgx {
width: 350.36px; width: 350.36px;
margin-top: 13px; margin-top: 13px;
margin-left: 20px; margin-left: 20px;
@@ -633,13 +633,13 @@ export default {
text-align: justify; text-align: justify;
} }
} }
.cyl:hover { .cylx:hover {
border: 0.96px solid rgba(140, 105, 242, 1); border: 0.96px solid rgba(140, 105, 242, 1);
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24); box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
} }
} }
} }
.img { .imgx {
width: 835px; width: 835px;
margin-left: -1px; margin-left: -1px;
margin-top: -1px; margin-top: -1px;