From d7d3260ac2a5a64d528bfd76ae0e662f47654954 Mon Sep 17 00:00:00 2001
From: liuyalei <liuyl@ydool.com>
Date: Thu, 7 Dec 2023 22:17:08 +0800
Subject: [PATCH] card4 add

---
 src/views/IndexChat.vue | 85 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 4 deletions(-)

diff --git a/src/views/IndexChat.vue b/src/views/IndexChat.vue
index f772756..ebf7709 100644
--- a/src/views/IndexChat.vue
+++ b/src/views/IndexChat.vue
@@ -167,7 +167,17 @@
                                 {{ message.text }}
                             </div>
                             <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">
                                         推荐指数：98
                                     </div>
@@ -197,7 +207,7 @@
 
                                             </div>
                                         </div>
-
+                                        <div class="book_btn">预约</div>
                                     </div>
                                 </div>
                             </div>
@@ -671,7 +681,7 @@ const scollToButtom = () => {
 }
 
 .card4 {
-    width: 300px;
+    width: 330px;
     height: 580px;
     border-radius: 16px;
     background-color: #fff;
@@ -684,12 +694,66 @@ const scollToButtom = () => {
     }
 
     .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 {
+            background-color: #EFF3FC;
+            border-radius: 16px;
+            overflow: hidden;
+            margin-top: 8px;
+
             .help_top {
-                
+                background: linear-gradient(90deg, #6491FF 0%, #4379FF 100%);
+                padding-left: 16px;
+                color: #fff;
+                font-size: 14px;
             }
 
             .help_botom {
+                position: relative;
+
                 .card_top {
                     display: flex;
                     padding: 16px;
@@ -768,6 +832,7 @@ const scollToButtom = () => {
                             align-items: center;
                             flex-wrap: wrap;
                             margin-top: 8px;
+
                             .fill_tag {
                                 height: 16px;
                                 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;
+                }
             }
 
         }