123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- <template>
- <div class="titleComp">
- <el-row>
- <el-col :span="6">
- <table>
- <tr>
- <td>适用机型</td>
- <td>{{titleData.type}}</td>
- <td>文件编号</td>
- <td>{{titleData.number}}</td>
- </tr>
- <tr>
- <td>适用部门</td>
- <td>{{titleData.dep}}</td>
- <td>文件版次</td>
- <td>{{titleData.version}}</td>
- </tr>
- <tr>
- <td>适用工序</td>
- <td>{{titleData.procedure}}</td>
- <td>页 码</td>
- <td>{{titleData.page}}</td>
- </tr>
- </table>
- </el-col>
- <el-col class="felx-center title" :span="12" >
- <div class="felx-center">
- <img class="img" src="@/assets/operationInstructionimgs/titleLogo.png" alt="" srcset="">
- <div class="titleStyle">{{ title }}</div>
- </div>
- </el-col>
- <el-col :span="6">
- <table>
- <tr>
- <td>编 制</td>
- <td>{{titleData.org}}</td>
- <td>编制日期</td>
- <td>{{titleData.orgDate}}</td>
- </tr>
- <tr>
- <td>审 核</td>
- <td>{{titleData.exa}}</td>
- <td>发行部门</td>
- <td>{{titleData.exaDep}}</td>
- </tr>
- <tr>
- <td>批 准</td>
- <td>{{titleData.approval}}</td>
- <td>发行日期</td>
- <td>{{titleData.approvalDate}}</td>
- </tr>
- </table>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- export default {
- name: 'titleComp',
- props: {
- titleData: {
- type: Object,
- default: {}
- },
- title: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- }
- }
- }
- </script>
- <style scoped>
- .title {
- border-bottom: 1px solid #333;
- border-top: 1px solid #333;
- height: 70px;
- }
- .titleComp {
- background: #0068B8;
- }
- /* 表格样式 */
- table {
- width: 100%;
- border-collapse: collapse;
- /* 合并边框 */
- border: 1px solid #333;
- border-spacing: 0;
- /* border-bottom: 0; */
- }
- td {
- line-height: 22px;
- }
- th,
- td {
- border: 1px solid #333;
- /* border-bottom: 0; */
- padding: 0;
- margin: 0;
- text-align: center;
- color: #fff;
- font-size: 14px;
- }
- td:nth-child(2n) {
- width: 30%;
- }
- td:nth-child(2n -1) {
- width: 20%;
- }
- .felx-center {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .img {
- height: 50px;
- }
- .titleStyle {
- color: #FFF000;
- font-size: 40px;
- font-size: 30px;
- font-weight: 500;
- }
- </style>
|