diff --git a/index.html b/index.html index 5aacc50..60803ae 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@ .van-tab, .van-cascader__title, input { - font-size: 28rem; + font-size: 14rem; } .van-checkbox__icon { diff --git a/src/assets/images/footer-bar-btn-icon.png b/src/assets/images/footer-bar-btn-icon.png new file mode 100644 index 0000000..a3f9c02 Binary files /dev/null and b/src/assets/images/footer-bar-btn-icon.png differ diff --git a/src/assets/images/footer-bar-btn-icon2.png b/src/assets/images/footer-bar-btn-icon2.png new file mode 100644 index 0000000..4a915f6 Binary files /dev/null and b/src/assets/images/footer-bar-btn-icon2.png differ diff --git a/src/assets/images/footer-bar-btn-icon3.png b/src/assets/images/footer-bar-btn-icon3.png new file mode 100644 index 0000000..38b6858 Binary files /dev/null and b/src/assets/images/footer-bar-btn-icon3.png differ diff --git a/src/assets/images/footer-bar-btn-icon4.png b/src/assets/images/footer-bar-btn-icon4.png new file mode 100644 index 0000000..2e79d1d Binary files /dev/null and b/src/assets/images/footer-bar-btn-icon4.png differ diff --git a/src/components/footer-bar-btn.vue b/src/components/footer-bar-btn.vue index 640795f..b635036 100644 --- a/src/components/footer-bar-btn.vue +++ b/src/components/footer-bar-btn.vue @@ -2,8 +2,9 @@
@@ -14,13 +15,22 @@ import { ref, computed, onMounted } from 'vue' import { storeToRefs } from 'pinia' import { useAppStore } from '@/store/app.js' 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']) const store = useAppStore() 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 keyWordshow = computed(() => keywordslist.value.length > 0) @@ -39,25 +49,25 @@ function scrollTopBody() { } function keywordsClick(item) { - const sendParmas = { - reqAndResType: '1', // 1文本 2图片 3问题评价 - msgText: item.name, - msgSource: manualService.value, // 1机器人 2人工 - questionType: 1, - } - - if (!issubmit.value) return - issubmit.value = false - scrollTopBody() - - store - .sendingRobot(sendParmas) - .catch((err) => { - console.log(err) - }) - .finally(() => { - issubmit.value = true - }) + // const sendParmas = { + // reqAndResType: '1', // 1文本 2图片 3问题评价 + // msgText: item.name, + // msgSource: manualService.value, // 1机器人 2人工 + // questionType: 1, + // } + + // if (!issubmit.value) return + // issubmit.value = false + // scrollTopBody() + + // store + // .sendingRobot(sendParmas) + // .catch((err) => { + // console.log(err) + // }) + // .finally(() => { + // issubmit.value = true + // }) } async function initFooterBtn() { @@ -93,7 +103,7 @@ function longToShort(name) { } onMounted(() => { - initFooterBtn() + // initFooterBtn() }) @@ -102,16 +112,16 @@ onMounted(() => { background-color: #ebf1ff; overflow-x: auto; display: flex; - padding: 0 9.5px; + padding: 0 9.5rem; } .footer-bar-btn { height: auto; - min-height: 33px; - line-height: 3px; + min-height: 33rem; + line-height: 3rem; overflow-x: scroll; overflow-y: hidden; - /* padding: 0 9.5px; */ + /* padding: 0 9.5rem; */ white-space: nowrap; text-align: left; -webkit-overflow-scrolling: touch; @@ -124,18 +134,19 @@ onMounted(() => { .footer-items-list { display: inline-block; font-family: 'SourceHanSansCN-Normal'; - font-size: 13px; - line-height: 13px; - color: #848a96; + font-size: 13rem; + line-height: 13rem; + color: #17204D; letter-spacing: 0; text-align: justify; - padding: 7px 16px 6px 16px; - margin: 0 5.5px; - background-color: #fff; + padding: 6.5rem 10rem; + margin: 0 5.5rem; + background: linear-gradient(140deg, #dcfcff 6%, #ffffffbf 18%, #ffffff 56%); position: relative; - border-radius: 82px; + border-radius: 82rem; -webkit-animation: slideInRight 0.5s ease-in-out both; animation: slideInRight 0.5s ease-in-out both; + display: flex; } .footerBtn .footer-items-list:active { @@ -195,18 +206,24 @@ onMounted(() => { } .elder-wrapper { - padding: 0 16px; + padding: 0 16rem; } .elder-wrapper .footer-items-list { font-family: PingFangSC-Medium; - font-size: 18px; - line-height: 18px; + font-size: 18rem; + line-height: 18rem; color: #025cea; - margin: 0 8px 6px 0; + margin: 0 8rem 6rem 0; } .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; } diff --git a/src/components/footer-bar-input.vue b/src/components/footer-bar-input.vue index de808e7..aef1102 100644 --- a/src/components/footer-bar-input.vue +++ b/src/components/footer-bar-input.vue @@ -20,18 +20,18 @@
引用内容:{{ getQuotePreview(quoteMessageObj) }}
×
-
+
-
@@ -780,21 +780,21 @@ watch(sendMessage, (newValue, oldValue) => { width: 100%; height: auto; position: absolute; - top: 1px; + top: 1rem; left: 0; z-index: 10; -ms-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); transform: translate(0, -100%); background: #ffffff; - box-shadow: 0 -3px 4px 0 #eef2f8; - border-radius: 18px 18px 0 0; + box-shadow: 0 -3rem 4rem 0 #eef2f8; + border-radius: 18rem 18rem 0 0; overflow: hidden; } .input-box { - padding: 9.5px 10px 9.5px 15px; - min-height: 54px; + padding: 9.5rem 10rem 9.5rem 15rem; + min-height: 54rem; -webkit-box-sizing: border-box; box-sizing: border-box; align-content: flex-start; @@ -808,13 +808,13 @@ watch(sendMessage, (newValue, oldValue) => { .input-box-txt { width: 100%; height: auto; - min-height: 10px; - line-height: 10px; + min-height: 10rem; + line-height: 10rem; background: #fff; - border-radius: 30px; - padding: 7.5px 20px 7.5px 15px; + border-radius: 30rem; + padding: 7.5rem 20rem 7.5rem 15rem; vertical-align: middle; - margin-right: 5px; + margin-right: 5rem; -webkit-box-sizing: content-box; box-sizing: content-box; user-select: text; @@ -830,33 +830,33 @@ watch(sendMessage, (newValue, oldValue) => { .input-text-tips { position: absolute; - bottom: 7.5px; - right: 5px; - font-size: 9px; + bottom: 7.5rem; + right: 5rem; + font-size: 9rem; color: #999; - line-height: 20px; + line-height: 20rem; } .input-box-middle { display: table-cell; - min-height: 20px; - line-height: 20px; + min-height: 20rem; + line-height: 20rem; vertical-align: middle; height: 100%; - margin: 7.5px auto; + margin: 7.5rem auto; } .input-txt { box-sizing: border-box; width: 100%; - /* height: 20px; */ - max-height: 80px; - line-height: 20px; + /* height: 20rem; */ + max-height: 80rem; + line-height: 20rem; border: 0; background: transparent; - border-radius: 2px; + border-radius: 2rem; font-family: SourceHanSansCN-Normal; - font-size: 14px; + font-size: 14rem; color: #333; letter-spacing: 0; text-align: justify; @@ -879,7 +879,7 @@ textarea:-webkit-input-placeholder, textarea:-ms-input-placeholder { opacity: 0.5; font-family: SourceHanSansCN-Normal; - font-size: 14px; + font-size: 14rem; color: #999999; letter-spacing: 0; text-align: justify; @@ -890,9 +890,9 @@ textarea:-ms-input-placeholder { } */ .input-btn-box { - width: 30px; - height: 30px; - padding: 2.5px 5px 0 5px; + width: 30rem; + height: 30rem; + padding: 2.5rem 5rem 0 5rem; vertical-align: middle; } @@ -914,8 +914,8 @@ textarea:-ms-input-placeholder { .btn-item { display: block; - width: 30px; - height: 30px; + width: 30rem; + height: 30rem; margin: 0 auto; transition: transform 0.5s; -moz-transition: -moz-transform 0.5s; @@ -968,7 +968,7 @@ textarea:-ms-input-placeholder { } .smile-emoticon-box.min_heightauto { - min-height: 245px; + min-height: 245rem; } .upload-image { @@ -980,7 +980,7 @@ textarea:-ms-input-placeholder { } .upload-image.min_heightauto { - min-height: 123px; + min-height: 123rem; } .draw-enter-active, @@ -995,8 +995,8 @@ textarea:-ms-input-placeholder { .word-cells { background-color: #ffffff; - line-height: 23px; - font-size: 15px; + line-height: 23rem; + font-size: 15rem; overflow: hidden; position: relative; } @@ -1007,7 +1007,7 @@ textarea:-ms-input-placeholder { } .word-cell { - padding: 0 15px 0 18px; + padding: 0 15rem 0 18rem; position: relative; display: -webkit-box; display: -webkit-flex; @@ -1023,14 +1023,14 @@ textarea:-ms-input-placeholder { left: 0; top: 0; right: 0; - height: 1px; - border-top: 1px solid rgba(0, 0, 0, 0.1); + height: 1rem; + border-top: 1rem solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.1); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); - left: 16px; + left: 16rem; z-index: 2; } @@ -1039,11 +1039,11 @@ textarea:-ms-input-placeholder { } .word-cell_example:before { - left: 18px; + left: 18rem; } .word-cell_access .word-cell__ft { - padding-right: 15px; + padding-right: 15rem; position: relative; } @@ -1054,12 +1054,12 @@ textarea:-ms-input-placeholder { } .word-cell__bd p { - height: 47px; + height: 47rem; text-align: left; font-family: SourceHanSansCN-Regular; - font-size: 15px; + font-size: 15rem; color: #717985; - line-height: 47px; + line-height: 47rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1082,8 +1082,8 @@ textarea:-ms-input-placeholder { .word-cell_access .word-cell__ft:after { content: ' '; - width: 12px; - height: 24px; + width: 12rem; + height: 24rem; mask-position: 0 0; mask-repeat: no-repeat; mask-size: 100%; @@ -1093,28 +1093,28 @@ textarea:-ms-input-placeholder { position: absolute; top: 50%; right: 0; - margin-top: -12px; + margin-top: -12rem; } .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 { font-family: PingFangSC-Regular; - font-size: 20px; + font-size: 20rem; color: #2c3562; letter-spacing: 0; } .elder-wrapper .input-txt { font-family: PingFangSC-Medium; - font-size: 16px; + font-size: 16rem; color: #2c3562; letter-spacing: 0; - height: 26px; - max-height: 104px; - line-height: 26px; + height: 26rem; + max-height: 104rem; + line-height: 26rem; } .elder-wrapper .input-box { @@ -1122,14 +1122,14 @@ textarea:-ms-input-placeholder { } .elder-wrapper .input-box .btn-item { - width: 36px; - height: 36px; + width: 36rem; + height: 36rem; } .elder-wrapper .input-btn-box { - width: 36px; - height: 40px; - padding: 2.5px 5px 0 5px; + width: 36rem; + height: 40rem; + padding: 2.5rem 5rem 0 5rem; vertical-align: middle; } @@ -1145,19 +1145,19 @@ textarea:-ms-input-placeholder { .elder-wrapper textarea:-moz-placeholder { font-family: PingFangSC-Medium; - font-size: 20px; + font-size: 20rem; color: #bfc3d1; } .elder-wrapper textarea:-webkit-input-placeholder { font-family: PingFangSC-Medium; - font-size: 20px; + font-size: 20rem; color: #bfc3d1; } .elder-wrapper textarea:-ms-input-placeholder { font-family: PingFangSC-Medium; - font-size: 20px; + font-size: 20rem; color: #bfc3d1; } @@ -1177,35 +1177,35 @@ textarea:-ms-input-placeholder { } .elder-wrapper .input-box-txt { - min-height: 44px; - line-height: 44px; + min-height: 44rem; + line-height: 44rem; background: #eef0f6; - border-radius: 22px; - padding: 0 35px 0 18px; + border-radius: 22rem; + padding: 0 35rem 0 18rem; } .elder-wrapper .input-box-txt .input-txt {} .elder-wrapper .input-box-txt .input-text-tips { - bottom: 12px; - right: 16px; + bottom: 12rem; + right: 16rem; font-family: PingFangSC-Regular; - font-size: 14px; + font-size: 14rem; color: #d0d2db; } .quote-preview-box { line-height: normal; background-color: #f7f8fa; - padding: 8px 16px; - height: 28px; + padding: 8rem 16rem; + height: 28rem; display: flex; align-items: center; justify-content: space-between; - font-size: 13px; + font-size: 13rem; color: #666; - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; + border-top: 1rem solid #eee; + border-bottom: 1rem solid #eee; } .quote-text { @@ -1216,7 +1216,7 @@ textarea:-ms-input-placeholder { } .quote-close-icon { - padding-left: 10px; + padding-left: 10rem; cursor: pointer; display: flex; align-items: center;