近期看有人反馈追格小程序的资讯分类略缩图该怎么改?如果是要改成下图效果,其实大家只需要对模板中的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主题 V1.5.5 更新产品集排序功能追格小站点评主题是一个互联网创新产品分享与点评导航主题。用户在这发掘和发布有趣的产品(网址、小程序、APP),为喜欢的点赞与点评。
-
追格小程序 V2.3.0更新发布商家名片模块等功能追格小程序是一个积木式小程序搭建框架,基于Uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
追格WordPress资讯小程序更新发布V1.6.0专为内容/资源下载场景设计,一站式解决内容和流量变现难题的WordPress资讯小程序。
-
配色新选择:小站点评色彩导航重磅发布追格小站点评主题中特别增设了"色彩导航"栏目。这一新栏目不仅集合了丰富的配色方案、渐变色,还特别融入了中国传统的色彩元素,并提供了颜色码转换工具等实用功能
-
追格企业官网主题 更新发布产品、新闻动态排序等功能追格企业官网主题(专业版)由追格开发的一款WordPress主题模板,专为企业建站和追格企业官网小程序PC配套而设计,功能集产品与服务、经典案例、新闻动态、留言反馈、公司简介、联系我们等模块,简单易用,无需懂代码。
-
追格企业官网主题(多语版)用户中心上线,未来功能更值得期待追格企业官网(多语言版)近日推出了全新的用户中心,为用户带来了更加便捷和个性化的服务体验。这个用户中心支持传统的用户名和密码注册方式,同时也提供了便捷的微信扫码登录选项,让你轻松登录。在这里,你可以轻松修改个人资料、更新密码。
暂无评论,抢个沙发...