用 js 写前端，我的代码风格怎么样

[wisetc]

子合同信息
<template>
  <div class="x-contract-list">
    <block title="子合同信息">
      <table class="_table">
        <thead>
          <th>房源名称</th>
          <th>状态</th>
          <th>入住人</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(row, key) in data" :key="key">
            <td>北软人才公寓 301</td>
            <td>
              <span class="_ind"></span>出租中
            </td>
            <td>周茜茜</td>

            <td>
              <el-dropdown @command="cmd => handleCommand(cmd, key, row)">
                <el-button type="default">
                  操作
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">详情</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </td>
          </tr>
        </tbody>
      </table>
    </block>
  </div>
</template>

<script>
import Pair from '../components/Pair'
import mixins from '@/mixins/components'
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },

  components: {
    Pair,
  },

  mixins: [mixins],

  inject: ['root'],

  data() {
    return {}
  },

  methods: {
    handleCommand(command, key, row) {
      if (command === 'a') {
        // this.$message('click on item ' + command)
        this.root.$emit('open-contract', key, row)
      }
    },
  },
}
</script>

<style lang="scss">
.x-contract-list {
  $cellHeight: 3.2em;
  ._table {
    width: 100%;
    border-collapse: collapse;

    thead {
      border-bottom: 1px solid #e0e0e0;
    }
    th {
      color: #333333;
      font-size: 14px;
      text-align: left;
      font-weight: 500;
      height: $cellHeight;
      vertical-align: middle;
    }

    tbody {
      font-size: 14px;
      color: #666666;
    }

    tr {
      border-bottom: 1px solid #e0e0e0;
    }
    td {
      height: $cellHeight;
      vertical-align: middle;
    }
  }

  ._ind {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3cbfc4;
    margin-right: 8px;

    &._ind--orange {
      color: #fbb13f;
    }
    &._ind--red {
      color: #e52d2d;
    }
  }
}
</style>

[liyang5945]

js 还行，下面的 css 不推荐直接使用标签选择器，class 命名也不太规范

[wisetc]

@liyang5945 感谢评价，格式化是 prettier 化的，模板部分是用 prettyhtml 😏