AI-app/pages/index/front/index.vue

<template>
	<view>
		<!-- greeting card -->
		<view class="greet-card">
			<image class="ai-image" src="@/static/ai.webp" mode="widthFix" style="width: 60px; margin-right: 10px"></image>
			<view class="greet-text">
				<view class="hi">HI，{{ timeOfDayText }}</view>
				<view class="sub">我是萃星科技智能体</view>
			</view>
		</view>

		<!-- welcome sentence -->
		<view class="welcome">
			您好！非常高兴与您交流，今天有什么可以帮到您？
		</view>

		<!-- suggestions -->
		<view class="guess-panel">
			<view class="guess-title">猜你想问</view>
			<view class="guess-list">
				<view class="guess-item" @tap="onSuggestionTap(item.label)" v-for="item in guessData" :key="item.id">
					<text>{{ item.label }}</text>
					<text class="arrow">›</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guessData: [{
						id: 1,
						label: "今日出入库数据",
					},
					{
						id: 2,
						label: "今日销售数据",
					},
					{
						id: 3,
						label: "今日生产数据",
					},
				],
				aiLogoMsg : null
			}
		},
		computed: {
			timeOfDayText() {
				const h = new Date().getHours();
				if (h < 6) return "凌晨好";
				if (h < 12) return "上午好";
				if (h < 18) return "下午好";
				return "晚上好";
			},
		},
		mounted(){
			let self = this;
			uni.createSelectorQuery().select(".ai-image").boundingClientRect((rect) => {
				self.aiLogoMsg = rect
			}).exec();
		},
		methods: {
			onSuggestionTap(text) {
				this.$emit('onSuggestionTap', text)
			},
			getAiLogoMsg() {				
				return this.aiLogoMsg;
			}
		
		}
	}
</script>

<style scoped>
	.greet-card {
		display: flex;
		align-items: center;
		background-image: linear-gradient(to right, #EFF6FF, #EEF2FF);
		border-radius: 14px;
		padding: 12px;
		margin-bottom: 10px;
	}

	.greet-text .hi {
		font-size: 16px;
		font-weight: 700;
		color: #0b56ff;
	}

	.greet-text .sub {
		font-size: 12px;
		color: #4a76b1;
		margin-top: 4px;
	}

	.welcome {
		font-size: 13px;
		color: #333;
		background: #F3F7F9;
		border-radius: 12px;
		padding: 10px 12px;
		margin: 12px 0;
		max-width: 80%;
	}

	.guess-panel {
		background-image: linear-gradient(to right, #EFF6FF, #EEF2FF);
		border-radius: 14px;
		padding: 10px;
		margin-bottom: 16px;
	}

	.guess-title {
		color: #5f6fff;
		font-size: 14px;
		margin-bottom: 8px;
	}

	.guess-list {
		display: flex;
		flex-direction: column;
	}

	.guess-item {
		background: #FFFFFF ;
		border-radius: 10px;
		padding: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

	.guess-item:last-child {
		margin-bottom: 0;
	}

	.guess-item .arrow {
		color: #9aa3b2;
		font-size: 18px;
	}
</style>