hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-11 03: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

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

@@ -6,9 +6,7 @@
padding-top: 20px;
margin: 26px auto;
}
.xindex-row{
display: inline-block;
}
// 课程卡片
.xindex-course{
display: inline-block;
@@ -21,7 +19,7 @@
box-sizing: border-box;
position: relative;
background-color: #ffffff;
border-radius: 8px;
.cor-praises {
position: absolute;
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 {
margin: 16px 0 16px 0;
height: 44px;
@@ -156,7 +141,7 @@
}
}
}
.course-score-no {
.course-score-no {
text-align: right;
font-size: 14px;
color: #6B7C85;
@@ -166,8 +151,8 @@
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-score-value {
}
.course-score-value {
font-size: 14px;
// margin-top: 5px;
margin-left: 32px;
@@ -180,68 +165,65 @@
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
// 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;
}
//以下是几种右边排行内容，因为高度需要变化不同，所以需要单独宝义
.xindex-ranking-li{
cursor: pointer;
line-height: 30px;
font-weight: 600;
color: #fff;
display: flex;
position: relative;
.span {
display: flex;
}
.cardmark-info {
color: #fff;
font-size: 14px;
line-height: 20px;
}
}
.xindex-course:hover .cardmark {
opacity: 1;
}
.xindex-ranking-li:hover .list-active {
// transition: all 0.5s;
display: block;
}
.xindex-ranking{
min-width: 300px;
border-radius: 8px;
padding: 30px;
.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;
.xindex-ranking-course{
margin: 0px;
padding: 0px;
overflow-y: auto;
}
.case-index-list{
height: 114px;
}
.xindex-ranking-case{
//height: 114px;
margin: 0px;
padding: 0px;
overflow-y: auto;
}
.anking-index-list{
height: 320px;
}
.xindex-ranking-article{
margin: 0px;
padding: 0px;
overflow-y: auto;
}
.qa-index-qa{
height: 64px;
}
.xindex-ranking-qa{
margin: 0px;
padding: 0px;
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{
width: 75%;
height: 4px;
@@ -250,8 +232,8 @@
position: absolute;
top: 75%;
left: 13%;
}
.current-nav {
}
.current-nav {
color: #387DF7;
font-weight: 700;
>a{
@@ -260,7 +242,7 @@
}
// background: #588afc;
// border-bottom: 4px solid;
}
}
.portal-right-text{
font-size: 24px;
font-family: JCHEadA;
@@ -367,8 +349,8 @@
background: url('/images/list-pink.png') no-repeat 100% / 100%;
}
.art-bgimg{
background: url('/images/contribute.png') no-repeat 100% / 100%;
background-position:top;
background: url('/images/contribute.png') no-repeat top left;
background-size: cover;
}
.portal-images-title{
display: inline-block;
@@ -478,28 +460,42 @@
}
}
}
.xindex-ranking-li{
margin-top:15px;
}
.xindex-ranking-course{
height: 450px;
}
.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;
.xindex-ranking-case{
height: 170px;
}
.xindex-ranking-article{
height: 375px;
}
// .course-image-box :hover .el-image{
// z-index: 999;
// position: absolute;
// top: 0px;
// left: 0px;
// width: 195px !important;
// height: 92px !important;
.xindex-ranking-qa{
height:124px;
}
.xindex-case {
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{
left: 20px;
bottom:20px;
@@ -515,7 +511,6 @@
margin-right: 20px;
}
.boe-case-index{
width: 235px;
height: 246px;
margin-right: 20px;
.case-top{
@@ -547,7 +542,6 @@
}
}
.boe-qa-index{
width: 171px;
height: 194px;
margin-right: 20px;
padding: 17px 12px 16px 12px;
@@ -693,38 +687,27 @@
}
}
}
.portal-right-box{
width: 344px;
.course-index-list{
height: 548px;
overflow-y: auto;
.xindex-ranking-course{
height: 535px;
}
.case-index-list{
height: 230px;
overflow-y: auto;
.xindex-ranking-case{
height: 260px;
}
.anking-index-list{
height: 448px;
overflow-y: auto;
}
.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-article{
height: 445px;
}
.xindex-ranking-qa{
height:175px;
}
.xindex-case {
padding-right: 20px;
}
.case-inter{
left: 20px;
bottom:20px;
@@ -737,12 +720,10 @@
}
}
.modules-list{
margin-right: 30px;
margin-right: 10px;
}
.boe-case-index{
width: 350px;
height: 361px;
margin-right: 36px;
.case-top{
height: 69px;
}
@@ -774,7 +755,7 @@
}
}
.boe-qa-index{
width: 254px;
height: 276px;
margin-right: 36px;
padding: 30px;
@@ -915,39 +896,26 @@
}
}
.portal-right-box{
width: 410px;
.course-index-list{
height: 548px;
overflow-y: auto;
.xindex-ranking-course{
height: 646px;
}
.case-index-list{
height: 262px;
overflow-y: auto;
.xindex-ranking-case{
height: 300px;
}
.anking-index-list{
height: 425px;
overflow-y: auto;
}
.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-article{
height: 455px;
}
.xindex-ranking-qa{
height:220px;
}
.xindex-case {
padding-right: 30px;
}
.case-inter{
left: 20px;
bottom:20px;
@@ -962,10 +930,8 @@
.modules-list{
margin-right: 36px;
}
.boe-case-index{
width: 410px;
.boe-case-index{
height: 396px;
margin-right: 36px;
.case-top{
height: 120px;
}
@@ -996,8 +962,8 @@
}
}
.boe-qa-index{
width: 298px;
.boe-qa-index{
height: 320px;
margin-right: 36px;
padding: 30px;
@@ -1047,8 +1013,8 @@
color: #6E7B84;
}
}
}
.boe-article-index{
}
.boe-article-index{
padding: 30px;
.article-card-left{
width: 352px;
@@ -1117,7 +1083,7 @@
}
}
}
}
}
@media screen and (min-width: 1921px){
@@ -1142,40 +1108,25 @@
}
}
}
.xindex-ranking-course{
height: 610px;
}
.portal-right-box{
width: 410px;
.course-index-list{
height: 548px;
overflow-y: auto;
.xindex-ranking-case{
height: 260px;
}
.case-index-list{
height: 262px;
overflow-y: auto;
}
.anking-index-list{
height: 425px;
overflow-y: auto;
}
.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-article{
height: 420px;
}
.xindex-ranking-qa{
height:188px;
}
.xindex-case {
padding-right: 30px;
}
.case-inter{
left: 20px;
bottom:20px;
@@ -1190,10 +1141,8 @@
.modules-list{
margin-right: 36px;
}
.boe-case-index{
width: 410px;
.boe-case-index{
height: 396px;
margin-right: 36px;
.case-top{
height: 120px;
}
@@ -1223,9 +1172,9 @@
}
}
}
.boe-qa-index{
width: 298px;
}
.boe-qa-index{
height: 320px;
margin-right: 36px;
padding: 30px;
@@ -1275,8 +1224,8 @@
color: #6E7B84;
}
}
}
.boe-article-index{
}
.boe-article-index{
padding: 30px;
.article-card-left{
width: 352px;
@@ -1345,5 +1294,5 @@
}
}
}
}
}

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

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

