From eafd333f23cb16abd083ea128b52cd2ceb7cbfa3 Mon Sep 17 00:00:00 2001 From: jiangjunjie Date: Tue, 22 Sep 2026 14:10:52 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4px=E6=8D=A2rem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/assets/images/footer-bar-btn-icon.png | Bin 0 -> 905 bytes src/assets/images/footer-bar-btn-icon2.png | Bin 0 -> 877 bytes src/assets/images/footer-bar-btn-icon3.png | Bin 0 -> 1302 bytes src/assets/images/footer-bar-btn-icon4.png | Bin 0 -> 948 bytes src/components/footer-bar-btn.vue | 95 +++++++------ src/components/footer-bar-input.vue | 150 ++++++++++----------- 7 files changed, 132 insertions(+), 115 deletions(-) create mode 100644 src/assets/images/footer-bar-btn-icon.png create mode 100644 src/assets/images/footer-bar-btn-icon2.png create mode 100644 src/assets/images/footer-bar-btn-icon3.png create mode 100644 src/assets/images/footer-bar-btn-icon4.png 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 0000000000000000000000000000000000000000..a3f9c02f71940ac08c3b8d6ae5c3d201c367a245 GIT binary patch literal 905 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 M07*qoM6N<$f>~&B;s5{u literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..2e79d1d84f25a64bdb8182c93d63ba571aca16b1 GIT binary patch literal 948 zcmV;l155mgP)Px#1am@3R0s$N2z&@+hyVZsUP(kjR9J=Wn6XmZKoExiwK5ZD5@tlfSmn`#8Jd_b z9i~eWVdV*M-TUH1ej9j3rq*Nf*1q|BMSu zw|AfJZufQ%Sm}|9bc}>>%zMDpu^r2v)UhiJYKgZEfDRaNpa~fnRuXs!8116qxu8Ng z=3n?70$TqEmjyuWvFv}yYiHy&cxt}dZe_50QveNnVYmn9s*@P8&AdjvW)Q0e)Ar^zK4lP182$-bY#*p#xD+V7L>{`}+Q z6N0g$>$MR{07FaI-xxTHJU8#)w*Z`!0%cGg;0PqTQOF<)R2tV(GKx%E5^xY%knXB}6w>R8sd~p0q#_Is<^Nu6a8YSFQwgtM*zvn;uP^K2naA=Hy*}T=t1x zm6?>(gw64W#@<-=hB@DmDN8sFzzmsIE#U}Y(wcy;f5}1S3TS(M5d|fS-(jG| z@FQ=0)Py}Ga6A0?+{9UTkLJn}j=00*D`!^*4F+9WVm}uW%LHXiKF%jLY3=yf5_WEx zvlP%^V6M-%r<} zEB8tV0B*e>pVrLna{`;;B2>d)6jBl<@Bers8Q6@zteIOk;c8UVdyeV#hPi#}dEf8T zUTR%CmXQ$7^kQKbpgMtNcnNXEKqnF*l>2n)pek($r(S{I0mx) @@ -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;