问答

src/project/fd/AppAnswer/Search.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="AppAnswerList">
+    <div class="search-wrapper">
+      <div class="search">
+        <image src="./img/search.png" />
+        <input placeholder="请输入" v-model="name">
+        <image v-if="name" src="./img/close.png" @click="name = ''" />
+      </div>
+    </div>
+    <div class="list-wrapper">
+      <div class="item" v-for="(item, index) in 12" :key="index" @click="linkTo('./answerList')">
+        <div class="item-title">
+          <i>我 </i>
+          <span>于2022年12月30日 12:23:54 提问</span>
+        </div>
+        <p>基层工作如何展开相关工作合适基层工作如何展开相关工作合适基层工作如何展...</p>
+        <div class="item-bottom">
+          <div class="left">
+            <span>共</span>
+            <i>0</i>
+            <span>条回答</span>
+          </div>
+          <div class="right">
+            <span @click.stop="linkTo('./answerList')">修改问题</span>
+            <span @click.stop="linkTo('./answerAdd')">去回答</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        name: ''
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+      linkTo (url) {
+        console.log(url)
+        uni.navigateTo({
+          url
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppAnswerList {
+    padding: 0 32px 20px;
+
+    .search-wrapper {
+      position: sticky;
+      top: 0;
+      z-index: 11;
+      padding: 20px 0;
+      background: #F3F5F9;
+    }
+
+    .search {
+      display: flex;
+      align-items: center;
+      height: 64px;
+      padding: 0 32px;
+      border-radius: 16px;
+      background: #fff;
+
+      image {
+        width: 32px;
+        height: 32px;
+        margin-right: 8px;
+      }
+
+      input {
+        flex: 1;
+        font-size: 26px;
+        color: #999999;
+      }
+    }
+
+    .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;
+      }
+    }
+
+    .list-wrapper {
+      padding-bottom: 40px;
+
+      .item {
+        margin-bottom: 24px;
+        padding: 24px;
+        border-radius: 16px;
+        background: #fff;
+
+        .item-bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 48px;
+
+          .right {
+            span {
+              height: 56px;
+              line-height: 56px;
+              margin-right: 24px;
+              padding: 0 16px;
+              background: #FFFFFF;
+              border: 1px solid #FF883C;
+              color: #FF883C;
+              border-radius: 8px;
+
+              &:last-child {
+                margin-right: 0;
+                color: #3975C6;
+                border: 1px solid #3975C6;
+              }
+            }
+          }
+
+          div {
+            display: flex;
+            align-items: center;
+            font-size: 28px;
+            color: #999;
+          }
+
+          i {
+            font-style: normal;
+            color: #3975C6;;
+          }
+        }
+
+        p {
+          line-height: 1.3;
+          font-size: 34px;
+          color: #333333;
+        }
+
+        .item-title {
+          display: flex;
+          align-items: center;
+          margin-bottom: 16px;
+          font-size: 28px;
+          color: #999;
+
+          i {
+            font-style: normal;
+            color: #3975C6;;
+          }
+        }
+      }
+    }
+  }
+</style>