cyl/develop
commit
7472658755
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741657482228" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23129" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M0 0h1024v1024H0z" fill="#17B582" p-id="23130"></path><path d="M476.38 348.104c-10.626 0-18.282 7.656-18.282 18.226s7.714 18.228 18.284 18.228c10.628 0 18.284-7.658 18.284-18.228 0.056-10.512-7.656-18.226-18.284-18.226z" fill="#FFFFFF" p-id="23131"></path><path d="M701.442 403.184c-7.884-7.886-18.684-12.284-30.396-12.284-2.228 0-4.228 0.228-6.114 0.57v-0.57h-2.056c-3.144-17.484-10.628-34.568-21.77-49.938-10.684-14.684-24.568-27.368-40.452-37.08l14.34-20.456v-1.886c0-0.458 0.23-1.314 0.4-2.172 0.344-1.37 0.8-3.14 0.8-5.084 0-10.57-7.712-18.226-18.284-18.226-5.6 0-11.14 3.256-14.798 8.8l-16.74 24.052c-17.14-5.6-35.654-8.57-53.594-8.57-17.884 0-36.396 2.972-53.594 8.57L442.5 264.8c-3.772-5.486-9.2-8.8-14.856-8.8-10.628 0-18.284 7.656-18.284 18.226 0 3.542 1.428 7.314 3.828 9.942l12.914 18.456c-16.4 9.712-30.568 22.512-41.252 37.196-11.086 15.368-18.284 32.452-20.97 49.936h-3.142v0.572a32.724 32.724 0 0 0-6.114-0.572c-11.6 0-22.398 4.286-30.34 12.17-7.884 7.886-12.284 18.628-12.284 30.282v134.272c0 11.6 4.286 22.34 12.228 30.224 7.884 7.886 18.74 12.286 30.396 12.286 2.228 0 4.228-0.23 6.114-0.572v53.422c0 16.684 13.656 30.34 30.396 30.34h18.226v33.31c0 11.6 4.286 22.34 12.228 30.226 7.884 7.884 18.74 12.284 30.396 12.284 11.6 0 22.398-4.286 30.34-12.17 7.884-7.884 12.284-18.626 12.284-30.282v-33.254h36.454v33.196c0 11.6 4.284 22.34 12.226 30.226 7.886 7.884 18.74 12.284 30.398 12.284 11.654 0 22.396-4.286 30.34-12.34 7.884-7.886 12.282-18.628 12.282-30.284v-33.254h18.228c16.74 0 30.396-13.598 30.396-30.34v-52.22c1.828 0.34 3.828 0.57 6.114 0.57 11.6 0 22.398-4.286 30.34-12.17 7.884-7.886 12.284-18.626 12.284-30.282v-134.272c-0.058-11.598-4.342-22.282-12.228-30.224z m-340.648 164.552c0 3.886-2.228 6.058-6.114 6.058-3.884 0-6.112-2.172-6.112-6.058v-134.328c0-3.884 2.228-6.056 6.112-6.056 3.886 0 6.114 2.172 6.114 6.056v134.328zM435.7 341.02c21.426-15.6 48.738-24.17 77.134-24.17 28.398 0 55.708 8.628 77.134 24.284 18.514 13.54 30.968 30.968 35.826 49.994H399.876c4.856-19.084 17.426-36.568 35.824-50.108z m22.456 385.5c-0.344 3.2-2.514 4.97-6 4.97-3.886 0-6.114-2.172-6.114-6.056V692.18h12.114v34.34z m115.586 4.97c-3.886 0-6.114-2.172-6.114-6.056V692.18h12.114v34.34c-0.344 3.2-2.458 4.97-6 4.97z m54.736-75.764H397.304V427.41H628.48v228.316z m48.68-87.99c0 3.886-2.228 6.058-6.112 6.058-3.886 0-6.114-2.172-6.114-6.058v-134.328c0-3.884 2.228-6.056 6.114-6.056 3.884 0 6.114 2.172 6.114 6.056v134.328z" fill="#FFFFFF" p-id="23132"></path><path d="M549.402 348.104c-10.628 0-18.284 7.656-18.284 18.226s7.714 18.228 18.284 18.228c10.628 0 18.34-7.658 18.34-18.284-0.056-10.628-7.656-18.17-18.34-18.17z" fill="#FFFFFF" p-id="23133"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,66 @@
|
||||
// components/chat/hello.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
},
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/* components/chat/hello.wxss */
|
||||
.g_fw_600{
|
||||
font-weight: 600;
|
||||
}
|
||||
.g_ml_4{
|
||||
margin-left: 4px;
|
||||
}
|
||||
.g_mr_4{
|
||||
margin-right: 4px;
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
// components/chat/text.js
|
||||
Component({
|
||||
properties: {
|
||||
message: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<view class="panel-text {{color}}">
|
||||
{{message}}
|
||||
</view>
|
||||
@ -0,0 +1,7 @@
|
||||
/* components/chat/text.wxss */
|
||||
.cblack{
|
||||
color: #000;
|
||||
}
|
||||
.cwhite{
|
||||
color: #fff;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"hello-panel": "../../components/chat/hello",
|
||||
"text-panel": "../../components/chat/text"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
<view class="p-home-chat g_h_all g_flex_column_between">
|
||||
<view class="chat-content g_flex_column_end g_flex_1">
|
||||
<view class="chat-card"
|
||||
wx:for="{{list}}"
|
||||
wx:for-item="item"
|
||||
wx:for-index="index"
|
||||
wx:key="{{item.id}}"
|
||||
>
|
||||
<view class="fill-box {{index % 2 == 0 ? 'g_flex_row_start' : 'g_flex_row_end'}}">
|
||||
<view class="g_w_all {{index % 2 == 0 ? 'g_flex_row_start' : 'g_flex_row_end'}}">
|
||||
<view class="">
|
||||
<view class="{{index % 2 == 0 ? 'g_flex_row_start' : 'g_flex_row_end'}}">
|
||||
<view wx:if="{{index % 2 == 0 && index == 0}}"
|
||||
class="bg-obj g_flex_row_start"
|
||||
>
|
||||
<hello-panel />
|
||||
</view>
|
||||
<view wx:if="{{index % 2 == 0 && index != 0}}"
|
||||
class="bg-obj g_flex_row_start min80"
|
||||
>
|
||||
<text-panel message="{{item.content}}" color="cblack" />
|
||||
</view>
|
||||
<view wx:if="{{index % 2 == 1}}"
|
||||
class="main-obj g_flex_row_end max80"
|
||||
>
|
||||
<text-panel message="{{item.content}}" color="cwhite" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-opera g_flex_row_between" wx:if="{{index % 2 == 0}}">
|
||||
<view class="g_flex_row_start">
|
||||
<i class="iconfont icon-useful era-icon g_mr_12 {{item.isUp ? 'icon-active' : ''}}"
|
||||
data-up="{{item.isUp}}"
|
||||
data-index="{{index}}"
|
||||
bindtap="handleUp"
|
||||
></i>
|
||||
<i class="iconfont icon-un_useful era-icon {{item.isDown ? 'icon-active' : ''}}"
|
||||
data-down="{{item.isDown}}"
|
||||
data-index="{{index}}"
|
||||
bindtap="handleDown"
|
||||
></i>
|
||||
</view>
|
||||
<view class="g_flex_row_end">
|
||||
<i class="iconfont icon-fuzhi11 era-icon g_mr_12"
|
||||
data-copy="{{item.content}}"
|
||||
data-index="{{index}}"
|
||||
bindtap="handleCopy"
|
||||
></i>
|
||||
<i class="iconfont icon-fenxiangfenxiangshare era-icon"
|
||||
bindtap="handleShare"
|
||||
></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-operate g_flex_none">
|
||||
<view class="m-input g_flex_row_between">
|
||||
<!-- 左 -->
|
||||
<view class="g_flex_none g_flex_column_center"
|
||||
data-type="{{eventType}}"
|
||||
bindtap="handleEvent"
|
||||
>
|
||||
<view class="i-box g_flex_row_end" wx:if="{{eventType == 'input'}}">
|
||||
<i class="iconfont icon-huatongyuyin icon"></i>
|
||||
</view>
|
||||
<view class="i-box g_flex_row_end" wx:if="{{eventType == 'voice'}}">
|
||||
<i class="iconfont icon-weixinjianpan2 icon"
|
||||
style="font-size:28px;"
|
||||
></i>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 中 -->
|
||||
<view class="g_flex_1 g_flex_column_center">
|
||||
<view class="input-box" wx:if="{{eventType == 'input'}}">
|
||||
<input type="text" placeholder="请输入内容" style="width: 100%;" />
|
||||
</view>
|
||||
<view class="voice-box" wx:if="{{eventType == 'voice'}}">
|
||||
按住 说话
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右 -->
|
||||
<view class="g_flex_none g_flex_column_center right-box g_text_l">
|
||||
<i class="iconfont icon-fasong1 icon"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,246 @@
|
||||
.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%);
|
||||
}
|
||||
|
||||
.chat-card{
|
||||
padding: 0 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.chat-card:last-child{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.bg-obj{
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
padding: 12px;
|
||||
}
|
||||
.main-obj{
|
||||
background-color: #3578f6;
|
||||
border-radius: 12px;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
padding: 12px;
|
||||
}
|
||||
.item-opera{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.era-icon{
|
||||
font-size: 20px;
|
||||
color: #888888;
|
||||
}
|
||||
.g_mr_12{
|
||||
margin-right: 12px;
|
||||
}
|
||||
.icon-active{
|
||||
color: #3578f6;
|
||||
}
|
||||
.g_w_all{
|
||||
width: 100%;
|
||||
}
|
||||
.min80{
|
||||
min-width: 80vw;
|
||||
}
|
||||
.max80{
|
||||
max-width: 80vw;
|
||||
}
|
||||
Loading…
Reference in New Issue