index.vue 2.59 KB
<template>
  <div class="container">

    <div class="zan-panel">
      <div class="zan-cell">
        <div class="zan-cell__bd">
          <div class="zan-pull-right">zan-pull-right: 往右靠</div>
        </div>
      </div>

      <div class="zan-cell">
        <div class="zan-cell__bd">
          <div class="zan-text-deleted">zan-text-deleted:被删除的效果</div>
        </div>
      </div>

      <div class="zan-cell">
        <div class="zan-cell__bd">
          <div>
            <div class="zan-font-12">zan-font-12:字号12</div>
            <div class="zan-font-12 zan-font-bold">zan-font-bold:再来个加粗</div>
          </div>
        </div>
      </div>

      <div class="zan-cell">
        <div class="zan-cell__bd">
          <div>
            <div class="zan-font-16">zan-font-16:字号16</div>
            <div class="zan-font-16 zan-font-bold">zan-font-bold:再来个加粗</div>
          </div>
        </div>
      </div>

      <div class="zan-cell">
        <div class="zan-cell__bd">
          <div class="">
            <div>字体颜色</div>
            <div class="zan-c-red">zan-c-red: 红色</div>
            <div class="zan-c-gray">zan-c-gray: 灰色</div>
            <div class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</div>
            <div class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</div>
            <div class="zan-c-black">zan-c-black: 黑色</div>
            <div class="zan-c-blue">zan-c-blue: 蓝色</div>
            <div class="zan-c-green">zan-c-green: 绿色</div>
          </div>
        </div>
      </div>

      <div class="zan-cell">
        <div class="zan-cell__bd">
          <div>zan-arrow:箭头</div>
          <div class="zan-arrow"></div>
        </div>
      </div>

      <div class="zan-cell">
        <div class="zan-cell__bd">
          <div class="zan-ellipsis" style="width: 300px;">
            zan-ellipsis:单行点点点
            ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
          </div>
        </div>
      </div>

      <div class="zan-cell zan-cell--last-child">
        <div class="zan-cell__bd">
          <div class="zan-ellipsis--l2">
            zan-ellipsis--l2:单行点点点
            ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
          </div>
        </div>
      </div>

    </div>

  </div>

</template>

<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
    }
  }
</script>
<style >
</style>