10. 尚硅谷_mpVue_Detail详情页静态页面搭建.avi原创

好，我们继续上课，那么上一节课呢，我们是把这个页面啊，这个页面我们数据也动态写活了，那么这节课呢，我们要做的是先把这个详情页，就是说从list的这个列表页点击跳转到详情页，这个详情页的页面我们先去画一下，好，那来到我们的web storm里边，哎，咱们把这些干扰呢，哎先全部关掉，那首先要整详情页，第一个我会先去创建一个文件夹，然后呢，在这个里边呢，还是老套路啊，在这儿呢，我们整一个组件。然后呢，再去创建一个入口文件，在这儿呢，引入哎我们的view用，然后呢是当前的这个DT组件，当前路径下的它，那接下来呢，生成哎实例，另一个view有，然后呢把它放进来，接下来哎再去挂载Dollar。

好，写完这些基本的以后呢，别忘了在这呢，我们是不是要去写一个路径啊，那为了我们上来先能看到这个页面呢，我会在这儿先去放到上面去写，哎，在这呢，我们叫它detail下边的main，然后后面加一个逗号，因为是新页面，哎，同样的道理，我是不是应该把这个关掉，然后呢，我们在这啊去启动一下，在这呢，我们先把它清一下n PM start。嗯，这边重新启动了以后呢，我们去写我们detail里面的内容，哎，那这个内容有哪些呢？啊，倒是也不难，哎，这个呢，我们比较熟悉了，比较熟悉来往这边挪一点，我们的webto挪到这，哎，我们直接对着去写，首先在上边是不是有个image啊，那为了测试的话呢，还是引入我们测试的图片，它下边的cart点几比几，那再往下，哎，这个音乐的话，我们待会去做啊往下看这一行，这一行首先我们可以给它整一个什么，哎，整一个div，哎下边呢，Static下边，Images下边，呃，ATA0，我们是不是需要一个头像，那除了头像的话，它应该有个span啊，在这儿呢，应该是这儿是新华社，哎，新华社好，复制一份，中间呢，发布于下边是一个时间，我们写个2018，先表示一下，那。

除了这一行呢，再往下那就是还有一个P标签对吧？啊，这儿呢是贾静雯啊，我的女神贾静雯姐姐。好，那么再往下的话，Div在这儿呢？首先我们可以去整一个div image，哎，这个image呢，是去找static下边的，它下边，呃，在这呢，我还需要确认，应该是在，我记得没错的话，是在image下面有个I。

一个收藏啊，还有一个什么啊收藏还有个分享，哎，所以呢，在这儿呢，我们先用哪个呢？先用这个灰色的吧，在这来粘贴一下IO下边是不是它呀，那再复制一份，哎，复制一份这个收藏的话，我们应该画成哎share好，那这个整完了以后，我再单独给他一个div，哎，这儿呢，我能确认一个事情，我呢给他一个。Class我们就叫line，哎这个呢，最后是不是要模拟这一条线啊好没问题，呃，再往下呢，这儿呢，还是要给大家说来说一下这个button，哎这个button的话，其实我们是不是就要看一下它里边的一些功能啊转发哎此文章。好，再往下的话，Div或者说是呃，Div也行，P标签也行，就最后的文本对吧，假静雯，哎，是我的女神，那这个呢，哎应该是女神，其实呢，也不追星啊，不追星，但是小时候看过那个，那叫什么。

啊，叫这个倚天屠龙记大家应该是看过啊，在那里边是绝对的女神啊好，那这些东西写完了以后呢，我们开始呢，呃，先来到我们的项目，看一下我们东西出来没有。哎，是不是差不多出来了，好，那接下来我们要去干嘛呢，去定义一些类啊这呢我们叫它detail container，那这个在这儿class detail handle头部。好，这个呢，Class，这还是叫它a date吧，呃，再往下class。呃，这个呢，我们叫什么呀，我记得还是对应的应该是公司。

好，这个呢，收藏分享collection。Share container。对吧，那下边在这儿呢，我们可以整一个它啊，就把container去掉。嗯，Button不用最后再来一个，我们来一个content OK，那整完这些以后呢，就可以去干嘛了，去写它里面的一些呃样式。首先，Detail。Container哎，Lex哎，再强调一遍，在小程序里面是特别推荐使用Lex布局的啊好，Lex我们刚刚分析的肯定是纵向，那先让它纵向去排，那么接下来呢，我们要去设置的是什么呢？是那个detail。

