diff --git a/src/assets/c1.png b/src/assets/c1.png new file mode 100644 index 0000000..87b9773 Binary files /dev/null and b/src/assets/c1.png differ diff --git a/src/views/IndexChat.vue b/src/views/IndexChat.vue index 54fe5b8..2dd819e 100644 --- a/src/views/IndexChat.vue +++ b/src/views/IndexChat.vue @@ -86,7 +86,12 @@
{{ message.text }}
-
+
+
嘿,你好呀
+
我是你的智能生活助手~
+
您可以点击下方快捷方式选择问题,或直接编辑问题发送给我哟
+
+
@@ -115,6 +120,44 @@
+
+
+
+ +
+
+ 白亮 + 主任医师 +
+ +
+ 象山县中医医院 +
+ 神经外科 +
+ + +
象山中医院建于1985年3月,是一所集中医、中西医结合,医疗、预防、康复于一体的非...
+
+
+
+
换一家医院
+
+
帮我预约该医院
+
+
+
+
+ +
+ +
+
+
@@ -124,10 +167,7 @@
- +
公积金查询
2024放假安排
@@ -141,7 +181,7 @@
-
发送
+
发送
@@ -150,9 +190,12 @@ import { ref, reactive } from 'vue' let inputText = ref('') let messages = reactive([ - { id: 1, type: 'txt', text: '您可以点击下方快捷方式选择问题,或直接编辑问题发送给我哟', isMe: false }, - { id: 2, type: 'txt', text: 'Hi', isMe: true }, - { id: 3, type: 'card', text: 'Hi', isMe: true }, + { id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题,或直接编辑问题发送给我哟', isMe: false }, + { id: 2, type: 'txt', text: '骨折去哪家医院', isMe: true }, + { id: 3, type: 'card1', text: '基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择,继续为您推荐;如偏好因素不在其列,可继续提出您的需求。', isMe: false }, + { id: 4, type: 'txt', text: '基于号源等多种因素考虑,以下是相关医生推荐:', isMe: false }, + { id: 5, type: 'card2', text: '基:', isMe: false }, + { id: 6, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true }, ]); let sendMessage = () => { console.log("dddd", inputText.value) @@ -161,9 +204,9 @@ let sendMessage = () => { }, 0); */ if (inputText.value.trim()) { - console.log("sendMessage",inputText.value.trim()) + console.log("sendMessage", inputText.value.trim()) messages.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt' }); - console.log("messages",messages) + console.log("messages", messages) scollToButtom(); inputText.value = ''; } @@ -205,7 +248,7 @@ let scollToButtom = () => { padding-right: 59px; .Left_mesg { - margin-bottom: 16px; + // margin-bottom: 16px; } } @@ -216,7 +259,7 @@ let scollToButtom = () => { padding-left: 59px; .Right_mesg { - margin-bottom: 16px; + // margin-bottom: 16px; } } @@ -281,6 +324,7 @@ let scollToButtom = () => { font-weight: 500; color: #333333; line-height: 14px; + } .addr { @@ -292,6 +336,8 @@ let scollToButtom = () => { margin: 8px 0px; } + + .tag_wrp { display: flex; @@ -372,6 +418,132 @@ let scollToButtom = () => { } +.card2 { + width: 300px; + height: 210px; + + .main_card { + border-radius: 16px; + background: #FFFFFF; + height: 165px; + + .card_top { + display: flex; + padding: 16px; + box-sizing: border-box; + + + img { + width: 50px; + height: 50px; + border-radius: 5px; + margin-right: 12px; + + } + + .desc { + .name { + + .fullname { + font-size: 14px; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #333333; + line-height: 14px; + } + + .workername { + font-size: 12px; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #666666; + margin-left: 8px; + } + } + + + + .work_tag { + font-size: 12px; + font-family: PingFang SC, PingFang SC; + font-weight: 400; + color: #999999; + display: flex; + align-items: center; + .xie { + width: 1px; + border: 1px solid #999999; + height: 12px; + margin: 0px 10px; + opacity: 0.5; + } + } + + + .detail { + font-size: 10px; + font-family: PingFang SC, PingFang SC; + font-weight: 400; + color: #999999; + line-height: 14px; + margin-top: 12px; + } + } + } + + .card_botm { + border-top: 1px solid #F1F1F1; + display: flex; + align-items: center; + + .card_bt { + height: 47px; + width: calc(50% - 1px); + color: #4379FF; + text-align: center; + line-height: 47px; + } + + .split_line { + width: 1px; + height: 47px; + background-color: #F1F1F1; + } + } + } + + .prise_wrp { + display: flex; + justify-content: end; + + .prise { + width: 76px; + height: 28px; + background-color: #fff; + box-sizing: border-box; + padding: 6px 12px; + display: flex; + align-items: center; + margin-top: 8px; + + // margin-right: -1px; + img { + width: 16px; + height: 16px; + } + + .spl_line { + height: 12px; + width: 1px; + border: 1px solid #D6D6D6; + margin-left: 10px; + margin-right: 10px; + } + } + } + +} + .txt { min-height: 44px; padding: 10px 16px; @@ -414,6 +586,7 @@ let scollToButtom = () => { .message { /* width: 100%; height: 100%; */ + margin-bottom: 16px!important; } }