106 lines
1.7 KiB
Vue
106 lines
1.7 KiB
Vue
<template>
|
||
<view class="assistant-container">
|
||
<view class="header">
|
||
<text class="title">AI助手</text>
|
||
</view>
|
||
|
||
<view class="chat-area">
|
||
<view class="welcome-message">
|
||
<text class="welcome-text">您好！我是您的宠物AI助手</text>
|
||
<text class="welcome-desc">可以为您解答宠物饲养、健康、训练等问题</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="input-area">
|
||
<input class="message-input" placeholder="请输入您的问题..." />
|
||
<view class="send-btn">
|
||
<text class="send-text">发送</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.assistant-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.header {
|
||
padding: 20rpx 30rpx;
|
||
background-color: white;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.chat-area {
|
||
flex: 1;
|
||
padding: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.welcome-message {
|
||
text-align: center;
|
||
|
||
.welcome-text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
display: block;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.welcome-desc {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.input-area {
|
||
background-color: white;
|
||
padding: 20rpx 30rpx;
|
||
border-top: 1rpx solid #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.message-input {
|
||
flex: 1;
|
||
background-color: #f5f5f5;
|
||
border-radius: 30rpx;
|
||
padding: 20rpx 30rpx;
|
||
font-size: 28rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.send-btn {
|
||
background-color: #4ecdc4;
|
||
padding: 20rpx 40rpx;
|
||
border-radius: 30rpx;
|
||
|
||
.send-text {
|
||
color: white;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|