vux cell为什么title没有居左

跟文档上一样的样式效果却不同怎么回事。。。。
而且高度变大了很多

<group>
      <cell title="消息中心">
          <span slot="default"><span style="vertical-align:middle;"></span> <badge text="99"></badge></span>
      </cell>
      <cell>
          <span slot="title" class="edit-left">手机号码</span>
          <span slot="default">{{phone}}</span>
      </cell>
      <cell title="第三方登录授权" >
          <span slot="default"><img class="icon" slot="icon" src="../../assets/wx_icon.png"></span>
      </cell>
      <cell title="登录密码">
          <span slot="default"></span>
      </cell>
  </group>

图片描述

单独建一个demo，什么样式方法都没有写直接引入的vux 的组件显示的都有问题

<template>
  <div>
      <group>
          <cell title="cell" value="hello" is-link></cell>
          <cell-box is-link>
              cell-box long long long long long long long
          </cell-box>
          <cell-box>
              cell-box hello world hello world hello world
          </cell-box>
          <cell title="cell" value="hello" is-link></cell>
      </group>
  </div>
</template>

<script>
    import { Group,Cell,CellBox,Badge ,TransferDom } from 'vux'

export default {
    directives: {
        TransferDom
    },
  data () {
    return {
        menus: {
            menu1: '退出登录'
        },
        phone:'',
        showMenus: false
    }
  },
    created(){

    },
    components: {
        Group,
        Cell,
        CellBox,
        Badge
    },
    methods:{

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>

图片描述

阅读 3.6k