问答列表

src/project/fd/AppAnswer/answerList.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="answerList">
+    <div class="answer_title">
+      基层工作如何展开相关工作合适基层工作如何展开相关工作合适
+    </div>
+    <p class="answer_tips">已有<span>15</span>条回答</p>
+
+    <div class="answer_card">
+      <div class="card_head">
+        <div class="left">
+          <img src="./img/avatar.png" alt="">
+          <div class="card_head_avtar">
+            <h4>我</h4>
+            <div>产品部</div>
+          </div>
+        </div>
+        <div class="right">12-30 12:23:54</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'answerList',
+  data() {
+    return {
+
+    }
+  },
+  methods() {
+
+  },
+  onShow() {
+
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.answerList {
+  padding: 32px;
+  box-sizing: border-box;
+
+  .answer_title {
+    font-weight: 500;
+    font-size: 34px;
+    color: #000000;
+    line-height: 48px;
+  }
+
+  .answer_tips {
+    font-size: 28px;
+    font-weight: 400;
+    color: #999999;
+    padding: 8px 0 48px 0;
+    box-sizing: border-box;
+    border-bottom: 2px solid #E4E5E6;
+    span {
+      color: #3975C6;
+    }
+  }
+
+  .answer_card {
+    background: #FFF;
+
+    
+    .card_head {
+      padding: 24px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        img {
+          width: 80px;
+          height: 80px;
+          margin-right: 16px;
+        }
+        .card_head_avtar {
+          width: calc(100% - 96px);
+        }
+      }
+      
+      .right {
+        align-self: center;
+      }
+    }
+  }
+}
+</style>