文明问答

src/project/fd/AppAnswer/AppAnswer.vue

@@ -1,10 +1,21 @@
 <template>
   <div class="AppAnswer">
+    <div class="tab-wrapper">
+      <div class="tab">
+        <span :class="[component === 'List' ? 'active' : '']" @click="change('List')">问题</span>
+        <span :class="[component === 'Ranking' ? 'active' : '']" @click="change('Ranking')">排行</span>
+      </div>
+    </div>
+    <div class="AppAnswer-body">
+      <component :is="component"></component>
+    </div>
   </div>
 </template>
 
 <script>
   import { mapState } from 'vuex'
+  import List from './component/List'
+  import Ranking from './component/Ranking'
 
   export default {
     name: 'AppAnswer',
@@ -15,20 +26,34 @@
         list: [],
         wxLogin: 0,
         current: 1,
-        total: 0
+        total: 0,
+        component: 'List'
       }
     },
+
+    components: {
+      List,
+      Ranking
+    },
+
     computed: {
       ...mapState(['user']),
     },
     methods: {
       getList () {
+
       },
+
       handleDetail (id) {
         if (!this.user.token) this.wxLogin++
         else uni.navigateTo({url: './voteDetail?id=' + id})
+      },
+
+      change (type) {
+        this.component = type
       }
     },
+
     onReachBottom () {
       this.getList()
     }
@@ -38,6 +63,47 @@
 <style lang="scss" scoped>
   .AppAnswer {
     min-height: 100vh;
-    background: #fff;
+    background: #F3F5F9;
+
+    .tab-wrapper {
+      position: sticky;
+      top: 0;
+      z-index: 11;
+      background: #3975C6;
+    }
+
+    .tab {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      border-radius: 50px 50px 0 0;
+      padding: 0 256px;
+      background: #F3F5F9;
+
+      span {
+        position: relative;
+        line-height: 1;
+        color: #999999;
+        font-size: 40px;
+
+        &.active {
+          color: #000000;
+
+          &::after {
+            position: absolute;
+            bottom: -2px;
+            z-index: 0;
+            opacity: 0.8;
+            left: 50%;
+            width: 80px;
+            height: 12px;
+            background-image: linear-gradient(90deg, #46C0FF 0%, #0C85FF 100%);
+            transform: translateX(-50%);
+            content: '';
+          }
+        }
+      }
+    }
   }
 </style>

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="AppAnswerList">
+    <div class="search">
+      <image :src="$cdn + 'xincheng/search.png'" />
+      <input placeholder-style="color: #98A6B6" placeholder="请输入" v-model="name" @input="onChange">
+    </div>
+    <div class="list-wrapper">
+      <div class="item" v-for="(item, index) in 10" :key="index">
+        <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>修改问题</span>
+            <span>去回答</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        name: ''
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+      onChange () {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppAnswerList {
+    padding: 0 32px;
+
+    .search {
+      position: sticky;
+      display: flex;
+      top: 112px;
+      z-index: 11;
+      align-items: center;
+      height: 64px;
+      margin: 0 0 24px;
+      padding: 0 32px;
+      border-radius: 16px;
+      background: #fff;
+
+      image {
+        width: 32px;
+        height: 32px;
+        margin-right: 8px;
+      }
+
+      input {
+        font-size: 26px;
+        color: #999999;
+      }
+    }
+
+    .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>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>