前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序中按钮的样式优化修改

小程序中按钮的样式优化修改

原创
作者头像
用户6493868
发布2022-03-07 20:57:08
2.1K0
发布2022-03-07 20:57:08
举报
文章被收录于专栏:vue封装H5
效果图
2022-03-07_205448.png
2022-03-07_205448.png
wxml页面显示

在wxml文件中添加如下代码

代码语言:javascript
复制
<view class="task-box" wx:if="{{userInfo.levelid == '0' || userInfo.levelid == '1' || userInfo.levelid == '2'}}">
	<van-cell custom-style="background-color: #949494;color: #fff;"
				title="我的账本" border="{{false}}"/>
	<view class="task-container">
		<view class="item" bindtap="goToQuery">
					<image src="../../images/task-icon2.png" />
					<view class="p">订单中心</view>
		</view>
		<!-- <view class="item" bindtap="goToQuery" data-id="{{2}}">
					<image src="../../images/task-icon3.png" />
					<view class="p">已完成</view>
		</view> -->
	</view>
</view>
wxss样式修改

在wxss样式添加如下代码

代码语言:javascript
复制
.header-box {
 
  height: 160px;
  background-repeat:no-repeat;
	background-size:100% 100%;
	-moz-background-size:100% 100%;
  box-shadow: 2px 0px 6px 1px #dcdcdc;
}
.header {
    position: relative;
    display: flex;
    align-items: center;
}
.head_img {
	margin-left: 26px;
	margin-top: 7px;
  position: relative;
  float: left;
}
.avatar {
  margin-top: 18px;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 999px;
}
.header-center {
  margin-left: 405rpx;
  text-align: center;
  display: block;
  padding-top: 10px;
}
.phone {
  font-size: 20px;
  color: #ffffff;
  margin-top: -15px;
}
.renwu{
  display: flex;
  flex-direction:column;
	margin-left: 405rpx;
	margin-top: -100rpx;
}
.yg{
  display: flex;
  margin-left: -150rpx;
  margin-top: -8rpx;
}
image {
  width: 28px;
  height: 28px;
}
.p {
  color: #000;
      font-size: 13px;
    }
.h2{
  color: #fa0000;
  margin-left: -15px;
}
.task-box {
  margin: 4px 10px 4px;
  border-width: 0px;
  background: inherit;
  background-color: #fff;
  border: none;
  border-left: 0px;
  -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.349019607843137);
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.349019607843137);
  margin-top: 45rpx;
  border-radius: 10px;
}
.task-container {
  display: flex;
  justify-content: space-between;
}
.item {
  position: relative;
  flex: 1;
  border-right: 1px solid #2A2D34;
  text-align: center;
  padding: 15px 0;
}
.item:last-child{
  border: 0;
}
.span {
  position: absolute;
  right: 120rpx;
  top: 6px;
  display: block;
  padding: 0px 6px;
  background: #ffca02;
  color: #fff;
  font-size: 12px;
  border-radius: 999px;
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • wxml页面显示
  • wxss样式修改
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档