学习问答

src/project/fd/AppAnswer/Add.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="add">
+    <textarea placeholder="请输入回答内容" :maxlength="500"></textarea>
+
+    <div class="answer-btn">
+      <div>提问</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    appName: '提问',
+
+    data () {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .add {
+    padding-top: 32px;
+
+    textarea {
+      width: 718px;
+      height: 640px;
+      margin: 0 auto;
+      padding: 32px 16px;
+      font-size: 32px;
+      color: #333;
+      border-radius: 32px;
+      background: #fff;
+      box-sizing: border-box;
+    }
+
+    .answer-btn {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      padding: 16px 32px;
+      text-align: center;
+      box-sizing: border-box;
+      background: #F3F5F9;
+
+      div {
+        height: 88px;
+        line-height: 88px;
+        background: #3975C6;
+        border-radius: 44px;
+        font-size: 34px;
+        color: #FFFFFF;
+      }
+    }
+  }
+</style>

src/project/fd/AppAnswer/Search.vue

@@ -32,6 +32,8 @@
 
 <script>
   export default {
+    appName: '学习问答',
+
     data () {
       return {
         name: ''

src/project/fd/AppAnswer/component/List.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="AppAnswerList">
-    <div class="search" @click="linkTo('./Search')">
-      <image src="../img/search.png" />
-      <div>请输入</div>
+    <div class="search-wrapper">
+      <div class="search" @click="linkTo('./Search')">
+        <image src="../img/search.png" />
+        <div>请输入</div>
+      </div>
     </div>
     <div class="list-wrapper">
       <div class="item" v-for="(item, index) in 12" :key="index" @click="linkTo('./answerList')">
@@ -25,7 +27,7 @@
       </div>
     </div>
     <div class="answer-btn">
-      <div>提问</div>
+      <div @click="linkTo('./Add')">提问</div>
     </div>
   </div>
 </template>
@@ -57,14 +59,18 @@
   .AppAnswerList {
     padding: 0 32px 120px;
 
-    .search {
+    .search-wrapper {
       position: sticky;
-      display: flex;
       top: 112px;
       z-index: 11;
+      padding: 0 0 20px 0;
+      background: #F3F5F9;
+    }
+
+    .search {
+      display: flex;
       align-items: center;
       height: 64px;
-      margin: 0 0 24px;
       padding: 0 32px;
       border-radius: 16px;
       background: #fff;