From cc8de44f95d130d2d5184bcaef5207d55638075a Mon Sep 17 00:00:00 2001 From: zhaofang <752743406@qq.com> Date: Thu, 1 Sep 2022 15:44:42 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E5=88=97=E8=A1=A8=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/portal.scss | 22 ++-- src/components/PortalHeader.vue | 4 +- src/views/portal/course/Index.vue | 166 +++++++++++++----------------- 3 files changed, 88 insertions(+), 104 deletions(-) diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss index 3a52f572..9e3da5b2 100644 --- a/src/assets/styles/portal.scss +++ b/src/assets/styles/portal.scss @@ -29,8 +29,8 @@ body { } .xrow-course{ - padding-left: 5px; - padding-right: 5px; + // padding-left: 5px; + // padding-right: 5px; display: inline-block; box-sizing: border-box; } @@ -56,10 +56,12 @@ body { // margin: 0px 87px; } .index-course{ - width: 20%; + // width: 20%; + width: 33.3333%; } .course-index{ - width: 25%; + // width: 25%; + width: 33.3333%; } } @@ -71,10 +73,12 @@ body { // margin: 0px 87px; } .index-course{ - width: 16.6666666667%; + // width: 16.6666666667%; + width: 33.3333%; } .course-index{ - width: 20%; + // width: 20%; + width: 33.3333%; } } @@ -84,10 +88,12 @@ body { // margin: 0px auto; } .index-course{ - width: 16.6666666667%; + // width: 16.6666666667%; + width: 33.3333%; } .course-index{ - width: 20%; + // width: 20%; + width: 33.3333%; } } diff --git a/src/components/PortalHeader.vue b/src/components/PortalHeader.vue index e0067319..05322f84 100644 --- a/src/components/PortalHeader.vue +++ b/src/components/PortalHeader.vue @@ -46,7 +46,9 @@ - + + + diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue index 225d6fd7..e448ed61 100644 --- a/src/views/portal/course/Index.vue +++ b/src/views/portal/course/Index.vue @@ -9,8 +9,8 @@ -->
-
- +
+
搜索条件 @@ -73,38 +73,37 @@ 最热 - 最新 + 最新
- +
- + 录播课 线下课 学习项目
-
+
-
- {{cinfo.teacher=='BOE教师'? '':cinfo.teacher}} -
-
+
+ {{cinfo.teacher=='BOE教师'? '':cinfo.teacher}} {{cinfo.studies}}人学习
-
-
- {{toScore(cinfo.score)}} -
-
未评分
+
+
+
+
+ {{toScore(cinfo.score)}}分 +
+
未评分
+
-
-
- +
@@ -132,48 +131,6 @@
- - -

人气榜

    @@ -309,10 +266,10 @@ export default { this.columns = 3; } else if (screenWidth < 1600) { this.course.pageSize = 12; - this.columns = 4; + this.columns = 3; } else if (screenWidth >= 1600) { this.course.pageSize = 15; - this.columns = 5; + this.columns = 3; } let el_top = document.querySelector("#searchbar"); @@ -827,22 +784,36 @@ export default { background: #ddd; } .course-card { - // width: 290px; - margin-bottom: 15px; - position: relative; + padding: 30px; + padding-bottom: 14px; + margin-bottom: 36px; + background: #fff; + border-radius: 8px; + margin-right: 35px; ::v-deep .cor-praises { - position: absolute; - left: 0; - top: 0; + // position: absolute; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; .interact-bar-btn { + margin-top: -2px; + min-width: 26px !important; + width: 32px; + height: 20px; + background:rgba(237, 239, 240,0.5); + border-radius: 20px; + margin-top: 4px; + margin-right: 12px; .interact-bar-value { display: none; } + .svg-icon{ + font-size: 12px !important; + margin-left: 10px; + margin-bottom: 6px; + } } } .cor-icon { @@ -859,8 +830,10 @@ export default { } .course-image-box { position: relative; - height: 148px; + // height: 196px; + // width: 350px; width: 100%; + height: 100%; .course-image { width: 100%; height: 148px; @@ -922,12 +895,13 @@ export default { } } .course-title { - // height: 70px; - margin: 10px 0; - padding: 0px 15px; - font-size: 18px; + height: 44px; + // margin: 10px 0; + margin: 12px 0 16px 0px; + line-height: 24px; + font-size: 16px; font-weight: 600; - color: #343434; + color: #333333; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ @@ -935,21 +909,18 @@ export default { user-select: none; } .course-author { - margin: 5px 15px; - padding-bottom: 10px; + // margin: 5px 15px; + // padding-bottom: 10px; display: flex; justify-content: space-between; .course-author-left { - font-size: 12px; + font-size: 14px; line-height: 30px; - color: #666; + color: #6E7B84; } - // .course-author-right{ - // padding-top: 5px; - // } } .course-score { - padding: 5px 15px; + // padding: 5px 15px; display: flex; justify-content: space-between; align-items: center; @@ -981,22 +952,23 @@ export default { } .course-score-no { text-align: right; - font-size: 12px; - color: #ffb30f; + font-size: 14px; + color: #6B7C85; line-height: 30px; } .course-score-value { font-size: 14px; - color: #ffb30f; - margin-left: 32px; + color: #FA6400; + // margin-left: 32px; line-height: 30px; font-family: "Arial"; // font-size: 30px; } .study-num { line-height: 30px; - font-size: 12px; - color: #8590a6; + font-size: 14px; + margin-left: 12px; + color: #6E7B84; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ @@ -1044,16 +1016,20 @@ export default { height: 50px; } .content-div { + .quyer-tag { + // margin-left: 10px; .order-class { - color: #666666; + margin: 30px 0; + color: #6E7B84; text-align: left; - border: 1px solid #dfdfdf; - padding: 10px 20px; + font-size: 14px; + padding: 4px 8px; + margin-right: 30px; } .actice { - background: #3e7fff; + background: #387DF7; color: #fff; } } @@ -1137,13 +1113,13 @@ export default { } .order-div { - padding: 10px 15px 0 0px; + padding: 0px 15px 0 0px; } .data-content { - padding: 5px 0px; + // padding: 5px 0px; .course-card { // width: 290px; - margin-bottom: 15px; + margin-bottom: 36px; position: relative; .course-image-box { position: relative;