<template>
  <div class="editer">
    <div class="top-bar">
      <div class="left">
        <div class="project-name">项目名称***</div>
        <div class="project-type">/ 项目分类</div>
        <div class="project-save">自动保存成功-V2.2</div>
      </div>
      <div class="right">
        <img src="./../assets/images/download.png" alt />
        <img @click="saveTopo" src="./../assets/images/save.png" alt />
        <img @click="issueTopo" src="./../assets/images/issue.png" alt />
      </div>
    </div>
    <topo-editer></topo-editer>
  </div>
</template>
<script>
import topoEditer from "@/components/editview/topoEditer.vue";
import bus from "@/bus/bus";
export default {
  components: { topoEditer },
  data() {
    return {};
  },
  methods: {
    // 保存图片
    saveTopo() {
      bus.$emit("saveTopo");
    },
    issueTopo() {},
  },
};
</script>
<style lang="less" scoped>
.editer {
  width: 100%;
  height: calc(~"100% - 37px");
  .top-bar {
    width: 100%;
    height: 36px;
    border-bottom: 1px solid #e4e5e7;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .project-name {
        font-size: 16px;
        color: #1f2429;
        font-weight: bold;
      }
      .project-type {
        color: #8d9399;
        font-size: 14px;
        margin: 0 4px;
      }
      .project-save {
        color: #8d9399;
        font-size: 12px;
        margin-left: 16px;
      }
    }
    .right {
      img {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
