web3-202226701037/chexnet-master-MP/pages/index/index.vue

<template>
	<view>
		
		<image class="top-img" src="@/static/img/lbt1.jpg"></image>
		
		<view class="container">
			<!-- <view class="search-bar">
				<input type="text" placeholder="请输入关键词搜索" />
			</view> -->
			<view @click="to_ai()" class="large-button button-all" style="background-color: #d4f4c2;"><!-- blanchedalmond -->
				<view class="align-center flex justify-between">
					<image style="height: 22vw; width: 22vw; margin-left: -3vw;" src="@/static/img/ai-talk.png"></image>
					<p style="color: #5c6a7c; font-size: 30px; margin-left: 4vw;">AI 问诊</p>
				</view>
			</view>
			
			<view @click="$util.navigateTo('/pages/img_process/img_process')" class="large-button button-all" style="background-color: blanchedalmond;"><!-- blanchedalmond -->
				<view class="align-center flex justify-between">
					<image style="height: 20vw; width: 20vw; margin-left: 2vw;" src="@/static/img/识别.png"></image>
					<p style="color: #5c6a7c; font-size: 28px; margin-left: 4vw;">病例识别</p>
				</view>
			</view>
			
			<view @click="$util.navigateTo('/pages/health_tip/health_tip')" class="large-button button-all" style="background-color: aliceblue;">
				<view class="align-center flex justify-between">
					<image style="height: 22vw; width: 22vw; margin-left: 5vw;" src="@/static/img/health-tip.png"></image>
					<p style="color: #5c6a7c; font-size: 26px; margin-left: 4vw;">健康小知识</p>
				</view>
			</view>
			
			<view @click="$util.navigateTo('/pages/BMI/BMI')" class="large-button button-all" style="background-color: #fff1f1;"> <!-- #fffae8 #fff0ff-->
				<view class="align-center flex justify-between">
					<image style="height: 22vw; width: 22vw; margin-left: 0vw;" src="@/static/img/bmi.png"></image>
					<p style="color: #5c6a7c; font-size: 30px; margin-left: 10vw;">B M I</p>
				</view>
			</view>
			
			<uv-gap height="20vw"></uv-gap>
			
			<view v-if="windowHeight">
				<image @click="to_ai()" :style="{top:`calc(${windowHeight}px - 30vw)`}" class="doctor" :src="doctor_gender == 1 ? doctor_woman : doctor_man"></image>
				<view v-if="isTalking" :style="{ width: `${talkWidth}`, top:`calc(${windowHeight}px - 18vw)` }" class="talk">{{message}}</view>
			</view>
			<!-- <uv-button @click="$util.navigateTo('/pages/test/test')"></uv-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			let doctor_gender = uni.getStorageSync('doctor_gender');
			if(doctor_gender === 0) this.doctor_gender = 0;
			else this.doctor_gender = 1;
			console.log('doctor_gender: ',this.doctor_gender);
			
		},
		onReady() {
			const windowHeight = uni.getSystemInfoSync().windowHeight - getBottomBarHeight();
			this.windowHeight = windowHeight;
			console.log('windowHeight-init: ',windowHeight);
			
			function getBottomBarHeight() {
				let res = uni.getSystemInfoSync();
				const windowHeight = res.windowHeight; // 屏幕可用高度
				const screenHeight = res.screenHeight; // 屏幕总高度
				
				// 状态栏高度
				const statusBarHeight = res.statusBarHeight
				
				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)
				
				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				const navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2
				// console.log("导航栏高度："+navigationBarHeight)
				
				// 总体高度 = 状态栏高度 + 导航栏高度
				const navHeight = navigationBarHeight + statusBarHeight
				
				// #endif
				
				let bottomBarHeight = screenHeight - windowHeight - navHeight;
				bottomBarHeight = bottomBarHeight > 0 ? bottomBarHeight : 0;
				
				console.log('Bottom Bar Height:',bottomBarHeight);
				
				return bottomBarHeight;
			}
		},
		onLoad() {
			this.$user_api.check_login();
		},
		mounted(){
			this.talk();
		},
		onPullDownRefresh() {
			setTimeout(() => {uni.stopPullDownRefresh();}, 1000);
		},
		data() {
			return {
				windowHeight: null,
				
				doctor_woman: '/static/img/女医生.png',
				doctor_man: '/static/img/男医生.png',
				doctor_gender: 1,
				name: null,
				time: 1,
				message: '您好 !',
				message_num: 0,
				talkWidth: '30vw',
				isTalking: true
				// list: [
				// 	'../../static/img/lbt1.jpg',
				// 	'../../static/img/lbt2.jpg',
				// 	'../../static/img/lbt3.jpg'
				// ]
			};
		},
		methods: {
			to_ai(){
				uni.switchTab({
					url: '/pages/ai/ai'
				})
			},
			to_home(){
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			talk(){
				return new Promise((resolve, reject) => {
					if(this.message_num < 6){
						if(this.message_num == 1) {
							this.talkWidth = '30vw';
							const hour = new Date().getHours();
							console.log('hour: ',hour);
							if (hour >= 4 && hour < 8) {
								this.message = '早上好 !'; // 早上
							} else if (hour >= 8 && hour < 12) {
								this.message = '上午好 !'; // 上午
							} else if (hour >= 12 && hour < 18) {
								this.message = '下午好 !'; // 下午
							} else {
								this.message = '晚上好 !'; // 晚上
							}
							this.applyAnimation();
						}
						if(this.message_num == 2) {
							this.talkWidth = '60vw';
							this.message = '希望您今天过得愉快。';
							this.applyAnimation();
						}
						if(this.message_num == 3) {
							this.talkWidth = '65vw';
							this.message = '有什么我可以帮您的吗？';
							this.applyAnimation();
						}
						if(this.message_num == 4) {
							this.talkWidth = '60vw';
							this.message = '注意休息，保持健康。';
							this.applyAnimation();
						}
						
						this.message_num = this.message_num + 1;
						// console.log('this.message_num: ',this.message_num);
						setTimeout(() => this.talk(), 3000);
					}
					else{
						this.message_num = 0;
						setTimeout(() => this.talk(), 3000);
					}
				})
			},
			applyAnimation() {
				this.isTalking = false;
				setTimeout(() => this.isTalking = true, 100);
			},
		}
	};
