Aichat.json
bash
复制代码
{ "usingComponents": {}, "navigationBarTitleText": "AI聊天", "navigationStyle": "custom" }
Aichat.wxss
css
复制代码
page{ background-color: #EDEDED; } .index{ position:fixed; width: 100%; float: left; height: 64px; padding: 20rpx 220rpx 0 0; box-shadow: 0rpx 0rpx 0rpx; min-height: 0px; display: flex;align-items: center; background-color:#fff; z-index:9999; border-bottom: 1px solid #f7f7f7; top: 0; } .index-img{ width: 34rpx; margin-left: 20rpx; } .index>text{ margin-left: 20rpx; font-size: 28rpx; font-weight: bold; } .chat-index{ /* padding-top: 30px; */ width: 100%; float: left; overflow: hidden; } .scroll-view{ width: 100%; float: left; overflow: hidden; background-color: #EDEDED; } .contrary{ display:flex; flex-direction:row-reverse; } .news{ width: 94%; float: left; overflow: hidden; padding: 0 3% 0 3%; margin-bottom: 26rpx; } .news:first-child{ margin-top: 60rpx } .mews-image{ width: 70rpx; height: 70rpx; float: left; } .mews-image>image{ width: 100%; height: 100%; border-radius: 10rpx; } .news-centent{ width: 70%; float: left; overflow: hidden; position: relative; } .centent-right{ margin-right: 10rpx; padding: 0 15rpx 0 0; } .centent-left{ margin-left: 10rpx; padding: 0 0 0 15rpx; } .trianright{ width:0; height:0; border-top:15rpx solid transparent; border-bottom:15rpx solid transparent; border-left:15rpx solid #FFFFFF; position: absolute; right: 0; top: 20rpx; } .trianleft{ width:0; height:0; border-top:15rpx solid transparent; border-bottom:15rpx solid transparent; border-right:15rpx solid #95EB69; position: absolute; left: 0; top: 20rpx; } .centent-right>text{ float: right; } .centent-right>.news-images{ float: right; } .centent-right>.news-voice{ float: right; } .centent-left>text{ float: left; } .centent-left>.news-images{ float: left; } .centent-left>.news-voice{ float: left; } .news-centent>text{ word-wrap:break-word; word-break:normal; padding: 16.5rpx; /* background-color: #95EB69; */ color: #000200; border-radius: 8rpx; font-size: 28rpx; max-width: 100%; line-height: 42rpx; } .news-centent>.news-images{ max-width: calc(100%); padding: 16.5rpx; background-color: #95EB69; border-radius: 8rpx; } .news-centent>.news-voice{ height: 70rpx; background-color: #95EB69; border-radius: 8rpx; padding: 0 10rpx; display: flex; align-items: center; } .centent-left>.news-voice>text{ padding: 0 30rpx 0 15rpx; font-size: 26rpx; font-weight: bold; } .centent-right>.news-voice>text{ padding: 0 15rpx 0 30rpx; font-size: 26rpx; font-weight: bold; } .centent-left>.news-voice>image{ float: left; } .centent-right>.news-voice>image{ float: right; } .news-voice>image{ width: 50rpx; height: 42rpx; } .chat-bottom{ width: 100%; float: left; overflow: hidden; background-color: #F7F7F7; transition:all 0.5s; } .chat-centent{ width: 100%; float: left; overflow: hidden; position: relative; padding: 0 1.5%; } .chat-pression{ width: 7%; height: 100rpx; display: flex; align-items: center; text-align: center; float: left; } .chat-pression>image{ width: 45rpx; height: 45rpx; margin: 0 auto; } .chat-tencvi{ width: 73%; padding: 0 1%; float: left; display: flex; align-items: center; transition:all 0.5s; } .chat-tencvi>textarea{ background-color: #fff; border-radius: 8rpx; width: 100%; padding: 3%; font-size: 28rpx; margin: 20rpx 0; max-height: 180rpx; } .chat-tencvi>view{ width: 100%; padding: 3%; margin: 20rpx 0; background-color: #fff; border-radius: 8rpx; font-size: 26rpx; text-align: center; } .chat-news{ height: 100rpx; float: right; display: flex; align-items: center; } .chat-news>view{ width: 80%; background-color: #07C160; color: #fff; border-radius: 8rpx; height: 60rpx; line-height: 60rpx; font-size:26rpx; text-align: center; } .chat-cube{ width: 100%; float: left; overflow: hidden; height: 400rpx; background-color: #EDEDED; border-top: 1px solid #ddd; padding:2% 0 8% 0; overflow-y: auto; } .cube-title{ width: 100%; float: left; font-size: 24rpx; padding:0 3.5%; position: relative; top: 10rpx; } .cube-centent{ width: 100%; float: left; overflow: hidden; } .cube-centent>view{ margin-top: 30rpx; width: 12.5%; float: left; text-align: center; } .chat-camera{ width: 100%; float: left; overflow: hidden; padding-bottom: 60rpx; background-color: #EDEDED; border-top: 1px solid #ddd; overflow-y: auto; } .camera-feature{ margin: 60rpx 0 0 5%; width: 18.75%; float: left; overflow: hidden; text-align: center; font-size: 20rpx; } .feature-src{ background-color: #fff; border-radius: 15rpx; float: left; width: 80rpx; height: 80rpx; margin: 0 calc(50% - 40rpx); text-align: center; } .feature-src>image{ width: 40rpx; height: 40rpx; margin:20rpx; } .feature-text{ width: 100%; float: left; margin-top: 10rpx; } .animation{ z-index: 10; position: fixed; width:300rpx; height: 300rpx; border-radius: 50%; margin: calc((100vh - 300rpx)/2) calc((100% - 300rpx)/2); } .animation>image{ width: 100%; height: 100%; border-radius: 50%; } .animation::before { content: ""; display: block; background-color: #ccc; filter: blur(10rpx); position: absolute; width: 100%; height: 100%; top: 10rpx; left: 10rpx; z-index: -1; opacity: 0.4; transform-origin: 0 0; border-radius: inherit; transform: scale(1, 1); } .chat-cbins{ z-index: 10; width: 100%; background-color: rgba(26, 26, 26, 0.6); color: #fff; padding: 3%; font-size: 22rpx; } .background_left{ background-color: #95EB69; } .background_right{ background-color: #FFFFFF; }
代码基本上就是这些了,其实没有多少东西,当然,就这么几行代码实现出来的效果肯定是有bug的,这个不要有太高的期望。
有好的建议,请在下方输入你的评论。
欢迎访问个人博客:guanchao.site
欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”