thoth-frontend-test/src/views/monthlyReport/components/header.vue

<template>
  <el-row type="flex" class="header-wrapper-0e7a058e" justify="space-between">
    <el-col :span="12">
      <span class="title">
        <span v-if="subTitle" class="header-hover" @click="$router.push({ path: address})">{{ title + '/' }}</span>
      <span v-else>{{ title }}</span>
      <span class="subTitle">{{ subTitle }}</span>
      </span>
      <slot name="input" />
    </el-col>
    <el-col :span="12" class="right-wrapper test">
      <slot name="content" class="important-222" />
    </el-col>
  </el-row>
</template>

<script type="text/javascript">
export default {
  name: '',
  props: {
    title: {
      type: String,
      required: false,
      default: () => ''
    },
    subTitle: { type: String, required: false, default: () => '' },
    address: { type: String, required: false, default: () => '' }
  }
}
</script>

<style lang="less">
  .header-wrapper-0e7a058e {
    background-color: #ffffff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 11px #eef0f5;
    height: 60px;
    margin-bottom: 10px;

    .el-col {
      padding: 15px 30px;
      font-size: 14px;

      .header-hover:hover {
        color: #409eff;
        cursor: pointer;
      }

      .title {
        color: rgba(102, 102, 102, 1);
        line-height: 2;

        .subTitle {
          color: rgba(51, 51, 51, 1);
          margin-right: 25px;
        }
      }
    }

    .right-wrapper {
      text-align: right;

      >* {
        display: inline-block !important;
        margin-left: 10px;
      }
    }
  }

</style>