追格知识付费小程序文章分类界面修改教程
追格知识付费小程序分类页我们可以通过仅修改css改变显示效果,下图为原始界面。
1、打开追格知识付费小程序的category.vue在页面中找到css
.jiangqie-topic-type {
width: 49%;
margin-right: 2%;
position: relative;
}
2、然后按以下代码进行修改,修改样式如下:
//注释的是原始css,便于大家参考未做删除,具体调整后的css代码如下:
.jiangqie-topic-type {
// width: 49%;
// margin-right: 2%;
width: 100%;
position: relative;
}
.jiangqie-topic-type:nth-child(2n) {
margin-right: 0;
}
.jiangqie-topic-type image {
width: 100%;
// height: 320rpx;
height: 240rpx;
border-radius: $Q-radio;
}
.jiangqie-topic-type view {
// position: absolute;
// height: 140rpx;
// line-height: 180rpx;
height: 100rpx;
line-height: 60rpx;
// color: $Q-gradual-text-color;
text-align: center;
width: 100%;
bottom: 16rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// border-radius: 0 0 $Q-radio $Q-radio;
// background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
}
对比原始css大家可以更好的了解如何基于现有结构,通过调整css来修改UI,可以结合自己项目情况,将原始界面和修改后的界面混合,改成其他的展示形式。
相关推荐:
追格知识付费小程序发现页分类tab选中状态修改教程
-
微信小程序显示 loading 提示框API wx.showLoading微信小程序显示 loading 提示框API wx.showLoading,需主动调用 wx.hideLoading 才能关闭提示框。
-
支付宝小程序INVALID_PARAMETER(订单数据同步报错)支付宝小程序订单中心提示 INVALID_PARAMETER(参数有误,不同情况下的 sub_msg 可能不同)。
-
支付宝小程序搜索关键词提示 BIZ_ERROR(没有操作权限)支付宝小程序搜索关键词提示 BIZ_ERROR(没有操作权限),错误原因可能是搜索服务工单的 appId,其所属的商家并未授权给当前操作用户
-
WordPress插件:LoginPress注册登录页美化插件LoginPress是一个WordPress登录页美化插件,LoginPress插件在WordPress官网显示有20万+的安装量,该插件和其他登录美化页插件差不多,均可可视化修改登录页面和登录表单,自定义登录页Logo,自定义登录页面背景,自定义登录页面表单样式等。
-
微信小程序移除插屏广告关闭事件的监听函数InterstitialAd.offCloseInterstitialAd.offClose是微信小程序移除插屏广告关闭事件的监听函数。onClose 传入的监听函数。不传此参数则移除所有监听函数。
-
微信小程序wx.getExtConfig获取第三方平台自定义的数据字段wx.getExtConfig是微信小程序获取第三方平台自定义的数据字段函数。
暂无评论,抢个沙发...