From 5cb1449692f97356fefd1b80c0be61087d845663 Mon Sep 17 00:00:00 2001 From: zhaofang <752743406@qq.com> Date: Thu, 29 Sep 2022 11:05:03 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=93=8D=E5=BA=94=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/ellipsis.scss | 20 + src/assets/styles/portal-index.scss | 893 ++++++++++++++++++++++++++++ src/assets/styles/portal.scss | 12 +- src/views/Index.vue | 222 ++++--- 4 files changed, 1021 insertions(+), 126 deletions(-) diff --git a/src/assets/styles/ellipsis.scss b/src/assets/styles/ellipsis.scss index f5aae67c..d27f1fb8 100644 --- a/src/assets/styles/ellipsis.scss +++ b/src/assets/styles/ellipsis.scss @@ -20,6 +20,26 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 2; } +.index-one-line-ellipsis{ + display: -webkit-box; + // white-space:pre-wrap; + word-wrap: break-word; + word-break:break-all; + overflow: hidden; + text-overflow:ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp:1; +} +.index-tive-line-ellipsis{ + display: -webkit-box; + // white-space:pre-wrap; + word-wrap: break-word; + word-break:break-all; + overflow: hidden; + text-overflow:ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp:8; +} p{ margin: 0; } diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss index d296979d..c15ebb79 100644 --- a/src/assets/styles/portal-index.scss +++ b/src/assets/styles/portal-index.scss @@ -217,3 +217,896 @@ background-color: #fff; box-shadow: 0px 8px 20px 0px rgba(0,35,114,0.1); } +// 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; + } + } + + .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; + } + } + .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; + } + } + // .course-image-box :hover .el-image{ + // z-index: 999; + // position: absolute; + // top: 0px; + // left: 0px; + // width: 195px !important; + // height: 92px !important; + // } + } + .case-inter{ + left: 20px; + bottom:20px; + .interact-bar-index{ + display: none !important; + } + ::v-deep .el-avatar--small{ + width: 22px; + height: 22px; + } + } + .modules-list{ + margin-right: 20px; + } + .boe-case-index{ + width: 235px; + height: 246px; + margin-right: 20px; + .case-top{ + height: 69px; + } + .case-conent{ + width: 200px; + height: 169px; + top:20px; + left:20px; + padding: 17px; + .time-one{ + padding:3px 3px; + } + .cast-time{ + margin-bottom: 12px; + } + .case-title{ + font-size: 14px; + height: 40px; + line-height: 18px; + } + .case-text{ + height: 42px; + font-size: 12px; + line-height: 14px; + } + + } + } + .boe-qa-index{ + width: 171px; + height: 194px; + margin-right: 20px; + padding: 17px 12px 16px 12px; + .qa-center{ + height: 88px; + margin-top: 10px; + padding: 10px; + .boe-qa-sum{ + font-size: 12px; + line-height: 14px; + } + .qa-views{ + left: 10px; + bottom: 6px; + } + } + .qa-char{ + margin-top: 10px; + display: flex; + ::v-deep img{ + width: 24px; + height: 24px; + } + ::v-deep .item-author div{ + width: 30px !important; + height: 30px !important; + } + .el-avatar{ + width: 26px !important; + height: 26px !important; + } + .info-name{ + font-size: 12px; + color: #6E7B84; + margin-left: 10px; + } + } + .qa-top{ + & span:first-child{ + // height: 24px; + background: rgba($color: #387DF7, $alpha: 0.05); + padding: 3px 3px; + border-radius: 4px; + font-size: 12px; + color: #387DF7; + // margin-right: 46px; + } + span{ + font-size: 10px; + color: #6E7B84; + } + } + } + .boe-article-index{ + padding: 17px; + .article-card-left{ + width: 200px; + .article-info-index-summary{ + font-size: 12px; + font-weight: 400; + color: #6E7B84; + line-height: 14px; + } + .article-info-image-box{ + width: 200px; + height: 112px; + + } + .el-avatar{ + width: 26px !important; + height: 26px !important; + } + } + .article-card-right{ + .article-li{ + display: flex; + width: 100%; + .article-img{ + width: 144px; + height: 81px; + border-radius: 4px; + margin-right: 10px; + img{ + width: 144px; + height: 81px; + border-radius: 4px; + } + } + .article-right{ + width: 100%; + .article-info-title{ + font-size: 16px; + font-weight: 600; + color: #00253E; + // margin-bottom: 9px; + // width: 50%; + } + .article-info-summary{ + font-size: 12px; + font-weight: 400; + color: #6E7B84; + // margin-bottom: 15px; + } + .article-bottom{ + display: flex; + justify-content: space-between; + ::v-deep .uavatar{ + width: 22px; + height: 22px; + } + .el-avatar{ + width: 26px; + height: 26px; + } + } + .article-info-time{ + display: none; + } + } + + } + } + } +} + @media screen and (max-width: 1680px) and (min-width:1367px){ + .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; + } + } + + .portal-right-box{ + width: 344px; + .course-index-list{ + height: 548px; + overflow-y: auto; + } + .case-index-list{ + height: 230px; + overflow-y: auto; + } + .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; + } + } + } + .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: 30px; + } + .boe-case-index{ + width: 350px; + height: 361px; + margin-right: 36px; + .case-top{ + height: 69px; + } + .case-conent{ + width: 290px; + height: 250px; + top:30px; + left:30px; + padding: 20px; + .time-one{ + padding:3px 10px; + } + .cast-time{ + margin-bottom: 12px; + } + .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: 254px; + height: 276px; + margin-right: 36px; + padding: 30px; + .qa-center{ + height: 130px; + margin-top: 10px; + padding: 20px 18px; + .boe-qa-sum{ + font-size: 14px; + line-height: 22px; + margin-top: 4px; + } + .qa-views{ + left: 18px; + bottom: 18px; + } + } + .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: 250px; + .article-info-index-summary{ + font-size: 14px; + font-weight: 400; + color: #6E7B84; + line-height: 20px; + } + .article-info-image-box{ + width: 250px; + height: 162px; + + } + // .el-avatar{ + // width: 26px !important; + // height: 26px !important; + // } + } + .article-card-right{ + .article-li{ + // height: 160px; + display: flex; + width: 100%; + .article-img{ + width: 252px; + height: 142px; + border-radius: 4px; + margin-right: 10px; + img{ + width: 144px; + height: 81px; + border-radius: 4px; + } + } + .article-right{ + width: 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 (max-width: 1920px) and (min-width: 1681px){ + .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; + } + } + + .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; + } + } + } + + } + } +} + } + + @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{ + 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; + } + } + } + + } + } +} + } diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss index 146cf49e..6cb81521 100644 --- a/src/assets/styles/portal.scss +++ b/src/assets/styles/portal.scss @@ -10,7 +10,7 @@ body { .xcontent{ // width: 1000px; // margin: 0px auto; - margin: 0px 5%; + // margin: 0px 5%; } .index-course{ // width: 25%; @@ -122,13 +122,3 @@ body { } } -.portal-content { - margin: 26px 87px 0px 87px; - // width: 100%; - .breadcrumb-nav { - margin-bottom: 15px; - font-size: 14px; - font-weight: normal; - color: #666666; - } -} diff --git a/src/views/Index.vue b/src/views/Index.vue index 4d483ca9..28e85e2b 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -57,11 +57,11 @@
-
-
+
+
- + 录播课
高效谈判系列课
@@ -80,11 +80,11 @@
-
-
+
+
- + 录播课
{{ course.name }}
@@ -109,7 +109,7 @@

课程排行榜

-
    +
    • @@ -154,20 +154,23 @@
    -
  • +

  • 人气榜NO.{{ind+1}} {{ca.sysCreateTime.substring(0, 10)}}

    -

    {{ca.title}}

    +

    + {{ca.title}} +

    {{ca.summary}}

    -
    -
    人观看
    +
    +
    人观看
    +
@@ -176,7 +179,7 @@

案例排行榜

-
-
+
-
+
- + +
{{ articleList.first.title }}
-
{{ articleList.first.summary }}
+
{{ articleList.first.summary }}
-
+
+ +
{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }} 查看详情 @@ -240,7 +245,7 @@
-

