diff --git a/src/assets/images/send-button.png b/src/assets/images/send-button.png new file mode 100644 index 0000000..183a1ee Binary files /dev/null and b/src/assets/images/send-button.png differ diff --git a/src/components/chat-new.vue b/src/components/chat-new.vue index 4013d09..8dbb84b 100644 --- a/src/components/chat-new.vue +++ b/src/components/chat-new.vue @@ -1,8 +1,14 @@ - + {{ welcomeWord }} {{ welcomeSubWord }} @@ -75,12 +114,32 @@ const askList = ref(['贷款到期可以先还利息吗?', '查询已交费总 - + # {{ item }} + + + {{ getItemText(item) }} + + + + + + + @@ -97,6 +156,13 @@ const askList = ref(['贷款到期可以先还利息吗?', '查询已交费总 display: flex; flex-direction: column; padding: 12rem; + .chat-footer { + flex-shrink: 0; + margin: 12rem -12rem -12rem; + background: #ffffff; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } .main-container { flex: 1; overflow: auto; @@ -343,6 +409,70 @@ const askList = ref(['贷款到期可以先还利息吗?', '查询已交费总 } } } + .message-con { + display: flex; + flex-direction: column; + gap: 12rem; + margin-top: 16rem; + .msg-item { + display: flex; + .bubble { + max-width: 80%; + padding: 10rem 14rem; + font-family: PingFang SC; + font-size: 14rem; + font-weight: normal; + line-height: 20rem; + letter-spacing: 0rem; + color: #17204d; + word-break: break-all; + } + } + .from-user { + justify-content: flex-end; + .bubble { + background: linear-gradient(266deg, #025cea 0%, #3f8cf8 100%); + color: #ffffff; + border-radius: 12rem 12rem 4rem 12rem; + } + } + .from-bot { + justify-content: flex-start; + .bubble { + background: #fcfdfd; + box-shadow: 0rem 4rem 10rem 0rem #e7effd; + border-radius: 12rem 12rem 12rem 4rem; + } + } + .typing { + display: flex; + align-items: center; + gap: 5rem; + span { + width: 6rem; + height: 6rem; + border-radius: 50%; + background: #7e849f; + animation: typing-blink 1s infinite; + &:nth-child(2) { + animation-delay: 0.2s; + } + &:nth-child(3) { + animation-delay: 0.4s; + } + } + } + @keyframes typing-blink { + 0%, + 80%, + 100% { + opacity: 0.2; + } + 40% { + opacity: 1; + } + } + } } } diff --git a/src/components/emoticon-box.vue b/src/components/emoticon-box.vue index 4d2461c..5082243 100644 --- a/src/components/emoticon-box.vue +++ b/src/components/emoticon-box.vue @@ -10,7 +10,7 @@ import faceJSON from '@/mock/face.json' const elder = inject('elder', false) -const publicPath = ref(process.env.VUE_APP_SRC) +const publicPath = ref(import.meta.env.BASE_URL) const active = ref(0) const faceData = ref(faceJSON) const faceIndex = ref(0) diff --git a/src/components/footer-bar-input.vue b/src/components/footer-bar-input.vue index b1e2f5a..0fd1744 100644 --- a/src/components/footer-bar-input.vue +++ b/src/components/footer-bar-input.vue @@ -41,6 +41,7 @@ + - + - + + > + - {{ txtTips }} + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +