emmm…先来清除一下我感觉不合理的项目吧。也许就是我认为,看官请随意~
杂项
模型路径:Modules>Templates>Header.php

这个功能在pc端上个人感觉很多余,所以先干掉它
查找:<div class="mobile-hidden" v-show="login" v-cloak>
(在706行)
<div class="mobile-hidden" v-show="login" v-cloak>
<button @click="showBox">'.b2_get_icon('b2-add').'</button>
</div>
修改:
字面意思也看的出来,也就是css样式手机端是hidden
(隐藏),估计就是判断768px下display:none;
其次就是vue判断是否登录显示v-show="login"
。
那么怎么弄?别问,问就是直接删除,如果你以后还想要的话注释掉也行。
登录后样式修改

老规矩,既然是样式那么文件路径Assets>fontend>style.css
素材:
欧克,第一步我们先将图片加上去。(老铁别问我图片怎么下载,信不信我死给你看)
查找:.top-user-box-drop ul li:first-child
修改:
.top-user-box-drop ul li:first-child{
width: 100%;
border: 0;
background-image: url(https://www.imhanhan.com/wp-content/uploads/2021/02/titletop.png
); background-repeat: round; padding: 20px; }
再来清除原有的背景和鼠标移动效果hover
查找.top-user-box-drop a.top-my-home
,下面添加
.top-user-box-drop ul li:first-child a{
background: initial;
background-image: none;
}
查找.top-user-box-drop ul li:first-child
下面添加
.t.top-user-box-drop ul li:first-child a{
border: none;
}
.top-user-box-drop ul li:first-child a:hover{
background: initial;
}
好了主要的部分就完事了,下面把细节调一调
最下面的登出居中,查找:.top-user-box-drop ul li:last-child a
修改:
顺便提一下,为什么修改li标签只有第一个生效?这个以后做排行榜的话,比如要给前3名设置不用的炫酷小牌牌就要用到这玩意了,不懂这个?来度娘教你什么是伪类选择器
。
.top-user-box-drop ul li:last-child a{
border:0;
justify-content: center;
}
emmm…做了上面这些,好像格子都被压扁了,那么继续…
查找:.top-user-box-drop a
修改:
.top-user-box-drop a{
display: flex;
width: 100%;
font-size: 15px;
padding: 20px 15px;
overflow: hidden;
height:100%;
border-right: 1px solid #ebeef5;
border-bottom: 1px solid #ebeef5;
color:initial;
box-sizing: border-box;
}
还是不行,顶部好像还有多出一丢丢的白色区域
查找:.top-user-box-drop
修改:
.top-user-box-drop{
position: absolute;
top:43px;
right:-22px;
width:312px;
background: #fff;
z-index: 2;
visibility: hidden;
transition: 0s max-height 0.15s linear,0.1s opacity cubic-bezier(0.39,0.575,0.565,1),0.15s transform cubic-bezier(0.1,1.26,0.83,1);
transform: perspective(1px) scale(0.7);
transform-origin: center top;
opacity: 0;
box-shadow: 0 3px 3px rgba(26,26,26,.1);
}
最后把描述的颜色换一下就完工啦~
查找:.top-user-box-drop p span.top-user-link-des
修改:
春哥也是不小心呢,竟然两个color
.top-user-box-drop p span.top-user-link-des{
display: block;
color:#636c78;
font-size: 12px;
}
用户名的颜色也改一下吧。
查找:.top-user-box-drop ul li:first-child在下面添加
.top-user-box-drop ul li:first-child b{
color: #324e90;
}
到此登陆后的美化就结束了,你学会了吗~
有需要交流的去圈子发表哈~必回~快来坐灰机 圈子
可以
学习了,非常好的站点。
积分不够啊!
这个很好看,学习下,感谢分享
好