PC端个人中心——用户侧边栏模块

2022 年 08 月 23 日

3283 次浏览

2673字数

个人中心主体部分分为左侧边栏和右侧主体信息。用 content-wrapper包裹两部分，再开启 flex布局，让其在一行显示。

 <!-- 用户中心内容区域 -->
    <div class="content-wrapper">
        <!-- 侧边栏 -->
        <aside>
            <div class="aside">
                <!-- 用户头部 -->
                <div class="user-meta">
                    <div class="pic"><img src="./uploads/avatar_1.png" alt=""></div>
                    <h4>ZAESKY</h4>
                    <p><i></i>黄金会员</p>
                </div>
                <!-- 用户菜单 -->
                <div class="user-manage">
                    <h4>我的账户</h4>
                    <div class="links">
                        <a href="">个人中心</a>
                        <a href="">个人中心</a>
                        <a href="">个人中心</a>
                        <a href="">个人中心</a>
                        <a href="">个人中心</a>
                        <a href="">个人中心</a>
                    </div>
                </div>
            </div>
        </aside>
        <!-- 右侧主体 -->
        <main>
            <div class="main">
                1
            </div>
        </main>
    </div>

样式：

body{
  background-color: #f6f6f6;
}
/* 整体布局容器 */
.content-wrapper{
  width: 1240px;
  margin: 30px auto 85px;
  display: flex;
}

/* 用户侧边栏 */
.content-wrapper aside{
  width: 227px;
 background-color: #fff;
}

/* 右侧主体 */
.content-wrapper main{
 width: 999px;
 background-color: #fff;
 margin-left: 20px;
}

/* 侧边栏用户头部 */
.aside .user-meta{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 用户头像 */
.aside .user-meta .pic{
  width: 85px;
  height: 84px;
}

.aside .user-meta .pic img{
  width: 100%;
  height: 100%;
}

.aside .user-meta h4{
  margin: 10px 0px;
}

.aside .user-meta{
  padding: 40px 0px;
}

/* 黄金会员标识 */
.aside .user-meta p{
  width: 93px;
height: 26px;
background-image: linear-gradient(264deg, 
#e05e2f 0%, 
#ea745e 95%);
border-radius: 13px;
  color: #f9f9f9;
  line-height: 26px;
  font-size: 14px;
  text-align: center;
}

.aside .user-meta p i{
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 16px;
  background: url(../images/vip_gold.png) no-repeat;
  background-size: 15px 16px;
  margin-top: -3px;
  margin-right: 5px;
}

/* 用户菜单模块 */
.aside .user-manage{
  border-top: 1px solid #f4f4f4;
  padding: 30px 0 20px 50px;
}

.aside .user-manage h4{
  height: 35px;
  font-size: 18px;
  font-weight: 400;
}

/* 侧边栏用户菜单链接 */
.aside .user-manage .links a{
  display: block;
  padding: 10px 0px;
  position: relative;
}
/* 侧边栏用户菜单链接前面的小点 */
.aside .user-manage .links a::before{
  display: none;
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -15px;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  background-color: rgb(24, 179, 127);
}

.aside .user-manage .links a:hover{
  color: rgb(24, 179, 127);
}

.aside .user-manage .links a:hover::before{
  display: block;
}

效果：

PC端个人中心——用户侧边栏模块