{{ article.title }}

+

{{ article.title }}

{{ article.summary }}
@@ -291,7 +296,7 @@

文章排行榜

-
    +
    • @@ -318,18 +323,18 @@
        -
      • +

      • {{qa.views}}正在关注{{ qa.sysCreateTime.substring(0, 10) }}

        {{ qa.title }}

        -

        {{ qa.content }}

        +

        {{ qa.content }}

        查看详情

        {{qa.authorInfo.name}}

        -

        +

        • @@ -340,13 +345,13 @@

        问答排行榜

        -
          +
          • - - - - {{ item.title }} -
            • + + + + {{ item.title }} +
@@ -484,7 +489,7 @@ export default { }); }, getQaAnswers() { - apiIndex.qaAnswers(3).then(res=>{ + apiIndex.qaAnswers(10).then(res=>{ if (res.status == 200) { this.answersList = res.result; } @@ -499,7 +504,7 @@ export default { }); }, getPopularity() {//案例排行榜 - apiCase.queryPraises(4).then(res => { + apiCase.queryPraises(10).then(res => { if (res.status == 200) { this.Popularity = res.result; // console.log(this.Popularity) @@ -659,7 +664,7 @@ export default { getArticleData() { let $this = this; this.articleList.list = []; - apiArticle.portalList(this.articleList.num, this.articleList.orderType).then(res => { + apiIndex.articlelist(this.articleList.orderType).then(res => { if (res.status == 200) { if (res.result.length > 0) { let userIds = []; @@ -672,7 +677,7 @@ export default { $this.articleList.list.push(item); } }); - + console.log(res.result,'res.result'); this.loadAuthorInfo(res.result, userIds); } } else { @@ -801,27 +806,27 @@ export default { display: flex; width: 100%; .article-img{ - // flex: 1; - width: 252px; - height: 142px; + // width: 252px; + // height: 142px; border-radius: 4px; - margin-right: 20px; + // margin-right: 20px; img{ - width: 252px; - height: 142px; + // width: 252px; + // height: 142px; border-radius: 4px; } } .article-right{ - // width: 100%; + width: 100%; .article-info-title{ font-size: 16px; font-weight: 600; color: #00253E; margin-bottom: 9px; + // width: 50%; } .article-info-summary{ - font-size: 14px; + // font-size: 14px; font-weight: 400; color: #6E7B84; margin-bottom: 15px; @@ -830,8 +835,8 @@ export default { display: flex; justify-content: space-between; ::v-deep .uavatar{ - width: 32px; - height: 32px; + // width: 32px; + // height: 32px; } } .article-info-time{ @@ -843,16 +848,16 @@ export default { } - ::v-deep .course-image-box :hover .el-image{ - // transition: all 0.5s; - z-index: 999; - position: absolute; - top: -50px; - left: -35px; - width: 420px !important; - height: 236px !important; +// ::v-deep .course-image-box :hover .el-image{ +// // transition: all 0.5s; +// z-index: 999; +// position: absolute; +// top: -50px; +// left: -35px; +// width: 420px !important; +// height: 236px !important; -} +// } .course-ran-bg{ background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%); } @@ -1058,12 +1063,12 @@ export default { .case-index{ position: relative; - width: 408px; - height: 396px; + // width: 408px; + // height: 396px; background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%); border-radius: 8px; box-sizing: border-box; - margin-right: 36px; + // margin-right: 36px; &:nth-child(2){ .case-top{ background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%); @@ -1078,57 +1083,57 @@ export default { } .case-inter{ position: absolute; - left: 30px; - bottom: 30px; + // left: 30px; + // bottom: 30px; display: flex; - ::v-deep .el-avatar--small{ - width: 32px; - height: 32px; - } + // ::v-deep .el-avatar--small{ + // width: 32px; + // height: 32px; + // } } .case-top{ - height: 120px; + // height: 120px; background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%); border-radius: 8px 8px 0px 0px; } .case-conent{ position: absolute; - top:40px; - left:30px; - width: 350px; - height: 274px; + // top:40px; + // left:30px; + // width: 350px; + // height: 274px; background: #FFFFFF; box-shadow: 0px 1px 10px 0px rgba(4,36,60,0.05); border-radius: 4px; - padding: 30px; + // padding: 30px; .cast-time{ font-size: 14px; color: #6E7B84; // display: flex; // justify-content: space-between; - margin-bottom: 20px; + // margin-bottom: 20px; .time-one{ height: 24px; background: rgba($color: #387DF7, $alpha: 0.1); border-radius: 4px; - padding: 3px 10px; + // padding: 3px 10px; color: #387DF7; font-size: 12px; } } .case-title{ - height: 48px; - font-size: 16px; + // height: 48px; + // font-size: 16px; font-weight: 600; color: #00253E; - line-height: 24px; + // line-height: 24px; } .case-text{ - height: 60px; - font-size: 14px; + // height: 60px; + // font-size: 14px; color: #6E7B84; - line-height: 20px; - margin-bottom: 30px; + // line-height: 20px; + // margin-bottom: 30px; } ::v-deep .case-info{ .interact-bar-btns{ @@ -1212,12 +1217,13 @@ export default { -webkit-line-clamp: 2; box-sizing: border-box; } + .course-card { - padding: 30px; + // padding: 30px; padding-bottom: 22px; - width: 410px; - margin-bottom: 30px; - margin-right: 36px; + // width: 410px; + // margin-bottom: 30px; + // margin-right: 36px; box-sizing: border-box; position: relative; background-color: #ffffff; @@ -1251,15 +1257,9 @@ export default { } .course-image-box { position: relative; - width: 350px; - height: 200px; + // width: 350px; + // height: 200px; // width: 100%; - .course-image { - // width: 100%; - // height: 100%; - // width: 288px; - // height: 165px; - } .course-type { position: absolute; top: 0px; @@ -1476,7 +1476,7 @@ export default { .modules-list { margin-top: 30px; // margin-bottom: 15px; - margin-right: 36px; + // margin-right: 36px; .case-card { // width: 593px; margin-bottom: 15px; @@ -1540,16 +1540,18 @@ export default { } .article-card { + width: 100%; background: #fff; - padding: 30px; + // padding: 30px; border-radius: 8px; .article-card-left { - float: left; + // float: left; .article-card-box { .article-info-image-box { .article-info { + height: 400px; .article-info-title { font-size: 16px; color: #00253E; @@ -1641,13 +1643,13 @@ export default { .qa-box{ display: flex; .qa-card{ - width: 298px; - height: 320px; - padding: 30px; + // width: 298px; + // height: 320px; + // padding: 30px; box-sizing: border-box; box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.05); border-radius: 8px; - margin-right: 36px; + // margin-right: 36px; background: #fff; &:last-child{ margin-right: 0; @@ -1656,46 +1658,36 @@ export default { & span:first-child{ height: 24px; background: rgba($color: #387DF7, $alpha: 0.05); - padding: 3px 10px; + // padding: 3px 10px; border-radius: 4px; font-size: 12px; color: #387DF7; - margin-right: 46px; + // margin-right: 46px; } span{ - font-size: 14px; + // font-size: 14px; color: #6E7B84; } } .qa-center{ position: relative; - margin-top: 20px; - width: 238px; - height: 152px; + // margin-top: 20px; + // width: 238px; + // height: 152px; background: rgba($color: #04243C, $alpha: 0.04); border-radius: 4px; - padding: 20px; + // padding: 20px; .qa-views{ position: absolute; color: #6E7B84; font-size: 14px; - left: 20px; - bottom: 20px; + // left: 20px; + // bottom: 20px; } } .qa-char{ - margin-top: 20px; display: flex; - ::v-deep img{ - width: 44px; - height: 44px; - } - .info-name{ - font-size: 14px; - color: #6E7B84; - margin-left: 16px; - } } } }