追格小程序个人主页作为一个访问和分享较多的页面,很多用户会有个性化的展示需求。
调整个性化展示的方法很多,我们可以通过修改页面结构,在保证功能的前提下实现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 database error Table 'wp_zhuige_xcx_promotion_log' doesn't exist近期有追格小程序用户反馈,积分商城发布产品报错,大致提示如下:WordPress database error Table 'wp_zhuige_xcx_promotion_log' doesn't exist
-
追格小程序建圈、发帖、商城发布商品报错 Warning: Undefined variable $result in追格小程序建圈、发帖、商城发布商品报错Warning: Undefined variable $result in /www/wwwroot/xly/wp-content/plugins/zhuige-xcx/public/class-zhuige-xcx-public.php on line 159
-
【重要通知】追格小程序更新提示因uni组件更新,追格小程序部分模块样式出现异常。我们已定位问题并正优化中,给您带来不便敬请谅解。感谢支持与理解!追格团队将持续努力,优化产品体验,期待更快与您相见。
-
追格小程序V2.5.0更新发布追格小程序V2.5.0版本的更新,我们没给大家添太多新花样,主要是把“内功”练好了。我们认真检查了上一版里那些组件之间的小摩擦,一点点地调整、优化,搞定了超过40多个小地方。这样一来,小程序跑起来就更顺畅了,大家用起来也会感觉更舒服、更顺手。这次虽然没大张旗鼓,但确实是让产品站得更稳、更可靠了。
-
追格小程序V2.5.8更新发布追格小程序是一款采用积木式理念的微信小程序构建框架,它巧妙融合了Uniapp与WordPress技术,打造出一个开源且无加密限制的开发环境。
暂无评论,抢个沙发...