超实用的自定义模板干货,如何对追格小程序个人主页进行快速修改
追格小程序个人主页作为一个访问和分享较多的页面,很多用户会有个性化的展示需求。
调整个性化展示的方法很多,我们可以通过修改页面结构,在保证功能的前提下实现w全自定义的展示。
也可以仅修改css,实现下图展示效果。
接下来我们来讲解如何修改css,实现以上效果
1、打开文件/user/home/home.vue
2、找到以下各css,并按说明修改即可,无需修改任何结构
.zhuige-home-bg {
height: 400rpx;
width: 100%;
position: relative;
}
改为:
.zhuige-home-bg {
height: 600rpx;
width: 100%;
position: relative;
}
.zhuige-user-title {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 10rpx;
}
改为:
.zhuige-user-title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 10rpx;
margin-top: -317rpx;
color: #FFFFFF;
}
.zhuige-user-info-block view:nth-child(1) {
position: relative;
}
改为:
.zhuige-user-info-block view:nth-child(1) {
position: relative;
text-align: center;
}
.zhuige-user-info-btn {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
改为:
.zhuige-user-info-btn {
position: absolute;
right: -30rpx;
bottom: -280rpx;
transform:scale(0.8);
margin-bottom: 20rpx;
}
.zhuige-user-count {
border-top: 1rpx solid #EEEEEE;
padding: 30rpx 10rpx;
display: flex;
align-items: center;
}
改为:
.zhuige-user-count {
border-top: 1rpx solid #EEEEEE;
padding: 30rpx 10rpx;
display: flex;
align-items: center;
color: #FFFFFF;
}
.zhuige-user-count>view {
width: 25%;
display: flex;
align-items: baseline;
}
改为:
.zhuige-user-count>view {
width: 25%;
text-align: center;
align-items: baseline;
}
.zhuige-user-count>view view {
font-size: 46rpx;
font-weight: 600;
margin-left: 4rpx;
}
改为:
.zhuige-user-count>view view {
font-size: 46rpx;
font-weight: 600;
line-height: 1.1em;
}
然后保存即可看到上图效果了!
-
WordPress后台文章/用户/评论/标签列表如何显示更多数据WordPress后台文章或用户等列表,默认每页显示20条数据,若我们想显示更多应如何设置?
-
WordPress社区论坛插件WPForo ForumWPForo Forum是一个简易的WordPress社区论坛插件,早些时候追格小编分享过bbPress社区论坛插件,有兴趣的可以看看《WordPress插件之社区论坛插件bbPress》。
-
WordPress外观自定义报错 Uncaught Exception: Supplied nav_menu_item value missing property: description近期一些小伙伴在追格小程序交流群中反馈WordPress外观自定义报错Uncaught Exception: Supplied nav_menu_item value missing property: description。
-
兔年首更:追格小程序V1.5.0发布追格小程序是一个积木式小程序搭建框架,基于Uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
WordPress小程序直播之追格小程序微信直播模块追格“直播”插件(模块)基于追格小程序(基于WordPress)和微信小程序直播组件开发,人生如戏,每个人都是生活的导演。
-
追格小程序发帖字数限制的修改方法追格小程序发帖字数,因为控件缘故,字数限制为140,若我们想修改成更多应如何处理?其实很简单,我们只需添加maxlength属性即可。
暂无评论,抢个沙发...