authorDetail.vue 1.59 KB
<template>
  <div>
    <el-dialog title="业务功能" :visible.sync="detailVisible" width="753px">
      <div class="authordetail-box">
        <div class="authitembox">
          <div class="itemheader">识别</div>
          <div></div>
        </div>
        <div class="authitembox">
          <div class="itemheader">违法</div>
          <div></div>
        </div>
        <div class="authitembox">
          <div class="itemheader">事件</div>
          <div></div>
        </div>
        <div class="authitembox">
          <div class="itemheader">流量</div>
          <div></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="detailVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="detailVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailVisible: false,
      detailData: {}
    };
  },
  methods: {
    initahthor(data) {
      this.detailVisible = true;
      this.detailData = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.authordetail-box {
  display: flex;
}
.authitembox {
  width: 160px;
  height: 240px;
  margin-left: 15px;
  border: 1px solid #E9E9E9;
  border-radius: 4px;
}
.authitembox:first-child {
  margin-left: 0;
}
.authitembox .itemheader {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background:rgba(245,245,245,1);
  border-bottom:1px solid rgba(233,233,233,1);
  color: #222;
  font-size: 16px;
  font-weight: 600;
}
</style>