Blame view

wenjuan/src/layout/components/Sidebar/Logo.vue 1.77 KB
e5b57447   杨鑫   '分包问卷'
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
  <template>
    <div class="sidebar-logo-container" :class="{ collapse: collapse }">
      <transition name="sidebarLogoFade">
        <router-link
          v-if="collapse"
          key="collapse"
          class="sidebar-logo-link"
          to="/"
        >
          <img src="../../../assets/images/logo.png" class="sidebar-logo">
          <h1 class="sidebar-title">{{ title }}</h1>
        </router-link>
        <router-link v-else key="expand" class="sidebar-logo-link" to="/">
          <img src="../../../assets/images/logo.png" class="sidebar-logo">
          <h1 class="sidebar-title">{{ title }}</h1>
        </router-link>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SidebarLogo',
    props: {
      collapse: {
        type: Boolean,
        required: true
      }
    },
d64cd58f   wesley88   上传验收小程序
30
    data () {
e5b57447   杨鑫   '分包问卷'
31
      return {
d64cd58f   wesley88   上传验收小程序
32
        title: '' // 'antisshop平台端'
e5b57447   杨鑫   '分包问卷'
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
      }
    }
  }
  </script>
  
  <style lang="scss">
  .sidebarLogoFade-enter-active {
    transition: opacity 1.5s;
  }
  
  .sidebarLogoFade-enter,
  .sidebarLogoFade-leave-to {
    opacity: 0;
  }
  
  .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: '#3f9b6a';// #2b2f3a;
    text-align: center;
    overflow: hidden;
  
    & .sidebar-logo-link {
      height: 100%;
      width: 100%;
  
      & .sidebar-logo {
        // width: 32px;
        // height: 32px;
        width:205px;
        vertical-align: middle;
        margin-right: 12px;
        height:56px;
      }
  
      & .sidebar-title {
        display: inline-block;
        margin: 0;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 19px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
      }
    }
  
    &.collapse {
      .sidebar-logo {
        margin-right: 0px;
        margin-left:-18px;
      }
    }
  }
  </style>