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

修改首页的布局

Browse Source
This commit is contained in:
daihh
2022-10-08 15:09:20 +08:00
parent 1a570ceb6a
commit 37262ce0df
3 changed files with 542 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
src/assets/styles/portal-index.scss
View File

@@ -6,9 +6,7 @@
padding-top: 20px; padding-top: 20px;
margin: 26px auto; margin: 26px auto;
} }
.xindex-row{
display: inline-block;
}
// 课程卡片 // 课程卡片
.xindex-course{ .xindex-course{
display: inline-block; display: inline-block;
@@ -21,7 +19,7 @@
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px;
.cor-praises { .cor-praises {
position: absolute; position: absolute;
right: 50px; right: 50px;
@@ -94,19 +92,6 @@
} }
} }
} }
// .cor-icon {
// position: absolute;
// left: 100px;
// top: 54px;
// border-radius: 50%;
// background: rgba(88, 138, 252, 0.37);
// .el-icon-caret-right {
// font-size: 36px;
// color: #588afc;
// }
// }
.course-title { .course-title {
margin: 16px 0 16px 0; margin: 16px 0 16px 0;
height: 44px; height: 44px;
@@ -181,67 +166,64 @@
user-select: none; user-select: none;
// font-size: 30px; // font-size: 30px;
} }
.cardmark { //以下是几种右边排行内容，因为高度需要变化不同，所以需要单独宝义
position: absolute; .xindex-ranking-li{
top: 0; cursor: pointer;
left: 0;
width: 100%;
height: 100%;
background: rgba(101, 101, 101, 0.8);
pointer-events: none;
border-radius: 5px;
padding: 10px;
opacity: 0;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
.cardmark-name {
font-size: 18px;
line-height: 30px; line-height: 30px;
font-weight: 600; display: flex;
color: #fff; position: relative;
.span {
display: flex;
} }
.cardmark-info {
color: #fff;
font-size: 14px;
line-height: 20px;
} }
.xindex-ranking-li:hover .list-active {
// transition: all 0.5s;
display: block;
} }
.xindex-course:hover .cardmark {
opacity: 1;
.xindex-ranking-course{
margin: 0px;
padding: 0px;
overflow-y: auto;
} }
.xindex-ranking{ .xindex-ranking-case{
min-width: 300px; //height: 114px;
border-radius: 8px; margin: 0px;
padding: 30px; padding: 0px;
.xindex-ranking-title{
font-size: 24px;
font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
font-weight: 600;
color: #000000;
line-height: 28px;
}
.course-index-list{
height: 410px;
overflow-y: auto; overflow-y: auto;
} }
.case-index-list{
height: 114px; .xindex-ranking-article{
margin: 0px;
padding: 0px;
overflow-y: auto; overflow-y: auto;
} }
.anking-index-list{
height: 320px; .xindex-ranking-qa{
margin: 0px;
padding: 0px;
overflow-y: auto; overflow-y: auto;
} }
.qa-index-qa{
height: 64px; //每块区域
overflow-y: auto; .xindex-case {
display: inline-block;
vertical-align: top;
width: 33.33%;
padding-right: 20px;
} }
.xindex-qa {
display: inline-block;
vertical-align: top;
width: 25%;
padding-right: 20px;
} }
.nav-bottbor{ .nav-bottbor{
width: 75%; width: 75%;
height: 4px; height: 4px;
@@ -367,8 +349,8 @@
background: url('/images/list-pink.png') no-repeat 100% / 100%; background: url('/images/list-pink.png') no-repeat 100% / 100%;
} }
.art-bgimg{ .art-bgimg{
background: url('/images/contribute.png') no-repeat 100% / 100%; background: url('/images/contribute.png') no-repeat top left;
background-position:top; background-size: cover;
} }
.portal-images-title{ .portal-images-title{
display: inline-block; display: inline-block;
@@ -478,28 +460,42 @@
} }
} }
} }
.xindex-ranking-li{
margin-top:15px;
}
.xindex-ranking-course{
height: 450px;
}
.boe-index{ .xindex-ranking-case{
width: 235px; height: 170px;
padding: 20px;
margin-right: 20px;
margin-bottom: 20px;
.course-image-box{
width: 200px;
height: 114px;
::v-deep .course-image{
height: 100% !important;
} }
.xindex-ranking-article{
height: 375px;
} }
// .course-image-box :hover .el-image{
// z-index: 999; .xindex-ranking-qa{
// position: absolute; height:124px;
// top: 0px; }
// left: 0px;
// width: 195px !important; .xindex-case {
// height: 92px !important; padding-right: 20px;
}
// .boe-index{
// width: 235px;
// padding: 20px;
// margin-right: 20px;
// margin-bottom: 20px;
// .course-image-box{
// width: 200px;
// height: 114px;
// ::v-deep .course-image{
// height: 100% !important;
// }
// }
// } // }
}
.case-inter{ .case-inter{
left: 20px; left: 20px;
bottom:20px; bottom:20px;
@@ -515,7 +511,6 @@
margin-right: 20px; margin-right: 20px;
} }
.boe-case-index{ .boe-case-index{
width: 235px;
height: 246px; height: 246px;
margin-right: 20px; margin-right: 20px;
.case-top{ .case-top{
@@ -547,7 +542,6 @@
} }
} }
.boe-qa-index{ .boe-qa-index{
width: 171px;
height: 194px; height: 194px;
margin-right: 20px; margin-right: 20px;
padding: 17px 12px 16px 12px; padding: 17px 12px 16px 12px;
@@ -693,38 +687,27 @@
} }
} }
} }
.portal-right-box{
width: 344px; .xindex-ranking-course{
.course-index-list{ height: 535px;
height: 548px;
overflow-y: auto;
} }
.case-index-list{
height: 230px; .xindex-ranking-case{
overflow-y: auto; height: 260px;
} }
.anking-index-list{
height: 448px; .xindex-ranking-article{
overflow-y: auto; height: 445px;
}
.qa-index-qa{
height: 145px;
overflow-y: auto;
}
}
.boe-index{
width: 350px;
padding: 25px;
margin-right: 20px;
margin-bottom: 20px;
.course-image-box{
width: 300px;
height: 170px;
::v-deep .course-image{
height: 100% !important;
} }
.xindex-ranking-qa{
height:175px;
} }
.xindex-case {
padding-right: 20px;
} }
.case-inter{ .case-inter{
left: 20px; left: 20px;
bottom:20px; bottom:20px;
@@ -737,12 +720,10 @@
} }
} }
.modules-list{ .modules-list{
margin-right: 30px; margin-right: 10px;
} }
.boe-case-index{ .boe-case-index{
width: 350px;
height: 361px; height: 361px;
margin-right: 36px;
.case-top{ .case-top{
height: 69px; height: 69px;
} }
@@ -774,7 +755,7 @@
} }
} }
.boe-qa-index{ .boe-qa-index{
width: 254px;
height: 276px; height: 276px;
margin-right: 36px; margin-right: 36px;
padding: 30px; padding: 30px;
@@ -915,39 +896,26 @@
} }
} }
.portal-right-box{ .xindex-ranking-course{
width: 410px; height: 646px;
.course-index-list{
height: 548px;
overflow-y: auto;
} }
.case-index-list{
height: 262px; .xindex-ranking-case{
overflow-y: auto; height: 300px;
} }
.anking-index-list{
height: 425px; .xindex-ranking-article{
overflow-y: auto; height: 455px;
}
.qa-index-qa{
height: 188px;
overflow-y: auto;
}
}
.boe-index{
width: 410px;
padding: 30px;
margin-right: 36px;
margin-bottom: 36px;
border-radius: 8px;
.course-image-box{
width: 350px;
height: 196x;
::v-deep .course-image{
height: 100% !important;
} }
.xindex-ranking-qa{
height:220px;
} }
.xindex-case {
padding-right: 30px;
} }
.case-inter{ .case-inter{
left: 20px; left: 20px;
bottom:20px; bottom:20px;
@@ -963,9 +931,7 @@
margin-right: 36px; margin-right: 36px;
} }
.boe-case-index{ .boe-case-index{
width: 410px;
height: 396px; height: 396px;
margin-right: 36px;
.case-top{ .case-top{
height: 120px; height: 120px;
} }
@@ -997,7 +963,7 @@
} }
} }
.boe-qa-index{ .boe-qa-index{
width: 298px;
height: 320px; height: 320px;
margin-right: 36px; margin-right: 36px;
padding: 30px; padding: 30px;
@@ -1142,40 +1108,25 @@
} }
} }
} }
.xindex-ranking-course{
height: 610px;
}
.portal-right-box{ .xindex-ranking-case{
width: 410px; height: 260px;
.course-index-list{
height: 548px;
overflow-y: auto;
} }
.case-index-list{
height: 262px; .xindex-ranking-article{
overflow-y: auto; height: 420px;
} }
.anking-index-list{
height: 425px; .xindex-ranking-qa{
overflow-y: auto;
}
.qa-index-qa{
height:188px; height:188px;
overflow-y: auto;
}
}
.boe-index{
width: 410px;
padding: 30px;
margin-right: 36px;
margin-bottom: 36px;
border-radius: 8px;
.course-image-box{
width: 350px;
height: 196x;
::v-deep .course-image{
height: 100% !important;
}
} }
.xindex-case {
padding-right: 30px;
} }
.case-inter{ .case-inter{
left: 20px; left: 20px;
bottom:20px; bottom:20px;
@@ -1191,9 +1142,7 @@
margin-right: 36px; margin-right: 36px;
} }
.boe-case-index{ .boe-case-index{
width: 410px;
height: 396px; height: 396px;
margin-right: 36px;
.case-top{ .case-top{
height: 120px; height: 120px;
} }
@@ -1225,7 +1174,7 @@
} }
} }
.boe-qa-index{ .boe-qa-index{
width: 298px;
height: 320px; height: 320px;
margin-right: 36px; margin-right: 36px;
padding: 30px; padding: 30px;

7
src/assets/styles/portal.scss
View File

@@ -257,7 +257,12 @@ body {margin: 0px;padding: 0px;}
width: 260px; width: 260px;
} }
.portal-ranking{ .portal-ranking{
padding: 30px 15px; padding: 20px 15px;
.ranking-title{
font-size: 18px;
line-height: 25px;
padding-bottom:10px
}
} }
.course-card { .course-card {
padding:20px; padding:20px;

127
src/views/Index.vue
View File

@@ -56,9 +56,8 @@
<router-link to="/course">查看更多</router-link> <router-link to="/course">查看更多</router-link>
</span> </span>
</div> </div>
<div class="modules-list xrow" style="margin-right:0px"> <div class="modules-list" style="margin-right:0px">
<!-- 一个固定内容 --> <!-- 一个固定内容 -->
<div class="xindex-course"> <div class="xindex-course">
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course"> <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
<div class="xindex-course-image"> <div class="xindex-course-image">
@@ -112,18 +111,12 @@
<div class="xcontent2-minor" style="margin-top:60px"> <div class="xcontent2-minor" style="margin-top:60px">
<div class="portal-ranking ranking-bg"> <div class="portal-ranking ranking-bg">
<p class="ranking-title">课程排行榜</p> <p class="ranking-title">课程排行榜</p>
<ul class="course-index-list"> <ul class="xindex-ranking-course">
<li class="list-info" v-for="(item, index) in scorelist" :key="index" <li class="xindex-ranking-li" v-for="(item, index) in scorelist" :key="index">
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
<span class="portal-right-text blue-one"> <span class="portal-right-text blue-one">
<img :src="getPic(index)" alt=""> <img :src="getPic(index)" alt="">
</span> </span>
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" <span class="portal-title-desc title-line-ellipsis" style="font-size: 14px;">{{ item.name }}</span>
style="font-size: 14px;">{{ item.name }}</span>
<span class="portal-title-desc" v-else style="font-size: 14px;">
<img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt="" />
<span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
</span>
<div class="list-active"> <div class="list-active">
<div class="list-content"> <div class="list-content">
@@ -160,8 +153,8 @@
</span> </span>
</div> </div>
<div class="modules-list"> <div class="modules-list">
<ul class="case-box"> <div class="xindex-case" v-for="(ca,ind) in caseList.list" :key="ca.id">
<li class="case-index boe-case-index" v-for="(ca,ind) in caseList.list" :key="ca.id"> <div class="case-index boe-case-index">
<div class="case-top"></div> <div class="case-top"></div>
<div class="case-conent"> <div class="case-conent">
<p class="cast-time"> <p class="cast-time">
@@ -190,16 +183,15 @@
</div> </div>
<!-- --> <!-- -->
</div> </div>
</li> </div>
</ul> </div>
</div> </div>
</div> </div>
<div class="xcontent2-minor"> <div class="xcontent2-minor">
<div style="margin-top:60px" class="portal-ranking ranking-bg"> <div class="portal-ranking ranking-bg" style="margin-top:60px">
<p class="ranking-title">案例排行榜</p> <p class="ranking-title">案例排行榜</p>
<ul class="case-index-list"> <ul class="xindex-ranking-case">
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" <li class="xindex-ranking-li title-line-ellipsis" v-for="(item, index) in Popularity" :key="index" style="line-height: 22px;">
style="cursor: pointer;margin-top:30px;line-height: 22px;">
<span class="portal-right-text orange-one"> <span class="portal-right-text orange-one">
<img :src="getPic(index)" alt=""> <img :src="getPic(index)" alt="">
</span> </span>
@@ -292,34 +284,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="article-info-box">
<div class="article-info">
<div class="article-body" style="display:flex;">
<div style="flex: 1;">
<a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
<div class="article-info-title">
<div class="two-line-ellipsis">
<span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ article.title }}</span>
</div> -->
<!-- <div> -->
<!-- <span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span> -->
<!-- </div> -->
<!-- </div>
<div>
<div class="two-line-ellipsis" style="font-weight: 400;font-size: 14px;color: #6E7B84;word-break:break-all;">{{ article.summary }}</div>
</div>
</a> -->
<!-- <div class="article-other-info" style="margin-top:15px">
<div><authorInfo :avatar="article.authorInfo.avatar" :name="article.authorInfo.name" :sex="article.authorInfo.sex"></authorInfo></div>
<div><interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar></div>
</div>
</div> -->
<!-- <div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
</div> -->
<!-- </div> -->
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -327,11 +291,11 @@
</div> </div>
<!--内容块--> <!--内容块-->
<div class="xcontent2-minor"> <div class="xcontent2-minor">
<div style="margin-top:60px" class="portal-ranking art-bgimg"> <div style="margin-top:60px" class="portal-ranking ranking-bg">
<!-- 排行榜位置 --> <!-- 排行榜位置 -->
<p class="ranking-title">文章排行榜</p> <p class="ranking-title">文章排行榜</p>
<ul class="anking-index-list"> <ul class="xindex-ranking-article">
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;"> <li class="xindex-ranking-li" v-for="(item, index) in ankingList" :key="index" style="line-height: 22px;">
<span class="portal-right-text orange-one"> <span class="portal-right-text orange-one">
<img :src="getPic(index)" alt=""> <img :src="getPic(index)" alt="">
</span> </span>
@@ -357,8 +321,8 @@
</div> </div>
<div class="modules-list"> <div class="modules-list">
<!--内容列表内容--> <!--内容列表内容-->
<ul class="qa-box"> <div class="xindex-qa" v-for="qa in qaList.list" :key="qa.id">
<li class="qa-card boe-qa-index" v-for="qa in qaList.list" :key="qa.id"> <div class="qa-card boe-qa-index" >
<p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p> <p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
<div class="qa-center"> <div class="qa-center">
<p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p> <p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
@@ -376,17 +340,16 @@
</p> </p>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</div> </div>
<div class="xcontent2-minor" style="margin-top:74px"> </div>
</div>
<div class="xcontent2-minor">
<!-- 排行榜 --> <!-- 排行榜 -->
<div class="portal-ranking ranking-bg"> <div class="portal-ranking ranking-bg" style="margin-top:60px">
<p class="ranking-title">问答排行榜</p> <p class="ranking-title">问答排行榜</p>
<ul class="qa-index-qa"> <ul class="xindex-ranking-qa">
<li v-for="(item, index) in answersList" :key="index" <li class="xindex-ranking-li" v-for="(item, index) in answersList" :key="index" style="line-height: 22px;">
style="margin-top:30px;line-height: 22px;cursor: pointer;">
<span class="portal-right-text orange-one"> <span class="portal-right-text orange-one">
<img :src="getPic(index)" alt=""> <img :src="getPic(index)" alt="">
</span> </span>
@@ -1197,8 +1160,8 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.case-box { // .case-box {
display: flex; // display: flex;
.case-index { .case-index {
position: relative; position: relative;
@@ -1296,7 +1259,7 @@
} }
} }
} }
} //}
.casetwo { .casetwo {
border: 1px solid #F0F0F0; border: 1px solid #F0F0F0;
@@ -1591,41 +1554,6 @@
// font-size: 30px; // font-size: 30px;
} }
.cardmark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(101, 101, 101, 0.8);
pointer-events: none;
border-radius: 5px;
padding: 10px;
opacity: 0;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
.cardmark-name {
font-size: 18px;
line-height: 30px;
font-weight: 600;
color: #fff;
}
.cardmark-info {
color: #fff;
font-size: 14px;
line-height: 20px;
}
}
.course-card:hover .cardmark {
opacity: 1;
}
.modules { .modules {
margin-top: 20px; margin-top: 20px;
// width: 100%; // width: 100%;
@@ -1878,8 +1806,7 @@
} }
} }
.qa-box {
display: flex;
.qa-card { .qa-card {
// width: 298px; // width: 298px;
@@ -1935,7 +1862,7 @@
display: flex; display: flex;
} }
} }
}
} }
} }
</style> </style>