完成宠物小程序基础功能开发
✨ 新功能: - 创建了4个主要Tab页面:宠物、助手、领养、我的 - 集成uview-ui-next UI框架 - 添加可爱的宠物主题图标 - 实现宠物列表展示和管理功能 - 配置微信小程序登录功能 🎨 界面优化: - 使用uView组件美化界面 - 统一的设计风格和配色方案 - 响应式布局适配 📦 技术栈: - uni-app + Vue3 - uview-ui-next UI框架 - 微信小程序平台
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user