mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-12 04:16:45 +08:00
首页课程适应调整
This commit is contained in:
daihh
@@ -1,9 +1,246 @@
|
|||||||
|
/**此文件应该只是包含首页的样式*/
|
||||||
|
|
||||||
.portal-right-box{
|
//首页版心内容区域
|
||||||
width: 410px;
|
.xindex-content {
|
||||||
border-radius: 8px;
|
font-family: 'Noto Sans SC';
|
||||||
padding: 30px;
|
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{
|
.nav-bottbor{
|
||||||
width: 75%;
|
width: 75%;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
@@ -219,43 +456,26 @@
|
|||||||
}
|
}
|
||||||
// boe-index
|
// boe-index
|
||||||
@media screen and (max-width: 1366px){
|
@media screen and (max-width: 1366px){
|
||||||
.xcontent{
|
.xindex-content{
|
||||||
// width: 1000px;
|
width: 1100px;
|
||||||
// margin: 0px auto;
|
}
|
||||||
margin: 0px 5%;
|
//课程卡片样式
|
||||||
}
|
.xindex-course{
|
||||||
.portal-content {
|
width: 240px;
|
||||||
margin: 26px 87px 0px 87px;
|
padding: 20px;
|
||||||
// width: 100%;
|
margin-right: 20px;
|
||||||
.breadcrumb-nav {
|
margin-bottom: 20px;
|
||||||
margin-bottom: 15px;
|
.course-image-box{
|
||||||
font-size: 14px;
|
width: 200px;
|
||||||
font-weight: normal;
|
height: 114px;
|
||||||
color: #666666;
|
::v-deep .course-image{
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.xindex-ranking{
|
||||||
.portal-right-box{
|
width: 300px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.boe-index{
|
.boe-index{
|
||||||
width: 235px;
|
width: 235px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@@ -320,7 +540,7 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.boe-qa-index{
|
.boe-qa-index{
|
||||||
@@ -351,7 +571,7 @@
|
|||||||
::v-deep .item-author div{
|
::v-deep .item-author div{
|
||||||
width: 30px !important;
|
width: 30px !important;
|
||||||
height: 30px !important;
|
height: 30px !important;
|
||||||
}
|
}
|
||||||
.el-avatar{
|
.el-avatar{
|
||||||
width: 26px !important;
|
width: 26px !important;
|
||||||
height: 26px !important;
|
height: 26px !important;
|
||||||
@@ -391,7 +611,7 @@
|
|||||||
.article-info-image-box{
|
.article-info-image-box{
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 112px;
|
height: 112px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.el-avatar{
|
.el-avatar{
|
||||||
width: 26px !important;
|
width: 26px !important;
|
||||||
@@ -444,28 +664,28 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1680px) and (min-width:1367px){
|
@media screen and (max-width: 1680px) and (min-width:1367px){
|
||||||
.xcontent{
|
.xindex-content{
|
||||||
// width: 1000px;
|
width: 1366px;
|
||||||
// margin: 0px auto;
|
|
||||||
margin: 0px 5%;
|
|
||||||
}
|
}
|
||||||
.portal-content {
|
.xindex-course{
|
||||||
margin: 26px 87px 0px 87px;
|
width: 330px;
|
||||||
// width: 100%;
|
padding: 25px;
|
||||||
.breadcrumb-nav {
|
margin-right: 20px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 20px;
|
||||||
font-size: 14px;
|
.course-image-box{
|
||||||
font-weight: normal;
|
width: 280px;
|
||||||
color: #666666;
|
height: 100px;
|
||||||
|
::v-deep .course-image{
|
||||||
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.portal-right-box{
|
.portal-right-box{
|
||||||
width: 344px;
|
width: 344px;
|
||||||
.course-index-list{
|
.course-index-list{
|
||||||
@@ -543,7 +763,7 @@
|
|||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.boe-qa-index{
|
.boe-qa-index{
|
||||||
@@ -607,7 +827,7 @@
|
|||||||
.article-info-image-box{
|
.article-info-image-box{
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 162px;
|
height: 162px;
|
||||||
|
|
||||||
}
|
}
|
||||||
// .el-avatar{
|
// .el-avatar{
|
||||||
// width: 26px !important;
|
// width: 26px !important;
|
||||||
@@ -659,252 +879,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
|
||||||
.xcontent{
|
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
||||||
// width: 1000px;
|
.xindex-content{
|
||||||
// margin: 0px auto;
|
width: 1640px;
|
||||||
// margin: 0px 5%;
|
|
||||||
}
|
}
|
||||||
.portal-content {
|
.xindex-course{
|
||||||
margin: 26px 87px 0px 87px;
|
width: 410px;
|
||||||
// width: 100%;
|
padding: 30px;
|
||||||
.breadcrumb-nav {
|
margin-right: 36px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 36px;
|
||||||
font-size: 14px;
|
border-radius: 8px;
|
||||||
font-weight: normal;
|
.course-image-box{
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal-right-box{
|
|
||||||
width: 410px;
|
|
||||||
.course-index-list{
|
|
||||||
height: 548px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.case-inter{
|
|
||||||
left: 20px;
|
|
||||||
bottom:20px;
|
|
||||||
// .interact-bar-index{
|
|
||||||
// display: none !important;
|
|
||||||
// }
|
|
||||||
::v-deep .el-avatar--small{
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modules-list{
|
|
||||||
margin-right: 36px;
|
|
||||||
}
|
|
||||||
.boe-case-index{
|
|
||||||
width: 410px;
|
|
||||||
height: 396px;
|
|
||||||
margin-right: 36px;
|
|
||||||
.case-top{
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
.case-conent{
|
|
||||||
width: 350px;
|
width: 350px;
|
||||||
height: 274px;
|
height: 196x;
|
||||||
top:30px;
|
::v-deep .course-image{
|
||||||
left:30px;
|
height: 100% !important;
|
||||||
padding: 30px;
|
}
|
||||||
.time-one{
|
|
||||||
padding:3px 10px;
|
|
||||||
}
|
|
||||||
.cast-time{
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
.case-title{
|
|
||||||
font-size: 16px;
|
|
||||||
height: 48px;
|
|
||||||
line-height: 24px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.case-text{
|
|
||||||
height: 60px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.boe-qa-index{
|
|
||||||
width: 298px;
|
|
||||||
height: 320px;
|
|
||||||
margin-right: 36px;
|
|
||||||
padding: 30px;
|
|
||||||
.qa-center{
|
|
||||||
height: 152px;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 20px;
|
|
||||||
.portal-index-title{
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.boe-qa-sum{
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 22px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.qa-views{
|
|
||||||
left: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.qa-char{
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
::v-deep img{
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
.info-name{
|
|
||||||
font-size: 12px;
|
|
||||||
color: #6E7B84;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.qa-top{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
& span:first-child{
|
|
||||||
background: rgba($color: #387DF7, $alpha: 0.05);
|
|
||||||
padding: 3px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #387DF7;
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
font-size: 14px;
|
|
||||||
color: #6E7B84;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.boe-article-index{
|
|
||||||
padding: 30px;
|
|
||||||
.article-card-left{
|
|
||||||
width: 352px;
|
|
||||||
.article-info-index-summary{
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #6E7B84;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.article-info-image-box{
|
|
||||||
width: 352px;
|
|
||||||
height: 196px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.el-avatar{
|
|
||||||
width: 32px !important;
|
|
||||||
height: 32px !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.article-card-right{
|
|
||||||
.article-li{
|
|
||||||
// height: 160px;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
.article-img{
|
|
||||||
flex: 43%;
|
|
||||||
width: 252px;
|
|
||||||
height: 144px;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 10px;
|
|
||||||
img{
|
|
||||||
width: 252px;
|
|
||||||
height: 144px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.article-right{
|
|
||||||
flex: 100%;
|
|
||||||
.article-info-title{
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #00253E;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
margin-top: 10px;
|
|
||||||
// width: 50%;
|
|
||||||
}
|
|
||||||
.article-info-summary{
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #6E7B84;
|
|
||||||
// margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.article-bottom{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
::v-deep .uavatar{
|
|
||||||
width:34px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
.el-avatar{
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1921px){
|
|
||||||
.xcontent{
|
|
||||||
// width: 1000px;
|
|
||||||
// margin: 0px auto;
|
|
||||||
margin: 0px 8%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal-right-box{
|
.portal-right-box{
|
||||||
width: 410px;
|
width: 410px;
|
||||||
@@ -984,7 +982,7 @@
|
|||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.boe-qa-index{
|
.boe-qa-index{
|
||||||
@@ -1052,7 +1050,7 @@
|
|||||||
.article-info-image-box{
|
.article-info-image-box{
|
||||||
width: 352px;
|
width: 352px;
|
||||||
height: 196px;
|
height: 196px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.el-avatar{
|
.el-avatar{
|
||||||
width: 32px !important;
|
width: 32px !important;
|
||||||
@@ -1105,7 +1103,231 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1921px){
|
||||||
|
.xindex-content{
|
||||||
|
width: 1880px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
.course-index-list{
|
||||||
|
height: 548px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.case-inter{
|
||||||
|
left: 20px;
|
||||||
|
bottom:20px;
|
||||||
|
// .interact-bar-index{
|
||||||
|
// display: none !important;
|
||||||
|
// }
|
||||||
|
::v-deep .el-avatar--small{
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modules-list{
|
||||||
|
margin-right: 36px;
|
||||||
|
}
|
||||||
|
.boe-case-index{
|
||||||
|
width: 410px;
|
||||||
|
height: 396px;
|
||||||
|
margin-right: 36px;
|
||||||
|
.case-top{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.case-conent{
|
||||||
|
width: 350px;
|
||||||
|
height: 274px;
|
||||||
|
top:30px;
|
||||||
|
left:30px;
|
||||||
|
padding: 30px;
|
||||||
|
.time-one{
|
||||||
|
padding:3px 10px;
|
||||||
|
}
|
||||||
|
.cast-time{
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.case-title{
|
||||||
|
font-size: 16px;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.case-text{
|
||||||
|
height: 60px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.boe-qa-index{
|
||||||
|
width: 298px;
|
||||||
|
height: 320px;
|
||||||
|
margin-right: 36px;
|
||||||
|
padding: 30px;
|
||||||
|
.qa-center{
|
||||||
|
height: 152px;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
.portal-index-title{
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.boe-qa-sum{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.qa-views{
|
||||||
|
left: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.qa-char{
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
::v-deep img{
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
.info-name{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6E7B84;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.qa-top{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
& span:first-child{
|
||||||
|
background: rgba($color: #387DF7, $alpha: 0.05);
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #387DF7;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6E7B84;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.boe-article-index{
|
||||||
|
padding: 30px;
|
||||||
|
.article-card-left{
|
||||||
|
width: 352px;
|
||||||
|
.article-info-index-summary{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #6E7B84;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.article-info-image-box{
|
||||||
|
width: 352px;
|
||||||
|
height: 196px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-avatar{
|
||||||
|
width: 32px !important;
|
||||||
|
height: 32px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-card-right{
|
||||||
|
.article-li{
|
||||||
|
// height: 160px;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
.article-img{
|
||||||
|
flex: 43%;
|
||||||
|
width: 252px;
|
||||||
|
height: 144px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 10px;
|
||||||
|
img{
|
||||||
|
width: 252px;
|
||||||
|
height: 144px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-right{
|
||||||
|
flex: 100%;
|
||||||
|
.article-info-title{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #00253E;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
margin-top: 10px;
|
||||||
|
// width: 50%;
|
||||||
|
}
|
||||||
|
.article-info-summary{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #6E7B84;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.article-bottom{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
::v-deep .uavatar{
|
||||||
|
width:34px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
.el-avatar{
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -240,7 +240,7 @@ export default {
|
|||||||
// box-shadow:0px 0px 10px #999;
|
// box-shadow:0px 0px 10px #999;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
// border: 1px solid #f0f0f0;
|
// border: 1px solid #f0f0f0;
|
||||||
right: 24px;
|
right: 15px;//由24修改为15
|
||||||
bottom: 126px;
|
bottom: 126px;
|
||||||
// padding:0 8px;
|
// padding:0 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -9,8 +9,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
|
<img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
</swiper>
|
</swiper>
|
||||||
</div>
|
</div>
|
||||||
<div class="personal-panel">
|
<div class="personal-panel">
|
||||||
<div class="personal-img">
|
<div class="personal-img">
|
||||||
<author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
|
<author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
|
||||||
@@ -35,11 +35,11 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="portal-content xcontent" >
|
<div class="xindex-content" >
|
||||||
<!-- 推荐课程 -->
|
<!-- 推荐课程 -->
|
||||||
<div class="modules">
|
<div class="modules">
|
||||||
<div>
|
<div>
|
||||||
<!--内容块-->
|
<!--内容块-->
|
||||||
<div class="modules-title">
|
<div class="modules-title">
|
||||||
<span class="modules-text">推荐课程</span>
|
<span class="modules-text">推荐课程</span>
|
||||||
<span class="quyer-tag">
|
<span class="quyer-tag">
|
||||||
@@ -57,10 +57,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="modules-list xrow" style="margin-right:0px">
|
<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">
|
<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>
|
<el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
|
||||||
<span class="course-type">录播课</span>
|
<span class="course-type">录播课</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -78,12 +78,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!--内容列表内容-->
|
<!--内容列表内容-->
|
||||||
<div v-for="course in courseList.list" :key="course.id" class="xrow-course course-index">
|
<div v-for="course in courseList.list" :key="course.id" class="xindex-course">
|
||||||
<div class="course-card boe-index">
|
|
||||||
<a :href="toCourseDetail(course)">
|
<a :href="toCourseDetail(course)">
|
||||||
<div class="course-image-box">
|
<div class="xindex-course-image">
|
||||||
<course-image :course="course"></course-image>
|
<course-image :course="course"></course-image>
|
||||||
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
|
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -101,13 +100,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
|
<div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top:60px">
|
<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>
|
<p class="portal-title-one" style="padding-bottom:12px">课程排行榜</p>
|
||||||
<ul class="course-index-list">
|
<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;">
|
<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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 推荐案例2版 -->
|
<!-- 推荐案例2版 -->
|
||||||
@@ -209,7 +207,7 @@
|
|||||||
<a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" style="font-weight: 700;font-size: 20px;">
|
<a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" style="font-weight: 700;font-size: 20px;">
|
||||||
<div class="article-info-image-box">
|
<div class="article-info-image-box">
|
||||||
<article-image height="100%" width="100%" :article="articleList.first"></article-image>
|
<article-image height="100%" width="100%" :article="articleList.first"></article-image>
|
||||||
</div>
|
</div>
|
||||||
<div class="article-info">
|
<div class="article-info">
|
||||||
<div class="article-info-title " style="margin-top:10px">
|
<div class="article-info-title " style="margin-top:10px">
|
||||||
<div class="one-line-ellipsis">
|
<div class="one-line-ellipsis">
|
||||||
@@ -258,8 +256,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="article-info-box">
|
<!-- <div class="article-info-box">
|
||||||
<div class="article-info">
|
<div class="article-info">
|
||||||
<div class="article-body" style="display:flex;">
|
<div class="article-body" style="display:flex;">
|
||||||
@@ -420,9 +418,9 @@ export default {
|
|||||||
navigation: {
|
navigation: {
|
||||||
nextEl: '.swiper-button-next',
|
nextEl: '.swiper-button-next',
|
||||||
prevEl: '.swiper-button-prev',
|
prevEl: '.swiper-button-prev',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
couname:'',
|
couname:'',
|
||||||
isNext: true,
|
isNext: true,
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
@@ -465,11 +463,11 @@ export default {
|
|||||||
this.getQaAnswers();
|
this.getQaAnswers();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
swiper() {
|
swiper() {
|
||||||
return this.$refs.mySwiper.swiper
|
return this.$refs.mySwiper.swiper
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
// undefined
|
// undefined
|
||||||
@@ -494,7 +492,7 @@ export default {
|
|||||||
this.answersList = res.result;
|
this.answersList = res.result;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
getAnkingData() {// 文章排行榜
|
getAnkingData() {// 文章排行榜
|
||||||
apiIndex.articleViews(7).then(res => {
|
apiIndex.articleViews(7).then(res => {
|
||||||
@@ -525,7 +523,7 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
// bgfun(){
|
// bgfun(){
|
||||||
// console.log(this.$refs.bannimg[0]);
|
// console.log(this.$refs.bannimg[0]);
|
||||||
// this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
// console.log(this.$refs.bannimg[0])
|
// console.log(this.$refs.bannimg[0])
|
||||||
// })
|
// })
|
||||||
@@ -533,7 +531,7 @@ export default {
|
|||||||
couresreso(){
|
couresreso(){
|
||||||
let key = 'index';
|
let key = 'index';
|
||||||
apiPlace.detail(key).then(res=>{
|
apiPlace.detail(key).then(res=>{
|
||||||
let lmj = JSON.parse(res.result.content)
|
let lmj = JSON.parse(res.result.content)
|
||||||
this.resonimg = lmj
|
this.resonimg = lmj
|
||||||
// console.log(this.resonimg)
|
// console.log(this.resonimg)
|
||||||
})
|
})
|
||||||
@@ -845,7 +843,7 @@ export default {
|
|||||||
color: #6E7B84;
|
color: #6E7B84;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ::v-deep .course-image-box :hover .el-image{
|
// ::v-deep .course-image-box :hover .el-image{
|
||||||
@@ -856,7 +854,7 @@ export default {
|
|||||||
// left: -35px;
|
// left: -35px;
|
||||||
// width: 420px !important;
|
// width: 420px !important;
|
||||||
// height: 236px !important;
|
// height: 236px !important;
|
||||||
|
|
||||||
// }
|
// }
|
||||||
.course-ran-bg{
|
.course-ran-bg{
|
||||||
background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
|
background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
|
||||||
@@ -915,7 +913,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.personal-ul{
|
.personal-ul{
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.label{
|
.label{
|
||||||
@@ -1021,7 +1019,7 @@ export default {
|
|||||||
filter:blur(5px);
|
filter:blur(5px);
|
||||||
z-index:-1;
|
z-index:-1;
|
||||||
background-size:100% 100%;
|
background-size:100% 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep.swiper-slide .games .swiper-slide-active{
|
::v-deep.swiper-slide .games .swiper-slide-active{
|
||||||
@@ -1079,7 +1077,7 @@ export default {
|
|||||||
background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
|
background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
|
||||||
}
|
}
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
.case-inter{
|
.case-inter{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -1132,7 +1130,7 @@ export default {
|
|||||||
// height: 60px;
|
// height: 60px;
|
||||||
// font-size: 14px;
|
// font-size: 14px;
|
||||||
color: #6E7B84;
|
color: #6E7B84;
|
||||||
// line-height: 20px;
|
// line-height: 20px;
|
||||||
// margin-bottom: 30px;
|
// margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
::v-deep .case-info{
|
::v-deep .case-info{
|
||||||
@@ -1227,7 +1225,7 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
|
||||||
::v-deep .cor-praises {
|
::v-deep .cor-praises {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 52px;
|
right: 52px;
|
||||||
@@ -1548,7 +1546,7 @@ export default {
|
|||||||
.article-card-left {
|
.article-card-left {
|
||||||
// float: left;
|
// float: left;
|
||||||
.article-card-box {
|
.article-card-box {
|
||||||
|
|
||||||
.article-info-image-box {
|
.article-info-image-box {
|
||||||
.article-info {
|
.article-info {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
|||||||
Reference in New Issue
Block a user