gxx

src/App.vue

@@ -66,7 +66,7 @@ let clickNum = (num,path) => {
   left: 0px;
   width: 100vw;
   border: 1px solid red;
-
+  padding: 9px 0px;
   .bt_itm {
     display: flex;
     flex-direction: column;

src/assets/main.css

@@ -7,9 +7,11 @@
 
   font-weight: normal; */
   /* background-color: ; */
+  /* background-color: #F5F5FB; */
+}
+body{
   background-color: #F5F5FB;
 }
-
 a,
 .green {
   text-decoration: none;

src/views/IndexChat.vue

@@ -1,12 +1,19 @@
 <template>
     <div class="c_body">
         <div class="message-container">
-            <div class="Left_mesg"> <h4>嘿，你好呀</h4>  <h4>我是你的智能生活助手~</h4>  您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
+            <div class="Left">
+                <div class="Left_mesg">
+                    <h4>嘿，你好呀</h4>
+                    <h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
+                </div>
             </div>
-            <div class="Right_mesg">
+            <div class="Right">
-                骨折去哪家医院 
+                <div class="Right_mesg">
+                    骨折去哪家医院
+                </div>
             </div>
-            <div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div>
+            <!--            
+            <div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div> -->
 
             <div class="card">
                 <div class="main_card">
@@ -64,35 +71,48 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
 </template>
   
 <style lang="scss" scoped>
-.Left_mesg {
+.Left {
-    min-height: 44px;
+    display: flex;
-    background: #fff;
+    justify-content: flex-start;
-    border-radius: 0px 28px 28px 28px;
+    padding-left: 16px;
-    padding: 10px 16px;
+    padding-right: 59px;
-    font-size: 14px;
+    .Left_mesg {
-    font-family: PingFang SC, PingFang SC;
+        min-height: 44px;
-    font-weight: 400;
+        background: #fff;
-    color: #333333;
+        border-radius: 0px 28px 28px 28px;
-    box-sizing: border-box;
+        padding: 10px 16px;
-    margin-bottom: 16px;
+        font-size: 14px;
-    display: inline-block;
+        font-family: PingFang SC, PingFang SC;
-    // float: left;
+        font-weight: 400;
+        color: #333333;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+        // display: inline-block;
+        // float: left;
+    }
 }
 
-.Right_mesg {
+.Right {
-    min-height: 44px;
+    display: flex;
-    background: #4F82FF;
+    justify-content: flex-end;
-    border-radius: 28px 0px 28px 28px;
+    padding-right: 16px;
-    padding: 10px 16px;
+    padding-left: 59px;
-    font-size: 14px;
+    .Right_mesg {
-    font-family: PingFang SC, PingFang SC;
+        min-height: 44px;
-    font-weight: 400;
+        background: #4F82FF;
-    color: #FFFFFF;
+        border-radius: 28px 0px 28px 28px;
-    box-sizing: border-box;
+        padding: 10px 16px;
-    margin-bottom: 16px;
+        font-size: 14px;
-    display: inline-block;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+        // display: inline-block;
+    }
 }
 
+
 .recomand {
     display: flex;
 
@@ -119,6 +139,7 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
 .card {
     width: 343px;
     height: 216px;
+    margin: 0 auto;
 
     .main_card {
         border-radius: 16px;
@@ -250,7 +271,7 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
     // min-height: 100vh;
 
     .message-container {
-        height: 83vh;
+        height: calc(100vh - 160px);
         overflow: auto;
         border: 1px red solid;
         background-color: rgb(245, 245, 251);
@@ -263,7 +284,8 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
         background-color: #fff;
         border: 1px solid red;
         position: absolute;
-        bottom: 180px;
+        // bottom: 180px;
+        top: calc(100vh - 122px);
         left: 0px;
 
         // display: flex;