From 2c2505087ca0067b7937599499d6486afae8d801 Mon Sep 17 00:00:00 2001
From: zhaofang <752743406@qq.com>
Date: Tue, 27 Sep 2022 13:46:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/portal.scss |   6 +-
 src/views/Index.vue           | 250 +++++++++++++++++++++++-----------
 2 files changed, 173 insertions(+), 83 deletions(-)

diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss
index 5ad5a9f8..97b739a7 100644
--- a/src/assets/styles/portal.scss
+++ b/src/assets/styles/portal.scss
@@ -13,7 +13,7 @@ body {
 }
 
 .course-index{
-  width: 33.34%;
+  // width: 33.34%;
 }
 
 .xrow{
@@ -57,11 +57,11 @@ body {
   }
   .index-course{
     // width: 20%;
-    width: 33.3333%;
+    // width: 33.3333%;
   }
   .course-index{
     // width: 25%;
-    width: 33.3333%;
+    // width: 33.3333%;
   }
 }
 
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 750487f6..4d483ca9 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -55,7 +55,7 @@
               <router-link to="/course">查看更多</router-link>
             </span>
           </div>
-          <div class="modules-list xrow" style="height: 485px;overflow: hidden;">
+          <div class="modules-list xrow" style="margin-right:0px">
             <!--一个固定内容-->
             <div class="xrow-course index-course">
               <div class="course-card">
@@ -64,10 +64,10 @@
                     <el-image class="course-image" style="height: 200px;" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
                     <span class="course-type">录播课</span>
                   </div>
-                <div title="高效谈判系列课" class="course-title one-line-ellipsis">高效谈判系列课</div>
+                <div title="高效谈判系列课" class="course-title portal-title-tow two-line-ellipsis">高效谈判系列课</div>
                   <div class="course-author">
-                    <div class="course-author-left" > </div>
-                    <div style="flex:1; text-align: center; ">
+                    <!-- <div class="course-author-left" > </div> -->
+                    <div>
                       <span class="study-num">2581人学习</span>
                     </div>
                     <div style="padding-left:15px">
@@ -87,13 +87,10 @@
                     <course-image height="200px" :course="course"></course-image>
                     <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                   </div>
-                  <div :title="course.name" class="course-title one-line-ellipsis" >{{ course.name }}</div>
+                  <div :title="course.name" class="course-title portal-title-tow two-line-ellipsis" >{{ course.name }}</div>
                   <div class="course-author">
                     <div class="course-author-left" >
-                      {{ course.authorInfo.name }}
-                    </div>
-                    <div style="flex:1; text-align: center; ">
-                      <span class="study-num">{{ course.studys }}人学习</span>
+                      {{ course.authorInfo.name }} <span class="study-num">{{ course.studys }}人学习</span>
                     </div>
                     <div style="padding-left:15px">
                       <div v-if="course.score">
@@ -109,8 +106,8 @@
           </div>
         </div>
      
-        <div>
-          <div class="ranking-card portal-right-box list-bg">
+        <div style="margin-top:60px">
+          <div class="ranking-card portal-right-box course-ran-bg">
                 <p class="portal-title-one" style="padding-bottom:12px">课程排行榜</p>
                 <ul>
                    <li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
@@ -162,7 +159,7 @@
                    <div class="case-conent">
                      <p class="cast-time">
                        <span class="time-one" v-if="caseList.orderType==2"><svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}</span>
-                       <span style="float: right;">2022-05-19</span>
+                       <span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
                      </p>
                      <p :title="ca.title" class="two-line-ellipsis case-title">{{ca.title}}</p>
                      <p class="case-text three-line-ellipsis">{{ca.summary}}</p>
@@ -177,7 +174,7 @@
           </div>
         </div>
         <div>
-          <div style="margin-top:46px" class="ranking-card portal-right-box list-bg">
+          <div style="margin-top:60px" class="ranking-card portal-right-box list-bg">
                 <p class="portal-title-one" style="padding-bottom:12px">案例排行榜</p>
                 <ul>
                     <li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
@@ -216,7 +213,7 @@
                             <span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
                           </div>
                         </div>
-                        <div class="article-info-summary two-line-ellipsis" style="margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
+                        <div class="article-info-summary two-line-ellipsis" style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
                       </div>
                     </div>
                   </a>
@@ -235,39 +232,62 @@
               <!--内容列表内容-->
               <div class="article-card-right" style="flex: 1;">
                 <div class="article-card-box" v-for="article in articleList.list" :key="article.id">
