This commit is contained in:
liuyalei 2023-12-07 17:35:33 +08:00
parent 4d76746b06
commit e00d9788ee
1 changed files with 172 additions and 5 deletions

View File

@ -162,14 +162,43 @@
</div>
</div>
</div>
<div v-else-if="message.type == 'card4'" class="card3">
<div v-else-if="message.type == 'card4'" class="card4">
<div class="c_top">
{{ message.text }}
</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 class="helper">
<div class="help_top">
推荐指数98
</div>
<div class="help_botom">
<div class="card_top">
<img src="../assets/c1.png" alt="">
<div class="desc">
<div class="name">
<span class="fullname">白亮</span>
<span class="workername">主任医师</span>
</div>
<div class="work_tag">
<span>象山县中医医院</span>
<div class="xie"></div>
<span>神经外科</span>
</div>
<div class="source_tag">
<div class="tagitm">剩余号源1</div>
</div>
<div class="reson">
<div>推荐理由</div>
<div class="fill_tag">离家近</div>
<div class="fill_tag">主任医师</div>
<div class="fill_tag fill_tag_warn">号源紧张</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -641,7 +670,144 @@ const scollToButtom = () => {
}
}
.card4 {}
.card4 {
width: 300px;
height: 580px;
border-radius: 16px;
background-color: #fff;
box-sizing: border-box;
padding: 16px;
border: 1px solid red;
.c_top {
margin-bottom: 12px;
}
.c_bt {
.helper {
.help_top {
}
.help_botom {
.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;
}
}
.source_tag {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #4379FF;
display: flex;
align-items: center;
justify-content: flex-start;
.tagitm {
border: 1px solid #4379FF;
padding: 0px 2px;
text-align: center;
height: 16px;
line-height: 16px;
}
}
.reson {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 8px;
.fill_tag {
height: 16px;
background: #C2D2FC;
border-radius: 4px 4px 4px 4px;
font-size: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #4379FF;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
margin-right: 2px;
}
.fill_tag_warn {
background-color: #FFD7C0;
color: #FF5D29;
border-radius: 4px 4px 4px 4px;
}
}
.detail {
font-size: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 14px;
margin-top: 12px;
}
}
}
}
}
}
}
.card5 {
width: 280px;
@ -657,6 +823,7 @@ const scollToButtom = () => {
top: 50%;
transform: translateY(-44%);
right: -35px;
img {
width: 100%;
height: 100%;