添加大致模板
parent
3543dc1726
commit
3d402393b0
@ -1,2 +1,36 @@
|
|||||||
<!--subPage/chat/index.wxml-->
|
<view class="p-home-chat g_h_all g_flex_column_between">
|
||||||
<text>subPage/chat/index.wxml</text>
|
<view class="chat-content g_flex_column_end g_flex_1">
|
||||||
|
具体内容
|
||||||
|
</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>
|
||||||
@ -1 +1,202 @@
|
|||||||
/* subPage/chat/index.wxss */
|
.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%);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue