editer.vue 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div class="editer">
  3. <div class="top-bar">
  4. <div class="left">
  5. <div class="project-name">{{ tupoName }}</div>
  6. <div class="project-type">/ {{ categoryName }}</div>
  7. <div class="project-save">自动保存成功- v {{ version }}</div>
  8. </div>
  9. <div class="right">
  10. <el-tooltip class="item" effect="dark" content="下载" placement="bottom">
  11. <span @click="saveTopoImg" class="icon iconfont icon-xiazai"></span>
  12. </el-tooltip>
  13. <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
  14. <span @click="saveTopo" class="icon iconfont icon-baocun"></span>
  15. </el-tooltip>
  16. <el-tooltip class="item" effect="dark" content="发布" placement="bottom">
  17. <span @click="issueTopo" class="icon iconfont icon-fabu"></span>
  18. </el-tooltip>
  19. </div>
  20. </div>
  21. <topo-editer></topo-editer>
  22. </div>
  23. </template>
  24. <script>
  25. import topoEditer from "@/components/editview/topoEditer.vue";
  26. import bus from "@/bus/bus";
  27. import { mapState } from "vuex";
  28. export default {
  29. components: { topoEditer },
  30. data() {
  31. return {
  32. categoryName: "", //项目分类
  33. };
  34. },
  35. methods: {
  36. // 保存图片
  37. saveTopo() {
  38. bus.$emit("saveTopo");
  39. },
  40. // 发布
  41. issueTopo() {
  42. bus.$emit("issueTopo");
  43. },
  44. // 下载图片
  45. saveTopoImg() {
  46. bus.$emit("saveTopoImg");
  47. },
  48. },
  49. computed: {
  50. ...mapState(["tupoName", "version"]),
  51. },
  52. mounted() {
  53. this.categoryName = decodeURI(this.$route.query.categoryName);
  54. console.log(decodeURI(decodeURI(window.location.href)));
  55. },
  56. };
  57. </script>
  58. <style lang="less" scoped>
  59. .editer {
  60. width: 100%;
  61. height: calc(~"100% - 37px");
  62. .top-bar {
  63. width: 100%;
  64. height: 36px;
  65. border-bottom: 1px solid #e4e5e7;
  66. padding: 0 20px 0 20px;
  67. box-sizing: border-box;
  68. display: flex;
  69. align-items: center;
  70. justify-content: space-between;
  71. .left {
  72. display: flex;
  73. align-items: center;
  74. .project-name {
  75. font-size: 16px;
  76. color: #1f2429;
  77. font-weight: bold;
  78. }
  79. .project-type {
  80. color: #8d9399;
  81. font-size: 14px;
  82. margin: 0 4px;
  83. }
  84. .project-save {
  85. color: #8d9399;
  86. font-size: 12px;
  87. margin-left: 16px;
  88. }
  89. }
  90. .right {
  91. span {
  92. margin-left: 20px;
  93. cursor: pointer;
  94. }
  95. }
  96. }
  97. }
  98. </style>