微信小程序（页面制作）

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
一，logo和客服信息布局
二，实现客服图标闪烁动画效果
三，系统客服后台添加实现

一、logo和客服信息布局

1.在微信小程序中，我们可以通过使用Flex布局来轻松地实现这种布局。
代码：wxml布局：



css布局:/头部布局样式/
.header{
display: flex;/弹性布局/
flex-direction: row;/弹性布局的方向 默认是水平方向/
justify-content: space-between;/对齐方式/
border-bottom: 2rpx solid gray;/边框 像素 线型 颜色/
align-items:center ; /交叉轴的终点对齐/
}
.imgloge{
height: 80rpx;
}
.imgtel{
height: 70rpx;
}## 标题

二，实现客服图标闪烁动画效果

要在微信小程序中实现客服图标的闪烁动画效果，你可以使用CSS动画功能。下面是一个简单的示例，展示如何创建一个闪烁的客服图标动画。

步骤 1: 准备客服图标
确保你有一个客服图标的图片文件，例如 customer_service_icon.png，并将其上传到你的小程序资源库中。

步骤 2: 编写WXML
在你的页面WXML文件中添加客服图标，并为其指定一个类名，比如 blinking-cs-icon：
在wxss中代码如下：
/* 定义一个闪烁动画 /
@keyframes txtel {
0% ,50%,100%{ opacity: 1; }
50%,75% { opacity: 0.2; }
}
/ 应用到客服图标 */
.imgtel{
height: 70rpx;
animation: txtel 2s linear infinite;/动画以线性的方式执行 infinite循环执行/
}

三、系统客服后台添加实现

1.先把微信图标添加一个按钮
在wxml中代码如下:

2.给按钮一个绝对定位让他不要乱跑
在wxss中代码如下：
.kfbth{
position: absolute;/绝对定位/
top: 0;
left: 500rpx;
height: 90rpx;
opacity: 0;
}