<template>

  <div class="orgchart-wxj">

    <div class="row">

      <span

        v-for="item in rowData"

        :key="item.id"

        class="item"

        @click="selectDeptNode(item)"

      >

        {{ item.text }}

      </span>

    </div>

  </div>

</template>

.orgchart-wxj {

  width: 100%;

  overflow-x: auto;

  display: flex;

  .row {

    display: flex;

    flex: 1;

    align-items: center;

    justify-content: center;

    width: max-content;

    .item {

      display: flex;

      align-items: center;

      justify-content: center;

      width: 130px;

      height: 100px;

      vertical-align: middle;

      background: #FF7E45;

      margin: 20px;

      padding: 0 10px;

      box-shadow: 0px 0px 5px #aaa;

      border: 1px solid #e8e8e8;

      color: #fff;

      white-space: normal;

      overflow: hidden;

    }

  }

}