xiangshan
/
yxdth5
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add card3

This commit is contained in:
liuyalei 2023-12-07 15:59:43 +08:00
parent 6632dfb181
commit c5b840d252
1 changed files with 83 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/IndexChat.vue
View File

@ -81,7 +81,7 @@
</div> </div>
</div> </div>
</div> --> </div> -->
<div class="message-container"> <div class="message-container" id="chatform">
<div class="message" v-for="(message, index) in messages" :key="message.id"> <div class="message" v-for="(message, index) in messages" :key="message.id">
<div class="Left" v-if="!message.isMe"> <div class="Left" v-if="!message.isMe">
<div class="Left_mesg"> <div class="Left_mesg">
@ -129,18 +129,11 @@
<span class="fullname">白亮</span> <span class="fullname">白亮</span>
<span class="workername">主任医师</span> <span class="workername">主任医师</span>
</div> </div>
<div class="work_tag"> <div class="work_tag">
<span>象山县中医医院</span> <span>象山县中医医院</span>
<div class="xie"></div> <div class="xie"></div>
<span>神经外科</span> <span>神经外科</span>
</div> </div>
<!-- <div class="tag_wrp">
<div class="tag">医保定点</div>
<div style="width: 4px;"></div>
<div class="tag">医保定点</div>
</div> -->
<div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div> <div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
</div> </div>
</div> </div>
@ -158,6 +151,28 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="message.type == 'card3'" class="card3">
<div class="c_top">
推荐您可以挂神经内科，您还可根据自身偏好重新选择，继续为您推荐，如偏好因素不在其列，可继续提出您的需求。
</div>
<div class="c_bt">
<div class="cbt_it" v-for=" v in 3">
<div class="it_name">神经内科</div>
<div class="book_btn">预约</div>
</div>
</div>
</div>
<div v-else-if="message.type == 'card4'" class="card3">
<div class="c_top">
推荐您可以挂神经内科，您还可根据自身偏好重新选择，继续为您推荐，如偏好因素不在其列，可继续提出您的需求。
</div>
<div class="c_bt">
<div class="cbt_it" v-for=" v in 3">
<div class="it_name">神经内科</div>
<div class="book_btn">预约</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="Right" v-else> <div class="Right" v-else>
@ -187,7 +202,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from 'vue' import { ref, reactive, nextTick } from 'vue'
let inputText = ref('') let inputText = ref('')
let messages = reactive([ let messages = reactive([
{ id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false }, { id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
@ -196,6 +211,10 @@ let messages = reactive([
{ id: 4, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false }, { id: 4, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
{ id: 5, type: 'card2', text: '基：', isMe: false }, { id: 5, type: 'card2', text: '基：', isMe: false },
{ id: 6, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true }, { id: 6, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
{ id: 7, type: 'card3', text: '卡片3', isMe: false },
{ id: 8, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', isMe: false },
{ id: 9, type: 'txt', text: '人民医院怎么走', isMe: true },
{ id: 10, type: 'card5', text: '卡片5', isMe: false },
]); ]);
let sendMessage = () => { let sendMessage = () => {
console.log("dddd", inputText.value) console.log("dddd", inputText.value)
@ -212,11 +231,14 @@ let sendMessage = () => {
} }
} }
let scollToButtom = () => { let scollToButtom = () => {
/* $nextTick(() => { nextTick(() => {
let chatform= document.getElementById('chatform') // 获取对象 let chatForm = document.getElementById('chatform'); // 获取对象
chatform.scrollTop = chatform.scrollHeight // 滚动高度 if (chatForm) {
}) */ chatForm.scrollTop = chatForm.scrollHeight; // 滚动高度
}
});
} }
// scollToButtom()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::-webkit-input-placeholder { ::-webkit-input-placeholder {
@ -470,11 +492,12 @@ let scollToButtom = () => {
color: #999999; color: #999999;
display: flex; display: flex;
align-items: center; align-items: center;
.xie { .xie {
width: 1px; width: 1px;
border: 1px solid #999999; border: 1px solid #999999;
height: 12px; height: 12px;
margin: 0px 10px; margin: 0px 10px;
opacity: 0.5; opacity: 0.5;
} }
} }
@ -544,6 +567,49 @@ let scollToButtom = () => {
} }
.card3 {
width: 300px;
height: 294px;
border-radius: 16px;
background-color: #fff;
box-sizing: border-box;
padding: 16px;
border: 1px solid red;
.c_top {margin-bottom: 12px;}
.c_bt {}
.cbt_it {
width: 268px;
height: 46px;
background: #EFF3FC;
border-radius: 8px 8px 8px 8px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
box-sizing: border-box;
.it_name {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #333333;
}
.book_btn {
width: 48px;
height: 24px;
background: linear-gradient(90deg, #6591FF 0%, #4379FF 100%);
border-radius: 22px 22px 22px 22px;
text-align: center;
line-height: 24px;
color: #fff;
}
}
}
.txt { .txt {
min-height: 44px; min-height: 44px;
padding: 10px 16px; padding: 10px 16px;
@ -586,7 +652,7 @@ let scollToButtom = () => {
.message { .message {
/* width: 100%; /* width: 100%;
height: 100%; */ height: 100%; */
margin-bottom: 16px!important; margin-bottom: 16px !important;
} }
} }