addd
This commit is contained in:
liuyalei
parent
2ea831ebd0
commit
609b93dd64
|
|
@ -1,12 +1,43 @@
|
|||
<template>
|
||||
<div class="c_body">
|
||||
<div class="message-container">
|
||||
<!-- <div class="message-container">
|
||||
<div class="Left">
|
||||
<div class="Left_mesg">
|
||||
<h4>嘿，你好呀</h4>
|
||||
<h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
|
||||
</div>
|
||||
</div>
|
||||
<div class="Left">
|
||||
<div class="card">
|
||||
<div class="main_card">
|
||||
<div class="card_top">
|
||||
<img src="../assets/5.png" alt="">
|
||||
<div class="desc">
|
||||
<div class="name">象山县中医医院（新院区）</div>
|
||||
<div class="addr">宁波市象山县南部新城新洋路...</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>
|
||||
</div>
|
||||
<div class="card_botm">
|
||||
<div class="card_bt">换一家医院</div>
|
||||
<div class="split_line"></div>
|
||||
<div class="card_bt">帮我预约该医院</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prise_wrp">
|
||||
<div class="prise">
|
||||
<img src="../assets/1.png" alt="">
|
||||
<div class="spl_line"></div>
|
||||
<img src="../assets/2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Right">
|
||||
<div class="Right_mesg">
|
||||
骨折去哪家医院
|
||||
|
|
@ -20,10 +51,7 @@
|
|||
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div> -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card">
|
||||
<div class="main_card">
|
||||
<div class="card_top">
|
||||
<img src="../assets/5.png" alt="">
|
||||
|
|
@ -52,10 +80,54 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div> -->
|
||||
<div class="message-container">
|
||||
<div class="message" v-for="(message, index) in messages" :key="message.id">
|
||||
<div class="Left" v-if="!message.isMe">
|
||||
<div class="Left_mesg">
|
||||
<div v-if="message.type == 'txt'" class="txt txt_l"> {{ message.text }}</div>
|
||||
<div v-else-if="message.type == 'card'" class="card">
|
||||
<div class="main_card">
|
||||
<div class="card_top">
|
||||
<img src="../assets/5.png" alt="">
|
||||
<div class="desc">
|
||||
<div class="name">象山县中医医院（新院区）</div>
|
||||
<div class="addr">宁波市象山县南部新城新洋路...</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>
|
||||
</div>
|
||||
<div class="card_botm">
|
||||
<div class="card_bt">换一家医院</div>
|
||||
<div class="split_line"></div>
|
||||
<div class="card_bt">帮我预约该医院</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prise_wrp">
|
||||
<div class="prise">
|
||||
<img src="../assets/1.png" alt="">
|
||||
<div class="spl_line"></div>
|
||||
<img src="../assets/2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Right" v-else>
|
||||
<div class="Right_mesg">
|
||||
<div v-if="message.type == 'txt'" class="txt txt_r"> {{ message.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div v-for="(message, index) in messages" :key="message.id" class="message">
|
||||
<div v-if="message.isMe">{{ message.text }}</div>
|
||||
<div v-else>{{ message.text }}</div>
|
||||
</div> -->
|
||||
<div class="recomand">
|
||||
<div class="recomand_itm">公积金查询</div>
|
||||
<div class="recomand_itm">2024放假安排</div>
|
||||
|
|
@ -65,18 +137,44 @@
|
|||
|
||||
<div class="c_bottom">
|
||||
<img src="../assets/3.png">
|
||||
|
||||
<Input type="text" placeholder="有问题尽管问我~" class="sendinput" />
|
||||
|
||||
<input v-model="inputText" type="text" placeholder="有问题尽管问我~" class="sendinput" />
|
||||
<div class="w_icon">
|
||||
<img src="../assets/4.png" alt="">
|
||||
</div>
|
||||
<div class="send">发送</div>
|
||||
<div class="send" @click="sendMessage" @keyup.enter="sendMessage">发送</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 },
|
||||
]);
|
||||
let sendMessage = () => {
|
||||
console.log("dddd", inputText.value)
|
||||
/* setTimeout(() => {
|
||||
console.log("inputText.value:", inputText.value);
|
||||
}, 0); */
|
||||
|
||||
if (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)
|
||||
scollToButtom();
|
||||
inputText.value = '';
|
||||
}
|
||||
}
|
||||
let scollToButtom = () => {
|
||||
/* $nextTick(() => {
|
||||
let chatform= document.getElementById('chatform') // 获取对象
|
||||
chatform.scrollTop = chatform.scrollHeight // 滚动高度
|
||||
}) */
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::-webkit-input-placeholder {
|
||||
color: #999999;
|
||||
|
|
@ -89,17 +187,14 @@
|
|||
border-radius: 21px;
|
||||
border: 0px;
|
||||
background: #F5F5FB;
|
||||
// background: transparent;
|
||||
padding: 0px 12px;
|
||||
padding-left: 36px;
|
||||
// margin-left: 60px;
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sendinput:focus {
|
||||
// outline: 1px solid #fff;
|
||||
outline: 1px solid #4379FF;
|
||||
}
|
||||
|
||||
|
|
@ -110,18 +205,7 @@
|
|||
padding-right: 59px;
|
||||
|
||||
.Left_mesg {
|
||||
min-height: 44px;
|
||||
background: #fff;
|
||||
border-radius: 0px 28px 28px 28px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
// display: inline-block;
|
||||
// float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,17 +216,7 @@
|
|||
padding-left: 59px;
|
||||
|
||||
.Right_mesg {
|
||||
min-height: 44px;
|
||||
background: #4F82FF;
|
||||
border-radius: 28px 0px 28px 28px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
// display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,7 +254,7 @@
|
|||
height: 216px;
|
||||
// margin: 0 auto;
|
||||
// padding-left: 16px;
|
||||
margin-left: 16px;
|
||||
// margin-left: 16px;
|
||||
|
||||
.main_card {
|
||||
border-radius: 16px;
|
||||
|
|
@ -298,6 +372,28 @@
|
|||
|
||||
}
|
||||
|
||||
.txt {
|
||||
min-height: 44px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.txt_l {
|
||||
background: #fff;
|
||||
border-radius: 0px 12px 12px 12px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.txt_r {
|
||||
border-radius: 12px 12px 0px 12px;
|
||||
background: #4F82FF;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
/* @media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
|
|
@ -306,11 +402,6 @@
|
|||
}
|
||||
} */
|
||||
.c_body {
|
||||
// position: relative;
|
||||
// background-color: rgb(245, 245, 251);
|
||||
// width: 100vw;
|
||||
// min-height: 100vh;
|
||||
|
||||
.message-container {
|
||||
height: calc(100vh - 124px);
|
||||
overflow: auto;
|
||||
|
|
@ -319,6 +410,11 @@
|
|||
position: relative;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
.message {
|
||||
/* width: 100%;
|
||||
height: 100%; */
|
||||
}
|
||||
}
|
||||
|
||||
.c_bottom {
|
||||
|
|
|
|||
Loading…
Reference in New Issue