近期看有人反馈追格小程序的资讯分类略缩图该怎么改?如果是要改成下图效果,其实大家只需要对模板中的css调整便可以了。
结合页面原始的上下结构展示,我们基本上可以不修改页面结构,仅通过调整css,对列表进行任何形式的调整。
这里把如何修改为上图的方法告诉大家,详情参考以下代码(注释的是原有代码,新增的有提示)
打开文件/pages/cms/classify/classify.vue
对照代码修改即可
/** 外框 **/
.zhuige-classify-cms-block {
margin-bottom: 20rpx;
/* 新增 */
display: flex;
align-items: center;
flex-wrap: nowrap;
background-color: #FFFFFF;
border-radius: 12rpx;
padding: 20rpx;
}
/** 图片 **/
.zhuige-classify-cms-block image {
/* height: 200rpx;
width: 100%;
border-radius: 12rpx 12rpx 0 0;
display: inherit; */
/* 新增 */
height: 120rpx;
width: 120rpx;
border-radius: 12rpx;
flex: 0 0 120rpx;
}
/** 文字块 **/
.zhuige-classify-cms-text {
/* padding: 20rpx;
background: #FFFFFF;
border-radius: 0 0 12rpx 12rpx; */
/* 新增 */
width: 300rpx;
margin-left: 20rpx;
}
.zhuige-classify-cms-text view:nth-child(1) text:nth-child(2) {
font-size: 24rpx;
font-weight: 300;
height: 40rpx;
line-height: 40rpx;
border-radius: 24rpx;
padding: 0 24rpx;
margin-left: 12rpx;
color: #FF6348;
background: #FFEAE3;
/* 新增 */
white-space: nowrap;
}
-
WordPress教程菜鸟教程之WordPress主题和插件开发追格小编同学已经撰写并分享过一些相关的教程,包括WordPress主题开发教程和WordPress插件开发教程。
-
追格小程序V2.2.0两大亮点来袭,你准备好了吗?追格小程序终于迎来了两大全新功能模块的华丽登场!它们分别是圈子(圈主)管理模块和付费推广模块。
-
WordPress新手必学的10个实用小技巧WordPress新手必学的10个实用小技巧,让你轻松驾驭建站之旅!为了让新手朋友在使用WordPress时更加得心应手,追格特意整理了这些实用技巧。掌握了它们,你的WordPress之旅将会更加顺畅无阻,快来一起学习吧!
-
一为导航主题(One Nav)和追格小程序冲突的解决方法近期有小伙伴反馈,在一为导航主题(One Nav)上面安装追格小程序后,报错如下
-
如何通过链接进入小程序如何通过链接进入小程序
-
应互联网信息内容主管部门要求,建议在[小程序开发者后台-管理-成员管理]处将手机号信息补充完整后再提交代码审核追格小程序交流群里,用户反馈小程序提交审核后被驳回,提示:应互联网信息内容主管部门要求,建议在[小程序开发者后台-管理-成员管理]处将手机号信息补充完整后再提交代码审核。
暂无评论,抢个沙发...