(css样式)权限控制el-button是否显示 + 鼠标悬浮停留才会显示el-button

前提：

（1）当前物理席位是主任席（seatType==‘1’）

（2）管制席位TWR_ONE账号发布了内容：管制席——zhouzebiao——。。。。

（3）主任席tatai账号发布了内容：666——6666

原来是哪个账号发布的内容，自己都修改删除（只要判断item.userId == userId就行）

最新需求：

（1）在主任席登录的账号能删除修改所有人发布的。

（2）删除修改图标在鼠标悬浮的时候才会显示。

效果为：

代码：

<div class="message-panel">
    <div class="content-div">
      <div :class="['one-message-div', (seatType == '1' ||item.userId == userId) ? 'my-message' : '']"
        v-for="item in contentList"
        :key="item.id"
        @dblclick="onLookBtn(item)"
      >
        <span class="title-content-span">
          <span class="one-message-title-span">{{ item.theme }}</span> ——
          <span :title="item.content">{{ item.content }}</span>
        </span>
        <span
          class="one-btn-div delete-btn"
          @click="onDeleteBtn(item)"
          v-isLogin
          v-if="seatType == '1' || item.userId == userId"
          title="删除"
        ></span>
        <span
          class="one-btn-div edit-btn"
          @click="onEditBtn(item)"
          v-isLogin
          v-if="seatType == '1' || item.userId == userId"
          title="修改"
        ></span>
      </div>
    </div>
</div>

<style scoped>
@import "./common.css";
.message-panel {
  height: 100%;
}

.message-panel .content-div {
  width: 100%;
  height: calc(100% - 21px);
  overflow-y: auto;
}

.message-panel >>> .add-btn {
  background-image: url("~@/assets/imgs/add.png");
  width: 22px;
  height: 22px;
  float: right;
  margin-top: 2px;
  cursor: pointer;
  z-index: 2;
  margin-right: 3px;
}

.message-panel .one-message-div {
  width: 100%;
  height: 25px;
  margin-top: 10px;
  line-height: 25px;
  background: #595959;
  font-size: 14px;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

.message-panel >>> .one-btn-div {
  width: 22px;
  height: 22px;
  float: right;
  display: inline-block;
  cursor: pointer;
  display: none;
  z-index: 3;
}
.message-panel >>> .edit-btn {
  margin-right: 10px;
  background-image: url(~@/assets/imgs/edit.png);
}

.message-panel >>> .delete-btn {
  margin-right: 5px;
  background-image: url(~@/assets/imgs/delete.png);
}

.message-panel >>> .one-message-title-span {
  font-weight: 700;
}

.message-panel >>> .title-content-span {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style lang="less" scoped>
.my-message:hover {
  .one-btn-div {
    display: inline-block;
  }
  .title-content-span {
    width: calc(100% - 64px);
  }
}
</style>