This commit is contained in:
commit
4759be639c
|
|
@ -66,7 +66,7 @@ let clickNum = (num,path) => {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
border: 1px solid red;
|
border: 1px solid red;
|
||||||
|
padding: 9px 0px;
|
||||||
.bt_itm {
|
.bt_itm {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,11 @@
|
||||||
|
|
||||||
font-weight: normal; */
|
font-weight: normal; */
|
||||||
/* background-color: ; */
|
/* background-color: ; */
|
||||||
|
/* background-color: #F5F5FB; */
|
||||||
|
}
|
||||||
|
body{
|
||||||
background-color: #F5F5FB;
|
background-color: #F5F5FB;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
.green {
|
.green {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,14 @@ const router = createRouter({
|
||||||
// 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')
|
||||||
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,27 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="c_body">
|
<div class="c_body">
|
||||||
<div class="message-container">
|
<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>
|
||||||
<div class="Right_mesg">
|
<div class="Right">
|
||||||
骨折去哪家医院
|
<div class="Right_mesg">
|
||||||
|
骨折去哪家医院
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div>
|
<div class="Right">
|
||||||
|
<div class="Right_mesg">
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
<div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div> -->
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="main_card">
|
<div class="main_card">
|
||||||
|
|
@ -37,6 +52,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="recomand">
|
<div class="recomand">
|
||||||
|
|
@ -45,56 +62,98 @@
|
||||||
<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>
|
||||||
.Left_mesg {
|
::-webkit-input-placeholder {
|
||||||
min-height: 44px;
|
color: #999999;
|
||||||
background: #fff;
|
|
||||||
border-radius: 0px 28px 28px 28px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: PingFang SC, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: inline-block;
|
|
||||||
// float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Right_mesg {
|
.sendinput {
|
||||||
min-height: 44px;
|
height: 36px;
|
||||||
background: #4F82FF;
|
width: calc(100vw - 154px);
|
||||||
border-radius: 28px 0px 28px 28px;
|
border-radius: 21px;
|
||||||
padding: 10px 16px;
|
border: 0px;
|
||||||
font-size: 14px;
|
background: #F5F5FB;
|
||||||
font-family: PingFang SC, PingFang SC;
|
// background: transparent;
|
||||||
font-weight: 400;
|
padding: 0px 12px;
|
||||||
color: #FFFFFF;
|
padding-left: 36px;
|
||||||
box-sizing: border-box;
|
// margin-left: 60px;
|
||||||
margin-bottom: 16px;
|
position: absolute;
|
||||||
display: inline-block;
|
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;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
// display: inline-block;
|
||||||
|
// float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
// display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.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 {
|
||||||
|
|
@ -119,6 +178,9 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
.card {
|
.card {
|
||||||
width: 343px;
|
width: 343px;
|
||||||
height: 216px;
|
height: 216px;
|
||||||
|
// margin: 0 auto;
|
||||||
|
// padding-left: 16px;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
.main_card {
|
.main_card {
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
|
@ -250,10 +312,13 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
// min-height: 100vh;
|
// min-height: 100vh;
|
||||||
|
|
||||||
.message-container {
|
.message-container {
|
||||||
height: 83vh;
|
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 {
|
||||||
|
|
@ -263,11 +328,14 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid red;
|
border: 1px solid red;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 180px;
|
// bottom: 180px;
|
||||||
|
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;
|
||||||
|
|
@ -277,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 {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue