finish answerCard

components/pc/myAnswer.vue

+<template>
+  <div class="my-answer__warp">
+    <div class="my-answer">
+      <div class="title">这个是问题的标题</div>
+      <div class="content">
+        <p class="content-secondary">我的回答<span v-if="isAdopt">(已采纳)</span></p>
+        <p class="content-main">这个是回答的内容</p>
+      </div>
+      <div class="footer">
+        <span class="footer-timer">2019-02-20 14:20</span>
+        <div>
+          <span>评论</span>
+          <span>20</span>
+        </div>
+        <div>
+          <span>赞</span>
+          <span>50</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "myAnswer",
+  props: {
+    info: Object
+  },
+  data(){
+    return{
+      isAdopt: false,
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.my-answer__warp{
+  .my-answer{
+    @extend %cursorPointer;
+    text-align: left;
+    box-sizing: border-box;
+    width: 938*$length;
+    padding: 21*$length 24*$length;
+    border-bottom: 1px dashed #EFEFEF;
+    &:hover{
+      > .title{
+        color: #00AAE6;
+      }
+    }
+    > .title{
+      @extend %animate-transition;
+      @include fontStyle(18,25,500,#222,left);
+    }
+    .content{
+      margin-top: 12*$length;
+      margin-bottom: 11*$length;
+      .content-secondary{
+        padding-bottom: 6*$length;
+        @include fontStyle(12,17,500,#999,left);
+        > span{
+          color: #75D098;
+        }
+      }
+      .content-main{
+        width: 100%;
+        @include fontStyle(14,20,500,#333,left);
+        @extend %nowrap;
+      }
+    }
+    .footer{
+      @include fontStyle(12,17,500,#999,left);
+      .footer-timer{
+        margin-right: 32*$length;
+      }
+      div{
+        display: inline-block;
+        margin-right: 32*$length;
+      }
+    }
+  }
+}
+</style>

components/pc/projectCard.vue

@@ -158,7 +158,6 @@
             > span{
             > span{
               margin: 0 3*$length;
               margin: 0 3*$length;
             }
             }
-
           }
           }
 
 
           .info-right{
           .info-right{

components/pc/topicListCard.vue

+<template>
+  <div class="top-list-card__wrap">
+    <div class="top-list-card">
+      <div class="top-list-card__left">1</div>
+      <div class="top-list-card__center">
+        <span>啦啦啦</span>
+        <span>12316541</span>
+      </div>
+      <div class="top-list-card__right">
+        <div class="icon-box">
+          <yun-icon name="top"></yun-icon>
+        </div>
+        <div class="icon-box">
+          <span>新</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "topicListCard"
+}
+</script>
+
+<style lang="scss" scoped>
+.top-list-card__wrap{
+  .top-list-card{
+    width: 1044*$length;
+    height: 35*$length;
+    @extend %flex-row-spb;
+    justify-content: flex-start;
+    .top-list-card__left{
+      margin-left: 107*$length;
+      @include fontStyle(12,12,500,#222,left);
+    }
+    .top-list-card__center{
+      width: 424*$length;
+      @include fontStyle(12,17,500,#00AAE6,left);
+    }
+    .top-list-card__right{
+      .icon-box{
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>

pages/index.vue

 <template>
 <template>
   <div class="container">
   <div class="container">
     <div>
     <div>
+      <banner></banner>
       <h1 class="title">
       <h1 class="title">
         beyond-clouds-front
         beyond-clouds-front
       </h1>
       </h1>
       <project-card></project-card>
       <project-card></project-card>
+      <answer-card></answer-card>
+      <my-answer></my-answer>
+      <topic-list-card></topic-list-card>
       <h2 class="subtitle" @click="showAlert">
       <h2 class="subtitle" @click="showAlert">
         beyond-clouds project
         beyond-clouds project
       </h2>
       </h2>
@@ -16,6 +20,9 @@
 
 
 import Banner from '../components/pc/banner';
 import Banner from '../components/pc/banner';
 import ProjectCard from '../components/pc/projectCard';
 import ProjectCard from '../components/pc/projectCard';
+import AnswerCard from '../components/pc/answerCard';
+import MyAnswer from '../components/pc/myAnswer';
+import TopicListCard from '../components/pc/topicListCard';
 
 
 export default {
 export default {
 
 
@@ -25,7 +32,7 @@ export default {
     }
     }
   },
   },
   components:{
   components:{
-    Banner,ProjectCard
+    Banner,ProjectCard,AnswerCard,MyAnswer,TopicListCard
   },
   },
 
 
   methods:{
   methods:{
@@ -59,7 +66,7 @@ export default {
 }
 }
 </script>
 </script>
 
 
-<style>
+<style scoped>
 .container {
 .container {
   margin: 0 auto;
   margin: 0 auto;
   min-height: 300vh;
   min-height: 300vh;