2023-12-07 09:39:34 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="c_body">
|
2023-12-07 14:36:10 +08:00
|
|
|
|
<!-- <div class="message-container">
|
2023-12-07 10:38:55 +08:00
|
|
|
|
<div class="Left">
|
|
|
|
|
|
<div class="Left_mesg">
|
|
|
|
|
|
<h4>嘿，你好呀</h4>
|
|
|
|
|
|
<h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
|
|
|
|
|
|
</div>
|
2023-12-07 09:39:34 +08:00
|
|
|
|
</div>
|
2023-12-07 14:36:10 +08:00
|
|
|
|
<div class="Left">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="main_card">
|
|
|
|
|
|
<div class="card_top">
|
|
|
|
|
|
<img src="../assets/5.png" alt="">
|
|
|
|
|
|
<div class="desc">
|
|
|
|
|
|
<div class="name">象山县中医医院（新院区）</div>
|
|
|
|
|
|
<div class="addr">宁波市象山县南部新城新洋路...</div>
|
|
|
|
|
|
<div class="tag_wrp">
|
|
|
|
|
|
<div class="tag">医保定点</div>
|
|
|
|
|
|
<div style="width: 4px;"></div>
|
|
|
|
|
|
<div class="tag">医保定点</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card_botm">
|
|
|
|
|
|
<div class="card_bt">换一家医院</div>
|
|
|
|
|
|
<div class="split_line"></div>
|
|
|
|
|
|
<div class="card_bt">帮我预约该医院</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="prise_wrp">
|
|
|
|
|
|
<div class="prise">
|
|
|
|
|
|
<img src="../assets/1.png" alt="">
|
|
|
|
|
|
<div class="spl_line"></div>
|
|
|
|
|
|
<img src="../assets/2.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-12-07 10:38:55 +08:00
|
|
|
|
<div class="Right">
|
|
|
|
|
|
<div class="Right_mesg">
|
|
|
|
|
|
骨折去哪家医院
|
|
|
|
|
|
</div>
|
2023-12-07 09:39:34 +08:00
|
|
|
|
</div>
|
2023-12-07 13:02:36 +08:00
|
|
|
|
<div class="Right">
|
|
|
|
|
|
<div class="Right_mesg">
|
|
|
|
|
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
|
|
|
|
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
|
|
|
|
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
|
|
|
|
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-12-07 14:36:10 +08:00
|
|
|
|
<div class="card">
|
2023-12-07 09:39:34 +08:00
|
|
|
|
<div class="main_card">
|
|
|
|
|
|
<div class="card_top">
|
|
|
|
|
|
<img src="../assets/5.png" alt="">
|
|
|
|
|
|
<div class="desc">
|
|
|
|
|
|
<div class="name">象山县中医医院（新院区）</div>
|
|
|
|
|
|
<div class="addr">宁波市象山县南部新城新洋路...</div>
|
|
|
|
|
|
<div class="tag_wrp">
|
|
|
|
|
|
<div class="tag">医保定点</div>
|
|
|
|
|
|
<div style="width: 4px;"></div>
|
|
|
|
|
|
<div class="tag">医保定点</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card_botm">
|
|
|
|
|
|
<div class="card_bt">换一家医院</div>
|
|
|
|
|
|
<div class="split_line"></div>
|
|
|
|
|
|
<div class="card_bt">帮我预约该医院</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="prise_wrp">
|
|
|
|
|
|
<div class="prise">
|
|
|
|
|
|
<img src="../assets/1.png" alt="">
|
|
|
|
|
|
<div class="spl_line"></div>
|
|
|
|
|
|
<img src="../assets/2.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-12-07 14:36:10 +08:00
|
|
|
|
</div> -->
|
|
|
|
|
|
<div class="message-container">
|
|
|
|
|
|
<div class="message" v-for="(message, index) in messages" :key="message.id">
|
|
|
|
|
|
<div class="Left" v-if="!message.isMe">
|
|
|
|
|
|
<div class="Left_mesg">
|
|
|
|
|
|
<div v-if="message.type == 'txt'" class="txt txt_l"> {{ message.text }}</div>
|
|
|
|
|
|
<div v-else-if="message.type == 'card'" class="card">
|
|
|
|
|
|
<div class="main_card">
|
|
|
|
|
|
<div class="card_top">
|
|
|
|
|
|
<img src="../assets/5.png" alt="">
|
|
|
|
|
|
<div class="desc">
|
|
|
|
|
|
<div class="name">象山县中医医院（新院区）</div>
|
|
|
|
|
|
<div class="addr">宁波市象山县南部新城新洋路...</div>
|
|
|
|
|
|
<div class="tag_wrp">
|
|
|
|
|
|
<div class="tag">医保定点</div>
|
|
|
|
|
|
<div style="width: 4px;"></div>
|
|
|
|
|
|
<div class="tag">医保定点</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card_botm">
|
|
|
|
|
|
<div class="card_bt">换一家医院</div>
|
|
|
|
|
|
<div class="split_line"></div>
|
|
|
|
|
|
<div class="card_bt">帮我预约该医院</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="prise_wrp">
|
|
|
|
|
|
<div class="prise">
|
|
|
|
|
|
<img src="../assets/1.png" alt="">
|
|
|
|
|
|
<div class="spl_line"></div>
|
|
|
|
|
|
<img src="../assets/2.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="Right" v-else>
|
|
|
|
|
|
<div class="Right_mesg">
|
|
|
|
|
|
<div v-if="message.type == 'txt'" class="txt txt_r"> {{ message.text }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-12-07 09:39:34 +08:00
|
|
|
|
</div>
|
2023-12-07 14:36:10 +08:00
|
|
|
|
<!-- <div v-for="(message, index) in messages" :key="message.id" class="message">
|
|
|
|
|
|
<div v-if="message.isMe">{{ message.text }}</div>
|
|
|
|
|
|
<div v-else>{{ message.text }}</div>
|
|
|
|
|
|
</div> -->
|
2023-12-07 09:39:34 +08:00
|
|
|
|
<div class="recomand">
|
|
|
|
|
|
<div class="recomand_itm">公积金查询</div>
|
|
|
|
|
|
<div class="recomand_itm">2024放假安排</div>
|
|
|
|
|
|
<div class="recomand_itm">附近推荐的锻炼场所</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-12-07 13:02:36 +08:00
|
|
|
|
|
2023-12-07 09:39:34 +08:00
|
|
|
|
<div class="c_bottom">
|
|
|
|
|
|
<img src="../assets/3.png">
|
2023-12-07 14:36:10 +08:00
|
|
|
|
<input v-model="inputText" type="text" placeholder="有问题尽管问我~" class="sendinput" />
|
2023-12-07 13:02:36 +08:00
|
|
|
|
<div class="w_icon">
|
|
|
|
|
|
<img src="../assets/4.png" alt="">
|
2023-12-07 09:39:34 +08:00
|
|
|
|
</div>
|
2023-12-07 14:36:10 +08:00
|
|
|
|
<div class="send" @click="sendMessage" @keyup.enter="sendMessage">发送</div>
|
2023-12-07 09:39:34 +08:00
|
|
|
|
</div>
|
2023-12-07 13:02:36 +08:00
|
|
|
|
|
2023-12-07 09:39:34 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
2023-12-07 14:36:10 +08:00
|
|
|
|
<script setup>
|
|
|
|
|
|
import { ref, reactive } from 'vue'
|
|
|
|
|
|
let inputText = ref('')
|
|
|
|
|
|
let messages = reactive([
|
|
|
|
|
|
{ id: 1, type: 'txt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
|
|
|
|
|
|
{ id: 2, type: 'txt', text: 'Hi', isMe: true },
|
|
|
|
|
|
{ id: 3, type: 'card', text: 'Hi', isMe: true },
|
|
|
|
|
|
]);
|
|
|
|
|
|
let sendMessage = () => {
|
|
|
|
|
|
console.log("dddd", inputText.value)
|
|
|
|
|
|
/* setTimeout(() => {
|
|
|
|
|
|
console.log("inputText.value:", inputText.value);
|
|
|
|
|
|
}, 0); */
|
|
|
|
|
|
|
|
|
|
|
|
if (inputText.value.trim()) {
|
|
|
|
|
|
console.log("sendMessage",inputText.value.trim())
|
|
|
|
|
|
messages.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt' });
|
|
|
|
|
|
console.log("messages",messages)
|
|
|
|
|
|
scollToButtom();
|
|
|
|
|
|
inputText.value = '';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
let scollToButtom = () => {
|
|
|
|
|
|
/* $nextTick(() => {
|
|
|
|
|
|
let chatform= document.getElementById('chatform') // 获取对象
|
|
|
|
|
|
chatform.scrollTop = chatform.scrollHeight // 滚动高度
|
|
|
|
|
|
}) */
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
2023-12-07 09:39:34 +08:00
|
|
|
|
<style lang="scss" scoped>
|
2023-12-07 13:02:36 +08:00
|
|
|
|
::-webkit-input-placeholder {
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sendinput {
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
width: calc(100vw - 154px);
|
|
|
|
|
|
border-radius: 21px;
|
|
|
|
|
|
border: 0px;
|
|
|
|
|
|
background: #F5F5FB;
|
|
|
|
|
|
padding: 0px 12px;
|
|
|
|
|
|
padding-left: 36px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 60px;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sendinput:focus {
|
|
|
|
|
|
outline: 1px solid #4379FF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-07 10:38:55 +08:00
|
|
|
|
.Left {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
|
padding-right: 59px;
|
2023-12-07 13:02:36 +08:00
|
|
|
|
|
2023-12-07 10:38:55 +08:00
|
|
|
|
.Left_mesg {
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
}
|
2023-12-07 09:39:34 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-07 10:38:55 +08:00
|
|
|
|
.Right {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
padding-right: 16px;
|
|
|
|
|
|
padding-left: 59px;
|
2023-12-07 13:02:36 +08:00
|
|
|
|
|
2023-12-07 10:38:55 +08:00
|
|
|
|
.Right_mesg {
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
}
|
2023-12-07 09:39:34 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-07 10:38:55 +08:00
|
|
|
|
|
2023-12-07 09:39:34 +08:00
|
|
|
|
.recomand {
|
|
|
|
|
|
display: flex;
|
2023-12-07 13:02:36 +08:00
|
|
|
|
padding-left: 16px;
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: calc(100vh - 156px);
|
|
|
|
|
|
left: 0px;
|
2023-12-07 09:39:34 +08:00
|
|
|
|
|
|
|
|
|
|
// align-items: center;
|
|
|
|
|
|
.recomand_itm {
|
|
|
|
|
|
// width: 84px;
|
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
height: 28px;
|
|
|
|
|
|
line-height: 12px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background: #DFE7FB;
|
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #4379FF;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
|
width: 343px;
|
|
|
|
|
|
height: 216px;
|
2023-12-07 13:02:36 +08:00
|
|
|
|
// margin: 0 auto;
|
|
|
|
|
|
// padding-left: 16px;
|
2023-12-07 14:36:10 +08:00
|
|
|
|
// margin-left: 16px;
|
2023-12-07 09:39:34 +08:00
|
|
|
|
|
|
|
|
|
|
.main_card {
|
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
height: 178px;
|
|
|
|
|
|
|
|
|
|
|
|
.card_top {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 98px;
|
|
|
|
|
|
height: 98px;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.desc {
|
|
|
|
|
|
.name {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.addr {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
line-height: 12px;
|
|
|
|
|
|
margin: 8px 0px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tag_wrp {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
color: #4379FF;
|
|
|
|
|
|
width: 48px;
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
|
border-radius: 2px 2px 2px 2px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
border: 1px solid #B8CCFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail {
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.card_botm {
|
|
|
|
|
|
border-top: 1px solid #F1F1F1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.card_bt {
|
|
|
|
|
|
height: 47px;
|
|
|
|
|
|
width: calc(50% - 1px);
|
|
|
|
|
|
color: #4379FF;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 47px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.split_line {
|
|
|
|
|
|
width: 1px;
|
|
|
|
|
|
height: 47px;
|
|
|
|
|
|
background-color: #F1F1F1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.prise_wrp {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: end;
|
|
|
|
|
|
|
|
|
|
|
|
.prise {
|
|
|
|
|
|
width: 76px;
|
|
|
|
|
|
height: 28px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
|
|
|
|
|
|
|
// margin-right: -1px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.spl_line {
|
|
|
|
|
|
height: 12px;
|
|
|
|
|
|
width: 1px;
|
|
|
|
|
|
border: 1px solid #D6D6D6;
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-07 14:36:10 +08:00
|
|
|
|
.txt {
|
|
|
|
|
|
min-height: 44px;
|
|
|
|
|
|
padding: 10px 16px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.txt_l {
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 0px 12px 12px 12px;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.txt_r {
|
|
|
|
|
|
border-radius: 12px 12px 0px 12px;
|
|
|
|
|
|
background: #4F82FF;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-07 09:39:34 +08:00
|
|
|
|
/* @media (min-width: 1024px) {
|
|
|
|
|
|
.about {
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
} */
|
|
|
|
|
|
.c_body {
|
|
|
|
|
|
.message-container {
|
2023-12-07 13:02:36 +08:00
|
|
|
|
height: calc(100vh - 124px);
|
2023-12-07 09:39:34 +08:00
|
|
|
|
overflow: auto;
|
|
|
|
|
|
border: 1px red solid;
|
|
|
|
|
|
background-color: rgb(245, 245, 251);
|
2023-12-07 13:02:36 +08:00
|
|
|
|
position: relative;
|
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
|
padding-bottom: 45px;
|
2023-12-07 14:36:10 +08:00
|
|
|
|
|
|
|
|
|
|
.message {
|
|
|
|
|
|
/* width: 100%;
|
|
|
|
|
|
height: 100%; */
|
|
|
|
|
|
}
|
2023-12-07 09:39:34 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.c_bottom {
|
2023-12-07 10:13:00 +08:00
|
|
|
|
width: 100vw;
|
2023-12-07 09:39:34 +08:00
|
|
|
|
// height: 60px;
|
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border: 1px solid red;
|
|
|
|
|
|
position: absolute;
|
2023-12-07 10:38:55 +08:00
|
|
|
|
// bottom: 180px;
|
|
|
|
|
|
top: calc(100vh - 122px);
|
2023-12-07 09:39:34 +08:00
|
|
|
|
left: 0px;
|
|
|
|
|
|
|
2023-12-07 13:02:36 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
// justify-content: center;
|
2023-12-07 09:39:34 +08:00
|
|
|
|
// padding: 12px 16px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 36px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 12px;
|
|
|
|
|
|
left: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-07 13:02:36 +08:00
|
|
|
|
.tips {
|
|
|
|
|
|
/* display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: flex-start; */
|
|
|
|
|
|
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;
|
|
|
|
|
|
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;
|
|
|
|
|
|
}
|
2023-12-07 09:39:34 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.send {
|
|
|
|
|
|
width: 60px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
background: linear-gradient(90deg, #4379FF 0%, #6D97FF 100%);
|
|
|
|
|
|
border-radius: 36px 36px 36px 36px;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 12px;
|
|
|
|
|
|
right: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
