<template>
  <div
    style="
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      align-content: center;
    "
  >
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        align-content: center;
      "
      @click="openMessage"
    >
      <i
        class="el-icon-message-solid"
        style="font-size: 24px; color: var(--current-color)"
      ></i>
      <!-- <el-badge
        :value="messageNumber"
        style="width: 24px; height: 24px; line-height: 24px"
      >
        
      </el-badge>  -->
      <!-- <div class="message-number-prompt">
        <p class="message-number">{{ messageNumber }}</p>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'landInfoTab',

  data() {
    return {
      // 版本号
      version: '1.0.0',
      dialogVisible: false
    };
  },
  computed: {
    menu() {}
  },
  methods: {
    openMessage(){}
  },
  mounted() {}
};
</script>
<style lang="scss">
.message-number-prompt {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.message-number {
  margin: 0px;
  background: red;
  display: flex;
  justify-content: center;
  color: white;
  align-items: center;
  padding: 0px;
  border-radius: 50%;
  font-style: normal;
  color: #fff;
  width: 1.2em;
  height: 1.2em;
  text-align: center;
  line-height: 1.2em;
  font-size: 0.8em;
}

.message-dialog-menu-data-number {
  margin: 0px;
  background: red;
  display: flex;
  justify-content: center;
  color: white;
  align-items: center;
  padding: 0px;
  border-radius: 50%;
  font-style: normal;
  color: #fff;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  font-size: 0.8em;
  // margin-top: 3.7em;
}
.message-dialog-menu-data-title {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}
.message-dialog-menu-data-title-text {
  margin-right: 5px;
  font-size: 22px;
  // margin-left: 30px;
  // margin-block-end: 0em;
  // margin-block-start: 2em;
  margin-top: 10px;
  margin-bottom: 10px;
}
.message-dialog-content-data {
  color: black;
  margin: 0px;
  font-size: 18px;
  max-width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-dialog-content-date {
  margin: 0px;
  font-size: 18px;
  color: black;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leftindex {
  margin: 0 12px 0 12px;
  padding: 2px 6px;
  border: 1px solid #47a787;
  border-radius: 3px;
  height: 20px;
  line-height: 16px;
  white-space: nowrap;
  // line-height: 20px;
  // height: 20px;
}
.message-dialog-content {
  padding: 3px 0;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
}
.message-dialog-content:hover {
  background-color: rgba(73, 165, 136, 0.1);
  .leftindex {
    background-color: #47a787;
    color: #fff;
  }
}
</style>
<style scoped lang="scss">
::v-deep .el-dialog__headerbtn .el-dialog__close {
  font-size: 26px;
}
::v-deep .el-dialog__headerbtn {
  top: 13px;
}
::v-deep.el-dialog__title {
  /* line-height: 24px; */
  font-size: 22px;
  margin-top: 5px;
  /* font-weight: 600; */
  color: #303133;
}
::v-deep .el-dialog__body {
  border-top-width: 2px;
  border-top-style: solid;
  /* padding: 10px 20px; */
  padding: 0;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  border-top-color: #909399;
}
::v-deep .el-tabs__item {
  padding: 0 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  position: relative;
  height: auto;
}
::v-deep .el-tabs__item.is-active {
  background-color: rgba(73, 165, 136, 0.2);
  color: #14a478;
  font-weight: 600;
  border-right: 5px solid #15a478;
}
::v-deep .el-tabs--left .el-tabs__active-bar.is-left {
  right: 0;
  left: auto;
  display: none;
}
::v-deep .el-tabs--left .el-tabs__nav.is-left {
  margin-bottom: 2em;
}
::v-deep .el-dialog__header {
  display: block;
  padding: 3px 0 3px 20px;
}
</style>
