inleft
2022-03-02 34223b096cf6ad9d92c3702bb9529e764f523b11
commit | author | age
9bcb19 1 <template>
I 2   <div class="head-info" :class="center && 'center'">
3     <span>{{ title }}</span>
4     <p>{{ content }}</p>
5     <em v-if="bordered"/>
6   </div>
7 </template>
8
9 <script>
10 export default {
11   name: 'HeadInfo',
12   props: {
13     title: {
14       type: String,
15       default: ''
16     },
17     content: {
18       type: String,
19       default: ''
20     },
21     bordered: {
22       type: Boolean,
23       default: false
24     },
25     center: {
26       type: Boolean,
27       default: true
28     }
29   }
30 }
31 </script>
32
33 <style lang="less" scoped>
34   .head-info {
35     position: relative;
36     text-align: left;
37     padding: 0 32px 0 0;
38     min-width: 125px;
39
40     &.center {
41       text-align: center;
42       padding: 0 32px;
43     }
44
45     span {
46       color: rgba(0, 0, 0, .45);
47       display: inline-block;
48       font-size: 14px;
49       line-height: 22px;
50       margin-bottom: 4px;
51     }
52     p {
53       color: rgba(0, 0, 0, .85);
54       font-size: 24px;
55       line-height: 32px;
56       margin: 0;
57     }
58     em {
59       background-color: #e8e8e8;
60       position: absolute;
61       height: 56px;
62       width: 1px;
63       top: 0;
64       right: 0;
65     }
66   }
67 </style>