wujingling0908 2 weeks ago
commit 469f44dbae
  1. 2
      index.html
  2. BIN
      src/assets/images/footer-bar-btn-icon.png
  3. BIN
      src/assets/images/footer-bar-btn-icon2.png
  4. BIN
      src/assets/images/footer-bar-btn-icon3.png
  5. BIN
      src/assets/images/footer-bar-btn-icon4.png
  6. 95
      src/components/footer-bar-btn.vue
  7. 150
      src/components/footer-bar-input.vue

@ -47,7 +47,7 @@
.van-tab, .van-tab,
.van-cascader__title, .van-cascader__title,
input { input {
font-size: 28rem; font-size: 14rem;
} }
.van-checkbox__icon { .van-checkbox__icon {

Binary file not shown.

After

Width:  |  Height:  |  Size: 905 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 877 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 948 B

@ -2,8 +2,9 @@
<div class="qipaomain"> <div class="qipaomain">
<div v-for="(item, index) in keywordslist" :key="index"> <div v-for="(item, index) in keywordslist" :key="index">
<div class="footer-bar-btn an-move-left"> <div class="footer-bar-btn an-move-left">
<a href="javascript:;" class="footer-items-list _line-fine-btn" v-show="item.name"
@click="keywordsClick(item)">{{ longToShort(item.name) }}</a> <a href="javascript:;" class="footer-items-list _line-fine-btn" v-show="item.name" @click="keywordsClick(item)">
<img class="footer-items-img" :src="item.icon" alt="">{{ longToShort(item.name) }}</a>
</div> </div>
</div> </div>
</div> </div>
@ -14,13 +15,22 @@ import { ref, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app.js' import { useAppStore } from '@/store/app.js'
import { Post } from '@/utils/https' import { Post } from '@/utils/https'
import footerBarBtnIcon from '@/assets/images/footer-bar-btn-icon.png'
import footerBarBtnIcon2 from '@/assets/images/footer-bar-btn-icon2.png'
import footerBarBtnIcon3 from '@/assets/images/footer-bar-btn-icon3.png'
import footerBarBtnIcon4 from '@/assets/images/footer-bar-btn-icon4.png'
defineEmits(['onFooterBtnChoose']) defineEmits(['onFooterBtnChoose'])
const store = useAppStore() const store = useAppStore()
const { source, planCode, userInfo, manualService, mescrollContent, elder } = storeToRefs(store) const { source, planCode, userInfo, manualService, mescrollContent, elder } = storeToRefs(store)
const keywordslist = ref([]) const keywordslist = ref([
{ name: "查保单", icon: footerBarBtnIcon },
{ name: "查收益", icon: footerBarBtnIcon2 },
{ name: "贷还款", icon: footerBarBtnIcon3 },
{ name: "续期交费", icon: footerBarBtnIcon4 },
])
const issubmit = ref(true) // 防止重复发送 const issubmit = ref(true) // 防止重复发送
const keyWordshow = computed(() => keywordslist.value.length > 0) const keyWordshow = computed(() => keywordslist.value.length > 0)
@ -39,25 +49,25 @@ function scrollTopBody() {
} }
function keywordsClick(item) { function keywordsClick(item) {
const sendParmas = { // const sendParmas = {
reqAndResType: '1', // 1文本 2图片 3问题评价 // reqAndResType: '1', // 1文本 2图片 3问题评价
msgText: item.name, // msgText: item.name,
msgSource: manualService.value, // 1机器人 2人工 // msgSource: manualService.value, // 1机器人 2人工
questionType: 1, // questionType: 1,
} // }
if (!issubmit.value) return // if (!issubmit.value) return
issubmit.value = false // issubmit.value = false
scrollTopBody() // scrollTopBody()
store // store
.sendingRobot(sendParmas) // .sendingRobot(sendParmas)
.catch((err) => { // .catch((err) => {
console.log(err) // console.log(err)
}) // })
.finally(() => { // .finally(() => {
issubmit.value = true // issubmit.value = true
}) // })
} }
async function initFooterBtn() { async function initFooterBtn() {
@ -93,7 +103,7 @@ function longToShort(name) {
} }
onMounted(() => { onMounted(() => {
initFooterBtn() // initFooterBtn()
}) })
</script> </script>
@ -102,16 +112,16 @@ onMounted(() => {
background-color: #ebf1ff; background-color: #ebf1ff;
overflow-x: auto; overflow-x: auto;
display: flex; display: flex;
padding: 0 9.5px; padding: 0 9.5rem;
} }
.footer-bar-btn { .footer-bar-btn {
height: auto; height: auto;
min-height: 33px; min-height: 33rem;
line-height: 3px; line-height: 3rem;
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
/* padding: 0 9.5px; */ /* padding: 0 9.5rem; */
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -124,18 +134,19 @@ onMounted(() => {
.footer-items-list { .footer-items-list {
display: inline-block; display: inline-block;
font-family: 'SourceHanSansCN-Normal'; font-family: 'SourceHanSansCN-Normal';
font-size: 13px; font-size: 13rem;
line-height: 13px; line-height: 13rem;
color: #848a96; color: #17204D;
letter-spacing: 0; letter-spacing: 0;
text-align: justify; text-align: justify;
padding: 7px 16px 6px 16px; padding: 6.5rem 10rem;
margin: 0 5.5px; margin: 0 5.5rem;
background-color: #fff; background: linear-gradient(140deg, #dcfcff 6%, #ffffffbf 18%, #ffffff 56%);
position: relative; position: relative;
border-radius: 82px; border-radius: 82rem;
-webkit-animation: slideInRight 0.5s ease-in-out both; -webkit-animation: slideInRight 0.5s ease-in-out both;
animation: slideInRight 0.5s ease-in-out both; animation: slideInRight 0.5s ease-in-out both;
display: flex;
} }
.footerBtn .footer-items-list:active { .footerBtn .footer-items-list:active {
@ -195,18 +206,24 @@ onMounted(() => {
} }
.elder-wrapper { .elder-wrapper {
padding: 0 16px; padding: 0 16rem;
} }
.elder-wrapper .footer-items-list { .elder-wrapper .footer-items-list {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 18px; font-size: 18rem;
line-height: 18px; line-height: 18rem;
color: #025cea; color: #025cea;
margin: 0 8px 6px 0; margin: 0 8rem 6rem 0;
} }
.elder-wrapper ._line-fine-btn::before { .elder-wrapper ._line-fine-btn::before {
border: 0.5px solid #dddddd; border: 0.5rem solid #dddddd;
}
.footer-items-img {
height: 14rem;
width: 14rem;
margin-right: 2rem;
} }
</style> </style>

@ -20,18 +20,18 @@
<div class="quote-text van-ellipsis">引用内容:{{ getQuotePreview(quoteMessageObj) }}</div> <div class="quote-text van-ellipsis">引用内容:{{ getQuotePreview(quoteMessageObj) }}</div>
<div class="quote-close-icon" @click="closeQuoteMessage"> <div class="quote-close-icon" @click="closeQuoteMessage">
<span style=" <span style="
font-size: 18px; font-size: 18rem;
line-height: 1; line-height: 1;
display: inline-block; display: inline-block;
padding: 0 4px; padding: 0 4rem;
color: #999; color: #999;
">&times;</span> ">&times;</span>
</div> </div>
</div> </div>
<!-- 输入框模块 --> <!-- 输入框模块 -->
<div class="input-box flex" :style="{ 'padding-bottom': isNewApp ? '15px' : '' }"> <div class="input-box flex" :style="{ 'padding-bottom': isNewApp ? '15rem' : '' }">
<!-- <div class="input-box-margin"> --> <!-- <div class="input-box-margin"> -->
<div class="input-btn-box" style="padding-left: 0px; padding-right: 10px; display: flex; align-items: center" <div class="input-btn-box" style="padding-left: 0; padding-right: 10rem; display: flex; align-items: center"
v-if="isElder && asrData.switch == 1" @click="clickMicro"> v-if="isElder && asrData.switch == 1" @click="clickMicro">
<img src="@/assets/images/fill-microphone.png" alt="" /> <img src="@/assets/images/fill-microphone.png" alt="" />
</div> </div>
@ -780,21 +780,21 @@ watch(sendMessage, (newValue, oldValue) => {
width: 100%; width: 100%;
height: auto; height: auto;
position: absolute; position: absolute;
top: 1px; top: 1rem;
left: 0; left: 0;
z-index: 10; z-index: 10;
-ms-transform: translate(0, -100%); -ms-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%); -webkit-transform: translate(0, -100%);
transform: translate(0, -100%); transform: translate(0, -100%);
background: #ffffff; background: #ffffff;
box-shadow: 0 -3px 4px 0 #eef2f8; box-shadow: 0 -3rem 4rem 0 #eef2f8;
border-radius: 18px 18px 0 0; border-radius: 18rem 18rem 0 0;
overflow: hidden; overflow: hidden;
} }
.input-box { .input-box {
padding: 9.5px 10px 9.5px 15px; padding: 9.5rem 10rem 9.5rem 15rem;
min-height: 54px; min-height: 54rem;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
align-content: flex-start; align-content: flex-start;
@ -808,13 +808,13 @@ watch(sendMessage, (newValue, oldValue) => {
.input-box-txt { .input-box-txt {
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 10px; min-height: 10rem;
line-height: 10px; line-height: 10rem;
background: #fff; background: #fff;
border-radius: 30px; border-radius: 30rem;
padding: 7.5px 20px 7.5px 15px; padding: 7.5rem 20rem 7.5rem 15rem;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5rem;
-webkit-box-sizing: content-box; -webkit-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
user-select: text; user-select: text;
@ -830,33 +830,33 @@ watch(sendMessage, (newValue, oldValue) => {
.input-text-tips { .input-text-tips {
position: absolute; position: absolute;
bottom: 7.5px; bottom: 7.5rem;
right: 5px; right: 5rem;
font-size: 9px; font-size: 9rem;
color: #999; color: #999;
line-height: 20px; line-height: 20rem;
} }
.input-box-middle { .input-box-middle {
display: table-cell; display: table-cell;
min-height: 20px; min-height: 20rem;
line-height: 20px; line-height: 20rem;
vertical-align: middle; vertical-align: middle;
height: 100%; height: 100%;
margin: 7.5px auto; margin: 7.5rem auto;
} }
.input-txt { .input-txt {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
/* height: 20px; */ /* height: 20rem; */
max-height: 80px; max-height: 80rem;
line-height: 20px; line-height: 20rem;
border: 0; border: 0;
background: transparent; background: transparent;
border-radius: 2px; border-radius: 2rem;
font-family: SourceHanSansCN-Normal; font-family: SourceHanSansCN-Normal;
font-size: 14px; font-size: 14rem;
color: #333; color: #333;
letter-spacing: 0; letter-spacing: 0;
text-align: justify; text-align: justify;
@ -879,7 +879,7 @@ textarea:-webkit-input-placeholder,
textarea:-ms-input-placeholder { textarea:-ms-input-placeholder {
opacity: 0.5; opacity: 0.5;
font-family: SourceHanSansCN-Normal; font-family: SourceHanSansCN-Normal;
font-size: 14px; font-size: 14rem;
color: #999999; color: #999999;
letter-spacing: 0; letter-spacing: 0;
text-align: justify; text-align: justify;
@ -890,9 +890,9 @@ textarea:-ms-input-placeholder {
} */ } */
.input-btn-box { .input-btn-box {
width: 30px; width: 30rem;
height: 30px; height: 30rem;
padding: 2.5px 5px 0 5px; padding: 2.5rem 5rem 0 5rem;
vertical-align: middle; vertical-align: middle;
} }
@ -914,8 +914,8 @@ textarea:-ms-input-placeholder {
.btn-item { .btn-item {
display: block; display: block;
width: 30px; width: 30rem;
height: 30px; height: 30rem;
margin: 0 auto; margin: 0 auto;
transition: transform 0.5s; transition: transform 0.5s;
-moz-transition: -moz-transform 0.5s; -moz-transition: -moz-transform 0.5s;
@ -968,7 +968,7 @@ textarea:-ms-input-placeholder {
} }
.smile-emoticon-box.min_heightauto { .smile-emoticon-box.min_heightauto {
min-height: 245px; min-height: 245rem;
} }
.upload-image { .upload-image {
@ -980,7 +980,7 @@ textarea:-ms-input-placeholder {
} }
.upload-image.min_heightauto { .upload-image.min_heightauto {
min-height: 123px; min-height: 123rem;
} }
.draw-enter-active, .draw-enter-active,
@ -995,8 +995,8 @@ textarea:-ms-input-placeholder {
.word-cells { .word-cells {
background-color: #ffffff; background-color: #ffffff;
line-height: 23px; line-height: 23rem;
font-size: 15px; font-size: 15rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -1007,7 +1007,7 @@ textarea:-ms-input-placeholder {
} }
.word-cell { .word-cell {
padding: 0 15px 0 18px; padding: 0 15rem 0 18rem;
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1023,14 +1023,14 @@ textarea:-ms-input-placeholder {
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
height: 1px; height: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1rem solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.1);
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
transform-origin: 0 0; transform-origin: 0 0;
-webkit-transform: scaleY(0.5); -webkit-transform: scaleY(0.5);
transform: scaleY(0.5); transform: scaleY(0.5);
left: 16px; left: 16rem;
z-index: 2; z-index: 2;
} }
@ -1039,11 +1039,11 @@ textarea:-ms-input-placeholder {
} }
.word-cell_example:before { .word-cell_example:before {
left: 18px; left: 18rem;
} }
.word-cell_access .word-cell__ft { .word-cell_access .word-cell__ft {
padding-right: 15px; padding-right: 15rem;
position: relative; position: relative;
} }
@ -1054,12 +1054,12 @@ textarea:-ms-input-placeholder {
} }
.word-cell__bd p { .word-cell__bd p {
height: 47px; height: 47rem;
text-align: left; text-align: left;
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
font-size: 15px; font-size: 15rem;
color: #717985; color: #717985;
line-height: 47px; line-height: 47rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -1082,8 +1082,8 @@ textarea:-ms-input-placeholder {
.word-cell_access .word-cell__ft:after { .word-cell_access .word-cell__ft:after {
content: ' '; content: ' ';
width: 12px; width: 12rem;
height: 24px; height: 24rem;
mask-position: 0 0; mask-position: 0 0;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 100%; mask-size: 100%;
@ -1093,28 +1093,28 @@ textarea:-ms-input-placeholder {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -12px; margin-top: -12rem;
} }
.elder-wrapper .associational-word-box { .elder-wrapper .associational-word-box {
box-shadow: 0px -4px 16px 0px rgba(25, 28, 104, 0.1); box-shadow: 0 -4rem 16rem 0 rgba(25, 28, 104, 0.1);
} }
.elder-wrapper .associational-word-box .word-cell__bd p { .elder-wrapper .associational-word-box .word-cell__bd p {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 20px; font-size: 20rem;
color: #2c3562; color: #2c3562;
letter-spacing: 0; letter-spacing: 0;
} }
.elder-wrapper .input-txt { .elder-wrapper .input-txt {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 16px; font-size: 16rem;
color: #2c3562; color: #2c3562;
letter-spacing: 0; letter-spacing: 0;
height: 26px; height: 26rem;
max-height: 104px; max-height: 104rem;
line-height: 26px; line-height: 26rem;
} }
.elder-wrapper .input-box { .elder-wrapper .input-box {
@ -1122,14 +1122,14 @@ textarea:-ms-input-placeholder {
} }
.elder-wrapper .input-box .btn-item { .elder-wrapper .input-box .btn-item {
width: 36px; width: 36rem;
height: 36px; height: 36rem;
} }
.elder-wrapper .input-btn-box { .elder-wrapper .input-btn-box {
width: 36px; width: 36rem;
height: 40px; height: 40rem;
padding: 2.5px 5px 0 5px; padding: 2.5rem 5rem 0 5rem;
vertical-align: middle; vertical-align: middle;
} }
@ -1145,19 +1145,19 @@ textarea:-ms-input-placeholder {
.elder-wrapper textarea:-moz-placeholder { .elder-wrapper textarea:-moz-placeholder {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 20px; font-size: 20rem;
color: #bfc3d1; color: #bfc3d1;
} }
.elder-wrapper textarea:-webkit-input-placeholder { .elder-wrapper textarea:-webkit-input-placeholder {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 20px; font-size: 20rem;
color: #bfc3d1; color: #bfc3d1;
} }
.elder-wrapper textarea:-ms-input-placeholder { .elder-wrapper textarea:-ms-input-placeholder {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 20px; font-size: 20rem;
color: #bfc3d1; color: #bfc3d1;
} }
@ -1177,35 +1177,35 @@ textarea:-ms-input-placeholder {
} }
.elder-wrapper .input-box-txt { .elder-wrapper .input-box-txt {
min-height: 44px; min-height: 44rem;
line-height: 44px; line-height: 44rem;
background: #eef0f6; background: #eef0f6;
border-radius: 22px; border-radius: 22rem;
padding: 0 35px 0 18px; padding: 0 35rem 0 18rem;
} }
.elder-wrapper .input-box-txt .input-txt {} .elder-wrapper .input-box-txt .input-txt {}
.elder-wrapper .input-box-txt .input-text-tips { .elder-wrapper .input-box-txt .input-text-tips {
bottom: 12px; bottom: 12rem;
right: 16px; right: 16rem;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14rem;
color: #d0d2db; color: #d0d2db;
} }
.quote-preview-box { .quote-preview-box {
line-height: normal; line-height: normal;
background-color: #f7f8fa; background-color: #f7f8fa;
padding: 8px 16px; padding: 8rem 16rem;
height: 28px; height: 28rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 13px; font-size: 13rem;
color: #666; color: #666;
border-top: 1px solid #eee; border-top: 1rem solid #eee;
border-bottom: 1px solid #eee; border-bottom: 1rem solid #eee;
} }
.quote-text { .quote-text {
@ -1216,7 +1216,7 @@ textarea:-ms-input-placeholder {
} }
.quote-close-icon { .quote-close-icon {
padding-left: 10px; padding-left: 10rem;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;

Loading…
Cancel
Save