addd
This commit is contained in:
liuyalei
parent
2ea831ebd0
commit
609b93dd64
|
|
@ -1,12 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="c_body">
|
<div class="c_body">
|
||||||
<div class="message-container">
|
<!-- <div class="message-container">
|
||||||
<div class="Left">
|
<div class="Left">
|
||||||
<div class="Left_mesg">
|
<div class="Left_mesg">
|
||||||
<h4>嘿，你好呀</h4>
|
<h4>嘿，你好呀</h4>
|
||||||
<h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
|
<h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
|
||||||
</div>
|
</div>
|
||||||
</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">
|
||||||
<div class="Right_mesg">
|
<div class="Right_mesg">
|
||||||
骨折去哪家医院
|
骨折去哪家医院
|
||||||
|
|
@ -20,10 +51,7 @@
|
||||||
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<div class="card">
|
||||||
<div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div> -->
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<div class="main_card">
|
<div class="main_card">
|
||||||
<div class="card_top">
|
<div class="card_top">
|
||||||
<img src="../assets/5.png" alt="">
|
<img src="../assets/5.png" alt="">
|
||||||
|
|
@ -52,10 +80,54 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
<!-- <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">
|
||||||
<div class="recomand_itm">公积金查询</div>
|
<div class="recomand_itm">公积金查询</div>
|
||||||
<div class="recomand_itm">2024放假安排</div>
|
<div class="recomand_itm">2024放假安排</div>
|
||||||
|
|
@ -65,18 +137,44 @@
|
||||||
|
|
||||||
<div class="c_bottom">
|
<div class="c_bottom">
|
||||||
<img src="../assets/3.png">
|
<img src="../assets/3.png">
|
||||||
|
<input v-model="inputText" type="text" placeholder="有问题尽管问我~" class="sendinput" />
|
||||||
<Input type="text" placeholder="有问题尽管问我~" class="sendinput" />
|
|
||||||
|
|
||||||
<div class="w_icon">
|
<div class="w_icon">
|
||||||
<img src="../assets/4.png" alt="">
|
<img src="../assets/4.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="send">发送</div>
|
<div class="send" @click="sendMessage" @keyup.enter="sendMessage">发送</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<style lang="scss" scoped>
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
|
|
@ -89,17 +187,14 @@
|
||||||
border-radius: 21px;
|
border-radius: 21px;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
background: #F5F5FB;
|
background: #F5F5FB;
|
||||||
// background: transparent;
|
|
||||||
padding: 0px 12px;
|
padding: 0px 12px;
|
||||||
padding-left: 36px;
|
padding-left: 36px;
|
||||||
// margin-left: 60px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 60px;
|
left: 60px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sendinput:focus {
|
.sendinput:focus {
|
||||||
// outline: 1px solid #fff;
|
|
||||||
outline: 1px solid #4379FF;
|
outline: 1px solid #4379FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -110,18 +205,7 @@
|
||||||
padding-right: 59px;
|
padding-right: 59px;
|
||||||
|
|
||||||
.Left_mesg {
|
.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;
|
margin-bottom: 16px;
|
||||||
// display: inline-block;
|
|
||||||
// float: left;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -132,17 +216,7 @@
|
||||||
padding-left: 59px;
|
padding-left: 59px;
|
||||||
|
|
||||||
.Right_mesg {
|
.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;
|
margin-bottom: 16px;
|
||||||
// display: inline-block;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -180,7 +254,7 @@
|
||||||
height: 216px;
|
height: 216px;
|
||||||
// margin: 0 auto;
|
// margin: 0 auto;
|
||||||
// padding-left: 16px;
|
// padding-left: 16px;
|
||||||
margin-left: 16px;
|
// margin-left: 16px;
|
||||||
|
|
||||||
.main_card {
|
.main_card {
|
||||||
border-radius: 16px;
|
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) {
|
/* @media (min-width: 1024px) {
|
||||||
.about {
|
.about {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -306,11 +402,6 @@
|
||||||
}
|
}
|
||||||
} */
|
} */
|
||||||
.c_body {
|
.c_body {
|
||||||
// position: relative;
|
|
||||||
// background-color: rgb(245, 245, 251);
|
|
||||||
// width: 100vw;
|
|
||||||
// min-height: 100vh;
|
|
||||||
|
|
||||||
.message-container {
|
.message-container {
|
||||||
height: calc(100vh - 124px);
|
height: calc(100vh - 124px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
@ -319,6 +410,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
padding-bottom: 45px;
|
padding-bottom: 45px;
|
||||||
|
|
||||||
|
.message {
|
||||||
|
/* width: 100%;
|
||||||
|
height: 100%; */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.c_bottom {
|
.c_bottom {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue