4-vuejs2.0实战：仿豆瓣app项目,创建cell,media-cell组件

本篇将讲解cell，media-cell组件的创建。

Paste_Image.png

1.组件cell

这里的cell分为三种样式，左侧带图标，不带图标，以及左侧带竖线的cell。

每一个组件都有一个底部边框：

这里我们采用了移动端1px像素问题的解决方法：父级元素设置相对定位，构建1个伪元素,设置绝对定位， 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%.

    &:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      background: #eee;
      transform: scaleY(0.5);
    }

不同的样式，我们采用slot内容分发的方式来实现，前几章以及讲得很详细，这里就不过多的讲解

                ![](../../assets/images/ic_mine_notification.png)
                ![](../../assets/images/ic_arrow_gray_small.png)
            
            
                ![](../../assets/images/ic_arrow_gray_small.png)
            

2.组件media-cell

Paste_Image.png

这里的作者，栏目，图片通过props传递，标题描述通过slot内容分发，图片采用背景居中的方式来显示，background-position: center center;background-size: cover;

         个人意见：为什么中国没有鲍勃·迪伦这样的民谣歌手
         我们这一代人的成长年代，真正的诗歌课从来都是缺席的。

git地址：
https://github.com/MrMoveon/doubanApp

vue专题目录：
1-vuejs2.0实战：仿豆瓣app项目，创建自定义组件tabbar

2-vuejs2.0实战：仿豆瓣app项目，创建组件header,tabbar路由跳转

3-vuejs2.0实战：仿豆瓣app项目，创建Swipe图片轮播组件