From 07aa2c8fb0685e2140863941a9f45301af6e3135 Mon Sep 17 00:00:00 2001
From: lmj <3407000732@qq.com>
Date: Tue, 30 Aug 2022 18:18:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/portal/article/Index.vue | 108 +++++++++++++----------------
 1 file changed, 49 insertions(+), 59 deletions(-)

diff --git a/src/views/portal/article/Index.vue b/src/views/portal/article/Index.vue
index 3bb704d7..3e5876fb 100644
--- a/src/views/portal/article/Index.vue
+++ b/src/views/portal/article/Index.vue
@@ -45,15 +45,12 @@
                      <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
                          <div class="article-title one-line-ellipsis" v-html="$keywordActiveShow(article.title,articleList.keyword)"></div>
                          <div class="article-info-date"><i class="el-icon-time"></i> {{article.sysCreateTime.substring(0,10)}}</div>
+       
                      </div>
                    </router-link>
                   <!--body-->
                   <div class="article-body" style="display: flex;justify-content: space-between;">
-                    <router-link  :to="'article/detail?id=' + article.id">
-                       <div class="article-image" v-if="article.coverurl">
-                         <article-image :article="article"></article-image>
-                       </div>
-                     </router-link>
+                  
                       <div style="flex: 1;">
                           <router-link  :to="'article/detail?id=' + article.id">
                             <div style="padding-top: 5px;">
@@ -61,15 +58,20 @@
                             </div>
                           </router-link>
                       </div>
+                        <router-link  :to="'article/detail?id=' + article.id">
+                       <div class="article-image" v-if="article.coverurl">
+                         <article-image :article="article"></article-image>
+                       </div>
+                     </router-link>
                   </div>
                   <!--互动内容-->
                   <div style="display: flex;justify-content:flex-start;align-items: center;margin-top: 0px;">
-                      <!-- <div style="width: 120px;"> -->
+                      <div style="flex:1;">
                         <author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :sex="article.authorInfo.sex"></author>
-                      <!-- </div> -->
-                      <!-- <div> -->
+                      </div>
+                      <div style="">
                         <interactBar nodeWidth="60px" :readonly="true" :type="2" :data="article" :views="false"></interactBar>
-                      <!-- </div> -->
+                      </div>
                       <!-- <author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :info="article.authorInfo.orgInfo"></author> -->
                   </div>
                 </div>
@@ -88,47 +90,24 @@
           </el-card>
         </el-row>
          </div>
-         <div style="width: 245px;margin-left: 5px;">
+         <div style="width: 410px;margin-left: 5px;">
+           
             <div>
-                 <div id="articleAnking">
-            <el-button @click="openDialog" style="width: 100%;height: 37px;border-radius: 0;margin-bottom:15px;" type="primary">写文章</el-button>
-            <!-- <a :href="`${webBaseUrl}/article/add`" style="width: 100%;margin-bottom:15px;display: inline-block;" target="_blank"><el-button style="width: 100%;height: 37px;border-radius: 0;" type="primary">写文章</el-button></a> -->
-            <!-- <el-button style="width: 100%;margin:10px 0" type="primary">发布文章</el-button> -->
-            <el-card class="ranking-card">
-              <div slot="header">
-                <span style="font-size: 14px;font-weight: 600;color: #333333;">贡献榜</span>
+           <div id="articleAnking">
+            <el-button class="write-art" @click="openDialog" icon="el-icon-edit"  type="primary">写文章</el-button>
+              <div class="portal-right-box list-bg">
+                <p class="portal-title-one" style="padding-bottom:12px" >贡献榜</p>
+                 <ul>
+                      <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px">
+                        <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">0{{index+1}}.</span>
+                        <span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">0{{index+1}}.</span>
+                        <span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">0{{index+1}}.</span>
+                        <span class="portal-right-text" v-if="index>2" style="margin-right:94px">0{{index+1}}.</span>
+                        <span class="portal-title-desc">{{ item.sysCreateUname }}</span>
+                      </li>
+                    </ul>
               </div>
-              <div style="padding-bottom:10px">
-                <!-- <el-row class="ranking-title"> -->
-                  <!-- <el-col :span="10" >姓名</el-col>
-                  <el-col :offset="4" :span="10" class="center">发布数</el-col> -->
-                  <!-- <el-col :offset="4" :span="10" style="color: #333333;font-size: 14px;">姓名</el-col>
-                  <el-col :span="10" style="text-align: right;color: #333333;font-size: 14px;">贡献度</el-col> -->
-                <!-- </el-row> -->
-                <!-- <el-row class="ranking-title" v-for="(item, index) in ankingList" :key="index">
-                  <el-col :span="4" style="text-align: center;">
-                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
-                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
-                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
-                    <span  style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
-                  </el-col>
-                  <el-col :span="10" style="color: #333333;font-size: 14px;">{{ item.sysCreateUname }}</el-col>
-                  <el-col :span="10" style="text-align: right;color: #333333;font-size: 14px;">{{ item.counts }}</el-col>
-                </el-row> -->
-                <el-row style=" line-height: 34px;" class="ranking-title  bacolor" v-for="(item, index) in ankingList" :key="index" >
-                  <el-col :span="6" style="height:34px">
-                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
-                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
-                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
-                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
-                  </el-col>
-                  <!-- <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="top-start"> -->
-                  <el-col :span="18" class="one-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
-                  <!-- </el-tooltip> -->
-                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
-                </el-row>
-              </div>
-            </el-card>
+             
           </div>
             </div>
          </div>
@@ -407,6 +386,22 @@ export default {
 </script>
 
 <style scoped lang="scss">
+ .list-bg{
+    background: linear-gradient(180deg, #C3DEF8 0%, #FFFFFF 37%);
+  }
+  .write-art{
+    width: 410px;
+    height: 67px;
+    text-align: center;
+    // line-height: 67px;
+    background: #DDEDFF;
+    border-radius: 8px;
+    font-size: 18px;
+    font-weight: 500;
+    border: none;
+    color: #387DF7;
+    margin-bottom: 22px;
+  }
   ::v-deep .el-card__body{
     padding: 0;
   }
@@ -506,29 +501,24 @@ export default {
   }
   .quyer-tag {
     ::v-deep .el-button{
-      width: 52px;
-      height: 32px;
+      width: 44px;
+      height: 26px;
       padding: 0;
     }
     .order-class {
-      color: #666666;
-      // width: 80px;
-      // text-align: left;
+      color: #6E7B84;
       background-color: #FFFFFF;
-      border: 1px solid #DDDDDD;
-      border-radius: 0px;
+      border-radius: 4px;
       height: 32px;
       line-height: 32px;
-      // padding-left: 5px;
-      // padding-top: 5px;
-      // padding-bottom: 5px;
+      font-size: 14px;
       .el-icon--right {
         margin-left: 0;
       }
     }
     .actice {
       border: 0px;
-      background: #3e7fff;
+      background: #387DF7;
       color: #fff;
     }
   }