feat: 搭建快捷提问组件与一些样式调整

src/components/AiTabSwitch/index.vue

@@ -99,6 +99,7 @@ const handleSwitch = (i) => {
 
 .tab-text {
   font-size: 18px;
+  font-weight: 500;
   color: rgba(255, 255, 255, 0.65);
   z-index: 20;
 }

src/components/ModuleTitle/styles/index.scss

@@ -6,6 +6,7 @@
 
 .module-title {
   font-size: 18px;
+  font-weight: bold;
   color: #171717;
   position: relative;
   z-index: 1;

src/pages/Discovery/components/FindTabs/styles/index.scss

@@ -46,7 +46,8 @@
 }
 
 .tab-text {
-  font-size: 20px;
+  font-size: 16px;
+  font-weight: 500;
   color: rgba(128, 140, 153, 0.9);
   z-index: 5;
   padding: 0 4px;
@@ -55,7 +56,7 @@
 
 .tab-item.active .tab-text {
   color: #0b0b0b;
-  font-weight: 800;
+  font-weight: bold;
 }
 
 .tab-indicator {

src/pages/Discovery/components/QuickQuestions/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <view class="container pl-12">
+    <ModuleTitle :title="themeName" />
+
+    <view class="container-scroll font-size-0 scroll-x whitespace-nowrap">
+
+      <view class="card-item bg-white inline-block rounded-20 p-10 mr-10"
+        v-for="(item, index) in recommendPostsList" :key="index" @click="sendReply(item)">
+
+        <view class="flex flex-row items-center"> 
+          <image class="card-img rounded-14" :src="item.coverPhoto" mode="aspectFill" />
+
+          <view class="ml-8 mt-4 border-box">
+            <view class="font-size-12 font-600 color-171717 ellipsis-1">
+              {{ item.title }}
+            </view>
+            <view class="font-size-9 color-94A3B8 ellipsis-1">
+              {{ item.subTitle }}
+            </view>
+          </view>
+        </view>
+        
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+
+const props = defineProps({
+  themeName: {
+    type: String,
+    default: "快捷提问",
+  },
+  recommendPostsList: {
+    type: Array,
+    default: () => [
+      {
+        title: "小七孔古桥",
+        subTitle: "小七孔古桥",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
+      },
+      {
+        title: "翠谷瀑布",
+        subTitle: "翠谷瀑布",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
+      },
+      {
+        title: "鸳鸯湖",
+        subTitle: "鸳鸯湖",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+        
+      },
+      {
+        title: "卧龙潭",
+        subTitle: "卧龙潭",
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+      }
+    ],
+  },
+});
+
+const sendReply = (item) => {
+  if (item.userInputContentType && item.userInputContentType === '1') {
+    const commonItem = { type: item.userInputContent, title: item.topic }
+    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
+    return;
+  }
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

src/pages/Discovery/components/QuickQuestions/styles/index.scss

@@ -0,0 +1,12 @@
+.container-scroll {
+  margin: 4px 0 6px;
+}
+
+.card-item {
+  width: 130px;
+}
+
+.card-img {
+  height: 40px;
+  width: 40px;
+}

src/pages/Discovery/index.vue

@@ -1,6 +1,7 @@
 <template>
   <view>
     <FindTabs v-model="activeIndex" @change="handleTabChange" />
+    <QuickQuestions />
    
   </view>
   
@@ -10,6 +11,7 @@
 <script setup>
 import { ref } from "vue";
 import FindTabs from "./components/FindTabs/index.vue";
+import QuickQuestions from "./components/QuickQuestions/index.vue";
 
 const activeIndex = ref(0);
 

src/static/scss/colors.scss

@@ -40,6 +40,10 @@
   color: #ff3d60;
 }
 
+.color-94A3B8 {
+  color: #94a3b8;
+}
+
 .theme-color-500 {
   color: $theme-color-500;
 }

src/static/scss/rounded.scss

@@ -23,6 +23,10 @@
   border-radius: 12px;
 }
 
+.rounded-14 {
+  border-radius: 14px;
+}
+
 .rounded-16 {
   border-radius: 16px;
 }