问答列表

src/project/fd/AppAnswer/answerList.vue

@@ -16,7 +16,22 @@
         </div>
         <div class="right">12-30 12:23:54</div>
       </div>
+      <div class="card_body">
+        <div class="card_content">
+          据韩国《中央日报》报道,当地时间1月3日,韩国在对
+          中国的入境者实施高强度防疫措施两天后,该国疾病预防控制中心运营的新冠信息管理系统出现错误,无法将传.
+          据韩国《中央日报》报道,当地时间1月3日,韩国在对中国的入境者实施高强度防疫措施中国的入境者实施高
+          强度防疫措施两天后韩国在对中国的入境者实施高强度防疫措施中国的入境者实施高强度防疫措施两天后
+          <div>全文</div>
+        </div>
+      </div>
+      <div class="card_btn">
+        <div>修改</div>
+        <div>删除</div>
+      </div>
     </div>
+
+    <div class="btn">去回答</div>
   </div>
 </template>
 
@@ -62,15 +77,14 @@ export default {
   }
 
   .answer_card {
-    background: #FFF;
+    margin-top: 32px;
-
-    
     .card_head {
+      background: #FFF;
       padding: 24px;
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
-
+      border-radius: 16px 16px 0 0;
       .left {
         display: flex;
         img {
@@ -87,6 +101,76 @@ export default {
         align-self: center;
       }
     }
+
+    .card_body {
+      background: #FFF;
+      padding: 0 24px 24px 24px;
+      box-sizing: border-box;
+      border-bottom: 2px solid #E4E5E6;
+      
+      .card_content {
+        // position: relative;
+        height: 100%;
+        width: 100%;
+        overflow: hidden; 
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 5;
+
+        // &::after {
+        //   position: absolute;
+        //   position: relative;
+        //   right: 0;
+        //   bottom: 0;
+        //   content: "全文";
+        //   color: #3975C6;
+        //   z-index: 999;
+        //   margin-left: 8px;
+        // }
+
+        // .all_btn {
+        //   position: relative;
+        //   display: inline-block;
+        //   height: 16px;
+        //   width: 16px;
+        //   background-size: cover;
+        //   margin-left: 2px;
+        //   z-index: 999;
+        // }
+      }
+    }
+
+    .card_btn {
+      background: #FFF;
+      height: 88px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      border-radius: 0 0 16px 16px;
+      div {
+        flex: 1;
+        text-align: center;
+        font-size: 28px;
+        color: #687DA6;
+      }
+    } 
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 16px;
+    left: 50%;
+    transform: translate(-50%,0);
+    width: 320px;
+    height: 88px;
+    line-height:88px;
+    border-radius: 44px;
+    background: #3975C6;
+    text-align: center;
+    font-weight: 500;
+    font-size: 34px;
+    color: #FFFFFF;
   }
 }
 </style>