129
src/views/Index.vue
View File

@@ -56,9 +56,8 @@
<router-link to="/course">查看更多</router-link>
</span>
</div>
<div class="modules-list xrow" style="margin-right:0px">
<!--一个固定内容-->
<div class="modules-list" style="margin-right:0px">
<!-- 一个固定内容 -->
<div class="xindex-course">
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
<div class="xindex-course-image">
@@ -112,18 +111,12 @@
<div class="xcontent2-minor" style="margin-top:60px">
<div class="portal-ranking ranking-bg">
<p class="ranking-title">课程排行榜</p>
<ul class="course-index-list">
<li class="list-info" v-for="(item, index) in scorelist" :key="index"
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
<ul class="xindex-ranking-course">
<li class="xindex-ranking-li" v-for="(item, index) in scorelist" :key="index">
<span class="portal-right-text blue-one">
<img :src="getPic(index)" alt="">
</span>
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''"
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>
<span class="portal-title-desc title-line-ellipsis" style="font-size: 14px;">{{ item.name }}</span>
<div class="list-active">
<div class="list-content">
@@ -160,8 +153,8 @@
</span>
</div>
<div class="modules-list">
<ul class="case-box">
<li class="case-index boe-case-index" v-for="(ca,ind) in caseList.list" :key="ca.id">
<div class="xindex-case" 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-conent">
<p class="cast-time">
@@ -190,16 +183,15 @@
</div>
<!-- -->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<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>
<ul class="case-index-list">
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
<ul class="xindex-ranking-case">
<li class="xindex-ranking-li title-line-ellipsis" v-for="(item, index) in Popularity" :key="index" style="line-height: 22px;">
<span class="portal-right-text orange-one">
<img :src="getPic(index)" alt="">
</span>
@@ -292,34 +284,6 @@
</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>
@@ -327,11 +291,11 @@
</div>
<!--内容块-->
<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>
<ul class="anking-index-list">
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
<ul class="xindex-ranking-article">
<li class="xindex-ranking-li" v-for="(item, index) in ankingList" :key="index" style="line-height: 22px;">
<span class="portal-right-text orange-one">
<img :src="getPic(index)" alt="">
</span>
@@ -357,8 +321,8 @@
</div>
<div class="modules-list">
<!--内容列表内容-->
<ul class="qa-box">
<li class="qa-card boe-qa-index" v-for="qa in qaList.list" :key="qa.id">
<div class="xindex-qa" 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>
<div class="qa-center">
<p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
@@ -376,17 +340,16 @@
</p>
</div>
</div>
</li>
</ul>
</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>
<ul class="qa-index-qa">
<li v-for="(item, index) in answersList" :key="index"
style="margin-top:30px;line-height: 22px;cursor: pointer;">
<ul class="xindex-ranking-qa">
<li class="xindex-ranking-li" v-for="(item, index) in answersList" :key="index" style="line-height: 22px;">
<span class="portal-right-text orange-one">
<img :src="getPic(index)" alt="">
</span>
@@ -1197,8 +1160,8 @@
-webkit-box-orient: vertical;
}
.case-box {
display: flex;
// .case-box {
// display: flex;
.case-index {
position: relative;
@@ -1296,7 +1259,7 @@
}
}
}
}
//}
.casetwo {
border: 1px solid #F0F0F0;
@@ -1591,41 +1554,6 @@
// 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 {
margin-top: 20px;
// width: 100%;
@@ -1878,8 +1806,7 @@
}
}
.qa-box {
display: flex;
.qa-card {
// width: 298px;
@@ -1935,7 +1862,7 @@
display: flex;
}
}
}
}
}
</style>