样式集（三）成功页面样式模板

a_靖

于 2020-06-18 16:29:39 发布

阅读量5k

点赞数 1

分类专栏：微信小程序 css 文章标签：结果页面样式成功页面样式结果样式模板

本文链接：https://blog.csdn.net/qq_35713752/article/details/106837802

版权

微信小程序同时被 2 个专栏收录

304 篇文章

订阅专栏

css

36 篇文章

订阅专栏

本文展示了一个小程序中用于显示业务办理结果的页面设计，包括使用wxml和wxss实现的成功图标、结果提示文本及返回首页按钮的样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上图：

成功ICON

代码：

<!--pages/result/result.wxml-->
<view>
	<image class="scc" src="/img/scc.png"></image>
	<view class="resuil">办理成功</view>
</view>
<view class="btn" catchtap="re_home">返回首页</view>

/* pages/result/result.wxss */
page{
  text-align: center;
  background-color: #ffffff;
}
.scc{
  margin-top: 100rpx;
  width: 160rpx;
  height: 160rpx;
}
.resuil{
  margin-top: 20rpx;
  font-weight: 600;
  letter-spacing: 3rpx;
  font-size: 36rpx;
}
.btn{
  width: 280rpx;
  letter-spacing: 3rpx;
  height: 70rpx;
  font-weight: 600;
  line-height: 70rpx;
  border: 2px solid #3bb270;
  color: #3bb270;
  border-radius: 10rpx;
  position: absolute;
  bottom: 200rpx;
  left: 50%;
  margin-left: -130rpx;
}