Ethereal
1 month ago
14 changed files with 2170 additions and 19 deletions
-
134components/login-prompt.vue
-
7main.js
-
6package-lock.json
-
93pages.json
-
678pages/deepMate/deepMate.vue
-
399pages/start/Registration/Registration.vue
-
13pages/start/agreement/agreement.vue
-
134pages/start/components/login-prompt/login-prompt.vue
-
55pages/start/index/index.vue
-
371pages/start/login/login.vue
-
13pages/start/privacy/privacy.vue
-
194pages/start/select/select.vue
-
40pages/start/startup/startup.vue
-
18vue.config.js
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<view class="login-prompt" v-if="showPrompt"> |
||||
|
<view class="mask" :class="{ 'mask-show': showAnimation }" @click="hide"></view> |
||||
|
<view class="prompt-content" :class="{ 'slide-up': showAnimation }"> |
||||
|
<text class="prompt-title">登录以获得更好的体验</text> |
||||
|
<button class="login-btn" @click="goLogin">登录(推荐)</button> |
||||
|
<button class="visitor-btn" @click="continueAsVisitor">以访客身份继续</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
|
||||
|
// 定义响应式数据 |
||||
|
const showPrompt = ref(false); |
||||
|
const showAnimation = ref(false); |
||||
|
|
||||
|
// 显示弹窗 |
||||
|
const show = () => { |
||||
|
showPrompt.value = true; |
||||
|
// 在下一帧触发动画 |
||||
|
nextTick(() => { |
||||
|
setTimeout(() => { |
||||
|
showAnimation.value = true; |
||||
|
}, 10); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 隐藏弹窗 |
||||
|
const hide = () => { |
||||
|
showAnimation.value = false; |
||||
|
// 等待动画结束后再隐藏 |
||||
|
setTimeout(() => { |
||||
|
showPrompt.value = false; |
||||
|
}, 300); |
||||
|
}; |
||||
|
|
||||
|
// 跳转到登录页面 |
||||
|
const goLogin = () => { |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/login/login' |
||||
|
}); |
||||
|
hide(); |
||||
|
}; |
||||
|
|
||||
|
// 以访客身份继续 |
||||
|
const continueAsVisitor = () => { |
||||
|
// 设置访客模式 |
||||
|
uni.setStorageSync('visitorMode', true); |
||||
|
hide(); |
||||
|
}; |
||||
|
|
||||
|
// 暴露方法给外部使用 |
||||
|
defineExpose({ |
||||
|
show, |
||||
|
hide |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.login-prompt { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.mask { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.mask.mask-show { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.prompt-content { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 300rpx; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
background-color: white; |
||||
|
padding: 20rpx 30rpx; |
||||
|
transform: translateY(100%); |
||||
|
transition: transform 0.3s ease; |
||||
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
.prompt-content.slide-up { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
.prompt-title { |
||||
|
display: block; |
||||
|
text-align: left; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 700; |
||||
|
color: #333; |
||||
|
margin-top: 10rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.login-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color:rgb(35, 84, 230); |
||||
|
color: white; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.visitor-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color: #f5f5f5; |
||||
|
color: #333; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"name": "deepChartVueApp", |
||||
|
"lockfileVersion": 3, |
||||
|
"requires": true, |
||||
|
"packages": {} |
||||
|
} |
||||
@ -0,0 +1,678 @@ |
|||||
|
<template> |
||||
|
<view class="deepMate-page"> |
||||
|
<!-- 顶部导航栏 --> |
||||
|
<view class="header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> |
||||
|
<view class="header-left"> |
||||
|
<image src="../../static/icons/headset.png" class="icon"></image> |
||||
|
</view> |
||||
|
<view class="header-center"> |
||||
|
<text class="title">DeepMate</text> |
||||
|
</view> |
||||
|
<view class="header-right"> |
||||
|
<image src="../../static/icons/bell.png" class="icon"></image> |
||||
|
<image src="../../static/icons/clock.png" class="icon"></image> |
||||
|
<!-- 新增新会话按钮 |
||||
|
<button class="new-chat-button" @click="newChat"> |
||||
|
<text class="new-chat-text">新会话</text> |
||||
|
</button> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 主要内容区域 --> |
||||
|
<view class="main-content"> |
||||
|
<!-- 机器人头像和欢迎语 --> |
||||
|
<view class="robot-container" v-if="messages.length === 0"> |
||||
|
<image src="/static/robot.png" class="robot-avatar"></image> |
||||
|
<view class="welcome-message"> |
||||
|
<text class="greeting">Hi, 我是您的股市随身顾问~</text> |
||||
|
<text class="description">个股诊断、市场情绪解读，都可以找我。</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 功能标签栏 --> |
||||
|
<view class="function-tabs" v-if="messages.length === 0"> |
||||
|
<view class="tab-item ">个股诊断</view> |
||||
|
<view class="tab-item">市场情绪温度计</view> |
||||
|
<view class="tab-item">买卖时机提示</view> |
||||
|
<view class="tab-item">个股</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 特斯拉推荐卡片 --> |
||||
|
<view class="recommend-card" v-if="messages.length === 0"> |
||||
|
<view class="card-content"> |
||||
|
<image src="../../static/images/tesla-logo.png" class="logo"></image> |
||||
|
<view class="card-text"> |
||||
|
<text class="main-question">当前特斯拉该如何布局？</text> |
||||
|
<text class="stock-code">TSLA</text> |
||||
|
</view> |
||||
|
<image src="/static/icons/arrow-right.png" class="arrow-icon"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 可能感兴趣的话题 --> |
||||
|
<view v-if="messages.length === 0" class="interest-section"> |
||||
|
<text class="section-title">- 您可能感兴趣 -</text> |
||||
|
<view class="topics-list"> |
||||
|
<view class="topic-item" v-for="topic in hotTopics" :key="topic.id"> |
||||
|
<image |
||||
|
:src="topic.icon" |
||||
|
class="tag-icon" |
||||
|
></image> |
||||
|
<text class="topic-text" @click="sendMessageList(topic.text)">{{ topic.text }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 聊天区域 --> |
||||
|
<view class="chat-container" v-if="messages.length > 0"> |
||||
|
<view class="message-list" id="messageList"> |
||||
|
<view |
||||
|
v-for="(message, index) in messages" |
||||
|
:key="index" |
||||
|
:class=" |
||||
|
message.isUser ? 'message user-message' : 'message bot-message' |
||||
|
" |
||||
|
> |
||||
|
<!-- 会话图标 --> |
||||
|
<text |
||||
|
:class=" |
||||
|
message.isUser |
||||
|
? 'fa-solid fa-user message-icon' |
||||
|
: 'fa-solid fa-robot message-icon' |
||||
|
" |
||||
|
></text> |
||||
|
<!-- 会话内容 --> |
||||
|
<view class="message-content"> |
||||
|
<text class="message-text">{{ message.content }}</text> |
||||
|
<!-- loading --> |
||||
|
<view |
||||
|
class="loading-dots" |
||||
|
v-if="message.isThinking || message.isTyping" |
||||
|
> |
||||
|
<text class="dot"></text> |
||||
|
<text class="dot"></text> |
||||
|
<text class="dot"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 输入框区域 --> |
||||
|
<view class="input-area"> |
||||
|
<view class="input-wrapper"> |
||||
|
<image src="../../static/icons/mic.png" class="mic-icon"></image> |
||||
|
<input |
||||
|
type="text" |
||||
|
placeholder="请输入股票代码/名称，获取AI洞察" |
||||
|
class="input-field" |
||||
|
v-model="inputMessage" |
||||
|
@confirm="sendMessage" |
||||
|
/> |
||||
|
<button class="send-button" @click="sendMessage" :disabled="isSending"> |
||||
|
<image |
||||
|
src="/static/icons/send.png" |
||||
|
class="send-icon" |
||||
|
></image> |
||||
|
</button> |
||||
|
</view> |
||||
|
<text class="disclaimer" |
||||
|
>以上数据由AI生成，不作为最终投资建议，决策需独立！</text |
||||
|
> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
const { safeAreaInsets } = uni.getSystemInfoSync(); |
||||
|
|
||||
|
import { ref, onMounted, nextTick } from "vue"; |
||||
|
|
||||
|
const inputMessage = ref(""); |
||||
|
const isSending = ref(false); |
||||
|
const uuid = ref(""); |
||||
|
const messages = ref([]); |
||||
|
const hotTopics = ref([ |
||||
|
{ |
||||
|
id: 1, |
||||
|
text: '英伟达(NVDA)股票情绪温度？', |
||||
|
icon: '../../static/icons/hot-tag.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
text: '博通(AVGO)明天还能涨吗？', |
||||
|
icon: '../../static/icons/hot-tag.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
text: '为什么Fluence Energy(FLNC)会暴涨？', |
||||
|
icon: '../../static/icons/hot-tag.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
text: '为什么Fluence Energy(FLNC)会暴涨？', |
||||
|
icon: '../../static/icons/hot-tag.png' |
||||
|
} |
||||
|
]); |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
initUUID(); |
||||
|
// 如果有历史消息，滚动到底部 |
||||
|
if (messages.value.length > 0) { |
||||
|
nextTick(() => { |
||||
|
scrollToBottom(); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 初始化 UUID |
||||
|
const initUUID = () => { |
||||
|
let storedUUID = uni.getStorageSync('user_uuid'); |
||||
|
if (!storedUUID) { |
||||
|
storedUUID = generateUUID(); |
||||
|
uni.setStorageSync('user_uuid', storedUUID); |
||||
|
} |
||||
|
uuid.value = storedUUID; |
||||
|
}; |
||||
|
|
||||
|
// 生成简单UUID |
||||
|
const generateUUID = () => { |
||||
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { |
||||
|
var r = Math.random() * 16 | 0, |
||||
|
v = c == 'x' ? r : (r & 0x3 | 0x8); |
||||
|
return v.toString(16); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 新会话 |
||||
|
const newChat = () => { |
||||
|
messages.value = []; |
||||
|
uni.removeStorageSync('user_uuid'); |
||||
|
initUUID(); |
||||
|
}; |
||||
|
|
||||
|
// 发送消息 |
||||
|
const sendMessage = () => { |
||||
|
if (inputMessage.value.trim() === "" || isSending.value) return; |
||||
|
|
||||
|
const userMessage = { |
||||
|
content: inputMessage.value, |
||||
|
isUser: true, |
||||
|
isThinking: false, |
||||
|
isTyping: false |
||||
|
}; |
||||
|
|
||||
|
messages.value.push(userMessage); |
||||
|
inputMessage.value = ""; |
||||
|
|
||||
|
// 滚动到底部 |
||||
|
nextTick(() => { |
||||
|
scrollToBottom(); |
||||
|
}); |
||||
|
|
||||
|
// 模拟机器人回复 |
||||
|
simulateBotResponse(userMessage.content); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// 发送消息 |
||||
|
const sendMessageList = (listMessage) => { |
||||
|
|
||||
|
console.log(listMessage); |
||||
|
|
||||
|
|
||||
|
const userMessage = { |
||||
|
content: listMessage, |
||||
|
isUser: true, |
||||
|
isThinking: false, |
||||
|
isTyping: false |
||||
|
}; |
||||
|
|
||||
|
messages.value.push(userMessage); |
||||
|
inputMessage.value = ""; |
||||
|
|
||||
|
// 滚动到底部 |
||||
|
nextTick(() => { |
||||
|
scrollToBottom(); |
||||
|
}); |
||||
|
|
||||
|
// 模拟机器人回复 |
||||
|
simulateBotResponse(userMessage.content); |
||||
|
}; |
||||
|
|
||||
|
// 模拟机器人回复 |
||||
|
const simulateBotResponse = (userMessage) => { |
||||
|
isSending.value = true; |
||||
|
|
||||
|
// 添加机器人加载消息 |
||||
|
const botMsg = { |
||||
|
content: "", |
||||
|
isUser: false, |
||||
|
isTyping: true, |
||||
|
isThinking: false |
||||
|
}; |
||||
|
|
||||
|
messages.value.push(botMsg); |
||||
|
|
||||
|
// 滚动到底部 |
||||
|
nextTick(() => { |
||||
|
scrollToBottom(); |
||||
|
}); |
||||
|
|
||||
|
// 模拟流式响应 |
||||
|
let responseText = `我已经收到您的消息: "${userMessage}"。作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？`; |
||||
|
let index = 0; |
||||
|
|
||||
|
const typeWriter = () => { |
||||
|
if (index < responseText.length) { |
||||
|
botMsg.content += responseText.charAt(index); |
||||
|
index++; |
||||
|
|
||||
|
// 滚动到底部 |
||||
|
scrollToBottom(); |
||||
|
|
||||
|
setTimeout(typeWriter, 30); |
||||
|
} else { |
||||
|
botMsg.isTyping = false; |
||||
|
isSending.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
setTimeout(typeWriter, 500); |
||||
|
}; |
||||
|
|
||||
|
// 滚动到底部 |
||||
|
const scrollToBottom = () => { |
||||
|
const query = uni.createSelectorQuery(); |
||||
|
query.select('#messageList').boundingClientRect(); |
||||
|
query.selectViewport().scrollOffset(); |
||||
|
|
||||
|
query.exec((res) => { |
||||
|
if (res[0] && res[1]) { |
||||
|
uni.pageScrollTo({ |
||||
|
scrollTop: res[0].height, |
||||
|
duration: 100 |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.deepMate-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100vh; |
||||
|
background-color: #ffffff; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20rpx 30rpx; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.header-left, |
||||
|
.header-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.header-left .icon, |
||||
|
.header-right .icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.header-center .title { |
||||
|
|
||||
|
|
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.new-chat-button { |
||||
|
background-color: #ff6600; |
||||
|
border: none; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 10rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.new-chat-text { |
||||
|
color: white; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.main-content { |
||||
|
flex: 1; |
||||
|
padding: 30rpx; |
||||
|
overflow-y: auto; |
||||
|
margin-bottom: 120rpx; |
||||
|
} |
||||
|
|
||||
|
.robot-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.robot-avatar { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.welcome-message { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.greeting { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
line-height: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.description { |
||||
|
display: block; |
||||
|
font-size: 26rpx; |
||||
|
color: #666666; |
||||
|
line-height: 36rpx; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.function-tabs { |
||||
|
display: flex; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.tab-item { |
||||
|
padding: 5rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 700; |
||||
|
color: #666666; |
||||
|
background-color: #f0f0f0; |
||||
|
margin-right: 20rpx; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
.tab-item.active { |
||||
|
color: #ff6600; |
||||
|
background-color: #fff; |
||||
|
border: 1rpx solid #ff6600; |
||||
|
} |
||||
|
|
||||
|
.recommend-card { |
||||
|
background: linear-gradient(180deg, #fee7ed 0%, #ffffff 100%); |
||||
|
border-radius: 20rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.card-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
background-color: #ff0000; |
||||
|
border-radius: 10rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.card-text { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.main-question { |
||||
|
font-size: 32rpx; |
||||
|
color: #333333; |
||||
|
line-height: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.stock-code { |
||||
|
display: block; |
||||
|
font-size: 24rpx; |
||||
|
color: #ff3b30; |
||||
|
background-color: #ffffff; |
||||
|
padding: 2rpx 15rpx; |
||||
|
border-radius: 12rpx; |
||||
|
margin-top: 8rpx; |
||||
|
width: fit-content; |
||||
|
border: 1rpx solid #ff3b30; |
||||
|
} |
||||
|
|
||||
|
.arrow-icon { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.interest-section { |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
font-size: 26rpx; |
||||
|
color: #666666; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.topics-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.topic-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 15rpx 20rpx; |
||||
|
background-color: #f0f0f0; |
||||
|
border-radius: 15rpx; |
||||
|
width: fit-content; |
||||
|
} |
||||
|
|
||||
|
.tag-icon { |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.topic-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
/* 聊天区域样式 */ |
||||
|
.chat-container { |
||||
|
margin-top: 30rpx; |
||||
|
border-radius: 10rpx; |
||||
|
height: fit-content; |
||||
|
/* overflow-y: auto; */ |
||||
|
} |
||||
|
|
||||
|
.message-list { |
||||
|
/* padding: 20rpx; */ |
||||
|
} |
||||
|
|
||||
|
.message { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.user-message { |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
|
||||
|
.message-icon { |
||||
|
font-size: 24rpx; |
||||
|
margin: 0 10rpx; |
||||
|
padding: 10rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #ddd; |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.user-message .message-icon { |
||||
|
background-color: #007aff; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.bot-message .message-icon { |
||||
|
background-color: #34c759; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.message-content { |
||||
|
max-width: 70%; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.user-message .message-content { |
||||
|
background-color: #007aff; |
||||
|
border-radius: 10rpx; |
||||
|
padding: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.bot-message .message-content { |
||||
|
background-color: #f0f0f0; |
||||
|
border-radius: 10rpx; |
||||
|
padding: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.message-text { |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.user-message .message-text { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.bot-message .message-text { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.loading-dots { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.dot { |
||||
|
width: 10rpx; |
||||
|
height: 10rpx; |
||||
|
background-color: #666; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 4rpx; |
||||
|
animation: loading 1.4s infinite ease-in-out both; |
||||
|
} |
||||
|
|
||||
|
.user-message .dot { |
||||
|
background-color: white; |
||||
|
} |
||||
|
|
||||
|
.dot:nth-child(1) { |
||||
|
animation-delay: -0.32s; |
||||
|
} |
||||
|
|
||||
|
.dot:nth-child(2) { |
||||
|
animation-delay: -0.16s; |
||||
|
} |
||||
|
|
||||
|
@keyframes loading { |
||||
|
0%, |
||||
|
80%, |
||||
|
100% { |
||||
|
transform: scale(0); |
||||
|
} |
||||
|
40% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-area { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
padding: 0 40rpx 80rpx 40rpx; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.input-wrapper { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 15rpx 20rpx; |
||||
|
background-color: rgb(220, 31, 29); |
||||
|
border-radius: 100rpx; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
|
height: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.mic-icon { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.input-field { |
||||
|
flex: 1; |
||||
|
font-size: 28rpx; |
||||
|
color: #ffffff; |
||||
|
background: none; |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.input-field::placeholder { |
||||
|
color: #ffffff !important; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.send-button { |
||||
|
background: none; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.send-icon { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
} |
||||
|
|
||||
|
.disclaimer { |
||||
|
font-size: 15rpx; |
||||
|
color: #999999; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-top: 15rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,399 @@ |
|||||
|
<template> |
||||
|
<view class="login-registration-container"> |
||||
|
<!-- 自定义导航栏 --> |
||||
|
<view class="custom-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> |
||||
|
<view class="nav-left"> |
||||
|
<text class="back-btn" @click="goToLogin">＜</text> |
||||
|
</view> |
||||
|
<view class="nav-right"> |
||||
|
<text class="headphone-btn">🎧</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- Logo --> |
||||
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image> |
||||
|
|
||||
|
<!-- 欢迎语 --> |
||||
|
<text class="welcome-text">欢迎来到 DeepChart</text> |
||||
|
|
||||
|
<!-- 邮箱/手机号切换 --> |
||||
|
<view class="switch-container"> |
||||
|
<text |
||||
|
class="switch-item" |
||||
|
:class="{ active: switchType === 'Email' }" |
||||
|
@click="switchEmail">邮箱</text> |
||||
|
<text |
||||
|
class="switch-item" |
||||
|
:class="{ active: switchType === 'Phone' }" |
||||
|
@click="switchPhone">手机号</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 输入框 --> |
||||
|
<view class="input-container"> |
||||
|
<input |
||||
|
v-if="switchType === 'Email'" |
||||
|
class="input-field" |
||||
|
type="text" |
||||
|
placeholder="输入邮箱地址" |
||||
|
v-model="email" |
||||
|
/> |
||||
|
<input |
||||
|
v-else |
||||
|
class="input-field" |
||||
|
type="text" |
||||
|
placeholder="输入手机号" |
||||
|
v-model="phone" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 用户协议 --> |
||||
|
<view class="agreement-container"> |
||||
|
<checkbox class="checkbox" @click="checkboxClick"/> |
||||
|
<text class="agreement-text" |
||||
|
>接受 <text class="link" @click="openAgreement">用户协议</text> 和 |
||||
|
<text class="link" @click="openPrivacy">隐私政策</text></text |
||||
|
> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 注册按钮 --> |
||||
|
<button class="register-btn" @click="register">注册</button> |
||||
|
|
||||
|
<!-- 或者 --> |
||||
|
<text class="or-text">或者</text> |
||||
|
|
||||
|
<!-- 第三方登录 --> |
||||
|
<view class="third-party-login"> |
||||
|
<view class="third-party-btn" @click="loginWithApple"> |
||||
|
<image |
||||
|
class="apple-icon" |
||||
|
src="/static/apple-icon.png" |
||||
|
mode="aspectFit" |
||||
|
></image> |
||||
|
<text class="third-party-text">通过 Apple 继续</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="third-party-btn" @click="loginWithGoogle"> |
||||
|
<image |
||||
|
class="google-icon" |
||||
|
src="/static/google-icon.png" |
||||
|
mode="aspectFit" |
||||
|
></image> |
||||
|
<text class="third-party-text">通过 Google 继续</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 已有账号 --> |
||||
|
<view class="existing-account"> |
||||
|
<text class="account-text">已有账号？</text> |
||||
|
<text class="login-link" @click="goToLogin">登录</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
const email = ref(""); |
||||
|
const phone = ref(""); |
||||
|
const agreed = ref(false); |
||||
|
const switchType = ref("Email"); // 默认是邮箱注册 |
||||
|
const { safeAreaInsets } = uni.getSystemInfoSync() |
||||
|
|
||||
|
|
||||
|
function goBack() { |
||||
|
// 返回上一页 |
||||
|
uni.navigateBack(-1); |
||||
|
} |
||||
|
|
||||
|
function switchEmail() { |
||||
|
// 切换到邮箱注册 |
||||
|
switchType.value = "Email"; |
||||
|
} |
||||
|
|
||||
|
function switchPhone() { |
||||
|
// 切换到手机注册 |
||||
|
switchType.value = "Phone"; |
||||
|
} |
||||
|
|
||||
|
function checkboxClick() { |
||||
|
agreed.value = !agreed.value; |
||||
|
} |
||||
|
|
||||
|
function openAgreement() { |
||||
|
// 打开用户协议 |
||||
|
console.log("打开用户协议"); |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/agreement/agreement", |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function openPrivacy() { |
||||
|
// 打开隐私政策 |
||||
|
console.log("打开隐私政策"); |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/privacy/privacy", |
||||
|
}); |
||||
|
} |
||||
|
function register() { |
||||
|
// 注册逻辑 |
||||
|
if (switchType.value === "Email" && !email.value) { |
||||
|
uni.showToast({ |
||||
|
title: "请输入邮箱地址", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (switchType.value === "Phone" && !phone.value) { |
||||
|
uni.showToast({ |
||||
|
title: "请输入手机号", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!agreed.value) { |
||||
|
uni.showToast({ |
||||
|
title: "请同意用户协议和隐私政策", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 发送注册请求 |
||||
|
if (switchType.value === "Email") { |
||||
|
console.log("邮箱注册:", email.value); |
||||
|
} else { |
||||
|
console.log("手机号注册:", phone.value); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function loginWithApple() { |
||||
|
// Apple登录逻辑 |
||||
|
console.log("通过Apple登录"); |
||||
|
} |
||||
|
|
||||
|
function loginWithGoogle() { |
||||
|
// Google登录逻辑 |
||||
|
console.log("通过Google登录"); |
||||
|
} |
||||
|
|
||||
|
function goToLogin() { |
||||
|
// 跳转到登录页 |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/login/login", |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.login-registration-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 40rpx; |
||||
|
height: 100vh; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
/* 自定义导航栏样式 */ |
||||
|
.custom-navbar { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
/* z-index: 999; */ |
||||
|
width: 90%; |
||||
|
height: 80rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 10rpx 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.nav-left, |
||||
|
.nav-right { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.nav-right { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.back-btn, |
||||
|
.headphone-btn { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
padding: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
margin-bottom: 60rpx; |
||||
|
border-radius: 20%; |
||||
|
} |
||||
|
|
||||
|
.welcome-text { |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
margin-bottom: 60rpx; |
||||
|
text-align: left; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
.switch-container { |
||||
|
display: flex; |
||||
|
margin-bottom: 40rpx; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
|
||||
|
.switch-item { |
||||
|
font-size: 28rpx; |
||||
|
color: #999999; |
||||
|
padding: 10rpx 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.switch-item::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 60%; /* 控制边框宽度 */ |
||||
|
height: 2rpx; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.switch-item.active { |
||||
|
color: #333333; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.switch-item.active::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 60rpx; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 30%; /* 控制边框宽度 */ |
||||
|
height: 7rpx; |
||||
|
background-color: #333333; |
||||
|
} |
||||
|
|
||||
|
.input-container { |
||||
|
width: 100%; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.input-field { |
||||
|
width: 90%; |
||||
|
height: 80rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 2rpx solid #e5e5e5; |
||||
|
padding: 0 30rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
.agreement-container { |
||||
|
/* display: flex; */ |
||||
|
align-items: center; |
||||
|
margin-bottom: 40rpx; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
|
||||
|
.checkbox { |
||||
|
width: 10rpx; |
||||
|
height: 10rpx; |
||||
|
margin-right: 30rpx; |
||||
|
/* flex: content; */ |
||||
|
} |
||||
|
|
||||
|
.agreement-text { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.link { |
||||
|
color: #333333; |
||||
|
font-weight: bold; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
.register-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color: #333333; |
||||
|
color: white; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
border-radius: 40rpx; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.or-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.third-party-login { |
||||
|
width: 100%; |
||||
|
margin-bottom: 60rpx; |
||||
|
} |
||||
|
.third-party-text { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.third-party-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color: white; |
||||
|
border: 2rpx solid rgb(249, 249, 249); |
||||
|
border-radius: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.apple-icon { |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.google-icon { |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.existing-account { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.account-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.login-link { |
||||
|
font-size: 24rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
margin-left: 10rpx; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
用户协议 |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<view class="login-prompt" v-if="showPrompt"> |
||||
|
<view class="mask" :class="{ 'mask-show': showAnimation }" @click="hide"></view> |
||||
|
<view class="prompt-content" :class="{ 'slide-up': showAnimation }"> |
||||
|
<text class="prompt-title">登录以获得更好的体验</text> |
||||
|
<button class="login-btn" @click="goLogin">登录(推荐)</button> |
||||
|
<button class="visitor-btn" @click="continueAsVisitor">以访客身份继续</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
|
||||
|
// 定义响应式数据 |
||||
|
const showPrompt = ref(false); |
||||
|
const showAnimation = ref(false); |
||||
|
|
||||
|
// 显示弹窗 |
||||
|
const show = () => { |
||||
|
showPrompt.value = true; |
||||
|
// 在下一帧触发动画 |
||||
|
nextTick(() => { |
||||
|
setTimeout(() => { |
||||
|
showAnimation.value = true; |
||||
|
}, 10); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 隐藏弹窗 |
||||
|
const hide = () => { |
||||
|
showAnimation.value = false; |
||||
|
// 等待动画结束后再隐藏 |
||||
|
setTimeout(() => { |
||||
|
showPrompt.value = false; |
||||
|
}, 300); |
||||
|
}; |
||||
|
|
||||
|
// 跳转到登录页面 |
||||
|
const goLogin = () => { |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/login/login' |
||||
|
}); |
||||
|
hide(); |
||||
|
}; |
||||
|
|
||||
|
// 以访客身份继续 |
||||
|
const continueAsVisitor = () => { |
||||
|
// 设置访客模式 |
||||
|
uni.setStorageSync('visitorMode', true); |
||||
|
hide(); |
||||
|
}; |
||||
|
|
||||
|
// 暴露方法给外部使用 |
||||
|
defineExpose({ |
||||
|
show, |
||||
|
hide |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.login-prompt { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.mask { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.mask.mask-show { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.prompt-content { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 300rpx; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
background-color: white; |
||||
|
padding: 20rpx 30rpx; |
||||
|
transform: translateY(100%); |
||||
|
transition: transform 0.3s ease; |
||||
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
.prompt-content.slide-up { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
.prompt-title { |
||||
|
display: block; |
||||
|
text-align: left; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 700; |
||||
|
color: #333; |
||||
|
margin-top: 10rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.login-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color:rgb(35, 84, 230); |
||||
|
color: white; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.visitor-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color: #f5f5f5; |
||||
|
color: #333; |
||||
|
font-size: 32rpx; |
||||
|
line-height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,55 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<image class="logo" src="/static/logo.png"></image> |
||||
|
<view class="text-area"> |
||||
|
<text class="title" @click="showLoginPrompt">{{ title }}</text> |
||||
|
</view> |
||||
|
<LoginPrompt ref="loginPrompt"></LoginPrompt> |
||||
|
<button @click="toDeepMate">deepMate</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref } from "vue"; |
||||
|
|
||||
|
const title = ref("请先登录"); |
||||
|
const loginPrompt = ref(null); |
||||
|
|
||||
|
function showLoginPrompt() { |
||||
|
loginPrompt.value.show(); |
||||
|
} |
||||
|
|
||||
|
function toDeepMate() { |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/deepMate/deepMate' |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
height: 200rpx; |
||||
|
width: 200rpx; |
||||
|
margin-top: 200rpx; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
margin-bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.text-area { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 36rpx; |
||||
|
color: #8f8f94; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,371 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
class="login-registration-container" |
||||
|
|
||||
|
> |
||||
|
<!-- 自定义导航栏 --> |
||||
|
<view class="custom-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> |
||||
|
<view class="nav-left"> |
||||
|
<text class="back-btn" @click="goToIndex">＜</text> |
||||
|
</view> |
||||
|
<view class="nav-right"> |
||||
|
<text class="headphone-btn">🎧</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- Logo --> |
||||
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image> |
||||
|
|
||||
|
<!-- 欢迎语 --> |
||||
|
<text class="welcome-text">登录</text> |
||||
|
|
||||
|
<!-- 邮箱/手机号切换 --> |
||||
|
<view class="switch-container"> |
||||
|
<text |
||||
|
class="switch-item" |
||||
|
:class="{ active: switchType === 'Email' }" |
||||
|
@click="switchEmail" |
||||
|
>邮箱/用户名</text |
||||
|
> |
||||
|
<text |
||||
|
class="switch-item" |
||||
|
:class="{ active: switchType === 'Phone' }" |
||||
|
@click="switchPhone" |
||||
|
>手机号</text |
||||
|
> |
||||
|
</view> |
||||
|
<!-- 输入框 --> |
||||
|
<view class="input-container"> |
||||
|
<input |
||||
|
v-if="switchType === 'Email'" |
||||
|
class="input-field" |
||||
|
type="text" |
||||
|
placeholder="输入邮箱/用户名" |
||||
|
v-model="email" |
||||
|
/> |
||||
|
<input |
||||
|
v-else |
||||
|
class="input-field" |
||||
|
type="text" |
||||
|
placeholder="输入手机号" |
||||
|
v-model="phone" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 用户协议 --> |
||||
|
<!-- <view class="agreement-container"> |
||||
|
<checkbox class="checkbox" v-model="agreed" /> |
||||
|
<text class="agreement-text" |
||||
|
>接受 <text class="link">用户协议</text> 和 |
||||
|
<text class="link">隐私政策</text></text |
||||
|
> |
||||
|
</view> --> |
||||
|
|
||||
|
<!-- 注册按钮 --> |
||||
|
<button class="register-btn" @click="register">下一步</button> |
||||
|
|
||||
|
<!-- 或者 --> |
||||
|
<text class="or-text">或者</text> |
||||
|
|
||||
|
<!-- 第三方登录 --> |
||||
|
<view class="third-party-login"> |
||||
|
<view class="third-party-btn" @click="loginWithApple"> |
||||
|
<image |
||||
|
class="apple-icon" |
||||
|
src="/static/apple-icon.png" |
||||
|
mode="aspectFit" |
||||
|
></image> |
||||
|
<text class="third-party-text">通过 Apple 继续</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="third-party-btn" @click="loginWithGoogle"> |
||||
|
<image |
||||
|
class="google-icon" |
||||
|
src="/static/google-icon.png" |
||||
|
mode="aspectFit" |
||||
|
></image> |
||||
|
<text class="third-party-text">通过 Google 继续</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 已有账号 --> |
||||
|
<view class="existing-account"> |
||||
|
<text class="account-text">未注册账号？</text> |
||||
|
<text class="login-link" @click="goToRegistration">注册</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref } from "vue"; |
||||
|
|
||||
|
const email = ref(""); |
||||
|
const phone = ref(""); |
||||
|
const agreed = ref(false); |
||||
|
const switchType = ref("Email"); // 默认是邮箱注册 |
||||
|
const { safeAreaInsets } = uni.getSystemInfoSync(); |
||||
|
|
||||
|
function goToIndex() { |
||||
|
// 返回上一页 |
||||
|
uni.navigateTo({ url: '/pages/index/index' }); |
||||
|
} |
||||
|
|
||||
|
function switchEmail() { |
||||
|
// 切换到邮箱注册 |
||||
|
switchType.value = "Email"; |
||||
|
} |
||||
|
|
||||
|
function switchPhone() { |
||||
|
// 切换到手机注册 |
||||
|
switchType.value = "Phone"; |
||||
|
} |
||||
|
|
||||
|
function register() { |
||||
|
// 注册逻辑 |
||||
|
if (!email.value) { |
||||
|
uni.showToast({ |
||||
|
title: "请输入邮箱地址", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
if (!agreed.value) { |
||||
|
uni.showToast({ |
||||
|
title: "请同意用户协议和隐私政策", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
// 发送注册请求 |
||||
|
console.log("注册:", email.value); |
||||
|
} |
||||
|
|
||||
|
function loginWithApple() { |
||||
|
// Apple登录逻辑 |
||||
|
console.log("通过Apple登录"); |
||||
|
} |
||||
|
|
||||
|
function loginWithGoogle() { |
||||
|
// Google登录逻辑 |
||||
|
console.log("通过Google登录"); |
||||
|
} |
||||
|
|
||||
|
function goToRegistration() { |
||||
|
// 跳转到登录页 |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/Registration/Registration", |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.login-registration-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 40rpx; |
||||
|
height: 100vh; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
/* 自定义导航栏样式 */ |
||||
|
.custom-navbar { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
/* z-index: 999; */ |
||||
|
width: 90%; |
||||
|
height: 80rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 10rpx 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.nav-left, |
||||
|
.nav-right { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.nav-right { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.back-btn, |
||||
|
.headphone-btn { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
padding: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
margin-bottom: 60rpx; |
||||
|
border-radius: 20%; |
||||
|
} |
||||
|
|
||||
|
.welcome-text { |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
margin-bottom: 60rpx; |
||||
|
text-align: left; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
.switch-container { |
||||
|
display: flex; |
||||
|
margin-bottom: 40rpx; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
|
||||
|
.switch-item { |
||||
|
font-size: 28rpx; |
||||
|
color: #999999; |
||||
|
padding: 10rpx 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.switch-item::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 60%; /* 控制边框宽度 */ |
||||
|
height: 2rpx; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.switch-item.active { |
||||
|
color: #333333; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.switch-item.active::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 60rpx; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 30%; /* 控制边框宽度 */ |
||||
|
height: 7rpx; |
||||
|
background-color: #333333; |
||||
|
} |
||||
|
|
||||
|
.input-container { |
||||
|
width: 100%; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.input-field { |
||||
|
width: 90%; |
||||
|
height: 80rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 2rpx solid #e5e5e5; |
||||
|
padding: 0 30rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
.agreement-container { |
||||
|
/* display: flex; */ |
||||
|
align-items: center; |
||||
|
margin-bottom: 40rpx; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
|
||||
|
.checkbox { |
||||
|
width: 10rpx; |
||||
|
height: 10rpx; |
||||
|
margin-right: 30rpx; |
||||
|
/* flex: content; */ |
||||
|
} |
||||
|
|
||||
|
.agreement-text { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.link { |
||||
|
color: #333333; |
||||
|
font-weight: bold; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
.register-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color: #333333; |
||||
|
color: white; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
border-radius: 40rpx; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.or-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.third-party-login { |
||||
|
width: 100%; |
||||
|
margin-bottom: 60rpx; |
||||
|
} |
||||
|
.third-party-text { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.third-party-btn { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color: white; |
||||
|
border: 2rpx solid #e5e5e5; |
||||
|
border-radius: 40rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.apple-icon { |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.google-icon { |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.existing-account { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.account-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.login-link { |
||||
|
font-size: 24rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
margin-left: 10rpx; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
隐私政策 |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<view class="login-container"> |
||||
|
<!-- 顶部标题 --> |
||||
|
<view class="title-section"> |
||||
|
<text class="main-title">DeepChart</text> |
||||
|
</view> |
||||
|
<view class="subtitle-section"> |
||||
|
<text class="subtitle">您的股市随身顾问</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 手机卡片样式 --> |
||||
|
<view class="phone-card"> </view> |
||||
|
|
||||
|
<!-- 登录注册按钮 --> |
||||
|
<view class="button-group"> |
||||
|
<button class="login-button" @click="toLogin">登录</button> |
||||
|
<button class="register-button" @click="toRegistration">注册</button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部导航栏 --> |
||||
|
<!-- <view class="bottom-nav"> |
||||
|
<navigator url="/pages/index/index" class="nav-item"> |
||||
|
<image |
||||
|
class="nav-icon" |
||||
|
src="/static/images/home.png" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
<text class="nav-text">首页</text> |
||||
|
</navigator> |
||||
|
<navigator url="/pages/index/index" class="nav-item"> |
||||
|
<image |
||||
|
class="nav-icon" |
||||
|
src="/static/images/chart.png" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
<text class="nav-text">行情</text> |
||||
|
</navigator> |
||||
|
<navigator url="/pages/index/index" class="nav-item active"> |
||||
|
<image |
||||
|
class="nav-icon" |
||||
|
src="/static/images/logo.png" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
<text class="nav-text">DeepMate</text> |
||||
|
</navigator> |
||||
|
<navigator url="/pages/index/index" class="nav-item"> |
||||
|
<image |
||||
|
class="nav-icon" |
||||
|
src="/static/images/explore.png" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
<text class="nav-text">深度探索</text> |
||||
|
</navigator> |
||||
|
<navigator url="/pages/index/index" class="nav-item"> |
||||
|
<image |
||||
|
class="nav-icon" |
||||
|
src="/static/images/profile.png" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
<text class="nav-text">我的</text> |
||||
|
</navigator> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
function toRegistration() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/Registration/Registration", |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toLogin() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/login/login", |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.login-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
/* justify-content: space-between; */ |
||||
|
padding: 40rpx; |
||||
|
height: 100vh; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.title-section { |
||||
|
text-align: center; |
||||
|
margin-top: 120rpx; |
||||
|
|
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.main-title { |
||||
|
text-align: center; |
||||
|
font-size: 64rpx; |
||||
|
font-weight: 800; |
||||
|
color: #000000; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
.subtitle-section { |
||||
|
margin-bottom: 100rpx; |
||||
|
} |
||||
|
.subtitle { |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.phone-card { |
||||
|
background-image: url("/static/20251021-132531.jpg"); |
||||
|
background-size: 100% 100%; |
||||
|
background-position: center; |
||||
|
min-width: 400rpx; |
||||
|
min-height: 700rpx; |
||||
|
width: 400rpx; |
||||
|
height: 700rpx; |
||||
|
border-radius: 40rpx; |
||||
|
padding: 40rpx; |
||||
|
box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.button-group { |
||||
|
display: flex; |
||||
|
gap: 40rpx; |
||||
|
margin: 80rpx 0; |
||||
|
width: 100%; |
||||
|
max-width: 600rpx; |
||||
|
} |
||||
|
|
||||
|
.login-button { |
||||
|
flex: 1; |
||||
|
background-color: #f5f5f5; |
||||
|
color: #000000; |
||||
|
border-radius: 60rpx; |
||||
|
font-size: 32rpx; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.register-button { |
||||
|
flex: 1; |
||||
|
background-color: #000000; |
||||
|
color: #ffffff; |
||||
|
border-radius: 60rpx; |
||||
|
font-size: 32rpx; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.bottom-nav { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
background-color: #ffffff; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
border-top: 1rpx solid #e5e5e5; |
||||
|
} |
||||
|
|
||||
|
.nav-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.nav-item.active .nav-icon { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
|
||||
|
.nav-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.nav-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.nav-item.active .nav-text { |
||||
|
color: #000000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,40 @@ |
|||||
|
<template> |
||||
|
<view class="background"> |
||||
|
<view class="logo-text"> DeepChart </view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { onShow } from "@dcloudio/uni-app"; |
||||
|
|
||||
|
onShow(() => { |
||||
|
setTimeout(() => { |
||||
|
uni.redirectTo({ |
||||
|
url: "/pages/select/select", |
||||
|
animationType: "slide-in-right", |
||||
|
animationDuration: 1000, |
||||
|
}); |
||||
|
}, 3000); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.background { |
||||
|
background: linear-gradient(180deg, #2a0c4d, #1d0836, #0d0218); |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.logo-text { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
font-size: 24px; |
||||
|
position: absolute; |
||||
|
bottom: 5%; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,18 @@ |
|||||
|
// vue.config.js
|
||||
|
const webpack = require('webpack'); |
||||
|
|
||||
|
module.exports = { |
||||
|
configureWebpack: { |
||||
|
plugins: [ |
||||
|
new webpack.DefinePlugin({ |
||||
|
'__VUE_I18N_FULL_INSTALL__': JSON.stringify(true), |
||||
|
'__VUE_I18N_LEGACY_API__': JSON.stringify(false), |
||||
|
'__INTLIFY_PROD_DEVTOOLS__': JSON.stringify(false) |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
// 如果需要自定义其他 webpack 配置，可以在这里添加
|
||||
|
chainWebpack: (config) => { |
||||
|
// 例如，你可以在这里添加其他配置
|
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue