card4 add

This commit is contained in:
liuyalei 2023-12-07 22:17:08 +08:00
parent d7756178e6
commit d7d3260ac2
1 changed files with 81 additions and 4 deletions

View File

@ -167,7 +167,17 @@
{{ message.text }} {{ message.text }}
</div> </div>
<div class="c_bt"> <div class="c_bt">
<div class="helper"> <div class="switch">
<div class="sw_itm sw_itm_slected">
<div>立即就诊</div>
<div class="heng"></div>
</div>
<div class="sw_itm">
<div>更多医生</div>
<div class="heng"></div>
</div>
</div>
<div class="helper" v-for="dd in 3">
<div class="help_top"> <div class="help_top">
推荐指数98 推荐指数98
</div> </div>
@ -197,7 +207,7 @@
</div> </div>
</div> </div>
<div class="book_btn">预约</div>
</div> </div>
</div> </div>
</div> </div>
@ -671,7 +681,7 @@ const scollToButtom = () => {
} }
.card4 { .card4 {
width: 300px; width: 330px;
height: 580px; height: 580px;
border-radius: 16px; border-radius: 16px;
background-color: #fff; background-color: #fff;
@ -684,12 +694,66 @@ const scollToButtom = () => {
} }
.c_bt { .c_bt {
.switch {
display: flex;
align-items: center;
border-top: 1px #333 solid;
border: 1px #333 solid;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #333333;
.sw_itm {
width: 50%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.heng{
width: 21px;
height: 1px;
border: 1px solid transparentd;
}
}
.sw_itm_slected {
font-weight: 600;
color: #4379FF;
.heng{
width: 21px;
height: 1px;
border: 1px solid #4379FF ;
}
}
/* .sw_itm_slected::before {
content: '';
display: block;
height: 1px;
width: 6px;
border: 1px solid #333;
} */
}
.helper { .helper {
background-color: #EFF3FC;
border-radius: 16px;
overflow: hidden;
margin-top: 8px;
.help_top { .help_top {
background: linear-gradient(90deg, #6491FF 0%, #4379FF 100%);
padding-left: 16px;
color: #fff;
font-size: 14px;
} }
.help_botom { .help_botom {
position: relative;
.card_top { .card_top {
display: flex; display: flex;
padding: 16px; padding: 16px;
@ -768,6 +832,7 @@ const scollToButtom = () => {
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 8px; margin-top: 8px;
.fill_tag { .fill_tag {
height: 16px; height: 16px;
background: #C2D2FC; background: #C2D2FC;
@ -801,6 +866,18 @@ const scollToButtom = () => {
} }
} }
.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;
position: absolute;
right: 16px;
top: 16px;
}
} }
} }