一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。
前言
大家好，上一篇文章课程分享中我们实现了juejinlike app的课程列表功能。到此为期2个多月的项目实战分享已经逐渐接近尾声，还剩下最后一个模块：“我”暂未实现，在接下来的几个分享篇幅中，我们将把这一模块的各个功能点逐一完善。由于这个模块涉及到的点比较多也比较散，因此该模块的首页我们将分两个篇幅分享，今天先来实现“我”模块的布局设计，下一次（明天）分享再进行真实数据的渲染。
布局分析
首先还是对整个页面进行布局分析。如上图所示，整个页面被切分成了好几块，并且基本每一块的内容都是拼装的而不是从数据库中读取的。下面我们来一一分析一下：
- 首先在页面的最顶部的右上角有三个按钮，分别可用来：切换背景（主题）、通知提醒和应用设置
- 接下来的模块可以理解为个人基本信息模块，我们把它分2行来看，分别包含了：个人头像、昵称、等级、获取的徽章、个人主页链接，和第二行中的点赞数、收藏数和关注者数。
- 第三个模块可以简单的理解为比较常用的菜单：
- 连续签到天数：点击进入到签到页面
- 幸运转盘：点击进入到抽奖页面
- 收集Bug：点击进入到收集Bug页面
- 福利兑换：点击进入到福利兑换页面
- 第四个模块是创作者中心，主要展示作者文章的展现、阅读和点赞数量
- 最后一个模块“更多功能”可以理解为更多菜单，点击后同样会跳转到相应的页面，这里就不一一列举了。
布局实现
整个页面的布局已经分析清楚，下面我们就按照每个模块的分析来把整体布局实现出来。
- 顶部快捷菜单 这里不需要用组件库，直接丢一个flex布局的div盒子即可，主要技术点：设置position为fixed，justify-content为flex-end
<div class="tools-box">
<van-icon name="eye-o" size="20" />
<van-icon name="bulb-o" size="20" />
<van-icon name="setting-o" size="20" />
</div>
.tools-box {
box-sizing: border-box;
position: fixed;
display: flex;
justify-content: flex-end;
top: 0;
width: 100%;
height: 20px;
& .van-icon {
margin-right: 15px;
margin-top: 10px;
}
}
- 个人基本信息 个人基本信息分为2行，首先添加一个大盒子profile-box，然后再在大盒子里添加两个子盒子作为2行内容的容器，2个盒子都是采用flex布局。第一行左边的头像和右边的个人主页设置固定宽度，中间部分自适应（flex设为1）；第二行flex布局主要技术点是让内容均匀分配空间（space-between）
<div class="profile-box">
<div class="basic-info">
<van-image
src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
round
/>
<div class="content-box">
<div class="title">
<span>红毛丹</span>
<img :src="level[6]" />
</div>
<div class="tag">8 徽章></div>
</div>
<div class="home-page">个人主页</div>
</div>
<div class="other-info">
<div>
<div class="digital">10086</div>
<div>点赞</div>
</div>
<div>
<div class="digital">10010</div>
<div>收藏</div>
</div>
<div>
<div class="digital">10000</div>
<div>关注</div>
</div>
</div>
</div>
- 常用菜单/创作者中心/更多功能 这三个模块的布局我们放在一起实现了，因为三者的布局基本是一样的都是采用flex布局，并设置内容平均分配空间（justify-content设置为space-between），然后盒子里面的内容都是上下布局。快捷菜单和更多功能都是由上面图标和下面内容组成，而创作者中心则圈都是文字内容，但也是上下布局排列。主要还是flex布局和平均分配空间，整体还算简单。
<div class="tags-box">
<div class="tag-item">
<div class="icon">
<van-icon name="sign" size="28" />
</div>
<div class="name">已签到<span style="color: #1e80ff">365天</span></div>
</div>
<div class="tag-item">
<div class="icon">
<van-icon name="award" size="28" />
</div>
<div class="name">幸运转盘</div>
</div>
<div class="tag-item">
<div class="icon">
<van-icon name="bookmark" size="28" />
</div>
<div class="name">收集Bug</div>
</div>
<div class="tag-item">
<div class="icon">
<van-icon name="gift" size="28" />
</div>
<div class="name">福利兑换</div>
</div>
</div>
<div class="creator-center">
<div class="header">
<span class="title">创作者中心</span>
<span class="arrow">
<van-icon name="arrow" size="14" />
</span>
</div>
<div class="article-box">
<div class="info-item">
<div class="title">文章展现数</div>
<div class="digital">1个亿</div>
<div class="yestday">较前日<span style="color: #1e80ff">--</span></div>
</div>
<div class="info-item">
<div class="title">文章阅读数</div>
<div class="digital">1个亿</div>
<div class="yestday">较前日<span style="color: #1e80ff">--</span></div>
</div>
<div class="info-item">
<div class="title">文章点赞数</div>
<div class="digital">1个亿</div>
<div class="yestday">较前日<span style="color: #1e80ff">--</span></div>
</div>
</div>
</div>
<div class="more-box">
<div class="header">更多功能</div>
<div class="more-item-box">
<div class="more-item" v-for="item in tags" :key="item.name">
<van-icon :name="item.icon" size="20" />
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
总结
从今天的分享开始我们进入到了本次项目实战的最后一个环节 - 个人中心的相关功能开发，本次分享我们对个人中心页面的整体布局进行了分析并实现了个人中心静态页面的编写，下一次分享中我们将让个人中心的数据活起来，即实现数据的动态加载及渲染。本次分享就到这里了，小伙伴们给个赞呗！