-                  <div class="article-info-box">
+                  <div class="article-li">
+                    <div class="article-img" v-if="article.coverurl != ''">
+                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
+                        <el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image>
+                      </a>
+                    </div>
+                      <div class="article-right">
+                        <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
+                          <p class="article-info-title one-line-ellipsis">{{ article.title }}</p>
+                          <p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
+                        </a>
+                        <div class="article-bottom">
+                          <div style="display:flex">
+                            <author-img :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid" :sex="article.authorInfo.sex"></author-img>
+                            <span style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
+                            <interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar>
+                          </div>
+                          <div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
+                        </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" style="display:flex">
-                              <div class="two-line-ellipsis" style="flex:1;">
-                                <span style="font-weight: 700;font-size: 20px;">{{ article.title }}</span>
-                              </div>
-                              <div>
-                                <span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span>
-                              </div>
+                            <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>
-                            <div style="display:flex;justify-content: space-between;">
-                              <div class="article-info-summary two-line-ellipsis">{{ article.summary }}</div>
-                            </div>
-                          </a>
-                          <div class="article-other-info">
+                          </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 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>
           </div>
         </div>
         <!--内容块-->
-       <div style="margin-top:46px">
+       <div style="margin-top:60px">
         <!-- 排行榜位置 -->
         <div class="portal-right-box art-bgimg" style="background-color:#fff;" >
                 <p class="portal-title-one" style="padding-bottom:12px" >文章排行榜</p>
@@ -316,7 +336,7 @@
             </ul>
           </el-row>
          </div>
-         <div style="margin-top:60px">
+         <div style="margin-top:74px">
           <!-- 排行榜 -->
           <div class="portal-right-box list-bg">
                 <p class="portal-title-one" style="padding-bottom:12px">问答排行榜</p>
@@ -539,7 +559,7 @@ export default {
       this.isNext = false;
       let { orderType, num } = this.courseList;
       let course = {
-        pageSize: num,
+        pageSize: 5,
         device:1,
         orderField: orderType == 1 ? '' : 'studys',
         orderAsc: false,
@@ -776,6 +796,66 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+    .article-li{
+      display: flex;
+      width: 100%;
+      .article-img{
+        // flex: 1;
+        width: 252px;
+        height: 142px;
+        border-radius: 4px;
+        margin-right: 20px;
+        img{
+          width: 252px;
+          height: 142px;
+          border-radius: 4px;
+        }
+      }
+      .article-right{
+        // width: 100%;
+        .article-info-title{
+          font-size: 16px;
+          font-weight: 600;
+          color: #00253E;
+          margin-bottom: 9px;
+        }
+        .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: 32px;
+            height: 32px;
+          }
+        }
+        .article-info-time{
+          font-size: 12px;
+          font-weight: 400;
+          color: #6E7B84;
+        }
+      }
+      
+    }
+
+  ::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%);
+  }
   .personal-panel{
     position: absolute;
     right: 172px;
@@ -884,7 +964,7 @@ export default {
         font-size: 12px;
         color: #FFFFFF;
         padding: 0px 8px;
-        background: #387DF7;
+        background: #f99000;
         border-radius: 0px 12px 0px 0px;
       }
     }