呃，这应该是一个下划线，我记得应该是ER对吧？啊或者说我们统一我们之前这儿是不是叫的是me家，那把这个拿走放到这儿好，那这个东西呢，大图宽的话百分百没问题，高的话呢是4602PX。然后我们要设计的是那个ATA date，哎，下边的。Image对吧，那么它下边的image的话应该是64。嗯，2PX。OK，呃，高的话呢，那不用说了，也是64，然后呢，哎，我们让它在中对齐middle OK，来我们来看一下。哎，是不是差不多出来了，那接下来还是一样的套路，给它呢，去加一个什么pad，我们来个10RPX，然后呢，它和这个文字有点距离，哎，文字有点距离，这一版呢，我们是什么三个版，那其实我们去设一个span就可以，设一个SPA就可以。

那这个时候呢，Ta did下边的span，比如说fo size，我们来个14。PX或者说是来个28RPX没问题吧，好，然后呢，我们来个market left是不是它每一个都有了，比如说我们来个六啊，或者来个十吧，10RPX来我们来看一下效果。12PX好像有点大，那还是来六吧。来走你，嗯，这是不是就差不多了，好。嗯，这边差不多了以后啊，差不多了以后，呃，我们再看一个，就是说这个文字，文字的话，我们刚刚是不是叫的是company.company对吧？那么在这呢，我们是fo size，哎来个32R PX，然后呢，Fo v让他去加粗一下，哎让他去加粗，那加粗完了以后，我们还应该设置什么，哎是不是让它距离左边有一个边距啊，那这个时候呢，给它来个。

或者是来个什么来个判定吧，嗯，我们来个12PX，因为上边哎设置的就是十。OK，那这些设完了，就是下边那个我们定位的那个图对吧，定位的那个图，首先我们得先把那个。Collection sir。它下边的image，我们是不是应该先去设一下Y，这呢是90RPX高，同样是90RPX，那这样的话图片会小一点，对吧？然后它在右侧，哎，那这个时候呢，我们可以让它这个容器，这个容器里面是不是包裹这两个图片啊，哎，让它到右侧是不是就可以，哎，在这儿呢，我们用float right就过去了。

然后呢，距离右边的话，有一点距离的话，我们来个mark，呃，这来个什么right在这呢，我们来个30RPX。好，这不是到这儿了吗？到这儿以后两个图片之间有点距离啊，再来个mark，图片之间来个20RPX，让他再往左边推一点，好，图片有了，中间是不是应该有一条线呀？啊，有一条线，那这一条线我们看一下，那怎么去实现呢？首先你要注意啊，它两边有个留白对吧，两边有留白同时呢在中间，那这个时候呢，我们会考虑使用的是定位啊首先呢，Y。

它两边有留白，这个时候我可以用百分比去做，高的话ERPX，比如说我们再来个。背景颜色，哎，先来个亮一点的，待会呢换个淡一点的好，那这个有了，那接下来我们要做的事情是什么？Position对吧？Absolute那距离上面的话啊，我们来45就可以，然后呢，Left的话，我们可以来个5%是不是就好。因为它开启了什么绝对定位，那么它的负极是不是要开相对定位啊，注意它的负极是谁呢？是这个家伙，哎，因为它的负极是不是就是它，所以呢，我们可以在这，哎在这。走，你给他呢，去开一个present relative来，那这个时候呢，我们来看一下，哎，这个线呢，是不是定到这儿了，然后它是在图片的上边，那这个时候呢，我们可以来个index为负一，是不是让它跑到下边，同时呢，这个颜色我们换个大一点的一。

这不这条线吗？啊，那这写完了以后，那这个button我再说一下啊，你看它自己居中了啊，为什么居中了，是因为它有一些什么。哎，它有一些默认的样式啊，当然了，你再写的话，你的优先级是要高于它的，要高于它默认的啊，那这个button呢，我这就不做处理了，下边呢，我们去整一下那个。内容同样的，你把photo我们来32R PX，然后呢，让他去缩进一下，也是在32R PX来个letter。SP来个3RPX，然后呢，我们再来个什么，为了好看一点，横高52PX。

啊，因为现在文字比较少啊，那这样的话呢，我们一个静态的页面，哎已经完成了，最后呢，我们去把窗口这个文字在家就可以了，哎就可以了，那这个窗口的文字配置的话呢，我们可以去找。找谁呢？找list下边。哎，就这一堆，只不过是改改就行，那这个时候在detail这我去创建个main.jason卡往前一贴，那这个呢是哎，详情页OK ctrl s1保存，哎，是不是进来了。嗯，那下边这好像，哎，我发现有个样式什么没生效啊，为什么没生效，我们来看啊，十有八九是类名不匹配。OK，那这是不是过来了呀？好，那这节课呢，我们就先讲到这里。