zoukankan      html  css  js  c++  java
  • vue2.0 之 douban (五)创建cell,media-cell组件

    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内容分发的方式来实现

    Index.vue

    <m-cell title="提醒" icon>
    	<img src="../../assets/images/ic_mine_notification.png" slot="icon">
    	<a href="javascript:;" slot="cell-right"><img src="../../assets/images/ic_arrow_gray_small.png" alt=""></a>
    </m-cell>
    <m-cell title="设置">
    	<a href="javascript:;" slot="cell-right"><img src="../../assets/images/ic_arrow_gray_small.png" alt=""></a>
    </m-cell>
    

    cell.vue

    <template>
      <div class="m-cell normal" :class="label">
        <div class="m-cell-title">
          <slot name="icon"></slot> {{title}}
        </div>
        <div class="m-cell-right">
          <slot name="cell-right"></slot>
        </div>
      </div>
    </template>
    <script>
      export default {
        props: {
          title: {
            type: String,
            default: ''
          },
          hot: {
            type: Boolean,
            default: false
          },
          recommend: {
            type: Boolean,
            default: false
          },
          icon: {
            type: Boolean,
            default: false
          },
          label: {
            type: String,
            default: 'normal'
          }
        }
      }
    
    </script>
    <style lang="less">
      .m-cell {
        position: relative;
        padding: 10px 5px 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          height: 1px;
          background: #eee;
          transform: scaleY(0.5);
        }
        .m-cell-title {
          font-size: 15px;
          img {
             20px;
            height: 20px;
          }
        }
        .m-cell-right {
          font-size: 12px;
          a {
            color: #666;
          }
          img {
             20px;
            height: 20px;
          }
        }
        &.normal {}
        &.hot {
          padding: 0px 5px 0px 15px;
          height: 22px;
          &:after {
            content: '';
            position: absolute;
             5px;
            left: 0;
            top: 0px;
            bottom: 0px;
            background: #ff8447;
          }
          &:before {
            height: 0
          }
        }
        &.recommend {
          padding: 0px 5px 0px 15px;
          height: 22px;
          &:after {
            content: '';
            position: absolute;
             5px;
            left: 0;
            top: 0px;
            bottom: 0px;
            background: #42bd56;
          }
          &:before {
            height: 0
          }
        }
      }
    </style>
    

    2.组件media-cell

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

    <m-cell-media author="作者:大象公会" column="来自栏目:广播精选" img="https://qnmob2.doubanio.com/img/files/file-1489047494.jpg">
      <span slot="title">个人意见:为什么中国没有鲍勃·迪伦这样的民谣歌手</span>
      <span slot="describe">我们这一代人的成长年代,真正的诗歌课从来都是缺席的。</span>
    </m-cell-media>
    

    cell-media.vue

    <template>
      <div class="m-cell-media-wrap">
        <a href="javascript:;">
          <div class="m-cell-media-top">
            <div class="m-cell-media">
              <div class="m-cell-title m-ellipsis-2">
                <slot name="title"></slot>
              </div>
              <div class="m-cell-detail m-ellipsis-2">
                <slot name='describe'></slot>
              </div>
            </div>
            <div class="m-pull-right right-img" :style="{'background-image':'url('+img+')'}">
            </div>
          </div>
          <div class="m-cell-media-bottom">
            <p v-if="author">作者:{{author}}</p>
            <p v-if="column">{{column}}</p>
          </div>
        </a>
      </div>
    </template>
    <script>
      export default {
        props: ['author', 'column', 'img']
      }
    
    </script>
    <style lang="less">
      .m-cell-media-wrap {
        display: flex;
        flex-direction: column;
        padding: 18px 20px;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          height: 1px;
          background: #eee;
          transform: scaleY(0.5);
        }
        .m-cell-media-top {
          display: flex;
          flex-direction: row;
          .m-cell-media {
            flex: 1;
            padding-right: 45px;
          }
          .m-cell-title {
            font-size: 17px;
            line-height: 22px;
            color: #333;
            font-weight: bold;
          }
          .m-cell-detail {
            font-size: 12px;
            padding-top: 12px;
            color: #939393;
          }
          .m-pull-right {
             94px;
            height: 94px;
            overflow: hidden;
            background-position: center center;
            background-size: cover;
            img {
               100%;
            }
          }
        }
        .m-cell-media-bottom {
          display: flex;
          justify-content: space-between;
          padding-top: 20px;
          margin-top: 12px;
          color: #bfbfbf;
          position: relative;
          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
             20px;
            height: 1px;
            background: #eee;
          }
        }
      }
    
    </style>
    

    .

  • 相关阅读:
    Azure HPC Pack Cluster添加辅助节点
    Azure HPC Pack 辅助节点模板配置
    Azure HPC Pack配置管理系列(PART6)
    Windows HPC Pack 2012 R2配置
    Azure HPC Pack 节点提升成域控制器
    Azure HPC Pack VM 节点创建和配置
    Azure HPC Pack 部署必要条件准备
    Azure HPC Pack 基础拓扑概述
    Azure VM 性能计数器配置
    Maven私仓配置
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7515120.html
Copyright © 2011-2022 走看看