This commit is contained in:
liuyalei 2023-12-07 13:02:36 +08:00
parent 69ed696fbe
commit 2ea831ebd0
2 changed files with 122 additions and 23 deletions

View File

@ -32,6 +32,14 @@ const router = createRouter({
// this generates a separate chunk (About.[hash].js) for this route // this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import('../views/test.vue') 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')
} }
] ]
}) })

View File

@ -12,6 +12,14 @@
骨折去哪家医院 骨折去哪家医院
</div> </div>
</div> </div>
<div class="Right">
<div class="Right_mesg">
基于您目前的地理位置时间医院号源等多种因素为您推荐如下结果您还可根据自身偏好重新选择继续为您推荐如偏好因素不在其列可继续提出您的需求
基于您目前的地理位置时间医院号源等多种因素为您推荐如下结果您还可根据自身偏好重新选择继续为您推荐如偏好因素不在其列可继续提出您的需求
基于您目前的地理位置时间医院号源等多种因素为您推荐如下结果您还可根据自身偏好重新选择继续为您推荐如偏好因素不在其列可继续提出您的需求
基于您目前的地理位置时间医院号源等多种因素为您推荐如下结果您还可根据自身偏好重新选择继续为您推荐如偏好因素不在其列可继续提出您的需求
</div>
</div>
<!-- <!--
<div class="Left_mesg"> 基于您目前的地理位置时间医院号源等多种因素为您推荐如下结果您还可根据自身偏好重新选择继续为您推荐如偏好因素不在其列可继续提出您的需求</div> --> <div class="Left_mesg"> 基于您目前的地理位置时间医院号源等多种因素为您推荐如下结果您还可根据自身偏好重新选择继续为您推荐如偏好因素不在其列可继续提出您的需求</div> -->
@ -44,6 +52,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="recomand"> <div class="recomand">
@ -52,30 +62,53 @@
<div class="recomand_itm">附近推荐的锻炼场所</div> <div class="recomand_itm">附近推荐的锻炼场所</div>
</div> </div>
<div class="c_bottom"> <div class="c_bottom">
<img src="../assets/3.png"> <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>
<div class="send">发送</div> <div class="send">发送</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
::-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 { .Left {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
padding-left: 16px; padding-left: 16px;
padding-right: 59px; padding-right: 59px;
.Left_mesg { .Left_mesg {
min-height: 44px; min-height: 44px;
background: #fff; background: #fff;
@ -97,6 +130,7 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
justify-content: flex-end; justify-content: flex-end;
padding-right: 16px; padding-right: 16px;
padding-left: 59px; padding-left: 59px;
.Right_mesg { .Right_mesg {
min-height: 44px; min-height: 44px;
background: #4F82FF; background: #4F82FF;
@ -115,6 +149,11 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
.recomand { .recomand {
display: flex; display: flex;
padding-left: 16px;
width: 100vw;
position: fixed;
top: calc(100vh - 156px);
left: 0px;
// align-items: center; // align-items: center;
.recomand_itm { .recomand_itm {
@ -139,7 +178,9 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
.card { .card {
width: 343px; width: 343px;
height: 216px; height: 216px;
margin: 0 auto; // margin: 0 auto;
// padding-left: 16px;
margin-left: 16px;
.main_card { .main_card {
border-radius: 16px; border-radius: 16px;
@ -271,10 +312,13 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
// min-height: 100vh; // min-height: 100vh;
.message-container { .message-container {
height: calc(100vh - 160px); height: calc(100vh - 124px);
overflow: auto; overflow: auto;
border: 1px red solid; border: 1px red solid;
background-color: rgb(245, 245, 251); background-color: rgb(245, 245, 251);
position: relative;
padding-top: 20px;
padding-bottom: 45px;
} }
.c_bottom { .c_bottom {
@ -288,8 +332,10 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
top: calc(100vh - 122px); top: calc(100vh - 122px);
left: 0px; left: 0px;
// display: flex; display: flex;
// align-items: center; align-items: center;
// justify-content: center;
// padding: 12px 16px; // padding: 12px 16px;
img { img {
width: 36px; width: 36px;
@ -299,17 +345,62 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
left: 16px; 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;
position: relative; // width: calc(100vw - 154px);
width: calc(100vw - 81px - 84px); width: 16px;
height: 36px; height: 16px;
border: 1px solid blueviolet; // height: 36px;
margin-left: 60px; /* position: absolute;
margin-top: 12px; left: 60px; */
background: #F5F5FB;
// z-index: -1;
.icon {
width: 16px;
height: 16px;
position: relative;
margin-left: 12px;
img {
width: 16px;
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 { .send {