<template>
  <div class="common-title">
    <span>{{ title }}</span>
    <el-icon v-if="icon" class="icon-change" @click="changeType()"><Switch /></el-icon>
  </div>
</template>

<script>
import {Switch} from "@element-plus/icons-vue";
export default {
  name: "CommonTitle",
  components:{
    Switch
  },
  props:{
    title:{

    },
    icon:{
      type:Boolean,
    }
  },
  setup(props,{emit}){
    const changeType = ()=>{
      emit('changeType')
    }
    return{
      changeType
    }
  }
}
</script>

<style scoped lang="scss">
.common-title{
  width: 375px;
  height: 37px;
  padding-left: 7px;
  background: url("@/assets/imgs/tkxbt.png") no-repeat;
  background-size: 100% 100%;
  span {
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 20px;
    color: #BBCDE6;
    opacity: 1;
    padding-left: 60px;
    background: linear-gradient(0deg, #ACE5FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .icon-change{
    position: absolute;
    right: 40px;
    font-size: 18px;
    color: #ffffff;
  }
}
</style>