网站头部设计登录优化

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;
}

到此登陆后的美化就结束了，你学会了吗~

有需要交流的去圈子发表哈~必回~快来坐灰机 圈子