Merge branch 'main' of git.zdool.com:xs/yxdt/h5

This commit is contained in:
duanxiaohai 2023-12-07 16:54:52 +08:00
commit 571bea0520
6 changed files with 151 additions and 16 deletions

BIN
src/assets/c2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/c3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 826 B

After

Width:  |  Height:  |  Size: 826 B

BIN
src/assets/c5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 613 B

View File

@ -164,7 +164,7 @@
</div> </div>
<div v-else-if="message.type == 'card4'" class="card3"> <div v-else-if="message.type == 'card4'" class="card3">
<div class="c_top"> <div class="c_top">
推荐您可以挂神经内科您还可根据自身偏好重新选择继续为您推荐如偏好因素不在其列可继续提出您的需求 {{ message.text }}
</div> </div>
<div class="c_bt"> <div class="c_bt">
<div class="cbt_it" v-for=" v in 3"> <div class="cbt_it" v-for=" v in 3">
@ -173,6 +173,32 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="message.type == 'card5'" class="card5">
<div class="card_container">
<div class="cd_l">
<img src="@/assets/c2.png" alt="">
</div>
<div class="cd_r">
<div class="hostbital_name">象山第一人民医院</div>
<div class="second">
<div class="howway">
<img src="@/assets/c5.png" alt="">
<span>3公里</span>
</div>
<div class="addr">宁波市象山县东谷路28991</div>
</div>
<div class="tag_wrp">
<div class="tag">医保定点</div>
<div style="width: 4px;"></div>
<div class="tag">危重孕产妇救治中心</div>
</div>
</div>
<!-- <img src="@/assets/c5.png" alt=""> -->
</div>
<div class="guid_img">
<img src="@/assets/c3.png" alt="">
</div>
</div>
</div> </div>
</div> </div>
<div class="Right" v-else> <div class="Right" v-else>
@ -202,7 +228,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, nextTick } from 'vue' import { ref, reactive, nextTick, onMounted } from 'vue'
let inputText = ref('') let inputText = ref('')
let messages = reactive([ let messages = reactive([
{ id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题,或直接编辑问题发送给我哟', isMe: false }, { id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题,或直接编辑问题发送给我哟', isMe: false },
@ -216,7 +242,8 @@ let messages = reactive([
{ id: 9, type: 'txt', text: '人民医院怎么走', isMe: true }, { id: 9, type: 'txt', text: '人民医院怎么走', isMe: true },
{ id: 10, type: 'card5', text: '卡片5', isMe: false }, { id: 10, type: 'card5', text: '卡片5', isMe: false },
]); ]);
let sendMessage = () => {
const sendMessage = () => {
console.log("dddd", inputText.value) console.log("dddd", inputText.value)
/* setTimeout(() => { /* setTimeout(() => {
console.log("inputText.value:", inputText.value); console.log("inputText.value:", inputText.value);
@ -230,7 +257,7 @@ let sendMessage = () => {
inputText.value = ''; inputText.value = '';
} }
} }
let scollToButtom = () => { const scollToButtom = () => {
nextTick(() => { nextTick(() => {
let chatForm = document.getElementById('chatform'); // let chatForm = document.getElementById('chatform'); //
if (chatForm) { if (chatForm) {
@ -238,7 +265,7 @@ let scollToButtom = () => {
} }
}); });
} }
// scollToButtom() // onMounted(scrollToBottom);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::-webkit-input-placeholder { ::-webkit-input-placeholder {
@ -366,7 +393,8 @@ let scollToButtom = () => {
.tag { .tag {
font-size: 10px; font-size: 10px;
color: #4379FF; color: #4379FF;
width: 48px; // width: 48px;
padding: 0px 2px;
height: 16px; height: 16px;
text-align: center; text-align: center;
line-height: 16px; line-height: 16px;
@ -576,7 +604,9 @@ let scollToButtom = () => {
padding: 16px; padding: 16px;
border: 1px solid red; border: 1px solid red;
.c_top {margin-bottom: 12px;} .c_top {
margin-bottom: 12px;
}
.c_bt {} .c_bt {}
@ -591,6 +621,7 @@ let scollToButtom = () => {
justify-content: space-between; justify-content: space-between;
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
.it_name { .it_name {
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
@ -610,6 +641,100 @@ let scollToButtom = () => {
} }
} }
.card4 {}
.card5 {
width: 280px;
height: 90px;
border-radius: 16px;
background-color: #fff;
position: relative;
.guid_img {
width: 28px;
height: 28px;
position: absolute;
top: 50%;
transform: translateY(-44%);
right: -35px;
img {
width: 100%;
height: 100%;
}
}
.card_container {
padding: 16px;
box-sizing: border-box;
display: flex;
.cd_l {
img {
width: 40px;
height: 40px;
}
}
.cd_r {
margin-left: 8px;
.hostbital_name {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #333333;
}
.second {
display: flex;
color: #999999;
margin-bottom: 6px;
.howway {
display: flex;
align-items: center;
img {
width: 12px;
height: 12px;
}
span {
margin-right: 8px;
font-size: 12px;
}
}
.addr {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.tag_wrp {
display: flex;
.tag {
font-size: 10px;
color: #4379FF;
// width: 48px;
padding: 0px 2px;
height: 16px;
text-align: center;
line-height: 16px;
border-radius: 2px 2px 2px 2px;
opacity: 1;
border: 1px solid #B8CCFF;
}
}
}
}
}
.txt { .txt {
min-height: 44px; min-height: 44px;
padding: 10px 16px; padding: 10px 16px;

View File

@ -43,12 +43,14 @@
<div v-for="(data, index) in records.list" :key="data.id"> <div v-for="(data, index) in records.list" :key="data.id">
<listNoImg v-if="data.display == 0" :newData="data" /> <listNoImg v-if="data.display == 0" :newData="data" />
<listRightImg v-if="data.display == 1" :newData="data" /> <listRightImg v-if="data.display == 1" :newData="data" />
<div class="container">
<div class="line"></div> <div class="line"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
@ -172,7 +174,7 @@ const records = reactive({
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 70px; min-width: 70px;
height: 24px; height: 24px;
background: #457aff; background: #457aff;
opacity: 1; opacity: 1;
@ -196,9 +198,11 @@ const records = reactive({
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 24px; line-height: 24px;
// white-space: nowrap;
overflow: hidden; overflow: hidden;
// text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.time { .time {
margin-top: 24px; margin-top: 24px;
@ -228,7 +232,7 @@ const records = reactive({
padding-top: 0; padding-top: 0;
// overflow: hidden; // overflow: hidden;
background-color: #ffffff; background-color: #ffffff;
height: 68vh; // height:calc(100vh - 150px);
.main-t { .main-t {
display: flex; display: flex;
align-items: center; align-items: center;
@ -263,7 +267,8 @@ const records = reactive({
.list { .list {
// box-sizing: border-box; // box-sizing: border-box;
width: 100vw; width: 100vw;
height: 59vh; height: calc(100vh - 280px);
background-color: #ffffff;
overflow: auto; overflow: auto;
// border: 1px solid yellow; // border: 1px solid yellow;
} }
@ -280,13 +285,18 @@ const records = reactive({
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.container {
display: flex;
justify-content: center;
align-items: center;
}
.line { .line {
width: 100vw; width: calc(100vw - 32px);
height: 0px; height: 0px;
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
border: 1px solid #f1f1f1; border: 1px solid #f1f1f1;
margin-top: 16px; margin-top: 12px;
margin-bottom: 16px; margin-bottom: 16px;
text-align: center; text-align: center;
} }