mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 20:06:44 +08:00
首页课程适应调整
This commit is contained in:
daihh
@@ -1,9 +1,246 @@
|
||||
/**此文件应该只是包含首页的样式*/
|
||||
|
||||
.portal-right-box{
|
||||
width: 410px;
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
//首页版心内容区域
|
||||
.xindex-content {
|
||||
font-family: 'Noto Sans SC';
|
||||
margin: 26px auto;
|
||||
}
|
||||
.xindex-row{
|
||||
display: inline-block;
|
||||
}
|
||||
// 课程卡片
|
||||
.xindex-course{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border:1px solid #efefef;
|
||||
padding: 20px;
|
||||
font-size:0;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
|
||||
.cor-praises {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 16px;
|
||||
.interact-bar-btn{
|
||||
.interact-bar-value{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xindex-course-image{
|
||||
position: relative;
|
||||
min-height: 114px;
|
||||
// width: 350px;
|
||||
// height: 200px;
|
||||
// width: 100%;
|
||||
.course-type {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background-color: #f99000;
|
||||
border-radius: 2px 4px 2px 14px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
.course-type-title {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0px;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
.course-flag {
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
}
|
||||
.course-tip {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
.course-study-count {
|
||||
float: left;
|
||||
}
|
||||
.course-time {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
.course-author {
|
||||
// margin: 5px 15px;
|
||||
// padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.course-author-left {
|
||||
font-size: 14px;
|
||||
color: #6E7B84;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.study-num {
|
||||
font-size: 14px;
|
||||
color: #6E7B84;
|
||||
margin-left: 12px;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
.course-score {
|
||||
padding: 10px 15px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
// border-top: 1px solid #ccc;
|
||||
.course-score-star {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-score-no {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #6B7C85;
|
||||
line-height: 30px;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
.course-score-value {
|
||||
font-size: 14px;
|
||||
// margin-top: 5px;
|
||||
margin-left: 32px;
|
||||
line-height: 30px;
|
||||
color: #FA6400;
|
||||
font-family: 'Arial';
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-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;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
.cardmark-info {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.xindex-course:hover .cardmark {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.case-index-list{
|
||||
height: 114px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.anking-index-list{
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.qa-index-qa{
|
||||
height: 64px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.nav-bottbor{
|
||||
width: 75%;
|
||||
height: 4px;
|
||||
@@ -219,43 +456,26 @@
|
||||
}
|
||||
// boe-index
|
||||
@media screen and (max-width: 1366px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 5%;
|
||||
}
|
||||
.portal-content {
|
||||
margin: 26px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
.xindex-content{
|
||||
width: 1100px;
|
||||
}
|
||||
//课程卡片样式
|
||||
.xindex-course{
|
||||
width: 240px;
|
||||
padding: 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
.course-image-box{
|
||||
width: 200px;
|
||||
height: 114px;
|
||||
::v-deep .course-image{
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portal-right-box{
|
||||
width: 344px;
|
||||
// height: 544px;
|
||||
// overflow-y: auto;
|
||||
.course-index-list{
|
||||
height: 410px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.case-index-list{
|
||||
height: 114px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.anking-index-list{
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.qa-index-qa{
|
||||
height: 64px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.xindex-ranking{
|
||||
width: 300px;
|
||||
}
|
||||
.boe-index{
|
||||
width: 235px;
|
||||
padding: 20px;
|
||||
@@ -449,23 +669,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1680px) and (min-width:1367px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 5%;
|
||||
@media screen and (max-width: 1680px) and (min-width:1367px){
|
||||
.xindex-content{
|
||||
width: 1366px;
|
||||
}
|
||||
.portal-content {
|
||||
margin: 26px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
.xindex-course{
|
||||
width: 330px;
|
||||
padding: 25px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
.course-image-box{
|
||||
width: 280px;
|
||||
height: 100px;
|
||||
::v-deep .course-image{
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.portal-right-box{
|
||||
width: 344px;
|
||||
.course-index-list{
|
||||
@@ -662,25 +882,27 @@
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
// margin: 0px 5%;
|
||||
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
||||
.xindex-content{
|
||||
width: 1640px;
|
||||
}
|
||||
.portal-content {
|
||||
margin: 26px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
.xindex-course{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portal-right-box{
|
||||
width: 410px;
|
||||
@@ -887,24 +1109,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1921px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 8%;
|
||||
@media screen and (min-width: 1921px){
|
||||
.xindex-content{
|
||||
width: 1880px;
|
||||
}
|
||||
|
||||
.portal-content {
|
||||
// margin: 26px 87px 0px 87px;
|
||||
width: 1746px;
|
||||
margin: 0 auto;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
.xindex-course{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portal-right-box{
|
||||
width: 410px;
|
||||
|
||||
@@ -240,7 +240,7 @@ export default {
|
||||
// box-shadow:0px 0px 10px #999;
|
||||
border-radius: 4px;
|
||||
// border: 1px solid #f0f0f0;
|
||||
right: 24px;
|
||||
right: 15px;//由24修改为15
|
||||
bottom: 126px;
|
||||
// padding:0 8px;
|
||||
display: flex;
|
||||
|
||||
@@ -35,11 +35,11 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portal-content xcontent" >
|
||||
<div class="xindex-content" >
|
||||
<!-- 推荐课程 -->
|
||||
<div class="modules">
|
||||
<div>
|
||||
<!--内容块-->
|
||||
<!--内容块-->
|
||||
<div class="modules-title">
|
||||
<span class="modules-text">推荐课程</span>
|
||||
<span class="quyer-tag">
|
||||
@@ -57,10 +57,10 @@
|
||||
</div>
|
||||
<div class="modules-list xrow" style="margin-right:0px">
|
||||
<!--一个固定内容-->
|
||||
<div class="xrow-course course-index">
|
||||
<div class="course-card boe-index">
|
||||
|
||||
<div class="xindex-course">
|
||||
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
|
||||
<div class="course-image-box">
|
||||
<div class="xindex-course-image">
|
||||
<el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
|
||||
<span class="course-type">录播课</span>
|
||||
</div>
|
||||
@@ -78,12 +78,11 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--内容列表内容-->
|
||||
<div v-for="course in courseList.list" :key="course.id" class="xrow-course course-index">
|
||||
<div class="course-card boe-index">
|
||||
<div v-for="course in courseList.list" :key="course.id" class="xindex-course">
|
||||
<a :href="toCourseDetail(course)">
|
||||
<div class="course-image-box">
|
||||
<div class="xindex-course-image">
|
||||
<course-image :course="course"></course-image>
|
||||
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
|
||||
</div>
|
||||
@@ -101,13 +100,12 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:60px">
|
||||
<div class="ranking-card portal-right-box course-ran-bg">
|
||||
<div class="ranking-card xindex-ranking course-ran-bg">
|
||||
<p class="portal-title-one" style="padding-bottom:12px">课程排行榜</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;">
|
||||
@@ -139,7 +137,7 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 推荐案例2版 -->
|
||||
|
||||
Reference in New Issue
Block a user