@@ -975,6 +1055,7 @@ export default {
 }
 .case-box{
   display: flex;
+
   .case-index{
     position: relative;
     width: 408px;
@@ -983,7 +1064,15 @@ export default {
     border-radius: 8px;
     box-sizing: border-box;
     margin-right: 36px;
+    &:nth-child(2){
+      .case-top{
+        background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
+      }
+    }
     &:last-child{
+      .case-top{
+        background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
+      }
       margin-right: 0;
       
     }
@@ -999,7 +1088,7 @@ export default {
     }
     .case-top{
       height: 120px;
-      background: linear-gradient(70deg, #82A8D1 20%, #A4C5E8 60%);
+      background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
       border-radius: 8px 8px 0px 0px;
     }
     .case-conent{
@@ -1035,6 +1124,7 @@ export default {
         line-height: 24px;
       }
       .case-text{
+        height: 60px;
         font-size: 14px;
         color: #6E7B84;
         line-height: 20px; 
@@ -1124,21 +1214,23 @@ export default {
 }
 .course-card {
   padding: 30px;
-  // width: 290px;
+  padding-bottom: 22px;
+  width: 410px;
   margin-bottom: 30px;
   margin-right: 36px;
   box-sizing: border-box;
   position: relative;
   background-color: #ffffff;
+ 
   ::v-deep .cor-praises {
     position: absolute;
-    left: 0;
-    top: 0;
-    -moz-user-select: none; /*火狐*/
-    -webkit-user-select: none; /*webkit浏览器*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*早期浏览器*/
-    user-select: none;
+    right: 52px;
+    bottom: 24px;
+    // -moz-user-select: none; /*火狐*/
+    // -webkit-user-select: none; /*webkit浏览器*/
+    // -ms-user-select: none; /*IE10*/
+    // -khtml-user-select: none; /*早期浏览器*/
+    // user-select: none;
     .interact-bar-btn{
       .interact-bar-value{
         display: none;
@@ -1170,16 +1262,15 @@ export default {
     }
     .course-type {
       position: absolute;
-      top: 5px;
+      top: 0px;
       right: 0px;
-      width: 90px;
-      height: 30px;
-      line-height: 30px;
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
       text-align: center;
-      background-color: #292828;
-      opacity: 0.4;
-      border-top-left-radius: 15px;
-      border-bottom-left-radius: 15px;
+      background-color: #f99000;
+      border-radius:  2px  4px  2px  14px;
+      font-size: 12px;
       color: #ffffff;
       -moz-user-select: none; /*火狐*/
       -webkit-user-select: none; /*webkit浏览器*/
@@ -1225,10 +1316,8 @@ export default {
     }
   }
   .course-title {
-    padding: 10px 15px;
-    font-size: 18px;
-    font-weight: 600;
-    color: #343434;
+    margin: 16px 0 16px 0;
+    height: 44px;
     -moz-user-select: none; /*火狐*/
     -webkit-user-select: none; /*webkit浏览器*/
     -ms-user-select: none; /*IE10*/
@@ -1236,28 +1325,26 @@ 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;
-        line-height: 30px;
-        color: #666;
+        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;
-      // flex: 1;
     }
   }
 
   .study-num {
-    line-height: 30px;
-    font-size: 12px;
-    color: #8590a6;
+    font-size: 14px;
+    color: #6E7B84;
+    margin-left: 12px;
     -moz-user-select: none; /*火狐*/
     -webkit-user-select: none; /*webkit浏览器*/
     -ms-user-select: none; /*IE10*/
@@ -1279,8 +1366,8 @@ export default {
 }
 .course-score-no {
   text-align: right;
-  font-size: 12px;
-  color: #ffb30f;
+  font-size: 14px;
+  color: #6B7C85;
   line-height: 30px;
   -moz-user-select: none; /*火狐*/
   -webkit-user-select: none; /*webkit浏览器*/
@@ -1293,7 +1380,7 @@ export default {
   //  margin-top: 5px;
   margin-left: 32px;
   line-height: 30px;
-  color: #ffb30f;
+  color: #FA6400;
   font-family: 'Arial';
   -moz-user-select: none; /*火狐*/
   -webkit-user-select: none; /*webkit浏览器*/
@@ -1387,8 +1474,8 @@ export default {
   }
 
   .modules-list {
-    margin-top: 15px;
-    margin-bottom: 15px;
+    margin-top: 30px;
+    // margin-bottom: 15px;
     margin-right: 36px;
     .case-card {
       // width: 593px;
@@ -1460,22 +1547,21 @@ export default {
       .article-card-left {
         float: left;
         .article-card-box {
+          
           .article-info-image-box {
             .article-info {
               .article-info-title {
-                font-size: 20px;
-                color: #343434;
+                font-size: 16px;
+                color: #00253E;
+                font-weight: 500;
                 margin-bottom: 5px;
                 margin-top: 5px;
-
-   
               }
               .article-info-summary {
                 font-size: 14px;
                 color: #6E7B84;
                 height: 160px;
-                line-height: 20px;
-                font-weight: 400;
+                line-height: 22px;
               }
             }
             img {
@@ -1492,11 +1578,15 @@ export default {
         // float: right;
         // width: 68%;
         flex: 1;
-        margin-left: 20px;
+        margin-left: 28px;
         .article-card-box {
           // height: 160px;
-          margin-bottom: 8px;
-          padding-bottom: 8px;
+          margin-bottom: 16px;
+          padding-bottom: 16px;
+          &:last-child{
+            margin-bottom: 0px;
+          padding-bottom: 0px;
+          }
           .article-info-box {
             .article-info {
               display: flex;