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

<template>
	<view>
		<!-- <view class="header-index">
			<text class="header-title">智疗助手</text>
			<navigator v-if="name" @click="to_home" class="header-login">您好：{{name}}</navigator>
			<navigator v-else url="/pages/login/login" class="header-login">登录/注册</navigator>
		</view> -->
		
		<!-- <uv-swiper class="button-all" 
			bgColor="background-color: rgba(0, 0, 0, 0);" 
			style="margin:0 -15px;height: calc(25vh - 15px);" height="25vh" imgMode="aspectFill" indicator indicatorMode="dot" :list="list">
		</uv-swiper> -->
		
		<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: 25vw; width: 25vw; margin-left: 0vw;" src="@/static/img/ai-talk.png"></image>
					<p style="color: #5c6a7c; font-size: 30px; margin-left: 3vw;">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: 23vw; width: 23vw; margin-left: 0vw;" src="@/static/img/识别.png"></image>
					<p style="color: #5c6a7c; font-size: 28px; margin-left: 3vw;">病例识别</p>
				</view>
			</view>
			
			<view @click="$util.navigateTo('/pages/BMI/BMI')" class="large-button button-all" style="background-color: aliceblue;">
				<view class="align-center flex justify-between">
					<image style="height: 25vw; width: 25vw; margin-left: 0vw;" src="@/static/img/bmi.png"></image>
					<p style="color: #5c6a7c; font-size: 30px; margin-left: 12vw;">B M I</p>
				</view>
			</view>
			
			<view>
				<image style="height: 30vw;width: 30vw; margin-top: auto; position: fixed; bottom: 0vh; left: -2vw;" src="@/static/img/doctor.png"></image>
				<view v-if="isTalking" :style="{ width: talkWidth }" class="talk">{{message}}</view>
			</view>
			<!-- <uv-button @click="$util.navigateTo('/pages/test/test')"></uv-button> -->
		</view>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.$user_api.check_login();
	},
	mounted(){
		this.talk();
	},
	onShow() {
		this.name = uni.getStorageSync("name");
	},
	onPullDownRefresh() {
		this.name = uni.getStorageSync("name");
		setTimeout(() => {uni.stopPullDownRefresh();}, 1000);
	},
	data() {
		return {
			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>
<!-- 
		background-image: url('@/static/img/background.jpg');
		background-position: top center; /* 图片定位到顶部中心 */
		background-repeat: no-repeat; /* 防止图片重复 */
		background-size: 100% auto; /* 宽度覆盖整个容器，高度按比例调整 */-->

<style>
	page {
		height: 100vh;
	}
	
	.container {
		background-color: #ffffff;
		margin: 0 15px;
		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: 16vh;
		margin-top: 20px;
		width: 100%;
		font-weight: 1000;
	}
	
	.talk {
		position: fixed;
		bottom: 4vh;
		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>