</script>

<style>
	page {
		height: 100vh;
		background-color: #fff;
	}
	
	.container {
		margin: 0 20px;
		display: flex;
		flex-direction: column;
		height: 80vh;
	}

	.header-index {
	  width: 100%;
	  padding: 10px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  color: #ee4863;
	  font-weight: 1000;
	  backdrop-filter: blur(10px); /* 高斯模糊效果 */
	  background-color: #f8df72; /* 半透明背景 */
	  border: none;
	}

	.header-title {
	  font-size: 20px;
	}

	.header-login {
	  color: white;
	  text-decoration: none;
	  font-size: 16px;
	}

	.search-bar {
	  width: 100%;
	}

	.search-bar input {
	  font-size: 16px;
	  width: 100%;
	  height: 5vh;
	  padding: 10px;
	  box-sizing: border-box;
	  border-radius: 5px;
	}

	.button-group {
	  font-weight: 1000;
	  margin-top: 20px;
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  gap: 20px;
	}

	.square-button {
	  width: 100%;
	  height: 18vh;
	  line-height: 100px;
	  text-align: center;
	  color: #5bae23;
	  border: none;
	  border-radius: 5px;
	}

	.large-button {
		color: #fff;
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 40vw;
		margin-top: 20px;
		width: 100%;
		font-weight: 1000;
	}
	
	.doctor{
		height: 30vw;
		width: 30vw;
		margin-top: auto;
		position: fixed;
		left: -2vw;
	}
	
	.talk {
		position: fixed;
		left: 30vw;
		width: 30vw;
		height: 40px;
		color: #5c6a7c;
		font-size: 20px;
		font-weight: 1000;
		border-radius: 8px;
		background-color: #ffece3;
		display: flex; /* 使用flex布局来实现居中 */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
	}
	
	.talk::before {
		content: "";
		position: absolute;
		top: 50%; /* 三角形位于元素下方 */
		right: 100%; /* 水平居中 */
		width: 0;
		height: 0;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-right: 10px solid #ffece3; /* 使用变量 */
		transform: translateY(-50%); /* 确保三角形的中心点位于 .active 元素的中心 */
	}
	
	.talk {
	    opacity: 0; /* 初始透明度 */
		animation: fadeInLeft 1s ease-in-out forwards;
	}
	
	/* 箭头淡入动画 */
	@keyframes fadeInLeft {
		0% {
			opacity: 0;
			transform: translateX(100%);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

</style>