1

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/router/index.js

@@ -33,6 +33,14 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/test.vue')
     },
+    {
+      path: '/test1',
+      name: 'test1',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/test1.vue')
+    }
   ]
 })
 

src/views/IndexChat.vue

@@ -1,12 +1,27 @@
 <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">
                 <div class="Right_mesg">
                     骨折去哪家医院
                 </div>
-            <div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div>
+            </div>
+            <div class="Right">
+                <div class="Right_mesg">
+                    基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
+                    基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
+                    基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
+                    基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
+                </div>
+            </div>
+            <!--            
+            <div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div> -->
 
             <div class="card">
                 <div class="main_card">
@@ -37,6 +52,8 @@
                     </div>
                 </div>
             </div>
+
+
         </div>
 
         <div class="recomand">
@@ -45,26 +62,54 @@
             <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;
+            <Input type="text" placeholder="有问题尽管问我~" class="sendinput" />
-line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
-
-                </div>
-                <!-- <input type="text" name="" id=""> -->
 
+            <div class="w_icon">
+                <img src="../assets/4.png" alt="">
             </div>
             <div class="send">发送</div>
         </div>
+
     </div>
 </template>
   
 <style lang="scss" scoped>
-.Left_mesg {
+::-webkit-input-placeholder {
+    color: #999999;
+    font-size: 14px;
+}
+
+.sendinput {
+    height: 36px;
+    width: calc(100vw - 154px);
+    border-radius: 21px;
+    border: 0px;
+    background: #F5F5FB;
+    // background: transparent;
+    padding: 0px 12px;
+    padding-left: 36px;
+    // margin-left: 60px;
+    position: absolute;
+    left: 60px;
+    z-index: 1;
+}
+
+.sendinput:focus {
+    // outline: 1px solid #fff; 
+    outline: 1px solid #4379FF;
+}
+
+.Left {
+    display: flex;
+    justify-content: flex-start;
+    padding-left: 16px;
+    padding-right: 59px;
+
+    .Left_mesg {
         min-height: 44px;
         background: #fff;
         border-radius: 0px 28px 28px 28px;
@@ -75,11 +120,18 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
         color: #333333;
         box-sizing: border-box;
         margin-bottom: 16px;
-    display: inline-block;
+        // display: inline-block;
         // float: left;
+    }
 }
 
-.Right_mesg {
+.Right {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 16px;
+    padding-left: 59px;
+
+    .Right_mesg {
         min-height: 44px;
         background: #4F82FF;
         border-radius: 28px 0px 28px 28px;
@@ -90,11 +142,18 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
         color: #FFFFFF;
         box-sizing: border-box;
         margin-bottom: 16px;
-    display: inline-block;
+        // display: inline-block;
+    }
 }
 
+
 .recomand {
     display: flex;
+    padding-left: 16px;
+    width: 100vw;
+    position: fixed;
+    top: calc(100vh - 156px);
+    left: 0px;
 
     // align-items: center;
     .recomand_itm {
@@ -119,6 +178,9 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
 .card {
     width: 343px;
     height: 216px;
+    // margin: 0 auto;
+    // padding-left: 16px;
+    margin-left: 16px;
 
     .main_card {
         border-radius: 16px;
@@ -250,10 +312,13 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
     // min-height: 100vh;
 
     .message-container {
-        height: 83vh;
+        height: calc(100vh - 124px);
         overflow: auto;
         border: 1px red solid;
         background-color: rgb(245, 245, 251);
+        position: relative;
+        padding-top: 20px;
+        padding-bottom: 45px;
     }
 
     .c_bottom {
@@ -263,11 +328,14 @@ 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;
+        display: flex;
-        // align-items: center;
+        align-items: center;
+
+        // justify-content: center;
         // padding: 12px 16px;
         img {
             width: 36px;
@@ -277,17 +345,62 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
             left: 16px;
         }
 
-        .w_input {
+        .tips {
-            margin-left: 8px;
+            /*   display: flex;
-            margin-right: 8px;
+            align-items: center;
-            background-color: #F5F5FB;
+            justify-content: flex-start; */
-            border-radius: 36px;
+            border: 1px solid red;
+            // width: calc(100vw - 154px);
+            width: 16px;
+            height: 16px;
+            // height: 36px;
+            /*    position: absolute;
+            left: 60px; */
+            background: #F5F5FB;
+
+            // z-index: -1;
+            .icon {
+                width: 16px;
+                height: 16px;
                 position: relative;
-            width: calc(100vw - 81px - 84px);
+                margin-left: 12px;
-            height: 36px;
+
-            border: 1px solid blueviolet;
+                img {
-            margin-left: 60px;
+                    width: 16px;
-            margin-top: 12px;
+                    height: 16px;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                }
+            }
+
+            /*   .cont {
+                color: #999999;
+                margin-left: 8px;
+                font-size: 14px;
+
+            } */
+
+
+        }
+
+
+        .w_icon {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            left: calc(100vw - 303px);
+            ;
+            top: 22px;
+            z-index: 2;
+
+            img {
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
         }
 
         .send {