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

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

File diff suppressed because it is too large Load Diff

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;

131
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>
</div>
<div class="xcontent2-minor" style="margin-top:74px">
<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,10 +1160,10 @@
-webkit-box-orient: vertical;
}
.case-box {
display: flex;
// .case-box {
// display: flex;
.case-index {
.case-index {
position: relative;
// width: 408px;
// height: 396px;
@@ -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>