feat: 消息组件 回答组件

src/pages/index/components/module/AnswerComponent/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+    <!-- 占位撑开 -->
+    <view class="w-vw"></view>
+    <view class="flex flex-col p-16 border-box">
+      <view class="flex flex-row flex-items-center justify-center">
+        <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
+        <text class="font-size-16 font-500 text-color-900 ml-6">游玩划重点</text>
+      </view>
+      <!-- 文字内容，最多显示3行 -->
+      <view class="answer-content font-size-12 font-color-600 mt-8">
+        {{ answerText }}
+      </view>
+      <!-- 超过3行时显示...提示 -->
+      <view class="fles flex-row mt-8" v-if="isOverflow">
+        <text class="font-size-12 font-400 theme-color-500 mr-4">查看完整攻略</text>
+        <uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isOverflow = ref(true)
+
+// 直接根据文字长度判断，超过约100个字符认为会溢出（约3行）
+const answerText = '建议一定要去「东华门」看角楼夕阳，那里是摄影师的私藏机位。御花园目前的玉兰花开得正好，别忘了抬头看看红墙上的猫。建议一定要去「东华门」看角楼夕阳，那里是摄影师的私藏机位。御花园目前的玉兰花开得正好，别忘了抬头看看红墙上的猫。'
+
+// 简单判断：12号字体3行约100个字符
+isOverflow.value = answerText.length > 100
+
+</script>
+
+<style scoped lang="scss">
+.icon-active {
+  margin-top: 1px;
+  color: $theme-color-500;
+}
+.answer-content {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 16px;
+}
+</style>