添加大致模板
parent
3543dc1726
commit
3d402393b0
@ -1,2 +1,36 @@
|
||||
<!--subPage/chat/index.wxml-->
|
||||
<text>subPage/chat/index.wxml</text>
|
||||
<view class="p-home-chat g_h_all g_flex_column_between">
|
||||
<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