feat: 第一次上传代码

pages/chat/ChatMoreTips.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="more-tips">
+		<view class="more-tips-scroll">
+			<view class="more-tips-item" v-for="(item, index) in itemList" :key="index">
+				<text class="more-tips-item-title" @click="sendReply(item.title)">{{ item.title }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { onMounted, ref } from 'vue';
+	const itemList = ref([])
+	const emits = defineEmits(['replySent']);
+
+	const sendReply = (text) => {
+		emits('replySent', text); // 向父组件传递数据
+	}
+	
+	onMounted(() => {
+		initData()
+	})
+	
+	const initData = () => {
+		itemList.value = [
+			{
+				title: '定温泉票',
+			},
+			{
+				title: '定酒店',
+			},
+			{
+				title: '优惠套餐',
+			},
+			{
+				title: '亲子玩法',
+			},
+			{
+				title: '了解交通',
+			},
+			{
+				title: '看看酒店',
+			},
+			{
+				title: '看看美食',
+			}
+		] 
+	}
+	
+</script>
+
+<style lang="scss" scoped>
+	.more-tips {
+		width: 100%;
+		
+		&-scroll {
+		    display: flex;
+		    flex-direction: row;
+		    overflow-x: auto;
+		    white-space: nowrap;
+		    -webkit-overflow-scrolling: touch; 
+		    
+		    /* 隐藏滚动条 */
+		    scrollbar-width: none; 
+		    &::-webkit-scrollbar {
+		      display: none; 
+		    }
+		  }
+		
+		.more-tips-item {
+			border-radius: 8px;
+			margin: 4px;
+			box-shadow: 0 2px 5px 0px rgba(0,0,0,0.1);
+			background-color: #FFFFFF;
+			padding: 2px 12px;
+			display: flex; 
+			flex-direction: column;
+			min-width: 46px;
+			
+			&:first-child {
+				margin-left: 12px;
+			}
+				
+			&:last-child {
+				margin-right: 12px;
+			}
+			
+			.more-tips-item-title {
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 500;
+				font-size: 12px;
+				color: #00A6FF;
+				line-height: 24px;
+				text-align: center;
+			}
+		}
+	}
+</style>