<template>
  <div class="titlePageImgComponents">
    <div class="top-title-box">
      <div class="top-img-box">
        <img class="top-img-one vibrate" src="@/assets/ZDimages/icon_bt_yso@1x.png">
        <img class="top-img-two" src="@/assets/ZDimages/icon_bt_yst@1x.png">
      </div>
      <p class="top-name-p">{{propsData.title}}</p>
      <p class="top-button-p el-icon-d-arrow-right" v-if="propsData.checkType" @click="goPage"></p>
    </div>
    <div class="top-background-box">
      <img class="top-background-img" src="@/assets/ZDimages/title-left-img.png">
      <p class="top-background-null-p"></p>
      <img class="top-background-img" src="@/assets/ZDimages/title-right-img.png">
    </div>
  </div>
</template>
<script>
  export default {
    name: 'titlePageImgComponents',
    props: {
      propsData:{},
    },
    data () {
      return {

      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      goPage(){
        this.$parent.$parent.checkComponentType(this.propsData.checkType);
      },
    },
  }
</script>
<style scoped lang="scss">
  .titlePageImgComponents{
    flex:1;
    height:62px;
    .top-title-box {
      display: flex;
      height: 40px;
      background: linear-gradient(270deg, rgba(21, 130, 124, 0) 0%, rgba(21, 130, 124, 0.2) 100%);
      .top-img-box {
        width: 60px;
        position: relative;
        .top-img-one {
          z-index:5;
          display: block;
          width:18px;
          height:20px;
          position: absolute;
          top:10px;
          left:15px;
        }
        .top-img-two{
          z-index:1;
          display: block;
          width:28px;
          height:30px;
          position: absolute;
          top:5px;
          left:25px;
        }
        .vibrate {
          position: relative;
          animation: vibrate 2s infinite;
        }

        @keyframes vibrate {
          0% {
            left:15px;
          }

          50% {
            left:20px;
          }

          100% {
            left:15px;
          }
        }
      }
      .top-name-p {
        flex: 1;
        line-height: 40px;
        color: #fff;
        font-size: 26px;
      }
      .top-button-p {
        cursor: pointer;
        width: 78px;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        color: #15827C;
      }
    }
    .top-background-box {
      height: 22px;
      display: flex;
      .top-background-img{
        display: block;
        width:40%;
        height:8px;
        margin:7px 0;
      }
      .top-background-null-p{
        flex:1;
      }
    }
  }
</style>
