titleComp.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <div class="titleComp">
  3. <el-row>
  4. <el-col :span="6">
  5. <table>
  6. <tr>
  7. <td>适用机型</td>
  8. <td>{{titleData.type}}</td>
  9. <td>文件编号</td>
  10. <td>{{titleData.number}}</td>
  11. </tr>
  12. <tr>
  13. <td>适用部门</td>
  14. <td>{{titleData.dep}}</td>
  15. <td>文件版次</td>
  16. <td>{{titleData.version}}</td>
  17. </tr>
  18. <tr>
  19. <td>适用工序</td>
  20. <td>{{titleData.procedure}}</td>
  21. <td>页 码</td>
  22. <td>{{titleData.page}}</td>
  23. </tr>
  24. </table>
  25. </el-col>
  26. <el-col class="felx-center title" :span="12" >
  27. <div class="felx-center">
  28. <img class="img" src="@/assets/operationInstructionimgs/titleLogo.png" alt="" srcset="">
  29. <div class="titleStyle">{{ title }}</div>
  30. </div>
  31. </el-col>
  32. <el-col :span="6">
  33. <table>
  34. <tr>
  35. <td>编 制</td>
  36. <td>{{titleData.org}}</td>
  37. <td>编制日期</td>
  38. <td>{{titleData.orgDate}}</td>
  39. </tr>
  40. <tr>
  41. <td>审 核</td>
  42. <td>{{titleData.exa}}</td>
  43. <td>发行部门</td>
  44. <td>{{titleData.exaDep}}</td>
  45. </tr>
  46. <tr>
  47. <td>批 准</td>
  48. <td>{{titleData.approval}}</td>
  49. <td>发行日期</td>
  50. <td>{{titleData.approvalDate}}</td>
  51. </tr>
  52. </table>
  53. </el-col>
  54. </el-row>
  55. </div>
  56. </template>
  57. <script>
  58. export default {
  59. name: 'titleComp',
  60. props: {
  61. titleData: {
  62. type: Object,
  63. default: {}
  64. },
  65. title: {
  66. type: String,
  67. default: ''
  68. }
  69. },
  70. data() {
  71. return {
  72. }
  73. }
  74. }
  75. </script>
  76. <style scoped>
  77. .title {
  78. border-bottom: 1px solid #333;
  79. border-top: 1px solid #333;
  80. height: 70px;
  81. }
  82. .titleComp {
  83. background: #0068B8;
  84. }
  85. /* 表格样式 */
  86. table {
  87. width: 100%;
  88. border-collapse: collapse;
  89. /* 合并边框 */
  90. border: 1px solid #333;
  91. border-spacing: 0;
  92. /* border-bottom: 0; */
  93. }
  94. td {
  95. line-height: 22px;
  96. }
  97. th,
  98. td {
  99. border: 1px solid #333;
  100. /* border-bottom: 0; */
  101. padding: 0;
  102. margin: 0;
  103. text-align: center;
  104. color: #fff;
  105. font-size: 14px;
  106. }
  107. td:nth-child(2n) {
  108. width: 30%;
  109. }
  110. td:nth-child(2n -1) {
  111. width: 20%;
  112. }
  113. .felx-center {
  114. display: flex;
  115. justify-content: center;
  116. align-items: center;
  117. }
  118. .img {
  119. height: 50px;
  120. }
  121. .titleStyle {
  122. color: #FFF000;
  123. font-size: 40px;
  124. font-size: 30px;
  125. font-weight: 500;
  126. }
  127. </style>