detail.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <div class="execution">
  3. <basic-container>
  4. <div class="header">
  5. <p class="header__title">{{name}}</p>
  6. <el-button class="header__btn"
  7. type="primary"
  8. @click="breaks">关闭返回列表</el-button>
  9. </div>
  10. </basic-container>
  11. <el-scrollbar class="main">
  12. <iframe class="iframe"
  13. :src="src"></iframe>
  14. </el-scrollbar>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. data () {
  20. return {
  21. id: '',
  22. name: ''
  23. }
  24. },
  25. created () {
  26. this.id = this.$route.params.id
  27. this.name = this.$route.query.name
  28. },
  29. computed: {
  30. src () {
  31. return `${this.actUrl}${this.id}`;
  32. }
  33. },
  34. methods: {
  35. breaks () {
  36. this.$router.$avueRouter.closeTag();
  37. this.$router.push({ path: '/activti/activiti' })
  38. }
  39. }
  40. }
  41. </script>
  42. <style lang="scss" scoped>
  43. .header {
  44. position: relative;
  45. display: flex;
  46. align-items: center;
  47. &__title {
  48. font-size: 22px;
  49. }
  50. &__btn {
  51. position: absolute;
  52. right: 10px;
  53. }
  54. }
  55. .main {
  56. margin: 0 auto;
  57. width: 99%;
  58. height: 800px;
  59. background-color: #fff;
  60. padding: 20px;
  61. border-radius: 3px;
  62. box-sizing: border-box;
  63. }
  64. </style>