311 lines
8.8 KiB
Vue
311 lines
8.8 KiB
Vue
<template>
|
||
<div class="c_body">
|
||
<div class="message-container">
|
||
<div class="Left_mesg"> <h4>嘿，你好呀</h4> <h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
|
||
</div>
|
||
<div class="Right_mesg">
|
||
骨折去哪家医院
|
||
</div>
|
||
<div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div>
|
||
|
||
<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="recomand">
|
||
<div class="recomand_itm">公积金查询</div>
|
||
<div class="recomand_itm">2024放假安排</div>
|
||
<div class="recomand_itm">附近推荐的锻炼场所</div>
|
||
</div>
|
||
|
||
<div class="c_bottom">
|
||
<img src="../assets/3.png">
|
||
<div class="w_input">
|
||
<div style="position: absolute;display: flex; align-items: center;">
|
||
<!-- <div style="width: 16px;height: 16px;"> <img src="../assets/4.png" style="width: 16px;height: 16px;" alt=""></div>
|
||
|
||
<div style="color: #999999;
|
||
line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||
|
||
</div>
|
||
<!-- <input type="text" name="" id=""> -->
|
||
|
||
</div>
|
||
<div class="send">发送</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.recomand {
|
||
display: flex;
|
||
|
||
// align-items: center;
|
||
.recomand_itm {
|
||
// width: 84px;
|
||
margin-right: 8px;
|
||
height: 28px;
|
||
line-height: 12px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
padding: 8px 12px;
|
||
box-sizing: border-box;
|
||
background: #DFE7FB;
|
||
border-radius: 30px;
|
||
font-size: 12px;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #4379FF;
|
||
}
|
||
}
|
||
|
||
|
||
.card {
|
||
width: 343px;
|
||
height: 216px;
|
||
|
||
.main_card {
|
||
border-radius: 16px;
|
||
background: #FFFFFF;
|
||
height: 178px;
|
||
|
||
.card_top {
|
||
display: flex;
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
|
||
img {
|
||
width: 98px;
|
||
height: 98px;
|
||
border-radius: 5px;
|
||
margin-right: 12px;
|
||
|
||
}
|
||
|
||
.desc {
|
||
.name {
|
||
font-size: 14px;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
line-height: 14px;
|
||
}
|
||
|
||
.addr {
|
||
font-size: 12px;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 12px;
|
||
margin: 8px 0px;
|
||
}
|
||
|
||
.tag_wrp {
|
||
display: flex;
|
||
|
||
.tag {
|
||
font-size: 10px;
|
||
color: #4379FF;
|
||
width: 48px;
|
||
height: 16px;
|
||
text-align: center;
|
||
line-height: 16px;
|
||
border-radius: 2px 2px 2px 2px;
|
||
opacity: 1;
|
||
border: 1px solid #B8CCFF;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
/* @media (min-width: 1024px) {
|
||
.about {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
} */
|
||
.c_body {
|
||
// position: relative;
|
||
// background-color: rgb(245, 245, 251);
|
||
// width: 100vw;
|
||
// min-height: 100vh;
|
||
|
||
.message-container {
|
||
height: 83vh;
|
||
overflow: auto;
|
||
border: 1px red solid;
|
||
background-color: rgb(245, 245, 251);
|
||
}
|
||
|
||
.c_bottom {
|
||
width: 99vw;
|
||
// height: 60px;
|
||
min-height: 60px;
|
||
background-color: #fff;
|
||
border: 1px solid red;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
|
||
// display: flex;
|
||
// align-items: center;
|
||
// padding: 12px 16px;
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
position: absolute;
|
||
bottom: 12px;
|
||
left: 16px;
|
||
}
|
||
|
||
.w_input {
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
background-color: #F5F5FB;
|
||
border-radius: 36px;
|
||
position: relative;
|
||
width: calc(100vw - 81px - 84px);
|
||
height: 36px;
|
||
border: 1px solid blueviolet;
|
||
margin-left: 60px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.send {
|
||
width: 60px;
|
||
height: 36px;
|
||
background: linear-gradient(90deg, #4379FF 0%, #6D97FF 100%);
|
||
border-radius: 36px 36px 36px 36px;
|
||
opacity: 1;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
font-size: 14px;
|
||
font-family: PingFang SC, PingFang SC;
|
||
position: absolute;
|
||
bottom: 12px;
|
||
right: 16px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|