diff --git a/App.vue b/App.vue index a4659ab..a1a29dd 100644 --- a/App.vue +++ b/App.vue @@ -37,11 +37,13 @@ export default { fit_journey_admin_address: 'http://47.122.61.54:8085',//TODO:已完成 // TODO: 后期需要把 token 更换成从 localStorage 中获取 - token: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxODUxOTgwMTI1O' + - 'TYxMjMyMzg1IiwiaXNzIjoiZml0am91cm5leSIsInVzZXJuY' + - 'W1lOiI6InRlc3QiLCJyb2xlczoiOiJ1c2VyIiwiaWQ6IjoxODUxOTgwM' + - 'TI1OTYxMjMyMzg1LCJpYXQiOjE3MzA1NDEzMTksImV4cCI6MzE3' + - 'MDkwNTQxMzE5fQ.tdP-uBa-oKVJjGJlN70tzxXCa4usXOev6xf_fgZhWD4' + token: 'eyJhbGciOiJIUzI1NiJ9.eyJzdW' + + 'IiOiIxODU5MDU4ODM2NDQ3NDk4MjQyIiwiaXNz' + + 'IjoiZml0am91cm5leSIsInVzZXJuYW1lOiI6InV' + + 'zZXIiLCJyb2xlczoiOiJVU0VSX1JPTEUiLCJpZDoiOj' + + 'E4NTkwNTg4MzY0NDc0OTgyNDIsImlhdCI6MTczMjA4NjA4Ny' + + 'wiZXhwIjozMTcwOTIwODYwODd9.rxLV3cUtwUKwsdpNq2yf2O' + + '5Fte2hX4OqvcwN9mo6y9w' }, components: { diff --git a/components/tarbar_home/tarbar_home.vue b/components/tarbar_home/tarbar_home.vue index d64e0b2..4954412 100644 --- a/components/tarbar_home/tarbar_home.vue +++ b/components/tarbar_home/tarbar_home.vue @@ -3,7 +3,6 @@ - diff --git a/components/tarbar_puppy_chat/tarbar_puppy_chat.vue b/components/tarbar_puppy_chat/tarbar_puppy_chat.vue index 8355d6f..8d33bc5 100644 --- a/components/tarbar_puppy_chat/tarbar_puppy_chat.vue +++ b/components/tarbar_puppy_chat/tarbar_puppy_chat.vue @@ -109,7 +109,7 @@ export default { } } .bar_background{ - position: absolute; + position: fixed; width: 95%; /* 宽度占95% */ height: 10%; /* 高度 */ @@ -122,14 +122,14 @@ export default { } .home, .community, .assistant, .user { - position: absolute; + position: fixed; width: 15%; height: 6%; bottom: 2%; transition: opacity 1s ease; /* 添加渐变过渡 */ } .pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user { - position: absolute; + position: fixed; width: 17%; height: 10%; bottom: 2%; diff --git a/pages.json b/pages.json index d5e9447..4e3e7b7 100644 --- a/pages.json +++ b/pages.json @@ -212,12 +212,12 @@ } }*/ /*-----------------------------------------------------------------------主界面----------------------------------------------------------*/ - /* { + { "path": "pages/homepages/puppy_chat/puppy_chat", "style": { "navigationStyle": "custom" } - }*/ + }, /*----------------------------------------------------------------------聊天界面--------------------------------------------------------*/ /* { "path": "pages/homepages/community/community", @@ -226,12 +226,12 @@ } },*/ /*---------------------------------------------------------------------社区界面------------------------------------------------------*/ - { + /* { "path": "pages/homepages/user/user/user", "style": { "navigationStyle": "custom" } - }, + },*/ /*---------------------------------------------------------------------个人信息界面以及跳转的几个界面----------------------------------------------------*/ /* { diff --git a/pages/homepages/puppy_chat/puppy_chat.vue b/pages/homepages/puppy_chat/puppy_chat.vue index 3915fa7..fc2391c 100644 --- a/pages/homepages/puppy_chat/puppy_chat.vue +++ b/pages/homepages/puppy_chat/puppy_chat.vue @@ -1,20 +1,152 @@ diff --git a/static/homepages/puppy_chat/css/puppy_chat.scss b/static/homepages/puppy_chat/css/puppy_chat.scss new file mode 100644 index 0000000..262d8af --- /dev/null +++ b/static/homepages/puppy_chat/css/puppy_chat.scss @@ -0,0 +1,109 @@ +.background { + position: absolute; + top: 0; + width: 100%; + height: 78%; + z-index: -3; +} + +.chat { + position: absolute; + top: 0; + width: 100%; + height: 79%; + z-index: -1; + padding: 10px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + display: flex; + flex-direction: column; /* 消息从上往下显示 */ + +} + +.chat_area { + margin-bottom: 10px; + padding: 10px; + border-radius: 15px; + max-width: 75%; + word-wrap: break-word; + display: flex; + flex-direction: row; /* 头像和消息水平排列 */ + align-items: center; /* 内容垂直居中 */ +} + +.user_message { + background-color: #7879F1; /* 用户消息气泡背景色 */ + + color: white; + margin-top: 22%; /* 让用户的消息气泡靠右 */ + margin-right: 5%; /* AI消息靠左 */ + margin-left: auto; /* 让AI的消息气泡靠右 */ + text-align: left; + word-break: break-word; /* 自动换行 */ +} + +.ai_message { + background-color: #e5e5ea; /* AI消息气泡背景色 */ + color: black; + margin-left: 2%; /* 用户消息靠右 */ + margin-right: auto; /* 让用户的消息气泡靠左 */ + text-align: left; + word-break: break-word; /* 自动换行 */ +} + +.avatar_container { + display: flex; + right: 10%; + justify-content: center; + align-items: center; +} + +.ai_avatar_container { + margin-right: 10px; /* AI头像与气泡的间距 */ +} + +.user_avatar_container { + margin-left: 10px; /* 用户头像与气泡的间距 */ +} + +.ai_avatar, .user_avatar { + right: 5%; + width: 40px; /* 头像的大小 */ + height: 40px; /* 头像的大小 */ + border-radius: 50%; /* 头像圆形 */ +} + +.message_content { + max-width: 80%; /* 限制消息气泡的最大宽度 */ +} + +.input_box { + position: absolute; + width: 100%; + height: 9%; + top: 79%; +} + +.input_box_background { + position: absolute; + width: 98%; + height: 90%; + left: 1%; + top: 5%; +} + +.input_words { + position: absolute; + width: 70%; + height: 80%; + left: 5%; + top: 10%; +} + +.send_button { + position: absolute; + width: 12%; + height: 70%; + left: 84%; + top: 15%; +} diff --git a/static/homepages/puppy_chat/pictures/ai_avatar.png b/static/homepages/puppy_chat/pictures/ai_avatar.png new file mode 100644 index 0000000..851b325 Binary files /dev/null and b/static/homepages/puppy_chat/pictures/ai_avatar.png differ diff --git a/static/homepages/puppy_chat/pictures/chat_image.png b/static/homepages/puppy_chat/pictures/chat_image.png new file mode 100644 index 0000000..d1a27bc Binary files /dev/null and b/static/homepages/puppy_chat/pictures/chat_image.png differ diff --git a/static/homepages/puppy_chat/pictures/input_box_background.png b/static/homepages/puppy_chat/pictures/input_box_background.png new file mode 100644 index 0000000..8e5828d Binary files /dev/null and b/static/homepages/puppy_chat/pictures/input_box_background.png differ diff --git a/static/homepages/puppy_chat/pictures/send_button.png b/static/homepages/puppy_chat/pictures/send_button.png new file mode 100644 index 0000000..e378e15 Binary files /dev/null and b/static/homepages/puppy_chat/pictures/send_button.png differ diff --git a/static/homepages/puppy_chat/pictures/user_avatar.png b/static/homepages/puppy_chat/pictures/user_avatar.png new file mode 100644 index 0000000..2b887e4 Binary files /dev/null and b/static/homepages/puppy_chat/pictures/user_avatar.png differ