mall-web-ssr/components/mobile/user/Admin.vue

<template>
  <div class="mobile-fix-content admin-info">
    <div class="info">
      <div class="line">
        <span>用户名：</span>
        <span v-text="info.userName"></span>
      </div>
      <div class="line">
        <span>手机：</span>
        <span v-text="info.userTel"></span>
      </div>
      <div class="line">
        <span>邮箱：</span>
        <span v-text="info.userEmail"></span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      info: {
        default: {},
        type: Object
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-fix-content {
    background: #f1f3f6;
  }
  .admin-info {
    .info {
      width: 7.1rem;
      background: #fff;
      margin: 0 auto;
      height: 3.5rem;
      padding: 0 .24rem;
      font-size: .28rem;
      border-radius: .05rem;
      margin-top: .3rem;
      .line {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 1.16rem;
        line-height: 1.16rem;
        border-bottom: .01rem solid #d9d9d9;
        &:last-child {
          border-bottom: none;
        }
        span {
          margin-left: .56rem;
          display: inline-block;
          width: 1.2rem;
          color:#666;
          &:first-child{
            color:#226ce7;
            text-align: right;
          }
        }
      }
    }
  }
</style>