项目排行榜半成品

components/pc/projectChartCard.vue

 <template>
-    <div class="project-Chart-Card__wrap">
-      <div class="project-Chart-Card__top">
-        <div class="project-Chart-Card__icon">
-          <yun-icon name="crown" style="font-size: 28px"></yun-icon>
-        </div>
-        <div class="project-Chart-Card__bottom" style="background-color: #A2BFD3">
+    <div class="project-chart-card__wrap">
+      <div class="project-chart-card__top">
+          <yun-icon class="yun-icon__crown" name="crown"></yun-icon>
+        <div class="project-chart-card__bottom" style="background-color: #A2BFD3">
           <img src="" alt="">
-
         </div>
       </div>
-      <div>
+      <div class="project-chart-card__body">
+        <a href="" class="project-chart-card__body__a">Sysbro</a>
+        <p class="project-chart-card__body__p">这是一款系统助手，专为 deepin 操作系统打造。</p>
 
       </div>
+      <div class="project-chart-card__footer">
+        <div>
+          <div class="project-chart-card__img">
+            <img src="" alt="">
+          </div>
+          <p>rekols</p>
+        </div>
+        <span>261.7°</span>
+      </div>
 
     </div>
 </template>
@@ -23,23 +31,63 @@
 </script>
 
 <style lang="scss">
-  .project-Chart-Card__wrap{
+  .project-chart-card__wrap{
     width: 234*$length;
-    height: 304*$length;
-    background-color: #7f828b;
-    .project-Chart-Card__top{
+    height: 234*$length;
+    //background-color: #7f828b;
+    .project-chart-card__top{
       width: 74*$length;
       height: 102*$length;
       margin: 0 auto;
-      .project-Chart-Card__icon{
+      color: #FFB764;
+      position: relative;
+      bottom: 20px;
+      .yun-icon__crown{
+        position: absolute;
+        left: 16*$length;
+        bottom: 94*$length;
+        font-size: 28*$length;
+      }
+      .project-chart-card__icon{
         color: #FFB764;
       }
-      .project-Chart-Card__bottom{
+      .project-chart-card__bottom{
         width: 74*$length;
         height: 74*$length;
-        border-radius: 10*$length;
+        @include border-radius(10*$length);
+        @include box-shadow(0px 3px 6px rgba(0,0,0,0.1));
+      }
+
     }
+    .project-chart-card__body{
+      padding-left: 20*$length;
+      padding-right: 20*$length;
 
+      .project-chart-card__body__a{
+        font-size: 16*$length;
+        color: #333333;
+        &:hover{
+          color: #00AAE6;
+        }
+      }
+      .project-chart-card__body__p{
+        margin-top: 10*$length;
+        font-size: 13*$length;
+        color: #666666;
+        line-height: 24*$length;
+      }
+    }
+    .project-chart-card__footer{
+      padding-left: 20*$length;
+      padding-right: 20*$length;
+      @extend %flex-row-spb;
+      .project-chart-card__img{
+        height: 20*$length;
+        width: 20*$length;
+        background-color: orangered;
+        @include border-radius(20*$length)
+
+      }
     }
 
   }