21. 尚硅谷_Mpvue_个人中心静态页面搭建

好，来我们继续啊，咱们上一节课呢，去把这个搜索的功能做完了以后呢，那我们这节课呢，来去完成个人中心的内容，好，我点击一下我写好的这个个人中心，嗯，过来以后呢，大家看啊，上面这有一部分内容，那这儿是一个card，就是卡片一样的啊呃，板块那在上面这儿呢，我们首先点击登录是会弹出一个微微信授权的弹窗，如果点拒绝没有反应，当我去点允许来，他就能拿到我当前微信的头像以及用户名称，好，我们先去实现一下这对应的布局啊，对应的布局，那这个时候呢，呃，我们先把所有的东西关掉它，那找到对应的个人中心的页面，先把这个撤掉它，为了方便调试呢，呃，来到ap.jason我们去把个人中心的。

页面放到最上边，哎，放到最上边好，那这个时候呢，来到我们的项目应该是先加载的是个人中心啊，来我们首先能把看得到的东西去给它改一改吧，第一步我们应该是去创建一个什么命点接啊命点阶就是设置一下那个窗口的文字啊，窗口的文字，那窗口的文字内容写什么呢？咱们就给他写一个个人中心啊，就给他写一个个人中心，嗯，OK。呃，写完这个个人中心以后呢，呃，来我们来看一下啊，大家看这边是不是就变过来了，好，那接下来我们再来整一下页面里面内容呢，最起码上面这我们知道有个div啊，比如说来个handleer handleer呃，在这呢，应该是有一个图片，然后呢，有一个button，那button默认是登录图片的话，我们默认用的是这一张啊static，呃，下边的image下边有个personal下面的啊personal.png来我们看一下效果，大家看这两个是不是出来了，那首先我们要去设置一下这个图片的大小，好这个时候选中它来50乘以50，那也就是说我们需要设的时候应该100乘以100，这个时候呢，先给这个外边来一个容器啊，叫personal container，好，选中它井号，诶。

选多了啊，把这个拎过来，呃，它下边的handleer下边的一面积，那应该是宽100RPX，然后呢，高呢也应该是100RPX，那这个时候我们来看一下效果啊好呃，这个图片的大小呢是设置好了，但是这个button我们之前说过啊，Button本身应该是个行列块元素，那现在呢，它是一个快计元素啊，为什么是这样呢？小程序默认给它的样式，所以呢，我们要去啊，重新设置一下它的样式啊，在这儿呢，来写一下这个，呃，Button首先display应该是什么啊，In line block，然后呢，我们来一个高度吧，比如说80RPS line也应该是80RP，同时呢，我们再给他来一个什么。

来一个rgba，那这呢也是255255255，再来个点五，呃，看一下效果吧。好，这个button是不是上来了，现在我们想要button跟图片都是在哎居中对齐，那应该怎么写呀？嗯，在这儿来都让他vertical，然后呢，Middle，同时呢，下面这也给他设一个啊，那这样的话，它俩应该是在居中对齐。

那呃，接下来我们再去调，那这除了这两个这一行，大家看是不是有一个大的背景颜色，哎，这个背景颜色呢，其实是我们的主题色啊，在这儿呢，首先我先给它来一个padding吧，比如说来个40RPS，然后呢，来一个background，找到我们对应的主题色，OK，是它啊，是它拎过来再看一眼。嗯，是不是就出来了，呃，这个图片跟button特挨得太近了，同时button特这个行高呢，有点高啊，有点高，好，那在这儿呢，我们去把这个降下来设到60，同时呢，横高也给它调成60，然后呢，跟图片有点距离，那我们这儿呢，来个marin left，比如说也来个40，哎，这样的话，基本的一个结构我们就答完了，那在这呢，我需要明一点的是，大家看这个button，我仅仅是设置了它的高度，而并没有设置它的宽度。

啊，那这是为什么呢？因为最终我们这儿要放置的什么用户的微信名啊，啊大家也知道有的人的微信名呢，特别长，就跟写论文一样啊，所以呢，在这儿我们不适合设置。呃，写死的宽度，当然了，有的微信名字特别长特别长怎么办？那这个时候呢，我们就可以啊，设置一个最大的宽度啊，去给它限制一下啊，比如说200RPX啊已经够意思了啊，够意思了，不能让它再长了，好，写完这个以后呢，我们再去把下边的那个卡片呢样式也给它写一下啊，在这儿呢，来个第二位啊card list这个下面呢，我们来一个哎，Car，好，它里边呢两个元素ex expand是左边，我们叫它，哎，扫码看出右边呢，这应该是个spend，呃，这应该是个接头。

嗯，来解头，我们看一下这个应该是出来了，扫码看书好，那这个时候呢，来去写一下对应的样式啊，我们去把头部的收起来，然后呢，在这个下边设个card的list，然后呢，再来个card，呃，首先宽度你比如说90%，呃高的话呢，我们来个60RPS，哎，横高也是60RPS marin上下，比如说10RPS左右凹two，另外呢，我们可以去给他设置一个边框，Erps solid。再来个井号一看一下。

嗯，这是不是就出来了，出来了以后来这儿好像太。留的憋距太大了，我们来个92%吧，啊或者94也行啊也行，那剩下的就是什么呢？再来个内憋距好一点，呃，Pad，比如说来个10RPS看一眼。这不就撑开了吗？撑开了以后这个箭头应该是在右侧啊，这个就比较简单了，在这儿呢，同样的还是来一个帽，然后呢，这个帽我们只需要让它浮动到我们的右侧就可以啊float right来看一眼。嗯，是不是就过来了，好，那这一节课呢，我们主要是针对于个人中心进行一个静态页面的搭建，咱们先讲到这里。