JinShan_uniapp/pages/chat/index.vue

<template>
	
	<view class="aiHelper">
		
		<view class="aiHelperContainer">
			<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">{{aiHelperTitle}}</view>
			<view class="aiBox">
				<view class="aiType" v-for="(item,index) in aiType" :key="item.id" @click="goAiType">
					<view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
		
						<view class="aiLeft" :style="{'background-image': `url(${item.imgPath})`}">
		
							<view class="aiLeftTitle">{{item.name}}</view>
						</view>
						<view class="aiRight">
							<view class="aiRightTitle"><text>{{item.description}}</text></view>
							<view class="aiDescription"><text>开始对话></text></view>
						</view>
					</view>
				</view>
			</view>
		</view>

       
	   <view><Footer></Footer></view>
		
	</view>
	
</template>

<script>
	import Footer from '@/components/footer_common.vue';
	export default{
		name:'aiHelper',
		components:{Footer},
		data(){
			return{
				aiHelperTitle:'AI智能助手',
				aiHelperTitleBackground:'../../static/imgs/ai/title.png',
				aiType:[
				  {
					id:1,
					name:'政策解读',
					path:'policy',
					description:['您好，','我是政策解读助手！'].join('\n'),
					// text:'致力于将复杂的政策文件转化为通俗易懂的信息。我会结合政策背景、核心条款和实际案例，为您提供清晰、中立的解读，帮助您快速抓住重点，规避风险，把握机遇。',
					imgPath:'../../static/imgs/ai/zhengceijiedu.png',
					background:'../../static/imgs/ai/zhengceijiedu-background.png',
				  },
				  {
				  	id:2,
				  	name:'膳食管家',
					path:'diet',
				  	description:['您好，','我是你的膳食管家！'].join('\n'),
				  	// text:['近来处于换季期，结合润燥、增强免疫力和营养均衡的原则，帮助身体适应气候变化，以下是我为您推荐的食谱：',
					  //     '🌟早餐推荐（温暖脾胃，补充能量）',
						 //  '1、南瓜小米红枣粥',
						 //  '搭配：水煮蛋 + 凉拌菠菜......'].join('\n'),
				  	imgPath:'../../static/imgs/ai/shanshiguanjia.png',
				  	background:'../../static/imgs/ai/shanshiguanjia-background.png',
				  },
				  {
				  	id:3,
				  	name:'穿搭顾问',
					path:'outfits',
				  	description:['您好，','我是你的穿搭顾问！'].join('\n'),
				  	// text:['🌤️ 今日天气穿搭指南 🌡️',
					  //     '根据实时气象数据为您定制穿衣方案，助您舒适应对天气变化！',
						 //  '通用公式',
						 //  '气温+降水+风力 = 基础穿搭',
						 //  '活动场景±体感偏好 = 细节调整......'].join('\n'),
				  	imgPath:'../../static/imgs/ai/chuandaguwen.png',
				  	background:'../../static/imgs/ai/chuandaguwen-background.png',
				  },
				  {
				  	id:4,
				  	name:'生活咨询',
					path:'lifeCounseling',
				    description:['您好，','我是你的生活小助手！'].join('\n'),
				  	// text:'需要帮孩子制定假期计划？或是突然遇到水管漏水？随时告诉我，立刻为你支招！',
				  	imgPath:'../../static/imgs/ai/shenghuozixun.png',
				  	background:'../../static/imgs/ai/shenghuozixun-background.png',
				  },
				],
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.aiHelper{
		// margin-top: 90rpx;
		.aiHelperContainer {
		    padding: 2%;
		    padding-bottom: 50%;
		
		    .aiHelperTitle {
		        font-size: 1rem;
		        font-weight: 600;
		        letter-spacing: 0;
		        line-height: 1.5;
		        color: rgba(0, 0, 0, 1);
		        text-align: center;
		        vertical-align: top;
		        margin-bottom: 3%;
				// background-image: url('../../static/imgs/ai/title.png');
				background-repeat: no-repeat;
				background-position: 50% 80%;
				 background-size: 30%;
		    }
		
		    .aiBox {
		        .aiType {
		            margin-bottom: 3%;
		            width: 100%;
					height: 310rpx;
		            display: flex;
		            justify-content: center;
		
		            .aiTypeContainer {
		                display: flex;
		                margin: 1%;
		                border-radius: 0.5rem;
		                background-size: cover;
						box-shadow: 4px 4px 4px  rgba(0, 0, 0, 0.25);
		                background-position: 30% 50%;
		                background-repeat: no-repeat;
		                width: 96%;
		                aspect-ratio: 2.1/1;
		
		                .aiLeft {
		                    border-radius: 0.5rem;
		                    padding: 5% 0;
		                    margin-right: 12%;
		                    background-size: cover;
		                    background-position: center;
		                    background-repeat: no-repeat;
		                    width: 35%;
		                    // height: 100%;
		                   /* margin-left: -5%;*/
		                    position: relative;
		
		                    .aiLeftTitle {
		                        font-size: 0.8rem;
		                        font-weight: 900;
		                        letter-spacing: 0;
		                        line-height: 1.4;
		                        color: rgba(255, 255, 255, 1);
		                        text-align: left;
		                        position: absolute;
		                        bottom: 10%;
		                        left: 10%;
		                    }
		                }
		
		                .aiRight {
		                    flex: 1;
		                    display: flex;
		                    flex-direction: column;
		                    justify-content: normal;
		
		                    .aiRightTitle {
		                        font-size: 0.8rem;
		                        font-weight: 700;
		                        letter-spacing: 0;
		                        line-height: 1.4;
		                        color: rgba(0, 0, 0, 1);
		                        text-align: left;
		                        margin-bottom: 5%;
								margin-top: 22%;
		                    }
		
		                    .aiDescription {
		                        font-size: 26rpx;
		                        font-weight: 700;
		                        letter-spacing: 0;
		                        line-height: 2.5;
		                        color: #999;
		                        text-align: right;
								width: 90%;
		                    }
		                }
		            }
		        }
		    }
		}
	}
	
	
</style>