<template>
  <div class="page-title-timer">
    <div class="icon">
      <img src="@/assets/images/icon/index-icon1.png" style="width: 100%; height: 100%" alt="" />
    </div>
    <div class="title" :class="leftStyle ? 'left-style' : ''">
      {{ title }}
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    /** 标题 */
    title: { type: String, required: true },
    /** 是否左对齐 */
    leftStyle: { type: Boolean, default: false },
  });
</script>

<style lang="scss" scoped>
  .page-title-timer {
    --font-size: 22px;
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 20px 15px;
    padding-right: 30px;
    background: linear-gradient(90deg, rgba(131, 231, 248, 0.4), rgba(255, 112, 112, 0.1));
    border-right: 2px solid #a1ebf8;
    border-bottom: 2px solid #a1ebf8;
    border-radius: 0 0 80px;
    box-shadow: 0 8px 32px 0 rgba(86, 201, 247, 0.4);

    .icon {
      width: var(--font-size);
      height: var(--font-size);
    }

    .title {
      padding-bottom: 4px;
      padding-left: 8px;
      font-size: var(--font-size);
      font-weight: bold;
      color: #333333;
    }
  }
</style>
