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="第三方登錄授權(quán)" >
          <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>