<template>
  <div v-if="type==1" class="title-2">
    <span>{{ title }}</span>
  </div>
  <div v-if="type==2" class="title-2">
	  <div @click="handleTitleClick(0)" class="item " :class="current==0?'active':''" >
		  <span>景区购票</span>
	  </div>
	  <div @click="handleTitleClick(1)" class="item" :class="current==1?'active':''">
		  <span>直通车购票</span>
	  </div>
  </div>
</template>

<script setup>
  let current = ref(0)
  const emits = defineEmits(['changClick'])
  let props = defineProps({
    title: {
      type: String,
      default: ''
    },
	type: {
		type: Number,
		default:1
	}
  })
  const handleTitleClick = (index)=>{
	  current.value = index
	  emits('changClick',index)
  }
</script>

<style scoped lang="scss">
  .title-2 {
    width: vw(240);
    height: vh(28);
    display: flex;
    align-items: center;
    // background-image: url('@/assets/images/title-5.png');
    background-size: 100% 100%;
	.item{
		// margin-right: vw(22);
		padding:vw(5) vw(10);
    cursor: pointer;
		// border-bottom:1px solid #ccc;
	}
    &  span {
      font-weight: bold;
      font-size: vw(15);
      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
      color: transparent; /* 兼容其他浏览器 */
    }
	& .active{
		background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
		color:#fff;
		border-bottom:none;
	}
  }
</style>
