Blame view

src/components/base/CardTitle.vue 1.04 KB
2caf9228   liuqimichale   公共卡片头部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
  <template>
      <div class="theme-title">
          <slot></slot>
      </div>
  </template>
  
  <script>
  export default {
    name: 'CardTitle'
  }
  </script>
  
  <style scoped lang="scss">
      .theme-title {
          margin-left: -2px;
          height: 30px;
          line-height: 30px;
          background: url("../../images/content/cardTitleBg.png") no-repeat;
          background-size: 100% 100%;
      }
  
      .theme-title span {
          margin-left: 60px;
          position: relative;
          font-size: 14px;
      }
  
      .theme-title span:before {
          content: '';
          background: url('../../images/content/cardTitleSide.png') no-repeat;
          background-size: 100% 100%;
          position: absolute;
          width: 40px;
          height: 13px;
          top: 3px;
          left: -47px;
      }
  
      .theme-title span:after {
          content: '';
          background: url('../../images/content/cardTitleSide.png') no-repeat;
          background-size: 100% 100%;
          position: absolute;
          width: 40px;
          height: 13px;
          top: 3px;
          right: -50px;
      }
  </style>