<template>
    <el-card>
      <div class="header">
        <div class="inner-header flex">
          <h1>欢迎使用镇江管理后台，点击左侧开始吧～</h1>
        </div>
        <div>
          <svg
            class="waves"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28"
            preserveAspectRatio="none"
            shape-rendering="auto"
          >
            <defs>
              <path
                id="gentle-wave"
                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
              />
            </defs>
            <g class="parallax">
              <use
                xlink:href="#gentle-wave"
                x="48"
                y="0"
                fill="rgba(255,255,255,0.7)"
              />
              <use
                xlink:href="#gentle-wave"
                x="48"
                y="3"
                fill="rgba(255,255,255,0.5)"
              />
              <use
                xlink:href="#gentle-wave"
                x="48"
                y="5"
                fill="rgba(255,255,255,0.3)"
              />
              <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
            </g>
          </svg>
        </div>
      </div>
    </el-card>
  </template>
  
  <script>
  
  export default {
    data() {
      return {
      };
    },
  };
  </script>
  <style lang="stylus" scoped>
  h1
    font-family: 'Lato', sans-serif
    font-weight: 400
    letter-spacing: 2px
    font-size: 36px
  p
    font-family: 'Lato', sans-serif
    letter-spacing: 1px
    font-size: 14px
    color: #333333
  .header
    position: relative
    text-align: center
    background: linear-gradient(60deg, $elementColor 0%, $elementColor 100%)
    color: white
    background #409eff
  .inner-header
    height: 65vh
    width: 100%
    margin: 0
    padding: 0
  .flex
    /* Flexbox for containers */
    display: flex
    justify-content: center
    align-items: center
    text-align: center
  .waves
    position: relative
    width: 100%
    height: 15vh
    margin-bottom: -7px /* Fix for safari gap */
    min-height: 100px
    max-height: 150px
  .content
    position: relative
    height: 20vh
    text-align: center
    background-color: white
  /* Animation */
  .parallax > use
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
  .parallax > use:nth-child(1)
    animation-delay: -2s
    animation-duration: 7s
  .parallax > use:nth-child(2)
    animation-delay: -3s
    animation-duration: 10s
  .parallax > use:nth-child(3)
    animation-delay: -4s
    animation-duration: 13s
  .parallax > use:nth-child(4)
    animation-delay: -5s
    animation-duration: 20s
  @keyframes move-forever
    0%
      transform: translate3d(-90px, 0, 0)
    100%
      transform: translate3d(85px, 0, 0)
  </style>
  