diff --git a/assets/iconfont/iconfont.wxss b/assets/iconfont/iconfont.wxss index 12a510a..cab1aed 100644 --- a/assets/iconfont/iconfont.wxss +++ b/assets/iconfont/iconfont.wxss @@ -1,8 +1,8 @@ @font-face { - font-family: "iconfont"; /* Project id 2708790 */ - src: url('//at.alicdn.com/t/c/font_2708790_0dvih56qdt3.woff2?t=1741316773850') format('woff2'), - url('//at.alicdn.com/t/c/font_2708790_0dvih56qdt3.woff?t=1741316773850') format('woff'), - url('//at.alicdn.com/t/c/font_2708790_0dvih56qdt3.ttf?t=1741316773850') format('truetype'); + font-family: 'iconfont'; /* Project id 2708790 */ + src: url('//at.alicdn.com/t/c/font_2708790_qvphqofg7ek.woff2?t=1741660802324') format('woff2'), + url('//at.alicdn.com/t/c/font_2708790_qvphqofg7ek.woff?t=1741660802324') format('woff'), + url('//at.alicdn.com/t/c/font_2708790_qvphqofg7ek.ttf?t=1741660802324') format('truetype'); } .iconfont { @@ -13,6 +13,34 @@ -moz-osx-font-smoothing: grayscale; } +.icon-fuzhi11:before { + content: "\e606"; +} + +.icon-fenxiangfenxiangshare:before { + content: "\e697"; +} + +.icon-huatongyuyin:before { + content: "\e64d"; +} + +.icon-fasong1:before { + content: "\100c0"; +} + +.icon-weixinjianpan2:before { + content: "\e67c"; +} + +.icon-useful:before { + content: "\100c4"; +} + +.icon-un_useful:before { + content: "\100c5"; +} + .icon-file-copy:before { content: "\e7f6"; } @@ -1492,3 +1520,4 @@ .icon-xiayiye1:before { content: "\e695"; } + diff --git a/pages/message/index.js b/pages/message/index.js index 2d6dd5b..cbe12b0 100644 --- a/pages/message/index.js +++ b/pages/message/index.js @@ -29,8 +29,8 @@ Page({ time: '下午 1:30', }, { - title: '智能匹配', - url: '/subPage/chat/index', + title: '智能匹配助手', + url: '/subPage/chat/index?title=智能匹配助手', img: '../../assets/images/chat.svg', content: 'AI大模型智能匹配', time: '下午 1:30', diff --git a/subPage/chat/index.js b/subPage/chat/index.js index 713565c..062f8fa 100644 --- a/subPage/chat/index.js +++ b/subPage/chat/index.js @@ -5,14 +5,16 @@ Page({ * 页面的初始数据 */ data: { - + eventType:'input',// 底部事件类型 input 键盘输入,voice 语音输入 }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { - + wx.setNavigationBarTitle({ + title: options.title, + }) }, /** @@ -62,5 +64,19 @@ Page({ */ onShareAppMessage() { + }, + + handleEvent(e){ + console.log('handleEvent',e); + let that = this; + that.animate(); + that.setData({ + eventType:e.currentTarget.dataset.type == 'input' ? 'voice':'input' + }) + }, + animate($type='light') { + wx.vibrateShort({ + type:$type + }); } }) \ No newline at end of file diff --git a/subPage/chat/index.wxml b/subPage/chat/index.wxml index a96c7a8..82de06e 100644 --- a/subPage/chat/index.wxml +++ b/subPage/chat/index.wxml @@ -1,2 +1,36 @@ - -subPage/chat/index.wxml \ No newline at end of file + + + 具体内容 + + + + + + + + + + + + + + + + + + + 按住 说话 + + + + + + + + + \ No newline at end of file diff --git a/subPage/chat/index.wxss b/subPage/chat/index.wxss index c3077a3..e29bafd 100644 --- a/subPage/chat/index.wxss +++ b/subPage/chat/index.wxss @@ -1 +1,202 @@ -/* subPage/chat/index.wxss */ \ No newline at end of file +.p-home-chat { + background-color: #f5f5f5; + height: 100%; +} +.p-home-chat .g_bg_f0a { + background-color: #CC463A; +} +.p-home-chat .chat-content { + width: calc(100%); + margin: 0 auto; + min-height: calc(8vh); + padding-bottom: 92px; +} +.p-home-chat .chat-content .chat-left { + padding: 0 10px; +} +.p-home-chat .chat-content .chat-left .msg { + border-radius: 12px; + line-height: 1.5; + word-break: break-all; +} +.p-home-chat .chat-content .chat-right { + padding: 0 10px; +} +.p-home-chat .chat-content .chat-right .msg { + border-radius: 12px; + line-height: 1.5; + word-break: break-all; +} +.p-home-chat .chat-operate { + position: fixed; + width: 100%; + left: 0; + bottom: 0px; + z-index: 1; + padding-top: 12px; + background-color: #f5f5f5; + padding-bottom: 24px; +} +.p-home-chat .chat-operate .m-input { + width: calc(100% - 20px); + margin: 0 auto; + border-radius: 40px; + height: 56px; + font-size: 16px; + background-color: #fff; + position: relative; +} +.p-home-chat .chat-operate .m-input .i-box{ + width: 48px; +} +.p-home-chat .chat-operate .m-input .icon{ + font-size: 22px; +} +.p-home-chat .chat-operate .m-input .right-box{ + width: 48px; +} +.p-home-chat .chat-operate .m-input .right-box .icon{ + font-size: 32px; + color: #bbb; +} +.p-home-chat .chat-operate .m-input .input-box{ + padding: 0 12px; +} +.p-home-chat .chat-operate .m-input .voice-box{ + padding: 0 12px; + width: 100%; + text-align: center; + font-size: 17px; + font-weight: 700; +} +.p-home-chat .chat-operate input { + height: 56px; +} +.p-home-chat .btn-share { + position: absolute; + right: 0; + top: 0; + z-index: 1; + width: 100%; + height: 100%; + opacity: 0; +} +.p-home-chat .longpress-top-mask { + position: fixed; + left: 0; + width: 100vw; + z-index: 99; + background-color: rgba(245, 245, 245, 0.5); + box-shadow: 0 -5px 10px rgba(245, 245, 245, 0.5); +} +.p-home-chat .longpress-bottom-mask { + position: fixed; + left: 0; + bottom: 0; + width: 100vw; + z-index: 99; + background-color: rgba(245, 245, 245, 0.5); + box-shadow: 0 -5px 10px rgba(245, 245, 245, 0.5); +} +.p-home-chat .longpress-bottom-down { + position: fixed; + left: 0; + bottom: 0; + width: 100vw; + z-index: 99; + background-color: #3578f6; + box-shadow: 0 -5px 10px rgba(245, 245, 245, 0.5); +} +@keyframes voi_animate { + 0% { + height: 50%; + background-color: #1677ff; + } + 20% { + height: 50%; + background-color: #92F7FE; + } + 50% { + height: 100%; + background-color: #1989fa; + } + 80% { + height: 50%; + background-color: #92F7FE; + } + 100% { + height: 50%; + background-color: #1677ff; + } +} +.p-home-chat .column-voice { + width: 100%; + height: 22px; + overflow: hidden; + max-width: calc(-40%); + margin: 0 auto; +} +.p-home-chat .column-voice .column-item { + width: 3px; + height: 100%; + margin-left: 6px; + border-radius: 10px; + background-color: #1677ff; + vertical-align: middle; + display: inline-block; +} +/* 容器样式 */ +.loader { + display: flex; +} +/* 单个点的样式 */ +.dot { + width: 10px; + height: 10px; + margin: 0 2px; + border-radius: 50%; + background-color: #666; + animation: dotPulse 1s infinite ease-in-out; +} +/* 动画定义 */ +@keyframes dotPulse { + 0%, + 80%, + 100% { + transform: scale(0.9); + } + 40% { + transform: scale(1.1); + } +} +/* 第二个点的延时 */ +.dot:nth-child(2) { + animation-delay: -0.33s; +} +/* 第三个点的延时 */ +.dot:nth-child(3) { + animation-delay: -0.66s; +} +textarea { + resize: none; + /* 禁止手动调整大小 */ + overflow: hidden; + /* 隐藏超出部分 */ + width: 100%; + /* 设置宽度 */ +} +.hasTopPadding { + padding-top: 8px !important; + box-sizing: content-box !important; +} +.biggerSize::after { + content: ""; + /* display: inline-block; */ + width: 60px; + height: 60px; + position: absolute; + left: 50%; + top: 50%; + z-index: 99; + transform: translate(-50%, -50%); +} \ No newline at end of file